@nuxt/ui 2.10.0 → 2.11.1

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

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import type { TextareaSize, TextareaVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: (NumberConstructor | StringConstructor)[];
@@ -49,7 +50,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<TextareaSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -59,7 +60,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<TextareaVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -69,11 +70,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
+    };
+    modelModifiers: {
+        type: PropType<{
+            trim?: boolean | undefined;
+            lazy?: boolean | undefined;
+            number?: boolean | undefined;
+        }>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -84,7 +93,8 @@ declare const _default: import("vue").DefineComponent<{
     inputId: import("vue").Ref<string | undefined>;
     textarea: import("vue").Ref<HTMLTextAreaElement | null>;
     textareaClass: import("vue").ComputedRef<string>;
-    onInput: (event: InputEvent) => void;
+    onInput: (event: Event) => void;
+    onChange: (event: Event) => void;
     onBlur: (event: FocusEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "update:modelValue")[], "blur" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -136,7 +146,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<TextareaSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -146,7 +156,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<TextareaVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -156,32 +166,45 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
+    };
+    modelModifiers: {
+        type: PropType<{
+            trim?: boolean | undefined;
+            lazy?: boolean | undefined;
+            number?: boolean | undefined;
+        }>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
     resize: boolean;
+    size: TextareaSize;
+    ui: any;
     id: string;
     color: any;
-    ui: Partial<any>;
     name: string;
     class: any;
     modelValue: string | number;
     rows: number;
     disabled: boolean;
-    variant: any;
+    variant: TextareaVariant;
     required: boolean;
-    size: string | number | symbol;
     placeholder: string;
     padded: boolean;
     autofocus: boolean;
     autofocusDelay: number;
+    modelModifiers: {
+        trim?: boolean | undefined;
+        lazy?: boolean | undefined;
+        number?: boolean | undefined;
+    };
     autoresize: boolean;
     textareaClass: string;
 }, {}>;

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

@@ -7,7 +7,7 @@
     :class="switchClass"
     v-bind="attrs"
   >
-    <span :class="[active ? ui.container.active : ui.container.inactive, ui.container.base]">
+    <span :class="containerClass">
       <span v-if="onIcon" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
         <UIcon :name="onIcon" :class="onIconClass" />
       </span>
@@ -67,13 +67,20 @@ export default defineComponent({
         return appConfig.ui.colors.includes(value);
       }
     },
+    size: {
+      type: String,
+      default: config.default.size,
+      validator(value) {
+        return Object.keys(config.size).includes(value);
+      }
+    },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   emits: ["update:modelValue"],
@@ -92,19 +99,29 @@ export default defineComponent({
     const switchClass = computed(() => {
       return twMerge(twJoin(
         ui.value.base,
+        ui.value.size[props.size],
         ui.value.rounded,
-        ui.value.ring.replaceAll("{color}", color.value),
-        (active.value ? ui.value.active : ui.value.inactive).replaceAll("{color}", color.value)
+        color.value && ui.value.ring.replaceAll("{color}", color.value),
+        color.value && (active.value ? ui.value.active : ui.value.inactive).replaceAll("{color}", color.value)
       ), props.class);
     });
+    const containerClass = computed(() => {
+      return twJoin(
+        ui.value.container.base,
+        ui.value.container.size[props.size],
+        active.value ? ui.value.container.active[props.size] : ui.value.container.inactive
+      );
+    });
     const onIconClass = computed(() => {
       return twJoin(
-        ui.value.icon.on.replaceAll("{color}", color.value)
+        ui.value.icon.size[props.size],
+        color.value && ui.value.icon.on.replaceAll("{color}", color.value)
       );
     });
     const offIconClass = computed(() => {
       return twJoin(
-        ui.value.icon.off.replaceAll("{color}", color.value)
+        ui.value.icon.size[props.size],
+        color.value && ui.value.icon.off.replaceAll("{color}", color.value)
       );
     });
     return {
@@ -116,6 +133,7 @@ export default defineComponent({
       inputId,
       active,
       switchClass,
+      containerClass,
       onIconClass,
       offIconClass
     };

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

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import type { ToggleSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     id: {
         type: StringConstructor;
@@ -29,13 +30,18 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
         validator(value: string): any;
     };
+    size: {
+        type: PropType<ToggleSize>;
+        default: any;
+        validator(value: string): boolean;
+    };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -46,6 +52,7 @@ declare const _default: import("vue").DefineComponent<{
     inputId: import("vue").Ref<string | undefined>;
     active: import("vue").WritableComputedRef<boolean>;
     switchClass: import("vue").ComputedRef<string>;
+    containerClass: import("vue").ComputedRef<string>;
     onIconClass: import("vue").ComputedRef<string>;
     offIconClass: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -78,20 +85,26 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
         validator(value: string): any;
     };
+    size: {
+        type: PropType<ToggleSize>;
+        default: any;
+        validator(value: string): boolean;
+    };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => "";
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    size: ToggleSize;
+    ui: any;
     id: string;
     color: any;
-    ui: Partial<any>;
     name: string;
     class: any;
     modelValue: boolean;

package/dist/runtime/components/layout/Card.vue

@@ -33,11 +33,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

package/dist/runtime/components/layout/Card.vue.d.ts

@@ -6,11 +6,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -25,14 +25,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
+    ui: any;
     class: any;
     as: string;
 }, {}>;

package/dist/runtime/components/layout/Container.vue

@@ -21,11 +21,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

package/dist/runtime/components/layout/Container.vue.d.ts

@@ -6,11 +6,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -25,14 +25,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
+    ui: any;
     class: any;
     as: string;
 }, {}>;

package/dist/runtime/components/layout/Divider.vue

@@ -59,11 +59,11 @@ export default defineComponent({
     },
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {
@@ -82,16 +82,11 @@ export default defineComponent({
       );
     });
     const borderClass = computed(() => {
-      const typeClass = {
-        solid: "border-solid",
-        dotted: "border-dotted",
-        dashed: "border-dashed"
-      }[props.type];
       return twJoin(
         ui.value.border.base,
         isHorizontal.value ? ui.value.border.horizontal : ui.value.border.vertical,
         isHorizontal.value ? ui.value.border.size.horizontal : ui.value.border.size.vertical,
-        typeClass
+        ui.value.border.type[props.type]
       );
     });
     return {

package/dist/runtime/components/layout/Divider.vue.d.ts

@@ -25,11 +25,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -64,19 +64,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
+    orientation: "horizontal" | "vertical";
+    ui: any;
     icon: string;
     avatar: Avatar;
-    ui: Partial<any>;
+    type: "solid" | "dotted" | "dashed";
     class: any;
     label: string;
-    type: "solid" | "dotted" | "dashed";
-    orientation: "horizontal" | "vertical";
 }, {}>;
 export default _default;

package/dist/runtime/components/layout/Skeleton.vue

@@ -15,11 +15,11 @@ export default defineComponent({
   props: {
     class: {
       type: [String, Object, Array],
-      default: void 0
+      default: () => ""
     },
     ui: {
       type: Object,
-      default: void 0
+      default: () => ({})
     }
   },
   setup(props) {

package/dist/runtime/components/layout/Skeleton.vue.d.ts

@@ -2,11 +2,11 @@ import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }, {
     ui: import("vue").ComputedRef<any>;
@@ -17,14 +17,14 @@ declare const _default: import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     class: {
         type: PropType<any>;
-        default: undefined;
+        default: () => string;
     };
     ui: {
-        type: PropType<Partial<any>>;
-        default: undefined;
+        type: PropType<any>;
+        default: () => {};
     };
 }>>, {
-    ui: Partial<any>;
+    ui: any;
     class: any;
 }, {}>;
 export default _default;

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

@@ -0,0 +1,78 @@
+<template>
+  <nav aria-label="Breadcrumb" :class="ui.wrapper" v-bind="attrs">
+    <ol :class="ui.ol">
+      <li v-for="(link, index) in links" :key="index" :class="ui.li">
+        <ULink
+          as="span"
+          :class="[ui.base, index === links.length - 1 ? ui.active : !!link.to ? ui.inactive : '']"
+          v-bind="omit(link, ['label', 'icon', 'iconClass'])"
+          :aria-current="index === links.length - 1 ? 'page' : undefined"
+        >
+          <slot name="icon" :link="link" :index="index" :is-active="index === links.length - 1">
+            <UIcon
+              v-if="link.icon"
+              :name="link.icon"
+              :class="[ui.icon.base, index === links.length - 1 ? ui.icon.active : !!link.to ? ui.icon.inactive : '', link.iconClass]"
+            />
+          </slot>
+
+          <slot :link="link" :index="index" :is-active="index === links.length - 1">
+            {{ link.label }}
+          </slot>
+        </ULink>
+
+        <slot v-if="index < links.length - 1" name="divider">
+          <template v-if="divider">
+            <UIcon v-if="divider.startsWith('i-')" :name="divider" :class="ui.divider.base" role="presentation" />
+            <span v-else role="presentation">{{ divider }}</span>
+          </template>
+        </slot>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+import { defineComponent, toRef } from "vue";
+import UIcon from "../elements/Icon.vue";
+import ULink from "../elements/Link.vue";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig, omit } from "../../utils";
+import appConfig from "#build/app.config";
+import { breadcrumb } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.breadcrumb, breadcrumb);
+export default defineComponent({
+  components: {
+    UIcon,
+    ULink
+  },
+  inheritAttrs: false,
+  props: {
+    links: {
+      type: Array,
+      default: () => []
+    },
+    divider: {
+      type: String,
+      default: () => config.default.divider
+    },
+    class: {
+      type: [String, Object, Array],
+      default: () => ""
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const { ui, attrs } = useUI("breadcrumb", toRef(props, "ui"), config, toRef(props, "class"));
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      omit
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,50 @@
+import type { PropType } from 'vue';
+import { omit } from '../../utils';
+import type { BreadcrumbLink } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    links: {
+        type: PropType<BreadcrumbLink[]>;
+        default: () => never[];
+    };
+    divider: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    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>>;
+    omit: typeof omit;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    links: {
+        type: PropType<BreadcrumbLink[]>;
+        default: () => never[];
+    };
+    divider: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    class: {
+        type: PropType<any>;
+        default: () => string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+    class: any;
+    divider: string;
+    links: BreadcrumbLink[];
+}, {}>;
+export default _default;