Drawer & Slideover (Panel Samping)

<button type="button" class="mjl-btn mjl-btn--secondary mjl-btn--md" onclick="document.getElementById('detail').showModal()">Lihat Detail</button>

<dialog id="detail" class="mjl-drawer-backdrop" aria-labelledby="detail-judul"
        onclick="if (event.target === this) this.close()">
  <div class="mjl-drawer mjl-drawer--right">
    <div class="mjl-drawer__header">
      <h2 id="detail-judul" class="mjl-drawer__title">Detail Berkas</h2>
      <button type="button" class="mjl-icon-btn" aria-label="Tutup" onclick="this.closest('dialog').close()">✕</button>
    </div>
    <div class="mjl-drawer__body">Nama pemohon: Budi Santoso</div>
    <div class="mjl-drawer__footer">
      <button type="button" class="mjl-btn mjl-btn--primary mjl-btn--md">Verifikasi</button>
    </div>
  </div>
</dialog>

<script setup lang="ts">
import { ref } from 'vue';
import { MjlDrawer, MjlButton } from '@majalengka/vue';

const buka = ref(false);
</script>

<template>
  <MjlButton variant="secondary" @click="buka = true">Lihat Detail</MjlButton>

  <MjlDrawer v-model="buka" title="Detail Berkas" side="right">
    Nama pemohon: Budi Santoso
    <template #footer>
      <MjlButton>Verifikasi</MjlButton>
    </template>
  </MjlDrawer>
</template>

import { useEffect, useId, useRef, type ReactNode } from 'react';

export function MjlDrawer({ open, title, side = 'right', onClose, children }: { open: boolean; title: string; side?: 'left' | 'right' | 'bottom'; onClose: () => void; children: ReactNode }) {
  const ref = useRef<HTMLDialogElement>(null);
  const titleId = useId();

  useEffect(() => {
    const d = ref.current;
    if (open && !d?.open) d?.showModal();
    if (!open && d?.open) d.close();
  }, [open]);

  return (
    <dialog ref={ref} className="mjl-drawer-backdrop" aria-labelledby={titleId} onClose={onClose}
      onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className={`mjl-drawer mjl-drawer--${side}`}>
        <div className="mjl-drawer__header">
          <h2 id={titleId} className="mjl-drawer__title">{title}</h2>
          <button type="button" className="mjl-icon-btn" aria-label="Tutup" onClick={onClose}>✕</button>
        </div>
        <div className="mjl-drawer__body">{children}</div>
      </div>
    </dialog>
  );
}

import { Component, ElementRef, effect, input, model, viewChild } from '@angular/core';

@Component({
  selector: 'mjl-drawer',
  standalone: true,
  template: `
    <dialog #dialog class="mjl-drawer-backdrop" aria-labelledby="drawer-title" (close)="open.set(false)"
      (click)="$event.target === dialog && open.set(false)">
      <div class="mjl-drawer mjl-drawer--{{ side() }}">
        <div class="mjl-drawer__header">
          <h2 id="drawer-title" class="mjl-drawer__title">{{ title() }}</h2>
          <button type="button" class="mjl-icon-btn" aria-label="Tutup" (click)="open.set(false)">✕</button>
        </div>
        <div class="mjl-drawer__body"><ng-content /></div>
      </div>
    </dialog>
  `,
})
export class MjlDrawer {
  open = model(false);
  title = input.required<string>();
  side = input<'left' | 'right' | 'bottom'>('right');
  dialog = viewChild.required<ElementRef<HTMLDialogElement>>('dialog');

  constructor() {
    effect(() => {
      const d = this.dialog().nativeElement;
      if (this.open() && !d.open) d.showModal();
      if (!this.open() && d.open) d.close();
    });
  }
}

<button type="button" class="mjl-btn mjl-btn--secondary mjl-btn--md" onclick="document.getElementById('detail-{{ $berkas->id }}').showModal()">
  Lihat Detail
</button>

<dialog id="detail-{{ $berkas->id }}" class="mjl-drawer-backdrop" aria-labelledby="detail-{{ $berkas->id }}-judul"
        onclick="if (event.target === this) this.close()">
  <div class="mjl-drawer mjl-drawer--right">
    <div class="mjl-drawer__header">
      <h2 id="detail-{{ $berkas->id }}-judul" class="mjl-drawer__title">Detail Berkas</h2>
      <button type="button" class="mjl-icon-btn" aria-label="Tutup" onclick="this.closest('dialog').close()">✕</button>
    </div>
    <div class="mjl-drawer__body">Nama pemohon: {{ $berkas->pemohon->nama }}</div>
  </div>
</dialog>

<?php $id = (int) $berkas['id']; ?>
<button type="button" class="mjl-btn mjl-btn--secondary mjl-btn--md" onclick="document.getElementById('detail-<?= $id ?>').showModal()">Lihat Detail</button>

<dialog id="detail-<?= $id ?>" class="mjl-drawer-backdrop" aria-labelledby="detail-<?= $id ?>-judul"
        onclick="if (event.target === this) this.close()">
  <div class="mjl-drawer mjl-drawer--right">
    <div class="mjl-drawer__header">
      <h2 id="detail-<?= $id ?>-judul" class="mjl-drawer__title">Detail Berkas</h2>
      <button type="button" class="mjl-icon-btn" aria-label="Tutup" onclick="this.closest('dialog').close()">✕</button>
    </div>
    <div class="mjl-drawer__body">Nama pemohon: <?= htmlspecialchars($berkas['nama'], ENT_QUOTES, 'UTF-8') ?></div>
  </div>
</dialog>