@nuxt/ui 2.12.2 → 2.13.0

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

@@ -0,0 +1,104 @@
+import type { PropType } from 'vue';
+import type { Button } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: PropType<any[]>;
+        default: () => never[];
+    };
+    arrows: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indicators: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prevButton: {
+        type: PropType<Button & {
+            class?: string | undefined;
+        }>;
+        default: () => Button & {
+            class?: string | undefined;
+        };
+    };
+    nextButton: {
+        type: PropType<Button & {
+            class?: string | undefined;
+        }>;
+        default: () => Button & {
+            class?: string | undefined;
+        };
+    };
+    class: {
+        type: PropType<any>;
+        default: () => string;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    isFirst: import("vue").Ref<boolean>;
+    isLast: import("vue").Ref<boolean>;
+    carouselRef: import("vue").Ref<HTMLElement | undefined>;
+    indicatorsCount: import("vue").ComputedRef<number>;
+    currentIndex: import("vue").ComputedRef<number>;
+    onClickNext: () => void;
+    onClickPrev: () => void;
+    onClick: (index: number) => void;
+    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<any[]>;
+        default: () => never[];
+    };
+    arrows: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indicators: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    prevButton: {
+        type: PropType<Button & {
+            class?: string | undefined;
+        }>;
+        default: () => Button & {
+            class?: string | undefined;
+        };
+    };
+    nextButton: {
+        type: PropType<Button & {
+            class?: string | undefined;
+        }>;
+        default: () => Button & {
+            class?: string | undefined;
+        };
+    };
+    class: {
+        type: PropType<any>;
+        default: () => string;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}>>, {
+    ui: Partial<any>;
+    class: any;
+    items: any[];
+    arrows: boolean;
+    indicators: boolean;
+    prevButton: Button & {
+        class?: string | undefined;
+    };
+    nextButton: Button & {
+        class?: string | undefined;
+    };
+}, {}>;
+export default _default;

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" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "3xs" | "lg" | "xl" | "2xl" | "3xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -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").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "3xs" | "lg" | "xl" | "2xl" | "3xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -78,7 +78,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    size: "sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl";
+    size: "sm" | "2xs" | "md" | "xs" | "3xs" | "lg" | "xl" | "2xl" | "3xl";
     ui: any;
     color: any;
     inset: boolean;

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

@@ -103,11 +103,11 @@ export default defineComponent({
     },
     openDelay: {
       type: Number,
-      default: 0
+      default: () => config.default.openDelay
     },
     closeDelay: {
       type: Number,
-      default: 0
+      default: () => config.default.closeDelay
     },
     class: {
       type: [String, Object, Array],

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

@@ -25,11 +25,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     openDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     closeDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     class: {
         type: PropType<any>;
@@ -104,11 +104,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     openDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     closeDelay: {
         type: NumberConstructor;
-        default: number;
+        default: () => any;
     };
     class: {
         type: PropType<any>;

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

@@ -7,7 +7,7 @@
     v-bind="$attrs"
     :class="active ? activeClass : inactiveClass"
   >
-    <slot />
+    <slot v-bind="{ isActive: active }" />
   </component>
   <NuxtLink
     v-else
@@ -25,7 +25,7 @@
       :class="active !== undefined ? (active ? activeClass : inactiveClass) : resolveLinkClass(route, $route, { isActive, isExactActive })"
       @click="(e) => !isExternal && navigate(e)"
     >
-      <slot v-bind="{ isActive: exact ? isExactActive : isActive }" />
+      <slot v-bind="{ isActive: active !== undefined ? active : (exact ? isExactActive : isActive) }" />
     </a>
   </NuxtLink>
 </template>

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

@@ -32,11 +32,11 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     to: {
-        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+        readonly type: import("vue").PropType<RouteLocationRaw>;
         readonly default: undefined;
     };
     href: {
-        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+        readonly type: import("vue").PropType<RouteLocationRaw>;
         readonly default: undefined;
     };
     target: {
@@ -122,11 +122,11 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     to: {
-        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+        readonly type: import("vue").PropType<RouteLocationRaw>;
         readonly default: undefined;
     };
     href: {
-        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+        readonly type: import("vue").PropType<RouteLocationRaw>;
         readonly default: undefined;
     };
     target: {
@@ -178,8 +178,8 @@ declare const _default: import("vue").DefineComponent<{
     replace: boolean;
     as: string;
     disabled: boolean;
-    to: import("vue-router").RouteLocationRaw;
-    href: import("vue-router").RouteLocationRaw;
+    to: RouteLocationRaw;
+    href: RouteLocationRaw;
     target: (string & {}) | "_blank" | "_parent" | "_self" | "_top" | null;
     rel: string | null;
     noRel: boolean;

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

@@ -21,7 +21,7 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -78,7 +78,7 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -100,7 +100,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
+    size: "sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl";
     ui: any;
     value: number;
     icon: string;

package/dist/runtime/components/elements/MeterGroup.d.ts

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -62,7 +62,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
+    size: "sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl";
     ui: any;
     icon: string;
     class: any;

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

@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -94,7 +94,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl">;
+        type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -112,7 +112,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl";
+    size: "sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl";
     ui: any;
     value: number;
     color: string;

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

@@ -70,12 +70,16 @@ export default defineComponent({
       return errs;
     }
     async function validate(path, opts = { silent: false }) {
-      if (path) {
+      let paths = path;
+      if (path && !Array.isArray(path)) {
+        paths = [path];
+      }
+      if (paths) {
         const otherErrors = errors.value.filter(
-          (error) => error.path !== path
+          (error) => !paths.includes(error.path)
         );
         const pathErrors = (await getErrors()).filter(
-          (error) => error.path === path
+          (error) => paths.includes(error.path)
         );
         errors.value = otherErrors.concat(pathErrors);
       } else {

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

@@ -5,6 +5,7 @@
     :name="name"
     :model-value="modelValue"
     :disabled="disabled"
+    :nullable="nullable"
     as="div"
     :class="ui.wrapper"
     @update:model-value="onUpdate"
@@ -188,6 +189,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    nullable: {
+      type: Boolean,
+      default: false
+    },
     placeholder: {
       type: String,
       default: null
@@ -281,6 +286,9 @@ export default defineComponent({
       }
     });
     const label = computed(() => {
+      if (!props.modelValue) {
+        return;
+      }
       if (props.valueAttribute) {
         const option = props.options.find((option2) => option2[props.valueAttribute] === props.modelValue);
         return option ? option[props.optionAttribute] : null;

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

@@ -68,6 +68,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    nullable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     placeholder: {
         type: StringConstructor;
         default: null;
@@ -224,6 +228,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    nullable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     placeholder: {
         type: StringConstructor;
         default: null;
@@ -321,6 +329,7 @@ declare const _default: import("vue").DefineComponent<{
     trailingIcon: string;
     trailing: boolean;
     inputClass: string;
+    nullable: boolean;
     query: string;
     selectedIcon: string;
     optionAttribute: string;

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

@@ -241,7 +241,7 @@ export default defineComponent({
         variant?.replaceAll("{color}", color.value),
         (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
         (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
-      ), props.selectClass);
+      ), props.placeholder && !props.modelValue && ui.value.placeholder, props.selectClass);
     });
     const isLeading = computed(() => {
       return props.icon && props.leading || props.icon && !props.trailing || props.loading && !props.trailing || props.leadingIcon;
@@ -316,3 +316,7 @@ export default defineComponent({
   }
 });
 </script>
+
+<style scoped>
+.form-select{background-image:none}
+</style>

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

@@ -369,7 +369,7 @@ export default defineComponent({
         variant?.replaceAll("{color}", color.value),
         (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
         (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
-      ), props.selectClass);
+      ), props.placeholder && !props.modelValue && ui.value.placeholder, props.selectClass);
     });
     const isLeading = computed(() => {
       return props.icon && props.leading || props.icon && !props.trailing || props.loading && !props.trailing || props.leadingIcon;

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

@@ -69,7 +69,7 @@ export default defineComponent({
     },
     size: {
       type: String,
-      default: config.default.size,
+      default: () => config.default.size,
       validator(value) {
         return Object.keys(config.size).includes(value);
       }

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

@@ -32,7 +32,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         type: PropType<ToggleSize>;
-        default: any;
+        default: () => any;
         validator(value: string): boolean;
     };
     class: {
@@ -87,7 +87,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: {
         type: PropType<ToggleSize>;
-        default: any;
+        default: () => any;
         validator(value: string): boolean;
     };
     class: {

package/dist/runtime/components/navigation/HorizontalNavigation.vue

@@ -0,0 +1,102 @@
+<template>
+  <nav :class="ui.wrapper" v-bind="attrs">
+    <ul v-for="(section, sectionIndex) of sections" :key="`section${sectionIndex}`" :class="ui.container">
+      <li v-for="(link, index) of section" :key="`section${sectionIndex}-${index}`" :class="ui.inner">
+        <ULink
+          v-slot="{ isActive }"
+          v-bind="getULinkProps(link)"
+          :class="[ui.base, ui.before, ui.after]"
+          :active-class="ui.active"
+          :inactive-class="ui.inactive"
+          @click="link.click"
+          @keyup.enter="$event.target.blur()"
+        >
+          <slot name="avatar" :link="link" :is-active="isActive">
+            <UAvatar
+              v-if="link.avatar"
+              v-bind="{ size: ui.avatar.size, ...link.avatar }"
+              :class="[ui.avatar.base]"
+            />
+          </slot>
+          <slot name="icon" :link="link" :is-active="isActive">
+            <UIcon
+              v-if="link.icon"
+              :name="link.icon"
+              :class="twMerge(twJoin(ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive), link.iconClass)"
+            />
+          </slot>
+          <slot :link="link" :is-active="isActive">
+            <span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">
+              <span v-if="isActive" class="sr-only">
+                Current page:
+              </span>
+              {{ link.label }}
+            </span>
+          </slot>
+          <slot name="badge" :link="link" :is-active="isActive">
+            <UBadge
+              v-if="link.badge"
+              v-bind="{
+                size: ui.badge.size,
+                color: ui.badge.color,
+                variant: ui.badge.variant,
+                ...((typeof link.badge === 'string' || typeof link.badge === 'number') ? { label: link.badge } : link.badge)
+              }"
+              :class="ui.badge.base"
+            />
+          </slot>
+        </ULink>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+import { toRef, defineComponent, computed } from "vue";
+import { twMerge, twJoin } from "tailwind-merge";
+import UIcon from "../elements/Icon.vue";
+import UAvatar from "../elements/Avatar.vue";
+import UBadge from "../elements/Badge.vue";
+import ULink from "../elements/Link.vue";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig, getULinkProps } from "../../utils";
+import appConfig from "#build/app.config";
+import { horizontalNavigation } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.horizontalNavigation, horizontalNavigation);
+export default defineComponent({
+  components: {
+    UIcon,
+    UAvatar,
+    UBadge,
+    ULink
+  },
+  inheritAttrs: false,
+  props: {
+    links: {
+      type: Array,
+      default: () => []
+    },
+    class: {
+      type: [String, Object, Array],
+      default: () => ""
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const { ui, attrs } = useUI("horizontalNavigation", toRef(props, "ui"), config, toRef(props, "class"));
+    const sections = computed(() => Array.isArray(props.links[0]) ? props.links : [props.links]);
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      sections,
+      getULinkProps,
+      twMerge,
+      twJoin
+    };
+  }
+});
+</script>

package/dist/runtime/components/navigation/HorizontalNavigation.vue.d.ts

@@ -0,0 +1,44 @@
+import type { PropType } from 'vue';
+import { twJoin } from 'tailwind-merge';
+import type { HorizontalNavigationLink } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    links: {
+        type: PropType<HorizontalNavigationLink[] | HorizontalNavigationLink[][]>;
+        default: () => never[];
+    };
+    class: {
+        type: PropType<any>;
+        default: () => string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    sections: import("vue").ComputedRef<HorizontalNavigationLink[][]>;
+    getULinkProps: (props: any) => {};
+    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+    twJoin: typeof twJoin;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    links: {
+        type: PropType<HorizontalNavigationLink[] | HorizontalNavigationLink[][]>;
+        default: () => never[];
+    };
+    class: {
+        type: PropType<any>;
+        default: () => string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+    class: any;
+    links: HorizontalNavigationLink[] | HorizontalNavigationLink[][];
+}, {}>;
+export default _default;

package/dist/runtime/components/navigation/Pagination.vue.d.ts

@@ -165,6 +165,8 @@ declare const _default: import("vue").DefineComponent<{
     class: any;
     disabled: boolean;
     max: number;
+    prevButton: Button;
+    nextButton: Button;
     divider: string;
     pageCount: number;
     activeButton: Button;
@@ -173,7 +175,5 @@ declare const _default: import("vue").DefineComponent<{
     showLast: boolean;
     firstButton: Button;
     lastButton: Button;
-    prevButton: Button;
-    nextButton: Button;
 }, {}>;
 export default _default;

package/dist/runtime/components/navigation/VerticalNavigation.vue

@@ -34,9 +34,16 @@
             </span>
           </slot>
           <slot name="badge" :link="link" :is-active="isActive">
-            <span v-if="link.badge" :class="[ui.badge.base, isActive ? ui.badge.active : ui.badge.inactive]">
-              {{ link.badge }}
-            </span>
+            <UBadge
+              v-if="link.badge"
+              v-bind="{
+                size: ui.badge.size,
+                color: ui.badge.color,
+                variant: ui.badge.variant,
+                ...((typeof link.badge === 'string' || typeof link.badge === 'number') ? { label: link.badge } : link.badge)
+              }"
+              :class="ui.badge.base"
+            />
           </slot>
         </ULink>
       </li>
@@ -50,6 +57,7 @@ import { toRef, defineComponent, computed } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
+import UBadge from "../elements/Badge.vue";
 import ULink from "../elements/Link.vue";
 import UDivider from "../layout/Divider.vue";
 import { useUI } from "../../composables/useUI";
@@ -61,6 +69,7 @@ export default defineComponent({
   components: {
     UIcon,
     UAvatar,
+    UBadge,
     ULink,
     UDivider
   },