@nuxt/ui 2.16.0 → 2.18.0

package/dist/runtime/components/forms/InputMenu.vue

@@ -103,8 +103,7 @@ import {
 import { computedAsync, useDebounceFn } from "@vueuse/core";
 import { defu } from "defu";
 import { twMerge, twJoin } from "tailwind-merge";
-import UIcon from "../elements/Icon.vue";
-import UAvatar from "../elements/Avatar.vue";
+import { UIcon, UAvatar } from "#components";
 import { useUI } from "../../composables/useUI";
 import { usePopper } from "../../composables/usePopper";
 import { useFormGroup } from "../../composables/useFormGroup";
@@ -280,7 +279,7 @@ export default defineComponent({
     const [trigger, container] = usePopper(popper.value);
     const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props });
     const { emitFormBlur, emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config);
-    const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value);
+    const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value);
     const internalQuery = ref("");
     const query = computed({
       get() {
@@ -296,7 +295,7 @@ export default defineComponent({
         return;
       }
       if (props.valueAttribute) {
-        const option = props.options.find((option2) => option2[props.valueAttribute] === props.modelValue);
+        const option = options.value.find((option2) => option2[props.valueAttribute] === props.modelValue);
         return option ? option[props.optionAttribute] : null;
       } else {
         return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute];
@@ -364,14 +363,19 @@ export default defineComponent({
       );
     });
     const debouncedSearch = props.search && typeof props.search === "function" ? useDebounceFn(props.search, props.debounce) : void 0;
-    const filteredOptions = computedAsync(async () => {
+    const options = computedAsync(async () => {
       if (debouncedSearch) {
         return await debouncedSearch(query.value);
       }
-      if (query.value === "") {
-        return props.options;
+      return props.options || [];
+    }, [], {
+      lazy: props.searchLazy
+    });
+    const filteredOptions = computed(() => {
+      if (!query.value || debouncedSearch) {
+        return options.value;
       }
-      return props.options.filter((option) => {
+      return options.value.filter((option) => {
         return (props.searchAttributes?.length ? props.searchAttributes : [props.optionAttribute]).some((searchAttribute) => {
           if (["string", "number"].includes(typeof option)) {
             return String(option).search(new RegExp(query.value, "i")) !== -1;
@@ -380,8 +384,6 @@ export default defineComponent({
           return child !== null && child !== void 0 && String(child).search(new RegExp(query.value, "i")) !== -1;
         });
       });
-    }, [], {
-      lazy: props.searchLazy
     });
     watch(container, (value) => {
       if (value) {