105 lines
2.8 KiB
Vue
105 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<h3 class="m-0">
|
|
<button
|
|
:id="headerId"
|
|
ref="headerRef"
|
|
type="button"
|
|
:class="headerClasses"
|
|
:aria-expanded="open"
|
|
:aria-controls="panelId"
|
|
:disabled="disabled"
|
|
:aria-disabled="disabled || undefined"
|
|
@click="onToggle"
|
|
@keydown.down.prevent="ctx.focusSibling(value, 1)"
|
|
@keydown.up.prevent="ctx.focusSibling(value, -1)"
|
|
>
|
|
<span>{{ title }}</span>
|
|
<IconifyIcon
|
|
icon="mdi:chevron-down"
|
|
:width="24"
|
|
class="shrink-0 transition-transform duration-200"
|
|
:class="open ? 'rotate-180' : ''"
|
|
/>
|
|
</button>
|
|
</h3>
|
|
<div
|
|
:id="panelId"
|
|
role="region"
|
|
:aria-labelledby="headerId"
|
|
class="grid transition-[grid-template-rows] duration-200 ease-out"
|
|
:class="open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
|
|
>
|
|
<div class="overflow-hidden" :inert="!open || undefined">
|
|
<div :class="panelInnerClass">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {computed, inject, onBeforeUnmount, onMounted, ref, useId} from 'vue'
|
|
import {Icon as IconifyIcon} from '@iconify/vue'
|
|
import {twMerge} from 'tailwind-merge'
|
|
import {accordionContextKey} from './context'
|
|
|
|
defineOptions({name: 'MalioAccordionItem', inheritAttrs: false})
|
|
|
|
const props = withDefaults(defineProps<{
|
|
title: string
|
|
value?: string
|
|
defaultOpen?: boolean
|
|
disabled?: boolean
|
|
headerClass?: string
|
|
panelClass?: string
|
|
}>(), {
|
|
value: '',
|
|
defaultOpen: false,
|
|
disabled: false,
|
|
headerClass: '',
|
|
panelClass: '',
|
|
})
|
|
|
|
const ctx = inject(accordionContextKey)
|
|
if (!ctx) {
|
|
throw new Error('MalioAccordionItem doit être utilisé à l\'intérieur de MalioAccordion')
|
|
}
|
|
|
|
const generatedId = useId()
|
|
const value = computed(() => props.value || `malio-accordion-item-${generatedId}`)
|
|
const headerRef = ref<HTMLButtonElement | null>(null)
|
|
const headerId = computed(() => `${ctx.baseId.value}-header-${value.value}`)
|
|
const panelId = computed(() => `${ctx.baseId.value}-panel-${value.value}`)
|
|
const open = computed(() => ctx.isOpen(value.value))
|
|
|
|
function onToggle() {
|
|
if (props.disabled) return
|
|
ctx.toggle(value.value)
|
|
}
|
|
|
|
const headerClasses = computed(() =>
|
|
twMerge(
|
|
'flex w-full items-center justify-between gap-4 px-4 py-3 text-left font-medium text-m-text transition-colors',
|
|
props.disabled ? 'cursor-not-allowed text-m-muted' : 'cursor-pointer hover:bg-m-surface',
|
|
props.headerClass,
|
|
),
|
|
)
|
|
|
|
const panelInnerClass = computed(() => twMerge('px-4 py-3 text-m-text', props.panelClass))
|
|
|
|
onMounted(() => {
|
|
ctx.register(
|
|
{
|
|
value: value.value,
|
|
getHeaderEl: () => headerRef.value,
|
|
isDisabled: () => props.disabled,
|
|
},
|
|
props.defaultOpen,
|
|
)
|
|
})
|
|
|
|
onBeforeUnmount(() => ctx.unregister(value.value))
|
|
</script>
|