Merge pull request #5 from vincent99/main

Fix accordion state
gptscript-ai · Mar 21, 2024 · 175cbb3 · 175cbb3
2 parents e073922 + b27124c
commit 175cbb3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -26,7 +26,6 @@ export default defineNuxtConfig({
       manifest:      true,
       ssrManifest:   true,
       sourcemap:     true,
-      rollupOptions: { output: { sourcemap: true } },
     },
 
     css: { devSourcemap: true },

diff --git a/src/components/Accordion.vue b/src/components/Accordion.vue
@@ -12,27 +12,38 @@ const {
   color = '',
   size = 'lg',
   title,
-  modelValue = false,
+  modelValue: initialOpen = false,
 } = defineProps<Props>()
+
+// eslint-disable-next-line func-call-spacing
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean):  void
+}>()
+
+const open = ref(initialOpen)
+
+watch(open, (val) => {
+  emit('update:modelValue', val)
+})
 </script>
 
 <template>
-  <MiniCard :body-class="modelValue ? 'p-4' : 'p-0'">
+  <MiniCard :body-class="open ? 'p-4' : 'p-0'">
     <template #header>
       <UButton
         :variant="variant"
         :size="size"
         :color="color"
-        :data-open="modelValue"
+        :data-open="open"
         class="w-full text-left block font-semibold m-0 data-[open=true]:rounded-b-none shadow-none"
-        @click="modelValue = !modelValue"
+        @click="open = !open"
       >
-        <UIcon name="i-heroicons-chevron-right align-text-top transition-all data-[open=true]:rotate-90" :data-open="modelValue" />
+        <UIcon name="i-heroicons-chevron-right align-text-top transition-all data-[open=true]:rotate-90" :data-open="open" />
         {{ title }}
       </UButton>
     </template>
 
-    <template v-if="modelValue" #default>
+    <template v-if="open" #default>
       <div class="rounded-t-none" v-bind="$attrs">
         <slot />
       </div>