@nuxt/ui 2.21.0 → 2.22.0

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

@@ -1,5 +1,5 @@
 <template>
-  <div :class="(type === 'hidden') ? 'hidden' : ui.wrapper">
+  <div :class="type === 'hidden' ? 'hidden' : ui.wrapper">
     <input
       :id="inputId"
       ref="input"
@@ -16,13 +16,13 @@
     >
     <slot />
 
-    <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
+    <span v-if="isLeading && leadingIconName || $slots.leading" :class="leadingWrapperIconClass">
       <slot name="leading" :disabled="disabled" :loading="loading">
         <UIcon :name="leadingIconName" :class="leadingIconClass" />
       </slot>
     </span>
 
-    <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
+    <span v-if="isTrailing && trailingIconName || $slots.trailing" :class="trailingWrapperIconClass">
       <slot name="trailing" :disabled="disabled" :loading="loading">
         <UIcon :name="trailingIconName" :class="trailingIconClass" />
       </slot>

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

@@ -452,16 +452,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => {};
     };
 }>> & Readonly<{
-    onBlur?: (...args: any[]) => any;
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
+    onBlur?: (...args: any[]) => any;
 }>, {
     name: string;
     type: string;
     required: boolean;
     size: InputSize;
-    class: any;
-    disabled: boolean;
     ui: {
         wrapper?: string;
         base?: string;
@@ -578,8 +576,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     color: InputColor;
     variant: InputVariant;
     leading: boolean;
+    disabled: boolean;
     id: string;
     icon: string;
+    class: any;
     modelValue: string | number;
     loading: boolean;
     padded: boolean;

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

@@ -24,13 +24,13 @@
         @change="onQueryChange"
       />
 
-      <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
+      <span v-if="isLeading && leadingIconName || $slots.leading" :class="leadingWrapperIconClass">
         <slot name="leading" :disabled="disabled" :loading="loading">
           <UIcon :name="leadingIconName" :class="leadingIconClass" />
         </slot>
       </span>
 
-      <HComboboxButton v-if="(isTrailing && trailingIconName) || $slots.trailing" ref="trigger" :class="trailingWrapperIconClass">
+      <HComboboxButton v-if="isTrailing && trailingIconName || $slots.trailing" ref="trigger" :class="trailingWrapperIconClass">
         <slot name="trailing" :disabled="disabled" :loading="loading">
           <UIcon :name="trailingIconName" :class="trailingIconClass" />
         </slot>
@@ -103,7 +103,7 @@ import {
 import { computedAsync, useDebounceFn } from "@vueuse/core";
 import { defu } from "defu";
 import { twJoin } from "tailwind-merge";
-import { isEqual } from "ohash";
+import { isEqual } from "ohash/utils";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import { useUI } from "../../composables/useUI";

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

@@ -145,7 +145,7 @@ declare const configMenu: {
         };
         avatar: {
             base: string;
-            size: import("../../types/avatar").AvatarSize;
+            size: import("../../types/avatar.js").AvatarSize;
         };
         chip: {
             base: string;
@@ -467,7 +467,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             avatar: {
                 base: string;
-                size: import("../../types/avatar").AvatarSize;
+                size: import("../../types/avatar.js").AvatarSize;
             };
             chip: {
                 base: string;
@@ -668,8 +668,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => {};
     };
 }>> & Readonly<{
-    onChange?: (...args: any[]) => any;
     onClose?: (...args: any[]) => any;
+    onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
     onOpen?: (...args: any[]) => any;
     "onUpdate:query"?: (...args: any[]) => any;
@@ -677,8 +677,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     name: string;
     required: boolean;
     size: InputSize;
-    class: any;
-    disabled: boolean;
     ui: {
         wrapper?: string;
         base?: string;
@@ -797,9 +795,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     search: (query: string) => Promise<any[]> | any[];
     leading: boolean;
     popper: PopperOptions;
+    disabled: boolean;
     query: string;
     id: string;
     icon: string;
+    class: any;
     options: string[] | {
         [key: string]: any;
         disabled?: boolean;
@@ -857,7 +857,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             avatar: {
                 base: string;
-                size: import("../../types/avatar").AvatarSize;
+                size: import("../../types/avatar.js").AvatarSize;
             };
             chip: {
                 base: string;
@@ -1258,17 +1258,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => any;
         };
         size: {
-            type: PropType<import("../../types/avatar").AvatarSize>;
+            type: PropType<import("../../types/avatar.js").AvatarSize>;
             default: () => string;
             validator(value: string): boolean;
         };
         chipColor: {
-            type: PropType<import("../../types/avatar").AvatarChipColor>;
+            type: PropType<import("../../types/avatar.js").AvatarChipColor>;
             default: () => any;
             validator(value: string): boolean;
         };
         chipPosition: {
-            type: PropType<import("../../types/avatar").AvatarChipPosition>;
+            type: PropType<import("../../types/avatar.js").AvatarChipPosition>;
             default: () => string;
             validator(value: string): boolean;
         };
@@ -1441,17 +1441,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => any;
         };
         size: {
-            type: PropType<import("../../types/avatar").AvatarSize>;
+            type: PropType<import("../../types/avatar.js").AvatarSize>;
             default: () => string;
             validator(value: string): boolean;
         };
         chipColor: {
-            type: PropType<import("../../types/avatar").AvatarChipColor>;
+            type: PropType<import("../../types/avatar.js").AvatarChipColor>;
             default: () => any;
             validator(value: string): boolean;
         };
         chipPosition: {
-            type: PropType<import("../../types/avatar").AvatarChipPosition>;
+            type: PropType<import("../../types/avatar.js").AvatarChipPosition>;
             default: () => string;
             validator(value: string): boolean;
         };
@@ -1532,8 +1532,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => {};
         };
     }>> & Readonly<{}>, {
-        size: import("../../types/avatar").AvatarSize;
-        class: any;
+        size: import("../../types/avatar.js").AvatarSize;
         ui: {
             wrapper?: string;
             background?: string;
@@ -1598,11 +1597,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             strategy?: Strategy;
         };
         as: string | Record<string, any>;
-        text: string;
         alt: string;
         icon: string;
+        class: any;
+        text: string;
         src: string | boolean;
-        chipColor: import("../../types/avatar").AvatarChipColor;
+        chipColor: import("../../types/avatar.js").AvatarChipColor;
         chipPosition: "top-right" | "bottom-right" | "top-left" | "bottom-left";
         chipText: string | number;
         imgClass: string;

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

@@ -154,8 +154,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     name: string;
     required: boolean;
-    class: any;
-    disabled: boolean;
     ui: {
         wrapper?: string;
         container?: string;
@@ -178,10 +176,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         strategy?: Strategy;
     };
     color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-    label: string;
+    disabled: boolean;
     id: string;
+    class: any;
     modelValue: string | number | boolean | object;
     value: string | number | boolean;
+    label: string;
     help: string;
     inputClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -162,8 +162,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }>, {
     name: string;
-    class: any;
-    disabled: boolean;
     ui: {
         wrapper?: string;
         fieldset?: string;
@@ -177,11 +175,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         strategy?: Strategy;
     };
     color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-    legend: string;
+    disabled: boolean;
+    class: any;
     options: unknown[];
     modelValue: string | number | boolean | object;
     optionAttribute: string;
     valueAttribute: string;
+    legend: string;
     uiRadio: {
         wrapper?: string;
         container?: string;
@@ -372,8 +372,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>, {
         name: string;
         required: boolean;
-        class: any;
-        disabled: boolean;
         ui: {
             wrapper?: string;
             container?: string;
@@ -396,10 +394,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             strategy?: Strategy;
         };
         color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-        label: string;
+        disabled: boolean;
         id: string;
+        class: any;
         modelValue: string | number | boolean | object;
         value: string | number | boolean;
+        label: string;
         help: string;
         inputClass: string;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -254,9 +254,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     name: string;
     size: RangeSize;
-    class: any;
-    disabled: boolean;
-    max: number;
     ui: {
         wrapper?: string;
         base?: string;
@@ -326,8 +323,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
     step: number;
+    disabled: boolean;
     id: string;
+    class: any;
     modelValue: number;
+    max: number;
     inputClass: string;
     min: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -38,13 +38,13 @@
       </template>
     </select>
 
-    <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
+    <span v-if="isLeading && leadingIconName || $slots.leading" :class="leadingWrapperIconClass">
       <slot name="leading" :disabled="disabled" :loading="loading">
         <UIcon :name="leadingIconName" :class="leadingIconClass" />
       </slot>
     </span>
 
-    <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
+    <span v-if="isTrailing && trailingIconName || $slots.trailing" :class="trailingWrapperIconClass">
       <slot name="trailing" :disabled="disabled" :loading="loading">
         <UIcon :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
       </slot>

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

@@ -447,8 +447,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     name: string;
     required: boolean;
     size: SelectSize;
-    class: any;
-    disabled: boolean;
     ui: {
         form?: string;
         placeholder?: string;
@@ -566,8 +564,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     color: SelectColor;
     variant: SelectVariant;
     leading: boolean;
+    disabled: boolean;
     id: string;
     icon: string;
+    class: any;
     options: unknown[];
     modelValue: string | number | object;
     loading: boolean;

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

@@ -4,7 +4,7 @@
     v-slot="{ open }"
     :by="by"
     :name="name"
-    :model-value="multiple ? (Array.isArray(modelValue) ? modelValue : []) : modelValue"
+    :model-value="multiple ? Array.isArray(modelValue) ? modelValue : [] : modelValue"
     :multiple="multiple"
     :disabled="disabled"
     as="div"
@@ -16,6 +16,7 @@
       :value="modelValue"
       :required="required"
       :class="uiMenu.required"
+      :form="inputTargetForm"
       tabindex="-1"
       aria-hidden="true"
     >
@@ -29,7 +30,7 @@
     >
       <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">
+          <span v-if="isLeading && leadingIconName || $slots.leading" :class="leadingWrapperIconClass">
             <slot name="leading" :selected="selected" :disabled="disabled" :loading="loading">
               <UIcon :name="leadingIconName" :class="leadingIconClass" />
             </slot>
@@ -37,10 +38,10 @@
 
           <slot name="label" :selected="selected">
             <span v-if="label" :class="uiMenu.label">{{ label }}</span>
-            <span v-else :class="uiMenu.label">{{ placeholder || '&nbsp;' }}</span>
+            <span v-else :class="uiMenu.label">{{ placeholder || '\xA0' }}</span>
           </slot>
 
-          <span v-if="(isTrailing && trailingIconName) || $slots.trailing" :class="trailingWrapperIconClass">
+          <span v-if="isTrailing && trailingIconName || $slots.trailing" :class="trailingWrapperIconClass">
             <slot name="trailing" :selected="selected" :disabled="disabled" :loading="loading">
               <UIcon :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
             </slot>
@@ -139,7 +140,7 @@ import {
 import { computedAsync, useDebounceFn } from "@vueuse/core";
 import { defu } from "defu";
 import { twJoin } from "tailwind-merge";
-import { isEqual } from "ohash";
+import { isEqual } from "ohash/utils";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import { useUI } from "../../composables/useUI";
@@ -308,6 +309,10 @@ export default defineComponent({
       type: Array,
       default: null
     },
+    inputTargetForm: {
+      type: String,
+      default: null
+    },
     popper: {
       type: Object,
       default: () => ({})

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

@@ -140,7 +140,7 @@ declare const configMenu: {
         };
         avatar: {
             base: string;
-            size: import("../../types/avatar").AvatarSize;
+            size: import("../../types/avatar.js").AvatarSize;
         };
         chip: {
             base: string;
@@ -323,6 +323,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: ArrayConstructor;
         default: any;
     };
+    inputTargetForm: {
+        type: StringConstructor;
+        default: any;
+    };
     popper: {
         type: PropType<PopperOptions>;
         default: () => {};
@@ -488,7 +492,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             avatar: {
                 base: string;
-                size: import("../../types/avatar").AvatarSize;
+                size: import("../../types/avatar.js").AvatarSize;
             };
             chip: {
                 base: string;
@@ -699,6 +703,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: ArrayConstructor;
         default: any;
     };
+    inputTargetForm: {
+        type: StringConstructor;
+        default: any;
+    };
     popper: {
         type: PropType<PopperOptions>;
         default: () => {};
@@ -724,8 +732,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => {};
     };
 }>> & Readonly<{
-    onChange?: (...args: any[]) => any;
     onClose?: (...args: any[]) => any;
+    onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
     onOpen?: (...args: any[]) => any;
     "onUpdate:query"?: (...args: any[]) => any;
@@ -733,8 +741,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     name: string;
     required: boolean;
     size: SelectSize;
-    class: any;
-    disabled: boolean;
     ui: {
         form?: string;
         placeholder?: string;
@@ -853,9 +859,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     variant: SelectVariant;
     leading: boolean;
     popper: PopperOptions;
+    disabled: boolean;
     query: string;
     id: string;
     icon: string;
+    class: any;
     options: string[] | {
         [key: string]: any;
         disabled?: boolean;
@@ -905,7 +913,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             };
             avatar: {
                 base: string;
-                size: import("../../types/avatar").AvatarSize;
+                size: import("../../types/avatar.js").AvatarSize;
             };
             chip: {
                 base: string;
@@ -964,6 +972,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     clearSearchOnClose: boolean;
     creatable: boolean;
     showCreateOptionWhen: "empty" | "always" | ((query: string, results: any[]) => boolean);
+    inputTargetForm: string;
 }, {}, {
     HCombobox: import("vue").DefineComponent<{
         as: {
@@ -1528,17 +1537,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => any;
         };
         size: {
-            type: PropType<import("../../types/avatar").AvatarSize>;
+            type: PropType<import("../../types/avatar.js").AvatarSize>;
             default: () => string;
             validator(value: string): boolean;
         };
         chipColor: {
-            type: PropType<import("../../types/avatar").AvatarChipColor>;
+            type: PropType<import("../../types/avatar.js").AvatarChipColor>;
             default: () => any;
             validator(value: string): boolean;
         };
         chipPosition: {
-            type: PropType<import("../../types/avatar").AvatarChipPosition>;
+            type: PropType<import("../../types/avatar.js").AvatarChipPosition>;
             default: () => string;
             validator(value: string): boolean;
         };
@@ -1711,17 +1720,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => any;
         };
         size: {
-            type: PropType<import("../../types/avatar").AvatarSize>;
+            type: PropType<import("../../types/avatar.js").AvatarSize>;
             default: () => string;
             validator(value: string): boolean;
         };
         chipColor: {
-            type: PropType<import("../../types/avatar").AvatarChipColor>;
+            type: PropType<import("../../types/avatar.js").AvatarChipColor>;
             default: () => any;
             validator(value: string): boolean;
         };
         chipPosition: {
-            type: PropType<import("../../types/avatar").AvatarChipPosition>;
+            type: PropType<import("../../types/avatar.js").AvatarChipPosition>;
             default: () => string;
             validator(value: string): boolean;
         };
@@ -1802,8 +1811,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => {};
         };
     }>> & Readonly<{}>, {
-        size: import("../../types/avatar").AvatarSize;
-        class: any;
+        size: import("../../types/avatar.js").AvatarSize;
         ui: {
             wrapper?: string;
             background?: string;
@@ -1868,11 +1876,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             strategy?: Strategy;
         };
         as: string | Record<string, any>;
-        text: string;
         alt: string;
         icon: string;
+        class: any;
+        text: string;
         src: string | boolean;
-        chipColor: import("../../types/avatar").AvatarChipColor;
+        chipColor: import("../../types/avatar.js").AvatarChipColor;
         chipPosition: "top-right" | "bottom-right" | "top-left" | "bottom-left";
         chipText: string | number;
         imgClass: string;

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

@@ -410,15 +410,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => {};
     };
 }>> & Readonly<{
-    onBlur?: (...args: any[]) => any;
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
+    onBlur?: (...args: any[]) => any;
 }>, {
     name: string;
     required: boolean;
     size: TextareaSize;
-    class: any;
-    disabled: boolean;
     ui: {
         form?: string;
         default?: DeepPartial<{
@@ -534,7 +532,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     color: TextareaColor;
     variant: TextareaVariant;
     resize: boolean;
+    disabled: boolean;
     id: string;
+    class: any;
     modelValue: string | number;
     padded: boolean;
     rows: number;

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

@@ -248,8 +248,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     name: string;
     size: ToggleSize;
-    class: any;
-    disabled: boolean;
     ui: {
         base?: string;
         rounded?: string;
@@ -317,7 +315,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         strategy?: Strategy;
     };
     color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+    disabled: boolean;
     id: string;
+    class: any;
     modelValue: boolean;
     loading: boolean;
     loadingIcon: string;

package/dist/runtime/components/layout/Card.vue.d.ts

@@ -82,7 +82,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => {};
     };
 }>> & Readonly<{}>, {
-    class: any;
     ui: {
         base?: string;
         background?: string;
@@ -111,5 +110,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         strategy?: Strategy;
     };
     as: string;
+    class: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/runtime/components/layout/Container.vue.d.ts

@@ -46,7 +46,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => {};
     };
 }>> & Readonly<{}>, {
-    class: any;
     ui: {
         base?: string;
         padding?: string;
@@ -57,5 +56,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         strategy?: Strategy;
     };
     as: string;
+    class: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;