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

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;
@@ -35,10 +36,18 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: PropType<"grouped" | "separated">;
         default: string;
     };
+    rightIconActions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     className: {
         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<{
@@ -59,10 +68,18 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: PropType<"grouped" | "separated">;
         default: string;
     };
+    rightIconActions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     className: {
         type: StringConstructor;
         required: false;
     };
+    animateContent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:activeItem"?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -70,6 +87,8 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     defaultOpen: number[];
     collapse: boolean;
     accordionStyle: "grouped" | "separated";
+    rightIconActions: boolean;
+    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,59 +12,60 @@
         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',
-              accordionStyle === 'grouped' ? 'w-11/12' : 'flex-initial w-[calc(75%-1.5rem)]',
+              'text-gray-600 transition-all duration-200 ease-in-out faq-title group-hover/accordion:text-gray-900 group-open/accordion:text-gray-900',
+              rightIconActions
+                ? 'flex-1 min-w-0'
+                : accordionStyle === 'grouped' ? 'w-11/12' : 'flex-initial w-[calc(75%-1.5rem)]',
             ]"
           >
             <slot name="title" :item="item">
               {{ 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"
+
+          <div
+            :class="[
+              'flex items-center gap-3',
+              rightIconActions
+                ? 'justify-end shrink-0'
+                : accordionStyle === 'grouped'
+                  ? 'absolute right-4'
+                  : 'justify-end min-w-0 shrink-0',
+            ]"
+            @click="onRightSideClick"
           >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-            <path d="M9 6l6 6l-6 6"></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>
+            <slot name="right-icon" :item="item" :open="openAccordions[index]" :toggle="() => onClick(index)">
+              <svg
+                class="text-gray-500 transition-all duration-150 ease-out pointer-events-none expand-icon group-open/accordion:text-gray-900 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>
+            </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">
@@ -97,10 +98,25 @@ const props = defineProps({
     type: String as PropType<"grouped" | "separated">,
     default: "grouped",
   },
+  // When true, the `right-icon` slot becomes an interactive "actions" area:
+  // clicks inside it no longer toggle the accordion (so buttons/menus work
+  // on their own), and it renders in normal flow instead of as an absolute
+  // overlay — in both `grouped` and `separated` styles.
+  rightIconActions: {
+    type: Boolean,
+    default: false,
+  },
   className: {
     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));
@@ -127,6 +143,18 @@ onMounted(() => {
   });
 });
 
+// In actions mode, stop clicks on the right-icon side from toggling the
+// accordion: `.stop` skips the summary's managed onClick and `.prevent`
+// blocks the native <details> toggle. Slot click handlers still run (they
+// fire earlier, during bubbling). When the prop is off this is a no-op, so
+// the default chevron keeps toggling on click.
+const onRightSideClick = (e: MouseEvent) => {
+  if (props.rightIconActions) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+};
+
 const emit = defineEmits(['update:activeItem']);
 const onClick = (index: number) => {
   // openAccordions.value = openAccordions.value.map((isOpen, i) => i === index ? !isOpen : isOpen);
@@ -150,4 +178,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);