@nuxt/ui 2.18.2 → 2.18.4

package/dist/runtime/types/tooltip.d.ts

@@ -1,7 +1,7 @@
 export interface Tooltip {
-    text?: string;
-    prevent?: boolean;
-    shortcuts?: string[];
-    openDelay?: number;
-    closeDelay?: number;
+  text?: string
+  prevent?: boolean
+  shortcuts?: string[]
+  openDelay?: number
+  closeDelay?: number
 }

package/dist/runtime/types/utils.d.ts

@@ -1,16 +1,36 @@
-export type Strategy = 'merge' | 'override';
+export type Strategy = 'merge' | 'override'
+
 export interface TightMap<O = any> {
-    [key: string]: TightMap | O;
+  [key: string]: TightMap | O
 }
+
 export type DeepPartial<T, O = any> = {
-    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P], O> : T[P];
+  [P in keyof T]?: T[P] extends object
+    ? DeepPartial<T[P], O>
+    : T[P];
 } & {
-    [key: string]: O | TightMap<O>;
-};
+  [key: string]: O | TightMap<O>
+}
+
 export type NestedKeyOf<ObjectType extends Record<string, any>> = {
-    [Key in keyof ObjectType]: ObjectType[Key] extends Record<string, any> ? NestedKeyOf<ObjectType[Key]> : Key;
-}[keyof ObjectType];
-type DeepKey<T, Keys extends string[]> = Keys extends [infer First, ...infer Rest] ? First extends keyof T ? Rest extends string[] ? DeepKey<T[First], Rest> : never : never : T;
-export type ExtractDeepKey<T, Path extends string[]> = DeepKey<T, Path> extends infer Result ? Result extends Record<string, any> ? keyof Result : never : never;
-export type ExtractDeepObject<T, Path extends string[]> = DeepKey<T, Path> extends infer Result ? Result extends Record<string, any> ? Result : never : never;
-export {};
+  [Key in keyof ObjectType]: ObjectType[Key] extends Record<string, any>
+  ? NestedKeyOf<ObjectType[Key]>
+  : Key
+}[keyof ObjectType]
+
+type DeepKey<T, Keys extends string[]> =
+  Keys extends [infer First, ...infer Rest]
+    ? First extends keyof T
+      ? Rest extends string[]
+        ? DeepKey<T[First], Rest>
+        : never
+      : never
+    : T
+
+export type ExtractDeepKey<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
+  ? Result extends Record<string, any> ? keyof Result : never
+  : never
+
+export type ExtractDeepObject<T, Path extends string[]> = DeepKey<T, Path> extends infer Result
+  ? Result extends Record<string, any> ? Result : never
+  : never

package/dist/runtime/types/vertical-navigation.d.ts

@@ -1,12 +1,13 @@
-import type { Link } from './link.js';
-import type { Avatar } from './avatar.js';
-import type { Badge } from './badge.js';
+import type { Link } from './link'
+import type { Avatar } from './avatar'
+import type { Badge } from './badge'
+
 export interface VerticalNavigationLink extends Link {
-    label: string;
-    labelClass?: string;
-    icon?: string;
-    iconClass?: string;
-    avatar?: Avatar;
-    click?: (...args: any[]) => void;
-    badge?: string | number | Badge;
+  label: string
+  labelClass?: string
+  icon?: string
+  iconClass?: string
+  avatar?: Avatar
+  click?: (...args: any[]) => void
+  badge?: string | number | Badge
 }

package/dist/runtime/utils/colors.js

@@ -16,193 +16,193 @@ const colorsToExclude = [
 ];
 const safelistByComponent = {
   alert: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-50$`)
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`)
   }],
   avatar: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }],
   badge: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-50$`)
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`)
   }],
   button: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-50$`),
     variants: ["hover", "disabled"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-100`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-100$`),
     variants: ["hover"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark", "dark:disabled"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`),
     variants: ["disabled", "dark:hover"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-600`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-600$`),
     variants: ["hover"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-900`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-900$`),
     variants: ["dark:hover"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-950`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-950$`),
     variants: ["dark", "dark:hover", "dark:disabled"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark", "dark:disabled"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`),
     variants: ["dark:hover", "disabled"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-600`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-600$`),
     variants: ["hover"]
   }, {
-    pattern: new RegExp(`outline-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^outline-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`outline-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^outline-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   input: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark", "dark:focus"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus"]
   }],
   radio: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   checkbox: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   toggle: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   range: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-400$`),
     variants: ["dark:focus-visible"]
   }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    pattern: RegExp(`^ring-(${colorsAsRegex2})-500$`),
     variants: ["focus-visible"]
   }],
   progress: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }],
   meter: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }],
   notification: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^text-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^text-(${colorsAsRegex2})-500$`)
   }],
   chip: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-400$`),
     variants: ["dark"]
   }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+    pattern: RegExp(`^bg-(${colorsAsRegex2})-500$`)
   }]
 };
 const safelistComponentAliasesMap = {
@@ -289,7 +289,15 @@ export const customSafelistExtractor = (prefix, content, colors, safelistColors)
         const matches2 = group.pattern.source.match(/\(([^)]+)\)/g);
         return matches2.map((match2) => {
           const colorOptions = match2.substring(1, match2.length - 1).split("|");
-          return colorOptions.map((color2) => `${variant ? variant + ":" : ""}` + group.pattern.source.replace(match2, color2));
+          return colorOptions.map(
+            (color2) => {
+              const classesExtracted = group.pattern.source.replace(match2, color2).replace("^", "").replace("$", "");
+              if (variant) {
+                return `${variant}:${classesExtracted}`;
+              }
+              return classesExtracted;
+            }
+          );
         }).flat();
       });
     });

package/dist/runtime/utils/index.d.ts

@@ -1,4 +1,4 @@
-import type { Strategy } from '../types.js';
+import type { Strategy } from '../types/index.js';
 export declare function mergeConfig<T>(strategy: Strategy, ...configs: any[]): T;
 export declare function hexToRgb(hex: string): string;
 export declare function getSlotsChildren(slots: any): any;

package/dist/runtime/utils/link.d.ts

@@ -18,7 +18,7 @@ export declare const nuxtLinkProps: {
         readonly required: false;
     };
     readonly rel: {
-        readonly type: PropType<NuxtLinkProps["rel"]>;
+        readonly type: PropType<any>;
         readonly default: any;
         readonly required: false;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.18.2",
-  "packageManager": "pnpm@9.5.0",
+  "version": "2.18.4",
+  "packageManager": "pnpm@9.6.0",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "type": "module",
@@ -36,8 +36,8 @@
   "dependencies": {
     "@headlessui/tailwindcss": "^0.2.1",
     "@headlessui/vue": "^1.7.22",
-    "@iconify-json/heroicons": "^1.1.22",
-    "@nuxt/icon": "^1.3.1",
+    "@iconify-json/heroicons": "^1.1.23",
+    "@nuxt/icon": "^1.4.0",
     "@nuxt/kit": "^3.12.4",
     "@nuxtjs/color-mode": "^3.4.2",
     "@nuxtjs/tailwindcss": "^6.12.1",
@@ -58,9 +58,9 @@
     "tailwindcss": "^3.4.7"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.3.13",
+    "@nuxt/eslint-config": "^0.4.0",
     "@nuxt/module-builder": "^0.8.1",
-    "@nuxt/test-utils": "^3.13.1",
+    "@nuxt/test-utils": "^3.14.0",
     "@release-it/conventional-changelog": "^8.0.1",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^8.57.0",