edvoyui-component-library-test-flight 0.0.251 → 0.0.254

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/datepicker/EUIDatepicker.d.ts

@@ -10,11 +10,11 @@ declare const _default: import('../../../node_modules/vue').DefineComponent<impo
     };
     maxDate: {
         type: any;
-        default: string;
+        default: undefined;
     };
     minDate: {
         type: any;
-        default: string;
+        default: undefined;
     };
     name: {
         type: StringConstructor;
@@ -86,11 +86,11 @@ declare const _default: import('../../../node_modules/vue').DefineComponent<impo
     };
     maxDate: {
         type: any;
-        default: string;
+        default: undefined;
     };
     minDate: {
         type: any;
-        default: string;
+        default: undefined;
     };
     name: {
         type: StringConstructor;

package/dist/components/datepicker/EUIDatepicker.vue

@@ -113,11 +113,11 @@ const props = defineProps({
   },
   maxDate: {
     type: Date as any,
-    default: '',
+    default: undefined,
   },
   minDate: {
     type: Date as any,
-    default: '',
+    default: undefined,
   },
   name: {
     type: String,

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

@@ -36,6 +36,8 @@ interface Props {
     /** Maximum selected tags shown before the More/Less control; 0 shows all. */
     maxVisibleTags?: number;
     tagSize?: "sm" | "md" | "lg";
+    /** Hide options until the user has entered this many non-whitespace characters. */
+    minimumSearchLength?: number;
     dropdownWidth?: string;
     /** Render the menu at body level to escape clipping scroll containers. */
     teleported?: boolean;
@@ -254,6 +256,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     selectAllLabel: string;
     maxVisibleTags: number;
     tagSize: "sm" | "md" | "lg";
+    minimumSearchLength: number;
     dropdownWidth: string;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, false, {
     componentRef: HTMLDivElement;

package/dist/components/searchTagSelect/EUISearchTagSelect.vue

@@ -159,6 +159,9 @@
                   <template v-if="internalSearch?.trim()">
                     No results found for "<strong>{{ internalSearch }}</strong>"
                   </template>
+                  <template v-else-if="minimumSearchLength > 0">
+                    Type at least {{ minimumSearchLength }} character<span v-if="minimumSearchLength !== 1">s</span> to search
+                  </template>
                   <template v-else-if="backendPagination">
                     Type in the search box to see results
                   </template>
@@ -403,6 +406,8 @@ interface Props {
   /** Maximum selected tags shown before the More/Less control; 0 shows all. */
   maxVisibleTags?: number;
   tagSize?: "sm" | "md" | "lg";
+  /** Hide options until the user has entered this many non-whitespace characters. */
+  minimumSearchLength?: number;
   dropdownWidth?: string,
   /** Render the menu at body level to escape clipping scroll containers. */
   teleported?: boolean;
@@ -437,6 +442,7 @@ const props = withDefaults(defineProps<Props>(), {
   selectAllLabel: "All",
   maxVisibleTags: 0,
   tagSize: "md",
+  minimumSearchLength: 0,
   dropdownWidth: '',
   teleported: false,
 });
@@ -594,6 +600,8 @@ const filteredItems = computed(() => {
   const searchValue = String(internalSearch.value ?? "");
   const search = searchValue.trim().toLowerCase();
 
+  if (search.length < props.minimumSearchLength) return [];
+
   if (searchValue !== "") {
     if (search === "") return [];
     if (props.backendPagination) return props.items;

package/dist/components/table/EUITable.d.ts

@@ -60,7 +60,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     checkedRows: {
         type: ArrayConstructor;
         default: () => never[];
-        required: true;
+        required: false;
     };
     headers: {
         type: PropType<Header[]>;
@@ -152,7 +152,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     checkedRows: {
         type: ArrayConstructor;
         default: () => never[];
-        required: true;
+        required: false;
     };
     headers: {
         type: PropType<Header[]>;

package/dist/components/table/EUITable.vue

@@ -21,7 +21,7 @@
       </div>
     </Transition>
 
-      <div class="relative w-full mx-auto overflow-hidden">
+      <div class="overflow-hidden relative mx-auto w-full">
         <div
           id="student-table"
           :class="[
@@ -67,7 +67,7 @@
                   @click="sortBy(header, $event)"
                 >
                   <div
-                    class="flex items-center justify-between gap-2 text-sm font-medium text-current font-inter"
+                    class="flex gap-2 justify-between items-center text-sm font-medium text-current font-inter"
                   >
                     <slot name="header" :header="header" :index="headerIndex">
                       {{ capitalizeText(header?.text ?? header?.name ?? "") }}
@@ -122,11 +122,10 @@
               >
                 <tr
                   :id="`row-${rowIndex}`"
-                  :class="
-                    activeRowIndex == rowIndex
-                      ? '!bg-violet-50 !ring-1 !ring-violet-100 !ring-inset'
-                      : ''
-                  "
+                  :class="{
+                    'is-active-row':
+                      activeRowIndex != null && activeRowIndex === rowIndex,
+                  }"
                   @mouseenter="
                     $attrs.mouseenter
                       ? $emit('mouseenter', row, rowIndex)
@@ -139,14 +138,7 @@
                   "
                 >
                   <template v-if="checkable">
-                    <td
-                      class="checkable"
-                      :class="
-                        activeRowIndex == rowIndex
-                          ? '!bg-violet-50 !ring-1 !ring-violet-100 !ring-inset'
-                          : ''
-                      "
-                    >
+                    <td class="checkable">
                       <EUITableCheckbox
                         :disabled="!isRowCheckable(row)"
                         :checked="isRowChecked(row)"
@@ -161,9 +153,6 @@
                     :key="headerIndex"
                     :class="[
                       isScrolled && headerIndex === 0 ? stickyClass.body : '',
-                      activeRowIndex == rowIndex
-                        ? '!bg-violet-50 !ring-1 !ring-violet-100 !ring-inset'
-                        : '',
                     ]"
                   >
                     <slot
@@ -204,7 +193,7 @@
           class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-1 bg-white shadow-[0_-6px_24px_-6px_#0c0c0d1c]"
         >
           <slot name="tableCount">
-            <div class="inline-flex items-center gap-x-2">
+            <div class="inline-flex gap-x-2 items-center">
               <div class="text-sm font-medium text-gray-900">
                 Total {{ total }}
               </div>
@@ -271,7 +260,7 @@ const props = defineProps({
   paginated: { type: Boolean, default: false },
   tableExpanded: { type: Boolean, default: false },
   backendPagination: { type: Boolean, default: false },
-  checkedRows: { type: Array, default: () => [], required: true },
+  checkedRows: { type: Array, default: () => [], required: false },
   headers: {
     type: Array as PropType<Header[]>,
     default: () => ({}),
@@ -548,26 +537,39 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
     }
 
     tbody {
-      @apply snap-y snap-mandatory snap-always;
+       @apply snap-y snap-mandatory snap-always;
       tr:not(.norecords) {
-        @apply text-gray-600 transition-colors duration-100 bg-white snap-start ease-in-out snap-x snap-mandatory rounded-sm h-12;
+        @apply text-gray-600 bg-white snap-mandatory snap-start rounded-sm h-12;
+
         td {
-          @apply px-3 py-1 text-sm font-normal transition-colors duration-100 ease-in-out snap-start snap-always border-solid border-gray-100 border-b;
+          // Keep border widths stable in every state. Changing border width on
+          // hover causes table row geometry to shift and produces a jump.
+          @apply box-border px-3 py-1 text-sm font-normal snap-start snap-always border-solid border-b border-t border-gray-100 border-t-transparent;
+
+          &:first-child {
+            @apply border-l border-l-transparent;
+          }
+
+          &:last-child {
+            @apply border-r border-r-transparent;
+          }
+
           &:first-of-type.checkable {
             @apply w-12 text-center sticky left-0 top-0 z-[11] bg-white;
           }
         }
 
-        &:hover td {
-          @apply font-medium text-gray-900 bg-violet-50 border-violet-200 first-of-type:rounded-s-sm last-of-type:rounded-e-sm border-b border-t first:border-l last:border-r;
+        // Do not transition background/border colors between rows. When the
+        // pointer moves quickly, the previous row would otherwise fade out while
+        // the next row fades in, making two rows look highlighted at once.
+        &:hover td,
+        &.is-active-row td {
+          @apply text-gray-900 bg-violet-50 border-violet-200 first-of-type:rounded-s-sm last-of-type:rounded-e-sm;
+
           &:first-of-type.checkable {
             @apply bg-violet-50;
           }
         }
-
-        &:has(+ tr:hover) td {
-          @apply border-b-0;
-        }
       }
     }
   }

package/dist/components/table/UTable.vue

@@ -20,7 +20,7 @@
         </slot>
       </div>
     </Transition>
-      <div class="relative max-w-full mx-auto overflow-hidden">
+      <div class="overflow-hidden relative mx-auto max-w-full">
         <div
           :class="[
             'ui-table scrollbar--auto',
@@ -67,7 +67,7 @@
                     { '!bg-gray-200': currentSort === header.value },
                   ]"
                   :style="
-                    headers.length > 6
+                    headers.length > 5
                       ? headerStyle(header)
                       : 'width: 100%;min-width: 250px;background-color: rgb(243 244 246);'
                   "
@@ -97,7 +97,7 @@
                         </template>
                         <template v-slot:tooltip>
                           <div
-                            class="z-50 max-w-xs break-words whitespace-normal min-w-max"
+                            class="z-50 min-w-max max-w-xs whitespace-normal break-words"
                           >
                             {{ header?.showHeaderInfoText }}
                           </div>
@@ -106,7 +106,7 @@
                     </div>
                     <div
                       v-if="header?.sortable"
-                      class="absolute -top-0.5 -right-6 size-6 z-10"
+                      class="absolute -top-0.5 -right-6 z-10 size-6"
                     >
                       <svg
                         width="24"
@@ -215,7 +215,7 @@
                           </template>
                           <template v-slot:tooltip>
                             <div
-                              class="z-50 max-w-xs break-words whitespace-normal min-w-max"
+                              class="z-50 min-w-max max-w-xs whitespace-normal break-words"
                             >
                               {{ header?.showInfoText }}
                             </div>
@@ -252,12 +252,12 @@
                       >
                         <div class="text-center">
                           <div
-                            class="mx-auto overflow-hidden rounded-md size-56"
+                            class="overflow-hidden mx-auto rounded-md size-56"
                           >
                             <img
                               src="@/assets/images/search-nodata.png"
                               alt=""
-                              class="block object-contain object-center h-auto max-w-full opacity-90"
+                              class="block object-contain object-center max-w-full h-auto opacity-90"
                             />
                           </div>
                           <div class="my-2 text-xl font-medium text-gray-500">
@@ -274,7 +274,7 @@
         </div>
         <div
           v-if="stickyFooter"
-          class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-1 bg-white border-t border-gray-300"
+          class="flex sticky bottom-0 left-0 z-50 justify-between items-center px-2 py-1 bg-white border-t border-gray-300"
         >
           <slot
             name="tableCount"
@@ -282,12 +282,12 @@
             :from="rangeFrom"
             :to="rangeTo"
           >
-            <div class="inline-flex items-center self-stretch gap-x-3">
+            <div class="inline-flex gap-x-3 items-center self-stretch">
               <div class="text-sm font-normal text-gray-600">
                 {{ rangeFrom }} - {{ rangeTo }} of {{ total }}
               </div>
-              <div class="self-stretch w-px h-4 my-auto bg-gray-300"></div>
-              <div class="inline-flex items-center gap-0">
+              <div class="self-stretch my-auto w-px h-4 bg-gray-300"></div>
+              <div class="inline-flex gap-0 items-center">
                 <span class="text-sm font-normal text-gray-600"
                   > Items per page:</span>
                 <EUIPageLimit

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",