Merged main

packages/ui-components/src/components/layout/Disclosure.stories.ts

@@ -1,5 +1,6 @@
 import { FaceSmileIcon } from '@heroicons/vue/24/outline'
 import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
 import LayoutDisclosure from '~~/src/components/layout/Disclosure.vue'
 
 export default {
@@ -68,3 +69,28 @@ export const Warning: StoryObj = {
     color: 'warning'
   }
 }
+
+export const WithModel: StoryObj = {
+  render: (args) => ({
+    components: { LayoutDisclosure },
+    setup() {
+      const open = ref(false)
+      return { args, open }
+    },
+    template: `
+    <div>
+      <div class="mb-4">
+        <button @click="open = !open" class="btn btn-primary">Toggle Disclosure</button>
+      </div>
+      <LayoutDisclosure v-bind="args" v-model:open="open">
+        <div class="flex flex-col text-foreground space-y-4">
+          <div class="h4 font-semibold">Hello world!</div>
+          <div>Lorem ipsum blah blah blah</div>
+        </div>
+      </LayoutDisclosure>
+    </div>`
+  }),
+  args: {
+    ...Default.args
+  }
+}

packages/ui-components/src/components/layout/Disclosure.vue

@@ -1,15 +1,15 @@
 <template>
   <div>
-    <HeadlessDisclosure v-slot="{ open }">
-      <DisclosureButton :class="buttonClasses">
+    <HeadlessDisclosure>
+      <DisclosureButton :class="buttonClasses" @click="toggle">
         <div class="inline-flex items-center space-x-2">
           <Component :is="icon" v-if="icon" class="h-5 w-5" />
           <span>{{ title }}</span>
         </div>
         <ChevronUpIcon :class="!open ? 'rotate-180 transform' : ''" class="h-5 w-5" />
       </DisclosureButton>
-      <DisclosurePanel :class="panelClasses">
-        <div class="label-light">
+      <DisclosurePanel v-if="open" :class="panelClasses" static>
+        <div v-if="!lazyLoad || open" class="label-light">
           <slot>Panel contents</slot>
         </div>
       </DisclosurePanel>
@@ -36,12 +36,20 @@ const props = withDefaults(
      */
     icon?: PropAnyComponent
     color?: DisclosureColor
+    /**
+     * Whether to lazy load the panel contents only upon opening
+     */
+    lazyLoad?: boolean
   }>(),
   {
     color: 'default'
   }
 )
 
+const open = defineModel<boolean>('open', {
+  default: false
+})
+
 const buttonClasses = computed(() => {
   const classParts = [
     'pr-3 h-10 w-full flex items-center justify-between border-l-2 px-2 rounded transition',
@@ -94,4 +102,8 @@ const panelClasses = computed(() => {
 
   return classParts.join(' ')
 })
+
+const toggle = () => {
+  open.value = !open.value
+}
 </script>