@nuxt/ui 2.8.0 → 2.9.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "configKey": "ui",
   "compatibility": {
     "nuxt": "^3.0.0-rc.8"

package/dist/module.mjs

@@ -1,8 +1,9 @@
-import { defineNuxtModule, createResolver, resolvePath, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+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 { omit, kebabCase, upperFirst, camelCase } from 'lodash-es';
+import { kebabCase, upperFirst, camelCase } from 'scule';
+import { dirname } from 'pathe';
 
 
 
@@ -14,7 +15,15 @@ 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.8.0";
+const version = "2.9.0";
+
+function omit(object, keysToOmit) {
+  const result = { ...object };
+  for (const key of keysToOmit) {
+    delete result[key];
+  }
+  return result;
+}
 
 const colorsToExclude = [
   "inherit",
@@ -251,6 +260,23 @@ 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"] = dirname(template.dst);
+  nuxt.hook("prepare:types", (opts) => {
+    opts.references.push({ path: typesTemplate.dst });
+  });
+}
+
 const defaultExtractor = defaultExtractor$1({ tailwindConfig: { separator: ":" } });
 delete defaultColors.lightBlue;
 delete defaultColors.warmGray;
@@ -276,11 +302,8 @@ const module = defineNuxtModule({
     const runtimeDir = resolve("./runtime");
     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"));
-    const appConfigFile = await resolvePath(resolve(runtimeDir, "app.config"));
-    nuxt.hook("app:resolve", (app) => {
-      app.configs.push(appConfigFile);
-    });
     nuxt.hook("tailwindcss:config", function(tailwindConfig) {
       const globalColors = {
         ...tailwindConfig.theme.colors || defaultColors,
@@ -319,16 +342,17 @@ const module = defineNuxtModule({
       };
       const colors = excludeColors(globalColors);
       nuxt.options.appConfig.ui = {
-        ...nuxt.options.appConfig.ui,
         primary: "green",
         gray: "cool",
-        colors
+        colors,
+        strategy: "merge"
       };
       tailwindConfig.safelist = tailwindConfig.safelist || [];
       tailwindConfig.safelist.push(...generateSafelist(options.safelistColors, colors));
       tailwindConfig.plugins = tailwindConfig.plugins || [];
       tailwindConfig.plugins.push(iconsPlugin({ collections: getIconCollections(options.icons) }));
     });
+    createTemplates(nuxt);
     await installModule("@nuxtjs/color-mode", { classSuffix: "" });
     await installModule("@nuxtjs/tailwindcss", {
       exposeConfig: true,
@@ -338,7 +362,8 @@ const module = defineNuxtModule({
           require("@tailwindcss/forms")({ strategy: "class" }),
           require("@tailwindcss/aspect-ratio"),
           require("@tailwindcss/typography"),
-          require("@tailwindcss/container-queries")
+          require("@tailwindcss/container-queries"),
+          require("@headlessui/tailwindcss")
         ],
         content: {
           files: [

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

@@ -1,10 +1,10 @@
 <template>
-  <div :class="wrapperClass" v-bind="attrs">
+  <div :class="ui.wrapper" v-bind="attrs">
     <table :class="[ui.base, ui.divide]">
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
-          <th v-if="modelValue" scope="col" class="ps-4">
-            <UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" @change="onChange" />
+          <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" />
           </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]">
@@ -49,12 +49,12 @@
         </tr>
 
         <template v-else>
-          <tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active]" @click="() => onSelect(row)">
-            <td v-if="modelValue" class="ps-4">
-              <UCheckbox v-model="selected" :value="row" @click.stop />
+          <tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)">
+            <td v-if="modelValue" :class="ui.checkbox.padding">
+              <UCheckbox v-model="selected" :value="row" aria-label="Select row" @click.stop />
             </td>
 
-            <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]">
+            <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, row[column.key]?.class]">
               <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
                 {{ getRowData(row, column.key) }}
               </slot>
@@ -67,16 +67,17 @@
 </template>
 
 <script>
-import { ref, computed, defineComponent, toRaw } from "vue";
-import { omit, capitalize, orderBy, get } from "lodash-es";
+import { ref, computed, defineComponent, toRaw, toRef } from "vue";
+import { upperFirst } from "scule";
 import { defu } from "defu";
-import { twMerge } from "tailwind-merge";
-import { defuTwMerge } from "../../utils";
 import UButton from "../elements/Button.vue";
 import UIcon from "../elements/Icon.vue";
 import UCheckbox from "../forms/Checkbox.vue";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig, omit, get } from "../../utils";
 import appConfig from "#build/app.config";
+import { table } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.table, table);
 function defaultComparator(a, z) {
   return a === z;
 }
@@ -114,15 +115,15 @@ export default defineComponent({
     },
     sortButton: {
       type: Object,
-      default: () => appConfig.ui.table.default.sortButton
+      default: () => config.default.sortButton
     },
     sortAscIcon: {
       type: String,
-      default: () => appConfig.ui.table.default.sortAscIcon
+      default: () => config.default.sortAscIcon
     },
     sortDescIcon: {
       type: String,
-      default: () => appConfig.ui.table.default.sortDescIcon
+      default: () => config.default.sortDescIcon
     },
     loading: {
       type: Boolean,
@@ -130,30 +131,43 @@ export default defineComponent({
     },
     loadingState: {
       type: Object,
-      default: () => appConfig.ui.table.default.loadingState
+      default: () => config.default.loadingState
     },
     emptyState: {
       type: Object,
-      default: () => appConfig.ui.table.default.emptyState
+      default: () => config.default.emptyState
+    },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
     },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit, attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.table));
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
-    const columns = computed(() => props.columns ?? Object.keys(omit(props.rows[0] ?? {}, ["click"])).map((key) => ({ key, label: capitalize(key), sortable: false })));
+  setup(props, { emit, attrs: $attrs }) {
+    const { ui, attrs } = useUI("table", toRef(props, "ui"), config, toRef(props, "class"));
+    const columns = computed(() => props.columns ?? Object.keys(omit(props.rows[0] ?? {}, ["click"])).map((key) => ({ key, label: upperFirst(key), sortable: false })));
     const sort = ref(defu({}, props.sort, { column: null, direction: "asc" }));
     const rows = computed(() => {
       if (!sort.value?.column) {
         return props.rows;
       }
       const { column, direction } = sort.value;
-      return orderBy(props.rows, column, direction);
+      return props.rows.slice().sort((a, b) => {
+        const aValue = a[column];
+        const bValue = b[column];
+        if (aValue === bValue) {
+          return 0;
+        }
+        if (direction === "asc") {
+          return aValue < bValue ? -1 : 1;
+        } else {
+          return aValue > bValue ? -1 : 1;
+        }
+      });
     });
     const selected = computed({
       get() {
@@ -200,17 +214,17 @@ export default defineComponent({
       }
     }
     function onSelect(row) {
-      if (!attrs.onSelect) {
+      if (!$attrs.onSelect) {
         return;
       }
-      attrs.onSelect(row);
+      $attrs.onSelect(row);
     }
     function selectAllRows() {
       props.rows.forEach((row) => {
         if (selected.value.some((item) => compare(toRaw(item), toRaw(row)))) {
           return;
         }
-        onSelect(row);
+        $attrs.onSelect ? $attrs.onSelect(row) : selected.value.push(row);
       });
     }
     function onChange(event) {
@@ -224,10 +238,9 @@ export default defineComponent({
       return get(row, rowKey, defaultValue);
     }
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      wrapperClass,
+      attrs,
       // eslint-disable-next-line vue/no-dupe-keys
       sort,
       // eslint-disable-next-line vue/no-dupe-keys

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

@@ -1,6 +1,5 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
-import type { Button } from '../../types/button';
+import type { Button } from '../../types';
 declare function defaultComparator<T>(a: T, z: T): boolean;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
@@ -41,7 +40,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     sortButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     sortAscIcon: {
         type: StringConstructor;
@@ -69,16 +68,19 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => any;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
-    wrapperClass: import("vue").ComputedRef<string>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
     sort: import("vue").Ref<{
         direction: string;
         column: string;
@@ -145,7 +147,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     sortButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     sortAscIcon: {
         type: StringConstructor;
@@ -173,9 +175,13 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => any;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -184,7 +190,8 @@ declare const _default: import("vue").DefineComponent<{
         column: string;
         direction: 'asc' | 'desc';
     };
-    ui: any;
+    ui: Partial<any>;
+    class: any;
     modelValue: unknown[];
     by: string | Function;
     rows: {

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

@@ -1,5 +1,5 @@
 <template>
-  <div :class="wrapperClass">
+  <div :class="ui.wrapper">
     <HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen">
       <HDisclosureButton :ref="() => buttonRefs[index] = close" as="template" :disabled="item.disabled">
         <slot :item="item" :index="index" :open="open" :close="close">
@@ -40,16 +40,17 @@
 </template>
 
 <script>
-import { ref, computed, defineComponent } from "vue";
+import { ref, computed, toRef, defineComponent } from "vue";
 import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel } from "@headlessui/vue";
-import { omit } from "lodash-es";
-import { twMerge } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import UButton from "../elements/Button.vue";
-import { defuTwMerge } from "../../utils";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig, omit } from "../../utils";
 import StateEmitter from "../../utils/StateEmitter";
-import { useAppConfig } from "#imports";
 import appConfig from "#build/app.config";
+import { accordion, button } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.accordion, accordion);
+const configButton = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
 export default defineComponent({
   components: {
     HDisclosure,
@@ -71,36 +72,39 @@ export default defineComponent({
     },
     openIcon: {
       type: String,
-      default: () => appConfig.ui.accordion.default.openIcon
+      default: () => config.default.openIcon
     },
     closeIcon: {
       type: String,
-      default: () => appConfig.ui.accordion.default.closeIcon
+      default: () => config.default.closeIcon
     },
     multiple: {
       type: Boolean,
       default: false
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
-  setup(props, { attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.accordion));
-    const uiButton = computed(() => appConfig2.ui.button);
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+  setup(props) {
+    const { ui, attrs } = useUI("accordion", toRef(props, "ui"), config, toRef(props, "class"));
+    const uiButton = computed(() => configButton);
     const buttonRefs = ref([]);
-    function closeOthers(itemIndex) {
-      if (!props.items[itemIndex].closeOthers && props.multiple) {
+    function closeOthers(currentIndex) {
+      if (!props.items[currentIndex].closeOthers && props.multiple) {
         return;
       }
-      buttonRefs.value.forEach((close, index) => {
-        if (index === itemIndex)
-          return;
+      const totalItems = buttonRefs.value.length;
+      const order = Array.from({ length: totalItems }, (_, i) => (currentIndex + i) % totalItems).filter((index) => index !== currentIndex).reverse();
+      for (const index of order) {
+        const close = buttonRefs.value[index];
         close();
-      });
+      }
     }
     function onEnter(el, done) {
       el.style.height = "0";
@@ -120,11 +124,10 @@ export default defineComponent({
       el.addEventListener("transitionend", done, { once: true });
     }
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       uiButton,
-      wrapperClass,
+      attrs,
       buttonRefs,
       closeOthers,
       omit,

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

@@ -1,6 +1,6 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
-import type { AccordionItem } from '../../types/accordion';
+import { omit } from '../../utils';
+import type { AccordionItem } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     items: {
         type: PropType<AccordionItem[]>;
@@ -22,24 +22,23 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
     uiButton: import("vue").ComputedRef<any>;
-    wrapperClass: import("vue").ComputedRef<string>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
     buttonRefs: import("vue").Ref<Function[]>;
-    closeOthers: (itemIndex: number) => void;
-    omit: {
-        <T extends object, K extends import("lodash").PropertyName[]>(object: T | null | undefined, ...paths: K): Pick<T, Exclude<keyof T, K[number]>>;
-        <T_1 extends object, K_1 extends keyof T_1>(object: T_1 | null | undefined, ...paths: import("lodash").Many<K_1>[]): import("lodash").Omit<T_1, K_1>;
-        <T_2 extends object>(object: T_2 | null | undefined, ...paths: import("lodash").Many<import("lodash").PropertyName>[]): Partial<T_2>;
-    };
+    closeOthers: (currentIndex: number) => void;
+    omit: typeof omit;
     onEnter: (el: HTMLElement, done: any) => void;
     onBeforeLeave: (el: HTMLElement) => void;
     onAfterEnter: (el: HTMLElement) => void;
@@ -65,12 +64,17 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
-    ui: any;
+    ui: Partial<any>;
+    class: any;
     defaultOpen: boolean;
     items: AccordionItem[];
     openIcon: string;

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

@@ -25,22 +25,23 @@
           <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
         </div>
 
-        <UButton v-if="closeButton" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="$emit('close')" />
+        <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="$emit('close')" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
+import { computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import UButton from "../elements/Button.vue";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
-import { omit } from "lodash-es";
+import { alert } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.alert, alert);
 export default defineComponent({
   components: {
     UIcon,
@@ -59,7 +60,7 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: () => appConfig.ui.alert.default.icon
+      default: () => config.default.icon
     },
     avatar: {
       type: Object,
@@ -67,7 +68,7 @@ export default defineComponent({
     },
     closeButton: {
       type: Object,
-      default: () => appConfig.ui.alert.default.closeButton
+      default: () => config.default.closeButton
     },
     actions: {
       type: Array,
@@ -75,30 +76,33 @@ export default defineComponent({
     },
     color: {
       type: String,
-      default: () => appConfig.ui.alert.default.color,
+      default: () => config.default.color,
       validator(value) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.alert.color)].includes(value);
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value);
       }
     },
     variant: {
       type: String,
-      default: () => appConfig.ui.alert.default.variant,
+      default: () => config.default.variant,
       validator(value) {
         return [
-          ...Object.keys(appConfig.ui.alert.variant),
-          ...Object.values(appConfig.ui.alert.color).flatMap((value2) => Object.keys(value2))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap((value2) => Object.keys(value2))
         ].includes(value);
       }
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["close"],
-  setup(props, { attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.alert));
+  setup(props) {
+    const { ui, attrs } = useUI("alert", toRef(props, "ui"), config);
     const alertClass = computed(() => {
       const variant = ui.value.color?.[props.color]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
@@ -107,12 +111,12 @@ export default defineComponent({
         ui.value.shadow,
         ui.value.padding,
         variant?.replaceAll("{color}", props.color)
-      ), attrs.class);
+      ), props.class);
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       alertClass
     };
   }