@nuxt/ui 2.15.2 → 2.16.0

package/README.md

@@ -30,16 +30,6 @@ Read more on [ui.nuxt.com](https://ui.nuxt.com)
 npx nuxi@latest module add ui
 ```
 
-Then, register the module in your `nuxt.config.ts`:
-
-```js
-export default defineNuxtConfig({
-  modules: [
-    '@nuxt/ui'
-  ]
-})
-```
-
 If you want latest updates, please use `@nuxt/ui-edge` in your `package.json`:
 
 ```json

package/dist/module.d.mts

@@ -7,6 +7,7 @@ declare const _default$H: {
     divide: string;
     thead: string;
     tbody: string;
+    caption: string;
     tr: {
         base: string;
         selected: string;
@@ -766,14 +767,6 @@ declare const _default$s: {
     placeholder: string;
     file: {
         base: string;
-        padding: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
     };
     size: {
         '2xs': string;
@@ -979,14 +972,6 @@ declare const _default$p: {
     placeholder: string;
     file: {
         base: string;
-        padding: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
     };
     size: {
         '2xs': string;
@@ -1098,14 +1083,6 @@ declare const _default$o: {
     rounded: string;
     file: {
         base: string;
-        padding: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
     };
     size: {
         '2xs': string;

package/dist/module.d.ts

@@ -7,6 +7,7 @@ declare const _default$H: {
     divide: string;
     thead: string;
     tbody: string;
+    caption: string;
     tr: {
         base: string;
         selected: string;
@@ -766,14 +767,6 @@ declare const _default$s: {
     placeholder: string;
     file: {
         base: string;
-        padding: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
     };
     size: {
         '2xs': string;
@@ -979,14 +972,6 @@ declare const _default$p: {
     placeholder: string;
     file: {
         base: string;
-        padding: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
     };
     size: {
         '2xs': string;
@@ -1098,14 +1083,6 @@ declare const _default$o: {
     rounded: string;
     file: {
         base: string;
-        padding: {
-            '2xs': string;
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-        };
     };
     size: {
         '2xs': string;

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.15.2",
+  "version": "2.16.0",
   "configKey": "ui",
   "compatibility": {
     "nuxt": "^3.10.0"

package/dist/module.mjs

@@ -1,8 +1,9 @@
 import { createRequire } from 'node:module';
-import { addTemplate, useNuxt, defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import { defaultExtractor as defaultExtractor$1 } from 'tailwindcss/lib/lib/defaultExtractor.js';
-import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons';
-import { kebabCase, upperFirst, camelCase } from 'scule';
+import { addTemplate, useNuxt, installModule, createResolver, defineNuxtModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { join } from 'pathe';
+import { defu } from 'defu';
+import { kebabCase } from 'scule';
+import defaultColors$1 from 'tailwindcss/colors.js';
 
 
 
@@ -14,7 +15,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@nuxt/ui";
-const version = "2.15.2";
+const version = "2.16.0";
 
 function createTemplates(nuxt = useNuxt()) {
   const template = addTemplate({
@@ -54,254 +55,113 @@ const colorsToExclude = [
   "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("|");
 const excludeColors = (colors) => {
   return Object.entries(omit(colors, colorsToExclude)).filter(([, value]) => typeof value === "object").map(([key]) => kebabCase(key));
 };
-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"
-  ];
-};
-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);
+const setGlobalColors = (theme) => {
+  const globalColors = {
+    ...theme.colors || defaultColors$1,
+    ...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$1.gray;
   }
-  return classes;
+  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);
 };
 
-const defaultExtractor = defaultExtractor$1({ tailwindConfig: { separator: ":" } });
+async function installTailwind(moduleOptions, nuxt = useNuxt(), resolve = createResolver(import.meta.url).resolve) {
+  const runtimeDir = resolve("./runtime");
+  nuxt.hook("tailwindcss:config", function(tailwindConfig) {
+    tailwindConfig.theme = tailwindConfig.theme || {};
+    tailwindConfig.theme.extend = tailwindConfig.theme.extend || {};
+    tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {};
+    const colors = setGlobalColors(tailwindConfig.theme);
+    nuxt.options.appConfig.ui = {
+      primary: "green",
+      gray: "cool",
+      colors,
+      strategy: "merge"
+    };
+  });
+  const configTemplate = addTemplate({
+    filename: "nuxtui-tailwind.config.cjs",
+    write: true,
+    getContents: ({ nuxt: nuxt2 }) => `
+      const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js')
+      const { customSafelistExtractor, generateSafelist } = require(${JSON.stringify(resolve(runtimeDir, "utils", "colors"))})
+      const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons')
+
+      const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
+
+      module.exports = {
+        plugins: [
+          require('@tailwindcss/forms')({ strategy: 'class' }),
+          require('@tailwindcss/aspect-ratio'),
+          require('@tailwindcss/typography'),
+          require('@tailwindcss/container-queries'),
+          require('@headlessui/tailwindcss'),
+          iconsPlugin(${Array.isArray(moduleOptions.icons) || moduleOptions.icons === "all" ? `{ collections: getIconCollections(${JSON.stringify(moduleOptions.icons)}) }` : typeof moduleOptions.icons === "object" ? JSON.stringify(moduleOptions.icons) : {}})
+        ],
+        content: {
+          files: [
+            ${JSON.stringify(resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"))},
+            ${JSON.stringify(resolve(runtimeDir, "ui.config/**/*.{mjs,js,ts}"))}
+          ],
+          transform: {
+            vue: (content) => {
+              return content.replaceAll(/(?:\\r\\n|\\r|\\n)/g, ' ')
+            }
+          },
+          extract: {
+            vue: (content) => {
+              return [
+                ...defaultExtractor(content),
+                ...customSafelistExtractor(${JSON.stringify(moduleOptions.prefix)}, content, ${JSON.stringify(nuxt2.options.appConfig.ui.colors)}, ${JSON.stringify(moduleOptions.safelistColors)})
+              ]
+            }
+          }
+        },
+        safelist: generateSafelist(${JSON.stringify(moduleOptions.safelistColors || [])}, ${JSON.stringify(nuxt2.options.appConfig.ui.colors)}),
+      }
+    `
+  });
+  await installModule("@nuxtjs/tailwindcss", defu({
+    exposeConfig: true,
+    config: { darkMode: "class" },
+    configPath: [
+      configTemplate.dst,
+      join(nuxt.options.rootDir, "tailwind.config")
+    ]
+  }, nuxt.options.tailwindcss));
+}
+
 const _require = createRequire(import.meta.url);
 const defaultColors = _require("tailwindcss/colors.js");
 delete defaultColors.lightBlue;
@@ -333,91 +193,10 @@ const module = defineNuxtModule({
     if (!options.disableGlobalStyles) {
       nuxt.options.css.push(resolve(runtimeDir, "ui.css"));
     }
-    nuxt.hook("tailwindcss:config", function(tailwindConfig) {
-      tailwindConfig.theme = tailwindConfig.theme || {};
-      tailwindConfig.theme.extend = tailwindConfig.theme.extend || {};
-      tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {};
-      const globalColors = {
-        ...tailwindConfig.theme.colors || defaultColors,
-        ...tailwindConfig.theme.extend?.colors
-      };
-      globalColors.primary = tailwindConfig.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 = tailwindConfig.theme.extend.colors.cool = defaultColors.gray;
-      }
-      globalColors.gray = tailwindConfig.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>)"
-      };
-      const colors = excludeColors(globalColors);
-      nuxt.options.appConfig.ui = {
-        primary: "green",
-        gray: "cool",
-        colors,
-        strategy: "merge"
-      };
-      tailwindConfig.safelist = tailwindConfig.safelist || [];
-      tailwindConfig.safelist.push(...generateSafelist(options.safelistColors || [], colors));
-    });
     createTemplates(nuxt);
     await installModule("nuxt-icon");
     await installModule("@nuxtjs/color-mode", { classSuffix: "" });
-    await installModule("@nuxtjs/tailwindcss", {
-      exposeConfig: true,
-      config: {
-        darkMode: "class",
-        plugins: [
-          require("@tailwindcss/forms")({ strategy: "class" }),
-          require("@tailwindcss/aspect-ratio"),
-          require("@tailwindcss/typography"),
-          require("@tailwindcss/container-queries"),
-          require("@headlessui/tailwindcss"),
-          iconsPlugin(Array.isArray(options.icons) || options.icons === "all" ? { collections: getIconCollections(options.icons) } : typeof options.icons === "object" ? options.icons : {})
-        ],
-        content: {
-          files: [
-            resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"),
-            resolve(runtimeDir, "ui.config/**/*.{mjs,js,ts}")
-          ],
-          transform: {
-            vue: (content) => {
-              return content.replaceAll(/(?:\r\n|\r|\n)/g, " ");
-            }
-          },
-          extract: {
-            vue: (content) => {
-              return [
-                ...defaultExtractor(content),
-                // @ts-ignore
-                ...customSafelistExtractor(options.prefix, content, nuxt.options.appConfig.ui.colors, options.safelistColors)
-              ];
-            }
-          }
-        }
-      }
-    });
+    await installTailwind(options, nuxt, resolve);
     addPlugin({
       src: resolve(runtimeDir, "plugins", "colors")
     });

package/dist/runtime/components/data/Table.vue

@@ -1,13 +1,24 @@
 <template>
   <div :class="ui.wrapper" v-bind="attrs">
     <table :class="[ui.base, ui.divide]">
+      <slot v-if="$slots.caption || caption" name="caption">
+        <caption :class="ui.caption">
+          {{ caption }}
+        </caption>
+      </slot>
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
           <th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
             <UCheckbox :model-value="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" v-bind="ui.default.checkbox" aria-label="Select all" @change="onChange" />
           </th>
 
-          <th v-for="(column, index) in columns" :key="index" scope="col" :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]">
+          <th
+            v-for="(column, index) in columns"
+            :key="index"
+            scope="col"
+            :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]"
+            :aria-sort="getAriaSort(column)"
+          >
             <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
               <UButton
                 v-if="column.sortable"
@@ -160,6 +171,10 @@ export default defineComponent({
       type: Object,
       default: () => config.default.emptyState
     },
+    caption: {
+      type: String,
+      default: null
+    },
     progress: {
       type: Object,
       default: () => config.default.progress
@@ -259,6 +274,21 @@ export default defineComponent({
     function getRowData(row, rowKey, defaultValue = "") {
       return get(row, rowKey, defaultValue);
     }
+    function getAriaSort(column) {
+      if (!column.sortable) {
+        return void 0;
+      }
+      if (sort.value.column !== column.key) {
+        return "none";
+      }
+      if (sort.value.direction === "asc") {
+        return "ascending";
+      }
+      if (sort.value.direction === "desc") {
+        return "descending";
+      }
+      return void 0;
+    }
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -279,7 +309,8 @@ export default defineComponent({
       onSort,
       onSelect,
       onChange,
-      getRowData
+      getRowData,
+      getAriaSort
     };
   }
 });