@nuxt/ui 2.8.1 → 2.10.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.8.1",
+  "version": "2.10.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.1";
+const version = "2.10.0";
+
+function omit(object, keysToOmit) {
+  const result = { ...object };
+  for (const key of keysToOmit) {
+    delete result[key];
+  }
+  return result;
+}
 
 const colorsToExclude = [
   "inherit",
@@ -185,6 +194,23 @@ const safelistByComponent = {
     pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
     variants: ["focus-visible"]
   }],
+  progress: (colorsAsRegex2) => [{
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }],
+  meter: (colorsAsRegex2) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }],
   notification: (colorsAsRegex2) => [{
     pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
     variants: ["dark"]
@@ -200,7 +226,9 @@ const safelistByComponent = {
 const safelistComponentAliasesMap = {
   "USelect": "UInput",
   "USelectMenu": "UInput",
-  "UTextarea": "UInput"
+  "UTextarea": "UInput",
+  "URadioGroup": "URadio",
+  "UMeterGroup": "UMeter"
 };
 const colorsAsRegex = (colors) => colors.join("|");
 const excludeColors = (colors) => {
@@ -251,6 +279,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 +321,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 +361,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 +381,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,44 @@ 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 })));
+  emits: ["update:modelValue", "update:sort"],
+  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 defaultSort = { column: sort.value.column, direction: null };
     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 = get(a, column);
+        const bValue = get(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() {
@@ -191,26 +206,27 @@ export default defineComponent({
       if (sort.value.column === column.key) {
         const direction = !column.direction || column.direction === "asc" ? "desc" : "asc";
         if (sort.value.direction === direction) {
-          sort.value = defu({}, props.sort, { column: null, direction: "asc" });
+          sort.value = defu({}, defaultSort, { column: null, direction: "asc" });
         } else {
           sort.value.direction = sort.value.direction === "asc" ? "desc" : "asc";
         }
       } else {
         sort.value = { column: column.key, direction: column.direction || "asc" };
       }
+      emit("update:sort", sort.value);
     }
     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)))) {
+        if (isSelected(row)) {
           return;
         }
-        onSelect(row);
+        selected.value.push(row);
       });
     }
     function onChange(event) {
@@ -224,10 +240,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;
@@ -106,7 +108,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:modelValue", 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").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ArrayConstructor;
         default: null;
@@ -145,7 +147,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     sortButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     sortAscIcon: {
         type: StringConstructor;
@@ -173,18 +175,24 @@ 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;
+    "onUpdate:sort"?: ((...args: any[]) => any) | undefined;
 }, {
     sort: {
         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,7 +1,14 @@
 <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">
+      <HDisclosureButton
+        :ref="() => buttonRefs[index] = { open, close }"
+        as="template"
+        :disabled="item.disabled"
+        @click="closeOthers(index, $event)"
+        @keydown.enter="closeOthers(index, $event)"
+        @keydown.space="closeOthers(index, $event)"
+      >
         <slot :item="item" :index="index" :open="open" :close="close">
           <UButton v-bind="{ ...omit(ui.default, ['openIcon', 'closeIcon']), ...attrs, ...omit(item, ['slot', 'disabled', 'content', 'defaultOpen']) }">
             <template #trailing>
@@ -18,8 +25,6 @@
         </slot>
       </HDisclosureButton>
 
-      <StateEmitter :open="open" @open="closeOthers(index)" />
-
       <Transition
         v-bind="ui.transition"
         @enter="onEnter"
@@ -40,24 +45,23 @@
 </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 StateEmitter from "../../utils/StateEmitter";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig, omit } from "../../utils";
 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,
     HDisclosureButton,
     HDisclosurePanel,
     UIcon,
-    UButton,
-    StateEmitter
+    UButton
   },
   inheritAttrs: false,
   props: {
@@ -71,35 +75,37 @@ 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, e) {
+      if (!props.items[currentIndex].closeOthers && props.multiple) {
         return;
       }
-      buttonRefs.value.forEach((close, index) => {
-        if (index === itemIndex)
-          return;
-        close();
+      buttonRefs.value.forEach((button2) => {
+        if (button2.open) {
+          button2.close(e.target);
+        }
       });
     }
     function onEnter(el, done) {
@@ -120,11 +126,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,26 @@ 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>;
-    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>;
-    };
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    buttonRefs: import("vue").Ref<{
+        open: boolean;
+        close: (e: EventTarget) => {};
+    }[]>;
+    closeOthers: (currentIndex: number, e: Event) => void;
+    omit: typeof omit;
     onEnter: (el: HTMLElement, done: any) => void;
     onBeforeLeave: (el: HTMLElement) => void;
     onAfterEnter: (el: HTMLElement) => void;
@@ -65,12 +67,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;