@nuxt/ui 2.13.0 → 2.14.0

package/README.md

@@ -1,4 +1,4 @@
-[![nuxt-ui-social-card](https://repository-images.githubusercontent.com/428329515/43fec891-9030-4601-8233-5d45ba5c6013)](https://ui.nuxt.com)
+[![nuxt-ui.png](https://repository-images.githubusercontent.com/428329515/43fec891-9030-4601-8233-5d45ba5c6013)](https://ui.nuxt.com)
 
 # Nuxt UI
 
@@ -7,9 +7,9 @@
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-Nuxt UI provides everything related to UI when building Nuxt applications: components, icons, colors, dark mode and also keyboard shortcuts.
+Nuxt UI is a module that provides a set of Vue components and composables built with [Tailwind CSS](https://tailwindcss.com/) and [Headless UI](https://headlessui.dev/) to help you build beautiful and accessible user interfaces.
 
-Is has been developed by [NuxtLabs](https://nuxtlabs.com/) for [Volta](https://volta.net), [Nuxt Studio](https://nuxt.studio/) and the Nuxt community.
+Its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.
 
 ## Features
 
@@ -27,14 +27,14 @@ Read more on [ui.nuxt.com](https://ui.nuxt.com)
 ## Installation
 
 ```bash
-# Using npm
+# npm
 npm install @nuxt/ui
-
-# Using yarn
+# yarn
 yarn add @nuxt/ui
-
-# Using pnpm
+# pnpm
 pnpm add @nuxt/ui
+# bun
+bun add @nuxt/ui
 ```
 
 Then, register the module in your `nuxt.config.ts`:

package/dist/module.d.mts

@@ -39,6 +39,9 @@ declare const _default$H: {
         label: string;
         icon: string;
     };
+    progress: {
+        wrapper: string;
+    };
     default: {
         sortAscIcon: string;
         sortDescIcon: string;
@@ -50,6 +53,10 @@ declare const _default$H: {
             variant: "ghost";
             class: string;
         };
+        progress: {
+            color: "primary";
+            animation: "carousel";
+        };
         loadingState: {
             icon: string;
             label: string;
@@ -439,6 +446,7 @@ declare const _default$A: {
 
 declare const _default$z: {
     wrapper: string;
+    container: string;
     item: {
         base: string;
         size: string;
@@ -753,6 +761,17 @@ declare const _default$s: {
     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;
@@ -920,6 +939,7 @@ declare const _default$r: {
 
 declare const _default$q: {
     wrapper: string;
+    inner: string;
     label: {
         wrapper: string;
         base: string;
@@ -954,6 +974,17 @@ declare const _default$p: {
     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;
@@ -1062,6 +1093,17 @@ declare const _default$o: {
     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;
@@ -1449,8 +1491,22 @@ declare const _default$e: {
         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;
@@ -1466,6 +1522,9 @@ declare const _default$e: {
         size: "2xs";
     };
     label: string;
+    default: {
+        size: "2xs";
+    };
 };
 
 declare const _default$d: {

package/dist/module.d.ts

@@ -39,6 +39,9 @@ declare const _default$H: {
         label: string;
         icon: string;
     };
+    progress: {
+        wrapper: string;
+    };
     default: {
         sortAscIcon: string;
         sortDescIcon: string;
@@ -50,6 +53,10 @@ declare const _default$H: {
             variant: "ghost";
             class: string;
         };
+        progress: {
+            color: "primary";
+            animation: "carousel";
+        };
         loadingState: {
             icon: string;
             label: string;
@@ -439,6 +446,7 @@ declare const _default$A: {
 
 declare const _default$z: {
     wrapper: string;
+    container: string;
     item: {
         base: string;
         size: string;
@@ -753,6 +761,17 @@ declare const _default$s: {
     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;
@@ -920,6 +939,7 @@ declare const _default$r: {
 
 declare const _default$q: {
     wrapper: string;
+    inner: string;
     label: {
         wrapper: string;
         base: string;
@@ -954,6 +974,17 @@ declare const _default$p: {
     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;
@@ -1062,6 +1093,17 @@ declare const _default$o: {
     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;
@@ -1449,8 +1491,22 @@ declare const _default$e: {
         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;
@@ -1466,6 +1522,9 @@ declare const _default$e: {
         size: "2xs";
     };
     label: string;
+    default: {
+        size: "2xs";
+    };
 };
 
 declare const _default$d: {

package/dist/module.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "configKey": "ui",
   "compatibility": {
-    "nuxt": "^3.0.0-rc.8"
+    "nuxt": "^3.10.0"
   }
 }

package/dist/module.mjs

@@ -1,8 +1,7 @@
-import { addTemplate, useNuxt, defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import defaultColors from 'tailwindcss/colors.js';
-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, defineNuxtModule, createResolver, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { createRequire } from 'node:module';
+import { join } from 'pathe';
+import { kebabCase } from 'scule';
 
 
 
@@ -14,7 +13,24 @@ 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.13.0";
+const version = "2.14.0";
+
+function createTemplates(nuxt = useNuxt()) {
+  const template = addTemplate({
+    filename: "ui.colors.mjs",
+    getContents: () => `export default ${JSON.stringify(nuxt.options.appConfig.ui.colors)};`,
+    write: true
+  });
+  const typesTemplate = addTemplate({
+    filename: "ui.colors.d.ts",
+    getContents: () => `declare module '#ui-colors' { const defaultExport: ${JSON.stringify(nuxt.options.appConfig.ui.colors)}; export default defaultExport; }`,
+    write: true
+  });
+  nuxt.options.alias["#ui-colors"] = template.dst;
+  nuxt.hook("prepare:types", (opts) => {
+    opts.references.push({ path: typesTemplate.dst });
+  });
+}
 
 function omit(object, keysToOmit) {
   const result = { ...object };
@@ -228,13 +244,6 @@ const safelistByComponent = {
     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));
@@ -254,66 +263,123 @@ const generateSafelist = (colors, globalColors) => {
     "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);
-  }
-  return classes;
-};
-
-function createTemplates(nuxt = useNuxt()) {
-  const template = addTemplate({
-    filename: "ui.colors.mjs",
-    getContents: () => `export default ${JSON.stringify(nuxt.options.appConfig.ui.colors)};`,
-    write: true
-  });
-  const typesTemplate = addTemplate({
-    filename: "ui.colors.d.ts",
-    getContents: () => `declare module '#ui-colors' { const defaultExport: ${JSON.stringify(nuxt.options.appConfig.ui.colors)}; export default defaultExport; }`,
-    write: true
-  });
-  nuxt.options.alias["#ui-colors"] = template.dst;
-  nuxt.hook("prepare:types", (opts) => {
-    opts.references.push({ path: typesTemplate.dst });
-  });
-}
 
-const defaultExtractor = defaultExtractor$1({ tailwindConfig: { separator: ":" } });
+const _require = createRequire(import.meta.url);
+const defaultColors = _require("tailwindcss/colors.js");
 delete defaultColors.lightBlue;
 delete defaultColors.warmGray;
 delete defaultColors.trueGray;
 delete defaultColors.coolGray;
 delete defaultColors.blueGray;
+async function installTailwind(moduleOptions, nuxt = useNuxt(), { resolve, runtimeDir }) {
+  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(moduleOptions.safelistColors || [], colors)
+    );
+  });
+  const configTemplate = addTemplate({
+    filename: "nuxtui-tailwind.config.cjs",
+    write: true,
+    getContents: () => `
+      const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js')
+      const { customSafelistExtractor } = require(${JSON.stringify(resolve(runtimeDir, "utils", "colors"))})
+      const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons')
+
+      const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
+
+      module.exports = {
+        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(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(nuxt.options.appConfig.ui.colors)}, ${JSON.stringify(moduleOptions.safelistColors)})
+              ]
+            }
+          }
+        }
+      }
+    `
+  });
+  await installModule("@nuxtjs/tailwindcss", {
+    exposeConfig: true,
+    configPath: [
+      configTemplate.dst,
+      join(nuxt.options.rootDir, "tailwind.config")
+    ]
+  });
+}
+
 const module = defineNuxtModule({
   meta: {
     name,
     version,
     configKey: "ui",
     compatibility: {
-      nuxt: "^3.0.0-rc.8"
+      nuxt: "^3.10.0"
     }
   },
   defaults: {
@@ -331,95 +397,16 @@ 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));
-      tailwindConfig.plugins = tailwindConfig.plugins || [];
-      tailwindConfig.plugins.push(iconsPlugin(Array.isArray(options.icons) ? { collections: getIconCollections(options.icons) } : typeof options.icons === "object" ? options.icons : {}));
-    });
     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")
-        ],
-        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, runtimeDir });
     addPlugin({
       src: resolve(runtimeDir, "plugins", "colors")
     });
+    addPlugin({
+      src: resolve(runtimeDir, "plugins", "modals")
+    });
     addComponentsDir({
       path: resolve(runtimeDir, "components", "elements"),
       prefix: options.prefix,

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

@@ -4,7 +4,7 @@
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
           <th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
-            <UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" aria-label="Select all" @change="onChange" />
+            <UCheckbox :model-value="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" 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]">
@@ -20,9 +20,15 @@
             </slot>
           </th>
         </tr>
+
+        <tr v-if="loading && progress">
+          <td :colspan="0" :class="ui.progress.wrapper">
+            <UProgress v-bind="{ ...(ui.default.progress || {}), ...progress }" size="2xs" />
+          </td>
+        </tr>
       </thead>
       <tbody :class="ui.tbody">
-        <tr v-if="loadingState && loading">
+        <tr v-if="loadingState && loading && !rows.length">
           <td :colspan="columns.length + (modelValue ? 1 : 0)">
             <slot name="loading-state">
               <div :class="ui.loadingState.wrapper">
@@ -71,8 +77,9 @@ import { computed, defineComponent, toRaw, toRef } from "vue";
 import { upperFirst } from "scule";
 import { defu } from "defu";
 import { useVModel } from "@vueuse/core";
-import UButton from "../elements/Button.vue";
 import UIcon from "../elements/Icon.vue";
+import UButton from "../elements/Button.vue";
+import UProgress from "../elements/Progress.vue";
 import UCheckbox from "../forms/Checkbox.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig, get } from "../../utils";
@@ -94,8 +101,9 @@ function defaultSort(a, b, direction) {
 }
 export default defineComponent({
   components: {
-    UButton,
     UIcon,
+    UButton,
+    UProgress,
     UCheckbox
   },
   inheritAttrs: false,
@@ -152,6 +160,10 @@ export default defineComponent({
       type: Object,
       default: () => config.default.emptyState
     },
+    progress: {
+      type: Object,
+      default: () => config.default.progress
+    },
     class: {
       type: [String, Object, Array],
       default: () => ""