@nuxt/ui 2.18.0 → 2.18.1

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.18.0",
+  "version": "2.18.1",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=3.10.0"

package/dist/module.mjs

@@ -14,7 +14,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@nuxt/ui";
-const version = "2.18.0";
+const version = "2.18.1";
 
 function createTemplates(nuxt = useNuxt()) {
   const template = addTemplate({
@@ -129,7 +129,7 @@ const module = defineNuxtModule({
       nuxt.options.css.push(resolve(runtimeDir, "ui.css"));
     }
     createTemplates(nuxt);
-    await installModule("@nuxt/icon", { componentName: "UIcon" });
+    await installModule("@nuxt/icon");
     await installModule("@nuxtjs/color-mode", { classSuffix: "" });
     await installTailwind(options, nuxt, resolve);
     addPlugin({

package/dist/runtime/components/data/Table.vue

@@ -114,7 +114,10 @@ import { ref, computed, defineComponent, toRaw, toRef } from "vue";
 import { upperFirst } from "scule";
 import { defu } from "defu";
 import { useVModel } from "@vueuse/core";
-import { UIcon, UButton, UProgress, UCheckbox } from "#components";
+import UIcon from "../elements/Icon.vue";
+import UButton from "../elements/Button.vue";
+import UProgress from "../elements/Progress.vue";
+import UCheckbox from "../forms/Checkbox.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig, get } from "../../utils";
 import appConfig from "#build/app.config";

package/dist/runtime/components/data/Table.vue.d.ts

@@ -407,28 +407,28 @@ declare const _default: import("vue").DefineComponent<{
         column: string;
         direction: "asc" | "desc";
     };
+    class: any;
+    ui: {};
+    caption: string;
+    columns: Column[];
     progress: {
         color: ProgressColor;
         animation: ProgressAnimation;
     };
-    ui: {};
-    class: any;
-    caption: string;
-    columns: Column[];
     modelValue: unknown[];
     loading: boolean;
-    by: string | Function;
-    rows: {
-        [key: string]: any;
-    }[];
-    emptyState: {
+    loadingState: {
         icon: string;
         label: string;
     };
-    loadingState: {
+    emptyState: {
         icon: string;
         label: string;
     };
+    by: string | Function;
+    rows: {
+        [key: string]: any;
+    }[];
     columnAttribute: string;
     sortMode: "auto" | "manual";
     sortButton: Button;

package/dist/runtime/components/elements/Accordion.vue

@@ -68,7 +68,8 @@
 <script>
 import { ref, computed, toRef, defineComponent, watch } from "vue";
 import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel, provideUseId } from "@headlessui/vue";
-import { UIcon, UButton } from "#components";
+import UIcon from "../elements/Icon.vue";
+import UButton from "../elements/Button.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig, omit } from "../../utils";
 import appConfig from "#build/app.config";

package/dist/runtime/components/elements/Accordion.vue.d.ts

@@ -212,8 +212,8 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onOpen?: (...args: any[]) => any;
 }, {
-    ui: {};
     class: any;
+    ui: {};
     defaultOpen: boolean;
     unmount: boolean;
     items: AccordionItem[];

package/dist/runtime/components/elements/Alert.vue

@@ -42,7 +42,9 @@
 <script>
 import { computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
-import { UIcon, UAvatar, UButton } from "#components";
+import UIcon from "../elements/Icon.vue";
+import UAvatar from "../elements/Avatar.vue";
+import UButton from "../elements/Button.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";

package/dist/runtime/components/elements/Alert.vue.d.ts

@@ -180,12 +180,12 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onClose?: (...args: any[]) => any;
 }, {
+    class: any;
     ui: {};
     color: AlertColor;
     variant: AlertVariant;
-    icon: string;
     avatar: any;
-    class: any;
+    icon: string;
     title: string;
     description: string;
     closeButton: Button;

package/dist/runtime/components/elements/Avatar.vue

@@ -23,7 +23,7 @@
 <script>
 import { defineComponent, ref, computed, toRef, watch } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
-import { UIcon } from "#components";
+import UIcon from "../elements/Icon.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";

package/dist/runtime/components/elements/Avatar.vue.d.ts

@@ -61,11 +61,11 @@ declare const config: {
 };
 declare const _default: import("vue").DefineComponent<{
     as: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: (StringConstructor | ObjectConstructor)[];
         default: string;
     };
     src: {
-        type: (BooleanConstructor | StringConstructor)[];
+        type: (StringConstructor | BooleanConstructor)[];
         default: any;
     };
     alt: {
@@ -96,7 +96,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     chipText: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: any;
     };
     imgClass: {
@@ -186,11 +186,11 @@ declare const _default: import("vue").DefineComponent<{
     onError: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: (StringConstructor | ObjectConstructor)[];
         default: string;
     };
     src: {
-        type: (BooleanConstructor | StringConstructor)[];
+        type: (StringConstructor | BooleanConstructor)[];
         default: any;
     };
     alt: {
@@ -221,7 +221,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     chipText: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: any;
     };
     imgClass: {
@@ -239,13 +239,13 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    alt: string;
     size: AvatarSize;
-    ui: {};
+    class: any;
     as: string | Record<string, any>;
+    ui: {};
     icon: string;
-    class: any;
     text: string;
+    alt: string;
     src: string | boolean;
     chipColor: AvatarChipColor;
     chipPosition: "top-right" | "bottom-right" | "top-left" | "bottom-left";

package/dist/runtime/components/elements/AvatarGroup.d.ts

@@ -5,7 +5,7 @@ declare const avatarGroupConfig: {
     ring: string;
     margin: string;
 };
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("@vue/runtime-core").DefineComponent<{
     size: {
         type: PropType<AvatarSize>;
         default: any;
@@ -25,9 +25,9 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => {};
     };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
     size: {
         type: PropType<AvatarSize>;
         default: any;

package/dist/runtime/components/elements/Badge.vue.d.ts

@@ -50,7 +50,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     label: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: any;
     };
     class: {
@@ -85,7 +85,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     label: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: any;
     };
     class: {
@@ -100,10 +100,10 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     size: BadgeSize;
+    class: any;
     ui: {};
     color: BadgeColor;
     variant: BadgeVariant;
     label: string | number;
-    class: any;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/Button.vue

@@ -19,7 +19,8 @@
 <script>
 import { computed, defineComponent, toRef } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
-import { UIcon, ULink } from "#components";
+import UIcon from "../elements/Icon.vue";
+import ULink from "../elements/Link.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from "../../utils";
 import { useInjectButtonGroup } from "../../composables/useButtonGroup";

package/dist/runtime/components/elements/Button.vue.d.ts

@@ -468,16 +468,17 @@ declare const _default: import("vue").DefineComponent<{
         readonly required: false;
     };
 }>>, {
-    truncate: boolean;
     size: ButtonSize;
-    ui: {};
+    type: string;
+    replace: boolean;
+    class: any;
     to: any;
     activeClass: string;
     exactActiveClass: string;
-    ariaCurrentValue: "true" | "location" | "page" | "step" | "date" | "time" | "false";
-    replace: boolean;
-    type: string;
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
     disabled: boolean;
+    truncate: boolean;
+    ui: {};
     color: ButtonColor;
     variant: ButtonVariant;
     label: string;
@@ -490,7 +491,6 @@ declare const _default: import("vue").DefineComponent<{
     prefetchedClass: string;
     prefetch: boolean;
     noPrefetch: boolean;
-    class: any;
     leading: boolean;
     block: boolean;
     square: boolean;

package/dist/runtime/components/elements/ButtonGroup.d.ts

@@ -100,7 +100,7 @@ declare const buttonGroupConfig: {
         };
     };
 };
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("@vue/runtime-core").DefineComponent<{
     size: {
         type: PropType<ButtonSize>;
         default: any;
@@ -121,9 +121,9 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => {};
     };
-}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
     size: {
         type: PropType<ButtonSize>;
         default: any;

package/dist/runtime/components/elements/Carousel.vue.d.ts

@@ -144,8 +144,8 @@ declare const _default: import("vue").DefineComponent<{
         default: any;
     };
 }>>, {
-    ui: any;
     class: any;
+    ui: any;
     items: any[];
     arrows: boolean;
     indicators: boolean;

package/dist/runtime/components/elements/Chip.vue.d.ts

@@ -51,7 +51,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     text: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: any;
     };
     inset: {
@@ -128,7 +128,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     text: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: any;
     };
     inset: {
@@ -151,9 +151,9 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     size: "xs" | "sm" | "2xs" | "md" | "lg" | "xl" | "3xs" | "2xl" | "3xl";
+    class: any;
     ui: {};
     color: ChipColor;
-    class: any;
     inset: boolean;
     position: "top-right" | "bottom-right" | "top-left" | "bottom-left";
     text: string | number;

package/dist/runtime/components/elements/Dropdown.vue

@@ -60,7 +60,9 @@ import { defineComponent, ref, computed, watch, toRef, onMounted, resolveCompone
 import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem, provideUseId } from "@headlessui/vue";
 import { defu } from "defu";
 import { twMerge, twJoin } from "tailwind-merge";
-import { UIcon, UAvatar, UKbd } from "#components";
+import UIcon from "../elements/Icon.vue";
+import UAvatar from "../elements/Avatar.vue";
+import UKbd from "../elements/Kbd.vue";
 import { useUI } from "../../composables/useUI";
 import { usePopper } from "../../composables/usePopper";
 import { mergeConfig, getNuxtLinkProps } from "../../utils";

package/dist/runtime/components/elements/Dropdown.vue.d.ts

@@ -241,11 +241,11 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:open"?: (...args: any[]) => any;
 }, {
-    ui: {};
-    disabled: boolean;
+    mode: "click" | "hover";
     class: any;
+    disabled: boolean;
+    ui: {};
     popper: PopperOptions;
-    mode: "click" | "hover";
     open: boolean;
     items: DropdownItem[][];
     openDelay: number;

package/dist/runtime/components/elements/Icon.vue

@@ -0,0 +1,30 @@
+<template>
+  <Icon v-bind="$props" />
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    mode: {
+      type: String,
+      required: false,
+      default: null
+    },
+    size: {
+      type: [Number, String],
+      required: false,
+      default: null
+    },
+    customize: {
+      type: Function,
+      required: false,
+      default: null
+    }
+  }
+});
+</script>

package/dist/runtime/components/elements/Icon.vue.d.ts

@@ -0,0 +1,47 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    mode: {
+        type: PropType<"svg" | "css">;
+        required: false;
+        default: any;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: false;
+        default: any;
+    };
+    customize: {
+        type: FunctionConstructor;
+        required: false;
+        default: any;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    mode: {
+        type: PropType<"svg" | "css">;
+        required: false;
+        default: any;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: false;
+        default: any;
+    };
+    customize: {
+        type: FunctionConstructor;
+        required: false;
+        default: any;
+    };
+}>>, {
+    mode: "svg" | "css";
+    size: string | number;
+    customize: Function;
+}, {}>;
+export default _default;

package/dist/runtime/components/elements/Kbd.vue.d.ts

@@ -79,8 +79,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     size: KbdSize;
-    ui: {};
     class: any;
+    ui: {};
     value: string;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/Link.vue.d.ts

@@ -200,13 +200,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly required: false;
     };
 }>>, {
+    type: string;
+    replace: boolean;
     to: any;
     activeClass: string;
     exactActiveClass: string;
-    ariaCurrentValue: "true" | "location" | "page" | "step" | "date" | "time" | "false";
-    replace: boolean;
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
     as: string;
-    type: string;
     disabled: boolean;
     active: boolean;
     exact: boolean;

package/dist/runtime/components/elements/Meter.vue

@@ -30,7 +30,7 @@
 <script>
 import { computed, defineComponent, toRef } from "vue";
 import { twJoin } from "tailwind-merge";
-import { UIcon } from "#components";
+import UIcon from "../elements/Icon.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";

package/dist/runtime/components/elements/Meter.vue.d.ts

@@ -257,14 +257,14 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     size: "xs" | "sm" | "2xs" | "md" | "lg" | "xl" | "2xl";
+    class: any;
     ui: {};
     color: MeterColor;
     label: string;
     icon: string;
-    class: any;
-    max: number;
-    value: number;
     indicator: boolean;
+    value: number;
+    max: number;
     min: number;
 }, SlotsType<{
     indicator?: {

package/dist/runtime/components/elements/MeterGroup.d.ts

@@ -52,7 +52,7 @@ declare const meterGroupConfig: {
         icon: string;
     };
 };
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("@vue/runtime-core").DefineComponent<{
     min: {
         type: NumberConstructor;
         default: number;
@@ -84,9 +84,9 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => {};
     };
-}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+}, () => VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
     min: {
         type: NumberConstructor;
         default: number;
@@ -124,8 +124,8 @@ declare const _default: import("vue").DefineComponent<{
     icon: string;
     class: any;
     max: number;
-    indicator: boolean;
     min: number;
+    indicator: boolean;
 }, SlotsType<{
     default?: (typeof Meter)[];
     indicator?: {

package/dist/runtime/components/elements/MeterGroup.js

@@ -1,6 +1,6 @@
 import { h, cloneVNode, computed, toRef, defineComponent } from "vue";
 import { twJoin } from "tailwind-merge";
-import { UIcon } from "#components";
+import UIcon from "../elements/Icon.vue";
 import { useUI } from "../../composables/useUI.js";
 import { mergeConfig, getSlotsChildren } from "../../utils/index.js";
 import appConfig from "#build/app.config";

package/dist/runtime/components/elements/Progress.vue.d.ts

@@ -269,12 +269,12 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     size: "xs" | "sm" | "2xs" | "md" | "lg" | "xl" | "2xl";
+    class: any;
     ui: {};
     color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-    class: any;
-    max: number | any[];
-    value: number;
     indicator: boolean;
     animation: "carousel" | "carousel-inverse" | "swing" | "elastic";
+    value: number;
+    max: number | any[];
 }, {}>;
 export default _default;

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

@@ -25,7 +25,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
     };
     value: {
-        type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor)[];
         default: any;
     };
     modelValue: {
@@ -108,7 +108,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
     };
     value: {
-        type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor)[];
         default: any;
     };
     modelValue: {
@@ -162,15 +162,15 @@ declare const _default: import("vue").DefineComponent<{
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
-    ui: {};
+    name: string;
+    required: boolean;
+    class: any;
     disabled: boolean;
+    ui: {};
     color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
     label: string;
     id: string;
-    class: any;
-    name: string;
     modelValue: boolean | unknown[];
-    required: boolean;
     value: string | number | boolean | Record<string, any>;
     help: string;
     indeterminate: boolean;

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

@@ -25,7 +25,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     onSubmit: (payload: Event) => Promise<void>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "submit")[], "error" | "submit", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("submit" | "error")[], "submit" | "error", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     schema: {
         type: PropType<ZodSchema> | PropType<YupObjectSchema<any>> | PropType<JoiSchema> | PropType<ValibotSchema30 | ValibotSchemaAsync30> | PropType<ValibotSchema31 | ValibotSchemaAsync31> | PropType<ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any>> | PropType<ValibotSchema | ValibotSchemaAsync> | PropType<ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>>;
         default: any;