Accordion

Provider yang mengoordinasikan open/close beberapa Disclosure/SimpleDisclosure sekaligus — single-open secara default, atau multi-open lewat multiple.

Bagian dari: vue-salayout · Family: Expandable

---

Import

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

Instalasi: lihat Installation & Setup di halaman utama.

---

Usage

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

<template>
  <Accordion>
    <Disclosure>
      <template #header>Bagian 1</template>
      <template #list>Isi bagian 1.</template>
    </Disclosure>
    <Disclosure>
      <template #header>Bagian 2</template>
      <template #list>Isi bagian 2.</template>
    </Disclosure>
  </Accordion>
</template>

Accordion tidak menggunakan useCardFoundation — ia hanya wrapper <div> (flex flex-col gap-4) yang menyediakan koordinasi state lewat context ke Disclosure anak, bukan region/warna sendiri.

---

API Reference

Accordion adalah provider/context controller: API sebenarnya bukan tampilan sendiri, melainkan kontrak koordinasi yang di-inject ke tiap Disclosure anak. Detail render/props visual ada di halaman Disclosure.

Accordion

Cara Penggunaan:

Setiap Disclosure/SimpleDisclosure yang dipasang sebagai descendant langsung dari Accordion otomatis mengambil context ini lewat inject dan berhenti mengelola state buka/tutupnya sendiri — defaultOpen/v-model pada instance tersebut diabaikan. Keduanya bisa dicampur bebas di dalam satu Accordion yang sama.

Provider Props

Name	Type	Default	Description
multiple	boolean	false	Izinkan lebih dari satu Disclosure anak terbuka sekaligus

Model

Name	Type	Default	Description
v-model	string[] | Partial<Record<string, boolean>>	undefined	Item mana saja yang terbuka, keyed by value tiap Disclosure (atau id posisional item0, item1, ...) Lihat selengkapnya

modelValue

Bentuknya polymorphic, tapi satu instance Accordion selalu emit balik dalam bentuk yang sama seperti nilai awal yang diberikan (default: array, kalau modelValue awalnya undefined).

type AccordionModelValue = string[] | Partial<Record<string, boolean>>;

Contoh:

<script setup lang="ts">
import { ref } from 'vue';
const openIds = ref<string[]>(['item0']);
</script>

<template>
  <Accordion v-model="openIds">
    <Disclosure value="item0">
      <template #list>Terbuka di awal.</template>
    </Disclosure>
    <Disclosure value="item1">
      <template #list>Tertutup di awal.</template>
    </Disclosure>
  </Accordion>
</template>

Use Case: Buka/tutup item secara programmatic dari luar (mis. tombol "Buka Semua"), atau persist state terbuka ke URL/localStorage.

NOTE

defaultOpen dan v-model pada Disclosure/SimpleDisclosure tidak berpengaruh saat dipasang sebagai descendant Accordion — status buka/tutup sepenuhnya diambil alih dan dikoordinasikan oleh Accordion induknya lewat context internal (bukan lewat prop instance itu sendiri).

Events

Name	Payload	Description
update:modelValue	string[] | Partial<Record<string, boolean>>	Emit tiap kali item dibuka/ditutup
toggle	(opened: string[], closed: string[])	Emit dengan diff id yang baru terbuka/tertutup Lihat selengkapnya

toggle

Payload:

toggle: (opened: string[], closed: string[]) => void

Parameters:

• opened - id yang baru menjadi terbuka pada perubahan ini
• closed - id yang baru menjadi tertutup pada perubahan ini

Contoh:

<Accordion @toggle="(opened, closed) => console.log('Dibuka:', opened, 'Ditutup:', closed)">
  <Disclosure value="a"><template #list>A</template></Disclosure>
  <Disclosure value="b"><template #list>B</template></Disclosure>
</Accordion>

Use Case: Tracking interaksi per item tanpa harus diff modelValue sendiri.

Consumed By

• Disclosure — via injectAccordionContext(), beroperasi dalam mode controlled saat nested di dalam Accordion ini
• SimpleDisclosure — via injectAccordionContext() yang sama, bisa dicampur dengan Disclosure di dalam satu Accordion

---

Examples

1. Grup Single-Open Dasar

<Accordion>
  <Disclosure v-for="item in items" :key="item.id" :value="item.id">
    <template #header>{{ item.title }}</template>
    <template #list>{{ item.content }}</template>
  </Disclosure>
</Accordion>

2. Multi-Open

<Accordion multiple>
  <Disclosure value="a"><template #list>Bisa terbuka bareng B</template></Disclosure>
  <Disclosure value="b"><template #list>Bisa terbuka bareng A</template></Disclosure>
</Accordion>

3. Campur Disclosure & SimpleDisclosure

<Accordion>
  <SimpleDisclosure value="simple">
    Klik di mana saja pada kartu ini untuk membuka.
    <template #children>Panel SimpleDisclosure.</template>
  </SimpleDisclosure>
  <Disclosure value="regular">
    <template #header>Item biasa</template>
    <template #list>Panel Disclosure.</template>
  </Disclosure>
</Accordion>

---

Related Components

Bagian dari family Expandable:

• Disclosure — standalone atau nested di dalam Accordion ini
• SimpleDisclosure — standalone atau nested di dalam Accordion ini