SimpleDisclosure

Kartu yang seluruh body-nya jadi trigger — klik di mana saja untuk membuka panel di bawahnya, tanpa baris trigger terpisah.

Bagian dari: vue-salayout · Family: Expandable

---

Import

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

Instalasi: lihat Installation & Setup di halaman utama.

---

Usage

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

<template>
  <SimpleDisclosure>
    Klik di mana saja pada kartu ini untuk membuka panel.
    <template #children>
      <p>Isi panel muncul di sini, meluncur turun.</p>
    </template>
  </SimpleDisclosure>
</template>

---

API Reference

NOTE

Dibangun di atas dua composable internal: useCardFoundation (region/warna/padding, sama seperti BasicCard, tapi hanya dipakai untuk region body/children) dan useDisclosure (state buka/tutup + ARIA — juga diekspor publik untuk UI custom). Saat dipasang di dalam Accordion, ia otomatis mengambil accordionContext (juga internal) lewat inject dan beroperasi dalam mode controlled — lihat Expandable Family.

SimpleDisclosure

Cara Penggunaan:

Berbeda dari Disclosure, tidak ada baris trigger terpisah — default slot (region body) itu sendiri yang jadi area klik (role="button", bukan <button> asli, karena isi body bisa saja memuat elemen interaktif sendiri seperti link/button yang tidak boleh nested di dalam <button>). Region children adalah panel yang meluncur turun tepat di bawah body, tanpa indentasi. Component ini hanya punya region body/children — tidak ada header/footer/tag/leftSide/rightSide seperti BasicCard/Disclosure.

Accessibility:

Component ini sudah include built-in accessibility features:

• Keyboard navigation: trigger (role="button") bisa difokus (tabindex="0"), aktif dengan Enter/Space (di-handle manual karena bukan <button> asli)
• ARIA attributes: trigger dapat aria-expanded, panel dapat id yang direferensikan lewat aria-controls
• Focus ring: trigger punya :focus-visible ring eksplisit, karena role="button" div tidak dapat focus styling bawaan browser seperti <button> asli

Props

Name	Type	Default	Description
color	CardColor	'card'	Warna body, atau map warna body/children sekaligus
bodyColor	CardAccent	'card'	Warna region body (trigger), menang atas color
childrenColor	CardAccent	(family body)	Warna region children (panel), menang atas color.children
alt	CardToggle	false	Toggle shade -alt untuk body/children
noPadding	CardToggle	false	Hilangkan padding untuk body/children
noAnimate	boolean	false	Matikan animasi fade-in-up saat kartu muncul
overflowing	boolean	false	Clip konten yang melebihi wrapper luar
caretPosition	'left' | 'right' | 'none' | false	'left'	Posisi icon caret penanda dropdown, atau 'none'/false untuk sembunyikan Lihat selengkapnya
defaultOpen	boolean	false	Status awal panel terbuka. Diabaikan kalau nested di Accordion
value	string	auto (item0, item1, ...)	Key stabil untuk diidentifikasi oleh Accordion induk

caretPosition

Urutan DOM caret selalu tetap konten-lalu-caret (supaya screen reader membaca konten trigger dulu, terlepas dari posisi visualnya) — 'left' cuma membalik urutan visual-nya lewat flex order, bukan urutan DOM sesungguhnya. Diabaikan sepenuhnya kalau slot caret diisi — slot selalu menang karena bisa render apa saja, bukan cuma atur posisi/visibilitas.

Contoh:

<!-- caret di kanan, mengikuti konten -->
<SimpleDisclosure caret-position="right">
  Konten trigger.
  <template #children>Panel.</template>
</SimpleDisclosure>

<!-- sembunyikan caret bawaan sepenuhnya -->
<SimpleDisclosure :caret-position="false">
  Konten trigger, tanpa penanda dropdown.
  <template #children>Panel.</template>
</SimpleDisclosure>

Use Case: 'right' cocok untuk trigger dengan konten rata kiri yang panjang/bervariasi; 'none'/false untuk kasus di mana penanda dropdown sudah jelas dari konteks lain (mis. icon custom di dalam slot default).

Slots

Name	Props	Description
default	-	Konten region body — sekaligus jadi area klik trigger
caret	{ isOpen: boolean }	Override penuh icon caret bawaan Lihat selengkapnya
children	-	Konten panel yang muncul saat terbuka

caret

Scoped slot yang menerima status buka/tutup, untuk mengganti icon caret bawaan dengan apa pun.

Slot Scope:

{ isOpen: boolean }

Contoh:

<SimpleDisclosure>
  Klik untuk toggle.
  <template #caret="{ isOpen }">
    <strong>{{ isOpen ? '▲' : '▼' }}</strong>
  </template>
  <template #children>Panel.</template>
</SimpleDisclosure>

Use Case: Ganti caret bawaan dengan icon library lain, atau tampilkan indikator status yang lebih spesifik dari sekadar arah panah.

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

Contoh:

<SimpleDisclosure v-model="isOpen" body-color="primary" @open="onOpen">
  <p>Klik kartu ini untuk membuka.</p>
  <template #children>
    <p>Isi panel.</p>
  </template>
</SimpleDisclosure>

---

Examples

1. Standalone Controlled (v-model)

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

<template>
  <SimpleDisclosure v-model="isOpen">
    Konten trigger.
    <template #children>Panel dikontrol dari luar.</template>
  </SimpleDisclosure>
</template>

2. Warna Body & Children Independen

<SimpleDisclosure body-color="primary" children-color="danger">
  bodyColor="primary", childrenColor="danger" — dua family berbeda.
  <template #children>Panel ini tetap danger-alt, bukan primary-alt.</template>
</SimpleDisclosure>

NOTE

Untuk penggunaan bersama Accordion (dicampur dengan Disclosure), lihat Accordion.

---

Styling

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

CSS Variables

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

---

Related Components

Bagian dari family Expandable:

• Disclosure — punya baris trigger terpisah dari body, dipakai saat trigger butuh label/caret sendiri
• Accordion — mengoordinasikan open/close beberapa Disclosure/SimpleDisclosure sekaligus