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

package/input/index.es.js

@@ -1,4 +1,19 @@
-import { inject, computed, ref, toRefs, defineComponent, watch, createVNode, mergeProps } 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 = {
   modelValue: {
     type: String,
@@ -15,6 +30,26 @@ const inputProps = {
   size: {
     type: String,
     default: "md"
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  prefix: {
+    type: String,
+    default: ""
+  },
+  suffix: {
+    type: String,
+    default: ""
+  },
+  showPassword: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
   }
 };
 const FORM_ITEM_TOKEN = Symbol("dFormItem");
@@ -28,8 +63,8 @@ function createBem(namespace, element, modifier) {
   }
   return cls;
 }
-function useNamespace(block) {
-  const namespace = `devui-${block}`;
+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) : "";
@@ -41,23 +76,36 @@ function useNamespace(block) {
     em
   };
 }
-function useInputRender(props) {
+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.b()]: true,
+    [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,
-    [ns.m(size.value)]: true
+    [ns.m("feedback")]: formItemContext == null ? void 0 : formItemContext.showFeedback
   }));
-  return { isFocus, wrapClasses };
+  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, ctx) {
+function useInputEvent(isFocus, props, ctx) {
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
   const onFocus = (e) => {
     isFocus.value = true;
@@ -66,7 +114,9 @@ function useInputEvent(isFocus, ctx) {
   const onBlur = (e) => {
     isFocus.value = false;
     ctx.emit("blur", e);
-    formItemContext == null ? void 0 : formItemContext.validate("blur").catch((err) => console.warn(err));
+    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);
@@ -77,14 +127,154 @@ function useInputEvent(isFocus, ctx) {
   const onKeydown = (e) => {
     ctx.emit("keydown", e);
   };
-  return { onFocus, onBlur, onInput, onChange, onKeydown };
+  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: "",
+    required: true
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  component: {
+    type: Object,
+    default: null
+  },
+  classPrefix: {
+    type: String,
+    default: DEFAULT_PREFIX
+  }
+};
+const svgIconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: 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;
+    });
+    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 svgIconDom = () => {
+      return createVNode(IconComponent, mergeProps({
+        "name": name.value,
+        "color": color.value,
+        "size": iconSize.value
+      }, attrs), null);
+    };
+    const imgIconDom = () => {
+      return createVNode("img", mergeProps({
+        "src": name.value,
+        "alt": name.value.split("/")[name.value.split("/").length - 1],
+        "style": {
+          width: iconSize.value || ""
+        }
+      }, attrs), null);
+    };
+    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"],
+  emits: ["update:modelValue", "focus", "blur", "input", "change", "keydown", "clear"],
   setup(props, ctx) {
     const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
     const {
@@ -92,33 +282,91 @@ var Input = defineComponent({
       disabled
     } = toRefs(props);
     const ns = useNamespace("input");
+    const slotNs = useNamespace("input-slot");
     const {
       isFocus,
-      wrapClasses
-    } = useInputRender(props);
+      wrapClasses,
+      inputClasses,
+      customStyle,
+      otherAttrs
+    } = useInputRender(props, ctx);
     const {
       onFocus,
       onBlur,
       onInput,
       onChange,
-      onKeydown
-    } = useInputEvent(isFocus, ctx);
+      onKeydown,
+      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, () => {
-      formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
+      if (props.validateEvent) {
+        formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
+      }
+    });
+    ctx.expose({
+      select,
+      focus,
+      blur
     });
-    return () => createVNode("div", {
-      "class": wrapClasses.value
-    }, [createVNode("input", mergeProps({
-      "value": modelValue.value,
-      "disabled": disabled.value,
-      "class": ns.e("inner")
-    }, ctx.attrs, {
-      "onInput": onInput,
-      "onFocus": onFocus,
-      "onBlur": onBlur,
-      "onChange": onChange,
-      "onKeydown": onKeydown
-    }), null)]);
+    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(l,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(l=typeof globalThis!="undefined"?globalThis:l||self,n(l.index={},l.Vue))})(this,function(l,n){"use strict";const b={modelValue:{type:String,default:""},disabled:{type:Boolean,default:!1},error:{type:Boolean,default:!1},size:{type:String,default:"md"}},p=Symbol("dFormItem");function r(t,e,u){let o=t;return e&&(o+=`__${e}`),u&&(o+=`--${u}`),o}function y(t){const e=`devui-${t}`;return{b:()=>r(e),e:a=>a?r(e,a):"",m:a=>a?r(e,"",a):"",em:(a,c)=>a&&c?r(e,a,c):""}}function h(t){const e=n.inject(p,void 0),u=n.computed(()=>(e==null?void 0:e.validateState)==="error"),o=y("input"),d=n.ref(!1),{error:i,size:a,disabled:c}=n.toRefs(t),s=n.computed(()=>({[o.b()]:!0,[o.m("focus")]:d.value,[o.m("disabled")]:c.value,[o.m("error")]:i.value||u.value,[o.m("feedback")]:e==null?void 0:e.showFeedback,[o.m(a.value)]:!0}));return{isFocus:d,wrapClasses:s}}function v(t,e){const u=n.inject(p,void 0);return{onFocus:s=>{t.value=!0,e.emit("focus",s)},onBlur:s=>{t.value=!1,e.emit("blur",s),u==null||u.validate("blur").catch(m=>console.warn(m))},onInput:s=>{e.emit("update:modelValue",s.target.value)},onChange:s=>{e.emit("change",s.target.value)},onKeydown:s=>{e.emit("keydown",s)}}}var I="",f=n.defineComponent({name:"DInput",inheritAttrs:!1,props:b,emits:["update:modelValue","focus","blur","input","change","keydown"],setup(t,e){const u=n.inject(p,void 0),{modelValue:o,disabled:d}=n.toRefs(t),i=y("input"),{isFocus:a,wrapClasses:c}=h(t),{onFocus:s,onBlur:m,onInput:w,onChange:F,onKeydown:V}=v(a,e);return n.watch(()=>t.modelValue,()=>{u==null||u.validate("change").catch(B=>console.warn(B))}),()=>n.createVNode("div",{class:c.value},[n.createVNode("input",n.mergeProps({value:o.value,disabled:d.value,class:i.e("inner")},e.attrs,{onInput:w,onFocus:s,onBlur:m,onChange:F,onKeydown:V}),null)])}}),g={title:"Input \u8F93\u5165\u6846",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(t){t.component(f.name,f)}};l.Input=f,l.default=g,l.inputProps=b,Object.defineProperty(l,"__esModule",{value:!0}),l[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 @@
-.devui-input{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))}.devui-input: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__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}