@nuxt/ui 2.15.2 → 2.17.0

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

@@ -1,13 +1,24 @@
 <template>
   <div :class="ui.wrapper" v-bind="attrs">
     <table :class="[ui.base, ui.divide]">
+      <slot v-if="$slots.caption || caption" name="caption">
+        <caption :class="ui.caption">
+          {{ caption }}
+        </caption>
+      </slot>
       <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" />
           </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]">
+          <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]"
+            :aria-sort="getAriaSort(column)"
+          >
             <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
               <UButton
                 v-if="column.sortable"
@@ -160,6 +171,10 @@ export default defineComponent({
       type: Object,
       default: () => config.default.emptyState
     },
+    caption: {
+      type: String,
+      default: null
+    },
     progress: {
       type: Object,
       default: () => config.default.progress
@@ -259,6 +274,21 @@ export default defineComponent({
     function getRowData(row, rowKey, defaultValue = "") {
       return get(row, rowKey, defaultValue);
     }
+    function getAriaSort(column) {
+      if (!column.sortable) {
+        return void 0;
+      }
+      if (sort.value.column !== column.key) {
+        return "none";
+      }
+      if (sort.value.direction === "asc") {
+        return "ascending";
+      }
+      if (sort.value.direction === "desc") {
+        return "descending";
+      }
+      return void 0;
+    }
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -279,7 +309,8 @@ export default defineComponent({
       onSort,
       onSelect,
       onChange,
-      getRowData
+      getRowData,
+      getAriaSort
     };
   }
 });

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

@@ -1,6 +1,14 @@
-import type { PropType } from 'vue';
+import type { PropType, AriaAttributes } from 'vue';
 import type { Button, ProgressAnimation } from '../../types';
 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;
+    [key: string]: any;
+}
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: ArrayConstructor;
@@ -17,14 +25,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
     columns: {
-        type: PropType<{
-            [key: string]: any;
-            key: string;
-            sortable?: boolean | undefined;
-            sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
-            direction?: "asc" | "desc" | undefined;
-            class?: string | undefined;
-        }[]>;
+        type: PropType<Column[]>;
         default: null;
     };
     columnAttribute: {
@@ -72,6 +73,10 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => any;
     };
+    caption: {
+        type: StringConstructor;
+        default: null;
+    };
     progress: {
         type: PropType<{
             color: any;
@@ -96,14 +101,7 @@ declare const _default: import("vue").DefineComponent<{
         column: string;
         direction: 'asc' | 'desc';
     }>;
-    columns: import("vue").ComputedRef<{
-        [key: string]: any;
-        key: string;
-        sortable?: boolean | undefined;
-        sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
-        direction?: "asc" | "desc" | undefined;
-        class?: string | undefined;
-    }[]>;
+    columns: import("vue").ComputedRef<Column[]>;
     rows: import("vue").ComputedRef<{
         [key: string]: any;
     }[]>;
@@ -119,6 +117,7 @@ declare const _default: import("vue").DefineComponent<{
     onSelect: (row: any) => void;
     onChange: (checked: boolean) => void;
     getRowData: (row: Object, rowKey: string | string[], defaultValue?: any) => any;
+    getAriaSort: (column: Column) => AriaAttributes['aria-sort'];
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:sort")[], "update:modelValue" | "update:sort", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: ArrayConstructor;
@@ -135,14 +134,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
     columns: {
-        type: PropType<{
-            [key: string]: any;
-            key: string;
-            sortable?: boolean | undefined;
-            sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
-            direction?: "asc" | "desc" | undefined;
-            class?: string | undefined;
-        }[]>;
+        type: PropType<Column[]>;
         default: null;
     };
     columnAttribute: {
@@ -190,6 +182,10 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: () => any;
     };
+    caption: {
+        type: StringConstructor;
+        default: null;
+    };
     progress: {
         type: PropType<{
             color: any;
@@ -213,21 +209,16 @@ declare const _default: import("vue").DefineComponent<{
         column: string;
         direction: 'asc' | 'desc';
     };
+    caption: string;
     progress: {
         color: any;
         animation: ProgressAnimation;
     };
-    ui: any;
     class: any;
+    columns: Column[];
+    ui: any;
+    loading: boolean;
     modelValue: unknown[];
-    columns: {
-        [key: string]: any;
-        key: string;
-        sortable?: boolean | undefined;
-        sort?: ((a: any, b: any, direction: 'asc' | 'desc') => number) | undefined;
-        direction?: "asc" | "desc" | undefined;
-        class?: string | undefined;
-    }[];
     by: string | Function;
     rows: {
         [key: string]: any;
@@ -237,7 +228,6 @@ declare const _default: import("vue").DefineComponent<{
     sortButton: Button;
     sortAscIcon: string;
     sortDescIcon: string;
-    loading: boolean;
     loadingState: {
         icon: string;
         label: string;

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

@@ -86,8 +86,8 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onOpen?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: any;
     class: any;
+    ui: any;
     defaultOpen: boolean;
     unmount: boolean;
     items: AccordionItem[];

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

@@ -2,7 +2,7 @@
   <div :class="alertClass" v-bind="attrs">
     <div class="flex" :class="[ui.gap, { 'items-start': (description || $slots.description), 'items-center': !description && !$slots.description }]">
       <slot name="icon" :icon="icon">
-        <UIcon v-if="icon" :name="icon" :ui="ui.icon.base" />
+        <UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
       </slot>
       <slot name="avatar" :avatar="avatar">
         <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
@@ -14,19 +14,23 @@
             {{ title }}
           </slot>
         </p>
-        <p v-if="description || $slots.description" :class="twMerge(ui.description, !(title && $slots.title) && 'mt-0 leading-5')">
+        <div v-if="description || $slots.description" :class="twMerge(ui.description, !(title && $slots.title) && 'mt-0 leading-5')">
           <slot name="description" :description="description">
             {{ description }}
           </slot>
-        </p>
+        </div>
 
-        <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+        <div v-if="(description || $slots.description) && (actions.length || $slots.actions)" :class="ui.actions">
+          <slot name="actions">
+            <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+          </slot>
         </div>
       </div>
       <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
-        <template v-if="!description && !$slots.description && actions.length">
-          <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+        <template v-if="!description && !$slots.description && (actions.length || $slots.actions)">
+          <slot name="actions">
+            <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
+          </slot>
         </template>
 
         <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="$emit('close')" />

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

@@ -97,15 +97,15 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: any;
     title: string;
-    description: string;
-    icon: string;
+    class: any;
     avatar: Avatar;
-    closeButton: Button;
-    actions: AlertAction[];
     color: any;
-    class: any;
     variant: AlertVariant;
+    ui: any;
+    icon: string;
+    description: string;
+    closeButton: Button;
+    actions: AlertAction[];
 }, {}>;
 export default _default;

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

@@ -2,11 +2,11 @@ import type { PropType } from 'vue';
 import type { AvatarSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     as: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: (StringConstructor | ObjectConstructor)[];
         default: string;
     };
     src: {
-        type: (BooleanConstructor | StringConstructor)[];
+        type: (StringConstructor | BooleanConstructor)[];
         default: null;
     };
     alt: {
@@ -37,7 +37,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     chipText: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: null;
     };
     imgClass: {
@@ -67,11 +67,11 @@ declare const _default: import("vue").DefineComponent<{
     onError: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     as: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: (StringConstructor | ObjectConstructor)[];
         default: string;
     };
     src: {
-        type: (BooleanConstructor | StringConstructor)[];
+        type: (StringConstructor | BooleanConstructor)[];
         default: null;
     };
     alt: {
@@ -102,7 +102,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     chipText: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: null;
     };
     imgClass: {
@@ -118,14 +118,14 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    alt: string;
     size: AvatarSize;
-    ui: any;
-    icon: string;
+    text: string;
     class: any;
     as: string | Record<string, any>;
+    ui: any;
+    icon: string;
     src: string | boolean;
-    text: string;
+    alt: string;
     chipColor: any;
     chipPosition: "top-right" | "bottom-right" | "top-left" | "bottom-left";
     chipText: string | number;

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

@@ -17,7 +17,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     label: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: null;
     };
     class: {
@@ -50,7 +50,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     label: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: null;
     };
     class: {
@@ -63,10 +63,10 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     size: BadgeSize;
-    ui: any;
-    color: any;
+    label: string | number;
     class: any;
+    color: any;
     variant: BadgeVariant;
-    label: string | number;
+    ui: any;
 }, {}>;
 export default _default;

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

@@ -305,13 +305,12 @@ declare const _default: import("vue").DefineComponent<{
         readonly required: false;
     };
 }>>, {
+    replace: NuxtLinkProps;
     size: ButtonSize;
-    ui: any;
-    truncate: boolean;
-    icon: string;
-    color: any;
     type: string;
+    label: string;
     class: any;
+    truncate: boolean;
     target: NuxtLinkProps;
     rel: NuxtLinkProps;
     noRel: NuxtLinkProps;
@@ -320,22 +319,23 @@ declare const _default: import("vue").DefineComponent<{
     activeClass: NuxtLinkProps;
     exactActiveClass: NuxtLinkProps;
     prefetchedClass: NuxtLinkProps;
-    replace: NuxtLinkProps;
     ariaCurrentValue: NuxtLinkProps;
     external: NuxtLinkProps;
     leading: boolean;
+    color: any;
     variant: ButtonVariant;
-    label: string;
-    loading: boolean;
     disabled: boolean;
+    to: RouteLocationRaw;
+    href: RouteLocationRaw;
+    ui: any;
     block: boolean;
+    loading: boolean;
     padded: boolean;
+    icon: string;
     loadingIcon: string;
     leadingIcon: string;
     trailingIcon: string;
     trailing: boolean;
     square: boolean;
-    to: RouteLocationRaw;
-    href: RouteLocationRaw;
 }, {}>;
 export default _default;

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

@@ -89,8 +89,8 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
-    ui: Partial<any>;
     class: any;
+    ui: Partial<any>;
     items: any[];
     arrows: boolean;
     indicators: boolean;

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

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     size: {
-        type: PropType<"sm" | "2xs" | "md" | "xs" | "3xs" | "lg" | "xl" | "2xl" | "3xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl" | "3xs" | "3xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     text: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: null;
     };
     inset: {
@@ -43,7 +43,7 @@ declare const _default: import("vue").DefineComponent<{
     chipClass: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: PropType<"sm" | "2xs" | "md" | "xs" | "3xs" | "lg" | "xl" | "2xl" | "3xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl" | "3xs" | "3xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -58,7 +58,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     text: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: null;
     };
     inset: {
@@ -78,13 +78,13 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    size: "sm" | "2xs" | "md" | "xs" | "3xs" | "lg" | "xl" | "2xl" | "3xl";
-    ui: any;
-    color: any;
+    size: "sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl" | "3xs" | "3xl";
+    text: string | number;
     class: any;
     inset: boolean;
     position: "top-right" | "bottom-right" | "top-left" | "bottom-left";
-    text: string | number;
+    color: any;
+    ui: any;
     show: boolean;
 }, {}>;
 export default _default;

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

@@ -122,10 +122,10 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:open"?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: any;
     class: any;
     popper: PopperOptions;
     disabled: boolean;
+    ui: any;
     open: boolean;
     items: DropdownItem[][];
     mode: "click" | "hover";

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

@@ -43,9 +43,9 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    size: KbdSize;
-    ui: any;
     value: string;
+    size: KbdSize;
     class: any;
+    ui: any;
 }, {}>;
 export default _default;

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

@@ -200,6 +200,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly required: false;
     };
 }>>, {
+    replace: NuxtLinkProps;
     type: string;
     target: NuxtLinkProps;
     rel: NuxtLinkProps;
@@ -209,17 +210,16 @@ declare const _default: import("vue").DefineComponent<{
     activeClass: NuxtLinkProps;
     exactActiveClass: NuxtLinkProps;
     prefetchedClass: NuxtLinkProps;
-    replace: NuxtLinkProps;
     ariaCurrentValue: NuxtLinkProps;
     external: NuxtLinkProps;
     as: string;
     disabled: boolean;
-    to: RouteLocationRaw;
-    href: RouteLocationRaw;
     active: boolean;
     exact: boolean;
     exactQuery: boolean;
     exactHash: boolean;
     inactiveClass: string;
+    to: RouteLocationRaw;
+    href: RouteLocationRaw;
 }, {}>;
 export default _default;

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

@@ -100,16 +100,16 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
+    value: number;
     size: "sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl";
+    label: string;
+    class: any;
+    color: any;
     ui: any;
-    value: number;
     icon: string;
-    color: any;
-    class: any;
-    label: string;
     max: number;
-    min: number;
     indicator: boolean;
+    min: number;
 }, SlotsType<{
     indicator?: {
         percent: number;

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

@@ -112,11 +112,11 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    size: "sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl";
-    ui: any;
     value: number;
-    color: any;
+    size: "sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl";
     class: any;
+    color: any;
+    ui: any;
     max: number | any[];
     indicator: boolean;
     animation: "carousel" | "carousel-inverse" | "swing" | "elastic";

package/dist/runtime/components/forms/Checkbox.vue.d.ts

@@ -5,7 +5,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => null;
     };
     value: {
-        type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[];
         default: null;
     };
     modelValue: {
@@ -69,7 +69,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => null;
     };
     value: {
-        type: (ObjectConstructor | BooleanConstructor | NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[];
         default: null;
     };
     modelValue: {
@@ -118,20 +118,20 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: any;
     value: string | number | boolean | Record<string, any>;
-    id: string;
-    color: any;
-    class: any;
     name: string;
-    modelValue: boolean | unknown[];
+    required: boolean;
     label: string;
-    indeterminate: boolean;
+    class: any;
+    color: any;
     disabled: boolean;
-    required: boolean;
+    ui: any;
+    id: string;
+    modelValue: boolean | unknown[];
+    indeterminate: boolean;
     help: string;
     inputClass: string;
 }, {}>;

package/dist/runtime/components/forms/Form.vue

@@ -18,7 +18,7 @@ class FormException extends Error {
 export default defineComponent({
   props: {
     schema: {
-      type: Object,
+      type: [Object, Function],
       default: void 0
     },
     state: {
@@ -124,7 +124,6 @@ export default defineComponent({
       validate,
       errors,
       setErrors(errs, path) {
-        errors.value = errs;
         if (path) {
           errors.value = errors.value.filter(
             (error) => error.path !== path
@@ -211,16 +210,14 @@ async function getJoiErrors(state, schema) {
   }
 }
 function isValibotSchema(schema) {
-  return schema._parse !== void 0;
+  return "_parse" in schema || "_run" in schema || typeof schema === "function" && "schema" in schema;
 }
 async function getValibotError(state, schema) {
-  const result = await schema._parse(state);
-  if (result.issues) {
-    return result.issues.map((issue) => ({
-      path: issue.path?.map((p) => p.key).join(".") || "",
-      message: issue.message
-    }));
-  }
-  return [];
+  const result = await ("_parse" in schema ? schema._parse(state) : "_run" in schema ? schema._run({ typed: false, value: state }, {}) : schema(state));
+  return result.issues?.map((issue) => ({
+    // We know that the key for a form schema is always a string or a number
+    path: issue.path?.map((item) => item.key).join(".") || "",
+    message: issue.message
+  })) || [];
 }
 </script>