@nuxt/ui 2.10.0 → 2.11.0

package/dist/module.d.ts

@@ -1,6 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { CollectionNames, IconsPluginOptions } from '@egoist/tailwindcss-icons';
 
-declare const table: {
+declare const _default$E: {
     wrapper: string;
     base: string;
     divide: string;
@@ -59,7 +60,8 @@ declare const table: {
         };
     };
 };
-declare const avatar: {
+
+declare const _default$D: {
     wrapper: string;
     background: string;
     rounded: string;
@@ -118,12 +120,14 @@ declare const avatar: {
         chipPosition: string;
     };
 };
-declare const avatarGroup: {
+
+declare const _default$C: {
     wrapper: string;
     ring: string;
     margin: string;
 };
-declare const badge: {
+
+declare const _default$B: {
     base: string;
     rounded: string;
     font: string;
@@ -156,7 +160,8 @@ declare const badge: {
         color: string;
     };
 };
-declare const button: {
+
+declare const _default$A: {
     base: string;
     font: string;
     rounded: string;
@@ -232,7 +237,8 @@ declare const button: {
         loadingIcon: string;
     };
 };
-declare const buttonGroup: {
+
+declare const _default$z: {
     wrapper: {
         horizontal: string;
         vertical: string;
@@ -240,7 +246,43 @@ declare const buttonGroup: {
     rounded: string;
     shadow: string;
 };
-declare const dropdown: {
+
+declare const _default$y: {
+    wrapper: string;
+    base: string;
+    background: string;
+    position: {
+        'top-right': string;
+        'bottom-right': string;
+        'top-left': string;
+        'bottom-left': string;
+    };
+    translate: {
+        'top-right': string;
+        'bottom-right': string;
+        'top-left': string;
+        'bottom-left': string;
+    };
+    size: {
+        '3xs': string;
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    default: {
+        size: string;
+        color: string;
+        position: string;
+        inset: boolean;
+    };
+};
+
+declare const _default$x: {
     wrapper: string;
     container: string;
     width: string;
@@ -292,7 +334,8 @@ declare const dropdown: {
         placement: string;
     };
 };
-declare const accordion: {
+
+declare const _default$w: {
     wrapper: string;
     item: {
         base: string;
@@ -312,13 +355,16 @@ declare const accordion: {
         variant: string;
     };
 };
-declare const alert: {
+
+declare const _default$v: {
     wrapper: string;
     title: string;
     description: string;
+    actions: string;
     shadow: string;
     rounded: string;
     padding: string;
+    gap: string;
     icon: {
         base: string;
     };
@@ -349,7 +395,8 @@ declare const alert: {
         };
     };
 };
-declare const kbd: {
+
+declare const _default$u: {
     base: string;
     padding: string;
     size: {
@@ -365,7 +412,8 @@ declare const kbd: {
         size: string;
     };
 };
-declare const progress: {
+
+declare const _default$t: {
     wrapper: string;
     indicator: {
         container: {
@@ -439,7 +487,8 @@ declare const progress: {
         animation: string;
     };
 };
-declare const meter: {
+
+declare const _default$s: {
     wrapper: string;
     indicator: {
         container: string;
@@ -515,7 +564,8 @@ declare const meter: {
         color: string;
     };
 };
-declare const meterGroup: {
+
+declare const _default$r: {
     wrapper: string;
     base: string;
     background: string;
@@ -526,7 +576,8 @@ declare const meterGroup: {
         size: string;
     };
 };
-declare const input: {
+
+declare const _default$q: {
     wrapper: string;
     base: string;
     rounded: string;
@@ -630,7 +681,8 @@ declare const input: {
         loadingIcon: string;
     };
 };
-declare const formGroup: {
+
+declare const _default$p: {
     wrapper: string;
     label: {
         wrapper: string;
@@ -654,7 +706,8 @@ declare const formGroup: {
         size: string;
     };
 };
-declare const textarea: {
+
+declare const _default$o: {
     default: {
         size: string;
         color: string;
@@ -757,7 +810,8 @@ declare const textarea: {
         };
     };
 };
-declare const select: {
+
+declare const _default$n: {
     placeholder: string;
     default: {
         size: string;
@@ -862,7 +916,8 @@ declare const select: {
         };
     };
 };
-declare const selectMenu: {
+
+declare const _default$m: {
     container: string;
     width: string;
     height: string;
@@ -913,6 +968,7 @@ declare const selectMenu: {
     };
     default: {
         selectedIcon: string;
+        clearOnClose: boolean;
     };
     arrow: {
         ring: string;
@@ -923,14 +979,16 @@ declare const selectMenu: {
         placement: string;
     };
 };
-declare const radioGroup: {
+
+declare const _default$l: {
     wrapper: string;
     legend: string;
     default: {
         color: string;
     };
 };
-declare const radio: {
+
+declare const _default$k: {
     wrapper: string;
     base: string;
     color: string;
@@ -944,7 +1002,8 @@ declare const radio: {
         color: string;
     };
 };
-declare const checkbox: {
+
+declare const _default$j: {
     wrapper: string;
     base: string;
     rounded: string;
@@ -959,21 +1018,57 @@ declare const checkbox: {
         color: string;
     };
 };
-declare const toggle: {
+
+declare const _default$i: {
     base: string;
     rounded: string;
     ring: string;
     active: string;
     inactive: string;
+    size: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
     container: {
         base: string;
-        active: string;
+        active: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
         inactive: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
     };
     icon: {
         base: string;
         active: string;
         inactive: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
         on: string;
         off: string;
     };
@@ -981,9 +1076,11 @@ declare const toggle: {
         onIcon: any;
         offIcon: any;
         color: string;
+        size: string;
     };
 };
-declare const range: {
+
+declare const _default$h: {
     wrapper: string;
     base: string;
     rounded: string;
@@ -1046,7 +1143,8 @@ declare const range: {
         color: string;
     };
 };
-declare const card: {
+
+declare const _default$g: {
     base: string;
     background: string;
     divide: string;
@@ -1069,17 +1167,20 @@ declare const card: {
         padding: string;
     };
 };
-declare const container: {
+
+declare const _default$f: {
     base: string;
     padding: string;
     constrained: string;
 };
-declare const skeleton: {
+
+declare const _default$e: {
     base: string;
     background: string;
     rounded: string;
 };
-declare const divider: {
+
+declare const _default$d: {
     wrapper: {
         base: string;
         horizontal: string;
@@ -1108,7 +1209,8 @@ declare const divider: {
     };
     label: string;
 };
-declare const verticalNavigation: {
+
+declare const _default$c: {
     wrapper: string;
     base: string;
     ring: string;
@@ -1135,7 +1237,8 @@ declare const verticalNavigation: {
         inactive: string;
     };
 };
-declare const commandPalette: {
+
+declare const _default$b: {
     wrapper: string;
     container: string;
     input: {
@@ -1202,7 +1305,8 @@ declare const commandPalette: {
         selectedIcon: string;
     };
 };
-declare const pagination: {
+
+declare const _default$a: {
     wrapper: string;
     base: string;
     rounded: string;
@@ -1236,7 +1340,8 @@ declare const pagination: {
         };
     };
 };
-declare const tabs: {
+
+declare const _default$9: {
     wrapper: string;
     container: string;
     base: string;
@@ -1269,7 +1374,28 @@ declare const tabs: {
         };
     };
 };
-declare const modal: {
+
+declare const _default$8: {
+    wrapper: string;
+    ol: string;
+    li: string;
+    base: string;
+    icon: {
+        base: string;
+        active: string;
+        inactive: string;
+    };
+    divider: {
+        base: string;
+    };
+    active: string;
+    inactive: string;
+    default: {
+        divider: string;
+    };
+};
+
+declare const _default$7: {
     wrapper: string;
     inner: string;
     container: string;
@@ -1303,7 +1429,8 @@ declare const modal: {
         leaveTo: string;
     };
 };
-declare const slideover: {
+
+declare const _default$6: {
     wrapper: string;
     overlay: {
         base: string;
@@ -1329,7 +1456,8 @@ declare const slideover: {
         leave: string;
     };
 };
-declare const tooltip: {
+
+declare const _default$5: {
     wrapper: string;
     container: string;
     width: string;
@@ -1360,7 +1488,8 @@ declare const tooltip: {
         placement: string;
     };
 };
-declare const popover: {
+
+declare const _default$4: {
     wrapper: string;
     container: string;
     width: string;
@@ -1377,6 +1506,18 @@ declare const popover: {
         leaveFromClass: string;
         leaveToClass: string;
     };
+    overlay: {
+        base: string;
+        background: string;
+        transition: {
+            enterActiveClass: string;
+            enterFromClass: string;
+            enterToClass: string;
+            leaveActiveClass: string;
+            leaveFromClass: string;
+            leaveToClass: string;
+        };
+    };
     popper: {
         strategy: string;
     };
@@ -1389,7 +1530,8 @@ declare const popover: {
         placement: string;
     };
 };
-declare const contextMenu: {
+
+declare const _default$3: {
     wrapper: string;
     container: string;
     width: string;
@@ -1419,15 +1561,18 @@ declare const contextMenu: {
         placement: string;
     };
 };
-declare const notification: {
+
+declare const _default$2: {
     wrapper: string;
     container: string;
     title: string;
     description: string;
+    actions: string;
     background: string;
     shadow: string;
     rounded: string;
     padding: string;
+    gap: string;
     ring: string;
     icon: {
         base: string;
@@ -1452,6 +1597,7 @@ declare const notification: {
     default: {
         color: string;
         icon: any;
+        timeout: number;
         closeButton: {
             icon: string;
             color: string;
@@ -1464,60 +1610,23 @@ declare const notification: {
         };
     };
 };
-declare const notifications: {
+
+declare const _default$1: {
     wrapper: string;
     position: string;
     width: string;
     container: string;
 };
 
-declare const config_accordion: typeof accordion;
-declare const config_alert: typeof alert;
-declare const config_avatar: typeof avatar;
-declare const config_avatarGroup: typeof avatarGroup;
-declare const config_badge: typeof badge;
-declare const config_button: typeof button;
-declare const config_buttonGroup: typeof buttonGroup;
-declare const config_card: typeof card;
-declare const config_checkbox: typeof checkbox;
-declare const config_commandPalette: typeof commandPalette;
-declare const config_container: typeof container;
-declare const config_contextMenu: typeof contextMenu;
-declare const config_divider: typeof divider;
-declare const config_dropdown: typeof dropdown;
-declare const config_formGroup: typeof formGroup;
-declare const config_input: typeof input;
-declare const config_kbd: typeof kbd;
-declare const config_meter: typeof meter;
-declare const config_meterGroup: typeof meterGroup;
-declare const config_modal: typeof modal;
-declare const config_notification: typeof notification;
-declare const config_notifications: typeof notifications;
-declare const config_pagination: typeof pagination;
-declare const config_popover: typeof popover;
-declare const config_progress: typeof progress;
-declare const config_radio: typeof radio;
-declare const config_radioGroup: typeof radioGroup;
-declare const config_range: typeof range;
-declare const config_select: typeof select;
-declare const config_selectMenu: typeof selectMenu;
-declare const config_skeleton: typeof skeleton;
-declare const config_slideover: typeof slideover;
-declare const config_table: typeof table;
-declare const config_tabs: typeof tabs;
-declare const config_textarea: typeof textarea;
-declare const config_toggle: typeof toggle;
-declare const config_tooltip: typeof tooltip;
-declare const config_verticalNavigation: typeof verticalNavigation;
 declare namespace config {
-  export { config_accordion as accordion, config_alert as alert, config_avatar as avatar, config_avatarGroup as avatarGroup, config_badge as badge, config_button as button, config_buttonGroup as buttonGroup, config_card as card, config_checkbox as checkbox, config_commandPalette as commandPalette, config_container as container, config_contextMenu as contextMenu, config_divider as divider, config_dropdown as dropdown, config_formGroup as formGroup, config_input as input, config_kbd as kbd, config_meter as meter, config_meterGroup as meterGroup, config_modal as modal, config_notification as notification, config_notifications as notifications, config_pagination as pagination, config_popover as popover, config_progress as progress, config_radio as radio, config_radioGroup as radioGroup, config_range as range, config_select as select, config_selectMenu as selectMenu, config_skeleton as skeleton, config_slideover as slideover, config_table as table, config_tabs as tabs, config_textarea as textarea, config_toggle as toggle, config_tooltip as tooltip, config_verticalNavigation as verticalNavigation };
+  export { _default$w as accordion, _default$v as alert, _default$D as avatar, _default$C as avatarGroup, _default$B as badge, _default$8 as breadcrumb, _default$A as button, _default$z as buttonGroup, _default$g as card, _default$j as checkbox, _default$y as chip, _default$b as commandPalette, _default$f as container, _default$3 as contextMenu, _default$d as divider, _default$x as dropdown, _default$p as formGroup, _default$q as input, _default$u as kbd, _default$s as meter, _default$r as meterGroup, _default$7 as modal, _default$2 as notification, _default$1 as notifications, _default$a as pagination, _default$4 as popover, _default$t as progress, _default$k as radio, _default$l as radioGroup, _default$h as range, _default$n as select, _default$m as selectMenu, _default$e as skeleton, _default$6 as slideover, _default$E as table, _default$9 as tabs, _default$o as textarea, _default$i as toggle, _default$5 as tooltip, _default$c as verticalNavigation };
 }
 
-type Strategy = 'merge' | 'override';
+type Strategy = 'merge' | 'override'
 
 type DeepPartial<T> = Partial<{
-  [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string | object };
-}>;
+  [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string | object }
+}>
 
 type UI = {
     primary?: string;
@@ -1545,7 +1654,7 @@ interface ModuleOptions {
      * @default false
      */
     global?: boolean;
-    icons: string[] | string;
+    icons: CollectionNames[] | 'all' | IconsPluginOptions;
     safelistColors?: string[];
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "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.0";
 
 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 });
   });
@@ -369,9 +374,10 @@ const module = defineNuxtModule({
       tailwindConfig.safelist = tailwindConfig.safelist || [];
       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 +393,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 +404,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/elements/Alert.vue

@@ -1,6 +1,6 @@
 <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" />
 
@@ -16,14 +16,14 @@
           </slot>
         </p>
 
-        <div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2">
+        <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">
+      <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" />
-        </div>
+        </template>
 
         <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="$emit('close')" />
       </div>
@@ -117,7 +117,8 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
-      alertClass
+      alertClass,
+      twMerge
     };
   }
 });