edvoyui-component-library-test-flight 0.0.224 → 0.0.226

package/dist/components/dropdown/EUIMultiDropdown.d.ts

@@ -14,6 +14,9 @@ declare function __VLS_template(): {
             menuitem: MenuItem;
         }): any;
         actionName?(_: {}): any;
+        emptySubmenu?(_: {
+            menuitem: MenuItem;
+        }): any;
         submenu?(_: {
             subItem: MenuItem;
         }): any;

package/dist/components/dropdown/EUIMultiDropdown.vue

@@ -34,7 +34,9 @@
         :key="item.text"
         class="relative flex items-center px-4 py-2 rounded-lg cursor-pointer hover:bg-gray-100"
         @mouseenter="setActiveMenuItem(item.text)"
-        @mouseleave="clearActiveMenuItem"
+        @mouseleave="scheduleClearActiveMenuItem(item.text)"
+        @focusin="setActiveMenuItem(item.text)"
+        @focusout="scheduleClearActiveMenuItem(item.text)"
         @click.stop="selectMenuItem(item)"
       >
         <div
@@ -59,6 +61,7 @@
         <div
           v-if="item.subMenu && activeMenuItem === item.text"
           :class="['absolute top-0 z-10 transition-all duration-300 ease-in-out min-w-32 max-w-64 w-max', placement === 'right' ? 'right-full' : 'left-full']"
+          @mouseenter="setActiveMenuItem(item.text)"
         >
           <div
             class="bg-white border border-gray-200 border-solid rounded-lg shadow-2xl ms-2 shadow-gray-300"
@@ -73,6 +76,11 @@
             <div
               class="p-2 overflow-y-auto overscroll-auto max-h-[50svh] min-h-0 scrollbar--thin"
             >
+              <slot
+                v-if="item.subMenu.length === 0"
+                name="emptySubmenu"
+                :menuitem="item"
+              />
               <div
                 v-for="subItem in item.subMenu"
                 :key="subItem.text"
@@ -175,24 +183,37 @@ const dropdownMenu = ref<HTMLElement | null>(null);
 const resolvedPlacement = ref<"top" | "bottom" | "left" | "right">(
   props.placement
 );
+let activeMenuCloseTimer: ReturnType<typeof setTimeout> | undefined;
 
 const emit = defineEmits(["subMenuItem", "menuItem", "actionItem"]);
 
 const toggleDropdown = () => {
-  isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    closeDropdown();
+    return;
+  }
+
+  isOpen.value = true;
 };
 
 const closeDropdown = () => {
+  clearTimeout(activeMenuCloseTimer);
   isOpen.value = false;
   activeMenuItem.value = null;
 };
 
 const setActiveMenuItem = (text: string) => {
+  clearTimeout(activeMenuCloseTimer);
   activeMenuItem.value = text;
 };
 
-const clearActiveMenuItem = () => {
-  activeMenuItem.value = null;
+const scheduleClearActiveMenuItem = (text: string) => {
+  clearTimeout(activeMenuCloseTimer);
+  activeMenuCloseTimer = setTimeout(() => {
+    // Interactive submenu content (for example, search) must stay mounted while focused.
+    if (dropdownMenu.value?.contains(document.activeElement)) return;
+    if (activeMenuItem.value === text) activeMenuItem.value = null;
+  }, 150);
 };
 
 const selectMenuItem = (item: MenuItem) => {
@@ -272,6 +293,7 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
+  clearTimeout(activeMenuCloseTimer);
   window.removeEventListener("resize", updateDropdownPlacement);
   window.removeEventListener("scroll", updateDropdownPlacement, true);
 });

package/dist/components/searchexpand/EUISearchExpand.vue

@@ -21,10 +21,13 @@
 
             <button
               v-if="isExpanded"
+              type="button"
+              aria-label="Clear search"
               :class="
                 inputValue ? '  absolute inset-y-0 right-3  ' : ' hidden '
               "
-              @click="(searchQuery=''), emit('update:modelValue', '')"
+              @mousedown.prevent
+              @click.stop="clearSearch"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -63,7 +66,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, PropType, ref, toRefs, watch } from "vue";
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  PropType,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
 import SearchBigZoomIn from "../../assets/svg/SearchBigZoomIn.vue";
 
 const props = defineProps({
@@ -87,12 +99,20 @@ const emit = defineEmits(["update:modelValue"]);
 
 const input = ref<HTMLInputElement>();
 const isExpanded = ref(true);
-const searchQuery = ref();
+const searchQuery = ref<string | number>(props.modelValue ?? "");
 const componentWrapper = ref<HTMLElement | null>(null);
 
-function expandInput() {
+async function expandInput() {
   isExpanded.value = true;
-  input?.value?.focus();
+  await nextTick();
+  input.value?.focus();
+}
+
+async function clearSearch() {
+  searchQuery.value = "";
+  emit("update:modelValue", "");
+  await nextTick();
+  input.value?.focus();
 }
 
 const inputValue = computed(() => {
@@ -124,10 +144,19 @@ watch(
   { immediate: true, deep: true }
 );
 
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue !== searchQuery.value) {
+      searchQuery.value = newValue ?? "";
+    }
+  }
+);
+
 onMounted(() => {
   document.addEventListener("click", handleOutsideClick);
-  if (searchQuery.value) {
-    searchQuery.value?.focus();
+  if (isExpanded.value) {
+    nextTick(() => input.value?.focus());
   }
 });