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

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

@@ -8,7 +8,18 @@ type AccordionMenuSection = {
     label: string;
     items: AccordionMenuItem[];
 };
-declare const _default: import('../../../node_modules/vue').DefineComponent<import('../../../node_modules/vue').ExtractPropTypes<{
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'section-label'?(_: {
+            section: AccordionMenuSection;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('../../../node_modules/vue').DefineComponent<import('../../../node_modules/vue').ExtractPropTypes<{
     items: {
         type: PropType<AccordionMenuSection[]>;
         default: () => never[];
@@ -67,4 +78,10 @@ declare const _default: import('../../../node_modules/vue').DefineComponent<impo
     openSection: string;
     stickySectionHeaders: boolean;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {}, HTMLElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/accordion/EUIAccordionMenu.vue

@@ -17,7 +17,9 @@
         :aria-expanded="expandedSection === section.id"
         @click="toggleSection(section.id)"
       >
-        <span class="flex-1 min-w-0 truncate">{{ section.label }}</span>
+        <slot name="section-label" :section="section">
+          <span class="flex-1 min-w-0 truncate">{{ section.label }}</span>
+        </slot>
         <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' : ''"

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/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