VueUiAccordion improved features

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.96",
+  "version": "2.0.97",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -3404,13 +3404,13 @@ const tableHeatmapDataset = ref([
           <BaseIcon name="fullscreen" stroke="#5f8bee"/> -->
         </template>
         <template #dev>
-          <AccordionTest>
+          <AccordionTest :config="{ open: true}">
             <template #arrow>
               <BaseIcon name="arrowRight"/>
             </template>
-            <template #title>
+            <template #title="{ isOpen }">
               <div style="font-size: 16px; font-weight: bold">
-                TITLE
+                TITLE {{ isOpen }}
               </div>
             </template>
             <template #content>
@@ -3423,9 +3423,9 @@ const tableHeatmapDataset = ref([
             <template #arrow>
               <BaseIcon name="arrowRight"/>
             </template>
-            <template #title>
+            <template #title="{ isOpen }">
               <div style="font-size: 16px; font-weight: bold">
-                TITLE
+                TITLE {{ isOpen }}
               </div>
             </template>
             <template #content>

src/App.vue

@@ -351,14 +351,14 @@ defineExpose({
     </div>
 
     <VueUiAccordion v-if="component === 'VueUiAccordion'" :config="config">
-        <template #arrow="{ backgroundColor, color, iconColor }">
-            <slot name="arrow" v-bind="{ backgroundColor, color, iconColor }"/>
+        <template #arrow="{ backgroundColor, color, iconColor, isOpen }">
+            <slot name="arrow" v-bind="{ backgroundColor, color, iconColor, isOpen }"/>
         </template>
-        <template #title="{ color }">
-            <slot name="title" v-bind="{ color }"/>
+        <template #title="{ color, isOpen }">
+            <slot name="title" v-bind="{ color, isOpen }"/>
         </template>
-        <template #content="{ backgroundColor, color }">
-            <slot name="content" v-bind="{ backgroundColor, color }"/>
+        <template #content="{ backgroundColor, color, isOpen }">
+            <slot name="content" v-bind="{ backgroundColor, color, isOpen }"/>
         </template>
     </VueUiAccordion>
 

src/components/vue-data-ui.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch, onMounted } from "vue";
 import BaseIcon from "../atoms/BaseIcon.vue";
 import { useNestedProp } from "../useNestedProp";
 import mainConfig from "../default_configs.json";
+import { createUid } from "../lib";
 
 const props = defineProps({
     config: {
@@ -22,22 +23,38 @@ const accordionConfig = computed(() => {
     });
 });
 
+const isOpen = ref(props.config.open);
+const uid = ref(createUid())
+const details = ref(null);
+const init = ref(0)
+
+onMounted(() => {
+    details.value.open = accordionConfig.value.open;
+})
+
+function toggleDetails() {
+    if(init.value > 0 || !accordionConfig.value.open) {
+        isOpen.value = !isOpen.value;
+    }
+    init.value += 1;
+}
+
 </script>
 
 <template>
-    <details>
+    <details :id="`details_${uid}`" ref="details" @toggle="toggleDetails">
         <summary>
             <div class="vue-ui-accordion-head" :style="`background:${accordionConfig.head.backgroundColor};padding:${accordionConfig.head.padding};`">
                 <div class="vue-ui-accordion-arrow">
-                    <slot name="arrow" v-if="accordionConfig.head.useArrowSlot" v-bind="{ backgroundColor: accordionConfig.head.backgroundColor, color: accordionConfig.head.color, iconColor: accordionConfig.head.iconColor }" />
+                    <slot name="arrow" v-if="accordionConfig.head.useArrowSlot" v-bind="{ backgroundColor: accordionConfig.head.backgroundColor, color: accordionConfig.head.color, iconColor: accordionConfig.head.iconColor, isOpen }" />
                     <BaseIcon name="arrowRight" v-else :stroke="accordionConfig.head.iconColor" />
                 </div>
-                <slot name="title" v-bind="{ color: accordionConfig.head.color }"/>
+                <slot name="title" v-bind="{ color: accordionConfig.head.color, isOpen }"/>
             </div>
         </summary>
     </details>
     <div class="vue-ui-accordion-content" :style="`background:${accordionConfig.body.backgroundColor};color:${accordionConfig.body.color}`">
-        <slot name="content" v-bind="{ backgroundColor: accordionConfig.body.backgroundColor, color: accordionConfig.body.color }"/>
+        <slot name="content" v-bind="{ backgroundColor: accordionConfig.body.backgroundColor, color: accordionConfig.body.color, isOpen }"/>
     </div>
 </template>
 

src/components/vue-ui-accordion.vue

@@ -3639,6 +3639,7 @@
         }
     },
     "vue_ui_accordion": {
+        "open": false,
         "head": {
             "useArrowSlot": false,
             "backgroundColor": "#FFFFFF",

src/default_configs.json

@@ -4650,6 +4650,7 @@ declare module 'vue-data-ui' {
     }>
 
     export type VueUiAccordionConfig = {
+        open?: boolean;
         head?: {
             useArrowSlot?: boolean;
             backgroundColor?: string;