@nuxt/ui 2.13.0 → 2.14.0

package/dist/runtime/ui.config/data/table.mjs

@@ -2,7 +2,7 @@ export default {
   wrapper: "relative overflow-x-auto",
   base: "min-w-full table-fixed",
   divide: "divide-y divide-gray-300 dark:divide-gray-700",
-  thead: "",
+  thead: "relative",
   tbody: "divide-y divide-gray-200 dark:divide-gray-800",
   tr: {
     base: "",
@@ -11,14 +11,14 @@ export default {
   },
   th: {
     base: "text-left rtl:text-right",
-    padding: "px-3 py-3.5",
+    padding: "px-4 py-3.5",
     color: "text-gray-900 dark:text-white",
     font: "font-semibold",
     size: "text-sm"
   },
   td: {
     base: "whitespace-nowrap",
-    padding: "px-3 py-4",
+    padding: "px-4 py-4",
     color: "text-gray-500 dark:text-gray-400",
     font: "",
     size: "text-sm"
@@ -36,6 +36,9 @@ export default {
     label: "text-sm text-center text-gray-900 dark:text-white",
     icon: "w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4"
   },
+  progress: {
+    wrapper: "absolute inset-x-0 -bottom-[0.5px] p-0"
+  },
   default: {
     sortAscIcon: "i-heroicons-bars-arrow-up-20-solid",
     sortDescIcon: "i-heroicons-bars-arrow-down-20-solid",
@@ -47,6 +50,10 @@ export default {
       variant: "ghost",
       class: "-m-1.5"
     },
+    progress: {
+      color: "primary",
+      animation: "carousel"
+    },
     loadingState: {
       icon: "i-heroicons-arrow-path-20-solid",
       label: "Loading..."

package/dist/runtime/ui.config/elements/accordion.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     wrapper: string;
+    container: string;
     item: {
         base: string;
         size: string;

package/dist/runtime/ui.config/elements/accordion.mjs

@@ -1,5 +1,6 @@
 export default {
   wrapper: "w-full flex flex-col",
+  container: "w-full flex flex-col",
   item: {
     base: "",
     size: "text-sm",

package/dist/runtime/ui.config/forms/formGroup.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     wrapper: string;
+    inner: string;
     label: {
         wrapper: string;
         base: string;

package/dist/runtime/ui.config/forms/formGroup.mjs

@@ -1,5 +1,6 @@
 export default {
   wrapper: "",
+  inner: "",
   label: {
     wrapper: "flex content-center items-center justify-between",
     base: "block font-medium text-gray-700 dark:text-gray-200",

package/dist/runtime/ui.config/forms/input.d.ts

@@ -4,6 +4,17 @@ declare const _default: {
     form: string;
     rounded: string;
     placeholder: string;
+    file: {
+        base: string;
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
     size: {
         '2xs': string;
         xs: string;

package/dist/runtime/ui.config/forms/input.mjs

@@ -4,6 +4,17 @@ export default {
   form: "form-input",
   rounded: "rounded-md",
   placeholder: "placeholder-gray-400 dark:placeholder-gray-500",
+  file: {
+    base: "file:cursor-pointer file:rounded-l-md file:absolute file:left-0 file:inset-y-0 file:font-medium file:m-0 file:border-0 file:ring-1 file:ring-gray-300 dark:file:ring-gray-700 file:text-gray-900 dark:file:text-white file:bg-gray-50 hover:file:bg-gray-100 dark:file:bg-gray-800 dark:hover:file:bg-gray-700/50",
+    padding: {
+      "2xs": "ps-[85px]",
+      xs: "ps-[87px]",
+      sm: "ps-[96px]",
+      md: "ps-[98px]",
+      lg: "ps-[100px]",
+      xl: "ps-[109px]"
+    }
+  },
   size: {
     "2xs": "text-xs",
     xs: "text-xs",

package/dist/runtime/ui.config/forms/select.d.ts

@@ -11,6 +11,17 @@ declare const _default: {
     wrapper: string;
     base: string;
     rounded: string;
+    file: {
+        base: string;
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
     size: {
         '2xs': string;
         xs: string;

package/dist/runtime/ui.config/forms/textarea.d.ts

@@ -9,6 +9,17 @@ declare const _default: {
     base: string;
     rounded: string;
     placeholder: string;
+    file: {
+        base: string;
+        padding: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
     size: {
         '2xs': string;
         xs: string;

package/dist/runtime/ui.config/layout/divider.d.ts

@@ -14,8 +14,22 @@ declare const _default: {
         horizontal: string;
         vertical: string;
         size: {
-            horizontal: string;
-            vertical: string;
+            horizontal: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+            vertical: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
         };
         type: {
             solid: string;
@@ -31,5 +45,8 @@ declare const _default: {
         size: "2xs";
     };
     label: string;
+    default: {
+        size: "2xs";
+    };
 };
 export default _default;

package/dist/runtime/ui.config/layout/divider.mjs

@@ -14,8 +14,22 @@ export default {
     horizontal: "w-full",
     vertical: "h-full",
     size: {
-      horizontal: "border-t",
-      vertical: "border-s"
+      horizontal: {
+        "2xs": "border-t",
+        xs: "border-t-[2px]",
+        sm: "border-t-[3px]",
+        md: "border-t-[4px]",
+        lg: "border-t-[5px]",
+        xl: "border-t-[6px]"
+      },
+      vertical: {
+        "2xs": "border-s",
+        xs: "border-s-[2px]",
+        sm: "border-s-[3px]",
+        md: "border-s-[4px]",
+        lg: "border-s-[5px]",
+        xl: "border-s-[6px]"
+      }
     },
     type: {
       solid: "border-solid",
@@ -30,5 +44,8 @@ export default {
     base: "flex-shrink-0",
     size: "2xs"
   },
-  label: "text-sm"
+  label: "text-sm",
+  default: {
+    size: "2xs"
+  }
 };

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

@@ -0,0 +1,3 @@
+export declare const excludeColors: (colors: object) => string[];
+export declare const generateSafelist: (colors: string[], globalColors: any) => any[];
+export declare const customSafelistExtractor: (prefix: any, content: string, colors: string[], safelistColors: string[]) => string[];

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 = {