@nuxt/ui 2.13.0 → 2.14.1

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.1",
   "configKey": "ui",
   "compatibility": {
-    "nuxt": "^3.0.0-rc.8"
+    "nuxt": "^3.10.0"
   }
 }

package/dist/module.mjs

@@ -1,5 +1,5 @@
+import { createRequire } from 'node:module';
 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';
@@ -14,7 +14,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.1";
+
+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 };
@@ -284,24 +301,9 @@ const customSafelistExtractor = (prefix, content, colors, safelistColors) => {
   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;
@@ -313,7 +315,7 @@ const module = defineNuxtModule({
     version,
     configKey: "ui",
     compatibility: {
-      nuxt: "^3.0.0-rc.8"
+      nuxt: "^3.10.0"
     }
   },
   defaults: {
@@ -378,8 +380,6 @@ const module = defineNuxtModule({
       };
       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");
@@ -393,7 +393,8 @@ const module = defineNuxtModule({
           require("@tailwindcss/aspect-ratio"),
           require("@tailwindcss/typography"),
           require("@tailwindcss/container-queries"),
-          require("@headlessui/tailwindcss")
+          require("@headlessui/tailwindcss"),
+          iconsPlugin(Array.isArray(options.icons) || options.icons === "all" ? { collections: getIconCollections(options.icons) } : typeof options.icons === "object" ? options.icons : {})
         ],
         content: {
           files: [
@@ -420,6 +421,9 @@ const module = defineNuxtModule({
     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;