vue-devui 1.5.12-hotfix.1 → 1.5.13

package/input/index.es.js

@@ -29,7 +29,8 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, watch, provide, reactive, onUnmounted, Transition, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, onMounted, Teleport, createTextVNode, onBeforeUnmount, getCurrentInstance, shallowRef } from "vue";
+import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, watch, provide, reactive, onUnmounted, Transition, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, onMounted, Teleport, createTextVNode, onBeforeUnmount, getCurrentInstance, shallowRef, resolveDirective } from "vue";
+import "clipboard";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const DEFAULT_PREFIX = "icon";
 const iconProps = {
@@ -81,7 +82,7 @@ const svgIconProps = {
     default: "inherit"
   }
 };
-function createBem(namespace, element, modifier) {
+function createBem$1(namespace, element, modifier) {
   let cls = namespace;
   if (element) {
     cls += `__${element}`;
@@ -91,12 +92,12 @@ function createBem(namespace, element, modifier) {
   }
   return cls;
 }
-function useNamespace(block, needDot = false) {
+function useNamespace$1(block, needDot = false) {
   const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
-  const b = () => createBem(namespace);
-  const e = (element) => element ? createBem(namespace, element) : "";
-  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
-  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  const b = () => createBem$1(namespace);
+  const e = (element) => element ? createBem$1(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem$1(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem$1(namespace, element, modifier) : "";
   return {
     b,
     e,
@@ -114,7 +115,7 @@ var svgIcon = defineComponent({
       color,
       size
     } = toRefs(props);
-    const ns2 = useNamespace("svg-icon");
+    const ns2 = useNamespace$1("svg-icon");
     const iconName = computed(() => `#icon-${name.value}`);
     const iconSize = computed(() => {
       return typeof size.value === "number" ? `${size.value}px` : size.value;
@@ -146,7 +147,7 @@ function useIconDom(props, ctx) {
     classPrefix,
     rotate
   } = toRefs(props);
-  const ns2 = useNamespace("icon");
+  const ns2 = useNamespace$1("icon");
   const iconSize = computed(() => {
     return typeof size.value === "number" ? `${size.value}px` : size.value;
   });
@@ -204,7 +205,7 @@ var Icon = defineComponent({
     const {
       iconDom
     } = useIconDom(props, ctx);
-    const ns2 = useNamespace("icon");
+    const ns2 = useNamespace$1("icon");
     const wrapClassed = computed(() => ({
       [ns2.e("container")]: true,
       [ns2.m("disabled")]: disabled.value,
@@ -226,6 +227,13 @@ var Icon = defineComponent({
     };
   }
 });
+var AutoFocus = {
+  mounted: (el, binding) => {
+    if (binding.value) {
+      el.focus();
+    }
+  }
+};
 const inputProps = {
   modelValue: {
     type: String,
@@ -265,6 +273,14 @@ const inputProps = {
   placeholder: {
     type: String,
     default: ""
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  autofocus: {
+    type: Boolean,
+    default: false
   }
 };
 const formItemProps = {
@@ -293,7 +309,7 @@ const formItemProps = {
     default: void 0
   },
   helpTips: {
-    type: String,
+    type: [String, Object],
     default: ""
   },
   feedbackStatus: {
@@ -306,6 +322,48 @@ const formItemProps = {
 };
 const FORM_ITEM_TOKEN = Symbol("dFormItem");
 const LABEL_DATA = Symbol("labelData");
+function lockScroll() {
+  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
+    const scrollTop = document.documentElement.scrollTop;
+    const style = document.documentElement.getAttribute("style");
+    document.documentElement.style.position = "fixed";
+    document.documentElement.style.top = `-${scrollTop}px`;
+    document.documentElement.style.width = document.documentElement.style.width || "100%";
+    document.documentElement.style.overflowY = "scroll";
+    return () => {
+      if (style) {
+        document.documentElement.setAttribute("style", style);
+      } else {
+        document.documentElement.removeAttribute("style");
+      }
+      document.documentElement.scrollTop = scrollTop;
+    };
+  }
+  return;
+}
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 const formProps = {
   data: {
     type: Object,
@@ -352,9 +410,18 @@ const formProps = {
   hideRequiredMark: {
     type: Boolean,
     default: false
+  },
+  styleType: {
+    type: String,
+    default: "default"
+  },
+  appendToBodyScrollStrategy: {
+    type: String,
+    default: "reposition"
   }
 };
 const FORM_TOKEN = Symbol("dForm");
+const STYLE_TOKEN = Symbol("dForm");
 function useFieldCollection() {
   const itemContexts = [];
   const addItemContext = (field) => {
@@ -1545,7 +1612,7 @@ var lodash = { exports: {} };
         if (typeof func != "function") {
           throw new TypeError2(FUNC_ERROR_TEXT);
         }
-        return setTimeout(function() {
+        return setTimeout2(function() {
           func.apply(undefined$1, args);
         }, wait);
       }
@@ -3354,7 +3421,7 @@ var lodash = { exports: {} };
         return object4[key];
       }
       var setData = shortOut(baseSetData);
-      var setTimeout = ctxSetTimeout || function(func, wait) {
+      var setTimeout2 = ctxSetTimeout || function(func, wait) {
         return root.setTimeout(func, wait);
       };
       var setToString = shortOut(baseSetToString);
@@ -4146,7 +4213,7 @@ var lodash = { exports: {} };
         }
         function leadingEdge(time) {
           lastInvokeTime = time;
-          timerId = setTimeout(timerExpired, wait);
+          timerId = setTimeout2(timerExpired, wait);
           return leading ? invokeFunc(time) : result2;
         }
         function remainingWait(time) {
@@ -4162,7 +4229,7 @@ var lodash = { exports: {} };
           if (shouldInvoke(time)) {
             return trailingEdge(time);
           }
-          timerId = setTimeout(timerExpired, remainingWait(time));
+          timerId = setTimeout2(timerExpired, remainingWait(time));
         }
         function trailingEdge(time) {
           timerId = undefined$1;
@@ -4193,12 +4260,12 @@ var lodash = { exports: {} };
             }
             if (maxing) {
               clearTimeout(timerId);
-              timerId = setTimeout(timerExpired, wait);
+              timerId = setTimeout2(timerExpired, wait);
               return invokeFunc(lastCallTime);
             }
           }
           if (timerId === undefined$1) {
-            timerId = setTimeout(timerExpired, wait);
+            timerId = setTimeout2(timerExpired, wait);
           }
           return result2;
         }
@@ -5861,6 +5928,7 @@ defineComponent({
       addItemContext,
       removeItemContext
     })));
+    provide(STYLE_TOKEN, props.styleType);
     ctx.expose({
       validate,
       validateFields,
@@ -5876,12 +5944,6 @@ defineComponent({
     };
   }
 });
-const formLabelProps = {
-  helpTips: {
-    type: String,
-    default: ""
-  }
-};
 const fixedOverlayProps = {
   modelValue: {
     type: Boolean,
@@ -5896,25 +5958,6 @@ const fixedOverlayProps = {
     default: true
   }
 };
-function lockScroll() {
-  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
-    const scrollTop = document.documentElement.scrollTop;
-    const style = document.documentElement.getAttribute("style");
-    document.documentElement.style.position = "fixed";
-    document.documentElement.style.top = `-${scrollTop}px`;
-    document.documentElement.style.width = document.documentElement.style.width || "100%";
-    document.documentElement.style.overflowY = "scroll";
-    return () => {
-      if (style) {
-        document.documentElement.setAttribute("style", style);
-      } else {
-        document.documentElement.removeAttribute("style");
-      }
-      document.documentElement.scrollTop = scrollTop;
-    };
-  }
-  return;
-}
 function useFixedOverlay(props, ctx) {
   let lockScrollCb;
   const onClick = (event) => {
@@ -5947,7 +5990,7 @@ defineComponent({
     const {
       modelValue
     } = toRefs(props);
-    const ns2 = useNamespace("fixed-overlay");
+    const ns2 = useNamespace$1("fixed-overlay");
     const {
       onClick
     } = useFixedOverlay(props, ctx);
@@ -6113,7 +6156,7 @@ const FlexibleOverlay = defineComponent({
     emit,
     expose
   }) {
-    const ns2 = useNamespace("flexible-overlay");
+    const ns2 = useNamespace$1("flexible-overlay");
     const {
       clickEventBubble
     } = toRefs(props);
@@ -6142,7 +6185,7 @@ const FlexibleOverlay = defineComponent({
 });
 const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
 const isObject = (val) => val !== null && typeof val === "object";
-const ns$1 = useNamespace("popper-trigger");
+const ns$1 = useNamespace$1("popper-trigger");
 function wrapContent(content) {
   return h("span", { class: ns$1.b() }, content);
 }
@@ -6329,7 +6372,7 @@ function usePopoverEvent(props, visible, origin) {
   });
   return { placement, handlePositionChange, onMouseenter, onMouseleave };
 }
-const ns = useNamespace("popover");
+const ns = useNamespace$1("popover");
 function SuccessIcon$1() {
   return createVNode("svg", {
     "class": [ns.e("icon"), ns.em("icon", "success")],
@@ -6431,7 +6474,7 @@ var PopoverIcon = defineComponent({
     }
   },
   setup(props) {
-    const ns2 = useNamespace("popover");
+    const ns2 = useNamespace$1("popover");
     return () => props.type && props.type !== "default" && createVNode("span", {
       "class": ns2.e("icon-wrap")
     }, [props.type === "success" && createVNode(SuccessIcon$1, null, null), props.type === "warning" && createVNode(WarningIcon, null, null), props.type === "info" && createVNode(InfoIcon, null, null), props.type === "error" && createVNode(ErrorIcon$1, null, null)]);
@@ -6468,7 +6511,7 @@ var Popover = defineComponent({
     const {
       overlayStyles
     } = usePopover(props, visible, placement, origin, popoverRef);
-    const ns2 = useNamespace("popover");
+    const ns2 = useNamespace$1("popover");
     provide(POPPER_TRIGGER_TOKEN, origin);
     watch(visible, (newVal) => {
       if (newVal) {
@@ -6602,6 +6645,12 @@ function useFormLabel() {
   const formItemContext = inject(FORM_ITEM_TOKEN);
   const labelData = inject(LABEL_DATA);
   const ns2 = useNamespace("form");
+  const defaultTipsPopover = {
+    content: "",
+    position: ["top"],
+    trigger: "hover",
+    popType: "info"
+  };
   const labelClasses = computed(() => ({
     [`${ns2.e("label")}`]: true,
     [`${ns2.em("label", "vertical")}`]: labelData.value.layout === "vertical",
@@ -6613,17 +6662,24 @@ function useFormLabel() {
     [`${ns2.em("label", "required")}`]: formItemContext.isRequired,
     [`${ns2.em("label", "required-hide")}`]: formItemContext.isRequired && formContext.hideRequiredMark
   }));
-  return { labelClasses, labelInnerClasses };
+  const tipsPopover = computed(() => {
+    if (typeof labelData.value.helpTips === "string") {
+      return __spreadProps(__spreadValues({}, defaultTipsPopover), { content: labelData.value.helpTips });
+    } else {
+      return __spreadValues(__spreadValues({}, defaultTipsPopover), labelData.value.helpTips);
+    }
+  });
+  return { labelClasses, labelInnerClasses, tipsPopover };
 }
 var formLabel = "";
 var FormLabel = defineComponent({
   name: "DFormLabel",
-  props: formLabelProps,
-  setup(props, ctx) {
+  setup(_, ctx) {
     const ns2 = useNamespace("form");
     const {
       labelClasses,
-      labelInnerClasses
+      labelInnerClasses,
+      tipsPopover
     } = useFormLabel();
     return () => {
       var _a, _b;
@@ -6631,12 +6687,9 @@ var FormLabel = defineComponent({
         "class": labelClasses.value
       }, [createVNode("span", {
         "class": labelInnerClasses.value
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), props.helpTips && createVNode(Popover, {
-        "content": props.helpTips,
-        "position": ["top"],
-        "trigger": "hover",
-        "pop-type": "info"
-      }, {
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), tipsPopover.value.content && createVNode(Popover, mergeProps({
+        "class": ns2.e("label-tips-popover")
+      }, tipsPopover.value), {
         default: () => [createVNode(HelpTipsIcon, {
           "class": ns2.e("label-help")
         }, null), createTextVNode(",")]
@@ -6667,7 +6720,7 @@ function useFormControl(props) {
     [ns2.em("control-container", "has-feedback")]: Boolean(feedbackStatus == null ? void 0 : feedbackStatus.value),
     [ns2.em("control-container", "feedback-error")]: Boolean((feedbackStatus == null ? void 0 : feedbackStatus.value) === "error")
   }));
-  return { controlClasses, controlContainerClasses };
+  return { controlClasses, controlContainerClasses, labelData };
 }
 function useFormControlValidate() {
   const formItemContext = inject(FORM_ITEM_TOKEN);
@@ -6684,11 +6737,15 @@ var FormControl = defineComponent({
   name: "DFormControl",
   props: formControlProps,
   setup(props, ctx) {
+    const formContext = inject(FORM_TOKEN);
     const formControl2 = ref();
+    const popoverRef = ref();
     const ns2 = useNamespace("form");
+    const showPopoverClick = ref(true);
     const {
       controlClasses,
-      controlContainerClasses
+      controlContainerClasses,
+      labelData
     } = useFormControl(props);
     const {
       feedbackStatus,
@@ -6698,17 +6755,52 @@ var FormControl = defineComponent({
       errorMessage,
       popPosition
     } = useFormControlValidate();
+    const align = computed(() => {
+      var _a, _b;
+      if ((_a = popPosition.value) == null ? void 0 : _a.some((item) => item.includes("start"))) {
+        return "start";
+      }
+      if ((_b = popPosition.value) == null ? void 0 : _b.some((item) => item.includes("end"))) {
+        return "end";
+      }
+      return void 0;
+    });
+    const onDocumentClick = (e) => {
+      const composedPath = e.composedPath();
+      if (composedPath.includes(popoverRef.value.triggerEl)) {
+        showPopoverClick.value = true;
+      } else {
+        showPopoverClick.value = false;
+      }
+    };
+    watch(showPopover, (val) => {
+      if (val) {
+        setTimeout(() => {
+          document.addEventListener("click", onDocumentClick);
+        });
+      } else {
+        showPopoverClick.value = true;
+        document.removeEventListener("click", onDocumentClick);
+      }
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", onDocumentClick);
+    });
     return () => createVNode("div", {
       "class": controlClasses.value,
       "ref": formControl2
     }, [createVNode("div", {
       "class": controlContainerClasses.value
     }, [createVNode(Popover, {
-      "is-open": showPopover.value,
+      "ref": popoverRef,
+      "is-open": showPopover.value && showPopoverClick.value,
       "trigger": "manually",
       "content": errorMessage.value,
       "pop-type": "error",
-      "position": popPosition.value
+      "position": popPosition.value,
+      "align": align.value,
+      "scroll-element": "auto",
+      "append-to-body-scroll-strategy": formContext.appendToBodyScrollStrategy
     }, {
       default: () => {
         var _a, _b;
@@ -6720,7 +6812,7 @@ var FormControl = defineComponent({
       "class": ns2.e("control-info")
     }, [showMessage.value && createVNode("div", {
       "class": "error-message"
-    }, [errorMessage.value]), props.extraInfo && createVNode("div", {
+    }, [errorMessage.value]), labelData.value.formItemCtx.slots.extraInfo ? labelData.value.formItemCtx.slots.extraInfo() : props.extraInfo && createVNode("div", {
       "class": ns2.e("control-extra")
     }, [props.extraInfo])])]);
   }
@@ -7903,7 +7995,9 @@ defineComponent({
     const labelData = computed(() => ({
       layout: formContext.layout,
       labelSize: formContext.labelSize,
-      labelAlign: formContext.labelAlign
+      labelAlign: formContext.labelAlign,
+      helpTips: helpTips.value,
+      formItemCtx: ctx
     }));
     provide(LABEL_DATA, labelData);
     const context = reactive(__spreadProps(__spreadValues({}, otherProps), {
@@ -7919,6 +8013,7 @@ defineComponent({
     }));
     provide(FORM_ITEM_TOKEN, context);
     ctx.expose({
+      validate,
       resetField,
       clearValidate
     });
@@ -7932,9 +8027,7 @@ defineComponent({
     });
     return () => createVNode("div", {
       "class": itemClasses.value
-    }, [createVNode(FormLabel, {
-      "help-tips": helpTips.value
-    }, {
+    }, [createVNode(FormLabel, null, {
       default: () => [ctx.slots.label ? ctx.slots.label() : label == null ? void 0 : label.value]
     }), createVNode(FormControl, {
       "feedback-status": feedbackStatus == null ? void 0 : feedbackStatus.value,
@@ -7980,6 +8073,7 @@ function useInputRender(props, ctx) {
   const slots = ctx.slots;
   const inputDisabled = computed(() => disabled.value || (formContext == null ? void 0 : formContext.disabled));
   const inputSize = computed(() => (size == null ? void 0 : size.value) || (formContext == null ? void 0 : formContext.size) || "");
+  const styleType = inject(STYLE_TOKEN, void 0);
   const _a = ctx.attrs, { style, class: customClass } = _a, otherAttrs = __objRest(_a, ["style", "class"]);
   const customStyle = { style };
   const wrapClasses = computed(() => ({
@@ -7995,7 +8089,8 @@ function useInputRender(props, ctx) {
       [ns2.m(inputSize.value)]: Boolean(inputSize.value),
       [slotNs.b()]: slots.prepend || slots.append,
       [ns2.m("append")]: slots.append,
-      [ns2.m("prepend")]: slots.prepend
+      [ns2.m("prepend")]: slots.prepend,
+      [ns2.m("gray-style")]: styleType === "gray"
     },
     customClass
   ]);
@@ -8003,6 +8098,7 @@ function useInputRender(props, ctx) {
 }
 function useInputEvent(isFocus, props, ctx, focus) {
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
+  const isComposition = ref(false);
   const onFocus = (e) => {
     isFocus.value = true;
     ctx.emit("focus", e);
@@ -8016,6 +8112,9 @@ function useInputEvent(isFocus, props, ctx, focus) {
   };
   const onInput = (e) => {
     ctx.emit("input", e.target.value);
+    if (isComposition.value) {
+      return;
+    }
     ctx.emit("update:modelValue", e.target.value);
   };
   const onChange = (e) => {
@@ -8029,7 +8128,22 @@ function useInputEvent(isFocus, props, ctx, focus) {
     ctx.emit("clear");
     focus();
   };
-  return { onFocus, onBlur, onInput, onChange, onKeydown, onClear };
+  const onCompositionStart = () => {
+    isComposition.value = true;
+  };
+  const onCompositionUpdate = (e) => {
+    var _a;
+    const text = (_a = e.target) == null ? void 0 : _a.value;
+    const lastCharacter = text[text.length - 1] || "";
+    isComposition.value = !/([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(lastCharacter);
+  };
+  const onCompositionEnd = (e) => {
+    if (isComposition.value) {
+      isComposition.value = false;
+      onInput(e);
+    }
+  };
+  return { onFocus, onBlur, onInput, onChange, onKeydown, onClear, onCompositionStart, onCompositionUpdate, onCompositionEnd };
 }
 function useInputFunction(input2) {
   const refInput = computed(() => input2.value);
@@ -8219,6 +8333,9 @@ function createI18nTranslate(name, app, newPrefix) {
 }
 var Input = defineComponent({
   name: "DInput",
+  directives: {
+    dAutoFocus: AutoFocus
+  },
   inheritAttrs: false,
   props: inputProps,
   emits: ["update:modelValue", "focus", "blur", "input", "change", "keydown", "clear"],
@@ -8227,7 +8344,10 @@ var Input = defineComponent({
     const t = createI18nTranslate("DInput", app);
     const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
     const {
-      modelValue
+      modelValue,
+      placeholder,
+      title,
+      autofocus
     } = toRefs(props);
     const ns2 = useNamespace("input");
     const slotNs = useNamespace("input-slot");
@@ -8252,7 +8372,10 @@ var Input = defineComponent({
       onInput,
       onChange,
       onKeydown,
-      onClear
+      onClear,
+      onCompositionStart,
+      onCompositionUpdate,
+      onCompositionEnd
     } = useInputEvent(isFocus, props, ctx, focus);
     const passwordVisible = ref(false);
     const clickPasswordIcon = () => {
@@ -8277,7 +8400,7 @@ var Input = defineComponent({
       blur
     });
     return () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
       return createVNode("div", mergeProps({
         "class": inputClasses.value
       }, customStyle), [ctx.slots.prepend && createVNode("div", {
@@ -8289,25 +8412,29 @@ var Input = defineComponent({
       }, [ctx.slots.prefix && ((_d = (_c = ctx.slots).prefix) == null ? void 0 : _d.call(_c)), props.prefix && createVNode(Icon, {
         "size": inputSize.value,
         "name": props.prefix
-      }, null)]), createVNode("input", mergeProps({
+      }, null)]), withDirectives(createVNode("input", mergeProps({
         "ref": input2,
         "value": modelValue.value,
         "disabled": inputDisabled.value,
         "class": ns2.e("inner"),
-        "placeholder": props.placeholder || t("placeholder")
+        "placeholder": (_e = placeholder.value) != null ? _e : t("placeholder")
       }, otherAttrs, {
+        "title": title.value,
         "type": props.showPassword ? passwordVisible.value ? "text" : "password" : "text",
         "onInput": onInput,
         "onFocus": onFocus,
         "onBlur": onBlur,
         "onChange": onChange,
-        "onKeydown": onKeydown
-      }), null), suffixVisible && createVNode("span", {
+        "onKeydown": onKeydown,
+        "onCompositionstart": onCompositionStart,
+        "onCompositionupdate": onCompositionUpdate,
+        "onCompositionend": onCompositionEnd
+      }), null), [[resolveDirective("dAutoFocus"), autofocus.value]]), suffixVisible && createVNode("span", {
         "class": slotNs.e("suffix")
       }, [props.suffix && createVNode(Icon, {
         "size": inputSize.value,
         "name": props.suffix
-      }, null), ctx.slots.suffix && ((_f = (_e = ctx.slots).suffix) == null ? void 0 : _f.call(_e)), showPwdVisible.value && createVNode(Icon, {
+      }, null), ctx.slots.suffix && ((_g = (_f = ctx.slots).suffix) == null ? void 0 : _g.call(_f)), showPwdVisible.value && createVNode(Icon, {
         "size": inputSize.value,
         "class": ns2.em("password", "icon"),
         "name": passwordVisible.value ? "preview" : "preview-forbidden",
@@ -8315,11 +8442,12 @@ var Input = defineComponent({
       }, null), showClearable.value && createVNode(Icon, {
         "size": inputSize.value,
         "class": ns2.em("clear", "icon"),
-        "name": "close",
+        "name": "error-o",
+        "color": "#adb0b8",
         "onClick": onClear
       }, null)])]), ctx.slots.append && createVNode("div", {
         "class": slotNs.e("append")
-      }, [(_h = (_g = ctx.slots).append) == null ? void 0 : _h.call(_g)])]);
+      }, [(_i = (_h = ctx.slots).append) == null ? void 0 : _i.call(_h)])]);
     };
   }
 });