@nuxt/ui 2.11.1 → 2.12.0

package/dist/module.d.mts

@@ -1,7 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { CollectionNames, IconsPluginOptions } from '@egoist/tailwindcss-icons';
 
-declare const _default$E: {
+declare const _default$F: {
     wrapper: string;
     base: string;
     divide: string;
@@ -61,7 +61,7 @@ declare const _default$E: {
     };
 };
 
-declare const _default$D: {
+declare const _default$E: {
     wrapper: string;
     background: string;
     rounded: string;
@@ -121,13 +121,13 @@ declare const _default$D: {
     };
 };
 
-declare const _default$C: {
+declare const _default$D: {
     wrapper: string;
     ring: string;
     margin: string;
 };
 
-declare const _default$B: {
+declare const _default$C: {
     base: string;
     rounded: string;
     font: string;
@@ -161,7 +161,7 @@ declare const _default$B: {
     };
 };
 
-declare const _default$A: {
+declare const _default$B: {
     base: string;
     font: string;
     rounded: string;
@@ -242,7 +242,7 @@ declare const _default$A: {
     };
 };
 
-declare const _default$z: {
+declare const _default$A: {
     wrapper: {
         horizontal: string;
         vertical: string;
@@ -343,7 +343,7 @@ declare const _default$z: {
     };
 };
 
-declare const _default$y: {
+declare const _default$z: {
     wrapper: string;
     base: string;
     background: string;
@@ -378,7 +378,7 @@ declare const _default$y: {
     };
 };
 
-declare const _default$x: {
+declare const _default$y: {
     wrapper: string;
     container: string;
     trigger: string;
@@ -433,7 +433,7 @@ declare const _default$x: {
     };
 };
 
-declare const _default$w: {
+declare const _default$x: {
     wrapper: string;
     item: {
         base: string;
@@ -454,7 +454,7 @@ declare const _default$w: {
     };
 };
 
-declare const _default$v: {
+declare const _default$w: {
     wrapper: string;
     inner: string;
     title: string;
@@ -495,7 +495,7 @@ declare const _default$v: {
     };
 };
 
-declare const _default$u: {
+declare const _default$v: {
     base: string;
     padding: string;
     size: {
@@ -512,7 +512,7 @@ declare const _default$u: {
     };
 };
 
-declare const _default$t: {
+declare const _default$u: {
     wrapper: string;
     indicator: {
         container: {
@@ -587,7 +587,7 @@ declare const _default$t: {
     };
 };
 
-declare const _default$s: {
+declare const _default$t: {
     wrapper: string;
     indicator: {
         container: string;
@@ -664,7 +664,7 @@ declare const _default$s: {
     };
 };
 
-declare const _default$r: {
+declare const _default$s: {
     wrapper: string;
     base: string;
     background: string;
@@ -716,7 +716,7 @@ declare const _default$r: {
     };
 };
 
-declare const _default$q: {
+declare const _default$r: {
     wrapper: string;
     base: string;
     form: string;
@@ -823,6 +823,70 @@ declare const _default$q: {
     };
 };
 
+declare const _default$q: {
+    container: string;
+    trigger: string;
+    width: string;
+    height: string;
+    base: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    ring: string;
+    empty: string;
+    option: {
+        base: string;
+        rounded: string;
+        padding: string;
+        size: string;
+        color: string;
+        container: string;
+        active: string;
+        inactive: string;
+        selected: string;
+        disabled: string;
+        empty: string;
+        icon: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        selectedIcon: {
+            wrapper: string;
+            padding: string;
+            base: string;
+        };
+        avatar: {
+            base: string;
+            size: "3xs";
+        };
+        chip: {
+            base: string;
+        };
+    };
+    transition: {
+        leaveActiveClass: string;
+        leaveFromClass: string;
+        leaveToClass: string;
+    };
+    popper: {
+        placement: string;
+    };
+    default: {
+        selectedIcon: string;
+        trailingIcon: string;
+    };
+    arrow: {
+        ring: string;
+        background: string;
+        base: string;
+        rounded: string;
+        shadow: string;
+        placement: string;
+    };
+};
+
 declare const _default$p: {
     wrapper: string;
     label: {
@@ -1063,21 +1127,12 @@ declare const _default$n: {
 };
 
 declare const _default$m: {
-    container: string;
-    trigger: string;
     select: string;
-    width: string;
-    height: string;
-    base: string;
-    background: string;
-    shadow: string;
-    rounded: string;
-    padding: string;
-    ring: string;
     input: string;
     required: string;
     label: string;
     option: {
+        create: string;
         base: string;
         rounded: string;
         padding: string;
@@ -1089,7 +1144,6 @@ declare const _default$m: {
         selected: string;
         disabled: string;
         empty: string;
-        create: string;
         icon: {
             base: string;
             active: string;
@@ -1118,7 +1172,8 @@ declare const _default$m: {
     };
     default: {
         selectedIcon: string;
-        clearOnClose: boolean;
+        clearSearchOnClose: boolean;
+        showCreateOptionWhen: string;
     };
     arrow: {
         ring: string;
@@ -1128,6 +1183,17 @@ declare const _default$m: {
         shadow: string;
         placement: string;
     };
+    container: string;
+    trigger: string;
+    width: string;
+    height: string;
+    base: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    ring: string;
+    empty: string;
 };
 
 declare const _default$l: {
@@ -1397,6 +1463,11 @@ declare const _default$c: {
         active: string;
         inactive: string;
     };
+    divider: {
+        wrapper: {
+            base: string;
+        };
+    };
 };
 
 declare const _default$b: {
@@ -1545,6 +1616,7 @@ declare const _default$8: {
     ol: string;
     li: string;
     base: string;
+    label: string;
     icon: {
         base: string;
         active: string;
@@ -1793,7 +1865,7 @@ declare const _default$1: {
 };
 
 declare namespace config {
-  export { _default$w as accordion, _default$v as alert, _default$D as avatar, _default$C as avatarGroup, _default$B as badge, _default$8 as breadcrumb, _default$A as button, _default$z as buttonGroup, _default$g as card, _default$j as checkbox, _default$y as chip, _default$b as commandPalette, _default$f as container, _default$3 as contextMenu, _default$d as divider, _default$x as dropdown, _default$p as formGroup, _default$q as input, _default$u as kbd, _default$s as meter, _default$r as meterGroup, _default$7 as modal, _default$2 as notification, _default$1 as notifications, _default$a as pagination, _default$4 as popover, _default$t as progress, _default$k as radio, _default$l as radioGroup, _default$h as range, _default$n as select, _default$m as selectMenu, _default$e as skeleton, _default$6 as slideover, _default$E as table, _default$9 as tabs, _default$o as textarea, _default$i as toggle, _default$5 as tooltip, _default$c as verticalNavigation };
+  export { _default$x as accordion, _default$w as alert, _default$E as avatar, _default$D as avatarGroup, _default$C as badge, _default$8 as breadcrumb, _default$B as button, _default$A as buttonGroup, _default$g as card, _default$j as checkbox, _default$z as chip, _default$b as commandPalette, _default$f as container, _default$3 as contextMenu, _default$d as divider, _default$y as dropdown, _default$p as formGroup, _default$r as input, _default$q as inputMenu, _default$v as kbd, _default$t as meter, _default$s as meterGroup, _default$7 as modal, _default$2 as notification, _default$1 as notifications, _default$a as pagination, _default$4 as popover, _default$u as progress, _default$k as radio, _default$l as radioGroup, _default$h as range, _default$n as select, _default$m as selectMenu, _default$e as skeleton, _default$6 as slideover, _default$F as table, _default$9 as tabs, _default$o as textarea, _default$i as toggle, _default$5 as tooltip, _default$c as verticalNavigation };
 }
 
 type Strategy = 'merge' | 'override'

package/dist/module.d.ts

@@ -1,7 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { CollectionNames, IconsPluginOptions } from '@egoist/tailwindcss-icons';
 
-declare const _default$E: {
+declare const _default$F: {
     wrapper: string;
     base: string;
     divide: string;
@@ -61,7 +61,7 @@ declare const _default$E: {
     };
 };
 
-declare const _default$D: {
+declare const _default$E: {
     wrapper: string;
     background: string;
     rounded: string;
@@ -121,13 +121,13 @@ declare const _default$D: {
     };
 };
 
-declare const _default$C: {
+declare const _default$D: {
     wrapper: string;
     ring: string;
     margin: string;
 };
 
-declare const _default$B: {
+declare const _default$C: {
     base: string;
     rounded: string;
     font: string;
@@ -161,7 +161,7 @@ declare const _default$B: {
     };
 };
 
-declare const _default$A: {
+declare const _default$B: {
     base: string;
     font: string;
     rounded: string;
@@ -242,7 +242,7 @@ declare const _default$A: {
     };
 };
 
-declare const _default$z: {
+declare const _default$A: {
     wrapper: {
         horizontal: string;
         vertical: string;
@@ -343,7 +343,7 @@ declare const _default$z: {
     };
 };
 
-declare const _default$y: {
+declare const _default$z: {
     wrapper: string;
     base: string;
     background: string;
@@ -378,7 +378,7 @@ declare const _default$y: {
     };
 };
 
-declare const _default$x: {
+declare const _default$y: {
     wrapper: string;
     container: string;
     trigger: string;
@@ -433,7 +433,7 @@ declare const _default$x: {
     };
 };
 
-declare const _default$w: {
+declare const _default$x: {
     wrapper: string;
     item: {
         base: string;
@@ -454,7 +454,7 @@ declare const _default$w: {
     };
 };
 
-declare const _default$v: {
+declare const _default$w: {
     wrapper: string;
     inner: string;
     title: string;
@@ -495,7 +495,7 @@ declare const _default$v: {
     };
 };
 
-declare const _default$u: {
+declare const _default$v: {
     base: string;
     padding: string;
     size: {
@@ -512,7 +512,7 @@ declare const _default$u: {
     };
 };
 
-declare const _default$t: {
+declare const _default$u: {
     wrapper: string;
     indicator: {
         container: {
@@ -587,7 +587,7 @@ declare const _default$t: {
     };
 };
 
-declare const _default$s: {
+declare const _default$t: {
     wrapper: string;
     indicator: {
         container: string;
@@ -664,7 +664,7 @@ declare const _default$s: {
     };
 };
 
-declare const _default$r: {
+declare const _default$s: {
     wrapper: string;
     base: string;
     background: string;
@@ -716,7 +716,7 @@ declare const _default$r: {
     };
 };
 
-declare const _default$q: {
+declare const _default$r: {
     wrapper: string;
     base: string;
     form: string;
@@ -823,6 +823,70 @@ declare const _default$q: {
     };
 };
 
+declare const _default$q: {
+    container: string;
+    trigger: string;
+    width: string;
+    height: string;
+    base: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    ring: string;
+    empty: string;
+    option: {
+        base: string;
+        rounded: string;
+        padding: string;
+        size: string;
+        color: string;
+        container: string;
+        active: string;
+        inactive: string;
+        selected: string;
+        disabled: string;
+        empty: string;
+        icon: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        selectedIcon: {
+            wrapper: string;
+            padding: string;
+            base: string;
+        };
+        avatar: {
+            base: string;
+            size: "3xs";
+        };
+        chip: {
+            base: string;
+        };
+    };
+    transition: {
+        leaveActiveClass: string;
+        leaveFromClass: string;
+        leaveToClass: string;
+    };
+    popper: {
+        placement: string;
+    };
+    default: {
+        selectedIcon: string;
+        trailingIcon: string;
+    };
+    arrow: {
+        ring: string;
+        background: string;
+        base: string;
+        rounded: string;
+        shadow: string;
+        placement: string;
+    };
+};
+
 declare const _default$p: {
     wrapper: string;
     label: {
@@ -1063,21 +1127,12 @@ declare const _default$n: {
 };
 
 declare const _default$m: {
-    container: string;
-    trigger: string;
     select: string;
-    width: string;
-    height: string;
-    base: string;
-    background: string;
-    shadow: string;
-    rounded: string;
-    padding: string;
-    ring: string;
     input: string;
     required: string;
     label: string;
     option: {
+        create: string;
         base: string;
         rounded: string;
         padding: string;
@@ -1089,7 +1144,6 @@ declare const _default$m: {
         selected: string;
         disabled: string;
         empty: string;
-        create: string;
         icon: {
             base: string;
             active: string;
@@ -1118,7 +1172,8 @@ declare const _default$m: {
     };
     default: {
         selectedIcon: string;
-        clearOnClose: boolean;
+        clearSearchOnClose: boolean;
+        showCreateOptionWhen: string;
     };
     arrow: {
         ring: string;
@@ -1128,6 +1183,17 @@ declare const _default$m: {
         shadow: string;
         placement: string;
     };
+    container: string;
+    trigger: string;
+    width: string;
+    height: string;
+    base: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    ring: string;
+    empty: string;
 };
 
 declare const _default$l: {
@@ -1397,6 +1463,11 @@ declare const _default$c: {
         active: string;
         inactive: string;
     };
+    divider: {
+        wrapper: {
+            base: string;
+        };
+    };
 };
 
 declare const _default$b: {
@@ -1545,6 +1616,7 @@ declare const _default$8: {
     ol: string;
     li: string;
     base: string;
+    label: string;
     icon: {
         base: string;
         active: string;
@@ -1793,7 +1865,7 @@ declare const _default$1: {
 };
 
 declare namespace config {
-  export { _default$w as accordion, _default$v as alert, _default$D as avatar, _default$C as avatarGroup, _default$B as badge, _default$8 as breadcrumb, _default$A as button, _default$z as buttonGroup, _default$g as card, _default$j as checkbox, _default$y as chip, _default$b as commandPalette, _default$f as container, _default$3 as contextMenu, _default$d as divider, _default$x as dropdown, _default$p as formGroup, _default$q as input, _default$u as kbd, _default$s as meter, _default$r as meterGroup, _default$7 as modal, _default$2 as notification, _default$1 as notifications, _default$a as pagination, _default$4 as popover, _default$t as progress, _default$k as radio, _default$l as radioGroup, _default$h as range, _default$n as select, _default$m as selectMenu, _default$e as skeleton, _default$6 as slideover, _default$E as table, _default$9 as tabs, _default$o as textarea, _default$i as toggle, _default$5 as tooltip, _default$c as verticalNavigation };
+  export { _default$x as accordion, _default$w as alert, _default$E as avatar, _default$D as avatarGroup, _default$C as badge, _default$8 as breadcrumb, _default$B as button, _default$A as buttonGroup, _default$g as card, _default$j as checkbox, _default$z as chip, _default$b as commandPalette, _default$f as container, _default$3 as contextMenu, _default$d as divider, _default$y as dropdown, _default$p as formGroup, _default$r as input, _default$q as inputMenu, _default$v as kbd, _default$t as meter, _default$s as meterGroup, _default$7 as modal, _default$2 as notification, _default$1 as notifications, _default$a as pagination, _default$4 as popover, _default$u as progress, _default$k as radio, _default$l as radioGroup, _default$h as range, _default$n as select, _default$m as selectMenu, _default$e as skeleton, _default$6 as slideover, _default$F as table, _default$9 as tabs, _default$o as textarea, _default$i as toggle, _default$5 as tooltip, _default$c as verticalNavigation };
 }
 
 type Strategy = 'merge' | 'override'

package/dist/module.json

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

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.1";
+const version = "2.12.0";
 
 function omit(object, keysToOmit) {
   const result = { ...object };
@@ -376,7 +376,7 @@ 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) || 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

@@ -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
@@ -149,25 +164,19 @@ export default defineComponent({
   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 {