@destyler/dynamic 0.0.3 → 0.0.4

package/dist/component.d.mts

@@ -1,4 +1,854 @@
-export { DestylerDynamicClear, DestylerDynamicClearProps, DestylerDynamicInput, DestylerDynamicInputProps, DestylerDynamicItem, DestylerDynamicItemDelete, DestylerDynamicItemDeleteProps, DestylerDynamicItemProops, DestylerDynamicItemText, DestylerDynamicItemTextProps, DestylerDynamicRoot, DestylerDynamicRootProps } from './index.mjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';
+import * as vue from 'vue';
+import { PropType, Ref, SlotsType, VNode } from 'vue';
+import * as _destyler_primitive from '@destyler/primitive';
+import { Direction, ExtractPublicPropTypes } from '@destyler/shared';
+
+declare const dynamicRootProps: {
+    /**
+     * The controlled value of the tags input. Can be bind as `v-model`.
+     *
+     * @default () => []
+     */
+    readonly modelValue: {
+        readonly type: PropType<string[]>;
+        readonly required: false;
+        readonly default: () => never[];
+    };
+    /**
+     * The value of the tags that should be added.
+     * Use when you do not need to control the state of the tags input
+     */
+    readonly defaultValue: {
+        readonly type: PropType<string[]>;
+        readonly required: false;
+    };
+    /**
+     * When `true`, allow adding tags on paste.
+     * Work in conjunction with delimiter prop.
+     *
+     * @default false
+     */
+    readonly addOnPaste: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true` allow adding tags on tab keydown
+     *
+     * @default false
+     */
+    readonly addOnTab: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true` allow adding tags blur input
+     *
+     * @default false
+     */
+    readonly addOnBlur: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true`, allow duplicated tags.
+     *
+     * @default false
+     */
+    readonly duplicate: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the tags input.
+     *
+     * @default false
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * The character to trigger the addition of a new tag.
+     * Also used to split tags for `@paste` event
+     *
+     * @default ,
+     */
+    readonly delimiter: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: ",";
+    };
+    /**
+     s* The reading direction of the combobox when applicable.
+     */
+    readonly dir: {
+        readonly type: PropType<Direction>;
+        readonly required: false;
+    };
+    /**
+     * Maximum number of tags.
+     *
+     * @default 0
+     */
+    readonly max: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * When `true`, indicates that the user must add the
+     * tags input before the owning form can be submitted.
+     *
+     * @default false
+     */
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * The name of the tags input submitted with its
+     * owning form as part of a name/value pair.
+     */
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * The unique identifier of the machine.
+     */
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type DynamicRootProps = ExtractPublicPropTypes<typeof dynamicRootProps>;
+declare const dynamicRootEmits: {
+    /**
+     * Event handler called when the value is invalid
+     */
+    invalid: (_payload: string) => boolean;
+    /**
+     * Event handler called when the value changes
+     */
+    'update:modelValue': (_value: Array<string>) => boolean;
+};
+interface DynamicRootContext {
+    modelValue: Ref<Array<string>>;
+    onAddValue: (payload: string) => boolean;
+    onRemoveValue: (index: number) => void;
+    onInputKeydown: (event: KeyboardEvent) => void;
+    selectedElement: Ref<HTMLElement | undefined>;
+    isInvalidInput: Ref<boolean>;
+    addOnPaste: Ref<boolean>;
+    addOnTab: Ref<boolean>;
+    addOnBlur: Ref<boolean>;
+    disabled: Ref<boolean>;
+    delimiter: Ref<string>;
+    dir: Ref<Direction>;
+    max: Ref<number>;
+    id: Ref<string | undefined> | undefined;
+}
+declare const DynamicRoot: vue.DefineComponent<{
+    /**
+     * The controlled value of the tags input. Can be bind as `v-model`.
+     *
+     * @default () => []
+     */
+    readonly modelValue: {
+        readonly type: PropType<string[]>;
+        readonly required: false;
+        readonly default: () => never[];
+    };
+    /**
+     * The value of the tags that should be added.
+     * Use when you do not need to control the state of the tags input
+     */
+    readonly defaultValue: {
+        readonly type: PropType<string[]>;
+        readonly required: false;
+    };
+    /**
+     * When `true`, allow adding tags on paste.
+     * Work in conjunction with delimiter prop.
+     *
+     * @default false
+     */
+    readonly addOnPaste: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true` allow adding tags on tab keydown
+     *
+     * @default false
+     */
+    readonly addOnTab: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true` allow adding tags blur input
+     *
+     * @default false
+     */
+    readonly addOnBlur: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true`, allow duplicated tags.
+     *
+     * @default false
+     */
+    readonly duplicate: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the tags input.
+     *
+     * @default false
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * The character to trigger the addition of a new tag.
+     * Also used to split tags for `@paste` event
+     *
+     * @default ,
+     */
+    readonly delimiter: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: ",";
+    };
+    /**
+     s* The reading direction of the combobox when applicable.
+     */
+    readonly dir: {
+        readonly type: PropType<Direction>;
+        readonly required: false;
+    };
+    /**
+     * Maximum number of tags.
+     *
+     * @default 0
+     */
+    readonly max: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * When `true`, indicates that the user must add the
+     * tags input before the owning form can be submitted.
+     *
+     * @default false
+     */
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * The name of the tags input submitted with its
+     * owning form as part of a name/value pair.
+     */
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * The unique identifier of the machine.
+     */
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+    dir: vue.ComputedRef<Direction>;
+    isInvalidInput: Ref<boolean>;
+    disabled: Ref<boolean>;
+    focused: vue.ComputedRef<boolean>;
+    modelValue: Ref<string[]>;
+    isFormControl: vue.ComputedRef<boolean>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    /**
+     * Event handler called when the value is invalid
+     */
+    invalid: (_payload: string) => boolean;
+    /**
+     * Event handler called when the value changes
+     */
+    'update:modelValue': (_value: Array<string>) => boolean;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The controlled value of the tags input. Can be bind as `v-model`.
+     *
+     * @default () => []
+     */
+    readonly modelValue: {
+        readonly type: PropType<string[]>;
+        readonly required: false;
+        readonly default: () => never[];
+    };
+    /**
+     * The value of the tags that should be added.
+     * Use when you do not need to control the state of the tags input
+     */
+    readonly defaultValue: {
+        readonly type: PropType<string[]>;
+        readonly required: false;
+    };
+    /**
+     * When `true`, allow adding tags on paste.
+     * Work in conjunction with delimiter prop.
+     *
+     * @default false
+     */
+    readonly addOnPaste: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true` allow adding tags on tab keydown
+     *
+     * @default false
+     */
+    readonly addOnTab: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true` allow adding tags blur input
+     *
+     * @default false
+     */
+    readonly addOnBlur: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true`, allow duplicated tags.
+     *
+     * @default false
+     */
+    readonly duplicate: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the tags input.
+     *
+     * @default false
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * The character to trigger the addition of a new tag.
+     * Also used to split tags for `@paste` event
+     *
+     * @default ,
+     */
+    readonly delimiter: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly default: ",";
+    };
+    /**
+     s* The reading direction of the combobox when applicable.
+     */
+    readonly dir: {
+        readonly type: PropType<Direction>;
+        readonly required: false;
+    };
+    /**
+     * Maximum number of tags.
+     *
+     * @default 0
+     */
+    readonly max: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly default: 0;
+    };
+    /**
+     * When `true`, indicates that the user must add the
+     * tags input before the owning form can be submitted.
+     *
+     * @default false
+     */
+    readonly required: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+    /**
+     * The name of the tags input submitted with its
+     * owning form as part of a name/value pair.
+     */
+    readonly name: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * The unique identifier of the machine.
+     */
+    readonly id: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>> & {
+    onInvalid?: ((_payload: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((_value: string[]) => any) | undefined;
+}, {
+    readonly modelValue: string[];
+    readonly addOnPaste: boolean;
+    readonly addOnTab: boolean;
+    readonly addOnBlur: boolean;
+    readonly duplicate: boolean;
+    readonly disabled: boolean;
+    readonly delimiter: string;
+    readonly max: number;
+    readonly required: boolean;
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
+}, SlotsType<{
+    default: (opts: {
+        /**
+         * Current input values
+         */
+        modelValue: string[];
+    }) => VNode[];
+}>>;
+
+declare const dynamicClearProps: {
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type DynamicClearProps = ExtractPublicPropTypes<typeof dynamicClearProps>;
+declare const DynamicClear: vue.DefineComponent<{
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    context: DynamicRootContext;
+    handleCancel: () => void;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
+}, {}>;
+
+declare const dynamicInputProps: {
+    /**
+     * @default input
+     */
+    readonly as: {
+        readonly default: "input";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * The placeholder character to use for empty tags input.
+     */
+    readonly placeholder: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * Focus on element when mounted.
+     */
+    readonly autoFocus: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    /**
+     * Maximum number of character allowed.
+     */
+    readonly maxLength: {
+        readonly type: PropType<number>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type DynamicInputProps = ExtractPublicPropTypes<typeof dynamicInputProps>;
+declare const DynamicInput: vue.DefineComponent<{
+    /**
+     * @default input
+     */
+    readonly as: {
+        readonly default: "input";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * The placeholder character to use for empty tags input.
+     */
+    readonly placeholder: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * Focus on element when mounted.
+     */
+    readonly autoFocus: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    /**
+     * Maximum number of character allowed.
+     */
+    readonly maxLength: {
+        readonly type: PropType<number>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+    context: DynamicRootContext;
+    handleInput: (event: InputEvent) => void;
+    handlePaste: (event: ClipboardEvent) => void;
+    handleCustomKeydown: (event: Event) => Promise<void>;
+    handleBlur: (event: Event) => void;
+    handleTab: (event: Event) => void;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * @default input
+     */
+    readonly as: {
+        readonly default: "input";
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    /**
+     * The placeholder character to use for empty tags input.
+     */
+    readonly placeholder: {
+        readonly type: PropType<string>;
+        readonly required: false;
+    };
+    /**
+     * Focus on element when mounted.
+     */
+    readonly autoFocus: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    /**
+     * Maximum number of character allowed.
+     */
+    readonly maxLength: {
+        readonly type: PropType<number>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
+}, {}>;
+
+declare const dynamicItemProps: {
+    /**
+     * Value associated with the tags
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the tags input.
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type DynamicItemProops = ExtractPublicPropTypes<typeof dynamicItemProps>;
+interface DynamicItemContext {
+    value: Ref<string>;
+    isSelected: Ref<boolean>;
+    disabled: Ref<boolean | undefined>;
+    textId: string;
+}
+declare const DynamicItem: vue.DefineComponent<{
+    /**
+     * Value associated with the tags
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the tags input.
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
+    textId: string;
+    isSelected: vue.ComputedRef<boolean>;
+    disabled: vue.ComputedRef<boolean>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * Value associated with the tags
+     */
+    readonly value: {
+        readonly type: PropType<string>;
+        readonly required: true;
+    };
+    /**
+     * When `true`, prevents the user from interacting with the tags input.
+     */
+    readonly disabled: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+    };
+    readonly as: {
+        readonly type: PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
+}, {}>;
+
+declare const dynamicItemDeleteProps: {
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type DynamicItemDeleteProps = ExtractPublicPropTypes<typeof dynamicItemDeleteProps>;
+declare const DynamicItemDelete: vue.DefineComponent<{
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    context: DynamicRootContext;
+    itemContext: DynamicItemContext;
+    disabled: vue.ComputedRef<boolean>;
+    handleDelete: () => void;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * @default button
+     */
+    readonly as: {
+        readonly default: "button";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
+}, {}>;
+
+declare const dynamicItemTextProps: {
+    /**
+     * @default span
+     */
+    readonly as: {
+        readonly default: "span";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+};
+type DynamicItemTextProps = ExtractPublicPropTypes<typeof dynamicItemTextProps>;
+declare const DynamicItemText: vue.DefineComponent<{
+    /**
+     * @default span
+     */
+    readonly as: {
+        readonly default: "span";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}, {
+    itemContext: DynamicItemContext;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * @default span
+     */
+    readonly as: {
+        readonly default: "span";
+        readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
+        readonly required: false;
+    };
+    readonly asChild: {
+        readonly type: vue.PropType<boolean>;
+        readonly required: false;
+        readonly default: false;
+    };
+}>>, {
+    readonly as: _destyler_primitive.AsTag | vue.Component;
+    readonly asChild: boolean;
+}, SlotsType<{
+    default: (opts: {
+        /**
+         * The text of the item.
+         */
+        text: string;
+    }) => VNode[];
+}>>;
+
+export { DynamicClear, type DynamicClearProps, DynamicInput, type DynamicInputProps, DynamicItem, DynamicItemDelete, type DynamicItemDeleteProps, type DynamicItemProops, DynamicItemText, type DynamicItemTextProps, DynamicRoot, type DynamicRootProps, dynamicClearProps, dynamicInputProps, dynamicItemDeleteProps, dynamicItemProps, dynamicItemTextProps, dynamicRootEmits, dynamicRootProps };