@nuxt/ui 2.18.6 → 2.19.0

package/dist/module.d.mts

@@ -8,7 +8,7 @@ type UI = {
     colors?: string[];
     strategy?: Strategy;
     [key: string]: any;
-} & DeepPartial<typeof config, string>;
+} & DeepPartial<typeof config, string | number | boolean>;
 declare module '@nuxt/schema' {
     interface AppConfigInput {
         ui?: UI;

package/dist/module.d.ts

@@ -8,7 +8,7 @@ type UI = {
     colors?: string[];
     strategy?: Strategy;
     [key: string]: any;
-} & DeepPartial<typeof config, string>;
+} & DeepPartial<typeof config, string | number | boolean>;
 declare module '@nuxt/schema' {
     interface AppConfigInput {
         ui?: UI;

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.18.6",
+  "version": "2.19.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.18.6";
+const version = "2.19.0";
 
 function createTemplates(nuxt = useNuxt()) {
   const template = addTemplate({
@@ -33,7 +33,7 @@ function createTemplates(nuxt = useNuxt()) {
   });
 }
 
-async function installTailwind(moduleOptions, nuxt = useNuxt(), resolve = createResolver(import.meta.url).resolve) {
+function installTailwind(moduleOptions, nuxt = useNuxt(), resolve = createResolver(import.meta.url).resolve) {
   const runtimeDir = resolve("./runtime");
   nuxt.hook("tailwindcss:config", function(tailwindConfig) {
     tailwindConfig.theme = tailwindConfig.theme || {};
@@ -97,7 +97,7 @@ async function installTailwind(moduleOptions, nuxt = useNuxt(), resolve = create
   } else {
     twConfigPaths.push(...userTwConfigPath);
   }
-  await installModule("@nuxtjs/tailwindcss", defu({
+  return installModule("@nuxtjs/tailwindcss", defu({
     exposeConfig: true,
     config: {
       darkMode: "class"

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

@@ -9,10 +9,16 @@
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
           <th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
-            <UCheckbox :model-value="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" v-bind="ui.default.checkbox" aria-label="Select all" @change="onChange" />
+            <UCheckbox
+              :model-value="isAllRowChecked"
+              :indeterminate="indeterminate"
+              v-bind="ui.default.checkbox"
+              aria-label="Select all"
+              @change="onChange"
+            />
           </th>
 
-          <th v-if="$slots.expand" scope="col" :class="ui.tr.base">
+          <th v-if="expand" scope="col" :class="ui.tr.base">
             <span class="sr-only">Expand</span>
           </th>
 
@@ -44,7 +50,7 @@
       </thead>
       <tbody :class="ui.tbody">
         <tr v-if="loadingState && loading && !rows.length">
-          <td :colspan="columns.length + (modelValue ? 1 : 0) + ($slots.expand ? 1 : 0)">
+          <td :colspan="columns.length + (modelValue ? 1 : 0) + (expand ? 1 : 0)">
             <slot name="loading-state">
               <div :class="ui.loadingState.wrapper">
                 <UIcon v-if="loadingState.icon" :name="loadingState.icon" :class="ui.loadingState.icon" aria-hidden="true" />
@@ -57,7 +63,7 @@
         </tr>
 
         <tr v-else-if="emptyState && !rows.length">
-          <td :colspan="columns.length + (modelValue ? 1 : 0) + ($slots.expand ? 1 : 0)">
+          <td :colspan="columns.length + (modelValue ? 1 : 0) + (expand ? 1 : 0)">
             <slot name="empty-state">
               <div :class="ui.emptyState.wrapper">
                 <UIcon v-if="emptyState.icon" :name="emptyState.icon" :class="ui.emptyState.icon" aria-hidden="true" />
@@ -71,29 +77,38 @@
 
         <template v-else>
           <template v-for="(row, index) in rows" :key="index">
-            <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)">
+            <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 v-model="selected" :value="row" v-bind="ui.default.checkbox" aria-label="Select row" @click.capture.stop="() => onSelect(row)" />
+                <UCheckbox
+                  :model-value="isSelected(row)"
+                  v-bind="ui.default.checkbox"
+                  aria-label="Select row"
+                  @change="onChangeCheckbox($event, row)"
+                  @click.capture.stop="() => onSelect(row)"
+                />
               </td>
-
               <td
-                v-if="$slots.expand"
+                v-if="expand"
                 :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]"
               >
+                <template v-if="$slots['expand-action']">
+                  <slot name="expand-action" :row="row" :is-expanded="isExpanded(row)" :toggle="() => toggleOpened(row)" />
+                </template>
                 <UButton
+                  v-else
+                  :disabled="row.disabledExpand"
                   v-bind="{ ...(ui.default.expandButton || {}), ...expandButton }"
-                  :ui="{ icon: { base: [ui.expand.icon, openedRows.includes(index) && 'rotate-180'].join(' ') } }"
-                  @click="toggleOpened(index)"
+                  :ui="{ icon: { base: [ui.expand.icon, isExpanded(row) && 'rotate-180'].join(' ') } }"
+                  @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)">
                   {{ getRowData(row, column.key) }}
                 </slot>
               </td>
             </tr>
-            <tr v-if="openedRows.includes(index)">
+            <tr v-if="isExpanded(row)">
               <td colspan="100%">
                 <slot
                   name="expand"
@@ -110,7 +125,7 @@
 </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";
@@ -124,7 +139,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 a === z;
+  return JSON.stringify(a) === JSON.stringify(z);
 }
 function defaultSort(a, b, direction) {
   if (a === b) {
@@ -189,6 +204,10 @@ export default defineComponent({
       type: Object,
       default: () => config.default.expandButton
     },
+    expand: {
+      type: Object,
+      default: () => null
+    },
     loading: {
       type: Boolean,
       default: false
@@ -216,14 +235,24 @@ export default defineComponent({
     ui: {
       type: Object,
       default: () => ({})
+    },
+    multipleExpand: {
+      type: Boolean,
+      default: true
     }
   },
-  emits: ["update:modelValue", "update:sort"],
+  emits: ["update:modelValue", "update:sort", "update:expand"],
   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 })));
     const sort = useVModel(props, "sort", emit, { passive: true, defaultValue: defu({}, props.sort, { column: null, direction: "asc" }) });
-    const openedRows = ref([]);
+    const expand = useVModel(props, "expand", emit, {
+      passive: true,
+      defaultValue: defu({}, props.expand, {
+        openedRows: [],
+        row: null
+      })
+    });
     const savedSort = { column: sort.value.column, direction: null };
     const rows = computed(() => {
       if (!sort.value?.column || props.sortMode === "manual") {
@@ -245,7 +274,18 @@ export default defineComponent({
         emit("update:modelValue", value);
       }
     });
-    const indeterminate = computed(() => selected.value && selected.value.length > 0 && selected.value.length < props.rows.length);
+    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);
+      const rowsData = getStringifiedSet(props.rows);
+      return Array.from(selectedData).filter((item) => rowsData.has(item)).length;
+    });
+    const indeterminate = computed(() => {
+      if (!selected.value || !props.rows) return false;
+      return countCheckedRow.value > 0 && countCheckedRow.value < totalRows.value;
+    });
+    const isAllRowChecked = computed(() => countCheckedRow.value === totalRows.value);
     const emptyState = computed(() => {
       if (props.emptyState === null) return null;
       return { ...ui.value.default.emptyState, ...props.emptyState };
@@ -256,11 +296,14 @@ export default defineComponent({
     });
     function compare(a, z) {
       if (typeof props.by === "string") {
-        const property = props.by;
-        return a?.[property] === z?.[property];
+        const accesorFn = accessor(props.by);
+        return accesorFn(a) === accesorFn(z);
       }
       return props.by(a, z);
     }
+    function accessor(key) {
+      return (obj) => get(obj, key);
+    }
     function isSelected(row) {
       if (!props.modelValue) {
         return false;
@@ -301,15 +344,25 @@ export default defineComponent({
         selected.value = [];
       }
     }
+    function onChangeCheckbox(checked, row) {
+      if (checked) {
+        selected.value.push(row);
+      } else {
+        const index = selected.value.findIndex((item) => compare(item, row));
+        selected.value.splice(index, 1);
+      }
+    }
     function getRowData(row, rowKey, defaultValue = "") {
       return get(row, rowKey, defaultValue);
     }
-    function toggleOpened(index) {
-      if (openedRows.value.includes(index)) {
-        openedRows.value = openedRows.value.filter((i) => i !== index);
-      } else {
-        openedRows.value.push(index);
-      }
+    function isExpanded(row) {
+      return expand.value?.openedRows ? expand.value.openedRows.some((openedRow) => compare(openedRow, row)) : false;
+    }
+    function toggleOpened(row) {
+      expand.value = {
+        openedRows: isExpanded(row) ? expand.value.openedRows.filter((v) => !compare(v, row)) : props.multipleExpand ? [...expand.value.openedRows, row] : [row],
+        row
+      };
     }
     function getAriaSort(column) {
       if (!column.sortable) {
@@ -342,14 +395,16 @@ export default defineComponent({
       emptyState,
       // eslint-disable-next-line vue/no-dupe-keys
       loadingState,
-      openedRows,
+      isAllRowChecked,
+      onChangeCheckbox,
       isSelected,
       onSort,
       onSelect,
       onChange,
       getRowData,
       toggleOpened,
-      getAriaSort
+      getAriaSort,
+      isExpanded
     };
   }
 });

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

@@ -1,5 +1,5 @@
 import type { PropType, AriaAttributes } from 'vue';
-import type { Strategy, Button, ProgressColor, ProgressAnimation, DeepPartial } from '../../types/index.js';
+import type { TableRow, TableColumn, Strategy, Button, ProgressColor, ProgressAnimation, DeepPartial, Expanded } from '../../types/index.js';
 declare const config: {
     wrapper: string;
     base: string;
@@ -10,6 +10,7 @@ declare const config: {
     tr: {
         base: string;
         selected: string;
+        expanded: string;
         active: string;
     };
     th: {
@@ -81,15 +82,6 @@ declare const config: {
     };
 };
 declare function defaultComparator<T>(a: T, z: T): boolean;
-interface Column {
-    key: string;
-    sortable?: boolean;
-    sort?: (a: any, b: any, direction: 'asc' | 'desc') => number;
-    direction?: 'asc' | 'desc';
-    class?: string;
-    rowClass?: string;
-    [key: string]: any;
-}
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ArrayConstructor;
@@ -100,13 +92,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => typeof defaultComparator;
     };
     rows: {
-        type: PropType<{
-            [key: string]: any;
-        }[]>;
+        type: PropType<TableRow[]>;
         default: () => any[];
     };
     columns: {
-        type: PropType<Column[]>;
+        type: PropType<TableColumn[]>;
         default: any;
     };
     columnAttribute: {
@@ -140,6 +130,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<Button>;
         default: () => Button;
     };
+    expand: {
+        type: PropType<Expanded<TableRow>>;
+        default: () => any;
+    };
     loading: {
         type: BooleanConstructor;
         default: boolean;
@@ -188,6 +182,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }>;
         default: () => {};
     };
+    multipleExpand: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     ui: import("vue").ComputedRef<{
         wrapper: string;
@@ -199,6 +197,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         tr: {
             base: string;
             selected: string;
+            expanded: string;
             active: string;
         };
         th: {
@@ -279,10 +278,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         column: string;
         direction: "asc" | "desc";
     }>;
-    columns: import("vue").ComputedRef<Column[]>;
-    rows: import("vue").ComputedRef<{
-        [key: string]: any;
-    }[]>;
+    columns: import("vue").ComputedRef<TableColumn[]>;
+    rows: import("vue").ComputedRef<TableRow[]>;
     selected: import("vue").WritableComputedRef<unknown[], unknown[]>;
     indeterminate: import("vue").ComputedRef<boolean>;
     emptyState: import("vue").ComputedRef<{
@@ -293,18 +290,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         icon: string;
         label: string;
     }>;
-    openedRows: import("vue").Ref<any[], any[]>;
-    isSelected: (row: any) => boolean;
+    isAllRowChecked: import("vue").ComputedRef<boolean>;
+    onChangeCheckbox: (checked: boolean, row: TableRow) => void;
+    isSelected: (row: TableRow) => boolean;
     onSort: (column: {
         key: string;
         direction?: "asc" | "desc";
     }) => void;
-    onSelect: (row: any) => void;
+    onSelect: (row: TableRow) => void;
     onChange: (checked: boolean) => void;
-    getRowData: (row: Object, rowKey: string | string[], defaultValue?: any) => any;
-    toggleOpened: (index: number) => void;
-    getAriaSort: (column: Column) => AriaAttributes["aria-sort"];
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:sort")[], "update:modelValue" | "update:sort", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    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<{
     modelValue: {
         type: ArrayConstructor;
         default: any;
@@ -314,13 +313,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => typeof defaultComparator;
     };
     rows: {
-        type: PropType<{
-            [key: string]: any;
-        }[]>;
+        type: PropType<TableRow[]>;
         default: () => any[];
     };
     columns: {
-        type: PropType<Column[]>;
+        type: PropType<TableColumn[]>;
         default: any;
     };
     columnAttribute: {
@@ -354,6 +351,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<Button>;
         default: () => Button;
     };
+    expand: {
+        type: PropType<Expanded<TableRow>>;
+        default: () => any;
+    };
     loading: {
         type: BooleanConstructor;
         default: boolean;
@@ -402,9 +403,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }>;
         default: () => {};
     };
+    multipleExpand: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: (...args: any[]) => any;
     "onUpdate:sort"?: (...args: any[]) => any;
+    "onUpdate:expand"?: (...args: any[]) => any;
 }>, {
     sort: {
         column: string;
@@ -412,7 +418,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     class: any;
     caption: string;
-    columns: Column[];
+    columns: TableColumn[];
     progress: {
         color: ProgressColor;
         animation: ProgressAnimation;
@@ -427,6 +433,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         tr?: DeepPartial<{
             base: string;
             selected: string;
+            expanded: string;
             active: string;
         }, any>;
         th?: DeepPartial<{
@@ -511,16 +518,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         icon: string;
         label: string;
     };
+    expand: Expanded<TableRow>;
     by: string | Function;
-    rows: {
-        [key: string]: any;
-    }[];
+    rows: TableRow[];
     columnAttribute: string;
     sortMode: "auto" | "manual";
     sortButton: Button;
     sortAscIcon: string;
     sortDescIcon: string;
     expandButton: Button;
+    multipleExpand: boolean;
 }, {}, {
     UIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         name: {
@@ -1935,7 +1942,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: any;
         };
         modelValue: {
-            type: (BooleanConstructor | ArrayConstructor)[];
+            type: PropType<boolean | Array<any> | null>;
             default: any;
         };
         name: {
@@ -2020,7 +2027,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         attrs: import("vue").ComputedRef<Pick<{
             [x: string]: unknown;
         }, string>>;
-        toggle: import("vue").WritableComputedRef<boolean | unknown[], boolean | unknown[]>;
+        toggle: import("vue").WritableComputedRef<boolean | any[], boolean | any[]>;
         inputId: string;
         name: import("vue").ComputedRef<string>;
         inputClass: import("vue").ComputedRef<string>;
@@ -2035,7 +2042,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: any;
         };
         modelValue: {
-            type: (BooleanConstructor | ArrayConstructor)[];
+            type: PropType<boolean | Array<any> | null>;
             default: any;
         };
         name: {
@@ -2131,7 +2138,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             strategy?: Strategy;
         };
         id: string;
-        modelValue: boolean | unknown[];
+        modelValue: boolean | any[];
         value: string | number | boolean | Record<string, any>;
         help: string;
         indeterminate: boolean;
@@ -2369,6 +2376,10 @@ declare global {
     type __VLS_PrettifyGlobal<T> = {
         [K in keyof T]: T[K];
     } & {};
+    type __VLS_PickFunctionalComponentCtx<T, K> = NonNullable<__VLS_PickNotAny<'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends {
+        __ctx?: infer Ctx;
+    } ? Ctx : never : any, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any>>;
+    type __VLS_UseTemplateRef<T> = Readonly<import('vue').ShallowRef<T | null>>;
     function __VLS_getVForSourceType(source: number): [number, number, number][];
     function __VLS_getVForSourceType(source: string): [string, number, number][];
     function __VLS_getVForSourceType<T extends any[]>(source: T): [
@@ -2401,7 +2412,7 @@ declare global {
     ][];
     function __VLS_getSlotParams<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>;
     function __VLS_getSlotParam<T>(slot: T): Parameters<__VLS_PickNotAny<NonNullable<T>, (...args: any[]) => any>>[0];
-    function __VLS_directiveAsFunction<T extends import('vue').Directive>(dir: T): T extends (...args: any) => any ? T | __VLS_unknownDirective : NonNullable<(T & Record<string, __VLS_unknownDirective>)['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']>;
+    function __VLS_asFunctionalDirective<T>(dir: T): T extends import('vue').ObjectDirective ? NonNullable<T['created' | 'beforeMount' | 'mounted' | 'beforeUpdate' | 'updated' | 'beforeUnmount' | 'unmounted']> : T extends (...args: any) => any ? T : __VLS_unknownDirective;
     function __VLS_withScope<T, K>(ctx: T, scope: K): ctx is T & K;
     function __VLS_makeOptional<T>(t: T): {
         [K in keyof T]?: T[K];
@@ -2435,9 +2446,6 @@ declare global {
     };
     function __VLS_elementAsFunction<T>(tag: T, endTag?: T): (_: T & Record<string, unknown>) => void;
     function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
-    function __VLS_pickFunctionalComponentCtx<T, K>(comp: T, compInstance: K): NonNullable<__VLS_PickNotAny<'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends {
-        __ctx?: infer Ctx;
-    } ? Ctx : never : any, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any>>;
     function __VLS_normalizeSlot<S>(s: S): S extends () => infer R ? (props: {}) => R : S;
     function __VLS_tryAsConstant<const T>(t: T): T;
 }

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

@@ -181,10 +181,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onClose?: (...args: any[]) => any;
 }>, {
     class: any;
+    title: string;
     avatar: Avatar;
     color: AlertColor;
     variant: AlertVariant;
-    title: string;
     ui: {
         wrapper?: string;
         inner?: string;

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

@@ -1,8 +1,8 @@
 import { h, cloneVNode, computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
-import UAvatar from "./Avatar.vue";
 import { useUI } from "../../composables/useUI.js";
 import { mergeConfig, getSlotsChildren } from "../../utils/index.js";
+import UAvatar from "./Avatar.vue";
 import appConfig from "#build/app.config";
 import { avatar, avatarGroup } from "#ui/ui.config";
 const avatarConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.avatar, avatar);
@@ -33,7 +33,7 @@ export default defineComponent({
   setup(props, { slots }) {
     const { ui, attrs } = useUI("avatarGroup", toRef(props, "ui"), avatarGroupConfig, toRef(props, "class"));
     const children = computed(() => getSlotsChildren(slots));
-    const max = computed(() => typeof props.max === "string" ? parseInt(props.max, 10) : props.max);
+    const max = computed(() => typeof props.max === "string" ? Number.parseInt(props.max, 10) : props.max);
     const clones = computed(() => children.value.map((node, index) => {
       const vProps = {};
       if (!props.max || max.value && index < max.value) {

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

@@ -1,5 +1,5 @@
 <template>
-  <div :class="ui.wrapper" v-bind="attrs">
+  <div :class="ui.wrapper" v-bind="attrs" :dir="dir">
     <div ref="carouselRef" :class="ui.container" class="no-scrollbar">
       <div
         v-for="(item, index) in items"
@@ -58,11 +58,11 @@
 <script>
 import { ref, toRef, computed, defineComponent } from "vue";
 import { twMerge } from "tailwind-merge";
+import { useScroll, useResizeObserver, useElementSize } from "@vueuse/core";
 import { mergeConfig } from "../../utils";
 import UButton from "../elements/Button.vue";
 import { useUI } from "../../composables/useUI";
 import { useCarouselScroll } from "../../composables/useCarouselScroll";
-import { useScroll, useResizeObserver, useElementSize } from "@vueuse/core";
 import appConfig from "#build/app.config";
 import { carousel } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.carousel, carousel);
@@ -84,6 +84,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    dir: {
+      type: String,
+      default: "ltr"
+    },
     prevButton: {
       type: Object,
       default: () => config.default.prevButton
@@ -112,28 +116,33 @@ export default defineComponent({
       const [entry] = entries;
       itemWidth.value = entry?.target?.firstElementChild?.clientWidth || 0;
     });
+    const isRtl = computed(() => props.dir === "rtl");
     const currentPage = computed(() => {
       if (!itemWidth.value) {
         return 0;
       }
-      return Math.round(x.value / itemWidth.value) + 1;
+      return isRtl.value ? Math.round(-x.value / itemWidth.value) + 1 : Math.round(x.value / itemWidth.value) + 1;
     });
     const pages = computed(() => {
       if (!itemWidth.value) {
         return 0;
       }
-      return props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1;
+      const itemDivisions = Math.round(carouselWidth.value / itemWidth.value);
+      if (props.items.length <= itemDivisions) {
+        return 0;
+      }
+      return props.items.length - itemDivisions + 1;
     });
     const isFirst = computed(() => currentPage.value <= 1);
     const isLast = computed(() => currentPage.value === pages.value);
     function onClickNext() {
-      x.value += itemWidth.value;
+      x.value += isRtl.value ? -itemWidth.value : itemWidth.value;
     }
     function onClickPrev() {
-      x.value -= itemWidth.value;
+      x.value -= isRtl.value ? -itemWidth.value : itemWidth.value;
     }
     function onClick(page) {
-      x.value = (page - 1) * itemWidth.value;
+      x.value = (page - 1) * itemWidth.value * (isRtl.value ? -1 : 1);
     }
     expose({
       pages,

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

@@ -39,6 +39,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    dir: {
+        type: PropType<"ltr" | "rtl">;
+        default: string;
+    };
     prevButton: {
         type: PropType<Button & {
             class?: string;
@@ -117,6 +121,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    dir: {
+        type: PropType<"ltr" | "rtl">;
+        default: string;
+    };
     prevButton: {
         type: PropType<Button & {
             class?: string;
@@ -176,6 +184,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     items: any[];
     arrows: boolean;
     indicators: boolean;
+    dir: "ltr" | "rtl";
     prevButton: Button & {
         class?: string;
     };