vant 4.0.0-alpha.4 → 4.0.0-beta.0

package/es/dialog/function-call.d.ts

@@ -1,184 +1,6 @@
-import { App } from 'vue';
-import type { DialogAction, DialogOptions } from './types';
-declare function Dialog(options: DialogOptions): Promise<unknown>;
-declare namespace Dialog {
-    var defaultOptions: {
-        title: string;
-        width: string;
-        theme: null;
-        message: string;
-        overlay: boolean;
-        callback: null;
-        teleport: string;
-        className: string;
-        allowHtml: boolean;
-        lockScroll: boolean;
-        transition: undefined;
-        beforeClose: null;
-        overlayClass: string;
-        overlayStyle: undefined;
-        messageAlign: string;
-        cancelButtonText: string;
-        cancelButtonColor: null;
-        confirmButtonText: string;
-        confirmButtonColor: null;
-        showConfirmButton: boolean;
-        showCancelButton: boolean;
-        closeOnPopstate: boolean;
-        closeOnClickOverlay: boolean;
-    };
-    var currentOptions: {
-        title: string;
-        width: string;
-        theme: null;
-        message: string;
-        overlay: boolean;
-        callback: null;
-        teleport: string;
-        className: string;
-        allowHtml: boolean;
-        lockScroll: boolean;
-        transition: undefined;
-        beforeClose: null;
-        overlayClass: string;
-        overlayStyle: undefined;
-        messageAlign: string;
-        cancelButtonText: string;
-        cancelButtonColor: null;
-        confirmButtonText: string;
-        confirmButtonColor: null;
-        showConfirmButton: boolean;
-        showCancelButton: boolean;
-        closeOnPopstate: boolean;
-        closeOnClickOverlay: boolean;
-    };
-    var alert: typeof Dialog;
-    var confirm: (options: DialogOptions) => Promise<unknown>;
-    var close: () => void;
-    var setDefaultOptions: (options: DialogOptions) => void;
-    var resetDefaultOptions: () => void;
-    var Component: import("../utils").WithInstall<import("vue").DefineComponent<{
-        show: BooleanConstructor;
-        zIndex: (NumberConstructor | StringConstructor)[];
-        overlay: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        duration: (NumberConstructor | StringConstructor)[];
-        teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
-        lockScroll: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        lazyRender: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        beforeClose: import("vue").PropType<import("../utils").Interceptor>;
-        overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
-        overlayClass: import("vue").PropType<unknown>;
-        transitionAppear: BooleanConstructor;
-        closeOnClickOverlay: {
-            type: BooleanConstructor;
-            default: true;
-        };
-    } & {
-        title: StringConstructor;
-        theme: import("vue").PropType<import("./types").DialogTheme>;
-        width: (NumberConstructor | StringConstructor)[];
-        message: import("vue").PropType<import("./types").DialogMessage>;
-        callback: import("vue").PropType<(action?: DialogAction | undefined) => void>;
-        allowHtml: BooleanConstructor;
-        className: import("vue").PropType<unknown>;
-        transition: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        messageAlign: import("vue").PropType<import("./types").DialogMessageAlign>;
-        closeOnPopstate: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        showCancelButton: BooleanConstructor;
-        cancelButtonText: StringConstructor;
-        cancelButtonColor: StringConstructor;
-        confirmButtonText: StringConstructor;
-        confirmButtonColor: StringConstructor;
-        showConfirmButton: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        closeOnClickOverlay: BooleanConstructor;
-    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("keydown" | "update:show" | "cancel" | "confirm")[], "keydown" | "update:show" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        show: BooleanConstructor;
-        zIndex: (NumberConstructor | StringConstructor)[];
-        overlay: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        duration: (NumberConstructor | StringConstructor)[];
-        teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
-        lockScroll: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        lazyRender: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        beforeClose: import("vue").PropType<import("../utils").Interceptor>;
-        overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
-        overlayClass: import("vue").PropType<unknown>;
-        transitionAppear: BooleanConstructor;
-        closeOnClickOverlay: {
-            type: BooleanConstructor;
-            default: true;
-        };
-    } & {
-        title: StringConstructor;
-        theme: import("vue").PropType<import("./types").DialogTheme>;
-        width: (NumberConstructor | StringConstructor)[];
-        message: import("vue").PropType<import("./types").DialogMessage>;
-        callback: import("vue").PropType<(action?: DialogAction | undefined) => void>;
-        allowHtml: BooleanConstructor;
-        className: import("vue").PropType<unknown>;
-        transition: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        messageAlign: import("vue").PropType<import("./types").DialogMessageAlign>;
-        closeOnPopstate: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        showCancelButton: BooleanConstructor;
-        cancelButtonText: StringConstructor;
-        cancelButtonColor: StringConstructor;
-        confirmButtonText: StringConstructor;
-        confirmButtonColor: StringConstructor;
-        showConfirmButton: {
-            type: BooleanConstructor;
-            default: true;
-        };
-        closeOnClickOverlay: BooleanConstructor;
-    }>> & {
-        onKeydown?: ((...args: any[]) => any) | undefined;
-        "onUpdate:show"?: ((...args: any[]) => any) | undefined;
-        onCancel?: ((...args: any[]) => any) | undefined;
-        onConfirm?: ((...args: any[]) => any) | undefined;
-    }, {
-        overlay: boolean;
-        show: boolean;
-        lockScroll: boolean;
-        lazyRender: boolean;
-        transitionAppear: boolean;
-        closeOnClickOverlay: boolean;
-        transition: string;
-        closeOnPopstate: boolean;
-        allowHtml: boolean;
-        showCancelButton: boolean;
-        showConfirmButton: boolean;
-    }>>;
-    var install: (app: App<any>) => void;
-}
-export { Dialog };
+import type { DialogOptions } from './types';
+export declare function showDialog(options: DialogOptions): Promise<unknown>;
+export declare const setDialogDefaultOptions: (options: DialogOptions) => void;
+export declare const resetDialogDefaultOptions: () => void;
+export declare const showConfirmDialog: (options: DialogOptions) => Promise<unknown>;
+export declare const closeDialog: () => void;

package/es/dialog/function-call.mjs

@@ -1,8 +1,36 @@
 import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { extend, inBrowser, withInstall } from "../utils/index.mjs";
+import { extend, inBrowser } from "../utils/index.mjs";
 import { mountComponent, usePopupState } from "../utils/mount-component.mjs";
-import VanDialog from "./Dialog.mjs";
+import Dialog from "./Dialog.mjs";
 let instance;
+const DEFAULT_OPTIONS = {
+  title: "",
+  width: "",
+  theme: null,
+  message: "",
+  overlay: true,
+  callback: null,
+  teleport: "body",
+  className: "",
+  allowHtml: false,
+  lockScroll: true,
+  transition: void 0,
+  beforeClose: null,
+  overlayClass: "",
+  overlayStyle: void 0,
+  messageAlign: "",
+  cancelButtonText: "",
+  cancelButtonColor: null,
+  cancelButtonDisabled: false,
+  confirmButtonText: "",
+  confirmButtonColor: null,
+  confirmButtonDisabled: false,
+  showConfirmButton: true,
+  showCancelButton: false,
+  closeOnPopstate: true,
+  closeOnClickOverlay: false
+};
+let currentOptions = extend({}, DEFAULT_OPTIONS);
 function initInstance() {
   const Wrapper = {
     setup() {
@@ -10,7 +38,7 @@ function initInstance() {
         state,
         toggle
       } = usePopupState();
-      return () => _createVNode(VanDialog, _mergeProps(state, {
+      return () => _createVNode(Dialog, _mergeProps(state, {
         "onUpdate:show": toggle
       }), null);
     }
@@ -19,7 +47,7 @@ function initInstance() {
     instance
   } = mountComponent(Wrapper));
 }
-function Dialog(options) {
+function showDialog(options) {
   if (!inBrowser) {
     return Promise.resolve();
   }
@@ -27,59 +55,31 @@ function Dialog(options) {
     if (!instance) {
       initInstance();
     }
-    instance.open(extend({}, Dialog.currentOptions, options, {
+    instance.open(extend({}, currentOptions, options, {
       callback: (action) => {
         (action === "confirm" ? resolve : reject)(action);
       }
     }));
   });
 }
-Dialog.defaultOptions = {
-  title: "",
-  width: "",
-  theme: null,
-  message: "",
-  overlay: true,
-  callback: null,
-  teleport: "body",
-  className: "",
-  allowHtml: false,
-  lockScroll: true,
-  transition: void 0,
-  beforeClose: null,
-  overlayClass: "",
-  overlayStyle: void 0,
-  messageAlign: "",
-  cancelButtonText: "",
-  cancelButtonColor: null,
-  confirmButtonText: "",
-  confirmButtonColor: null,
-  showConfirmButton: true,
-  showCancelButton: false,
-  closeOnPopstate: true,
-  closeOnClickOverlay: false
+const setDialogDefaultOptions = (options) => {
+  extend(currentOptions, options);
+};
+const resetDialogDefaultOptions = () => {
+  currentOptions = extend({}, DEFAULT_OPTIONS);
 };
-Dialog.currentOptions = extend({}, Dialog.defaultOptions);
-Dialog.alert = Dialog;
-Dialog.confirm = (options) => Dialog(extend({
+const showConfirmDialog = (options) => showDialog(extend({
   showCancelButton: true
 }, options));
-Dialog.close = () => {
+const closeDialog = () => {
   if (instance) {
     instance.toggle(false);
   }
 };
-Dialog.setDefaultOptions = (options) => {
-  extend(Dialog.currentOptions, options);
-};
-Dialog.resetDefaultOptions = () => {
-  Dialog.currentOptions = extend({}, Dialog.defaultOptions);
-};
-Dialog.Component = withInstall(VanDialog);
-Dialog.install = (app) => {
-  app.use(Dialog.Component);
-  app.config.globalProperties.$dialog = Dialog;
-};
 export {
-  Dialog
+  closeDialog,
+  resetDialogDefaultOptions,
+  setDialogDefaultOptions,
+  showConfirmDialog,
+  showDialog
 };

package/es/dialog/index.d.ts

@@ -1,10 +1,137 @@
-import { Dialog } from './function-call';
+export declare const Dialog: import("../utils").WithInstall<import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    title: StringConstructor;
+    theme: import("vue").PropType<import("./types").DialogTheme>;
+    width: (NumberConstructor | StringConstructor)[];
+    message: import("vue").PropType<import("./types").DialogMessage>;
+    callback: import("vue").PropType<(action?: import("./types").DialogAction | undefined) => void>;
+    allowHtml: BooleanConstructor;
+    className: import("vue").PropType<unknown>;
+    transition: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    messageAlign: import("vue").PropType<import("./types").DialogMessageAlign>;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showCancelButton: BooleanConstructor;
+    cancelButtonText: StringConstructor;
+    cancelButtonColor: StringConstructor;
+    cancelButtonDisabled: BooleanConstructor;
+    confirmButtonText: StringConstructor;
+    confirmButtonColor: StringConstructor;
+    confirmButtonDisabled: BooleanConstructor;
+    showConfirmButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOverlay: BooleanConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("keydown" | "update:show" | "cancel" | "confirm")[], "keydown" | "update:show" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    title: StringConstructor;
+    theme: import("vue").PropType<import("./types").DialogTheme>;
+    width: (NumberConstructor | StringConstructor)[];
+    message: import("vue").PropType<import("./types").DialogMessage>;
+    callback: import("vue").PropType<(action?: import("./types").DialogAction | undefined) => void>;
+    allowHtml: BooleanConstructor;
+    className: import("vue").PropType<unknown>;
+    transition: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    messageAlign: import("vue").PropType<import("./types").DialogMessageAlign>;
+    closeOnPopstate: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showCancelButton: BooleanConstructor;
+    cancelButtonText: StringConstructor;
+    cancelButtonColor: StringConstructor;
+    cancelButtonDisabled: BooleanConstructor;
+    confirmButtonText: StringConstructor;
+    confirmButtonColor: StringConstructor;
+    confirmButtonDisabled: BooleanConstructor;
+    showConfirmButton: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    closeOnClickOverlay: BooleanConstructor;
+}>> & {
+    onKeydown?: ((...args: any[]) => any) | undefined;
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}, {
+    overlay: boolean;
+    show: boolean;
+    lockScroll: boolean;
+    lazyRender: boolean;
+    transitionAppear: boolean;
+    closeOnClickOverlay: boolean;
+    transition: string;
+    closeOnPopstate: boolean;
+    allowHtml: boolean;
+    showCancelButton: boolean;
+    cancelButtonDisabled: boolean;
+    confirmButtonDisabled: boolean;
+    showConfirmButton: boolean;
+}>>;
 export default Dialog;
-export { Dialog };
+export { showDialog, closeDialog, showConfirmDialog, setDialogDefaultOptions, resetDialogDefaultOptions, } from './function-call';
 export type { DialogProps } from './Dialog';
 export type { DialogTheme, DialogMessage, DialogOptions, DialogMessageAlign, } from './types';
 declare module 'vue' {
     interface GlobalComponents {
-        VanDialog: typeof Dialog.Component;
+        VanDialog: typeof Dialog;
     }
 }

package/es/dialog/index.mjs

@@ -1,6 +1,20 @@
-import { Dialog } from "./function-call.mjs";
+import { withInstall } from "../utils/index.mjs";
+import _Dialog from "./Dialog.mjs";
+const Dialog = withInstall(_Dialog);
 var stdin_default = Dialog;
+import {
+  showDialog,
+  closeDialog,
+  showConfirmDialog,
+  setDialogDefaultOptions,
+  resetDialogDefaultOptions
+} from "./function-call.mjs";
 export {
   Dialog,
-  stdin_default as default
+  closeDialog,
+  stdin_default as default,
+  resetDialogDefaultOptions,
+  setDialogDefaultOptions,
+  showConfirmDialog,
+  showDialog
 };

package/es/dialog/types.d.ts

@@ -1,4 +1,3 @@
-import { Dialog } from './function-call';
 import type { CSSProperties, TeleportProps } from 'vue';
 import type { Interceptor, Numeric } from '../utils';
 export declare type DialogTheme = 'default' | 'round-button';
@@ -21,16 +20,13 @@ export declare type DialogOptions = {
     overlayClass?: string;
     overlayStyle?: CSSProperties;
     closeOnPopstate?: boolean;
-    cancelButtonText?: string;
     showCancelButton?: boolean;
     showConfirmButton?: boolean;
+    cancelButtonText?: string;
     cancelButtonColor?: string;
+    cancelButtonDisabled?: boolean;
     confirmButtonText?: string;
     confirmButtonColor?: string;
+    confirmButtonDisabled?: boolean;
     closeOnClickOverlay?: boolean;
 };
-declare module '@vue/runtime-core' {
-    interface ComponentCustomProperties {
-        $dialog: typeof Dialog;
-    }
-}

package/es/field/Field.d.ts

@@ -209,7 +209,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: null;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "blur" | "keypress" | "clickInput" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue")[], "clear" | "focus" | "blur" | "keypress" | "clickInput" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "blur" | "keypress" | "clickInput" | "endValidate" | "startValidate" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue")[], "clear" | "focus" | "blur" | "keypress" | "clickInput" | "endValidate" | "startValidate" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     icon: StringConstructor;
     size: PropType<import("../cell").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -297,17 +297,19 @@ declare const _default: import("vue").DefineComponent<{
     onKeypress?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
     onClickInput?: ((...args: any[]) => any) | undefined;
+    onEndValidate?: ((...args: any[]) => any) | undefined;
+    onStartValidate?: ((...args: any[]) => any) | undefined;
     onClickLeftIcon?: ((...args: any[]) => any) | undefined;
     onClickRightIcon?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     type: FieldType;
+    required: boolean;
     center: boolean;
     autofocus: boolean;
     disabled: boolean;
     isLink: boolean;
     border: boolean;
-    required: boolean;
     clickable: boolean | null;
     clearable: boolean;
     clearIcon: string;

package/es/field/Field.mjs

@@ -58,7 +58,7 @@ const fieldProps = extend({}, cellSharedProps, fieldSharedProps, {
 var stdin_default = defineComponent({
   name,
   props: fieldProps,
-  emits: ["blur", "focus", "clear", "keypress", "clickInput", "clickLeftIcon", "clickRightIcon", "update:modelValue"],
+  emits: ["blur", "focus", "clear", "keypress", "clickInput", "endValidate", "startValidate", "clickLeftIcon", "clickRightIcon", "update:modelValue"],
   setup(props, {
     emit,
     slots
@@ -132,18 +132,24 @@ var stdin_default = defineComponent({
       state.status = "unvalidated";
       state.validateMessage = "";
     };
+    const endValidate = () => emit("endValidate", {
+      status: state.status
+    });
     const validate = (rules = props.rules) => new Promise((resolve) => {
       resetValidation();
       if (rules) {
+        emit("startValidate");
         runRules(rules).then(() => {
           if (state.status === "failed") {
             resolve({
               name: props.name,
               message: state.validateMessage
             });
+            endValidate();
           } else {
             state.status = "passed";
             resolve();
+            endValidate();
           }
         });
       } else {

package/es/field/index.d.ts

@@ -81,7 +81,7 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
         type: BooleanConstructor;
         default: null;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "blur" | "keypress" | "clickInput" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue")[], "clear" | "focus" | "blur" | "keypress" | "clickInput" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focus" | "blur" | "keypress" | "clickInput" | "endValidate" | "startValidate" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue")[], "clear" | "focus" | "blur" | "keypress" | "clickInput" | "endValidate" | "startValidate" | "clickLeftIcon" | "clickRightIcon" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     icon: StringConstructor;
     size: import("vue").PropType<import("..").CellSize>;
     title: (NumberConstructor | StringConstructor)[];
@@ -169,17 +169,19 @@ export declare const Field: import("../utils").WithInstall<import("vue").DefineC
     onKeypress?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
     onClickInput?: ((...args: any[]) => any) | undefined;
+    onEndValidate?: ((...args: any[]) => any) | undefined;
+    onStartValidate?: ((...args: any[]) => any) | undefined;
     onClickLeftIcon?: ((...args: any[]) => any) | undefined;
     onClickRightIcon?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     type: import("./types").FieldType;
+    required: boolean;
     center: boolean;
     autofocus: boolean;
     disabled: boolean;
     isLink: boolean;
     border: boolean;
-    required: boolean;
     clickable: boolean | null;
     clearable: boolean;
     clearIcon: string;