edvoyui-component-library-test-flight 0.0.244 → 0.0.246

package/dist/components/checkbox/EUICheckbox.d.ts

@@ -28,6 +28,10 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: BooleanConstructor;
         default: boolean;
     };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     label: {
         type: PropType<string>;
         required: false;
@@ -56,6 +60,10 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
         type: BooleanConstructor;
         default: boolean;
     };
+    indeterminate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     label: {
         type: PropType<string>;
         required: false;
@@ -70,6 +78,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     name: string;
     errors: Record<string, any>;
     modelValue: boolean;
+    indeterminate: 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/checkbox/EUICheckbox.vue

@@ -1,8 +1,16 @@
 <template>
 <div>
-   <label class="flex flex-row items-center scale-100 translate-x-0 translate-y-0 eui-checkbox">
-    <input v-model="isChecked" type="checkbox" id="checkbox" class="appearance-none sr-only input-checkbox" :disabled="disabled"
-      @change="toggle($event)" />
+   <label class="flex flex-row items-center scale-100 translate-x-0 translate-y-0 eui-checkbox" :class="{'select-none pointer-events-none opacity-50':disabled}">
+    <input
+      v-model="isChecked"
+      type="checkbox"
+      id="checkbox"
+      class="appearance-none sr-only input-checkbox"
+      :disabled="disabled"
+      :indeterminate.prop="indeterminate"
+      :aria-checked="indeterminate ? 'mixed' : isChecked"
+      @change="toggle($event)"
+    />
       <div class="cbx-icon" for="checkbox">
         <span>
             <svg width="14px" height="14px">
@@ -45,6 +53,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  indeterminate: {
+    type: Boolean,
+    default: false,
+  },
   label: { type: String as PropType<string>, required: false, default: "" },
 });
 
@@ -56,9 +68,7 @@ watch(isChecked, (newValue) => {
 });
 
 const toggle = ($event: Event) => {
-  if($event) {
-    emit("toggle", isChecked.value);
-  }
+  emit("toggle", ($event.target as HTMLInputElement).checked);
 };
 
 watch(props, (newValue) => {
@@ -69,37 +79,55 @@ watch(props, (newValue) => {
 <style lang="scss">
 .eui-checkbox .cbx-icon {
   transition: all 0.2s ease;
-  @apply select-none cursor-pointer p-px rounded-md overflow-hidden inline-block scale-110;
+  @apply select-none cursor-pointer p-px rounded-md overflow-hidden inline-block scale-100;
 }
 
 .eui-checkbox .cbx-icon span {
   transform: translate3d(0, 0, 0);
   transition: all 0.2s ease;
-  @apply float-left align-middle relative size-5 border-[1.5px] border-gray-400 rounded scale-100;
+  @apply float-left align-middle relative size-5 -outline-offset-1 outline outline-1 outline-gray-400 rounded scale-100;
 }
 
 .eui-checkbox .cbx-icon span > svg {
-  top: 3.5px;
-  left: 2.5px;
+  top: 5px;
+  left: 4px;
   stroke-width: 1.75;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-dasharray: 18px;
   stroke-dashoffset: 18px;
-  transition: all 0.3s ease;
-  transition-delay: 0.1s;
+  transition: stroke-dashoffset 0.16s ease-out;
   transform: translate3d(0, 0, 0);
   @apply absolute fill-none stroke-white;
 }
 
-.eui-checkbox .input-checkbox:checked + .cbx-icon > span {
-  animation: anim 0.4s ease;
-  @apply bg-purple-700 border-purple-700;
+.eui-checkbox .input-checkbox:checked:not(:indeterminate) + .cbx-icon > span {
+  animation: anim 0.18s ease-out;
+  @apply bg-violet-700 outline-violet-700;
 }
 
-.eui-checkbox .input-checkbox:checked + .cbx-icon span > svg {
+.eui-checkbox .input-checkbox:indeterminate + .cbx-icon > span {
+  @apply bg-violet-700 outline-violet-700;
+}
+
+.eui-checkbox .input-checkbox:indeterminate + .cbx-icon span > svg {
+  stroke-dashoffset: 18px;
+  transition: none;
+}
+
+.eui-checkbox .input-checkbox:indeterminate + .cbx-icon > span::after {
+  content: '';
+  animation: indeterminate-in 0.14s ease-out both;
+  @apply absolute left-1/2 top-1/2 h-0.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded bg-white;
+}
+
+.eui-checkbox .input-checkbox:checked:not(:indeterminate) + .cbx-icon span > svg {
   stroke-dashoffset: 0;
-  transition: rotate(8deg);
+}
+
+@keyframes indeterminate-in {
+  from { opacity: 0; scale: 0.5 1; }
+  to { opacity: 1; scale: 1 1; }
 }
 
 @keyframes anim {

package/dist/components/datepicker/EUIDatepicker.vue

@@ -17,7 +17,7 @@
           'is-open': isDatepickerOpen,
         },
         inputFilled
-          ? 'overflow-hidden border border-gray-100 cursor-pointer group h-14 rounded-xl eui-datepicker'
+          ? 'overflow-hidden border border-gray-200 cursor-pointer group h-14 rounded-xl eui-datepicker'
           : 'h-10 eui-datepicker normal',
         'relative w-full mb-2',
       ]"
@@ -283,7 +283,7 @@ const clearIconRight = computed(() =>
   @apply min-w-44;
   .dp__main {
     .dp__input {
-      @apply pb-2 pt-6 border-0 transition-colors duration-100 ease-in-out text-sm font-medium leading-6 placeholder:text-gray-400 placeholder:font-normal;
+      @apply pb-2 pt-6 border-0 transition-colors duration-100 ease-in-out text-sm font-medium leading-6 placeholder:text-gray-600 placeholder:font-normal;
       padding-left: v-bind(iconshowLeft);
       padding-right: v-bind(iconshowRight);
     }
@@ -300,7 +300,7 @@ const clearIconRight = computed(() =>
   &.normal {
     .dp__main {
       .dp__input {
-        @apply py-2 ring-1 ring-gray-100;
+        @apply py-2 ring-1 ring-gray-200;
       }
       .dp__input.dp__input_focus {
         @apply ring-2 h-10 rounded-md ring-purple-600;

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

@@ -15,6 +15,8 @@ interface Props {
     searchable?: boolean;
     backendPagination?: boolean;
     hideNoData?: boolean;
+    /** Show a loading state while options are being fetched. */
+    loading?: boolean;
     disabled?: boolean;
     tag?: string;
     tagColor?: "None" | "Success" | "Error";
@@ -26,6 +28,13 @@ interface Props {
     ignoreDeselect?: boolean;
     popperClasses?: string;
     showCount?: boolean;
+    /** Show an All row when search has results; it selects every item in `items`. Enabled by default in multiple mode. */
+    showSelectAll?: boolean;
+    selectAllLabel?: string;
+    /** Maximum selected tags shown before the More/Less control; 0 shows all. */
+    maxVisibleTags?: number;
+    tagSize?: "sm" | "md" | "lg";
+    dropdownWidth?: string;
 }
 export type SelectItemKey = string | (string | number)[] | ((item: object, fallback?: any) => any);
 declare function __VLS_template(): {
@@ -176,6 +185,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     onCreate?: ((value: string) => any) | undefined;
     "onOn-deselect"?: ((value: any) => any) | undefined;
 }>, {
+    loading: boolean;
     disabled: boolean;
     name: string;
     items: any[];
@@ -199,6 +209,11 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     ignoreDeselect: boolean;
     popperClasses: string;
     showCount: boolean;
+    showSelectAll: boolean;
+    selectAllLabel: string;
+    maxVisibleTags: number;
+    tagSize: "sm" | "md" | "lg";
+    dropdownWidth: string;
 }, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, false, {
     componentRef: HTMLDivElement;
     searchInputRef: import('../../../node_modules/vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../../../node_modules/vue').ExtractPropTypes<{

package/dist/components/searchTagSelect/EUISearchTagSelect.vue

@@ -38,6 +38,7 @@
       <button
         v-else-if="!showDropDown && selectedValues.length > 0"
         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"
         @click="handleOpen"
       >
@@ -85,10 +86,10 @@
       <template #content>
         <div
           v-if="showDropDown"
-          class="w-full p-4 overflow-y-auto text-sm bg-white border-2 border-gray-100 border-solid shadow-lg rounded-3xl max-h-72 scrollbar--hide"
+          :class="['w-full p-4 overflow-y-auto text-sm bg-white border-2 border-gray-100 border-solid shadow-lg rounded-3xl max-h-72 scrollbar--hide min-w-28', dropdownWidth]"
         >
           <h3
-            class="sticky z-10 p-2 mb-2 -mx-px -mt-3 font-semibold text-gray-500 bg-white text-sm/4 -top-4"
+            class="sticky z-10 p-2 pb-0 mb-2 -mx-px -mt-3 text-xs font-bold tracking-wide text-gray-500 uppercase bg-white -top-4"
           >
             Search Results
           </h3>
@@ -100,14 +101,48 @@
             aria-activedescendant="listbox-option-3"
             class="space-y-0.5"
           >
-            <li v-if="filteredItems.length === 0 && !hideNoData">
+            <li
+              v-if="selectType === 'multiple' && showSelectAll && !loading && filteredItems.length"
+              role="option"
+              :aria-selected="allItemsSelected"
+              class="pb-0.5 border-b border-gray-100"
+              @click.stop
+            >
+              <EUICheckbox
+                :model-value="allItemsSelected"
+                :indeterminate="someItemsSelected && !allItemsSelected"
+                :disabled="disabled"
+                :class="[
+                  'relative flex items-center text-sm transition-colors duration-75 w-full multiple-select rounded-md font-medium [&_label]:w-full [&_label]:h-9 [&_label]:px-2.5',
+                  allItemsSelected || someItemsSelected
+                    ? 'text-gray-800 hover:bg-violet-50 hover:text-violet-600'
+                    : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800',
+                ]"
+                @toggle="handleSelectAll"
+              >
+                <template #label>
+                  <span class="ms-2">{{ selectAllLabel }}</span>
+                </template>
+              </EUICheckbox>
+            </li>
+            <li v-if="loading" role="status" aria-live="polite" class="px-2 py-4 text-sm text-gray-500">
+              <span class="inline-flex items-center gap-2">
+                <span class="inline-block border-2 border-gray-200 rounded-full size-4 border-t-violet-600 animate-spin" aria-hidden="true"></span>
+                Loading options...
+              </span>
+            </li>
+            <li v-else-if="filteredItems.length === 0 && !hideNoData">
               <slot name="no-items">
                 <div
-                  v-if="internalSearch.length > 0"
-                  class="px-2 py-4 mb-6 text-sm font-medium text-center text-gray-500 min-h-32"
+                  class="px-2 py-4 text-sm font-medium text-center text-gray-500"
                 >
-                  No results found for "<strong>{{ internalSearch }}</strong
-                  >"
+                  <template v-if="internalSearch.trim()">
+                    No results found for "<strong>{{ internalSearch }}</strong>"
+                  </template>
+                  <template v-else-if="backendPagination">
+                    Type in the search box to see results
+                  </template>
+                  <template v-else>No options available</template>
                 </div>
               </slot>
             </li>
@@ -135,7 +170,7 @@
                   <div
                     :class="[
                       selected(item)
-                        ? 'bg-purple-50 text-purple-600'
+                        ? 'bg-violet-50 text-violet-600'
                         : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800',
                       'relative py-2 px-4 flex items-center capitalize text-sm transition-colors duration-75 rounded',
                     ]"
@@ -169,11 +204,11 @@
                     name="checkbox"
                     :class="[
                       selected(item)
-                        ? 'text-gray-800 hover:bg-purple-50 hover:text-purple-600'
+                        ? 'text-gray-800 hover:bg-violet-50 hover:text-violet-600'
                         : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800',
-                      'relative flex items-center capitalize text-sm transition-colors duration-75 w-full multiple-select rounded-md font-medium [&_label]:w-full [&_label]:p-2.5',
+                      'relative flex items-center capitalize text-sm transition-colors duration-75 w-full multiple-select rounded-md font-medium [&_label]:w-full [&_label]:h-9 [&_label]:px-2.5',
                     ]"
-                    @update:model-value="
+                    @toggle="
                       (checked) => handleCheckboxChange(item, checked)
                     "
                   >
@@ -197,26 +232,50 @@
     <slot v-if="$slots.labelhint" name="labelhint"></slot>
     <div
       v-if="selectType === 'multiple' && selectedValues.length > 0 && showTags"
-      class="px-0.5 my-2 inline-flex gap-x-3 gap-y-2 items-center flex-wrap"
+      class="my-2 space-y-2"
     >
-      <slot
-        v-for="(item, index) in selectedValues"
-        name="selection"
-        :item="item"
-        :clear="() => handleDeselect(item)"
-        :key="`selected-values-${index}`"
+      <div
+        class="px-0.5 gap-2 items-center flex-wrap"
+        :class="[
+          effectiveTagLimit ? 'flex w-full' : 'inline-flex',
+          tagsExpanded && effectiveTagLimit ? 'max-h-32 overflow-y-auto scrollbar--thin' : '',
+        ]"
       >
-        <EUITag
-          class="capitalize"
-          :disabled="disabled"
-          closeIcon
-          size="md"
-          color="secondary"
-          @remove="handleTagRemove(item)"
+        <slot
+          v-for="(item, index) in visibleSelectedValues"
+          name="selection"
+          :item="item"
+          :clear="() => handleDeselect(item)"
+          :key="`selected-values-${index}`"
         >
-          {{ startCase(item[itemText] || item) }}
-        </EUITag>
-      </slot>
+          <EUITag
+            class="capitalize"
+            :disabled="disabled"
+            :closeIcon="!disabled"
+            :size="tagSize"
+            color="secondary"
+            @remove="handleTagRemove(item)"
+          >
+            {{ startCase(item[itemText] || item) }}
+          </EUITag>
+        </slot>
+        <button
+          v-if="canExpandTags && !tagsExpanded"
+          type="button"
+          class="text-xs font-medium text-violet-600 hover:text-violet-700"
+          @click="tagsExpanded = true"
+        >
+          +{{ selectedValues.length - effectiveTagLimit }} more
+        </button>
+      </div>
+      <button
+        v-if="canExpandTags && tagsExpanded"
+        type="button"
+        class="text-xs font-medium text-gray-600 hover:text-gray-700"
+        @click="tagsExpanded = false"
+      >
+        Show less
+      </button>
     </div>
     <div
       class="absolute top-0 px-2 text-xs text-white rounded right-6"
@@ -278,6 +337,8 @@ interface Props {
   searchable?: boolean;
   backendPagination?: boolean;
   hideNoData?: boolean;
+  /** Show a loading state while options are being fetched. */
+  loading?: boolean;
   disabled?: boolean;
   tag?: string;
   tagColor?: "None" | "Success" | "Error";
@@ -289,6 +350,13 @@ interface Props {
   ignoreDeselect?: boolean;
   popperClasses?: string;
   showCount?: boolean;
+  /** Show an All row when search has results; it selects every item in `items`. Enabled by default in multiple mode. */
+  showSelectAll?: boolean;
+  selectAllLabel?: string;
+  /** Maximum selected tags shown before the More/Less control; 0 shows all. */
+  maxVisibleTags?: number;
+  tagSize?: "sm" | "md" | "lg";
+  dropdownWidth?: string,
 }
 const props = withDefaults(defineProps<Props>(), {
   items: () => [],
@@ -302,6 +370,7 @@ const props = withDefaults(defineProps<Props>(), {
   searchable: true,
   backendPagination: false,
   hideNoData: false,
+  loading: false,
   disabled: false,
   tag: "",
   tagColor: "None",
@@ -314,6 +383,11 @@ const props = withDefaults(defineProps<Props>(), {
   ignoreDeselect: false,
   popperClasses: "",
   showCount: false,
+  showSelectAll: true,
+  selectAllLabel: "All",
+  maxVisibleTags: 0,
+  tagSize: "md",
+  dropdownWidth: ''
 });
 
 
@@ -336,7 +410,8 @@ const showDropDown = ref(false);
 const options = ref<HTMLElement>();
 const searchInputRef = ref<any>();
 const componentRef = ref<HTMLElement>();
-const isOpening = ref(false);
+const tagsExpanded = ref(false);
+let focusTimer: ReturnType<typeof setTimeout> | undefined;
 
 // Computed properties
 const selectedValues = computed({
@@ -362,6 +437,37 @@ const selected = computed(() => {
   };
 });
 
+const sameItem = (a: any, b: any) =>
+  a != null &&
+  b != null &&
+  getPropertyFromItem(a, props.itemText) ===
+    getPropertyFromItem(b, props.itemText);
+
+const allItemsSelected = computed(
+  () => props.items.length > 0 && props.items.every((item) => selected.value(item))
+);
+const someItemsSelected = computed(() =>
+  props.items.some((item) => selected.value(item))
+);
+
+const effectiveTagLimit = computed(() =>
+  Number.isFinite(props.maxVisibleTags) && props.maxVisibleTags > 0
+    ? Math.floor(props.maxVisibleTags)
+    : 0
+);
+const canExpandTags = computed(
+  () => effectiveTagLimit.value > 0 && selectedValues.value.length > effectiveTagLimit.value
+);
+const visibleSelectedValues = computed(() =>
+  canExpandTags.value && !tagsExpanded.value
+    ? selectedValues.value.slice(0, effectiveTagLimit.value)
+    : selectedValues.value
+);
+
+watch(canExpandTags, (canExpand) => {
+  if (!canExpand) tagsExpanded.value = false;
+});
+
 export type SelectItemKey =
   | string
   | (string | number)[]
@@ -434,8 +540,7 @@ const filteredItems = computed(() => {
 });
 
 const handleDeselect = (item: any) => {
-  // console.log("called with:", item, selectedValues.value);
-  if (props.ignoreDeselect) return;
+  if (props.ignoreDeselect || props.disabled) return;
   let index = -1;
   if (typeof item === "object" && item[props.itemText]) {
     index = selectedValues.value.findIndex(
@@ -464,10 +569,26 @@ const handleDeselect = (item: any) => {
 };
 
 const handleClearAll = () => {
+  if (props.disabled) return;
   emit("update:modelValue", []);
   emit("toggle");
 };
 
+const handleSelectAll = (checked: boolean) => {
+  if (props.disabled || props.selectType !== "multiple") return;
+  const next = checked
+    ? [
+        ...selectedValues.value,
+        ...props.items.filter((item) => !selected.value(item)),
+      ]
+    : selectedValues.value.filter(
+        (value: any) => !props.items.some((item) => sameItem(value, item))
+      );
+  emit("update:modelValue", next);
+  emit("on-change", next);
+  emit("toggle", next);
+};
+
 const handleTagRemove = (item: any) => {
   handleDeselect(item);
 };
@@ -499,6 +620,7 @@ const handleUpdate = (items: any) => {
 };
 
 const handleSelect = (item: any) => {
+  if (props.disabled) return;
   let newSelection: any;
 
   if (props.selectType === "multiple" && typeof item === "object") {
@@ -537,25 +659,28 @@ const handleSelect = (item: any) => {
 };
 
 const handleOpen = () => {
-  isOpening.value = true;
+  if (props.disabled || showDropDown.value) return;
 
   // Only clear search for single select, preserve it for multiple select
   if (props.selectType === "single") {
     internalSearch.value = "";
   }
   showDropDown.value = true;
+  window.addEventListener("scroll", handleScroll, true);
   emit("open");
 
   nextTick(() => {
-    setTimeout(() => {
+    if (!showDropDown.value) return;
+    focusTimer = setTimeout(() => {
+      focusTimer = undefined;
+      if (!showDropDown.value) return;
       internalSearch.value = "";
-      isOpening.value = false;
       if (searchInputRef.value?.searchInput) {
-        searchInputRef.value.searchInput.focus();
+        searchInputRef.value.searchInput.focus({ preventScroll: true });
       } else if (searchInputRef.value?.$el) {
         const inputElement = searchInputRef.value.$el.querySelector("input");
         if (inputElement) {
-          inputElement.focus();
+          inputElement.focus({ preventScroll: true });
         }
       }
     }, 50);
@@ -563,6 +688,11 @@ const handleOpen = () => {
 };
 
 const handleClose = () => {
+  window.removeEventListener("scroll", handleScroll, true);
+  if (focusTimer) {
+    clearTimeout(focusTimer);
+    focusTimer = undefined;
+  }
   if (showDropDown.value) {
     emit("blur");
     emit("close");
@@ -581,30 +711,25 @@ const handleSearchFocus = () => {
 
 // Document click handler for outside clicks
 const handleDocumentClick = (event: MouseEvent) => {
-  // Don't close if we're currently opening
-  if (isOpening.value) return;
-
-  const target = event.target as Node;
-
-  // Check if click is outside the component and popper
-  if (showDropDown.value && componentRef.value) {
-    // Check if click is outside the main component
-    const isOutsideComponent = !componentRef.value.contains(target);
-
-    // Check if click is outside any popper content
-    const popperElements = document.querySelectorAll(
-      '[data-popper-placement], .popper-defaultstyle, [role="tooltip"]'
-    );
-    const isOutsidePopper = Array.from(popperElements).every(
-      (popper) => !popper.contains(target)
-    );
-
-    if (isOutsideComponent && isOutsidePopper) {
-      handleClose();
-    }
+  // The trigger can be replaced during this click. composedPath retains its
+  // original ancestors, so an inside click stays inside after that DOM update.
+  if (
+    showDropDown.value &&
+    componentRef.value &&
+    !event.composedPath().includes(componentRef.value)
+  ) {
+    handleClose();
   }
 };
 
+const handleScroll = (event: Event) => {
+  if (!showDropDown.value) 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;
+  handleClose();
+};
+
 // Lifecycle hooks
 onMounted(() => {
   document.addEventListener("click", handleDocumentClick);
@@ -612,6 +737,8 @@ onMounted(() => {
 
 onUnmounted(() => {
   document.removeEventListener("click", handleDocumentClick);
+  window.removeEventListener("scroll", handleScroll, true);
+  if (focusTimer) clearTimeout(focusTimer);
 });
 
 // Watchers
@@ -619,13 +746,6 @@ watch(internalSearch, (value: string) => {
   emit("search", value);
 });
 
-watch(
-  () => props.modelValue,
-  (newValue, oldValue) => {
-    console.log("changed from:", oldValue, "to:", newValue);
-  },
-  { deep: true }
-);
 </script>
 
 <style lang="scss">

package/dist/components/searchTagSelect/SearchInput.vue

@@ -22,6 +22,7 @@
       :class="['search-input', hasError ? 'error-state' : '']"
       :placeholder="placeholder"
       :value="modelValue"
+      :disabled="disabled"
       @input="emitInput"
       @focus="onFocus"
       @blur="onBlur"