@nuxt/ui 2.17.0 → 2.18.1

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

@@ -179,7 +179,7 @@ export default defineComponent({
     const { ui, attrs } = useUI("select", toRef(props, "ui"), config, toRef(props, "class"));
     const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props });
     const { emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config);
-    const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value);
+    const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value);
     const onInput = (event) => {
       emit("update:modelValue", event.target.value);
     };

package/dist/runtime/components/forms/Select.vue.d.ts

@@ -1,21 +1,131 @@
 import type { PropType, ComputedRef } from 'vue';
-import type { SelectSize, SelectVariant } from '../../types';
+import type { SelectSize, SelectColor, SelectVariant, Strategy } from '../../types.js';
+declare const config: {
+    form: string;
+    placeholder: string;
+    default: {
+        size: string;
+        color: string;
+        variant: string;
+        loadingIcon: string;
+        trailingIcon: string;
+    };
+    wrapper: string;
+    base: string;
+    rounded: string;
+    file: {
+        base: string;
+    };
+    size: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    gap: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    padding: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    leading: {
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
+    trailing: {
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
+    color: {
+        white: {
+            outline: string;
+        };
+        gray: {
+            outline: string;
+        };
+    };
+    variant: {
+        outline: string;
+        none: string;
+    };
+    icon: {
+        base: string;
+        color: string;
+        loading: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        leading: {
+            wrapper: string;
+            pointer: string;
+            padding: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+        };
+        trailing: {
+            wrapper: string;
+            pointer: string;
+            padding: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+        };
+    };
+};
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (StringConstructor | ObjectConstructor | NumberConstructor)[];
+        type: (StringConstructor | NumberConstructor | ObjectConstructor)[];
         default: string;
     };
     id: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     name: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     placeholder: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     required: {
         type: BooleanConstructor;
@@ -27,19 +137,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     icon: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     loadingIcon: {
         type: StringConstructor;
-        default: () => any;
+        default: () => string;
     };
     leadingIcon: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     trailingIcon: {
         type: StringConstructor;
-        default: () => any;
+        default: () => string;
     };
     trailing: {
         type: BooleanConstructor;
@@ -59,21 +169,21 @@ declare const _default: import("vue").DefineComponent<{
     };
     options: {
         type: ArrayConstructor;
-        default: () => never[];
+        default: () => any[];
     };
     size: {
         type: PropType<SelectSize>;
-        default: null;
+        default: any;
         validator(value: string): boolean;
     };
     color: {
-        type: PropType<any>;
-        default: () => any;
+        type: PropType<SelectColor>;
+        default: () => string;
         validator(value: string): boolean;
     };
     variant: {
         type: PropType<SelectVariant>;
-        default: () => any;
+        default: () => string;
         validator(value: string): boolean;
     };
     optionAttribute: {
@@ -86,57 +196,168 @@ declare const _default: import("vue").DefineComponent<{
     };
     selectClass: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     class: {
         type: PropType<any>;
         default: () => "";
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }, {
-    ui: ComputedRef<any>;
+    ui: ComputedRef<{
+        form: string;
+        placeholder: string;
+        default: {
+            size: string;
+            color: string;
+            variant: string;
+            loadingIcon: string;
+            trailingIcon: string;
+        };
+        wrapper: string;
+        base: string;
+        rounded: string;
+        file: {
+            base: string;
+        };
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        gap: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        leading: {
+            padding: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+        };
+        trailing: {
+            padding: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+        };
+        color: {
+            white: {
+                outline: string;
+            };
+            gray: {
+                outline: string;
+            };
+        };
+        variant: {
+            outline: string;
+            none: string;
+        };
+        icon: {
+            base: string;
+            color: string;
+            loading: string;
+            size: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+            leading: {
+                wrapper: string;
+                pointer: string;
+                padding: {
+                    '2xs': string;
+                    xs: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                };
+            };
+            trailing: {
+                wrapper: string;
+                pointer: string;
+                padding: {
+                    '2xs': string;
+                    xs: string;
+                    sm: string;
+                    md: string;
+                    lg: string;
+                    xl: string;
+                };
+            };
+        };
+    }>;
     attrs: ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    name: ComputedRef<string | undefined>;
-    inputId: ComputedRef<string | undefined>;
+    name: ComputedRef<string>;
+    inputId: ComputedRef<string>;
     normalizedOptionsWithPlaceholder: ComputedRef<{
-        disabled?: boolean | undefined;
+        disabled?: boolean;
         children: {
             disabled?: boolean;
         }[];
     }[]>;
     normalizedValue: ComputedRef<any>;
     isLeading: ComputedRef<string | true>;
-    isTrailing: ComputedRef<string | true | undefined>;
+    isTrailing: ComputedRef<string | true>;
     selectClass: ComputedRef<string>;
-    leadingIconName: ComputedRef<string | undefined>;
+    leadingIconName: ComputedRef<string>;
     leadingIconClass: ComputedRef<string>;
     leadingWrapperIconClass: ComputedRef<string>;
-    trailingIconName: ComputedRef<string | undefined>;
+    trailingIconName: ComputedRef<string>;
     trailingIconClass: ComputedRef<string>;
     trailingWrapperIconClass: ComputedRef<string>;
     onInput: (event: Event) => void;
     onChange: (event: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (StringConstructor | ObjectConstructor | NumberConstructor)[];
+        type: (StringConstructor | NumberConstructor | ObjectConstructor)[];
         default: string;
     };
     id: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     name: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     placeholder: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     required: {
         type: BooleanConstructor;
@@ -148,19 +369,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     icon: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     loadingIcon: {
         type: StringConstructor;
-        default: () => any;
+        default: () => string;
     };
     leadingIcon: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     trailingIcon: {
         type: StringConstructor;
-        default: () => any;
+        default: () => string;
     };
     trailing: {
         type: BooleanConstructor;
@@ -180,21 +401,21 @@ declare const _default: import("vue").DefineComponent<{
     };
     options: {
         type: ArrayConstructor;
-        default: () => never[];
+        default: () => any[];
     };
     size: {
         type: PropType<SelectSize>;
-        default: null;
+        default: any;
         validator(value: string): boolean;
     };
     color: {
-        type: PropType<any>;
-        default: () => any;
+        type: PropType<SelectColor>;
+        default: () => string;
         validator(value: string): boolean;
     };
     variant: {
         type: PropType<SelectVariant>;
-        default: () => any;
+        default: () => string;
         validator(value: string): boolean;
     };
     optionAttribute: {
@@ -207,40 +428,42 @@ declare const _default: import("vue").DefineComponent<{
     };
     selectClass: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     class: {
         type: PropType<any>;
         default: () => "";
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
-    size: SelectSize;
     name: string;
+    size: SelectSize;
     required: boolean;
     class: any;
-    leading: boolean;
-    color: any;
-    variant: SelectVariant;
     disabled: boolean;
-    ui: any;
+    ui: {};
+    color: SelectColor;
+    variant: SelectVariant;
+    icon: string;
+    id: string;
+    leading: boolean;
+    options: unknown[];
+    modelValue: string | number | Record<string, any>;
     loading: boolean;
     padded: boolean;
-    icon: string;
     loadingIcon: string;
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
-    id: string;
-    modelValue: string | number | Record<string, any>;
     placeholder: string;
-    options: unknown[];
     optionAttribute: string;
     valueAttribute: string;
     selectClass: string;

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

@@ -4,7 +4,7 @@
     v-slot="{ open }"
     :by="by"
     :name="name"
-    :model-value="modelValue"
+    :model-value="multiple ? (Array.isArray(modelValue) ? modelValue : []) : modelValue"
     :multiple="multiple"
     :disabled="disabled"
     as="div"
@@ -30,18 +30,18 @@
       <slot :open="open" :disabled="disabled" :loading="loading">
         <button :id="inputId" :class="selectClass" :disabled="disabled" type="button" v-bind="attrs">
           <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
-            <slot name="leading" :disabled="disabled" :loading="loading">
+            <slot name="leading" :selected="selected" :disabled="disabled" :loading="loading">
               <UIcon :name="leadingIconName" :class="leadingIconClass" />
             </slot>
           </span>
 
-          <slot name="label">
+          <slot name="label" :selected="selected">
             <span v-if="label" :class="uiMenu.label">{{ label }}</span>
             <span v-else :class="uiMenu.label">{{ placeholder || '&nbsp;' }}</span>
           </slot>
 
           <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
-            <slot name="trailing" :disabled="disabled" :loading="loading">
+            <slot name="trailing" :selected="selected" :disabled="disabled" :loading="loading">
               <UIcon :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
             </slot>
           </span>
@@ -68,15 +68,15 @@
             <component
               :is="searchable ? 'HComboboxOption' : 'HListboxOption'"
               v-for="(option, index) in filteredOptions"
-              v-slot="{ active, selected, disabled: optionDisabled }"
+              v-slot="{ active, selected: optionSelected, disabled: optionDisabled }"
               :key="index"
               as="template"
               :value="valueAttribute ? option[valueAttribute] : option"
               :disabled="option.disabled"
             >
-              <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, selected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
+              <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, optionSelected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
                 <div :class="uiMenu.option.container">
-                  <slot name="option" :option="option" :active="active" :selected="selected">
+                  <slot name="option" :option="option" :active="active" :selected="optionSelected">
                     <UIcon v-if="option.icon" :name="option.icon" :class="[uiMenu.option.icon.base, active ? uiMenu.option.icon.active : uiMenu.option.icon.inactive, option.iconClass]" aria-hidden="true" />
                     <UAvatar
                       v-else-if="option.avatar"
@@ -90,16 +90,16 @@
                   </slot>
                 </div>
 
-                <span v-if="selected" :class="[uiMenu.option.selectedIcon.wrapper, uiMenu.option.selectedIcon.padding]">
+                <span v-if="optionSelected" :class="[uiMenu.option.selectedIcon.wrapper, uiMenu.option.selectedIcon.padding]">
                   <UIcon :name="selectedIcon" :class="uiMenu.option.selectedIcon.base" aria-hidden="true" />
                 </span>
               </li>
             </component>
 
-            <component :is="searchable ? 'HComboboxOption' : 'HListboxOption'" v-if="creatable && createOption" v-slot="{ active, selected }" :value="createOption" as="template">
+            <component :is="searchable ? 'HComboboxOption' : 'HListboxOption'" v-if="creatable && createOption" v-slot="{ active, selected: optionSelected }" :value="createOption" as="template">
               <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive]">
                 <div :class="uiMenu.option.container">
-                  <slot name="option-create" :option="createOption" :active="active" :selected="selected">
+                  <slot name="option-create" :option="createOption" :active="active" :selected="optionSelected">
                     <span :class="uiMenu.option.create">Create "{{ createOption[optionAttribute] }}"</span>
                   </slot>
                 </div>
@@ -260,7 +260,7 @@ export default defineComponent({
       default: false
     },
     showCreateOptionWhen: {
-      type: String,
+      type: [String, Function],
       default: () => configMenu.default.showCreateOptionWhen
     },
     placeholder: {
@@ -330,13 +330,16 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "update:query", "open", "close", "change"],
   setup(props, { emit, slots }) {
+    if (import.meta.dev && props.multiple && !Array.isArray(props.modelValue)) {
+      console.warn(`[@nuxt/ui] The USelectMenu components needs to have a modelValue of type Array when using the multiple prop. Got '${typeof props.modelValue}' instead.`, props.modelValue);
+    }
     const { ui, attrs } = useUI("select", toRef(props, "ui"), config, toRef(props, "class"));
     const { ui: uiMenu } = useUI("selectMenu", toRef(props, "uiMenu"), configMenu);
     const popper = computed(() => defu({}, props.popper, uiMenu.value.popper));
     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() {
@@ -347,17 +350,31 @@ export default defineComponent({
         emit("update:query", value);
       }
     });
+    const selected = computed(() => {
+      if (props.multiple) {
+        if (!Array.isArray(props.modelValue) || !props.modelValue.length) {
+          return [];
+        }
+        if (props.valueAttribute) {
+          return options.value.filter((option) => props.modelValue.includes(option[props.valueAttribute]));
+        }
+        return options.value.filter((option) => props.modelValue.includes(option));
+      }
+      if (props.valueAttribute) {
+        return options.value.find((option) => option[props.valueAttribute] === props.modelValue);
+      }
+      return options.value.find((option) => option === props.modelValue);
+    });
     const label = computed(() => {
       if (props.multiple) {
         if (Array.isArray(props.modelValue) && props.modelValue.length) {
-          return `${props.modelValue.length} selected`;
+          return `${selected.value.length} selected`;
         } else {
           return null;
         }
       } else if (props.modelValue !== void 0 && props.modelValue !== null) {
         if (props.valueAttribute) {
-          const option = props.options.find((option2) => option2[props.valueAttribute] === props.modelValue);
-          return option ? option[props.optionAttribute] : null;
+          return selected.value?.[props.optionAttribute] ?? null;
         } else {
           return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute];
         }
@@ -426,15 +443,20 @@ export default defineComponent({
         props.loading && !isLeading.value && ui.value.icon.loading
       );
     });
-    const debouncedSearch = typeof props.searchable === "function" ? useDebounceFn(props.searchable, props.debounce) : void 0;
-    const filteredOptions = computedAsync(async () => {
-      if (props.searchable && debouncedSearch) {
+    const debouncedSearch = props.searchable && typeof props.searchable === "function" ? useDebounceFn(props.searchable, props.debounce) : void 0;
+    const options = computedAsync(async () => {
+      if (debouncedSearch) {
         return await debouncedSearch(query.value);
       }
-      if (query.value === "") {
-        return props.options;
+      return props.options || [];
+    }, [], {
+      lazy: props.searchableLazy
+    });
+    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;
@@ -443,8 +465,6 @@ export default defineComponent({
           return child !== null && child !== void 0 && String(child).search(new RegExp(query.value, "i")) !== -1;
         });
       });
-    }, [], {
-      lazy: props.searchableLazy
     });
     const createOption = computed(() => {
       if (query.value === "") {
@@ -459,6 +479,11 @@ export default defineComponent({
           return null;
         }
       }
+      if (typeof props.showCreateOptionWhen === "function") {
+        if (!props.showCreateOptionWhen(query.value, filteredOptions.value)) {
+          return null;
+        }
+      }
       return ["string", "number"].includes(typeof props.modelValue) ? query.value : { [props.optionAttribute]: query.value };
     });
     function clearOnClose() {
@@ -497,6 +522,7 @@ export default defineComponent({
       popper,
       trigger,
       container,
+      selected,
       label,
       isLeading,
       isTrailing,