VueUiAccordion improved features

Author: graphieros

package-lock.json

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

package.json

@@ -39,6 +39,10 @@ function toggleDetails() {
     init.value += 1;
 }
 
+const maxHeight = computed(() => {
+    return `${accordionConfig.value.maxHeight}px`
+})
+
 </script>
 
 <template>
@@ -101,13 +105,13 @@ div.vue-ui-accordion-content {
     box-sizing: border-box;
     max-height: 0;
     overflow: hidden;
-    padding: 0 10px;
-    transition: max-height 400ms ease-out, border 0ms 400ms linear, opacity 400ms ease-out;
+    transition: max-height 400ms ease-out, opacity 400ms ease-out;
 }
 
 details[open]+div.vue-ui-accordion-content {
-    max-height: 800px;
-    transition: max-height 400ms ease-out, border 0ms linear, opacity 400ms ease-out;
+    max-height: v-bind(maxHeight);
+    overflow-y: auto;
+    transition: max-height 1s ease-out, opacity 1s ease-out;
     opacity: 1;
 }
 

src/components/vue-ui-accordion.vue

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

src/default_configs.json

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