edvoyui-component-library-test-flight 0.0.249 → 0.0.252

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

@@ -0,0 +1,70 @@
+import { PropType } from '../../../node_modules/vue';
+type AccordionMenuItem = {
+    id: string;
+    label: string;
+};
+type AccordionMenuSection = {
+    id: string;
+    label: string;
+    items: AccordionMenuItem[];
+};
+declare const _default: import('../../../node_modules/vue').DefineComponent<import('../../../node_modules/vue').ExtractPropTypes<{
+    items: {
+        type: PropType<AccordionMenuSection[]>;
+        default: () => never[];
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultOpen: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Controlled expanded category; takes precedence over defaultOpen when set. */
+    openSection: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Keep the expanded category title visible while a long menu scrolls. */
+    stickySectionHeaders: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import('../../../node_modules/vue').ComponentOptionsMixin, import('../../../node_modules/vue').ComponentOptionsMixin, {
+    "update:modelValue": (id: string) => any;
+    "update:open": (id: string | null) => any;
+}, string, import('../../../node_modules/vue').PublicProps, Readonly<import('../../../node_modules/vue').ExtractPropTypes<{
+    items: {
+        type: PropType<AccordionMenuSection[]>;
+        default: () => never[];
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultOpen: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Controlled expanded category; takes precedence over defaultOpen when set. */
+    openSection: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Keep the expanded category title visible while a long menu scrolls. */
+    stickySectionHeaders: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((id: string) => any) | undefined;
+    "onUpdate:open"?: ((id: string | null) => any) | undefined;
+}>, {
+    items: AccordionMenuSection[];
+    modelValue: string;
+    defaultOpen: string;
+    openSection: string;
+    stickySectionHeaders: boolean;
+}, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {}, HTMLElement>;
+export default _default;

package/dist/components/accordion/EUIAccordionMenu.vue

@@ -0,0 +1,160 @@
+<template>
+  <nav class="w-full space-y-1" aria-label="Filter categories">
+    <section v-for="section in items" :key="section.id">
+      <button
+        type="button"
+        class="flex items-center w-full gap-2 py-1 pl-4 pr-2 text-sm text-left transition-[background-color,color] duration-300 ease-out rounded min-h-8"
+        :class="
+          [
+            expandedSection === section.id
+              ? 'bg-gray-100 text-slate-900 font-semibold'
+              : 'bg-white text-gray-600 hover:bg-slate-50 font-medium',
+            stickySectionHeaders && expandedSection === section.id
+              ? 'sticky top-0 z-50 isolate !bg-gray-100'
+              : '',
+          ]
+        "
+        :aria-expanded="expandedSection === section.id"
+        @click="toggleSection(section.id)"
+      >
+        <span class="flex-1 min-w-0 truncate">{{ section.label }}</span>
+        <svg
+          class="size-5 shrink-0 transition-transform duration-350 ease-[cubic-bezier(0.15,0.3,0.25,1)]"
+          :class="expandedSection === section.id ? '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>
+      </button>
+
+      <div
+        class="grid transition-[grid-template-rows,opacity] duration-350 ease-[cubic-bezier(0.15,0.3,0.25,1)] motion-reduce:transition-none"
+        :class="
+          expandedSection === section.id
+            ? 'grid-rows-[1fr] opacity-100'
+            : 'grid-rows-[0fr] opacity-0'
+        "
+      >
+        <div class="min-h-0 overflow-hidden">
+          <div class="relative flex flex-col gap-1 pb-2 my-1 ml-4">
+            <span
+              aria-hidden="true"
+              class="absolute top-0 left-0 z-0 w-px bg-slate-200"
+              :style="treeRailStyle(section.items.length)"
+            />
+            <span
+              aria-hidden="true"
+              class="absolute top-0 left-4 right-0 z-[1] h-8 rounded-md bg-violet-50 ring-1 ring-inset ring-violet-100 transition-[transform,opacity] duration-350 ease-[cubic-bezier(0.15,0.3,0.25,1)]"
+              :class="
+                activeItem &&
+                section.items.some((item) => item.id === activeItem)
+                  ? 'opacity-100'
+                  : 'opacity-0'
+              "
+              :style="indicatorStyle(section)"
+            />
+            <button
+              v-for="item in section.items"
+              :key="item.id"
+              type="button"
+              class="relative z-[2] flex items-center w-[calc(100%-1rem)] h-8 py-0 pl-4 pr-3 ml-4 text-xs text-left transition-colors duration-200 rounded-xl before:absolute before:-left-4 before:top-0 before:h-4 before:w-4 before:rounded-bl-lg before:border-b before:border-l before:border-slate-200 before:content-[''] tracking-[-0.015em]"
+              :class="
+                activeItem === item.id
+                  ? 'text-violet-900 font-semibold'
+                  : 'text-gray-600 hover:text-gray-800 font-medium'
+              "
+              :aria-current="activeItem === item.id ? 'page' : undefined"
+              @click="selectItem(section.id, item.id)"
+            >
+              {{ item.label }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, type CSSProperties, type PropType } from "vue";
+
+type AccordionMenuItem = { id: string; label: string };
+type AccordionMenuSection = {
+  id: string;
+  label: string;
+  items: AccordionMenuItem[];
+};
+
+const props = defineProps({
+  items: { type: Array as PropType<AccordionMenuSection[]>, default: () => [] },
+  modelValue: { type: String, default: "" },
+  defaultOpen: { type: String, default: "" },
+  /** Controlled expanded category; takes precedence over defaultOpen when set. */
+  openSection: { type: String, default: "" },
+  /** Keep the expanded category title visible while a long menu scrolls. */
+  stickySectionHeaders: { type: Boolean, default: false },
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [id: string];
+  "update:open": [id: string | null];
+}>();
+const expandedSection = ref<string | null>(
+  props.openSection || props.defaultOpen || props.items[0]?.id || null,
+);
+const activeItem = computed(() => props.modelValue);
+
+watch(
+  () => props.items,
+  (items) => {
+    if (!items.some((item) => item.id === expandedSection.value))
+      expandedSection.value = items[0]?.id || null;
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.openSection,
+  (sectionId) => {
+    expandedSection.value = sectionId || null;
+  },
+);
+
+const toggleSection = (id: string) => {
+  expandedSection.value = expandedSection.value === id ? null : id;
+  emit("update:open", expandedSection.value);
+};
+
+const selectItem = (sectionId: string, itemId: string) => {
+  expandedSection.value = sectionId;
+  emit("update:open", sectionId);
+  emit("update:modelValue", itemId);
+};
+
+const SUBMENU_ROW_STEP_REM = 2.25;
+
+const indicatorStyle = (
+  section: AccordionMenuSection,
+): CSSProperties => {
+  const index = section.items.findIndex((item) => item.id === activeItem.value);
+  return {
+    transform: `translateY(${Math.max(0, index) * SUBMENU_ROW_STEP_REM}rem)`,
+  };
+};
+
+/** The rail ends at the start of the final item's curved CSS connector. */
+const treeRailStyle = (itemCount: number): CSSProperties => ({
+  height: `${Math.max(0, (itemCount - 1) * SUBMENU_ROW_STEP_REM + 0.75)}rem`,
+});
+</script>

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export { default as EUIStepperTimeline } from './stepperTimeline/EUIStepperTimel
 export { default as EUIStepperVertical } from './stepperTimeline/EUIStepperVertical';
 export { default as EUIStepperHorizontal } from './stepperTimeline/EUIStepperHorizontal';
 export { default as EUIAccordion } from './accordion/EUIAccordion';
+export { default as EUIAccordionMenu } from './accordion/EUIAccordionMenu';
 export { default as EUIPopover } from './popover/EUIPopover';
 export { default as EUIModal } from './modal/EUIModal';
 export { default as EUISlideover } from './slideover/EUISlideover';

package/dist/components/searchTagSelect/EUISearchTagSelect.d.ts

@@ -61,6 +61,7 @@ declare function __VLS_template(): {
     };
     refs: {
         componentRef: HTMLDivElement;
+        triggerRef: HTMLDivElement;
         searchInputRef: import('../../../node_modules/vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../../../node_modules/vue').ExtractPropTypes<{
             modelValue: {
                 type: (StringConstructor | NumberConstructor)[];
@@ -196,7 +197,6 @@ declare function __VLS_template(): {
             activeOptionId: string;
             expanded: boolean;
         }> | null;
-        triggerButtonRef: HTMLButtonElement;
         dropdownContentRef: HTMLDivElement;
         options: HTMLUListElement;
     };
@@ -257,6 +257,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     dropdownWidth: string;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, false, {
     componentRef: HTMLDivElement;
+    triggerRef: HTMLDivElement;
     searchInputRef: import('../../../node_modules/vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../../../node_modules/vue').ExtractPropTypes<{
         modelValue: {
             type: (StringConstructor | NumberConstructor)[];
@@ -392,7 +393,6 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         activeOptionId: string;
         expanded: boolean;
     }> | null;
-    triggerButtonRef: HTMLButtonElement;
     dropdownContentRef: HTMLDivElement;
     options: HTMLUListElement;
 }, HTMLDivElement>;

package/dist/components/searchTagSelect/EUISearchTagSelect.vue

@@ -9,23 +9,7 @@
         {{ label }} <span v-if="required" class="text-red-500">*</span>
       </label>
     </slot>
-    <Popper
-      :class="[
-        `popper-defaultstyle w-full ${popperClasses}`,
-        { 'search-tag-select--teleported': teleported },
-      ]"
-      v-bind="$attrs"
-      :show="showDropDown"
-      :arrow="!teleported"
-      closeDelay="100"
-      :offsetSkid="offsetSkid"
-      :offsetDistance="offsetDistance"
-      :placement="placement"
-      :interactive="true"
-      :auto-hide="!teleported"
-      @open:popper="handleOpen"
-      @close:popper="handleClose"
-    >
+    <div ref="triggerRef" class="w-full" v-bind="$attrs">
       <SearchInput
         v-if="showDropDown || selectedValues.length === 0"
         ref="searchInputRef"
@@ -44,7 +28,6 @@
       />
       <button
         v-else-if="!showDropDown && selectedValues.length > 0"
-        ref="triggerButtonRef"
         type="button"
         :disabled="disabled"
         class="flex items-center justify-between w-full h-10 gap-2 px-4 py-2 text-left bg-white border border-gray-200 border-solid cursor-pointer search-textstyle rounded-3xl focus-within:outline-violet-200"
@@ -93,13 +76,19 @@
           />
         </div>
       </button>
-      <template #content>
-        <Teleport to="body" :disabled="!teleported">
+    </div>
+    <Teleport to="body" :disabled="!teleported">
           <div
             v-if="showDropDown"
             ref="dropdownContentRef"
-            :class="['w-full p-3 text-sm bg-white border-2 border-gray-100 border-solid shadow-lg rounded-3xl min-w-28', confirmSelection && selectType === 'multiple' ? '' : 'overflow-y-auto max-h-72 scrollbar--hide', dropdownWidth, teleported ? 'z-[60]' : '']"
-            @click.stop
+            :class="[
+              'p-3 text-sm bg-white border-2 border-gray-100 border-solid shadow-lg rounded-3xl min-w-28',
+              confirmSelection && selectType === 'multiple' ? '' : 'overflow-y-auto max-h-72 scrollbar--hide',
+              dropdownWidth,
+              teleported ? 'z-[60]' : 'z-50',
+              'transition-opacity duration-150 ease-out',
+              dropdownReady ? 'opacity-100' : 'opacity-0 pointer-events-none',
+            ]"
           >
           <div class="flex items-center justify-between p-2 pb-0 mb-1 -mx-px -mt-3">
             <h3
@@ -276,9 +265,7 @@
             </EUIButton>
           </div>
           </div>
-        </Teleport>
-      </template>
-    </Popper>
+    </Teleport>
     <template v-if="errors && errors.length && !showDropDown">
       <EUIErrorMessage :errors="errors" :name="name" class="mt-2" />
     </template>
@@ -358,8 +345,7 @@ import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
 import EUICheckbox from "../checkbox/EUICheckbox.vue";
 import EUITag from "../tag/EUITag.vue";
 import EUIButton from "../button/EUIButton.vue";
-import Popper from "vue3-popper";
-import { createPopper, type Instance } from "@popperjs/core";
+import { createPopper, type Instance, type Placement } from "@popperjs/core";
 import CheckTick from "../../assets/svg/CheckTick.vue";
 import { XMarkIcon } from "@heroicons/vue/20/solid";
 import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
@@ -476,9 +462,10 @@ const draftValues = ref<any[]>([]);
 const options = ref<HTMLElement>();
 const searchInputRef = ref<any>();
 const componentRef = ref<HTMLElement>();
-const triggerButtonRef = ref<HTMLButtonElement>();
+const triggerRef = ref<HTMLElement>();
 const dropdownContentRef = ref<HTMLElement>();
-let teleportedPopper: Instance | undefined;
+const dropdownReady = ref(false);
+let popperInstance: Instance | null = null;
 const tagsExpanded = ref(false);
 const highlightedIndex = ref(-1);
 const listboxId = `search-tag-listbox-${getCurrentInstance()?.uid ?? 0}`;
@@ -843,44 +830,58 @@ const handleSearchKeydown = (event: KeyboardEvent) => {
   else handleSelect(item);
 };
 
-const destroyTeleportedPopper = () => {
-  teleportedPopper?.destroy();
-  teleportedPopper = undefined;
+const destroyPopper = () => {
+  popperInstance?.destroy();
+  popperInstance = null;
 };
 
-const createTeleportedPopper = () => {
-  if (!props.teleported || !dropdownContentRef.value) return;
-
-  const trigger =
-    (searchInputRef.value?.$el as HTMLElement | undefined) ||
-    triggerButtonRef.value;
-  if (!trigger) return;
+const createDropdownPopper = async () => {
+  await nextTick();
+  if (!showDropDown.value || !triggerRef.value || !dropdownContentRef.value)
+    return;
 
-  destroyTeleportedPopper();
-  teleportedPopper = createPopper(trigger, dropdownContentRef.value, {
-    placement: props.placement,
-    strategy: "fixed",
+  destroyPopper();
+  popperInstance = createPopper(triggerRef.value, dropdownContentRef.value, {
+    placement: props.placement as Placement,
+    strategy: props.teleported ? "fixed" : "absolute",
     modifiers: [
       {
         name: "offset",
         options: { offset: [Number(props.offsetSkid), Number(props.offsetDistance)] },
       },
-      { name: "flip", options: { padding: 8 } },
-      { name: "preventOverflow", options: { padding: 8 } },
+      {
+        name: "flip",
+        options: {
+          padding: 8,
+          fallbackPlacements: ["bottom-start", "top-start", "bottom-end", "top-end"],
+        },
+      },
+      {
+        name: "preventOverflow",
+        options: {
+          boundary: "viewport",
+          rootBoundary: "viewport",
+          padding: 8,
+          altAxis: true,
+          tether: true,
+        },
+      },
       {
         name: "sameWidth",
-        enabled: true,
+        enabled: !props.dropdownWidth,
         phase: "beforeWrite",
         requires: ["computeStyles"],
         fn: ({ state }) => {
           state.styles.popper.width = `${state.rects.reference.width}px`;
         },
       },
+      { name: "eventListeners", options: { scroll: true, resize: true } },
     ],
   });
+  await popperInstance.update();
 };
 
-const handleOpen = () => {
+const handleOpen = async () => {
   if (props.disabled || showDropDown.value) return;
 
   highlightedIndex.value = -1;
@@ -893,13 +894,15 @@ const handleOpen = () => {
   if (props.selectType === "single") {
     internalSearch.value = "";
   }
+  dropdownReady.value = false;
   showDropDown.value = true;
-  window.addEventListener("scroll", handleScroll, true);
+  await createDropdownPopper();
+  if (!showDropDown.value) return;
+  dropdownReady.value = true;
   emit("open");
 
   nextTick(() => {
     if (!showDropDown.value) return;
-    createTeleportedPopper();
     focusTimer = setTimeout(() => {
       focusTimer = undefined;
       if (!showDropDown.value) return;
@@ -930,8 +933,8 @@ const handleApply = () => {
 
 const handleClose = () => {
   highlightedIndex.value = -1;
-  window.removeEventListener("scroll", handleScroll, true);
-  destroyTeleportedPopper();
+  destroyPopper();
+  dropdownReady.value = false;
   if (focusTimer) {
     clearTimeout(focusTimer);
     focusTimer = undefined;
@@ -962,40 +965,25 @@ const handleSearchFocus = () => {
 };
 
 // Document click handler for outside clicks
-const handleDocumentClick = (event: MouseEvent) => {
-  // The trigger can be replaced during this click. composedPath retains its
-  // original ancestors, so an inside click stays inside after that DOM update.
+const handleDocumentPointerDown = (event: PointerEvent) => {
+  if (!showDropDown.value) return;
+  const target = event.target as Node;
   if (
-    showDropDown.value &&
-    componentRef.value &&
-    !event.composedPath().includes(componentRef.value) &&
-    !event.composedPath().includes(dropdownContentRef.value as EventTarget)
-  ) {
-    handleDismiss();
-  }
-};
+    componentRef.value?.contains(target) ||
+    dropdownContentRef.value?.contains(target)
+  ) return;
 
-const handleScroll = (event: Event) => {
-  if (!showDropDown.value) return;
-  if (props.teleported) {
-    teleportedPopper?.update();
-    return;
-  }
-  const target = event.target;
-  // Keep the options usable; scrolling any ancestor or the page closes them.
-  if (target instanceof Node && componentRef.value?.contains(target)) return;
   handleDismiss();
 };
 
 // Lifecycle hooks
 onMounted(() => {
-  document.addEventListener("click", handleDocumentClick);
+  document.addEventListener("pointerdown", handleDocumentPointerDown);
 });
 
 onUnmounted(() => {
-  document.removeEventListener("click", handleDocumentClick);
-  window.removeEventListener("scroll", handleScroll, true);
-  destroyTeleportedPopper();
+  document.removeEventListener("pointerdown", handleDocumentPointerDown);
+  destroyPopper();
   if (focusTimer) clearTimeout(focusTimer);
 });
 
@@ -1004,23 +992,19 @@ watch(internalSearch, (value: string) => {
   emit("search", value);
 });
 
+watch(
+  () => [props.placement, props.offsetDistance, props.offsetSkid, props.teleported],
+  async () => {
+    if (!showDropDown.value) return;
+    dropdownReady.value = false;
+    await createDropdownPopper();
+    if (showDropDown.value) dropdownReady.value = true;
+  },
+);
+
 </script>
 
 <style lang="scss">
-.popper-defaultstyle {
-  border: 0px solid transparent !important;
-  margin: 0px !important;
-  @apply w-full;
-
-  & > div.popper {
-    width: 100% !important;
-  }
-
-  &.search-tag-select--teleported > div.popper {
-    display: none !important;
-  }
-}
-
 .show-count {
   @apply min-w-5 h-5 inline-flex items-center justify-center text-xss font-semibold bg-white rounded-xl;
 }

package/dist/components/table/UTable.vue

@@ -470,7 +470,7 @@ const headerStyle = (header: Header) => ({
 });
 
 const bodyStyle = (header: Header) => ({
-  width: `${header.width || 300}px`,
+  minWidth: `${header.width || 300}px`,
   maxWidth: `${header.width || 300}px`,
   // flex: `${header.width || 300} 0 auto`,
 });

package/dist/components/tag/EUITag.vue

@@ -10,17 +10,12 @@
     <button
       v-if="closeIcon"
       type="button"
-      class="relative flex-shrink-0 -mr-1 rounded group hover:bg-red-300/50 active:bg-red-300"
-      :class="[props.size === 'lg' ? 'size-6' : props.size === 'md'? 'size-5' : 'size-3.5']"
+      class="relative inline-flex items-center justify-center flex-shrink-0 -mr-1 rounded group hover:bg-red-100 active:bg-red-200"
+      :class="[props.size === 'lg' ? 'size-6' : props.size === 'md'? 'size-5' : 'size-4']"
       @click.stop="removeTag"
     >
       <span class="sr-only">Remove</span>
-      <svg
-        viewBox="0 0 14 14"
-        class="stroke-gray-400 group-hover:stroke-red-600/75 text-violet-600"
-      >
-        <path d="M4 4l6 6m0-6l-6 6" />
-      </svg>
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="text-gray-400 group-hover:text-red-600/75" :class="[props.size === 'lg' ? 'size-5' : props.size === 'md'? 'size-4' : 'size-3']"><path d="M6 18L12 12M12 12L18 6M12 12L6 6M12 12L18 18" stroke="currentColor" stroke-opacity="0.9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
     </button>
   </div>
 </template>
@@ -69,7 +64,7 @@ const tagClass = computed(() => {
       : "bg-white hover:bg-gray-100 text-black cursor-pointer active:shadow-white/50 active:bg-transparent",
   secondary: btnDisabled
       ? "bg-opacity-75 cursor-not-allowed text-gray-400 bg-violet-50"
-      : "bg-violet-100 hover:bg-violet-50 active:bg-violet-100 cursor-pointer text-violet-500 active:shadow-violet-200",
+      : "bg-violet-100 hover:bg-violet-50 active:bg-violet-100 cursor-pointer text-violet-600 active:shadow-violet-200",
    tertiary: btnDisabled
       ? "bg-opacity-75 cursor-not-allowed text-gray-400 bg-gray-50 ring-1 ring-gray-400/20"
       : "bg-gray-100 hover:bg-gray-50 active:bg-gray-100 text-gray-700 cursor-pointer active:shadow-bg-gray-200/50 ring-1 ring-gray-200",