@nuxt/ui 2.11.1 → 2.12.1

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

@@ -0,0 +1,332 @@
+import type { PropType } from 'vue';
+import type { InputSize, InputVariant, PopperOptions } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    query: {
+        type: StringConstructor;
+        default: null;
+    };
+    by: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    options: {
+        type: PropType<string[] | {
+            [key: string]: any;
+            disabled?: boolean | undefined;
+        }[]>;
+        default: () => never[];
+    };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    loadingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    leadingIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    trailingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    trailing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    leading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectedIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: null;
+    };
+    padded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<InputSize>;
+        default: null;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    variant: {
+        type: PropType<InputVariant>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    optionAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueAttribute: {
+        type: StringConstructor;
+        default: null;
+    };
+    search: {
+        type: PropType<(query: string) => Promise<any[]> | any[]>;
+        default: undefined;
+    };
+    searchAttributes: {
+        type: ArrayConstructor;
+        default: null;
+    };
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+    popper: {
+        type: PropType<PopperOptions>;
+        default: () => {};
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: null;
+    };
+    class: {
+        type: PropType<any>;
+        default: () => "";
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+    uiMenu: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    uiMenu: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    name: import("vue").ComputedRef<string | undefined>;
+    inputId: import("vue").Ref<string | undefined>;
+    popper: import("vue").ComputedRef<PopperOptions>;
+    trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
+    container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
+    label: import("vue").ComputedRef<any>;
+    isLeading: import("vue").ComputedRef<string | true>;
+    isTrailing: import("vue").ComputedRef<string | true | undefined>;
+    inputClass: import("vue").ComputedRef<string>;
+    leadingIconName: import("vue").ComputedRef<string | undefined>;
+    leadingIconClass: import("vue").ComputedRef<string>;
+    leadingWrapperIconClass: import("vue").ComputedRef<string>;
+    trailingIconName: import("vue").ComputedRef<string | undefined>;
+    trailingIconClass: import("vue").ComputedRef<string>;
+    trailingWrapperIconClass: import("vue").ComputedRef<string>;
+    filteredOptions: import("vue").Ref<any[]>;
+    query: import("vue").WritableComputedRef<string>;
+    onUpdate: (event: any) => void;
+    onChange: (event: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    query: {
+        type: StringConstructor;
+        default: null;
+    };
+    by: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    options: {
+        type: PropType<string[] | {
+            [key: string]: any;
+            disabled?: boolean | undefined;
+        }[]>;
+        default: () => never[];
+    };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    loadingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    leadingIcon: {
+        type: StringConstructor;
+        default: null;
+    };
+    trailingIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    trailing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    leading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectedIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: null;
+    };
+    padded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<InputSize>;
+        default: null;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    variant: {
+        type: PropType<InputVariant>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    optionAttribute: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueAttribute: {
+        type: StringConstructor;
+        default: null;
+    };
+    search: {
+        type: PropType<(query: string) => Promise<any[]> | any[]>;
+        default: undefined;
+    };
+    searchAttributes: {
+        type: ArrayConstructor;
+        default: null;
+    };
+    debounce: {
+        type: NumberConstructor;
+        default: number;
+    };
+    popper: {
+        type: PropType<PopperOptions>;
+        default: () => {};
+    };
+    inputClass: {
+        type: StringConstructor;
+        default: null;
+    };
+    class: {
+        type: PropType<any>;
+        default: () => "";
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+    uiMenu: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+    "onUpdate:query"?: ((...args: any[]) => any) | undefined;
+}, {
+    size: InputSize;
+    ui: any;
+    id: string;
+    icon: string;
+    color: any;
+    options: string[] | {
+        [key: string]: any;
+        disabled?: boolean | undefined;
+    }[];
+    popper: PopperOptions;
+    name: string;
+    leading: boolean;
+    search: (query: string) => Promise<any[]> | any[];
+    class: any;
+    modelValue: string | number | unknown[] | Record<string, any>;
+    by: string;
+    loading: boolean;
+    disabled: boolean;
+    variant: InputVariant;
+    required: boolean;
+    placeholder: string;
+    padded: boolean;
+    loadingIcon: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    trailing: boolean;
+    inputClass: string;
+    query: string;
+    selectedIcon: string;
+    optionAttribute: string;
+    valueAttribute: string;
+    searchAttributes: unknown[];
+    debounce: number;
+    uiMenu: any;
+}, {}>;
+export default _default;

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

@@ -12,7 +12,7 @@
         :label="option.label"
         :model-value="modelValue"
         :value="option.value"
-        :disabled="disabled"
+        :disabled="option.disabled || disabled"
         :ui="uiRadio"
         @change="onUpdate(option.value)"
       >

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

@@ -5,7 +5,7 @@
       :name="name"
       :value="modelValue"
       :required="required"
-      :disabled="disabled || loading"
+      :disabled="disabled"
       :class="selectClass"
       v-bind="attrs"
       @input="onInput"

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

@@ -228,6 +228,7 @@ declare const _default: import("vue").DefineComponent<{
     color: any;
     options: unknown[];
     name: string;
+    leading: boolean;
     class: any;
     modelValue: string | number | Record<string, any>;
     loading: boolean;
@@ -240,7 +241,6 @@ declare const _default: import("vue").DefineComponent<{
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
-    leading: boolean;
     optionAttribute: string;
     valueAttribute: string;
     selectClass: string;

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

@@ -6,7 +6,7 @@
     :name="name"
     :model-value="modelValue"
     :multiple="multiple"
-    :disabled="disabled || loading"
+    :disabled="disabled"
     as="div"
     :class="ui.wrapper"
     @update:model-value="onUpdate"
@@ -28,7 +28,7 @@
       :class="uiMenu.trigger"
     >
       <slot :open="open" :disabled="disabled" :loading="loading">
-        <button :id="inputId" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
+        <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">
               <UIcon :name="leadingIconName" :class="leadingIconClass" />
@@ -36,8 +36,7 @@
           </span>
 
           <slot name="label">
-            <span v-if="multiple && Array.isArray(modelValue) && modelValue.length" :class="uiMenu.label">{{ modelValue.length }} selected</span>
-            <span v-else-if="!multiple && modelValue" :class="uiMenu.label">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
+            <span v-if="label" :class="uiMenu.label">{{ label }}</span>
             <span v-else :class="uiMenu.label">{{ placeholder || '&nbsp;' }}</span>
           </slot>
 
@@ -58,14 +57,13 @@
           <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
             <HComboboxInput
               v-if="searchable"
-              ref="searchInput"
               :display-value="() => query"
               name="q"
               :placeholder="searchablePlaceholder"
               autofocus
               autocomplete="off"
               :class="uiMenu.input"
-              @change="query = $event.target.value"
+              @change="onChange"
             />
             <component
               :is="searchable ? 'HComboboxOption' : 'HListboxOption'"
@@ -98,11 +96,11 @@
               </li>
             </component>
 
-            <component :is="searchable ? 'HComboboxOption' : 'HListboxOption'" v-if="creatable && queryOption && !filteredOptions.length" v-slot="{ active, selected }" :value="queryOption" as="template">
+            <component :is="searchable ? 'HComboboxOption' : 'HListboxOption'" v-if="creatable && createOption" v-slot="{ active, selected }" :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="queryOption" :active="active" :selected="selected">
-                    <span :class="uiMenu.option.create">Create "{{ queryOption[optionAttribute] }}"</span>
+                  <slot name="option-create" :option="createOption" :active="active" :selected="selected">
+                    <span :class="uiMenu.option.create">Create "{{ createOption[optionAttribute] }}"</span>
                   </slot>
                 </div>
               </li>
@@ -112,6 +110,11 @@
                 No results for "{{ query }}".
               </slot>
             </p>
+            <p v-else-if="!filteredOptions.length" :class="uiMenu.empty">
+              <slot name="empty" :query="query">
+                No options.
+              </slot>
+            </p>
           </component>
         </div>
       </Transition>
@@ -166,6 +169,10 @@ export default defineComponent({
       type: [String, Number, Object, Array],
       default: ""
     },
+    query: {
+      type: String,
+      default: null
+    },
     by: {
       type: String,
       default: void 0
@@ -236,7 +243,7 @@ export default defineComponent({
     },
     clearSearchOnClose: {
       type: Boolean,
-      default: () => configMenu.default.clearOnClose
+      default: () => configMenu.default.clearSearchOnClose
     },
     debounce: {
       type: Number,
@@ -246,6 +253,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    showCreateOptionWhen: {
+      type: String,
+      default: () => configMenu.default.showCreateOptionWhen
+    },
     placeholder: {
       type: String,
       default: null
@@ -311,7 +322,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ["update:modelValue", "open", "close", "change"],
+  emits: ["update:modelValue", "update:query", "open", "close", "change"],
   setup(props, { emit, slots }) {
     const { ui, attrs } = useUI("select", toRef(props, "ui"), config, toRef(props, "class"));
     const { ui: uiMenu } = useUI("selectMenu", toRef(props, "uiMenu"), configMenu);
@@ -320,8 +331,32 @@ export default defineComponent({
     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 query = ref("");
-    const searchInput = ref();
+    const internalQuery = ref("");
+    const query = computed({
+      get() {
+        return props.query ?? internalQuery.value;
+      },
+      set(value) {
+        internalQuery.value = value;
+        emit("update:query", value);
+      }
+    });
+    const label = computed(() => {
+      if (props.multiple) {
+        if (Array.isArray(props.modelValue) && props.modelValue.length) {
+          return `${props.modelValue.length} selected`;
+        } else {
+          return null;
+        }
+      } else {
+        if (props.valueAttribute) {
+          const option = props.options.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];
+        }
+      }
+    });
     const selectClass = computed(() => {
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
@@ -402,8 +437,20 @@ export default defineComponent({
         });
       });
     });
-    const queryOption = computed(() => {
-      return query.value === "" ? null : { [props.optionAttribute]: query.value };
+    const createOption = computed(() => {
+      if (query.value === "") {
+        return null;
+      }
+      if (props.showCreateOptionWhen === "empty" && filteredOptions.value.length) {
+        return null;
+      }
+      if (props.showCreateOptionWhen === "always") {
+        const existingOption = filteredOptions.value.find((option) => ["string", "number"].includes(typeof option) ? option === query.value : option[props.optionAttribute] === query.value);
+        if (existingOption) {
+          return null;
+        }
+      }
+      return ["string", "number"].includes(typeof props.modelValue) ? query.value : { [props.optionAttribute]: query.value };
     });
     function clearOnClose() {
       if (props.clearSearchOnClose) {
@@ -420,14 +467,13 @@ export default defineComponent({
       }
     });
     function onUpdate(event) {
-      if (query.value && searchInput.value?.$el) {
-        query.value = "";
-        searchInput.value.$el.value = "";
-      }
       emit("update:modelValue", event);
       emit("change", event);
       emitFormChange();
     }
+    function onChange(event) {
+      query.value = event.target.value;
+    }
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -441,6 +487,7 @@ export default defineComponent({
       popper,
       trigger,
       container,
+      label,
       isLeading,
       isTrailing,
       // eslint-disable-next-line vue/no-dupe-keys
@@ -452,9 +499,11 @@ export default defineComponent({
       trailingIconClass,
       trailingWrapperIconClass,
       filteredOptions,
-      queryOption,
+      createOption,
+      // eslint-disable-next-line vue/no-dupe-keys
       query,
-      onUpdate
+      onUpdate,
+      onChange
     };
   }
 });

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

@@ -2,9 +2,13 @@ import type { PropType } from 'vue';
 import type { SelectSize, SelectVariant, PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
     };
+    query: {
+        type: StringConstructor;
+        default: null;
+    };
     by: {
         type: StringConstructor;
         default: undefined;
@@ -88,6 +92,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    showCreateOptionWhen: {
+        type: PropType<"empty" | "always">;
+        default: () => any;
+    };
     placeholder: {
         type: StringConstructor;
         default: null;
@@ -154,6 +162,7 @@ declare const _default: import("vue").DefineComponent<{
     popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
+    label: import("vue").ComputedRef<any>;
     isLeading: import("vue").ComputedRef<string | true>;
     isTrailing: import("vue").ComputedRef<string | true | undefined>;
     selectClass: import("vue").ComputedRef<string>;
@@ -164,16 +173,21 @@ declare const _default: import("vue").DefineComponent<{
     trailingIconClass: import("vue").ComputedRef<string>;
     trailingWrapperIconClass: import("vue").ComputedRef<string>;
     filteredOptions: import("vue").Ref<any[]>;
-    queryOption: import("vue").ComputedRef<{
+    createOption: import("vue").ComputedRef<string | {
         [x: string]: string;
     } | null>;
-    query: import("vue").Ref<string>;
+    query: import("vue").WritableComputedRef<string>;
     onUpdate: (event: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open")[], "change" | "close" | "update:modelValue" | "open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    onChange: (event: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
     };
+    query: {
+        type: StringConstructor;
+        default: null;
+    };
     by: {
         type: StringConstructor;
         default: undefined;
@@ -257,6 +271,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    showCreateOptionWhen: {
+        type: PropType<"empty" | "always">;
+        default: () => any;
+    };
     placeholder: {
         type: StringConstructor;
         default: null;
@@ -317,6 +335,7 @@ declare const _default: import("vue").DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
+    "onUpdate:query"?: ((...args: any[]) => any) | undefined;
 }, {
     size: SelectSize;
     ui: any;
@@ -329,6 +348,7 @@ declare const _default: import("vue").DefineComponent<{
     }[];
     popper: PopperOptions;
     name: string;
+    leading: boolean;
     class: any;
     modelValue: string | number | unknown[] | Record<string, any>;
     by: string;
@@ -343,17 +363,18 @@ declare const _default: import("vue").DefineComponent<{
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
-    leading: boolean;
+    query: string;
+    selectedIcon: string;
     optionAttribute: string;
     valueAttribute: string;
+    searchAttributes: unknown[];
+    debounce: number;
+    uiMenu: any;
     selectClass: string;
-    selectedIcon: string;
     searchable: boolean | ((query: string) => Promise<any[]> | any[]);
     searchablePlaceholder: string;
     clearSearchOnClose: boolean;
-    debounce: number;
     creatable: boolean;
-    searchAttributes: unknown[];
-    uiMenu: any;
+    showCreateOptionWhen: "empty" | "always";
 }, {}>;
 export default _default;

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

@@ -83,7 +83,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "change"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("toggle", toRef(props, "ui"), config);
     const { emitFormChange, color, inputId, name } = useFormGroup(props);