Disclosure

Kartu dengan region children yang bisa dibuka/tutup lewat trigger — bisa berdiri sendiri atau dikoordinasi oleh Accordion.

Bagian dari: vue-salayout · Family: Expandable

---

Import

import { Disclosure } from '@bpmlib/vue-salayout';

Instalasi: lihat Installation & Setup di halaman utama.

---

Usage

<script setup lang="ts">
import { Disclosure } from '@bpmlib/vue-salayout';
</script>

<template>
  <Disclosure toggle-text="Lihat Detail">
    <template #header>Riwayat Transaksi</template>

    Ringkasan singkat di body.

    <template #list>
      <ul>
        <li>Transaksi #1</li>
        <li>Transaksi #2</li>
      </ul>
    </template>
  </Disclosure>
</template>

---

API Reference

NOTE

Dibangun di atas dua composable internal: useCardFoundation (region/warna/padding, sama seperti BasicCard) dan useDisclosure (state buka/tutup + ARIA). Keduanya tidak diekspos publik. Saat Disclosure dipasang di dalam Accordion, ia otomatis mengambil accordionContext (juga internal) lewat inject dan beroperasi dalam mode controlled — lihat Expandable Family.

Disclosure

Cara Penggunaan:

Region header/footer/tag/leftSide/rightSide/body sama persis dengan BasicCard — lihat Region Anatomy. Region children di Disclosure selalu berupa trigger (baris caret + label, klik untuk toggle) diikuti panel yang berisi slot list. Kalau dipasang sebagai child langsung dari Accordion, prop defaultOpen/modelValue diabaikan — state open/close diambil alih oleh Accordion.

Accessibility:

Component ini sudah include built-in accessibility features:

• Keyboard navigation: trigger adalah <button> asli — bisa difokus, aktif dengan Enter/Space
• ARIA attributes: trigger dapat aria-expanded, panel dapat id yang direferensikan lewat aria-controls

Props

Name	Type	Default	Description
color	CardColor	'card'	Warna body, atau map warna banyak region sekaligus (termasuk trigger) Lihat selengkapnya
bodyColor	CardAccent	'card'	Warna region body, menang atas color
childrenColor	CardAccent	(family body)	Warna region children (panel + trigger-nya), menang atas color.children
headerColor	CardAccent	'primary'	Warna region header, menang atas color.header
footerColor	CardAccent	'primary'	Warna region footer, menang atas color.footer
tagColor	CardAccent	'primary'	Warna region tag, menang atas color.tag
leftSideColor	CardAccent	'primary'	Warna region leftSide, menang atas color.leftSide
rightSideColor	CardAccent	'primary'	Warna region rightSide, menang atas color.rightSide
triggerColor	CardAccent	'secondary'	Warna baris trigger (caret + label), menang atas color.trigger Lihat selengkapnya
toggleText	string	'Klik untuk Membuka/Menutup'	Label default di sebelah caret (diabaikan kalau slot trigger diisi)
defaultOpen	boolean	false	Status awal panel terbuka. Diabaikan kalau nested di Accordion
alt	CardToggle	false	Toggle shade -alt per region Lihat selengkapnya
noPadding	CardToggle	false	Hilangkan padding per region
noAnimate	boolean	false	Matikan animasi fade-in-up saat kartu muncul
overflowing	boolean	false	Clip konten yang melebihi wrapper luar
value	string	auto (item0, item1, ...)	Key stabil untuk diidentifikasi oleh Accordion induk

color & bodyColor

Sama seperti BasicCard (lihat Resolusi Warna), plus satu key tambahan yang valid di object color: trigger. Resolusi tetap: triggerColor eksplisit → color.trigger → default 'secondary'.

Contoh:

<Disclosure :color="{ body: 'success', trigger: 'success' }">
  <template #list>Isi panel</template>
</Disclosure>

Use Case: Set warna body dan trigger sekaligus dari satu object, mis. saat warna mengikuti status data (success/danger/dst).

alt

Sama seperti BasicCard (lihat Accent Palette & alt Shading), plus satu region tambahan: trigger. Region trigger secara default mengikuti shade children (base/alt), bukan hardcoded false — alt: { trigger: ... } eksplisit tetap bisa override.

Contoh:

<Disclosure :alt="{ trigger: true }">
  <template #list>Isi panel</template>
</Disclosure>

Use Case: Bedakan visual trigger dari body tanpa mengubah triggerColor.

Model

Name	Type	Default	Description
v-model	boolean	undefined	Controlled open state saat dipakai standalone (di luar Accordion)

Events

Name	Payload	Description
update:modelValue	boolean	Emit saat toggle dalam mode controlled standalone
open	-	Emit setiap kali panel bertransisi ke terbuka (tidak fire saat mount)
close	-	Emit setiap kali panel bertransisi ke tertutup (tidak fire saat mount)
toggle	boolean	Emit setiap transisi open/close, dengan state baru Lihat selengkapnya

toggle

Event gabungan yang fire di setiap transisi open/close, terlepas dari sumber state (lokal, v-model, atau Accordion).

Payload:

toggle: (isOpen: boolean) => void

Contoh:

<Disclosure @toggle="(isOpen) => console.log('Panel sekarang:', isOpen)">
  <template #list>Isi</template>
</Disclosure>

Use Case: Analytics/tracking interaksi buka-tutup tanpa perlu membedakan open/close secara terpisah.

Slots

Name	Props	Description
default	-	Konten region body
header	-	Konten region header
footer	-	Konten region footer
tag	-	Konten region tag
leftSide	-	Konten region leftSide
rightSide	-	Konten region rightSide
trigger	-	Override konten trigger (default: caret + toggleText)
list	-	Konten panel yang muncul saat terbuka

Contoh:

<Disclosure v-model="isOpen" trigger-color="primary" @open="onOpen">
  <template #header>FAQ</template>
  <template #trigger>
    <strong>Pertanyaan Umum</strong>
  </template>
  <template #list>
    <p>Jawaban ada di sini.</p>
  </template>
</Disclosure>

---

Examples

1. Standalone Controlled (v-model)

<script setup lang="ts">
import { ref } from 'vue';
const isOpen = ref(false);
</script>

<template>
  <Disclosure v-model="isOpen">
    <template #list>Panel dikontrol dari luar.</template>
  </Disclosure>
</template>

2. Custom Trigger

<Disclosure toggle-text="Lihat semua">
  <template #trigger="">
    <span>🔽 Tampilkan lebih banyak</span>
  </template>
  <template #list>Konten tambahan.</template>
</Disclosure>

NOTE

Untuk penggunaan bersama Accordion (multi-item coordinated), lihat Accordion.

---

Styling

Styling sepenuhnya self-contained — lihat Import CSS di halaman utama. Panel expand/collapse memakai animasi CSS grid bawaan (grid-template-rows: 0fr -> 1fr), tidak butuh JS animation library.

CSS Variables

Warna trigger dan region lain mengikuti token yang sama dengan BasicCard — lihat Accent Palette & alt Shading.

---

Related Components

Bagian dari family Expandable:

• Accordion — mengoordinasikan open/close beberapa Disclosure sekaligus