@nuxt/ui 2.15.1 → 2.16.0

package/dist/runtime/composables/useModal.mjs

@@ -5,20 +5,29 @@ function _useModal() {
   const modalState = inject(modalInjectionKey);
   const isOpen = ref(false);
   function open(component, props) {
+    if (!modalState) {
+      throw new Error("useModal() is called without provider");
+    }
     modalState.value = {
       component,
       props: props ?? {}
     };
     isOpen.value = true;
   }
-  function close() {
+  async function close() {
+    if (!modalState)
+      return;
     isOpen.value = false;
+  }
+  function reset() {
     modalState.value = {
       component: "div",
       props: {}
     };
   }
   function patch(props) {
+    if (!modalState)
+      return;
     modalState.value = {
       ...modalState.value,
       props: {
@@ -28,10 +37,11 @@ function _useModal() {
     };
   }
   return {
-    isOpen,
     open,
     close,
-    patch
+    reset,
+    patch,
+    isOpen
   };
 }
 export const useModal = createSharedComposable(_useModal);

package/dist/runtime/composables/usePopper.d.ts

@@ -153,23 +153,23 @@ export declare function usePopper({ locked, overflowPadding, offsetDistance, off
                 };
             } | undefined;
             offset?: {
-                auto?: {
+                "bottom-end"?: {
                     y: number;
                     x: number;
                 } | undefined;
-                "bottom-end"?: {
+                "bottom-start"?: {
                     y: number;
                     x: number;
                 } | undefined;
-                "bottom-start"?: {
+                bottom?: {
                     y: number;
                     x: number;
                 } | undefined;
-                "auto-start"?: {
+                left?: {
                     y: number;
                     x: number;
                 } | undefined;
-                "auto-end"?: {
+                right?: {
                     y: number;
                     x: number;
                 } | undefined;
@@ -177,15 +177,15 @@ export declare function usePopper({ locked, overflowPadding, offsetDistance, off
                     y: number;
                     x: number;
                 } | undefined;
-                bottom?: {
+                auto?: {
                     y: number;
                     x: number;
                 } | undefined;
-                right?: {
+                "auto-start"?: {
                     y: number;
                     x: number;
                 } | undefined;
-                left?: {
+                "auto-end"?: {
                     y: number;
                     x: number;
                 } | undefined;

package/dist/runtime/composables/useSlideover.d.ts

@@ -4,7 +4,8 @@ import type { Slideover, SlideoverState } from '../types/slideover';
 export declare const slidOverInjectionKey: InjectionKey<ShallowRef<SlideoverState>>;
 declare function _useSlideover(): {
     open: <T extends Component>(component: T, props?: Slideover & ComponentProps<T>) => void;
-    close: () => void;
+    close: () => Promise<void>;
+    reset: () => void;
     patch: <T_1 extends Component = {}>(props: Partial<Slideover & ComponentProps<T_1>>) => void;
     isOpen: import("vue").Ref<boolean>;
 };

package/dist/runtime/composables/useSlideover.mjs

@@ -14,11 +14,17 @@ function _useSlideover() {
     };
     isOpen.value = true;
   }
-  function close() {
+  async function close() {
     if (!slideoverState)
       return;
     isOpen.value = false;
   }
+  function reset() {
+    slideoverState.value = {
+      component: "div",
+      props: {}
+    };
+  }
   function patch(props) {
     if (!slideoverState)
       return;
@@ -33,6 +39,7 @@ function _useSlideover() {
   return {
     open,
     close,
+    reset,
     patch,
     isOpen
   };

package/dist/runtime/composables/useToast.d.ts

@@ -15,4 +15,6 @@ export declare function useToast(): {
         ui?: any;
     };
     remove: (id: string) => void;
+    update: (id: string, notification: Partial<Notification>) => void;
+    clear: () => void;
 };

package/dist/runtime/composables/useToast.mjs

@@ -15,8 +15,20 @@ export function useToast() {
   function remove(id) {
     notifications.value = notifications.value.filter((n) => n.id !== id);
   }
+  function update(id, notification) {
+    const index = notifications.value.findIndex((n) => n.id === id);
+    if (index !== -1) {
+      const previous = notifications.value[index];
+      notifications.value.splice(index, 1, { ...previous, ...notification });
+    }
+  }
+  function clear() {
+    notifications.value = [];
+  }
   return {
     add,
-    remove
+    remove,
+    update,
+    clear
   };
 }

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

@@ -1,17 +1,16 @@
 import type { Component } from 'vue'
 
-interface Slideover {
-    ui?: any;
-    side?: 'right' | 'left';
-    transition?: boolean;
-    appear?: boolean;
-    overlay?: boolean;
-    preventClose?: boolean;
-    modelValue?: boolean;
+export interface Slideover {
+  ui?: any
+  side?: 'right' | 'left'
+  transition?: boolean
+  appear?: boolean
+  overlay?: boolean
+  preventClose?: boolean
+  modelValue?: boolean
 }
 
-interface SlideoverState {
-    component: Component | string;
-    props: Slideover;
+export interface SlideoverState {
+  component: Component | string
+  props: Slideover
 }
-

package/dist/runtime/ui.config/data/table.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
     divide: string;
     thead: string;
     tbody: string;
+    caption: string;
     tr: {
         base: string;
         selected: string;
@@ -50,6 +51,9 @@ declare const _default: {
             variant: "ghost";
             class: string;
         };
+        checkbox: {
+            color: "primary";
+        };
         progress: {
             color: "primary";
             animation: "carousel";

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

@@ -4,6 +4,7 @@ export default {
   divide: "divide-y divide-gray-300 dark:divide-gray-700",
   thead: "relative",
   tbody: "divide-y divide-gray-200 dark:divide-gray-800",
+  caption: "sr-only",
   tr: {
     base: "",
     selected: "bg-gray-50 dark:bg-gray-800/50",
@@ -50,6 +51,9 @@ export default {
       variant: "ghost",
       class: "-m-1.5"
     },
+    checkbox: {
+      color: "primary"
+    },
     progress: {
       color: "primary",
       animation: "carousel"

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

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

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

@@ -5,15 +5,7 @@ export default {
   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]"
-    }
+    base: "file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:bg-transparent file:border-0 file:p-0 file:outline-none"
   },
   size: {
     "2xs": "text-xs",

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

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

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

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

package/dist/runtime/ui.config/navigation/breadcrumb.mjs

@@ -1,5 +1,5 @@
 export default {
-  wrapper: "relative",
+  wrapper: "relative min-w-0",
   ol: "flex items-center gap-x-1.5",
   li: "flex items-center gap-x-1.5 text-gray-500 dark:text-gray-400 text-sm leading-6 min-w-0",
   base: "flex items-center gap-x-1.5 group font-semibold min-w-0",

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

@@ -0,0 +1,11 @@
+import type { Config as TWConfig } from 'tailwindcss';
+import defaultColors from 'tailwindcss/colors.js';
+type ColorConfig = Exclude<TWConfig['theme']['colors'], Function>;
+export declare const excludeColors: (colors: ColorConfig | typeof defaultColors) => string[];
+export declare const setGlobalColors: (theme: TWConfig['theme']) => string[];
+export declare const generateSafelist: (colors: string[], globalColors: string[]) => any[];
+type SafelistFn = Exclude<NonNullable<Extract<TWConfig['content'], {
+    extract?: unknown;
+}>['extract']>, Record<string, unknown>>;
+export declare const customSafelistExtractor: (prefix: string, content: string, colors: string[], safelistColors: string[]) => ReturnType<SafelistFn>;
+export {};

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;
+};