@nuxt/ui 2.12.3 → 2.14.0

package/dist/runtime/utils/colors.mjs

@@ -0,0 +1,261 @@
+import { omit } from "./lodash.mjs";
+import { kebabCase, camelCase, upperFirst } from "scule";
+const colorsToExclude = [
+  "inherit",
+  "transparent",
+  "current",
+  "white",
+  "black",
+  "slate",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone",
+  "cool"
+];
+const safelistByComponent = {
+  alert: (colorsAsRegex2) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`)
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`)
+  }],
+  avatar: (colorsAsRegex2) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+  }],
+  badge: (colorsAsRegex2) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`)
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`)
+  }],
+  button: (colorsAsRegex2) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`),
+    variants: ["hover", "disabled"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-100`),
+    variants: ["hover"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    variants: ["dark", "dark:disabled"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`),
+    variants: ["disabled", "dark:hover"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-600`),
+    variants: ["hover"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-900`),
+    variants: ["dark:hover"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-950`),
+    variants: ["dark", "dark:hover", "dark:disabled"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark", "dark:disabled"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`),
+    variants: ["dark:hover", "disabled"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-600`),
+    variants: ["hover"]
+  }, {
+    pattern: new RegExp(`outline-(${colorsAsRegex2})-400`),
+    variants: ["dark:focus-visible"]
+  }, {
+    pattern: new RegExp(`outline-(${colorsAsRegex2})-500`),
+    variants: ["focus-visible"]
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    variants: ["dark:focus-visible"]
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    variants: ["focus-visible"]
+  }],
+  input: (colorsAsRegex2) => [{
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    variants: ["dark", "dark:focus"]
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    variants: ["focus"]
+  }],
+  radio: (colorsAsRegex2) => [{
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    variants: ["dark:focus-visible"]
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    variants: ["focus-visible"]
+  }],
+  checkbox: (colorsAsRegex2) => [{
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    variants: ["dark:focus-visible"]
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    variants: ["focus-visible"]
+  }],
+  toggle: (colorsAsRegex2) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    variants: ["dark:focus-visible"]
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    variants: ["focus-visible"]
+  }],
+  range: (colorsAsRegex2) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
+    variants: ["dark:focus-visible"]
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
+    variants: ["focus-visible"]
+  }],
+  progress: (colorsAsRegex2) => [{
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }],
+  meter: (colorsAsRegex2) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }],
+  notification: (colorsAsRegex2) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    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 = {
+  "USelect": "UInput",
+  "USelectMenu": "UInput",
+  "UTextarea": "UInput",
+  "URadioGroup": "URadio",
+  "UMeterGroup": "UMeter"
+};
+const colorsAsRegex = (colors) => colors.join("|");
+export const excludeColors = (colors) => {
+  return Object.entries(omit(colors, colorsToExclude)).filter(([, value]) => typeof value === "object").map(([key]) => kebabCase(key));
+};
+export const generateSafelist = (colors, globalColors) => {
+  const baseSafelist = Object.keys(safelistByComponent).flatMap((component) => safelistByComponent[component](colorsAsRegex(colors)));
+  const formsSafelist = ["input", "radio", "checkbox", "toggle", "range"].flatMap((component) => safelistByComponent[component](colorsAsRegex(["red"])));
+  return [
+    ...baseSafelist,
+    ...formsSafelist,
+    // Ensure all global colors are safelisted for the Notification (toast.add)
+    ...safelistByComponent["notification"](colorsAsRegex(globalColors)),
+    // Gray safelist for Avatar & Notification
+    "bg-gray-500",
+    "dark:bg-gray-400",
+    "text-gray-500",
+    "dark:text-gray-400"
+  ];
+};
+export const customSafelistExtractor = (prefix, content, colors, safelistColors) => {
+  const classes = [];
+  const regex = /<([A-Za-z][A-Za-z0-9]*(?:-[A-Za-z][A-Za-z0-9]*)*)\s+(?![^>]*:color\b)[^>]*\bcolor=["']([^"']+)["'][^>]*>/gs;
+  const matches = content.matchAll(regex);
+  const components = Object.keys(safelistByComponent).map((component) => `${prefix}${component.charAt(0).toUpperCase() + component.slice(1)}`);
+  for (const match of matches) {
+    const [, component, color] = match;
+    const camelComponent = upperFirst(camelCase(component));
+    if (!colors.includes(color) || safelistColors.includes(color)) {
+      continue;
+    }
+    let name = safelistComponentAliasesMap[camelComponent] ? safelistComponentAliasesMap[camelComponent] : camelComponent;
+    if (!components.includes(name)) {
+      continue;
+    }
+    name = name.replace(prefix, "").toLowerCase();
+    const matchClasses = safelistByComponent[name](color).flatMap((group) => {
+      return ["", ...group.variants || []].flatMap((variant) => {
+        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));
+        }).flat();
+      });
+    });
+    classes.push(...matchClasses);
+  }
+  return classes;
+};

package/dist/runtime/utils/index.mjs

@@ -11,9 +11,18 @@ const defuTwMerge = createDefu((obj, key, value, namespace) => {
   if (namespace === "default" || namespace.startsWith("default.")) {
     return false;
   }
+  if (namespace === "popper" || namespace.startsWith("popper.")) {
+    return false;
+  }
   if (namespace.endsWith("avatar") && key === "size") {
     return false;
   }
+  if (namespace.endsWith("chip") && key === "size") {
+    return false;
+  }
+  if (namespace.endsWith("badge") && key === "size" || key === "color" || key === "variant") {
+    return false;
+  }
   if (typeof obj[key] === "string" && typeof value === "string" && obj[key] && value) {
     obj[key] = customTwMerge(obj[key], value);
     return true;

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

@@ -3,54 +3,67 @@ export declare const nuxtLinkProps: {
     readonly to: {
         readonly type: PropType<RouteLocationRaw>;
         readonly default: undefined;
+        readonly required: false;
     };
     readonly href: {
         readonly type: PropType<RouteLocationRaw>;
         readonly default: undefined;
+        readonly required: false;
     };
     readonly target: {
-        readonly type: PropType<(string & {}) | "_blank" | "_parent" | "_self" | "_top" | null>;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     readonly rel: {
-        readonly type: PropType<string | null>;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     readonly noRel: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     readonly prefetch: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     readonly noPrefetch: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     readonly activeClass: {
-        readonly type: StringConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     readonly exactActiveClass: {
-        readonly type: StringConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     readonly prefetchedClass: {
-        readonly type: StringConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     readonly replace: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     readonly ariaCurrentValue: {
-        readonly type: StringConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
     readonly external: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<NuxtLinkProps>;
         readonly default: undefined;
+        readonly required: false;
     };
 };
 export declare const getNuxtLinkProps: (props: any) => {};

package/dist/runtime/utils/link.mjs

@@ -1,60 +1,73 @@
 export const nuxtLinkProps = {
   to: {
     type: [String, Object],
-    default: void 0
+    default: void 0,
+    required: false
   },
   href: {
     type: [String, Object],
-    default: void 0
+    default: void 0,
+    required: false
   },
   // Attributes
   target: {
     type: String,
-    default: void 0
+    default: void 0,
+    required: false
   },
   rel: {
     type: String,
-    default: void 0
+    default: void 0,
+    required: false
   },
   noRel: {
     type: Boolean,
-    default: void 0
+    default: void 0,
+    required: false
   },
   // Prefetching
   prefetch: {
     type: Boolean,
-    default: void 0
+    default: void 0,
+    required: false
   },
   noPrefetch: {
     type: Boolean,
-    default: void 0
+    default: void 0,
+    required: false
   },
   // Styling
   activeClass: {
     type: String,
-    default: void 0
+    default: void 0,
+    required: false
   },
   exactActiveClass: {
     type: String,
-    default: void 0
+    default: void 0,
+    required: false
   },
   prefetchedClass: {
     type: String,
-    default: void 0
+    default: void 0,
+    required: false
   },
   // Vue Router's `<RouterLink>` additional props
   replace: {
     type: Boolean,
-    default: void 0
+    default: void 0,
+    required: false
   },
   ariaCurrentValue: {
     type: String,
-    default: void 0
+    default: void 0,
+    required: false
   },
   // Edge cases handling
   external: {
     type: Boolean,
-    default: void 0
+    default: void 0,
+    required: false
   }
 };
 const uLinkProps = {

package/dist/types.d.mts

@@ -13,4 +13,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export type { accordion, alert, avatar, avatarGroup, badge, breadcrumb, button, buttonGroup, card, checkbox, chip, commandPalette, container, contextMenu, divider, dropdown, formGroup, input, inputMenu, kbd, meter, meterGroup, modal, notification, notifications, pagination, popover, progress, radio, radioGroup, range, select, selectMenu, skeleton, slideover, table, tabs, textarea, toggle, tooltip, verticalNavigation } from './module.js'
+export type { accordion, alert, avatar, avatarGroup, badge, breadcrumb, button, buttonGroup, card, carousel, checkbox, chip, commandPalette, container, contextMenu, divider, dropdown, formGroup, horizontalNavigation, input, inputMenu, kbd, meter, meterGroup, modal, notification, notifications, pagination, popover, progress, radio, radioGroup, range, select, selectMenu, skeleton, slideover, table, tabs, textarea, toggle, tooltip, verticalNavigation } from './module.js'

package/dist/types.d.ts

@@ -13,4 +13,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export type { accordion, alert, avatar, avatarGroup, badge, breadcrumb, button, buttonGroup, card, checkbox, chip, commandPalette, container, contextMenu, divider, dropdown, formGroup, input, inputMenu, kbd, meter, meterGroup, modal, notification, notifications, pagination, popover, progress, radio, radioGroup, range, select, selectMenu, skeleton, slideover, table, tabs, textarea, toggle, tooltip, verticalNavigation } from './module'
+export type { accordion, alert, avatar, avatarGroup, badge, breadcrumb, button, buttonGroup, card, carousel, checkbox, chip, commandPalette, container, contextMenu, divider, dropdown, formGroup, horizontalNavigation, input, inputMenu, kbd, meter, meterGroup, modal, notification, notifications, pagination, popover, progress, radio, radioGroup, range, select, selectMenu, skeleton, slideover, table, tabs, textarea, toggle, tooltip, verticalNavigation } from './module'

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.12.3",
+  "version": "2.14.0",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
+  "type": "module",
   "license": "MIT",
   "exports": {
     ".": {
@@ -32,54 +33,55 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@egoist/tailwindcss-icons": "^1.7.2",
+    "@egoist/tailwindcss-icons": "^1.7.4",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@headlessui/vue": "1.7.16",
-    "@iconify-json/heroicons": "^1.1.19",
-    "@nuxt/kit": "^3.9.3",
+    "@headlessui/vue": "^1.7.19",
+    "@iconify-json/heroicons": "^1.1.20",
+    "@nuxt/kit": "^3.10.2",
     "@nuxtjs/color-mode": "^3.3.2",
-    "@nuxtjs/tailwindcss": "^6.10.4",
+    "@nuxtjs/tailwindcss": "^6.11.4",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
-    "@vueuse/core": "^10.7.2",
-    "@vueuse/integrations": "^10.7.2",
-    "@vueuse/math": "^10.7.2",
+    "@vueuse/core": "^10.8.0",
+    "@vueuse/integrations": "^10.8.0",
+    "@vueuse/math": "^10.8.0",
     "defu": "^6.1.4",
     "fuse.js": "^6.6.2",
     "nuxt-icon": "^0.6.8",
     "ohash": "^1.1.3",
     "pathe": "^1.1.2",
-    "scule": "^1.2.0",
-    "tailwind-merge": "^2.2.0",
+    "scule": "^1.3.0",
+    "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/test-utils": "^3.10.0",
+    "@nuxt/test-utils": "^3.11.0",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@vue/test-utils": "^2.4.3",
+    "@vue/test-utils": "^2.4.4",
     "eslint": "^8.56.0",
-    "happy-dom": "^12.10.3",
-    "joi": "^17.11.1",
-    "nuxt": "^3.9.3",
-    "release-it": "^17.0.1",
+    "happy-dom": "^13.3.8",
+    "joi": "^17.12.1",
+    "nuxt": "^3.10.2",
+    "release-it": "^17.1.1",
     "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
-    "valibot": "^0.25.0",
-    "vitest": "^1.2.1",
+    "valibot": "^0.29.0",
+    "vitest": "^1.3.1",
     "vitest-environment-nuxt": "^1.0.0",
     "vue-tsc": "^1.8.27",
     "yup": "^1.3.3",
     "zod": "^3.22.4"
   },
   "resolutions": {
-    "@nuxt/kit": "3.9.3",
-    "@nuxt/schema": "3.9.3",
+    "@nuxt/kit": "^3.10.2",
+    "@nuxt/schema": "3.10.2",
     "tailwindcss": "3.4.1",
-    "vue": "3.3.13"
+    "@headlessui/vue": "^1.7.19",
+    "vue": "3.4.19"
   }
 }

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

@@ -1 +0,0 @@
-export declare function uid(): string;

package/dist/runtime/utils/uid.mjs

@@ -1,5 +0,0 @@
-let _id = 0;
-export function uid() {
-  _id = (_id + 1) % Number.MAX_SAFE_INTEGER;
-  return `nuid-${_id}`;
-}