@nuxt/ui 2.9.0 → 2.10.0

package/dist/module.d.ts

@@ -283,6 +283,14 @@ declare const dropdown: {
         placement: string;
         strategy: string;
     };
+    arrow: {
+        ring: string;
+        background: string;
+        base: string;
+        rounded: string;
+        shadow: string;
+        placement: string;
+    };
 };
 declare const accordion: {
     wrapper: string;
@@ -357,6 +365,167 @@ declare const kbd: {
         size: string;
     };
 };
+declare const progress: {
+    wrapper: string;
+    indicator: {
+        container: {
+            base: string;
+            width: string;
+            transition: string;
+        };
+        align: string;
+        width: string;
+        color: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+    };
+    progress: {
+        base: string;
+        width: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+        rounded: string;
+        track: string;
+        bar: string;
+        color: string;
+        background: string;
+        indeterminate: {
+            base: string;
+            rounded: string;
+        };
+    };
+    steps: {
+        base: string;
+        color: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+    };
+    step: {
+        base: string;
+        align: string;
+        active: string;
+        first: string;
+    };
+    animation: {
+        carousel: string;
+        'carousel-inverse': string;
+        swing: string;
+        elastic: string;
+    };
+    default: {
+        color: string;
+        size: string;
+        animation: string;
+    };
+};
+declare const meter: {
+    wrapper: string;
+    indicator: {
+        container: string;
+        text: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+    };
+    meter: {
+        base: string;
+        background: string;
+        color: string;
+        ring: string;
+        rounded: string;
+        shadow: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+        appearance: {
+            inner: string;
+            meter: string;
+            bar: string;
+            value: string;
+        };
+        bar: {
+            transition: string;
+            ring: string;
+            rounded: string;
+            size: {
+                '2xs': string;
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+                '2xl': string;
+            };
+        };
+    };
+    label: {
+        base: string;
+        text: string;
+        color: string;
+        size: {
+            '2xs': string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+    };
+    color: {
+        white: string;
+        black: string;
+        gray: string;
+    };
+    default: {
+        size: string;
+        color: string;
+    };
+};
+declare const meterGroup: {
+    wrapper: string;
+    base: string;
+    background: string;
+    transition: string;
+    rounded: string;
+    shadow: string;
+    default: {
+        size: string;
+    };
+};
 declare const input: {
     wrapper: string;
     base: string;
@@ -745,6 +914,21 @@ declare const selectMenu: {
     default: {
         selectedIcon: string;
     };
+    arrow: {
+        ring: string;
+        background: string;
+        base: string;
+        rounded: string;
+        shadow: string;
+        placement: string;
+    };
+};
+declare const radioGroup: {
+    wrapper: string;
+    legend: string;
+    default: {
+        color: string;
+    };
 };
 declare const radio: {
     wrapper: string;
@@ -810,9 +994,13 @@ declare const range: {
         rounded: string;
         background: string;
         size: {
+            '2xs': string;
+            xs: string;
             sm: string;
             md: string;
             lg: string;
+            xl: string;
+            '2xl': string;
         };
     };
     thumb: {
@@ -821,9 +1009,13 @@ declare const range: {
         background: string;
         ring: string;
         size: {
+            '2xs': string;
+            xs: string;
             sm: string;
             md: string;
             lg: string;
+            xl: string;
+            '2xl': string;
         };
     };
     track: {
@@ -831,15 +1023,23 @@ declare const range: {
         background: string;
         rounded: string;
         size: {
+            '2xs': string;
+            xs: string;
             sm: string;
             md: string;
             lg: string;
+            xl: string;
+            '2xl': string;
         };
     };
     size: {
+        '2xs': string;
+        xs: string;
         sm: string;
         md: string;
         lg: string;
+        xl: string;
+        '2xl': string;
     };
     default: {
         size: string;
@@ -879,6 +1079,35 @@ declare const skeleton: {
     background: string;
     rounded: string;
 };
+declare const divider: {
+    wrapper: {
+        base: string;
+        horizontal: string;
+        vertical: string;
+    };
+    container: {
+        base: string;
+        horizontal: string;
+        vertical: string;
+    };
+    border: {
+        base: string;
+        horizontal: string;
+        vertical: string;
+        size: {
+            horizontal: string;
+            vertical: string;
+        };
+    };
+    icon: {
+        base: string;
+    };
+    avatar: {
+        base: string;
+        size: string;
+    };
+    label: string;
+};
 declare const verticalNavigation: {
     wrapper: string;
     base: string;
@@ -985,6 +1214,16 @@ declare const pagination: {
         inactiveButton: {
             color: string;
         };
+        firstButton: {
+            color: string;
+            class: string;
+            icon: string;
+        };
+        lastButton: {
+            color: string;
+            class: string;
+            icon: string;
+        };
         prevButton: {
             color: string;
             class: string;
@@ -1112,6 +1351,14 @@ declare const tooltip: {
     popper: {
         strategy: string;
     };
+    arrow: {
+        base: string;
+        ring: string;
+        rounded: string;
+        background: string;
+        shadow: string;
+        placement: string;
+    };
 };
 declare const popover: {
     wrapper: string;
@@ -1133,6 +1380,14 @@ declare const popover: {
     popper: {
         strategy: string;
     };
+    arrow: {
+        base: string;
+        ring: string;
+        rounded: string;
+        background: string;
+        shadow: string;
+        placement: string;
+    };
 };
 declare const contextMenu: {
     wrapper: string;
@@ -1155,6 +1410,14 @@ declare const contextMenu: {
         placement: string;
         scroll: boolean;
     };
+    arrow: {
+        base: string;
+        ring: string;
+        rounded: string;
+        background: string;
+        shadow: string;
+        placement: string;
+    };
 };
 declare const notification: {
     wrapper: string;
@@ -1220,16 +1483,21 @@ declare const config_checkbox: typeof checkbox;
 declare const config_commandPalette: typeof commandPalette;
 declare const config_container: typeof container;
 declare const config_contextMenu: typeof contextMenu;
+declare const config_divider: typeof divider;
 declare const config_dropdown: typeof dropdown;
 declare const config_formGroup: typeof formGroup;
 declare const config_input: typeof input;
 declare const config_kbd: typeof kbd;
+declare const config_meter: typeof meter;
+declare const config_meterGroup: typeof meterGroup;
 declare const config_modal: typeof modal;
 declare const config_notification: typeof notification;
 declare const config_notifications: typeof notifications;
 declare const config_pagination: typeof pagination;
 declare const config_popover: typeof popover;
+declare const config_progress: typeof progress;
 declare const config_radio: typeof radio;
+declare const config_radioGroup: typeof radioGroup;
 declare const config_range: typeof range;
 declare const config_select: typeof select;
 declare const config_selectMenu: typeof selectMenu;
@@ -1242,13 +1510,13 @@ declare const config_toggle: typeof toggle;
 declare const config_tooltip: typeof tooltip;
 declare const config_verticalNavigation: typeof verticalNavigation;
 declare namespace config {
-  export { config_accordion as accordion, config_alert as alert, config_avatar as avatar, config_avatarGroup as avatarGroup, config_badge as badge, config_button as button, config_buttonGroup as buttonGroup, config_card as card, config_checkbox as checkbox, config_commandPalette as commandPalette, config_container as container, config_contextMenu as contextMenu, config_dropdown as dropdown, config_formGroup as formGroup, config_input as input, config_kbd as kbd, config_modal as modal, config_notification as notification, config_notifications as notifications, config_pagination as pagination, config_popover as popover, config_radio as radio, config_range as range, config_select as select, config_selectMenu as selectMenu, config_skeleton as skeleton, config_slideover as slideover, config_table as table, config_tabs as tabs, config_textarea as textarea, config_toggle as toggle, config_tooltip as tooltip, config_verticalNavigation as verticalNavigation };
+  export { config_accordion as accordion, config_alert as alert, config_avatar as avatar, config_avatarGroup as avatarGroup, config_badge as badge, config_button as button, config_buttonGroup as buttonGroup, config_card as card, config_checkbox as checkbox, config_commandPalette as commandPalette, config_container as container, config_contextMenu as contextMenu, config_divider as divider, config_dropdown as dropdown, config_formGroup as formGroup, config_input as input, config_kbd as kbd, config_meter as meter, config_meterGroup as meterGroup, config_modal as modal, config_notification as notification, config_notifications as notifications, config_pagination as pagination, config_popover as popover, config_progress as progress, config_radio as radio, config_radioGroup as radioGroup, config_range as range, config_select as select, config_selectMenu as selectMenu, config_skeleton as skeleton, config_slideover as slideover, config_table as table, config_tabs as tabs, config_textarea as textarea, config_toggle as toggle, config_tooltip as tooltip, config_verticalNavigation as verticalNavigation };
 }
 
 type Strategy = 'merge' | 'override';
 
 type DeepPartial<T> = Partial<{
-  [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string };
+  [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string | object };
 }>;
 
 type UI = {

package/dist/module.json

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

package/dist/module.mjs

@@ -15,7 +15,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.9.0";
+const version = "2.10.0";
 
 function omit(object, keysToOmit) {
   const result = { ...object };
@@ -194,6 +194,23 @@ const safelistByComponent = {
     pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
     variants: ["focus-visible"]
   }],
+  progress: (colorsAsRegex2) => [{
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }],
+  meter: (colorsAsRegex2) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
+    variants: ["dark"]
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
+  }],
   notification: (colorsAsRegex2) => [{
     pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
     variants: ["dark"]
@@ -209,7 +226,9 @@ const safelistByComponent = {
 const safelistComponentAliasesMap = {
   "USelect": "UInput",
   "USelectMenu": "UInput",
-  "UTextarea": "UInput"
+  "UTextarea": "UInput",
+  "URadioGroup": "URadio",
+  "UMeterGroup": "UMeter"
 };
 const colorsAsRegex = (colors) => colors.join("|");
 const excludeColors = (colors) => {

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

@@ -146,19 +146,20 @@ export default defineComponent({
       default: void 0
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "update:sort"],
   setup(props, { emit, attrs: $attrs }) {
     const { ui, attrs } = useUI("table", toRef(props, "ui"), config, toRef(props, "class"));
     const columns = computed(() => props.columns ?? Object.keys(omit(props.rows[0] ?? {}, ["click"])).map((key) => ({ key, label: upperFirst(key), sortable: false })));
     const sort = ref(defu({}, props.sort, { column: null, direction: "asc" }));
+    const defaultSort = { column: sort.value.column, direction: null };
     const rows = computed(() => {
       if (!sort.value?.column) {
         return props.rows;
       }
       const { column, direction } = sort.value;
       return props.rows.slice().sort((a, b) => {
-        const aValue = a[column];
-        const bValue = b[column];
+        const aValue = get(a, column);
+        const bValue = get(b, column);
         if (aValue === bValue) {
           return 0;
         }
@@ -205,13 +206,14 @@ export default defineComponent({
       if (sort.value.column === column.key) {
         const direction = !column.direction || column.direction === "asc" ? "desc" : "asc";
         if (sort.value.direction === direction) {
-          sort.value = defu({}, props.sort, { column: null, direction: "asc" });
+          sort.value = defu({}, defaultSort, { column: null, direction: "asc" });
         } else {
           sort.value.direction = sort.value.direction === "asc" ? "desc" : "asc";
         }
       } else {
         sort.value = { column: column.key, direction: column.direction || "asc" };
       }
+      emit("update:sort", sort.value);
     }
     function onSelect(row) {
       if (!$attrs.onSelect) {
@@ -221,10 +223,10 @@ export default defineComponent({
     }
     function selectAllRows() {
       props.rows.forEach((row) => {
-        if (selected.value.some((item) => compare(toRaw(item), toRaw(row)))) {
+        if (isSelected(row)) {
           return;
         }
-        $attrs.onSelect ? $attrs.onSelect(row) : selected.value.push(row);
+        selected.value.push(row);
       });
     }
     function onChange(event) {

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

@@ -108,7 +108,7 @@ declare const _default: import("vue").DefineComponent<{
     onSelect: (row: any) => void;
     onChange: (event: any) => void;
     getRowData: (row: Object, rowKey: string | string[], defaultValue?: any) => any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:sort")[], "update:modelValue" | "update:sort", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ArrayConstructor;
         default: null;
@@ -185,6 +185,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:sort"?: ((...args: any[]) => any) | undefined;
 }, {
     sort: {
         column: string;

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

@@ -1,7 +1,14 @@
 <template>
   <div :class="ui.wrapper">
     <HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen">
-      <HDisclosureButton :ref="() => buttonRefs[index] = close" as="template" :disabled="item.disabled">
+      <HDisclosureButton
+        :ref="() => buttonRefs[index] = { open, close }"
+        as="template"
+        :disabled="item.disabled"
+        @click="closeOthers(index, $event)"
+        @keydown.enter="closeOthers(index, $event)"
+        @keydown.space="closeOthers(index, $event)"
+      >
         <slot :item="item" :index="index" :open="open" :close="close">
           <UButton v-bind="{ ...omit(ui.default, ['openIcon', 'closeIcon']), ...attrs, ...omit(item, ['slot', 'disabled', 'content', 'defaultOpen']) }">
             <template #trailing>
@@ -18,8 +25,6 @@
         </slot>
       </HDisclosureButton>
 
-      <StateEmitter :open="open" @open="closeOthers(index)" />
-
       <Transition
         v-bind="ui.transition"
         @enter="onEnter"
@@ -46,7 +51,6 @@ import UIcon from "../elements/Icon.vue";
 import UButton from "../elements/Button.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig, omit } from "../../utils";
-import StateEmitter from "../../utils/StateEmitter";
 import appConfig from "#build/app.config";
 import { accordion, button } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.accordion, accordion);
@@ -57,8 +61,7 @@ export default defineComponent({
     HDisclosureButton,
     HDisclosurePanel,
     UIcon,
-    UButton,
-    StateEmitter
+    UButton
   },
   inheritAttrs: false,
   props: {
@@ -95,16 +98,15 @@ export default defineComponent({
     const { ui, attrs } = useUI("accordion", toRef(props, "ui"), config, toRef(props, "class"));
     const uiButton = computed(() => configButton);
     const buttonRefs = ref([]);
-    function closeOthers(currentIndex) {
+    function closeOthers(currentIndex, e) {
       if (!props.items[currentIndex].closeOthers && props.multiple) {
         return;
       }
-      const totalItems = buttonRefs.value.length;
-      const order = Array.from({ length: totalItems }, (_, i) => (currentIndex + i) % totalItems).filter((index) => index !== currentIndex).reverse();
-      for (const index of order) {
-        const close = buttonRefs.value[index];
-        close();
-      }
+      buttonRefs.value.forEach((button2) => {
+        if (button2.open) {
+          button2.close(e.target);
+        }
+      });
     }
     function onEnter(el, done) {
       el.style.height = "0";

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

@@ -36,8 +36,11 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    buttonRefs: import("vue").Ref<Function[]>;
-    closeOthers: (currentIndex: number) => void;
+    buttonRefs: import("vue").Ref<{
+        open: boolean;
+        close: (e: EventTarget) => {};
+    }[]>;
+    closeOthers: (currentIndex: number, e: Event) => void;
     omit: typeof omit;
     onEnter: (el: HTMLElement, done: any) => void;
     onBeforeLeave: (el: HTMLElement) => void;

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

@@ -173,13 +173,14 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
+    truncate: boolean;
     icon: string;
     color: any;
     ui: Partial<any>;
     class: any;
     label: string;
-    type: string;
     loading: boolean;
+    type: string;
     disabled: boolean;
     variant: ButtonVariant;
     size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl";
@@ -191,6 +192,5 @@ declare const _default: import("vue").DefineComponent<{
     trailing: boolean;
     leading: boolean;
     square: boolean;
-    truncate: boolean;
 }, {}>;
 export default _default;