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

package/dist/components/checkbox/EUICheckbox.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-   <label class="flex flex-row items-center scale-100 translate-x-0 translate-y-0 eui-checkbox">
+   <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"
@@ -79,46 +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:indeterminate + .cbx-icon > span {
-  @apply bg-purple-700 border-purple-700;
+  @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 + .cbx-icon span > svg {
+.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/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,12 +28,13 @@ interface Props {
     ignoreDeselect?: boolean;
     popperClasses?: string;
     showCount?: boolean;
-    /** Include an All row for every item in `items` (independent of search). */
+    /** 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(): {
@@ -182,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[];
@@ -209,6 +213,7 @@ declare const __VLS_component: import('../../../node_modules/vue').DefineCompone
     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

@@ -86,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>
@@ -102,10 +102,10 @@
             class="space-y-0.5"
           >
             <li
-              v-if="selectType === 'multiple' && showSelectAll && items.length"
+              v-if="selectType === 'multiple' && showSelectAll && !loading && filteredItems.length"
               role="option"
               :aria-selected="allItemsSelected"
-              class="mb-2 border-b border-gray-100 pb-2"
+              class="pb-0.5 border-b border-gray-100"
               @click.stop
             >
               <EUICheckbox
@@ -113,9 +113,9 @@
                 :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]:p-2.5',
+                  '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-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',
                 ]"
                 @toggle="handleSelectAll"
@@ -125,14 +125,24 @@
                 </template>
               </EUICheckbox>
             </li>
-            <li v-if="filteredItems.length === 0 && !hideNoData">
+            <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>
@@ -160,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',
                     ]"
@@ -194,9 +204,9 @@
                     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',
                     ]"
                     @toggle="
                       (checked) => handleCheckboxChange(item, checked)
@@ -225,10 +235,10 @@
       class="my-2 space-y-2"
     >
       <div
-        class="px-0.5 gap-x-3 gap-y-2 items-center flex-wrap"
+        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' : '',
+          tagsExpanded && effectiveTagLimit ? 'max-h-32 overflow-y-auto scrollbar--thin' : '',
         ]"
       >
         <slot
@@ -261,7 +271,7 @@
       <button
         v-if="canExpandTags && tagsExpanded"
         type="button"
-        class="text-xs font-medium text-violet-600 hover:text-violet-700"
+        class="text-xs font-medium text-gray-600 hover:text-gray-700"
         @click="tagsExpanded = false"
       >
         Show less
@@ -327,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";
@@ -338,12 +350,13 @@ interface Props {
   ignoreDeselect?: boolean;
   popperClasses?: string;
   showCount?: boolean;
-  /** Include an All row for every item in `items` (independent of search). */
+  /** 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: () => [],
@@ -357,6 +370,7 @@ const props = withDefaults(defineProps<Props>(), {
   searchable: true,
   backendPagination: false,
   hideNoData: false,
+  loading: false,
   disabled: false,
   tag: "",
   tagColor: "None",
@@ -369,10 +383,11 @@ const props = withDefaults(defineProps<Props>(), {
   ignoreDeselect: false,
   popperClasses: "",
   showCount: false,
-  showSelectAll: false,
+  showSelectAll: true,
   selectAllLabel: "All",
   maxVisibleTags: 0,
   tagSize: "md",
+  dropdownWidth: ''
 });
 
 
@@ -395,8 +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({
@@ -644,26 +659,28 @@ const handleSelect = (item: any) => {
 };
 
 const handleOpen = () => {
-  if (props.disabled) return;
-  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);
@@ -671,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");
@@ -689,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);
@@ -720,6 +737,8 @@ onMounted(() => {
 
 onUnmounted(() => {
   document.removeEventListener("click", handleDocumentClick);
+  window.removeEventListener("scroll", handleScroll, true);
+  if (focusTimer) clearTimeout(focusTimer);
 });
 
 // Watchers