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

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/searchexpand/EUISearchExpand.d.ts

@@ -1,40 +1,23 @@
-import { PropType } from '../../../node_modules/vue';
-declare const _default: import('../../../node_modules/vue').DefineComponent<import('../../../node_modules/vue').ExtractPropTypes<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    searchSync: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    type: {
-        type: PropType<"text" | "number" | "email" | "password" | "search">;
-        default: string;
-    };
-}>, {}, {}, {}, {}, import('../../../node_modules/vue').ComponentOptionsMixin, import('../../../node_modules/vue').ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import('../../../node_modules/vue').PublicProps, Readonly<import('../../../node_modules/vue').ExtractPropTypes<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    searchSync: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    type: {
-        type: PropType<"text" | "number" | "email" | "password" | "search">;
-        default: string;
-    };
-}>> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+type InputType = "text" | "number" | "email" | "password" | "search";
+interface Props {
+    autoFocus?: boolean;
+    modelValue?: string | number;
+    defaultExpand?: boolean;
+    searchSync?: boolean;
+    type?: InputType;
+}
+declare const _default: import('../../../node_modules/vue').DefineComponent<Props, {}, {}, {}, {}, import('../../../node_modules/vue').ComponentOptionsMixin, import('../../../node_modules/vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import('../../../node_modules/vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
-    type: "number" | "text" | "search" | "email" | "password";
+    type: InputType;
     modelValue: string | number;
+    autoFocus: boolean;
+    defaultExpand: boolean;
     searchSync: boolean;
-}, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, true, {
+}, {}, {}, {}, string, import('../../../node_modules/vue').ComponentProvideOptions, false, {
     componentWrapper: HTMLDivElement;
-    input: HTMLInputElement;
+    inputRef: HTMLInputElement;
 }, HTMLDivElement>;
 export default _default;

package/dist/components/searchexpand/EUISearchExpand.vue

@@ -1,128 +1,146 @@
 <template>
   <div class="relative rounded-full size-10">
-    <div class="absolute top-0 right-0">
+    <div ref="componentWrapper" class="absolute top-0 right-0 z-50">
       <div
-        ref="componentWrapper"
-        class="cursor-pointer group"
-        @click="expandInput"
+        :class="[
+          'relative flex h-10 items-center rounded-full bg-gray-100 ring-offset-0',
+          'transition-all duration-300 ease-in-out',
+          'border border-gray-200 focus-within:border-gray-100',
+          'focus-within:ring-2 focus-within:ring-purple-500',
+          isExpanded
+            ? 'w-72 group-focus-within:w-72 text-gray-400'
+            : 'w-10 text-gray-500',
+        ]"
+        @click.stop="expandInput"
       >
-        <div class="relative max-w-80 z-[calc(infinity)]">
-          <div
-            :class="[
-              'relative flex items-center duration-300 ease-linear bg-gray-100 rounded-full pe-1 group-focus-within:ring-2 ring-purple-200 group-focus-within:border-gray-200 group-focus-within:border transition-all delay-75',
-              isExpanded
-                ? 'group-focus-within:w-80 text-gray-300 h-10'
-                : 'size-10 text-gray-500',
-            ]"
+        <SearchBigZoomIn
+          class="absolute text-current pointer-events-none left-2 top-2 size-6"
+        />
+
+        <!-- Expand trigger -->
+        <button
+          v-if="!isExpanded"
+          type="button"
+          class="absolute inset-0 rounded-full cursor-pointer"
+          aria-label="Open search"
+          @click="expandInput"
+        />
+
+        <!-- Search input -->
+        <input
+          v-else
+          ref="inputRef"
+          v-model="searchQuery"
+          :type="inputType"
+          placeholder="Search here..."
+          autocomplete="off"
+          class="w-full h-10 text-sm font-medium text-gray-900 bg-transparent outline-none ps-10 pe-10"
+        />
+
+        <!-- Clear -->
+        <button
+          v-if="isExpanded && hasSearchValue"
+          type="button"
+          class="absolute inset-y-0 z-20 flex items-center justify-center text-gray-500 transition-colors pointer-events-auto right-2 hover:text-red-500"
+          @mousedown.prevent
+          @click="clearSearch"
+        >
+          <span
+            class="flex items-center justify-center p-1 bg-white rounded-full hover:bg-red-50 size-6"
           >
-            <SearchBigZoomIn
-              class="absolute text-current size-6 top-2 left-2"
-            />
-
-            <button
-              v-if="isExpanded"
-              type="button"
-              aria-label="Clear search"
-              :class="
-                inputValue ? '  absolute inset-y-0 right-3  ' : ' hidden '
-              "
-              @mousedown.prevent
-              @click.stop="clearSearch"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="size-5"
-              >
-                <!--         <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
- -->
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M6 18 18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-
-            <input
-              v-if="isExpanded"
-              v-model="searchQuery"
-              ref="input"
-              :type="type === 'search' ? 'text' : type"
-              placeholder="Search here..."
-              class="h-10 text-sm font-medium text-gray-900 bg-transparent w-80 ps-10 pe-2 focus:outline-none"
-              autocomplete="off"
-              @input="handleSearch"
-              @blur="closeInput"
-            />
-          </div>
-        </div>
+            <XMarkIcon class="transition-colors size-5" />
+          </span>
+        </button>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import {
   computed,
   nextTick,
   onBeforeUnmount,
   onMounted,
-  PropType,
   ref,
-  toRefs,
   watch,
 } from "vue";
 import SearchBigZoomIn from "../../assets/svg/SearchBigZoomIn.vue";
+import { XMarkIcon } from "@heroicons/vue/20/solid";
 
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-  searchSync: {
-    type: Boolean,
-    default: false,
-  },
-  type: {
-    type: String as PropType<
-      "text" | "number" | "email" | "password" | "search" 
-    >,
-    default: "text",
-  },
+type InputType = "text" | "number" | "email" | "password" | "search";
+
+interface Props {
+  autoFocus?: boolean;
+  modelValue?: string | number;
+  defaultExpand?: boolean;
+  searchSync?: boolean;
+  type?: InputType;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  autoFocus: true,
+  modelValue: "",
+  defaultExpand: false,
+  searchSync: false,
+  type: "text",
 });
-const { searchSync } = toRefs(props);
-const emit = defineEmits(["update:modelValue"]);
 
-const input = ref<HTMLInputElement>();
-const isExpanded = ref(true);
-const searchQuery = ref<string | number>(props.modelValue ?? "");
+const emit = defineEmits<{
+  "update:modelValue": [value: string | number];
+}>();
+
+const inputRef = ref<HTMLInputElement | null>(null);
 const componentWrapper = ref<HTMLElement | null>(null);
 
+const hasValue = (value: string | number | undefined) =>
+  value === 0 || Boolean(value);
+
+const isExpanded = ref(
+  props.defaultExpand || props.searchSync || hasValue(props.modelValue)
+);
+
+/**
+ * Direct v-model bridge.
+ *
+ * Removes the need for:
+ * - local searchQuery ref
+ * - modelValue watcher
+ * - @input handler
+ */
+const searchQuery = computed({
+  get: () => props.modelValue ?? "",
+  set: (value: string | number) => {
+    emit("update:modelValue", value);
+  },
+});
+
+const hasSearchValue = computed(() => hasValue(searchQuery.value));
+
+const inputType = computed(() =>
+  props.type === "search" ? "text" : props.type
+);
+
 async function expandInput() {
+  if (isExpanded.value) return;
+
   isExpanded.value = true;
+
   await nextTick();
-  input.value?.focus();
+  inputRef.value?.focus();
 }
 
 async function clearSearch() {
   searchQuery.value = "";
-  emit("update:modelValue", "");
+
   await nextTick();
-  input.value?.focus();
+  inputRef.value?.focus();
 }
 
-const inputValue = computed(() => {
-  return props.modelValue === 0 ? true : !!props.modelValue;
-});
-
 function closeInput() {
-  if (!searchQuery.value) {
-    isExpanded.value = false;
-  }
+  if (props.defaultExpand || hasSearchValue.value) return;
+
+  isExpanded.value = false;
 }
 
 function handleOutsideClick(event: MouseEvent) {
@@ -135,43 +153,22 @@ function handleOutsideClick(event: MouseEvent) {
 }
 
 watch(
-  searchSync,
-  (newVal) => {
-    if (!newVal) {
+  () => props.searchSync,
+  (enabled) => {
+    if (!enabled) {
       closeInput();
     }
-  },
-  { immediate: true, deep: true }
-);
-
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (newValue !== searchQuery.value) {
-      searchQuery.value = newValue ?? "";
-    }
   }
 );
 
 onMounted(() => {
   document.addEventListener("click", handleOutsideClick);
-  if (isExpanded.value) {
-    nextTick(() => input.value?.focus());
+  if (isExpanded.value && props.autoFocus) {
+    nextTick(() => inputRef.value?.focus());
   }
 });
 
 onBeforeUnmount(() => {
   document.removeEventListener("click", handleOutsideClick);
 });
-
-function handleSearch(event: Event) {
-  const newValue = (event?.target as HTMLInputElement)?.value;
-  if (newValue !== undefined) {
-    emit("update:modelValue", newValue);
-  }
-}
 </script>
-
-<style scoped>
-/* Add custom styles here */
-</style>