@cnamts/synapse 0.0.11-alpha → 0.0.12-alpha

package/dist/src/components/PeriodField/PeriodField.d.ts

@@ -88,9 +88,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
         isReadOnly?: boolean | undefined;
         width?: string | undefined;
     }> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string | [string, string] | null) => any) | undefined;
         onBlur?: (() => any) | undefined;
         onFocus?: (() => any) | undefined;
-        "onUpdate:modelValue"?: ((value: string | [string, string] | null) => any) | undefined;
         onClosed?: (() => any) | undefined;
     }>, {
         validateOnSubmit: () => any;
@@ -100,9 +100,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
         handleClickOutside: (event: MouseEvent) => void;
         initializeSelectedDates: (modelValue: string | object | string[] | null) => Date | Date[] | null;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        "update:modelValue": (value: string | [string, string] | null) => any;
         blur: () => any;
         focus: () => any;
-        "update:modelValue": (value: string | [string, string] | null) => any;
         closed: () => any;
     }, import('vue').PublicProps, {
         required: boolean;
@@ -154,17 +154,17 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
             }[] | undefined;
             displayPrependIcon?: boolean | undefined;
         }> & Readonly<{
-            "onUpdate:model-value"?: ((value: string | null) => any) | undefined;
             onBlur?: (() => any) | undefined;
             onFocus?: (() => any) | undefined;
+            "onUpdate:model-value"?: ((value: string | null) => any) | undefined;
         }>, {
             validateOnSubmit: () => boolean;
             focus: () => void;
             blur: () => void;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-            "update:model-value": (value: string | null) => any;
             blur: () => any;
             focus: () => any;
+            "update:model-value": (value: string | null) => any;
         }, import('vue').PublicProps, {
             required: boolean;
             modelValue: string | null;
@@ -197,6 +197,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                     readonly appendIcon?: import('../Customs/SyTextField/types').IconType;
                     readonly prependInnerIcon?: import('../Customs/SyTextField/types').IconType;
                     readonly appendInnerIcon?: import('../Customs/SyTextField/types').IconType;
+                    readonly prependTooltip?: string | undefined;
+                    readonly appendTooltip?: string | undefined;
+                    readonly tooltipLocation?: "top" | "bottom" | "start" | "end" | undefined;
                     readonly variantStyle?: import('../Customs/SyTextField/types').VariantStyle | undefined;
                     readonly color?: import('../Customs/SyTextField/types').ColorType | undefined;
                     readonly isClearable?: boolean | undefined;
@@ -247,17 +250,13 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                     readonly width?: string | number | undefined;
                     readonly displayAsterisk?: boolean | undefined;
                     readonly noIcon?: boolean | undefined;
-                    readonly customRules?: {
-                        type: string;
-                        options: RuleOptions;
-                    }[] | undefined;
-                    readonly customWarningRules?: {
-                        type: string;
-                        options: RuleOptions;
-                    }[] | undefined;
+                    readonly customRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
+                    readonly customWarningRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
+                    readonly customSuccessRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
                     readonly showSuccessMessages?: boolean | undefined;
+                    readonly isValidateOnBlur?: boolean | undefined;
+                    readonly "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
                     readonly onClear?: ((...args: any[]) => any) | undefined;
-                    readonly "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
                     readonly "onPrepend-icon-click"?: ((...args: any[]) => any) | undefined;
                     readonly "onAppend-icon-click"?: ((...args: any[]) => any) | undefined;
                 } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
@@ -273,7 +272,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                 $root: import('vue').ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import('vue').ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, import('vue').ComponentProvideOptions>, {}, {}, "", {}, any> | null;
                 $parent: import('vue').ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import('vue').ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, import('vue').ComponentProvideOptions>, {}, {}, "", {}, any> | null;
                 $host: Element | null;
-                $emit: ((event: "clear", ...args: any[]) => void) & ((event: "update:model-value", ...args: any[]) => void) & ((event: "prepend-icon-click", ...args: any[]) => void) & ((event: "append-icon-click", ...args: any[]) => void);
+                $emit: ((event: "update:modelValue", ...args: any[]) => void) & ((event: "clear", ...args: any[]) => void) & ((event: "prepend-icon-click", ...args: any[]) => void) & ((event: "append-icon-click", ...args: any[]) => void);
                 $el: any;
                 $options: import('vue').ComponentOptionsBase<Readonly<{
                     modelValue?: string | number | null | undefined;
@@ -281,6 +280,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                     appendIcon?: import('../Customs/SyTextField/types').IconType;
                     prependInnerIcon?: import('../Customs/SyTextField/types').IconType;
                     appendInnerIcon?: import('../Customs/SyTextField/types').IconType;
+                    prependTooltip?: string | undefined;
+                    appendTooltip?: string | undefined;
+                    tooltipLocation?: "top" | "bottom" | "start" | "end" | undefined;
                     variantStyle?: import('../Customs/SyTextField/types').VariantStyle | undefined;
                     color?: import('../Customs/SyTextField/types').ColorType | undefined;
                     isClearable?: boolean | undefined;
@@ -331,29 +333,33 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                     width?: string | number | undefined;
                     displayAsterisk?: boolean | undefined;
                     noIcon?: boolean | undefined;
-                    customRules?: {
-                        type: string;
-                        options: RuleOptions;
-                    }[] | undefined;
-                    customWarningRules?: {
-                        type: string;
-                        options: RuleOptions;
-                    }[] | undefined;
+                    customRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
+                    customWarningRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
+                    customSuccessRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
                     showSuccessMessages?: boolean | undefined;
+                    isValidateOnBlur?: boolean | undefined;
                 }> & Readonly<{
+                    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
                     onClear?: ((...args: any[]) => any) | undefined;
-                    "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
                     "onPrepend-icon-click"?: ((...args: any[]) => any) | undefined;
                     "onAppend-icon-click"?: ((...args: any[]) => any) | undefined;
                 }>, {
-                    appendInnerIconColor: import('vue').ComputedRef<"error" | "warning" | "success" | "black">;
+                    validation: {
+                        errors: import('vue').Ref<string[], string[]>;
+                        warnings: import('vue').Ref<string[], string[]>;
+                        successes: import('vue').Ref<string[], string[]>;
+                        hasError: import('vue').ComputedRef<boolean>;
+                        hasWarning: import('vue').ComputedRef<boolean>;
+                        hasSuccess: import('vue').ComputedRef<boolean>;
+                        validateField: (value: unknown, rules?: import('../../composables/validation/useValidation').ValidationRule[], warningRules?: import('../../composables/validation/useValidation').ValidationRule[], successRules?: import('../../composables/validation/useValidation').ValidationRule[]) => import('../../composables/validation/useValidation').ValidationResult;
+                        validateOnSubmit: () => Promise<boolean>;
+                        clearValidation: () => void;
+                    };
                     validateOnSubmit: () => boolean;
-                    errors: import('vue').Ref<string[], string[]>;
-                    warnings: import('vue').Ref<string[], string[]>;
-                    successes: import('vue').Ref<string[], string[]>;
+                    checkErrorOnBlur: () => void;
                 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                    "update:modelValue": (...args: any[]) => void;
                     clear: (...args: any[]) => void;
-                    "update:model-value": (...args: any[]) => void;
                     "prepend-icon-click": (...args: any[]) => void;
                     "append-icon-click": (...args: any[]) => void;
                 }, string, {
@@ -362,6 +368,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                     appendIcon: "error" | "warning" | "info" | "success" | "close" | "calendar";
                     prependInnerIcon: "error" | "warning" | "info" | "success" | "close" | "calendar";
                     appendInnerIcon: "error" | "warning" | "info" | "success" | "close" | "calendar";
+                    prependTooltip: string;
+                    appendTooltip: string;
+                    tooltipLocation: "top" | "bottom" | "start" | "end";
                     variantStyle: import('../Customs/SyTextField/types').VariantStyle;
                     color: import('../Customs/SyTextField/types').ColorType;
                     isClearable: boolean;
@@ -410,15 +419,11 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                     width: string | number;
                     displayAsterisk: boolean;
                     noIcon: boolean;
-                    customRules: {
-                        type: string;
-                        options: RuleOptions;
-                    }[];
-                    customWarningRules: {
-                        type: string;
-                        options: RuleOptions;
-                    }[];
+                    customRules: import('../../composables/validation/useValidation').ValidationRule[];
+                    customWarningRules: import('../../composables/validation/useValidation').ValidationRule[];
+                    customSuccessRules: import('../../composables/validation/useValidation').ValidationRule[];
                     showSuccessMessages: boolean;
+                    isValidateOnBlur: boolean;
                 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
                     beforeCreate?: ((() => void) | (() => void)[]) | undefined;
                     created?: ((() => void) | (() => void)[]) | undefined;
@@ -445,6 +450,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                 appendIcon: "error" | "warning" | "info" | "success" | "close" | "calendar";
                 prependInnerIcon: "error" | "warning" | "info" | "success" | "close" | "calendar";
                 appendInnerIcon: "error" | "warning" | "info" | "success" | "close" | "calendar";
+                prependTooltip: string;
+                appendTooltip: string;
+                tooltipLocation: "top" | "bottom" | "start" | "end";
                 variantStyle: import('../Customs/SyTextField/types').VariantStyle;
                 color: import('../Customs/SyTextField/types').ColorType;
                 isClearable: boolean;
@@ -493,21 +501,20 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                 width: string | number;
                 displayAsterisk: boolean;
                 noIcon: boolean;
-                customRules: {
-                    type: string;
-                    options: RuleOptions;
-                }[];
-                customWarningRules: {
-                    type: string;
-                    options: RuleOptions;
-                }[];
+                customRules: import('../../composables/validation/useValidation').ValidationRule[];
+                customWarningRules: import('../../composables/validation/useValidation').ValidationRule[];
+                customSuccessRules: import('../../composables/validation/useValidation').ValidationRule[];
                 showSuccessMessages: boolean;
+                isValidateOnBlur: boolean;
             }> & Omit<Readonly<{
                 modelValue?: string | number | null | undefined;
                 prependIcon?: import('../Customs/SyTextField/types').IconType;
                 appendIcon?: import('../Customs/SyTextField/types').IconType;
                 prependInnerIcon?: import('../Customs/SyTextField/types').IconType;
                 appendInnerIcon?: import('../Customs/SyTextField/types').IconType;
+                prependTooltip?: string | undefined;
+                appendTooltip?: string | undefined;
+                tooltipLocation?: "top" | "bottom" | "start" | "end" | undefined;
                 variantStyle?: import('../Customs/SyTextField/types').VariantStyle | undefined;
                 color?: import('../Customs/SyTextField/types').ColorType | undefined;
                 isClearable?: boolean | undefined;
@@ -558,26 +565,30 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                 width?: string | number | undefined;
                 displayAsterisk?: boolean | undefined;
                 noIcon?: boolean | undefined;
-                customRules?: {
-                    type: string;
-                    options: RuleOptions;
-                }[] | undefined;
-                customWarningRules?: {
-                    type: string;
-                    options: RuleOptions;
-                }[] | undefined;
+                customRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
+                customWarningRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
+                customSuccessRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
                 showSuccessMessages?: boolean | undefined;
+                isValidateOnBlur?: boolean | undefined;
             }> & Readonly<{
+                "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
                 onClear?: ((...args: any[]) => any) | undefined;
-                "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
                 "onPrepend-icon-click"?: ((...args: any[]) => any) | undefined;
                 "onAppend-icon-click"?: ((...args: any[]) => any) | undefined;
-            }>, "appendInnerIconColor" | "validateOnSubmit" | "errors" | "warnings" | "successes" | ("modelValue" | "prependIcon" | "appendIcon" | "prependInnerIcon" | "appendInnerIcon" | "variantStyle" | "color" | "isClearable" | "label" | "errorMessages" | "warningMessages" | "successMessages" | "isReadOnly" | "isActive" | "baseColor" | "bgColor" | "centerAffix" | "counter" | "counterValue" | "density" | "direction" | "isDirty" | "isDisabled" | "isOnError" | "isFlat" | "isFocused" | "areDetailsHidden" | "areSpinButtonsHidden" | "hint" | "id" | "loading" | "maxErrors" | "maxWidth" | "messages" | "minWidth" | "name" | "displayPersistentClear" | "displayPersistentCounter" | "displayPersistentHint" | "displayPersistentPlaceholder" | "placeholder" | "prefix" | "isReversed" | "role" | "rounded" | "isOnSingleLine" | "suffix" | "theme" | "isTiled" | "type" | "width" | "displayAsterisk" | "noIcon" | "customRules" | "customWarningRules" | "showSuccessMessages")> & import('vue').ShallowUnwrapRef<{
-                appendInnerIconColor: import('vue').ComputedRef<"error" | "warning" | "success" | "black">;
+            }>, "validation" | "validateOnSubmit" | "checkErrorOnBlur" | ("modelValue" | "prependIcon" | "appendIcon" | "prependInnerIcon" | "appendInnerIcon" | "prependTooltip" | "appendTooltip" | "tooltipLocation" | "variantStyle" | "color" | "isClearable" | "label" | "errorMessages" | "warningMessages" | "successMessages" | "isReadOnly" | "isActive" | "baseColor" | "bgColor" | "centerAffix" | "counter" | "counterValue" | "density" | "direction" | "isDirty" | "isDisabled" | "isOnError" | "isFlat" | "isFocused" | "areDetailsHidden" | "areSpinButtonsHidden" | "hint" | "id" | "loading" | "maxErrors" | "maxWidth" | "messages" | "minWidth" | "name" | "displayPersistentClear" | "displayPersistentCounter" | "displayPersistentHint" | "displayPersistentPlaceholder" | "placeholder" | "prefix" | "isReversed" | "role" | "rounded" | "isOnSingleLine" | "suffix" | "theme" | "isTiled" | "type" | "width" | "displayAsterisk" | "noIcon" | "customRules" | "customWarningRules" | "customSuccessRules" | "showSuccessMessages" | "isValidateOnBlur")> & import('vue').ShallowUnwrapRef<{
+                validation: {
+                    errors: import('vue').Ref<string[], string[]>;
+                    warnings: import('vue').Ref<string[], string[]>;
+                    successes: import('vue').Ref<string[], string[]>;
+                    hasError: import('vue').ComputedRef<boolean>;
+                    hasWarning: import('vue').ComputedRef<boolean>;
+                    hasSuccess: import('vue').ComputedRef<boolean>;
+                    validateField: (value: unknown, rules?: import('../../composables/validation/useValidation').ValidationRule[], warningRules?: import('../../composables/validation/useValidation').ValidationRule[], successRules?: import('../../composables/validation/useValidation').ValidationRule[]) => import('../../composables/validation/useValidation').ValidationResult;
+                    validateOnSubmit: () => Promise<boolean>;
+                    clearValidation: () => void;
+                };
                 validateOnSubmit: () => boolean;
-                errors: import('vue').Ref<string[], string[]>;
-                warnings: import('vue').Ref<string[], string[]>;
-                successes: import('vue').Ref<string[], string[]>;
+                checkErrorOnBlur: () => void;
             }> & {} & import('vue').ComponentCustomProperties & {} & {
                 $slots: {
                     prepend?(_: {}): any;
@@ -617,9 +628,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
             }[] | undefined;
             displayPrependIcon?: boolean | undefined;
         }> & Readonly<{
-            "onUpdate:model-value"?: ((value: string | null) => any) | undefined;
             onBlur?: (() => any) | undefined;
             onFocus?: (() => any) | undefined;
+            "onUpdate:model-value"?: ((value: string | null) => any) | undefined;
         }>, {
             validateOnSubmit: () => boolean;
             focus: () => void;
@@ -681,9 +692,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
         isReadOnly?: boolean | undefined;
         width?: string | undefined;
     }> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string | [string, string] | null) => any) | undefined;
         onBlur?: (() => any) | undefined;
         onFocus?: (() => any) | undefined;
-        "onUpdate:modelValue"?: ((value: string | [string, string] | null) => any) | undefined;
         onClosed?: (() => any) | undefined;
     }>, {
         validateOnSubmit: () => any;
@@ -746,9 +757,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
         isReadOnly?: boolean | undefined;
         width?: string | undefined;
     }> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string | [string, string] | null) => any) | undefined;
         onBlur?: (() => any) | undefined;
         onFocus?: (() => any) | undefined;
-        "onUpdate:modelValue"?: ((value: string | [string, string] | null) => any) | undefined;
         onClosed?: (() => any) | undefined;
     }>, {
         validateOnSubmit: () => any;
@@ -758,9 +769,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
         handleClickOutside: (event: MouseEvent) => void;
         initializeSelectedDates: (modelValue: string | object | string[] | null) => Date | Date[] | null;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        "update:modelValue": (value: string | [string, string] | null) => any;
         blur: () => any;
         focus: () => any;
-        "update:modelValue": (value: string | [string, string] | null) => any;
         closed: () => any;
     }, import('vue').PublicProps, {
         required: boolean;
@@ -812,17 +823,17 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
             }[] | undefined;
             displayPrependIcon?: boolean | undefined;
         }> & Readonly<{
-            "onUpdate:model-value"?: ((value: string | null) => any) | undefined;
             onBlur?: (() => any) | undefined;
             onFocus?: (() => any) | undefined;
+            "onUpdate:model-value"?: ((value: string | null) => any) | undefined;
         }>, {
             validateOnSubmit: () => boolean;
             focus: () => void;
             blur: () => void;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-            "update:model-value": (value: string | null) => any;
             blur: () => any;
             focus: () => any;
+            "update:model-value": (value: string | null) => any;
         }, import('vue').PublicProps, {
             required: boolean;
             modelValue: string | null;
@@ -855,6 +866,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                     readonly appendIcon?: import('../Customs/SyTextField/types').IconType;
                     readonly prependInnerIcon?: import('../Customs/SyTextField/types').IconType;
                     readonly appendInnerIcon?: import('../Customs/SyTextField/types').IconType;
+                    readonly prependTooltip?: string | undefined;
+                    readonly appendTooltip?: string | undefined;
+                    readonly tooltipLocation?: "top" | "bottom" | "start" | "end" | undefined;
                     readonly variantStyle?: import('../Customs/SyTextField/types').VariantStyle | undefined;
                     readonly color?: import('../Customs/SyTextField/types').ColorType | undefined;
                     readonly isClearable?: boolean | undefined;
@@ -905,17 +919,13 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                     readonly width?: string | number | undefined;
                     readonly displayAsterisk?: boolean | undefined;
                     readonly noIcon?: boolean | undefined;
-                    readonly customRules?: {
-                        type: string;
-                        options: RuleOptions;
-                    }[] | undefined;
-                    readonly customWarningRules?: {
-                        type: string;
-                        options: RuleOptions;
-                    }[] | undefined;
+                    readonly customRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
+                    readonly customWarningRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
+                    readonly customSuccessRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
                     readonly showSuccessMessages?: boolean | undefined;
+                    readonly isValidateOnBlur?: boolean | undefined;
+                    readonly "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
                     readonly onClear?: ((...args: any[]) => any) | undefined;
-                    readonly "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
                     readonly "onPrepend-icon-click"?: ((...args: any[]) => any) | undefined;
                     readonly "onAppend-icon-click"?: ((...args: any[]) => any) | undefined;
                 } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
@@ -931,7 +941,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                 $root: import('vue').ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import('vue').ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, import('vue').ComponentProvideOptions>, {}, {}, "", {}, any> | null;
                 $parent: import('vue').ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import('vue').ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, import('vue').ComponentProvideOptions>, {}, {}, "", {}, any> | null;
                 $host: Element | null;
-                $emit: ((event: "clear", ...args: any[]) => void) & ((event: "update:model-value", ...args: any[]) => void) & ((event: "prepend-icon-click", ...args: any[]) => void) & ((event: "append-icon-click", ...args: any[]) => void);
+                $emit: ((event: "update:modelValue", ...args: any[]) => void) & ((event: "clear", ...args: any[]) => void) & ((event: "prepend-icon-click", ...args: any[]) => void) & ((event: "append-icon-click", ...args: any[]) => void);
                 $el: any;
                 $options: import('vue').ComponentOptionsBase<Readonly<{
                     modelValue?: string | number | null | undefined;
@@ -939,6 +949,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                     appendIcon?: import('../Customs/SyTextField/types').IconType;
                     prependInnerIcon?: import('../Customs/SyTextField/types').IconType;
                     appendInnerIcon?: import('../Customs/SyTextField/types').IconType;
+                    prependTooltip?: string | undefined;
+                    appendTooltip?: string | undefined;
+                    tooltipLocation?: "top" | "bottom" | "start" | "end" | undefined;
                     variantStyle?: import('../Customs/SyTextField/types').VariantStyle | undefined;
                     color?: import('../Customs/SyTextField/types').ColorType | undefined;
                     isClearable?: boolean | undefined;
@@ -989,29 +1002,33 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                     width?: string | number | undefined;
                     displayAsterisk?: boolean | undefined;
                     noIcon?: boolean | undefined;
-                    customRules?: {
-                        type: string;
-                        options: RuleOptions;
-                    }[] | undefined;
-                    customWarningRules?: {
-                        type: string;
-                        options: RuleOptions;
-                    }[] | undefined;
+                    customRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
+                    customWarningRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
+                    customSuccessRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
                     showSuccessMessages?: boolean | undefined;
+                    isValidateOnBlur?: boolean | undefined;
                 }> & Readonly<{
+                    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
                     onClear?: ((...args: any[]) => any) | undefined;
-                    "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
                     "onPrepend-icon-click"?: ((...args: any[]) => any) | undefined;
                     "onAppend-icon-click"?: ((...args: any[]) => any) | undefined;
                 }>, {
-                    appendInnerIconColor: import('vue').ComputedRef<"error" | "warning" | "success" | "black">;
+                    validation: {
+                        errors: import('vue').Ref<string[], string[]>;
+                        warnings: import('vue').Ref<string[], string[]>;
+                        successes: import('vue').Ref<string[], string[]>;
+                        hasError: import('vue').ComputedRef<boolean>;
+                        hasWarning: import('vue').ComputedRef<boolean>;
+                        hasSuccess: import('vue').ComputedRef<boolean>;
+                        validateField: (value: unknown, rules?: import('../../composables/validation/useValidation').ValidationRule[], warningRules?: import('../../composables/validation/useValidation').ValidationRule[], successRules?: import('../../composables/validation/useValidation').ValidationRule[]) => import('../../composables/validation/useValidation').ValidationResult;
+                        validateOnSubmit: () => Promise<boolean>;
+                        clearValidation: () => void;
+                    };
                     validateOnSubmit: () => boolean;
-                    errors: import('vue').Ref<string[], string[]>;
-                    warnings: import('vue').Ref<string[], string[]>;
-                    successes: import('vue').Ref<string[], string[]>;
+                    checkErrorOnBlur: () => void;
                 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                    "update:modelValue": (...args: any[]) => void;
                     clear: (...args: any[]) => void;
-                    "update:model-value": (...args: any[]) => void;
                     "prepend-icon-click": (...args: any[]) => void;
                     "append-icon-click": (...args: any[]) => void;
                 }, string, {
@@ -1020,6 +1037,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                     appendIcon: "error" | "warning" | "info" | "success" | "close" | "calendar";
                     prependInnerIcon: "error" | "warning" | "info" | "success" | "close" | "calendar";
                     appendInnerIcon: "error" | "warning" | "info" | "success" | "close" | "calendar";
+                    prependTooltip: string;
+                    appendTooltip: string;
+                    tooltipLocation: "top" | "bottom" | "start" | "end";
                     variantStyle: import('../Customs/SyTextField/types').VariantStyle;
                     color: import('../Customs/SyTextField/types').ColorType;
                     isClearable: boolean;
@@ -1068,15 +1088,11 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                     width: string | number;
                     displayAsterisk: boolean;
                     noIcon: boolean;
-                    customRules: {
-                        type: string;
-                        options: RuleOptions;
-                    }[];
-                    customWarningRules: {
-                        type: string;
-                        options: RuleOptions;
-                    }[];
+                    customRules: import('../../composables/validation/useValidation').ValidationRule[];
+                    customWarningRules: import('../../composables/validation/useValidation').ValidationRule[];
+                    customSuccessRules: import('../../composables/validation/useValidation').ValidationRule[];
                     showSuccessMessages: boolean;
+                    isValidateOnBlur: boolean;
                 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
                     beforeCreate?: ((() => void) | (() => void)[]) | undefined;
                     created?: ((() => void) | (() => void)[]) | undefined;
@@ -1103,6 +1119,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                 appendIcon: "error" | "warning" | "info" | "success" | "close" | "calendar";
                 prependInnerIcon: "error" | "warning" | "info" | "success" | "close" | "calendar";
                 appendInnerIcon: "error" | "warning" | "info" | "success" | "close" | "calendar";
+                prependTooltip: string;
+                appendTooltip: string;
+                tooltipLocation: "top" | "bottom" | "start" | "end";
                 variantStyle: import('../Customs/SyTextField/types').VariantStyle;
                 color: import('../Customs/SyTextField/types').ColorType;
                 isClearable: boolean;
@@ -1151,21 +1170,20 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                 width: string | number;
                 displayAsterisk: boolean;
                 noIcon: boolean;
-                customRules: {
-                    type: string;
-                    options: RuleOptions;
-                }[];
-                customWarningRules: {
-                    type: string;
-                    options: RuleOptions;
-                }[];
+                customRules: import('../../composables/validation/useValidation').ValidationRule[];
+                customWarningRules: import('../../composables/validation/useValidation').ValidationRule[];
+                customSuccessRules: import('../../composables/validation/useValidation').ValidationRule[];
                 showSuccessMessages: boolean;
+                isValidateOnBlur: boolean;
             }> & Omit<Readonly<{
                 modelValue?: string | number | null | undefined;
                 prependIcon?: import('../Customs/SyTextField/types').IconType;
                 appendIcon?: import('../Customs/SyTextField/types').IconType;
                 prependInnerIcon?: import('../Customs/SyTextField/types').IconType;
                 appendInnerIcon?: import('../Customs/SyTextField/types').IconType;
+                prependTooltip?: string | undefined;
+                appendTooltip?: string | undefined;
+                tooltipLocation?: "top" | "bottom" | "start" | "end" | undefined;
                 variantStyle?: import('../Customs/SyTextField/types').VariantStyle | undefined;
                 color?: import('../Customs/SyTextField/types').ColorType | undefined;
                 isClearable?: boolean | undefined;
@@ -1216,26 +1234,30 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                 width?: string | number | undefined;
                 displayAsterisk?: boolean | undefined;
                 noIcon?: boolean | undefined;
-                customRules?: {
-                    type: string;
-                    options: RuleOptions;
-                }[] | undefined;
-                customWarningRules?: {
-                    type: string;
-                    options: RuleOptions;
-                }[] | undefined;
+                customRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
+                customWarningRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
+                customSuccessRules?: import('../../composables/validation/useValidation').ValidationRule[] | undefined;
                 showSuccessMessages?: boolean | undefined;
+                isValidateOnBlur?: boolean | undefined;
             }> & Readonly<{
+                "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
                 onClear?: ((...args: any[]) => any) | undefined;
-                "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
                 "onPrepend-icon-click"?: ((...args: any[]) => any) | undefined;
                 "onAppend-icon-click"?: ((...args: any[]) => any) | undefined;
-            }>, "appendInnerIconColor" | "validateOnSubmit" | "errors" | "warnings" | "successes" | ("modelValue" | "prependIcon" | "appendIcon" | "prependInnerIcon" | "appendInnerIcon" | "variantStyle" | "color" | "isClearable" | "label" | "errorMessages" | "warningMessages" | "successMessages" | "isReadOnly" | "isActive" | "baseColor" | "bgColor" | "centerAffix" | "counter" | "counterValue" | "density" | "direction" | "isDirty" | "isDisabled" | "isOnError" | "isFlat" | "isFocused" | "areDetailsHidden" | "areSpinButtonsHidden" | "hint" | "id" | "loading" | "maxErrors" | "maxWidth" | "messages" | "minWidth" | "name" | "displayPersistentClear" | "displayPersistentCounter" | "displayPersistentHint" | "displayPersistentPlaceholder" | "placeholder" | "prefix" | "isReversed" | "role" | "rounded" | "isOnSingleLine" | "suffix" | "theme" | "isTiled" | "type" | "width" | "displayAsterisk" | "noIcon" | "customRules" | "customWarningRules" | "showSuccessMessages")> & import('vue').ShallowUnwrapRef<{
-                appendInnerIconColor: import('vue').ComputedRef<"error" | "warning" | "success" | "black">;
+            }>, "validation" | "validateOnSubmit" | "checkErrorOnBlur" | ("modelValue" | "prependIcon" | "appendIcon" | "prependInnerIcon" | "appendInnerIcon" | "prependTooltip" | "appendTooltip" | "tooltipLocation" | "variantStyle" | "color" | "isClearable" | "label" | "errorMessages" | "warningMessages" | "successMessages" | "isReadOnly" | "isActive" | "baseColor" | "bgColor" | "centerAffix" | "counter" | "counterValue" | "density" | "direction" | "isDirty" | "isDisabled" | "isOnError" | "isFlat" | "isFocused" | "areDetailsHidden" | "areSpinButtonsHidden" | "hint" | "id" | "loading" | "maxErrors" | "maxWidth" | "messages" | "minWidth" | "name" | "displayPersistentClear" | "displayPersistentCounter" | "displayPersistentHint" | "displayPersistentPlaceholder" | "placeholder" | "prefix" | "isReversed" | "role" | "rounded" | "isOnSingleLine" | "suffix" | "theme" | "isTiled" | "type" | "width" | "displayAsterisk" | "noIcon" | "customRules" | "customWarningRules" | "customSuccessRules" | "showSuccessMessages" | "isValidateOnBlur")> & import('vue').ShallowUnwrapRef<{
+                validation: {
+                    errors: import('vue').Ref<string[], string[]>;
+                    warnings: import('vue').Ref<string[], string[]>;
+                    successes: import('vue').Ref<string[], string[]>;
+                    hasError: import('vue').ComputedRef<boolean>;
+                    hasWarning: import('vue').ComputedRef<boolean>;
+                    hasSuccess: import('vue').ComputedRef<boolean>;
+                    validateField: (value: unknown, rules?: import('../../composables/validation/useValidation').ValidationRule[], warningRules?: import('../../composables/validation/useValidation').ValidationRule[], successRules?: import('../../composables/validation/useValidation').ValidationRule[]) => import('../../composables/validation/useValidation').ValidationResult;
+                    validateOnSubmit: () => Promise<boolean>;
+                    clearValidation: () => void;
+                };
                 validateOnSubmit: () => boolean;
-                errors: import('vue').Ref<string[], string[]>;
-                warnings: import('vue').Ref<string[], string[]>;
-                successes: import('vue').Ref<string[], string[]>;
+                checkErrorOnBlur: () => void;
             }> & {} & import('vue').ComponentCustomProperties & {} & {
                 $slots: {
                     prepend?(_: {}): any;
@@ -1275,9 +1297,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
             }[] | undefined;
             displayPrependIcon?: boolean | undefined;
         }> & Readonly<{
-            "onUpdate:model-value"?: ((value: string | null) => any) | undefined;
             onBlur?: (() => any) | undefined;
             onFocus?: (() => any) | undefined;
+            "onUpdate:model-value"?: ((value: string | null) => any) | undefined;
         }>, {
             validateOnSubmit: () => boolean;
             focus: () => void;
@@ -1339,9 +1361,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
         isReadOnly?: boolean | undefined;
         width?: string | undefined;
     }> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string | [string, string] | null) => any) | undefined;
         onBlur?: (() => any) | undefined;
         onFocus?: (() => any) | undefined;
-        "onUpdate:modelValue"?: ((value: string | [string, string] | null) => any) | undefined;
         onClosed?: (() => any) | undefined;
     }>, {
         validateOnSubmit: () => any;

package/dist/src/components/PhoneField/PhoneField.d.ts

@@ -52,6 +52,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    displayAsterisk: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     computedValue: import('vue').ComputedRef<string>;
     dialCode: import('vue').Ref<string | Record<string, any>, string | Record<string, any>>;
@@ -61,8 +65,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     phoneNumber: import('vue').Ref<string, string>;
     mergedDialCodes: import('vue').ComputedRef<Indicatif[]>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    change: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
+    change: (...args: any[]) => void;
     "update:selectedDialCode": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: {
@@ -109,14 +113,19 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    displayAsterisk: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:selectedDialCode"?: ((...args: any[]) => any) | undefined;
 }>, {
     required: boolean;
     outlined: boolean;
     modelValue: string;
+    displayAsterisk: boolean;
     dialCodeModel: string | Record<string, any>;
     outlinedIndicatif: boolean;
     withCountryCode: boolean;

package/dist/src/components/RatingPicker/EmotionPicker/EmotionPicker.d.ts

@@ -49,9 +49,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    length: number;
     modelValue: number;
     label: string | null;
-    length: number;
     readonly: boolean;
     itemLabels: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLFieldSetElement>, {

package/dist/src/components/RatingPicker/NumberPicker/NumberPicker.d.ts

@@ -47,9 +47,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    length: number;
     modelValue: number;
     label: string | undefined;
-    length: number;
     readonly: boolean;
     itemLabels: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLFieldSetElement>, {