@nuxt/ui 2.19.1 → 2.20.0

package/README.md

@@ -1,4 +1,4 @@
-[![nuxt-ui.png](https://repository-images.githubusercontent.com/428329515/43fec891-9030-4601-8233-5d45ba5c6013)](https://ui.nuxt.com)
+[![nuxt-ui.png](https://volta.s3.fr-par.scw.cloud/nuxt_ui_social_card_531d133fa2.png)](https://ui.nuxt.com)
 
 # Nuxt UI
 
@@ -20,7 +20,7 @@ Its goal is to provide everything related to UI when building a Nuxt app. This i
 - Keyboard shortcuts
 - Bundled icons
 - Fully typed
-- [Figma Kit](https://www.figma.com/community/file/1288455405058138934)
+- [Figma Kit](https://www.figma.com/community/file/1436401057300493073)
 
 Read more on [ui.nuxt.com](https://ui.nuxt.com)
 

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.19.1",
+  "version": "2.20.0",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=3.10.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.19.1";
+const version = "2.20.0";
 
 function createTemplates(nuxt = useNuxt()) {
   const template = addTemplate({

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

@@ -8,28 +8,27 @@
       </slot>
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
-          <th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
-            <UCheckbox
-              :model-value="isAllRowChecked"
-              :indeterminate="indeterminate"
-              v-bind="ui.default.checkbox"
-              aria-label="Select all"
-              @change="onChange"
-            />
-          </th>
-
           <th v-if="expand" scope="col" :class="ui.tr.base">
             <span class="sr-only">Expand</span>
           </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]"
+            :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.key === 'select' && ui.checkbox.padding, column.class]"
             :aria-sort="getAriaSort(column)"
           >
-            <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
+            <slot v-if="!singleSelect && modelValue && (column.key === 'select' || shouldRenderColumnInFirstPlace(index, 'select'))" name="select-header" :indeterminate="indeterminate" :checked="isAllRowChecked" :change="onChange">
+              <UCheckbox
+                :model-value="isAllRowChecked"
+                :indeterminate="indeterminate"
+                v-bind="ui.default.checkbox"
+                aria-label="Select all"
+                @change="onChange"
+              />
+            </slot>
+
+            <slot v-else :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
               <UButton
                 v-if="column.sortable"
                 v-bind="{ ...(ui.default.sortButton || {}), ...sortButton }"
@@ -77,16 +76,7 @@
 
         <template v-else>
           <template v-for="(row, index) in rows" :key="index">
-            <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, isExpanded(row) && ui.tr.expanded, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)">
-              <td v-if="modelValue" :class="ui.checkbox.padding">
-                <UCheckbox
-                  :model-value="isSelected(row)"
-                  v-bind="ui.default.checkbox"
-                  aria-label="Select row"
-                  @change="onChangeCheckbox($event, row)"
-                  @click.capture.stop="() => onSelect(row)"
-                />
-              </td>
+            <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, isExpanded(row) && ui.tr.expanded, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)" @contextmenu="(event) => onContextmenu(event, row)">
               <td
                 v-if="expand"
                 :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]"
@@ -102,8 +92,26 @@
                   @click.capture.stop="toggleOpened(row)"
                 />
               </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, column?.rowClass, row[column.key]?.class]">
-                <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
+              <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, column?.rowClass, row[column.key]?.class, column.key === 'select' && ui.checkbox.padding]">
+                <slot v-if="modelValue && (column.key === 'select' || shouldRenderColumnInFirstPlace(subIndex, 'select')) " name="select-data" :checked="isSelected(row)" :change="(ev: boolean) => onChangeCheckbox(ev, row)">
+                  <UCheckbox
+                    :model-value="isSelected(row)"
+                    v-bind="ui.default.checkbox"
+                    aria-label="Select row"
+                    @change="onChangeCheckbox($event, row)"
+                    @click.capture.stop="() => onSelect(row)"
+                  />
+                </slot>
+
+                <slot
+                  v-else
+                  :key="retriggerSlot"
+                  :name="`${column.key}-data`"
+                  :column="column"
+                  :row="row"
+                  :index="index"
+                  :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)"
+                >
                   {{ getRowData(row, column.key) }}
                 </slot>
               </td>
@@ -125,10 +133,11 @@
 </template>
 
 <script>
-import { computed, defineComponent, toRaw, toRef } from "vue";
+import { computed, defineComponent, ref, toRaw, toRef, watch } from "vue";
 import { upperFirst } from "scule";
 import { defu } from "defu";
 import { useVModel } from "@vueuse/core";
+import { isEqual } from "ohash";
 import UIcon from "../elements/Icon.vue";
 import UButton from "../elements/Button.vue";
 import UProgress from "../elements/Progress.vue";
@@ -139,7 +148,7 @@ 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 JSON.stringify(a) === JSON.stringify(z);
+  return isEqual(a, z);
 }
 function defaultSort(a, b, direction) {
   if (a === b) {
@@ -151,6 +160,12 @@ function defaultSort(a, b, direction) {
     return a > b ? -1 : 1;
   }
 }
+function getStringifiedSet(arr) {
+  return new Set(arr.map((item) => JSON.stringify(item)));
+}
+function accessor(key) {
+  return (obj) => get(obj, key);
+}
 export default defineComponent({
   components: {
     UIcon,
@@ -239,9 +254,13 @@ export default defineComponent({
     multipleExpand: {
       type: Boolean,
       default: true
+    },
+    singleSelect: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ["update:modelValue", "update:sort", "update:expand"],
+  emits: ["update:modelValue", "update:sort", "update:expand", "select:all"],
   setup(props, { emit, attrs: $attrs }) {
     const { ui, attrs } = useUI("table", toRef(props, "ui"), config, toRef(props, "class"));
     const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: void 0, sort: defaultSort })));
@@ -253,6 +272,7 @@ export default defineComponent({
         row: null
       })
     });
+    const retriggerSlot = ref(null);
     const savedSort = { column: sort.value.column, direction: null };
     const rows = computed(() => {
       if (!sort.value?.column || props.sortMode === "manual") {
@@ -274,7 +294,6 @@ export default defineComponent({
         emit("update:modelValue", value);
       }
     });
-    const getStringifiedSet = (arr) => new Set(arr.map((item) => JSON.stringify(item)));
     const totalRows = computed(() => props.rows.length);
     const countCheckedRow = computed(() => {
       const selectedData = getStringifiedSet(selected.value);
@@ -301,9 +320,6 @@ export default defineComponent({
       }
       return props.by(a, z);
     }
-    function accessor(key) {
-      return (obj) => get(obj, key);
-    }
     function isSelected(row) {
       if (!props.modelValue) {
         return false;
@@ -323,11 +339,21 @@ export default defineComponent({
       }
     }
     function onSelect(row) {
+      const selection = window.getSelection();
+      if (selection && selection.toString().length > 0) {
+        return;
+      }
       if (!$attrs.onSelect) {
         return;
       }
       $attrs.onSelect(row);
     }
+    function onContextmenu(event, row) {
+      if (!$attrs.onContextmenu) {
+        return;
+      }
+      $attrs.onContextmenu(event, row);
+    }
     function selectAllRows() {
       const newSelected = [...selected.value];
       props.rows.forEach((row) => {
@@ -343,10 +369,11 @@ export default defineComponent({
       } else {
         selected.value = [];
       }
+      emit("select:all", checked);
     }
     function onChangeCheckbox(checked, row) {
       if (checked) {
-        selected.value.push(row);
+        selected.value = props.singleSelect ? [row] : [...selected.value, row];
       } else {
         const index = selected.value.findIndex((item) => compare(item, row));
         selected.value.splice(index, 1);
@@ -358,6 +385,12 @@ export default defineComponent({
     function isExpanded(row) {
       return expand.value?.openedRows ? expand.value.openedRows.some((openedRow) => compare(openedRow, row)) : false;
     }
+    function shouldRenderColumnInFirstPlace(index, key) {
+      if (!props.columns) {
+        return index === 0;
+      }
+      return index === 0 && !props.columns.find((col) => col.key === key);
+    }
     function toggleOpened(row) {
       expand.value = {
         openedRows: isExpanded(row) ? expand.value.openedRows.filter((v) => !compare(v, row)) : props.multipleExpand ? [...expand.value.openedRows, row] : [row],
@@ -379,6 +412,11 @@ export default defineComponent({
       }
       return void 0;
     }
+    watch(rows, () => {
+      retriggerSlot.value = /* @__PURE__ */ new Date();
+    }, {
+      deep: true
+    });
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -400,11 +438,14 @@ export default defineComponent({
       isSelected,
       onSort,
       onSelect,
+      onContextmenu,
       onChange,
       getRowData,
       toggleOpened,
       getAriaSort,
-      isExpanded
+      isExpanded,
+      shouldRenderColumnInFirstPlace,
+      retriggerSlot
     };
   }
 });

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

@@ -53,23 +53,23 @@ declare const config: {
             icon: string;
             trailing: boolean;
             square: boolean;
-            color: "gray";
-            variant: "ghost";
+            color: import("../../types/button").ButtonColor;
+            variant: import("../../types/button").ButtonVariant;
             class: string;
         };
         expandButton: {
             icon: string;
-            color: "gray";
-            variant: "ghost";
-            size: "xs";
+            color: import("../../types/button").ButtonColor;
+            variant: import("../../types/button").ButtonVariant;
+            size: import("../../types/button").ButtonSize;
             class: string;
         };
         checkbox: {
-            color: "primary";
+            color: import("../../types/checkbox").CheckboxColor;
         };
         progress: {
-            color: "primary";
-            animation: "carousel";
+            color: ProgressColor;
+            animation: ProgressAnimation;
         };
         loadingState: {
             icon: string;
@@ -142,7 +142,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<{
             icon: string;
             label: string;
-        }>;
+        } | null>;
         default: () => {
             icon: string;
             label: string;
@@ -168,8 +168,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             animation: ProgressAnimation;
         }>;
         default: () => {
-            color: "primary";
-            animation: "carousel";
+            color: ProgressColor;
+            animation: ProgressAnimation;
         };
     };
     class: {
@@ -186,6 +186,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    singleSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     ui: import("vue").ComputedRef<{
         wrapper: string;
@@ -240,23 +244,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 icon: string;
                 trailing: boolean;
                 square: boolean;
-                color: "gray";
-                variant: "ghost";
+                color: import("../../types/button").ButtonColor;
+                variant: import("../../types/button").ButtonVariant;
                 class: string;
             };
             expandButton: {
                 icon: string;
-                color: "gray";
-                variant: "ghost";
-                size: "xs";
+                color: import("../../types/button").ButtonColor;
+                variant: import("../../types/button").ButtonVariant;
+                size: import("../../types/button").ButtonSize;
                 class: string;
             };
             checkbox: {
-                color: "primary";
+                color: import("../../types/checkbox").CheckboxColor;
             };
             progress: {
-                color: "primary";
-                animation: "carousel";
+                color: ProgressColor;
+                animation: ProgressAnimation;
             };
             loadingState: {
                 icon: string;
@@ -298,12 +302,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         direction?: "asc" | "desc";
     }) => void;
     onSelect: (row: TableRow) => void;
+    onContextmenu: (event: any, row: any) => void;
     onChange: (checked: boolean) => void;
     getRowData: (row: TableRow, rowKey: string | string[], defaultValue?: any) => any;
     toggleOpened: (row: TableRow) => void;
     getAriaSort: (column: TableColumn) => AriaAttributes["aria-sort"];
     isExpanded: (row: TableRow) => boolean;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:sort" | "update:expand")[], "update:modelValue" | "update:sort" | "update:expand", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    shouldRenderColumnInFirstPlace: (index: number, key: string) => boolean;
+    retriggerSlot: import("vue").Ref<any, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:sort" | "update:expand" | "select:all")[], "update:modelValue" | "update:sort" | "update:expand" | "select:all", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ArrayConstructor;
         default: any;
@@ -363,7 +370,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<{
             icon: string;
             label: string;
-        }>;
+        } | null>;
         default: () => {
             icon: string;
             label: string;
@@ -389,8 +396,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             animation: ProgressAnimation;
         }>;
         default: () => {
-            color: "primary";
-            animation: "carousel";
+            color: ProgressColor;
+            animation: ProgressAnimation;
         };
     };
     class: {
@@ -407,22 +414,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    singleSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: (...args: any[]) => any;
     "onUpdate:sort"?: (...args: any[]) => any;
     "onUpdate:expand"?: (...args: any[]) => any;
+    "onSelect:all"?: (...args: any[]) => any;
 }>, {
     sort: {
         column: string;
         direction: "asc" | "desc";
     };
     class: any;
-    caption: string;
-    columns: TableColumn[];
-    progress: {
-        color: ProgressColor;
-        animation: ProgressAnimation;
-    };
     ui: {
         wrapper?: string;
         base?: string;
@@ -476,23 +482,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 icon: string;
                 trailing: boolean;
                 square: boolean;
-                color: "gray";
-                variant: "ghost";
+                color: import("../../types/button").ButtonColor;
+                variant: import("../../types/button").ButtonVariant;
                 class: string;
             };
             expandButton: {
                 icon: string;
-                color: "gray";
-                variant: "ghost";
-                size: "xs";
+                color: import("../../types/button").ButtonColor;
+                variant: import("../../types/button").ButtonVariant;
+                size: import("../../types/button").ButtonSize;
                 class: string;
             };
             checkbox: {
-                color: "primary";
+                color: import("../../types/checkbox").CheckboxColor;
             };
             progress: {
-                color: "primary";
-                animation: "carousel";
+                color: ProgressColor;
+                animation: ProgressAnimation;
             };
             loadingState: {
                 icon: string;
@@ -508,6 +514,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    caption: string;
+    columns: TableColumn[];
+    progress: {
+        color: ProgressColor;
+        animation: ProgressAnimation;
+    };
     modelValue: unknown[];
     loading: boolean;
     loadingState: {
@@ -528,6 +540,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     sortDescIcon: string;
     expandButton: Button;
     multipleExpand: boolean;
+    singleSelect: boolean;
 }, {}, {
     UIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         name: {
@@ -1125,23 +1138,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         class: any;
         to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
         disabled: boolean;
-        truncate: boolean;
-        target: "_blank" | "_parent" | "_self" | "_top" | (string & {});
-        activeClass: string;
-        exactActiveClass: string;
-        ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
-        replace: boolean;
-        noRel: boolean;
-        prefetch: boolean;
-        noPrefetch: boolean;
-        prefetchedClass: string;
-        external: boolean;
-        leading: boolean;
-        color: import("../../types/button").ButtonColor;
-        variant: import("../../types/button").ButtonVariant;
-        href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
-        rel: any;
-        label: string;
         ui: {
             base?: string;
             font?: string;
@@ -1226,6 +1222,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             strategy?: Strategy;
         };
+        color: import("../../types/button").ButtonColor;
+        variant: import("../../types/button").ButtonVariant;
+        truncate: boolean;
+        target: "_blank" | "_parent" | "_self" | "_top" | (string & {});
+        activeClass: string;
+        exactActiveClass: string;
+        ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
+        replace: boolean;
+        noRel: boolean;
+        prefetch: boolean;
+        noPrefetch: boolean;
+        prefetchedClass: string;
+        external: boolean;
+        leading: boolean;
+        href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+        rel: any;
+        label: string;
         icon: string;
         block: boolean;
         square: boolean;
@@ -1303,7 +1316,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             exactQuery: {
-                type: BooleanConstructor;
+                type: PropType<boolean | "partial">;
                 default: boolean;
             };
             exactHash: {
@@ -1406,7 +1419,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             exactQuery: {
-                type: BooleanConstructor;
+                type: PropType<boolean | "partial">;
                 default: boolean;
             };
             exactHash: {
@@ -1499,7 +1512,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             as: string;
             active: boolean;
             exact: boolean;
-            exactQuery: boolean;
+            exactQuery: boolean | "partial";
             exactHash: boolean;
             inactiveClass: string;
             href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
@@ -1846,11 +1859,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: () => {};
         };
     }>> & Readonly<{}>, {
-        size: "xs" | "sm" | "2xs" | "md" | "lg" | "xl" | "2xl";
+        size: "sm" | "xs" | "2xs" | "md" | "lg" | "xl" | "2xl";
         class: any;
         max: number | any[];
         animation: "carousel" | "carousel-inverse" | "swing" | "elastic";
-        color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
         ui: {
             wrapper?: string;
             indicator?: DeepPartial<{
@@ -1929,6 +1941,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             strategy?: Strategy;
         };
+        color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
         value: number;
         indicator: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -2113,8 +2126,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: boolean;
         class: any;
         disabled: boolean;
-        color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-        label: string;
         ui: {
             wrapper?: string;
             container?: string;
@@ -2137,6 +2148,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             strategy?: Strategy;
         };
+        color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+        label: string;
         id: string;
         modelValue: boolean | any[];
         value: string | number | boolean | Record<string, any>;

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

@@ -120,7 +120,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ["open"],
+  emits: ["open", "close"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("accordion", toRef(props, "ui"), config, toRef(props, "class"));
     const uiButton = computed(() => configButton);
@@ -132,6 +132,8 @@ export default defineComponent({
         const isOpenAfter = newValue[index];
         if (!isOpenBefore && isOpenAfter) {
           emit("open", index);
+        } else if (isOpenBefore && !isOpenAfter) {
+          emit("close", index);
         }
       }
     }, { immediate: true });