@evance/evance-ui 1.0.33 → 1.0.36

package/dist/types/EvTextarea.d.ts

@@ -5,6 +5,7 @@ import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
 import { Ref } from 'vue';
+import { ShallowRef } from 'vue';
 import { StyleValue } from 'vue';
 import { VNodeProps } from 'vue';
 
@@ -50,9 +51,7 @@ clearable: BooleanConstructor;
 loading: BooleanConstructor;
 placeholder: StringConstructor;
 }, {
-reset: () => void;
-resetValidation: () => void;
-validate: (silent?: boolean) => Promise<string[]>;
+field: FormField;
 input: Ref<HTMLInputElement>;
 focus: () => void;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -121,6 +120,184 @@ autogrow: boolean;
     label(): never;
 }>>;
 
+/**
+ * # Form
+ *
+ * @todo: decide whether to implement validators/shapers/resolvers and their terminology.
+ * @todo: decide whether and how to support declarative schemas like Zod (https://zod.dev/?id=introduction)
+ *
+ */
+declare class Form {
+    private props;
+    private fields;
+    private valid;
+    private validating;
+    readonly errors: Ref<ValidationError[]>;
+    readonly data: Ref<object>;
+    readonly validateOn: Ref<FormProps["validateOn"]>;
+    constructor(props: FormProps);
+    get isDisabled(): boolean;
+    get isReadonly(): boolean;
+    get isValid(): boolean | null;
+    get isValidating(): boolean;
+    addErrors(errors: ValidationError[]): void;
+    /**
+     * ## Add Field
+     * @param field
+     */
+    addField(field: FormField): void;
+    /**
+     * ## Get Field
+     * @param name
+     */
+    getField(name: string): FormField | undefined;
+    /**
+     * ## Has Field
+     *
+     * Returns `true` if the field `name` already exists in the form.
+     *
+     * @param id
+     */
+    hasField(id: string): boolean;
+    /**
+     * ## Remove Field
+     * @param id
+     */
+    removeField(id: string): void;
+    /**
+     * ## Reset
+     */
+    reset(): void;
+    /**
+     * ## Reset Validation
+     */
+    resetValidation(): void;
+    /**
+     * ## Validate
+     */
+    validate(): Promise<{
+        valid: boolean;
+        errors: ValidationError[];
+        addErrors: (errors: ValidationError[]) => void;
+    }>;
+}
+
+/**
+ * # Form Field
+ *
+ * @todo: decide on terminology for shapers/validators/resolvers/rules (it would be good to have shapers)
+ *
+ */
+declare class FormField {
+    readonly form: Form | null;
+    private props;
+    private group;
+    readonly focused: Ref<boolean>;
+    readonly focusedVisible: Ref<boolean>;
+    private readonly messages;
+    readonly model: Ref<any>;
+    readonly pristine: ShallowRef<boolean>;
+    readonly uid: number;
+    readonly validating: ShallowRef<boolean>;
+    private readonly validationModel;
+    constructor(form: Form | null, props: FormFieldProps, group?: FormField | undefined);
+    get classes(): {
+        "is-error": boolean;
+        "is-dirty": boolean;
+        "is-disabled": boolean;
+        "is-readonly": boolean;
+        "is-focused": boolean;
+        "is-focused-visible": boolean;
+    };
+    get errorMessages(): string[];
+    get id(): string;
+    get isDirty(): boolean;
+    get isDisabled(): boolean;
+    get isFocused(): boolean;
+    get isFocusedVisible(): boolean;
+    get isReadonly(): boolean;
+    get isPristine(): boolean;
+    get isShowErrorMessages(): boolean;
+    get isValid(): boolean | null;
+    get isValidating(): boolean;
+    get name(): string;
+    get validateOn(): {
+        blur: boolean;
+        input: boolean;
+        submit: boolean;
+        lazy: boolean;
+    };
+    get value(): any;
+    set value(value: any);
+    /**
+     * ## Add Error Message
+     *
+     * Add one or more validation messages to the field.
+     *
+     * @param message
+     */
+    addError(...message: string[]): void;
+    /**
+     * ## Add Validator
+     *
+     * Add one or more validation functions to the field.
+     *
+     * @param validator
+     */
+    addValidator(...validator: Validator[]): void;
+    /**
+     * ## Blur
+     * @param e
+     */
+    blur(): void;
+    /**
+     * ## Focus
+     *
+     * @param e
+     */
+    focus(e?: Event): void;
+    /**
+     * ## Reset
+     */
+    reset(): void;
+    /**
+     * ## Reset Validation
+     */
+    resetValidation(): void;
+    /**
+     * ## Validate
+     */
+    validate(silent?: boolean): Promise<string[]>;
+}
+
+/**
+ * # Form Field Props
+ */
+declare interface FormFieldProps {
+    id?: string;
+    disabled?: boolean;
+    error?: boolean;
+    focused?: boolean;
+    name?: string;
+    readonly?: boolean;
+    validators: Validator[];
+    modelValue?: any;
+    validateOn?: ValidateOnEvent | `${ValidateOnEvent} lazy` | `lazy ${ValidateOnEvent}` | "lazy";
+    validationValue?: any;
+}
+
+/**
+ * # Form Props
+ */
+declare interface FormProps {
+    data?: object;
+    disabled?: boolean;
+    readonly?: boolean;
+    modelValue?: boolean | null;
+    "onUpdate:modelValue"?: ((val: boolean | null) => void) | undefined;
+    validateOn?: FormFieldProps["validateOn"];
+}
+
 /**
  * # Input Appearance
  */
@@ -282,6 +459,16 @@ export declare const makeEvTextareaProps: <Defaults extends {
  */
 declare type ValidateOnEvent = "blur" | "input" | "submit";
 
+/**
+ * # Validation Error
+ *
+ * Represents a single error message with a name identifier.
+ */
+declare interface ValidationError {
+    name: number | string;
+    message: string;
+}
+
 /**
  * # Validation Result
  */
@@ -295,16 +482,6 @@ declare type Validator = ValidationResult | PromiseLike<ValidationResult> | ((va
 export { }
 
 
-export declare namespace toDisplayStateKey {
-    var cache: Map<string, string>;
-}
-
-
-export declare namespace toDisplayRuleKebab {
-    var cache: Map<string, string>;
-}
-
-
 export declare namespace getNextId {
     var reset: () => void;
 }
@@ -324,3 +501,13 @@ export declare namespace toCamelCase {
     var cache: Map<string, string>;
 }
 
+
+export declare namespace toDisplayStateKey {
+    var cache: Map<string, string>;
+}
+
+
+export declare namespace toDisplayRuleKebab {
+    var cache: Map<string, string>;
+}
+

package/dist/types/EvTextfield.d.ts

@@ -1,10 +1,13 @@
 import { AllowedComponentProps } from 'vue';
 import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentPublicInstance } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
+import { FunctionalComponent } from 'vue';
 import { PropType } from 'vue';
 import { Ref } from 'vue';
+import { ShallowRef } from 'vue';
 import { StyleValue } from 'vue';
 import { VNodeProps } from 'vue';
 
@@ -14,6 +17,8 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
+export declare type AutocompleteToken = "on" | "off" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "language" | "postal-code" | "street-address" | "cc-additional-name" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "current-password" | "new-password" | "one-time-code" | "password" | "bday" | "bday-day" | "bday-month" | "bday-year" | "email" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "name" | "nickname" | "organization" | "organization-title" | "sex" | "url" | "username" | "tel" | "tel-area-code" | "tel-country" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-local-prefix" | "tel-local-suffix" | "tel-national" | "billing" | "home" | "mobile" | `section-${string}` | "shipping" | "work" | string;
+
 export declare const EvTextfield: __VLS_WithTemplateSlots<DefineComponent<    {
 class: PropType<any>;
 style: {
@@ -47,9 +52,11 @@ default: "left";
 };
 label: StringConstructor;
 hint: StringConstructor;
+autocomplete: PropType<string>;
 autofocus: BooleanConstructor;
 autoselect: BooleanConstructor;
 clearable: BooleanConstructor;
+dataFormType: StringConstructor;
 iconStart: PropType<IconValue>;
 iconEnd: PropType<IconValue>;
 loading: BooleanConstructor;
@@ -64,9 +71,7 @@ default: string;
 };
 monospace: BooleanConstructor;
 }, {
-reset: () => void;
-resetValidation: () => void;
-validate: (silent?: boolean) => Promise<string[]>;
+field: FormField;
 input: Ref<HTMLInputElement>;
 focus: () => void;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -109,9 +114,11 @@ default: "left";
 };
 label: StringConstructor;
 hint: StringConstructor;
+autocomplete: PropType<string>;
 autofocus: BooleanConstructor;
 autoselect: BooleanConstructor;
 clearable: BooleanConstructor;
+dataFormType: StringConstructor;
 iconStart: PropType<IconValue>;
 iconEnd: PropType<IconValue>;
 loading: BooleanConstructor;
@@ -158,7 +165,185 @@ clearable: boolean;
     suffix(): never;
 }>>;
 
-declare type IconValue = string | (string | [path: string, opacity: number])[];
+/**
+ * # Form
+ *
+ * @todo: decide whether to implement validators/shapers/resolvers and their terminology.
+ * @todo: decide whether and how to support declarative schemas like Zod (https://zod.dev/?id=introduction)
+ *
+ */
+declare class Form {
+    private props;
+    private fields;
+    private valid;
+    private validating;
+    readonly errors: Ref<ValidationError[]>;
+    readonly data: Ref<object>;
+    readonly validateOn: Ref<FormProps["validateOn"]>;
+    constructor(props: FormProps);
+    get isDisabled(): boolean;
+    get isReadonly(): boolean;
+    get isValid(): boolean | null;
+    get isValidating(): boolean;
+    addErrors(errors: ValidationError[]): void;
+    /**
+     * ## Add Field
+     * @param field
+     */
+    addField(field: FormField): void;
+    /**
+     * ## Get Field
+     * @param name
+     */
+    getField(name: string): FormField | undefined;
+    /**
+     * ## Has Field
+     *
+     * Returns `true` if the field `name` already exists in the form.
+     *
+     * @param id
+     */
+    hasField(id: string): boolean;
+    /**
+     * ## Remove Field
+     * @param id
+     */
+    removeField(id: string): void;
+    /**
+     * ## Reset
+     */
+    reset(): void;
+    /**
+     * ## Reset Validation
+     */
+    resetValidation(): void;
+    /**
+     * ## Validate
+     */
+    validate(): Promise<{
+        valid: boolean;
+        errors: ValidationError[];
+        addErrors: (errors: ValidationError[]) => void;
+    }>;
+}
+
+/**
+ * # Form Field
+ *
+ * @todo: decide on terminology for shapers/validators/resolvers/rules (it would be good to have shapers)
+ *
+ */
+declare class FormField {
+    readonly form: Form | null;
+    private props;
+    private group;
+    readonly focused: Ref<boolean>;
+    readonly focusedVisible: Ref<boolean>;
+    private readonly messages;
+    readonly model: Ref<any>;
+    readonly pristine: ShallowRef<boolean>;
+    readonly uid: number;
+    readonly validating: ShallowRef<boolean>;
+    private readonly validationModel;
+    constructor(form: Form | null, props: FormFieldProps, group?: FormField | undefined);
+    get classes(): {
+        "is-error": boolean;
+        "is-dirty": boolean;
+        "is-disabled": boolean;
+        "is-readonly": boolean;
+        "is-focused": boolean;
+        "is-focused-visible": boolean;
+    };
+    get errorMessages(): string[];
+    get id(): string;
+    get isDirty(): boolean;
+    get isDisabled(): boolean;
+    get isFocused(): boolean;
+    get isFocusedVisible(): boolean;
+    get isReadonly(): boolean;
+    get isPristine(): boolean;
+    get isShowErrorMessages(): boolean;
+    get isValid(): boolean | null;
+    get isValidating(): boolean;
+    get name(): string;
+    get validateOn(): {
+        blur: boolean;
+        input: boolean;
+        submit: boolean;
+        lazy: boolean;
+    };
+    get value(): any;
+    set value(value: any);
+    /**
+     * ## Add Error Message
+     *
+     * Add one or more validation messages to the field.
+     *
+     * @param message
+     */
+    addError(...message: string[]): void;
+    /**
+     * ## Add Validator
+     *
+     * Add one or more validation functions to the field.
+     *
+     * @param validator
+     */
+    addValidator(...validator: Validator[]): void;
+    /**
+     * ## Blur
+     * @param e
+     */
+    blur(): void;
+    /**
+     * ## Focus
+     *
+     * @param e
+     */
+    focus(e?: Event): void;
+    /**
+     * ## Reset
+     */
+    reset(): void;
+    /**
+     * ## Reset Validation
+     */
+    resetValidation(): void;
+    /**
+     * ## Validate
+     */
+    validate(silent?: boolean): Promise<string[]>;
+}
+
+/**
+ * # Form Field Props
+ */
+declare interface FormFieldProps {
+    id?: string;
+    disabled?: boolean;
+    error?: boolean;
+    focused?: boolean;
+    name?: string;
+    readonly?: boolean;
+    validators: Validator[];
+    modelValue?: any;
+    validateOn?: ValidateOnEvent | `${ValidateOnEvent} lazy` | `lazy ${ValidateOnEvent}` | "lazy";
+    validationValue?: any;
+}
+
+/**
+ * # Form Props
+ */
+declare interface FormProps {
+    data?: object;
+    disabled?: boolean;
+    readonly?: boolean;
+    modelValue?: boolean | null;
+    "onUpdate:modelValue"?: ((val: boolean | null) => void) | undefined;
+    validateOn?: FormFieldProps["validateOn"];
+}
+
+declare type IconValue = string | (string | [path: string, opacity: number])[] | JsxComponent;
 
 /**
  * # Input Appearance
@@ -186,6 +371,10 @@ declare const InputSize: {
 
 declare type InputSizeProp = (typeof InputSize)[keyof typeof InputSize];
 
+declare type JsxComponent<Props = any> = {
+    new (): ComponentPublicInstance<Props>;
+} | FunctionalComponent<Props>;
+
 /**
  * # Make EvTextfield Props
  */
@@ -207,9 +396,11 @@ export declare const makeEvTextfieldProps: <Defaults extends {
     align?: unknown;
     label?: unknown;
     hint?: unknown;
+    autocomplete?: unknown;
     autofocus?: unknown;
     autoselect?: unknown;
     clearable?: unknown;
+    dataFormType?: unknown;
     iconStart?: unknown;
     iconEnd?: unknown;
     loading?: unknown;
@@ -325,6 +516,10 @@ export declare const makeEvTextfieldProps: <Defaults extends {
         type: PropType<unknown extends Defaults["hint"] ? string : string | Defaults["hint"]>;
         default: unknown extends Defaults["hint"] ? string : string | Defaults["hint"];
     };
+    autocomplete: unknown extends Defaults["autocomplete"] ? PropType<string> : {
+        type: PropType<unknown extends Defaults["autocomplete"] ? string : string | Defaults["autocomplete"]>;
+        default: unknown extends Defaults["autocomplete"] ? string : string | Defaults["autocomplete"];
+    };
     autofocus: unknown extends Defaults["autofocus"] ? BooleanConstructor : {
         type: PropType<unknown extends Defaults["autofocus"] ? boolean : boolean | Defaults["autofocus"]>;
         default: unknown extends Defaults["autofocus"] ? boolean : boolean | Defaults["autofocus"];
@@ -337,6 +532,10 @@ export declare const makeEvTextfieldProps: <Defaults extends {
         type: PropType<unknown extends Defaults["clearable"] ? boolean : boolean | Defaults["clearable"]>;
         default: unknown extends Defaults["clearable"] ? boolean : boolean | Defaults["clearable"];
     };
+    dataFormType: unknown extends Defaults["dataFormType"] ? StringConstructor : {
+        type: PropType<unknown extends Defaults["dataFormType"] ? string : string | Defaults["dataFormType"]>;
+        default: unknown extends Defaults["dataFormType"] ? string : string | Defaults["dataFormType"];
+    };
     iconStart: unknown extends Defaults["iconStart"] ? PropType<IconValue> : {
         type: PropType<unknown extends Defaults["iconStart"] ? IconValue : NonNullable<IconValue> | Defaults["iconStart"]>;
         default: unknown extends Defaults["iconStart"] ? IconValue : NonNullable<IconValue> | Defaults["iconStart"];
@@ -402,6 +601,16 @@ declare type TextAlignProp = (typeof TextAlign)[keyof typeof TextAlign];
  */
 declare type ValidateOnEvent = "blur" | "input" | "submit";
 
+/**
+ * # Validation Error
+ *
+ * Represents a single error message with a name identifier.
+ */
+declare interface ValidationError {
+    name: number | string;
+    message: string;
+}
+
 /**
  * # Validation Result
  */
@@ -415,16 +624,6 @@ declare type Validator = ValidationResult | PromiseLike<ValidationResult> | ((va
 export { }
 
 
-export declare namespace toDisplayStateKey {
-    var cache: Map<string, string>;
-}
-
-
-export declare namespace toDisplayRuleKebab {
-    var cache: Map<string, string>;
-}
-
-
 export declare namespace getNextId {
     var reset: () => void;
 }
@@ -444,3 +643,13 @@ export declare namespace toCamelCase {
     var cache: Map<string, string>;
 }
 
+
+export declare namespace toDisplayStateKey {
+    var cache: Map<string, string>;
+}
+
+
+export declare namespace toDisplayRuleKebab {
+    var cache: Map<string, string>;
+}
+

package/dist/types/EvToolbar.d.ts

@@ -1,8 +1,10 @@
 import { AllowedComponentProps } from 'vue';
 import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentPublicInstance } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
+import { FunctionalComponent } from 'vue';
 import { PropType } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 import { StyleValue } from 'vue';
@@ -125,7 +127,7 @@ export declare interface EvToolbarProps {
 
 export declare type EvToolbarSize = "small" | "medium" | "large";
 
-declare type IconValue = string | (string | [path: string, opacity: number])[];
+declare type IconValue = string | (string | [path: string, opacity: number])[] | JsxComponent;
 
 /**
  * # Input Sizes
@@ -141,6 +143,10 @@ declare const InputSize: {
 
 declare type InputSizeProp = (typeof InputSize)[keyof typeof InputSize];
 
+declare type JsxComponent<Props = any> = {
+    new (): ComponentPublicInstance<Props>;
+} | FunctionalComponent<Props>;
+
 export declare const makeEvToolbarProps: <Defaults extends {
     class?: unknown;
     style?: unknown;
@@ -234,16 +240,6 @@ declare type VariantProp = (typeof Variant)[keyof typeof Variant];
 export { }
 
 
-export declare namespace toDisplayStateKey {
-    var cache: Map<string, string>;
-}
-
-
-export declare namespace toDisplayRuleKebab {
-    var cache: Map<string, string>;
-}
-
-
 export declare namespace getNextId {
     var reset: () => void;
 }
@@ -263,3 +259,13 @@ export declare namespace toCamelCase {
     var cache: Map<string, string>;
 }
 
+
+export declare namespace toDisplayStateKey {
+    var cache: Map<string, string>;
+}
+
+
+export declare namespace toDisplayRuleKebab {
+    var cache: Map<string, string>;
+}
+

package/dist/types/EvTooltip.d.ts

@@ -810,16 +810,6 @@ declare type VerticalSide = "top" | "bottom";
 export { }
 
 
-export declare namespace toDisplayStateKey {
-    var cache: Map<string, string>;
-}
-
-
-export declare namespace toDisplayRuleKebab {
-    var cache: Map<string, string>;
-}
-
-
 export declare namespace getNextId {
     var reset: () => void;
 }
@@ -839,3 +829,13 @@ export declare namespace toCamelCase {
     var cache: Map<string, string>;
 }
 
+
+export declare namespace toDisplayStateKey {
+    var cache: Map<string, string>;
+}
+
+
+export declare namespace toDisplayRuleKebab {
+    var cache: Map<string, string>;
+}
+

package/dist/types/EvTransitionExpand.d.ts

@@ -11,16 +11,6 @@ export declare type EvTransitionExpandX = FunctionalComponent<typeof EvTransitio
 export { }
 
 
-export declare namespace toDisplayStateKey {
-    var cache: Map<string, string>;
-}
-
-
-export declare namespace toDisplayRuleKebab {
-    var cache: Map<string, string>;
-}
-
-
 export declare namespace getNextId {
     var reset: () => void;
 }
@@ -40,3 +30,13 @@ export declare namespace toCamelCase {
     var cache: Map<string, string>;
 }
 
+
+export declare namespace toDisplayStateKey {
+    var cache: Map<string, string>;
+}
+
+
+export declare namespace toDisplayRuleKebab {
+    var cache: Map<string, string>;
+}
+