@nuxt/ui 2.10.0 → 2.11.1

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.10.0",
+  "version": "2.11.1",
   "configKey": "ui",
   "compatibility": {
     "nuxt": "^3.0.0-rc.8"

package/dist/module.mjs

@@ -3,7 +3,6 @@ import defaultColors from 'tailwindcss/colors.js';
 import { defaultExtractor as defaultExtractor$1 } from 'tailwindcss/lib/lib/defaultExtractor.js';
 import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons';
 import { kebabCase, upperFirst, camelCase } from 'scule';
-import { dirname } from 'pathe';
 
 
 
@@ -15,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.10.0";
+const version = "2.11.1";
 
 function omit(object, keysToOmit) {
   const result = { ...object };
@@ -221,6 +220,12 @@ const safelistByComponent = {
     variants: ["dark"]
   }, {
     pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }],
+  chip: (colorsAsRegex2) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
   }]
 };
 const safelistComponentAliasesMap = {
@@ -290,7 +295,7 @@ function createTemplates(nuxt = useNuxt()) {
     getContents: () => `declare module '#ui-colors' { const defaultExport: ${JSON.stringify(nuxt.options.appConfig.ui.colors)}; export default defaultExport; }`,
     write: true
   });
-  nuxt.options.alias["#ui-colors"] = dirname(template.dst);
+  nuxt.options.alias["#ui-colors"] = template.dst;
   nuxt.hook("prepare:types", (opts) => {
     opts.references.push({ path: typesTemplate.dst });
   });
@@ -324,11 +329,13 @@ const module = defineNuxtModule({
     nuxt.options.alias["#ui"] = runtimeDir;
     nuxt.options.css.push(resolve(runtimeDir, "ui.css"));
     nuxt.hook("tailwindcss:config", function(tailwindConfig) {
+      tailwindConfig.theme = tailwindConfig.theme || {};
+      tailwindConfig.theme.extend = tailwindConfig.theme.extend || {};
+      tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {};
       const globalColors = {
         ...tailwindConfig.theme.colors || defaultColors,
         ...tailwindConfig.theme.extend?.colors
       };
-      tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {};
       globalColors.primary = tailwindConfig.theme.extend.colors.primary = {
         50: "rgb(var(--color-primary-50) / <alpha-value>)",
         100: "rgb(var(--color-primary-100) / <alpha-value>)",
@@ -367,11 +374,12 @@ const module = defineNuxtModule({
         strategy: "merge"
       };
       tailwindConfig.safelist = tailwindConfig.safelist || [];
-      tailwindConfig.safelist.push(...generateSafelist(options.safelistColors, colors));
+      tailwindConfig.safelist.push(...generateSafelist(options.safelistColors || [], colors));
       tailwindConfig.plugins = tailwindConfig.plugins || [];
-      tailwindConfig.plugins.push(iconsPlugin({ collections: getIconCollections(options.icons) }));
+      tailwindConfig.plugins.push(iconsPlugin(Array.isArray(options.icons) || options.icons === "all" ? { collections: getIconCollections(options.icons) } : typeof options.icons === "object" ? options.icons : {}));
     });
     createTemplates(nuxt);
+    await installModule("nuxt-icon");
     await installModule("@nuxtjs/color-mode", { classSuffix: "" });
     await installModule("@nuxtjs/tailwindcss", {
       exposeConfig: true,
@@ -387,7 +395,7 @@ const module = defineNuxtModule({
         content: {
           files: [
             resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"),
-            resolve(runtimeDir, "*.{mjs,js,ts}")
+            resolve(runtimeDir, "ui.config/**/*.{mjs,js,ts}")
           ],
           transform: {
             vue: (content) => {
@@ -398,6 +406,7 @@ const module = defineNuxtModule({
             vue: (content) => {
               return [
                 ...defaultExtractor(content),
+                // @ts-ignore
                 ...customSafelistExtractor(options.prefix, content, nuxt.options.appConfig.ui.colors, options.safelistColors)
               ];
             }

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

@@ -11,7 +11,7 @@
             <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
               <UButton
                 v-if="column.sortable"
-                v-bind="{ ...ui.default.sortButton, ...sortButton }"
+                v-bind="{ ...(ui.default.sortButton || {}), ...sortButton }"
                 :icon="(!sort.column || sort.column !== column.key) ? (sortButton.icon || ui.default.sortButton.icon) : sort.direction === 'asc' ? sortAscIcon : sortDescIcon"
                 :label="column[columnAttribute]"
                 @click="onSort(column)"
@@ -139,11 +139,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue", "update:sort"],

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

@@ -70,11 +70,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -177,11 +177,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -191,7 +191,7 @@ declare const _default: import("vue").DefineComponent<{
         column: string;
         direction: 'asc' | 'desc';
     };
-    ui: Partial<any>;
+    ui: any;
     class: any;
     modelValue: unknown[];
     by: string | Function;

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

@@ -87,11 +87,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

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

@@ -24,11 +24,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -69,14 +69,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
+    ui: any;
     class: any;
     defaultOpen: boolean;
     items: AccordionItem[];

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

@@ -1,10 +1,10 @@
 <template>
   <div :class="alertClass" v-bind="attrs">
-    <div class="flex gap-3" :class="{ 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }">
+    <div class="flex" :class="[ui.gap, { 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }]">
       <UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
       <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
-      <div class="w-0 flex-1">
+      <div :class="ui.inner">
         <p :class="ui.title">
           <slot name="title" :title="title">
             {{ title }}
@@ -16,16 +16,16 @@
           </slot>
         </p>
 
-        <div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
+        <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="action.click" />
         </div>
       </div>
-      <div class="flex-shrink-0 flex items-center gap-3">
-        <div v-if="!description && !$slots.description && actions.length" class="flex items-center gap-2">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
-        </div>
+      <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
+        <template v-if="!description && !$slots.description && actions.length">
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="action.click" />
+        </template>
 
-        <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="$emit('close')" />
+        <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" />
       </div>
     </div>
   </div>
@@ -93,11 +93,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["close"],
@@ -117,7 +117,8 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
-      alertClass
+      alertClass,
+      twMerge
     };
   }
 });

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Avatar, Button } from '../../types';
+import type { Avatar, Button, AlertVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     title: {
         type: StringConstructor;
@@ -33,17 +33,17 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<AlertVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -51,6 +51,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     alertClass: import("vue").ComputedRef<string>;
+    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: {
         type: StringConstructor;
@@ -84,21 +85,22 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<AlertVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
+    ui: any;
     description: string;
     icon: string;
     avatar: Avatar;
@@ -107,8 +109,7 @@ declare const _default: import("vue").DefineComponent<{
         click?: Function | undefined;
     })[];
     color: any;
-    ui: Partial<any>;
     class: any;
-    variant: any;
+    variant: AlertVariant;
 }, {}>;
 export default _default;

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

@@ -81,11 +81,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

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

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import type { AvatarSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     src: {
         type: (BooleanConstructor | StringConstructor)[];
@@ -17,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
     };
     size: {
-        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        type: PropType<AvatarSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -41,11 +42,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: import("vue").ComputedRef<any>;
@@ -78,7 +79,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
     };
     size: {
-        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        type: PropType<AvatarSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -102,20 +103,20 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
     alt: string;
+    size: AvatarSize;
+    ui: any;
     icon: string;
-    ui: Partial<any>;
     class: any;
     src: string | boolean;
     text: string;
-    size: "sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl";
     chipColor: any;
     chipPosition: "top-right" | "bottom-right" | "top-left" | "bottom-left";
     chipText: string | number;

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

@@ -1,7 +1,8 @@
 import type { PropType } from 'vue';
+import type { AvatarSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<AvatarSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -11,17 +12,17 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<AvatarSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -31,16 +32,16 @@ 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: Partial<any>;
+    size: AvatarSize;
+    ui: any;
     class: any;
-    size: string | number | symbol;
     max: number;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/AvatarGroup.mjs

@@ -23,11 +23,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props, { slots }) {

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

@@ -9,6 +9,7 @@ import { computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
+import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { badge } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.badge, badge);
@@ -45,22 +46,23 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {
     const { ui, attrs } = useUI("badge", toRef(props, "ui"), config);
+    const { size, rounded } = useInjectButtonGroup({ ui, props });
     const badgeClass = computed(() => {
       const variant = ui.value.color?.[props.color]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
         ui.value.base,
         ui.value.font,
-        ui.value.rounded,
-        ui.value.size[props.size],
+        rounded.value,
+        ui.value.size[size.value],
         variant?.replaceAll("{color}", props.color)
       ), props.class);
     });

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

@@ -1,8 +1,8 @@
 import type { PropType } from 'vue';
-import type { BadgeVariant } from '../../types';
+import type { BadgeSize, BadgeVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     size: {
-        type: PropType<"sm" | "md" | "xs" | "lg">;
+        type: PropType<BadgeSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -22,11 +22,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: () => {};
     };
 }, {
     attrs: import("vue").ComputedRef<Pick<{
@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{
     badgeClass: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: PropType<"sm" | "md" | "xs" | "lg">;
+        type: PropType<BadgeSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -55,18 +55,18 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
+    size: BadgeSize;
+    ui: any;
     color: any;
-    ui: Partial<any>;
     class: any;
     label: string | number;
     variant: BadgeVariant;
-    size: "sm" | "md" | "xs" | "lg";
 }, {}>;
 export default _default;

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

@@ -5,7 +5,7 @@
     </slot>
 
     <slot>
-      <span v-if="label" :class="[truncate ? 'text-left break-all line-clamp-1' : '']">
+      <span v-if="label" :class="[truncate ? ui.truncate : '']">
         {{ label }}
       </span>
     </slot>
@@ -23,6 +23,7 @@ import UIcon from "../elements/Icon.vue";
 import ULink from "../elements/Link.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
+import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { button } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
@@ -115,15 +116,16 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props, { slots }) {
     const { ui, attrs } = useUI("button", toRef(props, "ui"), config);
+    const { size, rounded } = useInjectButtonGroup({ ui, props });
     const isLeading = computed(() => {
       return props.icon && props.leading || props.icon && !props.trailing || props.loading && !props.trailing || props.leadingIcon;
     });
@@ -136,12 +138,12 @@ export default defineComponent({
       return twMerge(twJoin(
         ui.value.base,
         ui.value.font,
-        ui.value.rounded,
-        ui.value.size[props.size],
-        ui.value.gap[props.size],
-        props.padded && ui.value[isSquare.value ? "square" : "padding"][props.size],
+        rounded.value,
+        ui.value.size[size.value],
+        ui.value.gap[size.value],
+        props.padded && ui.value[isSquare.value ? "square" : "padding"][size.value],
         variant?.replaceAll("{color}", props.color),
-        props.block ? "w-full flex justify-center items-center" : "inline-flex items-center"
+        props.block ? ui.value.block : ui.value.inline
       ), props.class);
     });
     const leadingIconName = computed(() => {
@@ -159,18 +161,20 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        ui.value.icon.size[props.size],
-        props.loading && "animate-spin"
+        ui.value.icon.size[size.value],
+        props.loading && ui.value.icon.loading
       );
     });
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        ui.value.icon.size[props.size],
-        props.loading && !isLeading.value && "animate-spin"
+        ui.value.icon.size[size.value],
+        props.loading && !isLeading.value && ui.value.icon.loading
       );
     });
     return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
       attrs,
       isLeading,
       isTrailing,