@nuxt/ui 2.11.0 → 2.12.0

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

@@ -90,11 +90,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: ComputedRef<any>;
@@ -102,7 +102,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     name: ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | null | undefined>;
+    inputId: import("vue").Ref<string | undefined>;
     normalizedOptionsWithPlaceholder: ComputedRef<{
         disabled?: boolean | undefined;
         children: {
@@ -119,7 +119,7 @@ declare const _default: import("vue").DefineComponent<{
     trailingIconName: ComputedRef<string | undefined>;
     trailingIconClass: ComputedRef<string>;
     trailingWrapperIconClass: ComputedRef<string>;
-    onInput: (event: InputEvent) => void;
+    onInput: (event: Event) => void;
     onChange: (event: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -211,23 +211,24 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
     size: SelectSize;
-    ui: Partial<any>;
+    ui: any;
     id: string;
     icon: string;
     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"
@@ -15,7 +15,7 @@
       v-if="required"
       :value="modelValue"
       :required="required"
-      class="absolute inset-0 w-px opacity-0 cursor-default"
+      :class="uiMenu.required"
       tabindex="-1"
       aria-hidden="true"
     >
@@ -25,10 +25,10 @@
       ref="trigger"
       as="div"
       role="button"
-      class="inline-flex w-full"
+      :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,9 +36,9 @@
           </span>
 
           <slot name="label">
-            <span v-if="multiple && Array.isArray(modelValue) && modelValue.length" class="block truncate">{{ modelValue.length }} selected</span>
-            <span v-else-if="!multiple && modelValue" class="block truncate">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
-            <span v-else class="block truncate" :class="uiMenu.placeholder">{{ placeholder || '&nbsp;' }}</span>
+            <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-else :class="uiMenu.label">{{ placeholder || '&nbsp;' }}</span>
           </slot>
 
           <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
@@ -53,18 +53,18 @@
     <div v-if="open" ref="container" :class="[uiMenu.container, uiMenu.width]">
       <Transition appear v-bind="uiMenu.transition">
         <div>
-          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(uiMenu.arrow)]" />
-          <component :is="searchable ? 'HComboboxOptions' : 'HListboxOptions'" static :class="[uiMenu.base, uiMenu.divide, uiMenu.ring, uiMenu.rounded, uiMenu.shadow, uiMenu.background, uiMenu.padding, uiMenu.height]">
+          <div v-if="popper.arrow" data-popper-arrow :class="Object.values(uiMenu.arrow)" />
+
+          <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'"
@@ -97,11 +97,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="block truncate">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>
@@ -111,6 +111,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>
@@ -165,6 +170,10 @@ export default defineComponent({
       type: [String, Number, Object, Array],
       default: ""
     },
+    query: {
+      type: String,
+      default: null
+    },
     by: {
       type: String,
       default: void 0
@@ -235,7 +244,7 @@ export default defineComponent({
     },
     clearSearchOnClose: {
       type: Boolean,
-      default: () => configMenu.default.clearOnClose
+      default: () => configMenu.default.clearSearchOnClose
     },
     debounce: {
       type: Number,
@@ -245,6 +254,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    showCreateOptionWhen: {
+      type: String,
+      default: () => configMenu.default.showCreateOptionWhen
+    },
     placeholder: {
       type: String,
       default: null
@@ -299,18 +312,18 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     },
     uiMenu: {
       type: Object,
-      default: void 0
+      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);
@@ -319,21 +332,28 @@ 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 selectClass = computed(() => {
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
         ui.value.base,
+        uiMenu.value.select,
         rounded.value,
-        "text-left cursor-default",
         ui.value.size[size.value],
         ui.value.gap[size.value],
         props.padded ? ui.value.padding[size.value] : "p-0",
         variant?.replaceAll("{color}", color.value),
         (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
-        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value],
-        "inline-flex items-center"
+        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
       ), props.selectClass);
     });
     const isLeading = computed(() => {
@@ -364,9 +384,9 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
+        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
         ui.value.icon.size[size.value],
-        props.loading && "animate-spin"
+        props.loading && ui.value.icon.loading
       );
     });
     const trailingWrapperIconClass = computed(() => {
@@ -379,9 +399,9 @@ export default defineComponent({
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
+        color.value && appConfig.ui.colors.includes(color.value) && ui.value.icon.color.replaceAll("{color}", color.value),
         ui.value.icon.size[size.value],
-        props.loading && !isLeading.value && "animate-spin"
+        props.loading && !isLeading.value && ui.value.icon.loading
       );
     });
     const debouncedSearch = typeof props.searchable === "function" ? useDebounceFn(props.searchable, props.debounce) : void 0;
@@ -402,8 +422,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 +452,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,
@@ -452,9 +483,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

@@ -5,6 +5,10 @@ declare const _default: import("vue").DefineComponent<{
         type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
         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;
@@ -133,15 +141,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
     uiMenu: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -150,7 +158,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     name: import("vue").ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | null | 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>;
@@ -164,16 +172,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)[];
         default: string;
     };
+    query: {
+        type: StringConstructor;
+        default: null;
+    };
     by: {
         type: StringConstructor;
         default: undefined;
@@ -257,6 +270,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    showCreateOptionWhen: {
+        type: PropType<"empty" | "always">;
+        default: () => any;
+    };
     placeholder: {
         type: StringConstructor;
         default: null;
@@ -302,24 +319,25 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
     uiMenu: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        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: SelectSize;
-    ui: Partial<any>;
+    ui: any;
     id: string;
     icon: string;
     color: any;
@@ -329,6 +347,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 +362,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: Partial<any>;
+    showCreateOptionWhen: "empty" | "always";
 }, {}>;
 export default _default;

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

@@ -9,7 +9,6 @@
       :required="required"
       :disabled="disabled"
       :placeholder="placeholder"
-      class="form-textarea"
       :class="textareaClass"
       v-bind="attrs"
       @input="onInput"
@@ -112,11 +111,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     },
     modelModifiers: {
       type: Object,
@@ -199,6 +198,7 @@ export default defineComponent({
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
         ui.value.base,
+        ui.value.form,
         ui.value.rounded,
         ui.value.placeholder,
         ui.value.size[size.value],

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

@@ -70,11 +70,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
     modelModifiers: {
         type: PropType<{
@@ -90,11 +90,11 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     name: import("vue").ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | null | undefined>;
+    inputId: import("vue").Ref<string | undefined>;
     textarea: import("vue").Ref<HTMLTextAreaElement | null>;
     textareaClass: import("vue").ComputedRef<string>;
-    onInput: (event: InputEvent) => void;
-    onChange: (event: InputEvent) => void;
+    onInput: (event: Event) => void;
+    onChange: (event: Event) => void;
     onBlur: (event: FocusEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "update:modelValue")[], "blur" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -166,11 +166,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
     modelModifiers: {
         type: PropType<{
@@ -186,7 +186,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     resize: boolean;
     size: TextareaSize;
-    ui: Partial<any>;
+    ui: any;
     id: string;
     color: any;
     name: string;

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

@@ -67,10 +67,6 @@ export default defineComponent({
         return appConfig.ui.colors.includes(value);
       }
     },
-    class: {
-      type: [String, Object, Array],
-      default: void 0
-    },
     size: {
       type: String,
       default: config.default.size,
@@ -78,12 +74,16 @@ export default defineComponent({
         return Object.keys(config.size).includes(value);
       }
     },
+    class: {
+      type: [String, Object, Array],
+      default: () => ""
+    },
     ui: {
       type: Object,
-      default: void 0
+      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);
@@ -101,8 +101,8 @@ export default defineComponent({
         ui.value.base,
         ui.value.size[props.size],
         ui.value.rounded,
-        ui.value.ring.replaceAll("{color}", color.value),
-        (active.value ? ui.value.active : ui.value.inactive).replaceAll("{color}", color.value)
+        color.value && ui.value.ring.replaceAll("{color}", color.value),
+        color.value && (active.value ? ui.value.active : ui.value.inactive).replaceAll("{color}", color.value)
       ), props.class);
     });
     const containerClass = computed(() => {
@@ -115,13 +115,13 @@ export default defineComponent({
     const onIconClass = computed(() => {
       return twJoin(
         ui.value.icon.size[props.size],
-        ui.value.icon.on.replaceAll("{color}", color.value)
+        color.value && ui.value.icon.on.replaceAll("{color}", color.value)
       );
     });
     const offIconClass = computed(() => {
       return twJoin(
         ui.value.icon.size[props.size],
-        ui.value.icon.off.replaceAll("{color}", color.value)
+        color.value && ui.value.icon.off.replaceAll("{color}", color.value)
       );
     });
     return {