vue-devui 1.0.0-rc.6 → 1.0.0-rc.9

package/input/index.es.js

@@ -1,30 +1,45 @@
-import { defineComponent, inject, computed, ref, watch, createVNode, withDirectives, mergeProps, resolveDirective, resolveComponent } from "vue";
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { inject, computed, ref, toRefs, defineComponent, createVNode, resolveDynamicComponent, mergeProps, shallowRef, watch } from "vue";
 const inputProps = {
-  placeholder: {
+  modelValue: {
     type: String,
-    default: void 0
+    default: ""
   },
   disabled: {
     type: Boolean,
     default: false
   },
-  autoFocus: {
+  error: {
     type: Boolean,
     default: false
   },
-  maxLength: {
-    type: Number,
-    default: Number.MAX_SAFE_INTEGER
-  },
-  cssClass: {
+  size: {
     type: String,
-    default: ""
+    default: "md"
   },
-  error: {
+  validateEvent: {
     type: Boolean,
-    default: false
+    default: true
   },
-  size: {
+  prefix: {
+    type: String,
+    default: ""
+  },
+  suffix: {
     type: String,
     default: ""
   },
@@ -32,141 +47,326 @@ const inputProps = {
     type: Boolean,
     default: false
   },
-  modelValue: {
+  clearable: {
+    type: Boolean,
+    default: false
+  }
+};
+const FORM_ITEM_TOKEN = Symbol("dFormItem");
+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
+  };
+}
+function useInputRender(props, ctx) {
+  const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
+  const isValidateError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
+  const ns = useNamespace("input");
+  const slotNs = useNamespace("input-slot");
+  const isFocus = ref(false);
+  const { error, size, disabled } = toRefs(props);
+  const slots = ctx.slots;
+  const _a = ctx.attrs, { style, class: customClass } = _a, otherAttrs = __objRest(_a, ["style", "class"]);
+  const customStyle = { style };
+  const wrapClasses = computed(() => ({
+    [ns.e("wrapper")]: true,
+    [ns.m("focus")]: isFocus.value,
+    [ns.m("disabled")]: disabled.value,
+    [ns.m("error")]: error.value || isValidateError.value,
+    [ns.m("feedback")]: formItemContext == null ? void 0 : formItemContext.showFeedback
+  }));
+  const inputClasses = computed(() => [
+    {
+      [ns.b()]: true,
+      [ns.m(size.value)]: true,
+      [slotNs.b()]: slots.prepend || slots.append,
+      [ns.m("append")]: slots.append,
+      [ns.m("prepend")]: slots.prepend
+    },
+    customClass
+  ]);
+  return { isFocus, wrapClasses, inputClasses, customStyle, otherAttrs };
+}
+function useInputEvent(isFocus, props, ctx) {
+  const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
+  const onFocus = (e) => {
+    isFocus.value = true;
+    ctx.emit("focus", e);
+  };
+  const onBlur = (e) => {
+    isFocus.value = false;
+    ctx.emit("blur", e);
+    if (props.validateEvent) {
+      formItemContext == null ? void 0 : formItemContext.validate("blur").catch((err) => console.warn(err));
+    }
+  };
+  const onInput = (e) => {
+    ctx.emit("update:modelValue", e.target.value);
+  };
+  const onChange = (e) => {
+    ctx.emit("change", e.target.value);
+  };
+  const onKeydown = (e) => {
+    ctx.emit("keydown", e);
+  };
+  const onClear = () => {
+    ctx.emit("update:modelValue", "");
+    ctx.emit("clear");
+  };
+  return { onFocus, onBlur, onInput, onChange, onKeydown, onClear };
+}
+function useInputFunction(input2) {
+  const refInput = computed(() => input2.value);
+  const select = () => {
+    var _a;
+    (_a = refInput.value) == null ? void 0 : _a.select();
+  };
+  const focus = () => {
+    var _a;
+    (_a = refInput.value) == null ? void 0 : _a.focus();
+  };
+  const blur = () => {
+    var _a;
+    (_a = refInput.value) == null ? void 0 : _a.blur();
+  };
+  return { select, focus, blur };
+}
+var input = "";
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+const DEFAULT_PREFIX = "icon";
+const iconProps = {
+  name: {
     type: String,
-    default: ""
-  },
-  "update:modelValue": {
-    type: Function,
-    default: void 0
+    default: "",
+    required: true
   },
-  onChange: {
-    type: Function,
-    default: void 0
+  size: {
+    type: [Number, String],
+    default: "inherit"
   },
-  onKeydown: {
-    type: Function,
-    default: void 0
+  color: {
+    type: String,
+    default: "inherit"
   },
-  onFocus: {
-    type: Function,
-    default: void 0
+  component: {
+    type: Object,
+    default: null
   },
-  onBlur: {
-    type: Function,
-    default: void 0
+  classPrefix: {
+    type: String,
+    default: DEFAULT_PREFIX
   }
 };
-const FORM_ITEM_TOKEN = Symbol("dFormItem");
-var input = "";
-var Input = defineComponent({
-  name: "DInput",
-  directives: {
-    focus: {
-      mounted: function(el, binding) {
-        if (binding.value) {
-          el.focus();
-        }
-      }
-    }
+const svgIconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
   },
-  props: inputProps,
-  emits: ["update:modelValue", "focus", "blur", "change", "keydown"],
-  setup(props, ctx) {
-    const formItemContext = inject(FORM_ITEM_TOKEN);
-    const sizeCls = computed(() => `devui-input-${props.size}`);
-    const showPwdIcon = ref(false);
-    const inputType = ref("text");
-    const isValidateError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
-    const inputCls = computed(() => ({
-      "devui-error": props.error || isValidateError.value,
-      [props.cssClass]: true,
-      "devui-input-restore": showPwdIcon.value,
-      [sizeCls.value]: props.size !== ""
-    }));
-    const showPreviewIcon = computed(() => inputType.value === "password");
-    watch(() => props.showPassword, (flg) => {
-      inputType.value = flg ? "password" : "text";
-      showPwdIcon.value = props.showPassword;
-    }, {
-      immediate: true
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  }
+};
+var icon = "";
+var svgIcon = defineComponent({
+  name: "DSvgIcon",
+  props: svgIconProps,
+  setup(props) {
+    const {
+      name,
+      color,
+      size
+    } = toRefs(props);
+    const ns = useNamespace("svg-icon");
+    const iconName = computed(() => `#icon-${name.value}`);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
     });
-    watch(() => props.modelValue, () => {
-      formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
+    const styles = {
+      width: iconSize.value,
+      height: iconSize.value
+    };
+    return () => {
+      return createVNode("svg", {
+        "class": ns.b(),
+        "style": styles
+      }, [createVNode("use", {
+        "xlink:href": iconName.value,
+        "fill": color.value
+      }, null)]);
+    };
+  }
+});
+var Icon = defineComponent({
+  name: "DIcon",
+  props: iconProps,
+  setup(props, {
+    attrs
+  }) {
+    const {
+      component,
+      name,
+      size,
+      color,
+      classPrefix
+    } = toRefs(props);
+    const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
     });
-    const onInput = ($event) => {
-      ctx.emit("update:modelValue", $event.target.value);
-    }, onFocus = () => {
-      ctx.emit("focus");
-    }, onBlur = () => {
-      ctx.emit("blur");
-      formItemContext == null ? void 0 : formItemContext.validate("blur").catch((err) => console.warn(err));
-    }, onChange = ($event) => {
-      ctx.emit("change", $event.target.value);
-    }, onKeydown = ($event) => {
-      ctx.emit("keydown", $event);
-    }, onChangeInputType = () => {
-      inputType.value = inputType.value === "password" ? "text" : "password";
+    const svgIconDom = () => {
+      return createVNode(IconComponent, mergeProps({
+        "name": name.value,
+        "color": color.value,
+        "size": iconSize.value
+      }, attrs), null);
     };
-    return {
-      inputCls,
-      inputType,
-      showPreviewIcon,
-      showPwdIcon,
-      onInput,
-      onFocus,
-      onBlur,
-      onChange,
-      onKeydown,
-      onChangeInputType
+    const imgIconDom = () => {
+      return createVNode("img", mergeProps({
+        "src": name.value,
+        "alt": name.value.split("/")[name.value.split("/").length - 1],
+        "style": {
+          width: iconSize.value || ""
+        }
+      }, attrs), null);
     };
-  },
-  render() {
+    const fontIconDom = () => {
+      const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+      return createVNode("i", mergeProps({
+        "class": [classPrefix.value, fontIconClass],
+        "style": {
+          fontSize: iconSize.value,
+          color: color.value
+        }
+      }, attrs), null);
+    };
+    return () => {
+      return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+    };
+  }
+});
+var Input = defineComponent({
+  name: "DInput",
+  inheritAttrs: false,
+  props: inputProps,
+  emits: ["update:modelValue", "focus", "blur", "input", "change", "keydown", "clear"],
+  setup(props, ctx) {
+    const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
     const {
       modelValue,
-      showPreviewIcon,
-      showPwdIcon,
-      inputCls,
-      inputType,
-      maxLength,
-      autoFocus,
-      placeholder,
-      disabled,
-      onInput,
+      disabled
+    } = toRefs(props);
+    const ns = useNamespace("input");
+    const slotNs = useNamespace("input-slot");
+    const {
+      isFocus,
+      wrapClasses,
+      inputClasses,
+      customStyle,
+      otherAttrs
+    } = useInputRender(props, ctx);
+    const {
       onFocus,
       onBlur,
+      onInput,
       onChange,
       onKeydown,
-      onChangeInputType
-    } = this;
-    return createVNode("div", {
-      "class": "devui-input__wrap"
-    }, [withDirectives(createVNode("input", mergeProps({
-      dinput: true
-    }, {
-      "value": modelValue,
-      "disabled": disabled,
-      "type": inputType,
-      "maxlength": maxLength,
-      "placeholder": placeholder,
-      "class": inputCls,
-      "onInput": onInput,
-      "onFocus": onFocus,
-      "onBlur": onBlur,
-      "onChange": onChange,
-      "onKeydown": onKeydown
-    }), null), [[resolveDirective("focus"), autoFocus]]), showPwdIcon && createVNode("div", {
-      "class": "devui-input__preview",
-      "onClick": onChangeInputType
-    }, [showPreviewIcon ? createVNode(resolveComponent("d-icon"), {
-      "name": "preview-forbidden",
-      "size": "12px",
-      "key": 1
-    }, null) : createVNode(resolveComponent("d-icon"), {
-      "name": "preview",
-      "size": "12px",
-      "key": 2
-    }, null)])]);
+      onClear
+    } = useInputEvent(isFocus, props, ctx);
+    const input2 = shallowRef();
+    const {
+      select,
+      focus,
+      blur
+    } = useInputFunction(input2);
+    const passwordVisible = ref(false);
+    const clickPasswordIcon = () => {
+      passwordVisible.value = !passwordVisible.value;
+      focus();
+    };
+    const prefixVisiable = ctx.slots.prefix || props.prefix;
+    const suffixVisiable = ctx.slots.suffix || props.suffix || props.showPassword || props.clearable;
+    const showPwdVisible = computed(() => props.showPassword && !props.disabled);
+    const showClearable = computed(() => props.clearable && !props.disabled);
+    watch(() => props.modelValue, () => {
+      if (props.validateEvent) {
+        formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
+      }
+    });
+    ctx.expose({
+      select,
+      focus,
+      blur
+    });
+    return () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      return createVNode("div", mergeProps({
+        "class": inputClasses.value
+      }, customStyle), [ctx.slots.prepend && createVNode("div", {
+        "class": slotNs.e("prepend")
+      }, [(_b = (_a = ctx.slots).prepend) == null ? void 0 : _b.call(_a)]), createVNode("div", {
+        "class": wrapClasses.value
+      }, [prefixVisiable && createVNode("span", {
+        "class": slotNs.e("prefix")
+      }, [ctx.slots.prefix && createVNode("div", null, [(_d = (_c = ctx.slots).prefix) == null ? void 0 : _d.call(_c)]), props.prefix && createVNode(Icon, {
+        "size": props.size,
+        "name": props.prefix
+      }, null)]), createVNode("input", mergeProps({
+        "ref": input2,
+        "value": modelValue.value,
+        "disabled": disabled.value,
+        "class": ns.e("inner")
+      }, otherAttrs, {
+        "type": props.showPassword ? passwordVisible.value ? "text" : "password" : "text",
+        "onInput": onInput,
+        "onFocus": onFocus,
+        "onBlur": onBlur,
+        "onChange": onChange,
+        "onKeydown": onKeydown
+      }), null), suffixVisiable && createVNode("span", {
+        "class": slotNs.e("suffix")
+      }, [props.suffix && createVNode(Icon, {
+        "size": props.size,
+        "name": props.suffix
+      }, null), ctx.slots.suffix && createVNode("div", null, [(_f = (_e = ctx.slots).suffix) == null ? void 0 : _f.call(_e)]), showPwdVisible.value && createVNode(Icon, {
+        "size": props.size,
+        "class": ns.em("password", "icon"),
+        "name": passwordVisible.value ? "preview" : "preview-forbidden",
+        "onClick": clickPasswordIcon
+      }, null), showClearable.value && createVNode(Icon, {
+        "size": props.size,
+        "class": ns.em("clear", "icon"),
+        "name": "close",
+        "onClick": onClear
+      }, null)])]), ctx.slots.append && createVNode("div", {
+        "class": slotNs.e("append")
+      }, [(_h = (_g = ctx.slots).append) == null ? void 0 : _h.call(_g)])]);
+    };
   }
 });
 var index = {

package/input/index.umd.js

@@ -1 +1 @@
-(function(u,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis!="undefined"?globalThis:u||self,e(u.index={},u.Vue))})(this,function(u,e){"use strict";const f={placeholder:{type:String,default:void 0},disabled:{type:Boolean,default:!1},autoFocus:{type:Boolean,default:!1},maxLength:{type:Number,default:Number.MAX_SAFE_INTEGER},cssClass:{type:String,default:""},error:{type:Boolean,default:!1},size:{type:String,default:""},showPassword:{type:Boolean,default:!1},modelValue:{type:String,default:""},"update:modelValue":{type:Function,default:void 0},onChange:{type:Function,default:void 0},onKeydown:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onBlur:{type:Function,default:void 0}},F=Symbol("dFormItem");var V="",i=e.defineComponent({name:"DInput",directives:{focus:{mounted:function(n,a){a.value&&n.focus()}}},props:f,emits:["update:modelValue","focus","blur","change","keydown"],setup(n,a){const t=e.inject(F),s=e.computed(()=>`devui-input-${n.size}`),l=e.ref(!1),d=e.ref("text"),r=e.computed(()=>(t==null?void 0:t.validateState)==="error"),c=e.computed(()=>({"devui-error":n.error||r.value,[n.cssClass]:!0,"devui-input-restore":l.value,[s.value]:n.size!==""})),p=e.computed(()=>d.value==="password");return e.watch(()=>n.showPassword,o=>{d.value=o?"password":"text",l.value=n.showPassword},{immediate:!0}),e.watch(()=>n.modelValue,()=>{t==null||t.validate("change").catch(o=>console.warn(o))}),{inputCls:c,inputType:d,showPreviewIcon:p,showPwdIcon:l,onInput:o=>{a.emit("update:modelValue",o.target.value)},onFocus:()=>{a.emit("focus")},onBlur:()=>{a.emit("blur"),t==null||t.validate("blur").catch(o=>console.warn(o))},onChange:o=>{a.emit("change",o.target.value)},onKeydown:o=>{a.emit("keydown",o)},onChangeInputType:()=>{d.value=d.value==="password"?"text":"password"}}},render(){const{modelValue:n,showPreviewIcon:a,showPwdIcon:t,inputCls:s,inputType:l,maxLength:d,autoFocus:r,placeholder:c,disabled:p,onInput:y,onFocus:w,onBlur:h,onChange:m,onKeydown:g,onChangeInputType:v}=this;return e.createVNode("div",{class:"devui-input__wrap"},[e.withDirectives(e.createVNode("input",e.mergeProps({dinput:!0},{value:n,disabled:p,type:l,maxlength:d,placeholder:c,class:s,onInput:y,onFocus:w,onBlur:h,onChange:m,onKeydown:g}),null),[[e.resolveDirective("focus"),r]]),t&&e.createVNode("div",{class:"devui-input__preview",onClick:v},[a?e.createVNode(e.resolveComponent("d-icon"),{name:"preview-forbidden",size:"12px",key:1},null):e.createVNode(e.resolveComponent("d-icon"),{name:"preview",size:"12px",key:2},null)])])}}),I={title:"Input \u8F93\u5165\u6846",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(n){n.component(i.name,i)}};u.Input=i,u.default=I,u.inputProps=f,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});
+var j=Object.getOwnPropertySymbols;var ee=Object.prototype.hasOwnProperty,ne=Object.prototype.propertyIsEnumerable;var A=(u,e)=>{var m={};for(var d in u)ee.call(u,d)&&e.indexOf(d)<0&&(m[d]=u[d]);if(u!=null&&j)for(var d of j(u))e.indexOf(d)<0&&ne.call(u,d)&&(m[d]=u[d]);return m};(function(u,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis!="undefined"?globalThis:u||self,e(u.index={},u.Vue))})(this,function(u,e){"use strict";const m={modelValue:{type:String,default:""},disabled:{type:Boolean,default:!1},error:{type:Boolean,default:!1},size:{type:String,default:"md"},validateEvent:{type:Boolean,default:!0},prefix:{type:String,default:""},suffix:{type:String,default:""},showPassword:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1}},d=Symbol("dFormItem");function g(n,t,s){let o=n;return t&&(o+=`__${t}`),s&&(o+=`--${s}`),o}function y(n,t=!1){const s=t?`.devui-${n}`:`devui-${n}`;return{b:()=>g(s),e:c=>c?g(s,c):"",m:c=>c?g(s,"",c):"",em:(c,f)=>c&&f?g(s,c,f):""}}function K(n,t){const s=e.inject(d,void 0),o=e.computed(()=>(s==null?void 0:s.validateState)==="error"),a=y("input"),l=y("input-slot"),r=e.ref(!1),{error:c,size:f,disabled:v}=e.toRefs(n),i=t.slots,w=t.attrs,{style:p,class:b}=w,S=A(w,["style","class"]),P={style:p},z=e.computed(()=>({[a.e("wrapper")]:!0,[a.m("focus")]:r.value,[a.m("disabled")]:v.value,[a.m("error")]:c.value||o.value,[a.m("feedback")]:s==null?void 0:s.showFeedback})),C=e.computed(()=>[{[a.b()]:!0,[a.m(f.value)]:!0,[l.b()]:i.prepend||i.append,[a.m("append")]:i.append,[a.m("prepend")]:i.prepend},b]);return{isFocus:r,wrapClasses:z,inputClasses:C,customStyle:P,otherAttrs:S}}function M(n,t,s){const o=e.inject(d,void 0);return{onFocus:i=>{n.value=!0,s.emit("focus",i)},onBlur:i=>{n.value=!1,s.emit("blur",i),t.validateEvent&&(o==null||o.validate("blur").catch(p=>console.warn(p)))},onInput:i=>{s.emit("update:modelValue",i.target.value)},onChange:i=>{s.emit("change",i.target.value)},onKeydown:i=>{s.emit("keydown",i)},onClear:()=>{s.emit("update:modelValue",""),s.emit("clear")}}}function O(n){const t=e.computed(()=>n.value);return{select:()=>{var l;(l=t.value)==null||l.select()},focus:()=>{var l;(l=t.value)==null||l.focus()},blur:()=>{var l;(l=t.value)==null||l.blur()}}}var te="";function q(n){return/^((http|https):)?\/\//.test(n)}const x={name:{type:String,default:"",required:!0},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"}},U={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};var oe="",L=e.defineComponent({name:"DSvgIcon",props:U,setup(n){const{name:t,color:s,size:o}=e.toRefs(n),a=y("svg-icon"),l=e.computed(()=>`#icon-${t.value}`),r=e.computed(()=>typeof o.value=="number"?`${o.value}px`:o.value),c={width:r.value,height:r.value};return()=>e.createVNode("svg",{class:a.b(),style:c},[e.createVNode("use",{"xlink:href":l.value,fill:s.value},null)])}}),h=e.defineComponent({name:"DIcon",props:x,setup(n,{attrs:t}){const{component:s,name:o,size:a,color:l,classPrefix:r}=e.toRefs(n),c=s.value?e.resolveDynamicComponent(s.value):e.resolveDynamicComponent(L),f=e.computed(()=>typeof a.value=="number"?`${a.value}px`:a.value),v=()=>e.createVNode(c,e.mergeProps({name:o.value,color:l.value,size:f.value},t),null),i=()=>e.createVNode("img",e.mergeProps({src:o.value,alt:o.value.split("/")[o.value.split("/").length-1],style:{width:f.value||""}},t),null),p=()=>{const b=/^icon-/.test(o.value)?o.value:`${r.value}-${o.value}`;return e.createVNode("i",e.mergeProps({class:[r.value,b],style:{fontSize:f.value,color:l.value}},t),null)};return()=>s.value?v():q(o.value)?i():p()}}),I=e.defineComponent({name:"DInput",inheritAttrs:!1,props:m,emits:["update:modelValue","focus","blur","input","change","keydown","clear"],setup(n,t){const s=e.inject(d,void 0),{modelValue:o,disabled:a}=e.toRefs(n),l=y("input"),r=y("input-slot"),{isFocus:c,wrapClasses:f,inputClasses:v,customStyle:i,otherAttrs:p}=K(n,t),{onFocus:b,onBlur:S,onInput:P,onChange:z,onKeydown:C,onClear:w}=M(c,n,t),F=e.shallowRef(),{select:G,focus:E,blur:H}=O(F),V=e.ref(!1),J=()=>{V.value=!V.value,E()},Q=t.slots.prefix||n.prefix,W=t.slots.suffix||n.suffix||n.showPassword||n.clearable,Y=e.computed(()=>n.showPassword&&!n.disabled),Z=e.computed(()=>n.clearable&&!n.disabled);return e.watch(()=>n.modelValue,()=>{n.validateEvent&&(s==null||s.validate("change").catch(N=>console.warn(N)))}),t.expose({select:G,focus:E,blur:H}),()=>{var N,B,D,R,$,_,k,T;return e.createVNode("div",e.mergeProps({class:v.value},i),[t.slots.prepend&&e.createVNode("div",{class:r.e("prepend")},[(B=(N=t.slots).prepend)==null?void 0:B.call(N)]),e.createVNode("div",{class:f.value},[Q&&e.createVNode("span",{class:r.e("prefix")},[t.slots.prefix&&e.createVNode("div",null,[(R=(D=t.slots).prefix)==null?void 0:R.call(D)]),n.prefix&&e.createVNode(h,{size:n.size,name:n.prefix},null)]),e.createVNode("input",e.mergeProps({ref:F,value:o.value,disabled:a.value,class:l.e("inner")},p,{type:n.showPassword?V.value?"text":"password":"text",onInput:P,onFocus:b,onBlur:S,onChange:z,onKeydown:C}),null),W&&e.createVNode("span",{class:r.e("suffix")},[n.suffix&&e.createVNode(h,{size:n.size,name:n.suffix},null),t.slots.suffix&&e.createVNode("div",null,[(_=($=t.slots).suffix)==null?void 0:_.call($)]),Y.value&&e.createVNode(h,{size:n.size,class:l.em("password","icon"),name:V.value?"preview":"preview-forbidden",onClick:J},null),Z.value&&e.createVNode(h,{size:n.size,class:l.em("clear","icon"),name:"close",onClick:w},null)])]),t.slots.append&&e.createVNode("div",{class:r.e("append")},[(T=(k=t.slots).append)==null?void 0:T.call(k)])])}}}),X={title:"Input \u8F93\u5165\u6846",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(n){n.component(I.name,I)}};u.Input=I,u.default=X,u.inputProps=m,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});

package/input/style.css

@@ -1 +1 @@
-@charset "UTF-8";.devui-form-controls input[type=text],.devui-form-controls input[type=password],[dInput]{width:100%;height:28px;font-size:var(--devui-font-size, 12px)}.devui-form-controls input[type=text].devui-input-sm,.devui-form-controls input[type=password].devui-input-sm,[dInput].devui-input-sm{font-size:var(--devui-font-size-sm, 12px);height:26px}.devui-form-controls input[type=text].devui-input-lg,.devui-form-controls input[type=password].devui-input-lg,[dInput].devui-input-lg{font-size:var(--devui-font-size-lg, 14px);height:46px}[dTextArea]{width:100%}.devui-form-controls textarea,[dInput],[dTextarea]{box-sizing:border-box;padding:4px 10px;color:var(--devui-text, #252b3a);vertical-align:middle;border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);outline:none;background-color:var(--devui-base-bg, #ffffff);transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-form-controls textarea:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-form-controls textarea:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-form-controls textarea[disabled],.devui-form-controls textarea[disabled]:hover,.devui-form-controls textarea.disabled,.devui-form-controls textarea.disabled:hover,.devui-form-controls textarea.devui-disabled,.devui-form-controls textarea.devui-disabled:hover,[dInput][disabled],[dInput][disabled]:hover,[dInput].disabled,[dInput].disabled:hover,[dInput].devui-disabled,[dInput].devui-disabled:hover,[dTextarea][disabled],[dTextarea][disabled]:hover,[dTextarea].disabled,[dTextarea].disabled:hover,[dTextarea].devui-disabled,[dTextarea].devui-disabled:hover{cursor:not-allowed;background-color:var(--devui-disabled-bg, #f5f5f6);border-color:var(--devui-disabled-line, #dfe1e6);color:var(--devui-disabled-text, #adb0b8)}.devui-form-controls textarea,[dTextarea]{width:100%}.devui-input-group{position:relative;display:table;border-collapse:separate}.devui-input-group-addon{border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);display:table-cell;padding:0 10px;text-align:center}.devui-input-group-addon:last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}.devui-input-group-addon:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.devui-input{outline:none;background-color:var(--devui-base-bg, #ffffff);border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);padding:5px 10px;line-height:16px;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a);width:100%;display:block;cursor:text;height:28px;transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-input:hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-input:focus{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-input[disabled],.devui-input[disabled]:hover,.devui-input[disabled]:focus,.devui-input[disabled]:hover:focus,.devui-input.disabled,.devui-input.disabled:hover,.devui-input.disabled:focus,.devui-input.disabled:hover:focus,.devui-input.devui-disabled,.devui-input.devui-disabled:hover,.devui-input.devui-disabled:focus,.devui-input.devui-disabled:hover:focus{border-color:var(--devui-disabled-line, #dfe1e6);color:var(--devui-disabled-text, #adb0b8);background-color:var(--devui-disabled-bg, #f5f5f6);cursor:not-allowed}.devui-input::placeholder{color:var(--devui-placeholder, #8a8e99)}.devui-input.devui-search-in-dropdown{margin:0;border:none;padding:5px 26px 5px 10px;background-color:var(--devui-embed-search-bg, #f2f5fc);color:var(--devui-text, #252b3a)}.devui-input.devui-search-in-dropdown:-ms-input-placeholder{color:var(--devui-placeholder, #8a8e99)}.devui-input.devui-search-in-dropdown:hover{background-color:var(--devui-embed-search-bg-hover, #eef0f5)}.devui-input-group>.devui-input{display:table-cell}.devui-input-group>.devui-input:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.devui-input-group>.devui-input:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.devui-input-group>.devui-input:not(:first-child):not(:last-child){border-radius:0}.devui-input-lg{font-size:var(--devui-font-size-page-title, 16px);line-height:20px;height:32px}.devui-input-sm{font-size:var(--devui-font-size, 12px);line-height:14px;height:26px}.devui-dropup,.devui-dropdown,.devui-form-group{position:relative}.devui-form-control{color:var(--devui-text, #252b3a);background-color:var(--devui-base-bg, #ffffff);display:block;border-radius:var(--devui-border-radius, 2px);outline:0;transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-form-control[disabled],.devui-form-control[disabled]:hover,.devui-form-control[disabled]:focus,.devui-form-control.disabled,.devui-form-control.disabled:hover,.devui-form-control.disabled:focus,.devui-form-control.devui-disabled,.devui-form-control.devui-disabled:hover,.devui-form-control.devui-disabled:focus{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-form-control[disabled],.devui-form-control[disabled]>input,.devui-form-control[disabled]:hover,.devui-form-control[disabled]:hover>input,.devui-form-control[disabled]:focus,.devui-form-control[disabled]:focus>input,.devui-form-control.disabled,.devui-form-control.disabled>input,.devui-form-control.disabled:hover,.devui-form-control.disabled:hover>input,.devui-form-control.disabled:focus,.devui-form-control.disabled:focus>input,.devui-form-control.devui-disabled,.devui-form-control.devui-disabled>input,.devui-form-control.devui-disabled:hover,.devui-form-control.devui-disabled:hover>input,.devui-form-control.devui-disabled:focus,.devui-form-control.devui-disabled:focus>input{color:var(--devui-disabled-text, #adb0b8);background-color:var(--devui-disabled-bg, #f5f5f6);cursor:not-allowed}.devui-form-control:hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-form-control:focus{border-color:var(--devui-form-control-line-active, #5e7ce0)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border){border-color:var(--devui-form-control-line, #adb0b8);transition:border-color .3s cubic-bezier(.645,.045,.355,1)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):hover:not(:focus):not(.devui-dropdown-origin-open){border-color:var(--devui-form-control-line-hover, #575d6c)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):focus,:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):focus-within{outline:none;border-color:var(--devui-form-control-line-active, #5e7ce0)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border).devui-dropdown-origin-open{outline:none;border-color:var(--devui-connected-overlay-line, #526ecc)}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]){min-height:28px}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled){color:var(--devui-text, #252b3a)}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-input,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-form-control{height:26px}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not(.devui-select-underlined-border):not(.devui-dropdown-no-border):not(.devui-no-border){border-radius:var(--devui-border-radius, 2px);border-width:1px;border-style:solid}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:focus{border-color:transparent}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:focus{background-color:var(--devui-disabled-bg, #f5f5f6)}input::-moz-placeholder{color:var(--devui-placeholder, #8a8e99)}input:-ms-input-placeholder{color:var(--devui-placeholder, #8a8e99)}input::-webkit-input-placeholder{color:var(--devui-placeholder, #8a8e99)}[dInput]:not([disabled]):not(.disabled):not(.devui-disabled).error,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).error,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}[dDatePicker]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error{background-color:var(--devui-danger-bg, #ffeeed)}d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup,d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown{border-color:var(--devui-danger-line, #f66f6a)}d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup .devui-form-group .devui-input.devui-form-control.devui-select-input:not(.devui-select-search),d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup .devui-form-group .devui-select-input:not(.devui-select-search)+.devui-form-control-feedback,d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown .devui-form-group .devui-input.devui-form-control.devui-select-input:not(.devui-select-search),d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown .devui-form-group .devui-select-input:not(.devui-select-search)+.devui-form-control-feedback{background-color:var(--devui-danger-bg, #ffeeed)}d-editable-select:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-form-group:not(.multiple-label-auto-complete-disabled) input.devui-form-control.devui-dropdown-origin{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-single-picker{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-single-picker .devui-input:not(.devui-disabled){background-color:var(--devui-danger-bg, #ffeeed)}d-range-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-range-picker{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-range-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-range-picker .devui-input:not(.devui-disabled){background-color:var(--devui-danger-bg, #ffeeed)}d-input-number:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .input-box:not(:disabled){border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-multi-auto-complete:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled).multiple-label-auto-complete.multiple-label-auto-complete-border ul.devui-dropdown-origin{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-multi-auto-complete:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) input[dAutoComplete]{background-color:var(--devui-danger-bg, #ffeeed)}d-tags-input:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) div.devui-tags.devui-form-control{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-tags-input:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) input.devui-input{background-color:var(--devui-danger-bg, #ffeeed)}d-tree-select:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled)>div.devui-select-input.devui-dropdown-origin.devui-tree-select-input{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-search:not([disabled]):not(.disabled):not(.devui-disabled).devui-error input.devui-input{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-editor-md:not([disabled]):not(.disabled):not(.devui-disabled).devui-error{border-color:var(--devui-danger-line, #f66f6a)}d-editor:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .ql-toolbar,d-editor:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .ql-container{border-color:var(--devui-danger-line, #f66f6a)}d-form-control d-search{width:100%}.devui-form-controls.devui-form-control-has-suffix [dInput],.devui-form-controls.devui-form-control-has-suffix [dTextArea]{padding-right:28px}.devui-form-controls.devui-form-control-has-suffix.devui-form-control-has-feedback [dInput],.devui-form-controls.devui-form-control-has-suffix.devui-form-control-has-feedback [dTextArea]{padding-right:56px}.devui-form-controls.devui-form-control-has-feedback [dInput],.devui-form-controls.devui-form-control-has-feedback [dTextarea]{padding-right:28px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-icon{right:24px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-icon-left{padding-right:30px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input{padding-right:54px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit{padding-right:84px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line.devui-search-line-sm{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear.devui-search-clear-sm{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-input-sm{padding-right:54px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit.devui-input-sm{padding-right:84px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line.devui-search-line-lg{right:70px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear.devui-search-clear-lg{right:70px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-input-lg{padding-right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit.devui-input-lg{padding-right:95px}.devui-form-controls.devui-form-control-has-feedback d-select .devui-form-group .devui-select-input{padding-right:48px}.devui-form-controls.devui-form-control-has-feedback d-select .devui-form-group .devui-form-control-feedback{right:24px}.devui-form-controls.devui-form-control-has-feedback d-tree-select{vertical-align:middle}.devui-form-controls.devui-form-control-has-feedback d-tree-select .devui-tree-select .devui-select-input.devui-tree-select-input{padding-right:52px}.devui-form-controls.devui-form-control-has-feedback d-tree-select .devui-tree-select .devui-select-chevron-icon{right:34px}.devui-form-controls.devui-form-control-has-feedback d-input-number{width:100%}.devui-form-controls.devui-form-control-has-feedback d-input-number .input-control-buttons{right:32px}.devui-form-controls.devui-form-control-has-feedback d-input-number .input-box{padding-right:32px}.devui-form-controls.devui-form-control-has-feedback d-input-number:hover .input-box:not(.disabled){padding-right:58px}.devui-form-controls.devui-form-control-has-feedback d-tags-input .devui-tags{padding-right:28px}.devui-form-controls.devui-form-control-has-feedback d-multi-auto-complete .multiple-label-auto-complete ul{padding-right:28px}.devui-form-controls.devui-form-control-has-feedback d-editable-select .devui-form-group.devui-has-feedback>.devui-form-control-feedback{right:24px}.devui-form-controls.devui-form-control-has-feedback d-editable-select>div>.devui-form-control{padding-right:48px}.devui-form-controls.devui-form-control-has-feedback [dDatePicker].devui-form-control{padding-right:32px}.devui-input__wrap{position:relative;display:flex;justify-content:"space-between";align-items:center}.devui-input__wrap .devui-input-restore{padding-right:32px}.devui-input__preview{position:absolute;width:32px;height:16px;right:0;text-align:center;line-height:16px;cursor:pointer;display:flex;justify-content:center;align-items:center;flex-direction:column}.devui-input .devui-error{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}
+.devui-input__wrapper{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:0 8px;box-sizing:border-box;border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-form-control-bg, #ffffff);transition:border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));height:100%}.devui-input__wrapper:not(.devui-input--error):not(.devui-input--disabled):hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-input--focus:not(.devui-input--error){border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-input--focus:not(.devui-input--error):hover{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-input--disabled{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f6);cursor:not-allowed}.devui-input--disabled:hover{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-input--disabled .devui-input__inner{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-input--error{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}.devui-input--sm{height:26px;font-size:var(--devui-font-size-sm, 12px)}.devui-input--md{height:28px;font-size:var(--devui-font-size, 12px)}.devui-input--lg{height:46px;font-size:var(--devui-font-size-lg, 14px)}.devui-input--feedback{padding-right:28px}.devui-input__inner{width:100%;height:100%;color:var(--devui-text, #252b3a);font-size:inherit;padding:4px 0;border:none;background:none;outline:none}.devui-input--prepend .devui-input__wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.devui-input--append .devui-input__wrapper{border-top-right-radius:0;border-bottom-right-radius:0}.devui-input-slot{display:inline-flex;width:100%;align-items:stretch}.devui-input-slot__prepend,.devui-input-slot__append{color:var(--devui-text);position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:100%;padding:0 20px;white-space:nowrap;border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-form-control-bg, #ffffff)}.devui-input-slot__prepend .devui-button,.devui-input-slot__prepend .devui-select .devui-select__input,.devui-input-slot__append .devui-button,.devui-input-slot__append .devui-select .devui-select__input{border:none;background-color:transparent;color:inherit}.devui-input-slot__prepend .devui-button,.devui-input-slot__prepend .devui-select__selection,.devui-input-slot__append .devui-button,.devui-input-slot__append .devui-select__selection{display:inline-block;margin:0 -20px}.devui-input-slot__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.devui-input-slot__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.devui-input-slot__prefix,.devui-input-slot__suffix{display:inline-flex;white-space:nowrap;flex-shrink:0;flex-wrap:nowrap;align-items:center}.devui-input-slot__prefix>*{margin-right:8px}.devui-input-slot__suffix>*{margin-left:8px}.devui-input__clear--icon,.devui-input__password--icon{cursor:pointer}.devui-svg-icon{vertical-align:middle}