edvoyui-component-library-test-flight 0.0.216 → 0.0.217

package/dist/components/accordion/EUIAccordion.d.ts

@@ -8,6 +8,7 @@ declare function __VLS_template(): {
         'right-icon'?(_: {
             item: any;
             open: boolean;
+            toggle: () => void;
         }): any;
         content?(_: {
             item: any;
@@ -39,6 +40,10 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: StringConstructor;
         required: false;
     };
+    animateContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import('../../../node_modules/vue').ComponentOptionsMixin, import('../../../node_modules/vue').ComponentOptionsMixin, {
     "update:activeItem": (...args: any[]) => void;
 }, string, import('../../../node_modules/vue').PublicProps, Readonly<import('../../../node_modules/vue').ExtractPropTypes<{
@@ -63,6 +68,10 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: StringConstructor;
         required: false;
     };
+    animateContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:activeItem"?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -70,6 +79,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     defaultOpen: number[];
     collapse: boolean;
     accordionStyle: "grouped" | "separated";
+    animateContent: boolean;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/accordion/EUIAccordion.vue

@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <div :class="['accordion-root', { 'accordion-animated': animateContent }]">
     <div
       :class="[
         accordionStyle === 'grouped'
-          ? 'p-2 bg-gray-50 rounded-xl'
+          ? 'space-y-1'
           : 'space-y-3',
         'max-w-full transition-all duration-100 ease-in-out',
       ]"
@@ -12,27 +12,27 @@
         v-for="(item, index) in datas"
         :key="`accordion-${index}`"
         :open="openAccordions[index]"
-        @click.prevent="onClick(index)"
         :class="[
-          'box-border relative mx-auto my-0 text-base font-normal transition-colors duration-150 ease-in-out group/accordion',
+          'box-border relative mx-auto my-0 text-base font-normal transition-colors duration-150 ease-in-out group/accordion bg-white',
           accordionStyle === 'grouped'
-            ? 'rounded-lg hover:bg-gray-100 open:bg-gray-100 open:mb-4 open:last:mb-0'
-            : 'bg-white px-8 py-4 rounded-2xl hover:ring-2 hover:ring-purple-500 open:ring-2 ring-purple-700 open:shadow-lg open:shadow-purple-100',
+            ? 'rounded-lg open:mb-4 open:last:mb-0'
+            : 'rounded-2xl ring-1 ring-gray-50 hover:bg-gray-50 hover:open:bg-white open:ring-gray-100 open:shadow-md open:shadow-purple-100',
           className, item?.className,
         ]"
       >
         <summary
+          @click.prevent="onClick(index)"
           :class="[
             'flex items-center font-semibold list-none cursor-pointer select-none focus:outline-none max-w-full justify-between',
             accordionStyle === 'grouped'
-              ? 'p-4'
-              : 'group-open/accordion:pb-4 gap-6 group-open/accordion:border-b group-open/accordion:border-gray-200',
+              ? 'px-4 min-h-12 group-open/accordion:py-2'
+              : 'px-6 min-h-16 group-open/accordion:py-4 gap-6 group-open/accordion:border-b group-open/accordion:border-gray-200',
           ]"
           :aria-expanded="openAccordions[index]"
         >
           <div
             :class="[
-              'text-gray-700 transition-all duration-200 ease-in-out faq-title group-hover/accordion:text-gray-900 group-open/accordion:text-gray-900',
+              'text-gray-600 transition-all duration-200 ease-in-out faq-title group-hover/accordion:text-gray-900 group-open/accordion:text-gray-900',
               accordionStyle === 'grouped' ? 'w-11/12' : 'flex-initial w-[calc(75%-1.5rem)]',
             ]"
           >
@@ -40,31 +40,20 @@
               {{ item.title }}
             </slot>
           </div>
+
           <svg
             v-if="accordionStyle === 'grouped'"
-            xmlns="http://www.w3.org/2000/svg"
-            class="absolute text-gray-700 transition-all duration-150 ease-out pointer-events-none expand-icon group-open/accordion:text-gray-900 right-4 group-open/accordion:rotate-90"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            stroke-width="2"
-            stroke="currentColor"
-            fill="none"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-            <path d="M9 6l6 6l-6 6"></path>
+            class="absolute text-gray-700 transition-all duration-150 ease-out pointer-events-none expand-icon group-open/accordion:text-gray-900 right-4 group-open/accordion:rotate-90" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M10 8.13867C11.4619 9.20073 12.7713 10.4457 13.8942 11.8408C14.0353 12.016 14.0353 12.2613 13.8942 12.4365C12.7713 13.8316 11.4619 15.0766 10 16.1387" stroke="currentColor" stroke-opacity="0.8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
           </svg>
-          <div v-else class="flex-1 max-w-[25%] flex items-center justify-end gap-3" @click.stop>
-             <slot name="right-icon" :item="item" :open="openAccordions[index]"></slot>
+          <div v-else class="flex-1 min-w-0 max-w-[25%] flex items-center justify-end gap-3" @click.stop.prevent>
+             <slot name="right-icon" :item="item" :open="openAccordions[index]" :toggle="() => onClick(index)"></slot>
           </div>
         </summary>
         <div
-          v-if="openAccordions[index]"
+          v-if="animateContent || openAccordions[index]"
           :class="[
-            'font-light text-gray-600 transition-all duration-300 ease-in-out h-auto faq-content',
-            accordionStyle === 'grouped' ? 'p-4 pt-1' : 'pt-3',
+            'font-light text-gray-600 faq-content',
+            accordionStyle === 'grouped' ? 'px-4 pt-1 pb-3' : 'py-3 px-6',
           ]"
         >
           <slot name="content" :item="item">
@@ -101,6 +90,13 @@ const props = defineProps({
     type: String,
     required: false,
   },
+  // When true, content stays mounted and the open/close height animates
+  // smoothly. When false (default), content is lazily mounted via v-if and
+  // opens/closes instantly — preserves the original behavior.
+  animateContent: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const openAccordions = ref<boolean[]>(Array(props.datas.length).fill(false));
@@ -150,4 +146,22 @@ summary {
     display: none;
   }
 }
+
+/* Opt-in (:animateContent) smooth expand/collapse of the native <details>
+   content instead of snapping. `interpolate-size` enables animating
+   to/from `height: auto`. Without this class the accordion keeps its
+   original instant open/close behaviour. */
+.accordion-animated {
+  interpolate-size: allow-keywords;
+
+  details::details-content {
+    height: 0;
+    overflow: clip;
+    transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
+  }
+
+  details[open]::details-content {
+    height: auto;
+  }
+}
 </style>

package/dist/components/select/EUISelect.vue

@@ -882,6 +882,20 @@ const open = () => {
   }
 }
 
+/* Disabled: the control is non-interactive, so suppress the hover
+   affordances (red color change, "Clear Selected" tooltip) and block
+   clearing/deselecting. pointer-events:none stops :hover from firing,
+   so the underlying toggle's not-allowed cursor is what shows. */
+.vs--disabled {
+  .vs__clear,
+  .vs__deselect,
+  .vs__open-indicator,
+  .vs__selected {
+    pointer-events: none;
+    user-select: none;
+  }
+}
+
 .vs__selected-options {
   @apply group-focus:bg-transparent focus-within:bg-transparent border-transparent;
   background-color: v-bind(selectBG);