@nuxt/ui 2.11.0 → 2.12.0

package/dist/module.mjs

@@ -14,7 +14,7 @@ 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.11.0";
+const version = "2.12.0";
 
 function omit(object, keysToOmit) {
   const result = { ...object };
@@ -329,11 +329,13 @@ const module = defineNuxtModule({
     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
       };
-      tailwindConfig.theme.extend.colors = 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>)",
@@ -372,9 +374,9 @@ const module = defineNuxtModule({
         strategy: "merge"
       };
       tailwindConfig.safelist = tailwindConfig.safelist || [];
-      tailwindConfig.safelist.push(...generateSafelist(options.safelistColors, colors));
+      tailwindConfig.safelist.push(...generateSafelist(options.safelistColors || [], colors));
       tailwindConfig.plugins = tailwindConfig.plugins || [];
-      tailwindConfig.plugins.push(iconsPlugin(Array.isArray(options.icons) || options.icons === "all" ? { collections: getIconCollections(options.icons) } : typeof options.icons === "object" ? options.icons : {}));
+      tailwindConfig.plugins.push(iconsPlugin(Array.isArray(options.icons) ? { collections: getIconCollections(options.icons) } : typeof options.icons === "object" ? options.icons : {}));
     });
     createTemplates(nuxt);
     await installModule("nuxt-icon");

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

@@ -11,7 +11,7 @@
             <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
               <UButton
                 v-if="column.sortable"
-                v-bind="{ ...ui.default.sortButton, ...sortButton }"
+                v-bind="{ ...(ui.default.sortButton || {}), ...sortButton }"
                 :icon="(!sort.column || sort.column !== column.key) ? (sortButton.icon || ui.default.sortButton.icon) : sort.direction === 'asc' ? sortAscIcon : sortDescIcon"
                 :label="column[columnAttribute]"
                 @click="onSort(column)"
@@ -67,20 +67,31 @@
 </template>
 
 <script>
-import { ref, computed, defineComponent, toRaw, toRef } from "vue";
+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 UCheckbox from "../forms/Checkbox.vue";
 import { useUI } from "../../composables/useUI";
-import { mergeConfig, omit, get } from "../../utils";
+import { mergeConfig, 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;
 }
+function defaultSort(a, b, direction) {
+  if (a === b) {
+    return 0;
+  }
+  if (direction === "asc") {
+    return a < b ? -1 : 1;
+  } else {
+    return a > b ? -1 : 1;
+  }
+}
 export default defineComponent({
   components: {
     UButton,
@@ -113,6 +124,10 @@ export default defineComponent({
       type: Object,
       default: () => ({})
     },
+    sortMode: {
+      type: String,
+      default: "auto"
+    },
     sortButton: {
       type: Object,
       default: () => config.default.sortButton
@@ -139,35 +154,29 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   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 columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: void 0, sort: defaultSort })));
+    const sort = useVModel(props, "sort", emit, { passive: true, defaultValue: defu({}, props.sort, { column: null, direction: "asc" }) });
+    const savedSort = { column: sort.value.column, direction: null };
     const rows = computed(() => {
-      if (!sort.value?.column) {
+      if (!sort.value?.column || props.sortMode === "manual") {
         return props.rows;
       }
       const { column, direction } = sort.value;
       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 sort2 = columns.value.find((col) => col.key === column)?.sort ?? defaultSort;
+        return sort2(aValue, bValue, direction);
       });
     });
     const selected = computed({
@@ -206,14 +215,13 @@ 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({}, defaultSort, { column: null, direction: "asc" });
+          sort.value = defu({}, savedSort, { column: null, direction: "asc" });
         } else {
-          sort.value.direction = sort.value.direction === "asc" ? "desc" : "asc";
+          sort.value = { column: sort.value.column, 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) {
@@ -236,7 +244,7 @@ export default defineComponent({
         selected.value = [];
       }
     }
-    function getRowData(row, rowKey, defaultValue = "Failed to get cell value") {
+    function getRowData(row, rowKey, defaultValue = "") {
       return get(row, rowKey, defaultValue);
     }
     return {

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

@@ -13,7 +13,6 @@ declare const _default: import("vue").DefineComponent<{
     rows: {
         type: PropType<{
             [key: string]: any;
-            click?: Function | undefined;
         }[]>;
         default: () => never[];
     };
@@ -22,6 +21,7 @@ declare const _default: import("vue").DefineComponent<{
             [key: string]: any;
             key: string;
             sortable?: boolean | undefined;
+            sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
             direction?: "asc" | "desc" | undefined;
             class?: string | undefined;
         }[]>;
@@ -38,6 +38,10 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => {};
     };
+    sortMode: {
+        type: PropType<"auto" | "manual">;
+        default: string;
+    };
     sortButton: {
         type: PropType<Button>;
         default: () => Button;
@@ -70,31 +74,31 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    sort: import("vue").Ref<{
-        direction: string;
+    sort: import("vue").WritableComputedRef<{
         column: string;
+        direction: 'asc' | 'desc';
     }>;
     columns: import("vue").ComputedRef<{
         [key: string]: any;
         key: string;
         sortable?: boolean | undefined;
+        sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
         direction?: "asc" | "desc" | undefined;
         class?: string | undefined;
     }[]>;
     rows: import("vue").ComputedRef<{
         [key: string]: any;
-        click?: Function | undefined;
     }[]>;
     selected: import("vue").WritableComputedRef<unknown[]>;
     indeterminate: import("vue").ComputedRef<boolean>;
@@ -120,7 +124,6 @@ declare const _default: import("vue").DefineComponent<{
     rows: {
         type: PropType<{
             [key: string]: any;
-            click?: Function | undefined;
         }[]>;
         default: () => never[];
     };
@@ -129,6 +132,7 @@ declare const _default: import("vue").DefineComponent<{
             [key: string]: any;
             key: string;
             sortable?: boolean | undefined;
+            sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
             direction?: "asc" | "desc" | undefined;
             class?: string | undefined;
         }[]>;
@@ -145,6 +149,10 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => {};
     };
+    sortMode: {
+        type: PropType<"auto" | "manual">;
+        default: string;
+    };
     sortButton: {
         type: PropType<Button>;
         default: () => Button;
@@ -177,11 +185,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -191,22 +199,23 @@ declare const _default: import("vue").DefineComponent<{
         column: string;
         direction: 'asc' | 'desc';
     };
-    ui: Partial<any>;
-    class: any;
-    modelValue: unknown[];
-    by: string | Function;
-    rows: {
-        [key: string]: any;
-        click?: Function | undefined;
-    }[];
+    ui: any;
     columns: {
         [key: string]: any;
         key: string;
         sortable?: boolean | undefined;
+        sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
         direction?: "asc" | "desc" | undefined;
         class?: string | undefined;
     }[];
+    class: any;
+    modelValue: unknown[];
+    by: string | Function;
+    rows: {
+        [key: string]: any;
+    }[];
     columnAttribute: string;
+    sortMode: "auto" | "manual";
     sortButton: Button;
     sortAscIcon: string;
     sortDescIcon: string;

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

@@ -87,11 +87,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {
@@ -108,20 +108,24 @@ export default defineComponent({
         }
       });
     }
-    function onEnter(el, done) {
+    function onEnter(_el, done) {
+      const el = _el;
       el.style.height = "0";
       el.offsetHeight;
       el.style.height = el.scrollHeight + "px";
       el.addEventListener("transitionend", done, { once: true });
     }
-    function onBeforeLeave(el) {
+    function onBeforeLeave(_el) {
+      const el = _el;
       el.style.height = el.scrollHeight + "px";
       el.offsetHeight;
     }
-    function onAfterEnter(el) {
+    function onAfterEnter(_el) {
+      const el = _el;
       el.style.height = "auto";
     }
-    function onLeave(el, done) {
+    function onLeave(_el, done) {
+      const el = _el;
       el.style.height = "0";
       el.addEventListener("transitionend", done, { once: true });
     }

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

@@ -24,11 +24,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -42,10 +42,10 @@ declare const _default: import("vue").DefineComponent<{
     }[]>;
     closeOthers: (currentIndex: number, e: Event) => void;
     omit: typeof omit;
-    onEnter: (el: HTMLElement, done: any) => void;
-    onBeforeLeave: (el: HTMLElement) => void;
-    onAfterEnter: (el: HTMLElement) => void;
-    onLeave: (el: HTMLElement, done: any) => void;
+    onEnter: (_el: Element, done: () => void) => void;
+    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<{
     items: {
         type: PropType<AccordionItem[]>;
@@ -69,14 +69,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
+    ui: any;
     class: any;
     defaultOpen: boolean;
     items: AccordionItem[];

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

@@ -4,7 +4,7 @@
       <UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
       <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
-      <div class="w-0 flex-1">
+      <div :class="ui.inner">
         <p :class="ui.title">
           <slot name="title" :title="title">
             {{ title }}
@@ -17,15 +17,15 @@
         </p>
 
         <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
         </div>
       </div>
       <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
         <template v-if="!description && !$slots.description && actions.length">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
+          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
         </template>
 
-        <UButton v-if="closeButton" aria-label="Close" 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>
@@ -93,11 +93,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["close"],
@@ -113,11 +113,17 @@ export default defineComponent({
         variant?.replaceAll("{color}", props.color)
       ), props.class);
     });
+    function onAction(action) {
+      if (action.click) {
+        action.click();
+      }
+    }
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
       alertClass,
+      onAction,
       twMerge
     };
   }

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Avatar, Button, AlertVariant } from '../../types';
+import type { Avatar, Button, AlertVariant, AlertAction } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     title: {
         type: StringConstructor;
@@ -22,9 +22,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => Button;
     };
     actions: {
-        type: PropType<(Button & {
-            click?: Function | undefined;
-        })[]>;
+        type: PropType<AlertAction[]>;
         default: () => never[];
     };
     color: {
@@ -39,11 +37,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -51,6 +49,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     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<{
     title: {
@@ -74,9 +73,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => Button;
     };
     actions: {
-        type: PropType<(Button & {
-            click?: Function | undefined;
-        })[]>;
+        type: PropType<AlertAction[]>;
         default: () => never[];
     };
     color: {
@@ -91,23 +88,21 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: Partial<any>;
+    ui: any;
     description: string;
     icon: string;
     avatar: Avatar;
     closeButton: Button;
-    actions: (Button & {
-        click?: Function | undefined;
-    })[];
+    actions: AlertAction[];
     color: any;
     class: any;
     variant: AlertVariant;

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

@@ -81,11 +81,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

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

@@ -42,11 +42,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -103,16 +103,16 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
     alt: string;
     size: AvatarSize;
-    ui: Partial<any>;
+    ui: any;
     icon: string;
     class: any;
     src: string | boolean;

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

@@ -12,11 +12,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
@@ -32,15 +32,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
     size: AvatarSize;
-    ui: Partial<any>;
+    ui: any;
     class: any;
     max: number;
 }, {}>;

package/dist/runtime/components/elements/AvatarGroup.mjs

@@ -23,11 +23,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props, { slots }) {

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

@@ -46,11 +46,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {