@nuxt/ui 2.12.3 → 2.14.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.12.3";
+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,72 +263,130 @@ 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: {
     prefix: "U",
     icons: ["heroicons"],
-    safelistColors: ["primary"]
+    safelistColors: ["primary"],
+    disableGlobalStyles: false
   },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
@@ -327,96 +394,19 @@ const module = defineNuxtModule({
     nuxt.options.build.transpile.push(runtimeDir);
     nuxt.options.build.transpile.push("@popperjs/core", "@headlessui/vue");
     nuxt.options.alias["#ui"] = runtimeDir;
-    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 : {}));
-    });
+    if (!options.disableGlobalStyles) {
+      nuxt.options.css.push(resolve(runtimeDir, "ui.css"));
+    }
     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: () => ""

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Button } from '../../types';
+import type { Button, ProgressAnimation } from '../../types';
 declare function defaultComparator<T>(a: T, z: T): boolean;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
@@ -72,6 +72,13 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => any;
     };
+    progress: {
+        type: PropType<{
+            color: any;
+            animation: ProgressAnimation;
+        }>;
+        default: () => any;
+    };
     class: {
         type: PropType<any>;
         default: () => string;
@@ -112,7 +119,7 @@ declare const _default: import("vue").DefineComponent<{
     onSelect: (row: any) => void;
     onChange: (event: any) => void;
     getRowData: (row: Object, rowKey: string | string[], defaultValue?: any) => any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:sort")[], "update:modelValue" | "update:sort", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:sort")[], "update:modelValue" | "update:sort", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ArrayConstructor;
         default: null;
@@ -183,6 +190,13 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => any;
     };
+    progress: {
+        type: PropType<{
+            color: any;
+            animation: ProgressAnimation;
+        }>;
+        default: () => any;
+    };
     class: {
         type: PropType<any>;
         default: () => string;
@@ -199,7 +213,12 @@ declare const _default: import("vue").DefineComponent<{
         column: string;
         direction: 'asc' | 'desc';
     };
+    progress: {
+        color: any;
+        animation: ProgressAnimation;
+    };
     ui: any;
+    class: any;
     columns: {
         [key: string]: any;
         key: string;
@@ -208,7 +227,6 @@ declare const _default: import("vue").DefineComponent<{
         direction?: "asc" | "desc" | undefined;
         class?: string | undefined;
     }[];
-    class: any;
     modelValue: unknown[];
     by: string | Function;
     rows: {

package/dist/runtime/components/elements/Accordion.vue

@@ -1,6 +1,13 @@
 <template>
   <div :class="ui.wrapper">
-    <HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen">
+    <HDisclosure
+      v-for="(item, index) in items"
+      v-slot="{ open, close }"
+      :key="index"
+      as="div"
+      :class="ui.container"
+      :default-open="defaultOpen || item.defaultOpen"
+    >
       <HDisclosureButton
         :ref="() => buttonRefs[index] = { open, close }"
         as="template"
@@ -46,13 +53,14 @@
 
 <script>
 import { ref, computed, toRef, defineComponent } from "vue";
-import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel } from "@headlessui/vue";
+import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel, provideUseId } from "@headlessui/vue";
 import UIcon from "../elements/Icon.vue";
 import UButton from "../elements/Button.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig, omit } from "../../utils";
 import appConfig from "#build/app.config";
 import { accordion, button } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.accordion, accordion);
 const configButton = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
 export default defineComponent({
@@ -129,6 +137,7 @@ export default defineComponent({
       el.style.height = "0";
       el.addEventListener("transitionend", done, { once: true });
     }
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

package/dist/runtime/components/elements/Accordion.vue.d.ts

@@ -46,7 +46,7 @@ declare const _default: import("vue").DefineComponent<{
     onBeforeLeave: (_el: Element) => void;
     onAfterEnter: (_el: Element) => void;
     onLeave: (_el: Element, done: () => void) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: PropType<AccordionItem[]>;
         default: () => never[];

package/dist/runtime/components/elements/Alert.vue

@@ -5,7 +5,7 @@
       <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
       <div :class="ui.inner">
-        <p :class="ui.title">
+        <p v-if="(title || $slots.title)" :class="ui.title">
           <slot name="title" :title="title">
             {{ title }}
           </slot>
@@ -52,7 +52,7 @@ export default defineComponent({
   props: {
     title: {
       type: String,
-      required: true
+      default: null
     },
     description: {
       type: String,

package/dist/runtime/components/elements/Alert.vue.d.ts

@@ -3,7 +3,7 @@ import type { Avatar, Button, AlertVariant, AlertAction } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     title: {
         type: StringConstructor;
-        required: true;
+        default: null;
     };
     description: {
         type: StringConstructor;
@@ -51,10 +51,10 @@ declare const _default: import("vue").DefineComponent<{
     alertClass: import("vue").ComputedRef<string>;
     onAction: (action: AlertAction) => void;
     twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     title: {
         type: StringConstructor;
-        required: true;
+        default: null;
     };
     description: {
         type: StringConstructor;
@@ -98,6 +98,7 @@ declare const _default: import("vue").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
+    title: string;
     description: string;
     icon: string;
     avatar: Avatar;

package/dist/runtime/components/elements/Avatar.vue.d.ts

@@ -61,7 +61,7 @@ declare const _default: import("vue").DefineComponent<{
     placeholder: import("vue").ComputedRef<string>;
     error: import("vue").Ref<boolean>;
     onError: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     src: {
         type: (BooleanConstructor | StringConstructor)[];
         default: null;

package/dist/runtime/components/elements/AvatarGroup.d.ts

@@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
         type: PropType<AvatarSize>;
         default: null;

package/dist/runtime/components/elements/Badge.vue.d.ts

@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     badgeClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
         type: PropType<BadgeSize>;
         default: () => any;
@@ -66,7 +66,7 @@ declare const _default: import("vue").DefineComponent<{
     ui: any;
     color: any;
     class: any;
-    label: string | number;
     variant: BadgeVariant;
+    label: string | number;
 }, {}>;
 export default _default;