@byyuurin/ui 0.2.0 → 0.3.0

package/dist/runtime/components/InputNumber.vue.d.ts

@@ -1,11 +1,13 @@
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { NumberFieldRootProps } from 'reka-ui';
 import theme from '#build/ui/input-number';
-import type { ButtonProps, ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { ButtonProps, ComponentBaseProps, ComponentUIProps, IconProps, LinkPropsKeys } from '../types';
+import type { InputHTMLAttributes } from '../types/html';
 import type { ModelModifiers } from '../types/input';
 import type { MaybeNull, StaticSlot } from '../types/utils';
 type ThemeVariants = VariantProps<typeof theme>;
-export interface InputNumberProps extends ComponentBaseProps, Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly'> {
+type InputNumberValue = MaybeNull<number>;
+export interface InputNumberProps<T extends InputNumberValue = InputNumberValue> extends ComponentBaseProps, Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly'>, /** @vue-ignore */ Omit<InputHTMLAttributes, 'disabled' | 'min' | 'max' | 'readonly' | 'required' | 'step' | 'name' | 'placeholder'> {
     /**
      * The element or component this component should render as.
      * @default "div"
@@ -30,7 +32,7 @@ export interface InputNumberProps extends ComponentBaseProps, Pick<NumberFieldRo
      * Configure the increment button. The `color` and `size` are inherited.
      * @default { variant: 'link' }
      */
-    increment?: boolean | ButtonProps;
+    increment?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed to increment the value.
      * @default app.icons.plus
@@ -42,7 +44,7 @@ export interface InputNumberProps extends ComponentBaseProps, Pick<NumberFieldRo
      * Configure the decrement button. The `color` and `size` are inherited.
      * @default { variant: 'link' }
      */
-    decrement?: boolean | ButtonProps;
+    decrement?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed to decrement the value.
      * @default app.icons.minus
@@ -52,11 +54,11 @@ export interface InputNumberProps extends ComponentBaseProps, Pick<NumberFieldRo
     decrementDisabled?: boolean;
     autofocus?: boolean;
     autofocusDelay?: number;
-    modelModifiers?: Pick<ModelModifiers, 'optional'>;
+    modelModifiers?: Pick<ModelModifiers<T>, 'optional'>;
     ui?: ComponentUIProps<typeof theme>;
 }
-export interface InputNumberEmits {
-    'update:modelValue': [value: number];
+export interface InputNumberEmits<T extends InputNumberValue = InputNumberValue> {
+    'update:modelValue': [value: T];
     'blur': [event: FocusEvent];
     'change': [event: Event];
 }
@@ -64,123 +66,125 @@ export interface InputNumberSlots {
     increment: StaticSlot;
     decrement: StaticSlot;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<InputNumberProps, {
-    inputRef: import("vue").Ref<MaybeNull<{
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: {
-            readonly asChild?: boolean | undefined;
-            readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot<any> | undefined;
-        }>;
-        $root: import("vue").ComponentPublicInstance | null;
-        $parent: import("vue").ComponentPublicInstance | null;
-        $host: Element | null;
-        $emit: (event: string, ...args: any[]) => void;
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-            as: import("reka-ui").AsTag | import("vue").Component;
-        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
-            beforeCreate?: (() => void) | (() => void)[];
-            created?: (() => void) | (() => void)[];
-            beforeMount?: (() => void) | (() => void)[];
-            mounted?: (() => void) | (() => void)[];
-            beforeUpdate?: (() => void) | (() => void)[];
-            updated?: (() => void) | (() => void)[];
-            activated?: (() => void) | (() => void)[];
-            deactivated?: (() => void) | (() => void)[];
-            beforeDestroy?: (() => void) | (() => void)[];
-            beforeUnmount?: (() => void) | (() => void)[];
-            destroyed?: (() => void) | (() => void)[];
-            unmounted?: (() => void) | (() => void)[];
-            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
-    } & Readonly<{
-        as: import("reka-ui").AsTag | import("vue").Component;
-    }> & Omit<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
-        $slots: {
-            default?: (props: {}) => any;
-        };
-    }>, MaybeNull<{
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: {
-            readonly asChild?: boolean | undefined;
-            readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot<any> | undefined;
-        }>;
-        $root: import("vue").ComponentPublicInstance | null;
-        $parent: import("vue").ComponentPublicInstance | null;
-        $host: Element | null;
-        $emit: (event: string, ...args: any[]) => void;
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-            as: import("reka-ui").AsTag | import("vue").Component;
-        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
-            beforeCreate?: (() => void) | (() => void)[];
-            created?: (() => void) | (() => void)[];
-            beforeMount?: (() => void) | (() => void)[];
-            mounted?: (() => void) | (() => void)[];
-            beforeUpdate?: (() => void) | (() => void)[];
-            updated?: (() => void) | (() => void)[];
-            activated?: (() => void) | (() => void)[];
-            deactivated?: (() => void) | (() => void)[];
-            beforeDestroy?: (() => void) | (() => void)[];
-            beforeUnmount?: (() => void) | (() => void)[];
-            destroyed?: (() => void) | (() => void)[];
-            unmounted?: (() => void) | (() => void)[];
-            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
-    } & Readonly<{
-        as: import("reka-ui").AsTag | import("vue").Component;
-    }> & Omit<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
-        $slots: {
-            default?: (props: {}) => any;
-        };
-    }>>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (event: Event) => any;
-    blur: (event: FocusEvent) => any;
-    "update:modelValue": (value: number) => any;
-}, string, import("vue").PublicProps, Readonly<InputNumberProps> & Readonly<{
-    onChange?: ((event: Event) => any) | undefined;
-    onBlur?: ((event: FocusEvent) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-}>, {
-    orientation: "horizontal" | "vertical";
-    increment: boolean | ButtonProps;
-    decrement: boolean | ButtonProps;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, InputNumberSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+declare const __VLS_export: <T extends InputNumberValue = InputNumberValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<InputNumberProps<T> & {
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        inputRef: import("vue").Ref<MaybeNull<{
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly asChild?: boolean | undefined;
+                readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any> | undefined;
+            }>;
+            $root: import("vue").ComponentPublicInstance | null;
+            $parent: import("vue").ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+                as: import("reka-ui").AsTag | import("vue").Component;
+            }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{
+            as: import("reka-ui").AsTag | import("vue").Component;
+        }> & Omit<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: {
+                default?: (props: {}) => any;
+            };
+        }>, MaybeNull<{
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly asChild?: boolean | undefined;
+                readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any> | undefined;
+            }>;
+            $root: import("vue").ComponentPublicInstance | null;
+            $parent: import("vue").ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+                as: import("reka-ui").AsTag | import("vue").Component;
+            }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{
+            as: import("reka-ui").AsTag | import("vue").Component;
+        }> & Omit<Readonly<import("reka-ui").NumberFieldInputProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: {
+                default?: (props: {}) => any;
+            };
+        }>>;
+    }>) => void;
+    attrs: any;
+    slots: InputNumberSlots;
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/InputTags.vue

@@ -61,6 +61,7 @@ const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.inputTags));
   return styler({
     ...props,
+    type: void 0,
     color: color.value,
     size: fieldGroupSize.value || formFieldSize.value,
     highlight: highlight.value,
@@ -99,57 +100,57 @@ defineExpose({
 </script>
 
 <template>
-  <TagsInputRoot
-    v-slot="{ modelValue: tags }"
-    :model-value="props.modelValue"
-    :default-value="props.defaultValue"
-    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
-    v-bind="{ ...rootProps, id, name, disabled }"
-    data-part="root"
-    @update:model-value="onUpdate"
-  >
-    <TagsInputItem
-      v-for="(item, index) in tags"
-      :key="index"
-      :value="item"
-      :class="ui.item({ class: props.ui?.item })"
-      data-part="item"
-    >
-      <TagsInputItemText :class="ui.itemText({ class: props.ui?.itemText })" data-part="itemText">
-        <slot name="item-text" :item="item" :index="index" :ui="ui"></slot>
-      </TagsInputItemText>
-
-      <TagsInputItemDelete :disabled="disabled" :class="ui.itemDelete({ class: props.ui?.itemDelete })" data-part="itemDelete">
-        <slot name="item-delete" :item="item" :index="index" :ui="ui">
-          <Icon :name="props.deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: props.ui?.itemDeleteIcon })" data-part="itemDeleteIcon" />
-        </slot>
-      </TagsInputItemDelete>
-    </TagsInputItem>
-
-    <TagsInputInput
-      ref="inputRef"
-      v-bind="{ ...$attrs, ...ariaAttrs }"
-      :placeholder="props.placeholder"
-      :max-length="props.maxLength"
-      :class="ui.input({ class: props.ui?.input })"
-      data-part="input"
-      @blur="onBlur"
-      @focus="onFocus"
-    />
-
-    <span v-if="isLeading || props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
-      <slot name="leading" :ui="ui">
-        <Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" data-part="leadingIcon" />
-        <Avatar v-else-if="props.avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="props.avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" data-part="leadingAvatar" />
-      </slot>
-    </span>
-
-    <slot :ui="ui"></slot>
-
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
-      <slot name="trailing" :ui="ui">
-        <Icon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" data-part="trailingIcon" />
-      </slot>
-    </span>
-  </TagsInputRoot>
+  <TagsInputRoot
+    v-slot="{ modelValue: tags }"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
+    v-bind="{ ...rootProps, id, name, disabled }"
+    data-part="root"
+    @update:model-value="onUpdate"
+  >
+    <TagsInputItem
+      v-for="(item, index) in tags"
+      :key="index"
+      :value="item"
+      :class="ui.item({ class: props.ui?.item })"
+      data-part="item"
+    >
+      <TagsInputItemText :class="ui.itemText({ class: props.ui?.itemText })" data-part="itemText">
+        <slot name="item-text" :item="item" :index="index" :ui="ui"></slot>
+      </TagsInputItemText>
+
+      <TagsInputItemDelete :disabled="disabled" :class="ui.itemDelete({ class: props.ui?.itemDelete })" data-part="itemDelete">
+        <slot name="item-delete" :item="item" :index="index" :ui="ui">
+          <Icon :name="props.deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: props.ui?.itemDeleteIcon })" data-part="itemDeleteIcon" />
+        </slot>
+      </TagsInputItemDelete>
+    </TagsInputItem>
+
+    <TagsInputInput
+      ref="inputRef"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      :placeholder="props.placeholder"
+      :max-length="props.maxLength"
+      :class="ui.input({ class: props.ui?.input })"
+      data-part="input"
+      @blur="onBlur"
+      @focus="onFocus"
+    />
+
+    <span v-if="isLeading || props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+      <slot name="leading" :ui="ui">
+        <Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" data-part="leadingIcon" />
+        <Avatar v-else-if="props.avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="props.avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" data-part="leadingAvatar" />
+      </slot>
+    </span>
+
+    <slot :ui="ui"></slot>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+      <slot name="trailing" :ui="ui">
+        <Icon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" data-part="trailingIcon" />
+      </slot>
+    </span>
+  </TagsInputRoot>
 </template>

package/dist/runtime/components/InputTags.vue.d.ts

@@ -3,10 +3,11 @@ import type { AcceptableInputValue, TagsInputRootEmits, TagsInputRootProps } fro
 import theme from '#build/ui/input-tags';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
+import type { InputHTMLAttributes } from '../types/html';
 import type { StaticSlot } from '../types/utils';
 type ThemeVariants = VariantProps<typeof theme>;
 export type InputTagsItem = AcceptableInputValue;
-export interface InputTagsProps<T extends InputTagsItem = InputTagsItem> extends ComponentBaseProps, Pick<TagsInputRootProps<T>, 'modelValue' | 'defaultValue' | 'addOnPaste' | 'addOnTab' | 'addOnBlur' | 'duplicate' | 'disabled' | 'delimiter' | 'max' | 'id' | 'convertValue' | 'displayValue' | 'name' | 'required'>, UseComponentIconsProps {
+export interface InputTagsProps<T extends InputTagsItem = InputTagsItem> extends ComponentBaseProps, Pick<TagsInputRootProps<T>, 'modelValue' | 'defaultValue' | 'addOnPaste' | 'addOnTab' | 'addOnBlur' | 'duplicate' | 'disabled' | 'delimiter' | 'max' | 'id' | 'convertValue' | 'displayValue' | 'name' | 'required'>, UseComponentIconsProps, /** @vue-ignore */ Omit<InputHTMLAttributes, 'disabled' | 'max' | 'required' | 'name' | 'placeholder'> {
     /**
      * The element or component this component should render as.
      * @default "div"
@@ -26,7 +27,7 @@ export interface InputTagsProps<T extends InputTagsItem = InputTagsItem> extends
     autofocusDelay?: number;
     /**
      * The icon displayed to delete a tag.
-     * @default appConfig.ui.icons.close
+     * @default app.icons.close
      */
     deleteIcon?: IconProps['name'];
     /** Highlight the ring color like a focus state. */
@@ -59,27 +60,31 @@ export interface InputTagsSlots<T extends InputTagsItem = InputTagsItem> {
         ui: ComponentStyler<typeof theme>;
     }>;
 }
-declare const __VLS_export: <T extends InputTagsItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<InputTagsProps<AcceptableInputValue> & {
-        onChange?: ((event: Event) => any) | undefined;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends InputTagsItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<InputTagsProps<AcceptableInputValue> & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
         onFocus?: ((event: FocusEvent) => any) | undefined;
         onInvalid?: ((payload: T) => any) | undefined;
         "onUpdate:modelValue"?: ((payload: T[]) => any) | undefined;
         onAddTag?: ((payload: T) => any) | undefined;
         onRemoveTag?: ((payload: T) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         inputRef: Readonly<import("vue").Ref<HTMLInputElement, HTMLInputElement>>;
     }>) => void;
     attrs: any;
     slots: InputTagsSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "invalid", payload: T) => void) & ((evt: "update:modelValue", payload: T[]) => void) & ((evt: "addTag", payload: T) => void) & ((evt: "removeTag", payload: T) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "invalid", payload: T) => void) & ((evt: "update:modelValue", payload: T[]) => void) & ((evt: "addTag", payload: T) => void) & ((evt: "removeTag", payload: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Kbd.vue

@@ -26,7 +26,7 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.base({ class: props.class })" data-part="base">
-    <slot>{{ getKbdKey(props.value) }}</slot>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.base({ class: props.class })" data-part="base">
+    <slot>{{ getKbdKey(props.value) }}</slot>
+  </Primitive>
 </template>

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

@@ -22,11 +22,11 @@ export interface KbdProps extends ComponentBaseProps {
 export interface KbdSlots {
     default: StaticSlot;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<KbdProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KbdProps> & Readonly<{}>, {
     as: import("reka-ui").AsTag | import("vue").Component;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, KbdSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Link.vue

@@ -29,13 +29,14 @@ const props = defineProps({
   to: { type: null, required: false },
   href: { type: null, required: false },
   external: { type: Boolean, required: false },
-  target: { type: [String, Object], required: false },
-  rel: { type: [String, Object], required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
   noRel: { type: Boolean, required: false },
   prefetchedClass: { type: String, required: false },
   prefetch: { type: Boolean, required: false },
   prefetchOn: { type: [String, Object], required: false },
   noPrefetch: { type: Boolean, required: false },
+  trailingSlash: { type: String, required: false },
   activeClass: { type: String, required: false },
   exactActiveClass: { type: String, required: false },
   ariaCurrentValue: { type: String, required: false, default: "page" },
@@ -87,14 +88,14 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
 </script>
 
 <template>
-  <NuxtLink
-    v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }"
-    v-bind="nuxtLinkProps"
-    :to="to"
-    custom
-  >
-    <template v-if="custom">
-      <slot
+  <NuxtLink
+    v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }"
+    v-bind="nuxtLinkProps"
+    :to="to"
+    custom
+  >
+    <template v-if="custom">
+      <slot
         v-bind="{
   ...$attrs,
   ...props.exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
@@ -105,13 +106,13 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
   target,
   isExternal,
   active: isLinkActive({ route: linkRoute, isActive, isExactActive })
-}"
-      >
-        {{ props.label }}
-      </slot>
-    </template>
-    <LinkBase
-      v-else
+}"
+      >
+        {{ props.label }}
+      </slot>
+    </template>
+    <LinkBase
+      v-else
       v-bind="{
   ...$attrs,
   ...props.exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
@@ -121,12 +122,12 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
   rel,
   target,
   isExternal
-}"
-      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
-    >
-      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })">
-        {{ props.label }}
-      </slot>
-    </LinkBase>
-  </NuxtLink>
+}"
+      :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+    >
+      <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })">
+        {{ props.label }}
+      </slot>
+    </LinkBase>
+  </NuxtLink>
 </template>