@nuxt/ui 2.15.2 → 2.16.0

package/dist/runtime/utils/colors.mjs

@@ -0,0 +1,299 @@
+import { omit } from "./lodash.mjs";
+import { kebabCase, camelCase, upperFirst } from "scule";
+import defaultColors from "tailwindcss/colors.js";
+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 setGlobalColors = (theme) => {
+  const globalColors = {
+    ...theme.colors || defaultColors,
+    ...theme.extend?.colors
+  };
+  globalColors.primary = theme.extend.colors.primary = {
+    50: "rgb(var(--color-primary-50) / <alpha-value>)",
+    100: "rgb(var(--color-primary-100) / <alpha-value>)",
+    200: "rgb(var(--color-primary-200) / <alpha-value>)",
+    300: "rgb(var(--color-primary-300) / <alpha-value>)",
+    400: "rgb(var(--color-primary-400) / <alpha-value>)",
+    500: "rgb(var(--color-primary-500) / <alpha-value>)",
+    600: "rgb(var(--color-primary-600) / <alpha-value>)",
+    700: "rgb(var(--color-primary-700) / <alpha-value>)",
+    800: "rgb(var(--color-primary-800) / <alpha-value>)",
+    900: "rgb(var(--color-primary-900) / <alpha-value>)",
+    950: "rgb(var(--color-primary-950) / <alpha-value>)",
+    DEFAULT: "rgb(var(--color-primary-DEFAULT) / <alpha-value>)"
+  };
+  if (globalColors.gray) {
+    globalColors.cool = theme.extend.colors.cool = defaultColors.gray;
+  }
+  globalColors.gray = theme.extend.colors.gray = {
+    50: "rgb(var(--color-gray-50) / <alpha-value>)",
+    100: "rgb(var(--color-gray-100) / <alpha-value>)",
+    200: "rgb(var(--color-gray-200) / <alpha-value>)",
+    300: "rgb(var(--color-gray-300) / <alpha-value>)",
+    400: "rgb(var(--color-gray-400) / <alpha-value>)",
+    500: "rgb(var(--color-gray-500) / <alpha-value>)",
+    600: "rgb(var(--color-gray-600) / <alpha-value>)",
+    700: "rgb(var(--color-gray-700) / <alpha-value>)",
+    800: "rgb(var(--color-gray-800) / <alpha-value>)",
+    900: "rgb(var(--color-gray-900) / <alpha-value>)",
+    950: "rgb(var(--color-gray-950) / <alpha-value>)"
+  };
+  return excludeColors(globalColors);
+};
+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 typeof group === "string" ? "" : ["", ...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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.15.2",
+  "version": "2.16.0",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "type": "module",
@@ -33,18 +33,18 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@egoist/tailwindcss-icons": "^1.7.4",
+    "@egoist/tailwindcss-icons": "^1.8.0",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@headlessui/vue": "^1.7.19",
-    "@iconify-json/heroicons": "^1.1.20",
+    "@headlessui/vue": "^1.7.21",
+    "@iconify-json/heroicons": "^1.1.21",
     "@nuxt/kit": "^3.11.2",
-    "@nuxtjs/color-mode": "^3.4.0",
-    "@nuxtjs/tailwindcss": "^6.11.4",
+    "@nuxtjs/color-mode": "^3.4.1",
+    "@nuxtjs/tailwindcss": "^6.12.0",
     "@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.12",
+    "@tailwindcss/typography": "^0.5.13",
     "@vueuse/core": "^10.9.0",
     "@vueuse/integrations": "^10.9.0",
     "@vueuse/math": "^10.9.0",
@@ -54,34 +54,31 @@
     "ohash": "^1.1.3",
     "pathe": "^1.1.2",
     "scule": "^1.3.0",
-    "tailwind-merge": "^2.2.2",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.3.6",
+    "@nuxt/eslint-config": "^0.3.10",
     "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/test-utils": "^3.12.0",
+    "@nuxt/test-utils": "^3.12.1",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@vue/test-utils": "^2.4.5",
+    "@vue/test-utils": "^2.4.6",
     "eslint": "^8.57.0",
-    "happy-dom": "^14.7.1",
-    "joi": "^17.12.3",
+    "happy-dom": "^14.10.1",
+    "joi": "^17.13.1",
     "nuxt": "^3.11.2",
-    "release-it": "^17.2.0",
+    "release-it": "^17.2.1",
     "typescript": "^5.4.5",
     "unbuild": "^2.0.0",
     "valibot": "^0.30.0",
-    "vitest": "^1.5.0",
+    "vitest": "^1.6.0",
     "vitest-environment-nuxt": "^1.0.0",
-    "vue-tsc": "^2.0.13",
+    "vue-tsc": "^2.0.16",
     "yup": "^1.4.0",
-    "zod": "^3.22.4"
+    "zod": "^3.23.6"
   },
   "resolutions": {
-    "@nuxt/kit": "^3.11.2",
-    "@nuxt/schema": "3.11.2",
-    "tailwindcss": "^3.4.3",
-    "@headlessui/vue": "1.7.19",
-    "vue": "3.4.21"
+    "@nuxt/ui": "workspace:*",
+    "@nuxt/module-builder": "0.5.5"
   }
 }