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

package/tabs/index.es.js

@@ -33,6 +33,29 @@ const tabsProps = {
     default: null
   }
 };
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `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
+  };
+}
 var tabs = "";
 var Tabs = defineComponent({
   name: "DTabs",
@@ -42,6 +65,7 @@ var Tabs = defineComponent({
     emit,
     slots
   }) {
+    const ns = useNamespace("tabs");
     const tabsEle = ref(null);
     const data = reactive({
       offsetLeft: 0,
@@ -91,9 +115,9 @@ var Tabs = defineComponent({
         }
       });
     };
-    const ulClass = [props.type];
+    const ulClass = [ns.em("nav", props.type)];
     props.cssClass && ulClass.push(props.cssClass);
-    props.vertical && ulClass.push("devui-nav-stacked");
+    props.vertical && ulClass.push(ns.e("stacked"));
     onUpdated(() => {
       if (props.type === "slider") {
         setTimeout(() => {
@@ -117,11 +141,11 @@ var Tabs = defineComponent({
     });
     return () => {
       return createVNode("div", {
-        "class": "devui-tabs"
+        "class": ns.b()
       }, [createVNode("ul", {
         "ref": tabsEle,
         "role": "tablist",
-        "class": `devui-nav devui-nav-${ulClass.join(" ")}`
+        "class": [ns.e("nav"), ulClass.join(" ")]
       }, [state.data.map((item, i) => {
         return createVNode("li", {
           "role": "presentation",
@@ -136,7 +160,7 @@ var Tabs = defineComponent({
           "aria-expanded": props.modelValue === (item.id || item.tabId)
         }, [state.slots[i] ? state.slots[i]() : createVNode("span", null, [item.title])])]);
       }), createVNode("div", {
-        "class": `devui-nav-${props.type}-animation`,
+        "class": ns.e(`nav-${props.type}-animation`),
         "style": {
           left: data.offsetLeft + "px",
           width: data.offsetWidth + "px"
@@ -168,15 +192,15 @@ var Tab = defineComponent({
     const tabs2 = inject("tabs");
     tabs2.state.slots.push(slots.title);
     tabs2.state.data.push(props);
+    const ns = useNamespace("tab");
     return () => {
       const {
         id
       } = props;
       const content = tabs2.state.showContent && tabs2.state.active === id ? createVNode("div", {
-        "class": "devui-tab-content"
+        "class": ns.e("content")
       }, [createVNode("div", {
-        "role": "tabpanel",
-        "class": "devui-tab-pane in active"
+        "role": "tabpanel"
       }, [slots.default()])]) : null;
       return content;
     };

package/tabs/index.umd.js

@@ -1 +1 @@
-(function(d,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(d=typeof globalThis!="undefined"?globalThis:d||self,t(d.index={},d.Vue))})(this,function(d,t){"use strict";const y={modelValue:{type:[String,Number],default:null},type:{type:String,default:"tabs"},showContent:{type:Boolean,default:!0},vertical:{type:Boolean,default:!1},reactivable:{type:Boolean,default:!0},customWidth:{type:String,default:""},cssClass:{type:String,default:""},beforeChange:{type:Function,default:null}};var B="",r=t.defineComponent({name:"DTabs",props:y,emits:["update:modelValue","active-tab-change"],setup(e,{emit:u,slots:i}){const s=t.ref(null),f=t.reactive({offsetLeft:0,offsetWidth:0,id:null}),n=t.reactive({data:[],active:e.modelValue,showContent:e.showContent,slots:[]});t.provide("tabs",{state:n});const m=function(a){let l=Promise.resolve(!0);if(typeof e.beforeChange=="function"){const o=e.beforeChange(a);typeof o!="undefined"&&(o.then?l=o:l=Promise.resolve(o))}return l},h=function(a,l){!e.reactivable&&e.modelValue===a.id||m(a.id).then(o=>{if(!o)return;const c=n.data.find(V=>V.id===a.id);c&&!c.disabled&&(n.active=a.id,u("update:modelValue",c.id),e.type==="slider"&&l&&s&&(this.offsetLeft=l.getBoundingClientRect().left-this.tabsEle.nativeElement.getBoundingClientRect().left,this.offsetWidth=l.getBoundingClientRect().width),u("active-tab-change",c.id))})},g=[e.type];return e.cssClass&&g.push(e.cssClass),e.vertical&&g.push("devui-nav-stacked"),t.onUpdated(()=>{e.type==="slider"&&setTimeout(()=>{const a=s.value.querySelector("#"+e.modelValue+".active");a&&(f.offsetLeft=a.getBoundingClientRect().left-s.value.getBoundingClientRect().left,f.offsetWidth=a.getBoundingClientRect().width)})}),t.onBeforeMount(()=>{e.type!=="slider"&&e.modelValue===void 0&&n.data.length>0&&h(n.data[0])}),t.onMounted(()=>{e.type==="slider"&&e.modelValue===void 0&&n.data.length>0&&n.data[0]&&h(n.data[0].tabsEle.value.getElementById(n.data[0].tabId))}),()=>t.createVNode("div",{class:"devui-tabs"},[t.createVNode("ul",{ref:s,role:"tablist",class:`devui-nav devui-nav-${g.join(" ")}`},[n.data.map((a,l)=>t.createVNode("li",{role:"presentation",onClick:()=>{h(a)},class:(e.modelValue===(a.id||a.tabId)?"active":"")+" "+(a.disabled?"disabled":""),id:a.id||a.tabId},[t.createVNode("a",{role:"tab","data-toggle":a.id,"aria-expanded":e.modelValue===(a.id||a.tabId)},[n.slots[l]?n.slots[l]():t.createVNode("span",null,[a.title])])])),t.createVNode("div",{class:`devui-nav-${e.type}-animation`,style:{left:f.offsetLeft+"px",width:f.offsetWidth+"px"}},null)]),i.default()])}});const v={title:{type:[String,Number],default:null},id:{type:String,default:null},disabled:{type:Boolean,default:!1}};var b=t.defineComponent({name:"DTab",props:v,setup(e,{slots:u}){const i=t.inject("tabs");return i.state.slots.push(u.title),i.state.data.push(e),()=>{const{id:s}=e;return i.state.showContent&&i.state.active===s?t.createVNode("div",{class:"devui-tab-content"},[t.createVNode("div",{role:"tabpanel",class:"devui-tab-pane in active"},[u.default()])]):null}}}),C={title:"Tabs \u9009\u9879\u5361",category:"\u5BFC\u822A",status:"60%",install(e){e.component(r.name,r),e.component(b.name,b)}};d.Tab=b,d.Tabs=r,d.default=C,d.tabsProps=y,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});
+(function(s,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(s=typeof globalThis!="undefined"?globalThis:s||self,t(s.index={},s.Vue))})(this,function(s,t){"use strict";const v={modelValue:{type:[String,Number],default:null},type:{type:String,default:"tabs"},showContent:{type:Boolean,default:!0},vertical:{type:Boolean,default:!1},reactivable:{type:Boolean,default:!0},customWidth:{type:String,default:""},cssClass:{type:String,default:""},beforeChange:{type:Function,default:null}};function r(e,l,i){let d=e;return l&&(d+=`__${l}`),i&&(d+=`--${i}`),d}function V(e){const l=`devui-${e}`;return{b:()=>r(l),e:a=>a?r(l,a):"",m:a=>a?r(l,"",a):"",em:(a,b)=>a&&b?r(l,a,b):""}}var T="",g=t.defineComponent({name:"DTabs",props:v,emits:["update:modelValue","active-tab-change"],setup(e,{emit:l,slots:i}){const d=V("tabs"),u=t.ref(null),c=t.reactive({offsetLeft:0,offsetWidth:0,id:null}),a=t.reactive({data:[],active:e.modelValue,showContent:e.showContent,slots:[]});t.provide("tabs",{state:a});const b=function(n){let o=Promise.resolve(!0);if(typeof e.beforeChange=="function"){const f=e.beforeChange(n);typeof f!="undefined"&&(f.then?o=f:o=Promise.resolve(f))}return o},C=function(n,o){!e.reactivable&&e.modelValue===n.id||b(n.id).then(f=>{if(!f)return;const h=a.data.find(N=>N.id===n.id);h&&!h.disabled&&(a.active=n.id,l("update:modelValue",h.id),e.type==="slider"&&o&&u&&(this.offsetLeft=o.getBoundingClientRect().left-this.tabsEle.nativeElement.getBoundingClientRect().left,this.offsetWidth=o.getBoundingClientRect().width),l("active-tab-change",h.id))})},m=[d.em("nav",e.type)];return e.cssClass&&m.push(e.cssClass),e.vertical&&m.push(d.e("stacked")),t.onUpdated(()=>{e.type==="slider"&&setTimeout(()=>{const n=u.value.querySelector("#"+e.modelValue+".active");n&&(c.offsetLeft=n.getBoundingClientRect().left-u.value.getBoundingClientRect().left,c.offsetWidth=n.getBoundingClientRect().width)})}),t.onBeforeMount(()=>{e.type!=="slider"&&e.modelValue===void 0&&a.data.length>0&&C(a.data[0])}),t.onMounted(()=>{e.type==="slider"&&e.modelValue===void 0&&a.data.length>0&&a.data[0]&&C(a.data[0].tabsEle.value.getElementById(a.data[0].tabId))}),()=>t.createVNode("div",{class:d.b()},[t.createVNode("ul",{ref:u,role:"tablist",class:[d.e("nav"),m.join(" ")]},[a.data.map((n,o)=>t.createVNode("li",{role:"presentation",onClick:()=>{C(n)},class:(e.modelValue===(n.id||n.tabId)?"active":"")+" "+(n.disabled?"disabled":""),id:n.id||n.tabId},[t.createVNode("a",{role:"tab","data-toggle":n.id,"aria-expanded":e.modelValue===(n.id||n.tabId)},[a.slots[o]?a.slots[o]():t.createVNode("span",null,[n.title])])])),t.createVNode("div",{class:d.e(`nav-${e.type}-animation`),style:{left:c.offsetLeft+"px",width:c.offsetWidth+"px"}},null)]),i.default()])}});const B={title:{type:[String,Number],default:null},id:{type:String,default:null},disabled:{type:Boolean,default:!1}};var y=t.defineComponent({name:"DTab",props:B,setup(e,{slots:l}){const i=t.inject("tabs");i.state.slots.push(l.title),i.state.data.push(e);const d=V("tab");return()=>{const{id:u}=e;return i.state.showContent&&i.state.active===u?t.createVNode("div",{class:d.e("content")},[t.createVNode("div",{role:"tabpanel"},[l.default()])]):null}}}),p={title:"Tabs \u9009\u9879\u5361",category:"\u5BFC\u822A",status:"60%",install(e){e.component(g.name,g),e.component(y.name,y)}};s.Tab=y,s.Tabs=g,s.default=p,s.tabsProps=v,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});

package/tabs/style.css

@@ -1 +1 @@
-:host{display:block}.devui-nav-tabs,.devui-nav-pills{font-size:var(--devui-font-size, 12px);background:transparent;font-weight:700;list-style:none}.devui-nav-tabs li,.devui-nav-pills li{cursor:pointer;border:2px solid transparent}.devui-nav-tabs li a,.devui-nav-pills li a{cursor:pointer;border:none;line-height:30px;background-color:transparent;padding:0;text-decoration:none;color:var(--devui-text, #252b3a)}.devui-nav-tabs li a:hover,.devui-nav-tabs li a:focus,.devui-nav-tabs li a:active,.devui-nav-pills li a:hover,.devui-nav-pills li a:focus,.devui-nav-pills li a:active{outline:none}.devui-nav-tabs li.disabled a,.devui-nav-pills li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-nav-tabs li.active a,.devui-nav-tabs li:hover:not(.disabled) a,.devui-nav-pills li.active a,.devui-nav-pills li:hover:not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-nav-tabs li:after,.devui-nav-pills li:after{content:"";display:block;margin:auto;height:2px;width:0;background:transparent;transition:width .3s ease-out,background-color .3s ease-out}.devui-nav-tabs li.active:after,.devui-nav-pills li.active:after{width:100%;background:var(--devui-brand, #5e7ce0)}.devui-nav-options{font-size:var(--devui-font-size, 12px);background:transparent;border:none;border-radius:var(--devui-border-radius, 2px)}.devui-nav-options>li:last-of-type{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-nav-options>li{cursor:pointer;border:1px solid var(--devui-line, #adb0b8);border-left-width:0;background-color:var(--devui-base-bg, #ffffff);float:left}.devui-nav-options>li:first-child{border-left-width:1px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-nav-options>li:last-child{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-nav-options>li>a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);line-height:26px;padding:0 15px}.devui-nav-options>li>a:hover,.devui-nav-options>li>a:focus,.devui-nav-options>li>a:active{outline:none}.devui-nav-options>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-nav-options>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-nav-options>li.active>a,.devui-nav-options>li:hover:not(.disabled)>a{color:var(--devui-light-text, #ffffff)}.devui-nav-options>li.active>a:hover,.devui-nav-options>li:hover:not(.disabled)>a:hover{color:var(--devui-light-text, #ffffff);background:transparent}.devui-nav-options>li.active{background-color:var(--devui-brand, #5e7ce0);border-color:var(--devui-brand, #5e7ce0)}.devui-nav-options>li.active:not(:first-child):before{background-color:var(--devui-brand, #5e7ce0)}.devui-nav-options>li.active+li:before{background-color:var(--devui-brand, #5e7ce0)}.devui-nav-options>li:hover:not(.active):not(.disabled){background-color:var(--devui-brand-active, #526ecc);border-color:var(--devui-brand-active, #526ecc)}.devui-nav-options>li:hover:not(.active):not(.disabled):not(:first-child):before{background-color:var(--devui-brand-active, #526ecc)}.devui-nav-slider{font-size:var(--devui-font-size, 12px);border:none;border-radius:var(--devui-border-radius, 2px);background:var(--devui-list-item-hover-bg, #f2f5fc);width:fit-content;display:flex!important;align-items:center;position:relative}.devui-nav-slider>li{cursor:pointer;margin:2px;float:left;position:relative;z-index:1}.devui-nav-slider>li:first-child{border-left-width:1px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-nav-slider>li:last-child{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-nav-slider>li a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);line-height:28px;padding:0 15px}.devui-nav-slider>li a:hover,.devui-nav-slider>li a:focus,.devui-nav-slider>li a:active{outline:none}.devui-nav-slider>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-nav-slider>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-nav-slider>li.active a,.devui-nav-slider>li:hover:not(.disabled) a{color:var(--devui-brand-active, #526ecc)}.devui-nav-slider>li.active a:hover,.devui-nav-slider>li:hover:not(.disabled) a:hover{color:var(--devui-brand-active, #526ecc);background:transparent}.devui-nav-slider>li.active:not(:first-child):before,.devui-nav-slider>li:hover:not(.disabled):not(:first-child):before{content:"";display:block;top:-1px;left:-1px;width:1px;height:"calc(100% + 2px)";position:absolute}.devui-nav-slider>li.active{text-shadow:0 0 .7px var(--devui-brand, #5e7ce0)}.devui-nav-slider>li.active:not(:first-child):before{background-color:var(--devui-brand, #5e7ce0)}.devui-nav-slider>li.active+li:before{background-color:var(--devui-brand, #5e7ce0)}.devui-nav-slider>li:hover:not(.active):not(.disabled){color:var(--devui-brand-active, #526ecc)}.devui-nav-slider>li:hover:not(.active):not(.disabled):not(:first-child):before{background-color:var(--devui-brand-active, #526ecc)}.devui-nav-wrapped{font-size:var(--devui-font-size, 12px);background:transparent;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6);background-color:var(--devui-base-bg, #ffffff)}.devui-nav-wrapped>li{cursor:pointer;float:left;position:relative;padding:8px 16px}.devui-nav-wrapped>li a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0}.devui-nav-wrapped>li a:hover,.devui-nav-wrapped>li a:focus,.devui-nav-wrapped>li a:active{outline:none}.devui-nav-wrapped>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-nav-wrapped>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-nav-wrapped>li.active{border:1px solid var(--devui-dividing-line, #dfe1e6);background:var(--devui-global-bg, #f3f6f8);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;font-weight:700;margin:-1px;border-bottom-color:transparent}.devui-nav-wrapped>li.active a{color:var(--devui-brand-active, #526ecc)}.devui-nav-wrapped>li:hover:not(.active):not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-nav{list-style:none;padding-left:0}.devui-nav li a{text-decoration:none}.devui-nav li a.custom-width{display:inline-block;padding:0;text-align:center}.devui-nav-tabs:not(.devui-nav-stacked){border-bottom:1px var(--devui-line, #adb0b8) solid}.devui-nav-tabs:not(.devui-nav-stacked) li{float:left;margin-left:32px;margin-bottom:-3px}.devui-nav-tabs:not(.devui-nav-stacked) li:first-child{margin-left:0}.devui-nav-pills:not(.devui-nav-stacked)>li{float:left;margin-left:32px}.devui-nav-pills:not(.devui-nav-stacked)>li:first-child{margin-left:0}.devui-nav:before,.devui-nav:after{content:" ";display:table}.devui-nav:after{clear:both}.devui-tab-content{margin-top:20px}.devui-nav-slider-animation{position:absolute;z-index:0;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);box-shadow:0 2px 4px 0 var(--devui-light-shadow, rgba(0, 0, 0, .1));top:1px;height:30px;transition:left .3s cubic-bezier(.645,.045,.355,1),width .3s cubic-bezier(.645,.045,.355,1)}
+:host{display:block}.devui-tabs__nav--tabs,.devui-tabs__nav--pills{font-size:var(--devui-font-size, 12px);background:transparent;font-weight:700;list-style:none}.devui-tabs__nav--tabs li,.devui-tabs__nav--pills li{cursor:pointer;border:2px solid transparent}.devui-tabs__nav--tabs li a,.devui-tabs__nav--pills li a{cursor:pointer;border:none;line-height:30px;background-color:transparent;padding:0;text-decoration:none;color:var(--devui-text, #252b3a)}.devui-tabs__nav--tabs li a:hover,.devui-tabs__nav--tabs li a:focus,.devui-tabs__nav--tabs li a:active,.devui-tabs__nav--pills li a:hover,.devui-tabs__nav--pills li a:focus,.devui-tabs__nav--pills li a:active{outline:none}.devui-tabs__nav--tabs li.disabled a,.devui-tabs__nav--pills li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--tabs li.active a,.devui-tabs__nav--tabs li:hover:not(.disabled) a,.devui-tabs__nav--pills li.active a,.devui-tabs__nav--pills li:hover:not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--tabs li:after,.devui-tabs__nav--pills li:after{content:"";display:block;margin:auto;height:2px;width:0;background:transparent;transition:width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--tabs li.active:after,.devui-tabs__nav--pills li.active:after{width:100%;background:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--options{font-size:var(--devui-font-size, 12px);background:transparent;border:none;border-radius:var(--devui-border-radius, 2px)}.devui-tabs__nav--options>li:last-of-type{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-tabs__nav--options>li{cursor:pointer;border:1px solid var(--devui-line, #adb0b8);border-left-width:0;background-color:var(--devui-base-bg, #ffffff);float:left}.devui-tabs__nav--options>li:first-child{border-left-width:1px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-tabs__nav--options>li:last-child{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-tabs__nav--options>li>a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);line-height:26px;padding:0 16px;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--options>li>a:hover,.devui-tabs__nav--options>li>a:focus,.devui-tabs__nav--options>li>a:active{outline:none}.devui-tabs__nav--options>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--options>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--options>li.active>a,.devui-tabs__nav--options>li:hover:not(.disabled)>a{color:var(--devui-light-text, #ffffff)}.devui-tabs__nav--options>li.active>a:hover,.devui-tabs__nav--options>li:hover:not(.disabled)>a:hover{color:var(--devui-light-text, #ffffff);background:transparent}.devui-tabs__nav--options>li.active{background-color:var(--devui-brand, #5e7ce0);border-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--options>li.active:not(:first-child):before{background-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--options>li.active+li:before{background-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--options>li:hover:not(.active):not(.disabled){background-color:var(--devui-brand-active, #526ecc);border-color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--options>li:hover:not(.active):not(.disabled):not(:first-child):before{background-color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--slider{font-size:var(--devui-font-size, 12px);border:none;border-radius:var(--devui-border-radius, 2px);background:var(--devui-list-item-hover-bg, #f2f5fc);width:fit-content;display:flex!important;align-items:center;position:relative}.devui-tabs__nav--slider>li{cursor:pointer;margin:2px;float:left;position:relative;z-index:1}.devui-tabs__nav--slider>li:first-child{border-left-width:1px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-tabs__nav--slider>li:last-child{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-tabs__nav--slider>li a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);line-height:28px;padding:0 16px}.devui-tabs__nav--slider>li a:hover,.devui-tabs__nav--slider>li a:focus,.devui-tabs__nav--slider>li a:active{outline:none}.devui-tabs__nav--slider>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--slider>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--slider>li.active a,.devui-tabs__nav--slider>li:hover:not(.disabled) a{color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--slider>li.active a:hover,.devui-tabs__nav--slider>li:hover:not(.disabled) a:hover{color:var(--devui-brand-active, #526ecc);background:transparent}.devui-tabs__nav--slider>li.active:not(:first-child):before,.devui-tabs__nav--slider>li:hover:not(.disabled):not(:first-child):before{content:"";display:block;top:-1px;left:-1px;width:1px;height:"calc(100% + 2px)";position:absolute}.devui-tabs__nav--slider>li.active{text-shadow:0 0 .7px var(--devui-brand, #5e7ce0)}.devui-tabs__nav--slider>li.active:not(:first-child):before{background-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--slider>li.active+li:before{background-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--slider>li:hover:not(.active):not(.disabled){color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--slider>li:hover:not(.active):not(.disabled):not(:first-child):before{background-color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--wrapped{font-size:var(--devui-font-size, 12px);background:transparent;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6);background-color:var(--devui-base-bg, #ffffff)}.devui-tabs__nav--wrapped>li{cursor:pointer;float:left;position:relative;padding:8px 16px}.devui-tabs__nav--wrapped>li a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0}.devui-tabs__nav--wrapped>li a:hover,.devui-tabs__nav--wrapped>li a:focus,.devui-tabs__nav--wrapped>li a:active{outline:none}.devui-tabs__nav--wrapped>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--wrapped>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--wrapped>li.active{border:1px solid var(--devui-dividing-line, #dfe1e6);background:var(--devui-global-bg, #f3f6f8);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;font-weight:700;margin:-1px;border-bottom-color:transparent}.devui-tabs__nav--wrapped>li.active a{color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--wrapped>li:hover:not(.active):not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav{list-style:none;padding-left:0}.devui-tabs__nav li a{text-decoration:none}.devui-tabs__nav li a.custom-width{display:inline-block;padding:0;text-align:center}.devui-tabs__nav--tabs:not(.devui-tabs__stacked){border-bottom:1px var(--devui-line, #adb0b8) solid}.devui-tabs__nav--tabs:not(.devui-tabs__stacked) li{float:left;margin-left:32px;margin-bottom:-3px}.devui-tabs__nav--tabs:not(.devui-tabs__stacked) li:first-child{margin-left:0}.devui-tabs__nav--pills:not(.devui-tabs__stacked)>li{float:left;margin-left:32px}.devui-tabs__nav--pills:not(.devui-tabs__stacked)>li:first-child{margin-left:0}.devui-tabs__nav:before,.devui-tabs__nav:after{content:" ";display:table}.devui-tabs__nav:after{clear:both}.devui-tab__content{margin-top:20px}.devui-tabs__nav-slider-animation{position:absolute;z-index:0;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);box-shadow:0 2px 4px 0 var(--devui-light-shadow, rgba(37, 43, 58, .1));top:1px;height:30px;transition:left var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}

package/tag/index.es.js

@@ -21,10 +21,34 @@ const tagProps = {
     default: false
   }
 };
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `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 useClass(props) {
+  const ns = useNamespace("tag");
   return computed(() => {
     const { type, color, deletable } = props;
-    return `devui-tag-item devui-tag-${type || (color ? "colorful" : "") || "default"}${deletable ? " devui-tag-deletable" : ""}`;
+    return `${ns.e("item")} ${ns.m(type || (color ? "colorful" : "") || "default")} ${deletable ? ns.m("deletable") : ""}`;
   });
 }
 function useColor(props) {
@@ -63,6 +87,7 @@ var Tag = defineComponent({
     slots,
     emit
   }) {
+    const ns = useNamespace("tag");
     const {
       type,
       color,
@@ -103,7 +128,7 @@ var Tag = defineComponent({
     return () => {
       var _a;
       return isShow.value && withDirectives(createVNode("div", {
-        "class": "devui-tag",
+        "class": ns.b(),
         "onClick": handleClick
       }, [createVNode("span", {
         "class": tagClass.value,

package/tag/index.umd.js

@@ -1 +1 @@
-(function(t,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis!="undefined"?globalThis:t||self,e(t.index={},t.Vue))})(this,function(t,e){"use strict";const f={type:{type:String,default:""},color:{type:String,default:""},titleContent:{type:String,default:""},checked:{type:Boolean,default:!1},deletable:{type:Boolean,default:!1}};function p(a){return e.computed(()=>{const{type:o,color:n,deletable:c}=a;return`devui-tag-item devui-tag-${o||(n?"colorful":"")||"default"}${c?" devui-tag-deletable":""}`})}function g(a){return e.computed(()=>{const{color:o,type:n}=a,c={primary:"var(--devui-primary, #5e7ce0)",success:"var(--devui-success, #50d4ab)",warning:"var(--devui-warning, #fac20a)",danger:"var(--devui-danger, #f66f6a)"},r={"blue-w98":"#3383ff","aqua-w98":"#39afcc","olivine-w98":"#2fa898","green-w98":"#4eb15e","yellow-w98":"#b08d1a","orange-w98":"#d47f35","red-w98":"#f66f6a","pink-w98":"#f3689a","purple-w98":"#a97af8"};return!o&&n?c[n]:r[o]||o})}var D="",d=e.defineComponent({name:"DTag",props:f,emits:["click","tagDelete","checkedChange"],setup(a,{slots:o,emit:n}){const{type:c,color:r,checked:u,titleContent:m,deletable:y}=e.toRefs(a),h=p(a),i=g(a),C=m.value||"",b=()=>!c.value&&!r.value,s=e.ref(!0),w=l=>{n("click",l)},k=l=>{s.value=!1,n("tagDelete",l)},T=()=>y.value?e.createVNode("a",{class:"remove-button",onClick:k},[b()?e.createVNode(e.resolveComponent("d-icon"),{size:"12px",name:"error-o",color:"#adb0b8"},null):e.createVNode(e.resolveComponent("d-icon"),{size:"12px",name:"close",color:i.value},null)]):null,S=e.watch(u,l=>{n("checkedChange",l)});return e.onUnmounted(()=>S()),()=>{var l;return s.value&&e.withDirectives(e.createVNode("div",{class:"devui-tag",onClick:w},[e.createVNode("span",{class:h.value,style:{display:"block",color:u.value?"#fff":i.value,backgroundColor:u.value?i.value:r.value?"var(--devui-base-bg, #ffffff)":""},title:C},[(l=o.default)==null?void 0:l.call(o),T()])]),[[e.vShow,s.value]])}}}),v={title:"Tag \u6807\u7B7E",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(a){a.component(d.name,d)}};t.Tag=d,t.default=v,t.tagProps=f,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(l,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis!="undefined"?globalThis:l||self,e(l.index={},l.Vue))})(this,function(l,e){"use strict";const m={type:{type:String,default:""},color:{type:String,default:""},titleContent:{type:String,default:""},checked:{type:Boolean,default:!1},deletable:{type:Boolean,default:!1}};function s(a,t,n){let c=a;return t&&(c+=`__${t}`),n&&(c+=`--${n}`),c}function v(a){const t=`devui-${a}`;return{b:()=>s(t),e:o=>o?s(t,o):"",m:o=>o?s(t,"",o):"",em:(o,d)=>o&&d?s(t,o,d):""}}function b(a){const t=v("tag");return e.computed(()=>{const{type:n,color:c,deletable:u}=a;return`${t.e("item")} ${t.m(n||(c?"colorful":"")||"default")} ${u?t.m("deletable"):""}`})}function y(a){return e.computed(()=>{const{color:t,type:n}=a,c={primary:"var(--devui-primary, #5e7ce0)",success:"var(--devui-success, #50d4ab)",warning:"var(--devui-warning, #fac20a)",danger:"var(--devui-danger, #f66f6a)"},u={"blue-w98":"#3383ff","aqua-w98":"#39afcc","olivine-w98":"#2fa898","green-w98":"#4eb15e","yellow-w98":"#b08d1a","orange-w98":"#d47f35","red-w98":"#f66f6a","pink-w98":"#f3689a","purple-w98":"#a97af8"};return!t&&n?c[n]:u[t]||t})}var $="",f=e.defineComponent({name:"DTag",props:m,emits:["click","tagDelete","checkedChange"],setup(a,{slots:t,emit:n}){const c=v("tag"),{type:u,color:i,checked:o,titleContent:d,deletable:C}=e.toRefs(a),w=b(a),p=y(a),k=d.value||"",T=()=>!u.value&&!i.value,g=e.ref(!0),S=r=>{n("click",r)},D=r=>{g.value=!1,n("tagDelete",r)},N=()=>C.value?e.createVNode("a",{class:"remove-button",onClick:D},[T()?e.createVNode(e.resolveComponent("d-icon"),{size:"12px",name:"error-o",color:"#adb0b8"},null):e.createVNode(e.resolveComponent("d-icon"),{size:"12px",name:"close",color:p.value},null)]):null,V=e.watch(o,r=>{n("checkedChange",r)});return e.onUnmounted(()=>V()),()=>{var r;return g.value&&e.withDirectives(e.createVNode("div",{class:c.b(),onClick:S},[e.createVNode("span",{class:w.value,style:{display:"block",color:o.value?"#fff":p.value,backgroundColor:o.value?p.value:i.value?"var(--devui-base-bg, #ffffff)":""},title:k},[(r=t.default)==null?void 0:r.call(t),N()])]),[[e.vShow,g.value]])}}}),h={title:"Tag \u6807\u7B7E",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(a){a.component(f.name,f)}};l.Tag=f,l.default=h,l.tagProps=m,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});

package/tag/style.css

@@ -1 +1 @@
-@charset "UTF-8";.devui-tag{display:inline-block;margin:4px}.devui-tag .devui-tag-item{display:block;position:relative;padding:0 8px;min-height:20px;border:1px solid;border-radius:var(--devui-border-radius, 2px);font-size:var(--devui-font-size, 12px);line-height:20px;cursor:default}.devui-tag .devui-tag-item.devui-tag-default{border:0;color:var(--devui-text, #252b3a);background-color:var(--devui-default-bg, #f3f6f8)}.devui-tag .devui-tag-item.devui-tag-primary{color:var(--devui-primary, #5e7ce0);background-color:var(--devui-primary-bg, #f2f5fc)}.devui-tag .devui-tag-item.devui-tag-success{color:var(--devui-success, #50d4ab);background-color:var(--devui-success-bg, #edfff9)}.devui-tag .devui-tag-item.devui-tag-warning{color:var(--devui-warning, #fac20a);background-color:var(--devui-warning-bg, #fff3e8)}.devui-tag .devui-tag-item.devui-tag-danger{color:var(--devui-danger, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}.devui-tag .devui-tag-item.devui-tag-colorful{background-color:#fff}.devui-tag .devui-tag-item.devui-tag-deletable{padding-right:32px}.devui-tag .remove-button{display:inline-block;margin-left:12px;font-size:var(--devui-font-size-icon, 16px);cursor:pointer;width:12px;height:12px;line-height:12px;border-radius:50%;text-align:center;position:absolute;top:50%;transform:translateY(-50%)}.devui-tag .remove-button i{vertical-align:0}
+@charset "UTF-8";.devui-tag{display:inline-block;margin:4px}.devui-tag .devui-tag__item{display:block;position:relative;padding:0 8px;min-height:20px;border:1px solid;border-radius:var(--devui-border-radius, 2px);font-size:var(--devui-font-size, 12px);line-height:20px;cursor:default}.devui-tag .devui-tag__item.devui-tag--default{border:0;color:var(--devui-text, #252b3a);background-color:var(--devui-default-bg, #f3f6f8)}.devui-tag .devui-tag__item.devui-tag--primary{color:var(--devui-primary, #5e7ce0);background-color:var(--devui-primary-bg, #f2f5fc)}.devui-tag .devui-tag__item.devui-tag--success{color:var(--devui-success, #50d4ab);background-color:var(--devui-success-bg, #edfff9)}.devui-tag .devui-tag__item.devui-tag--warning{color:var(--devui-warning, #fac20a);background-color:var(--devui-warning-bg, #fff3e8)}.devui-tag .devui-tag__item.devui-tag--danger{color:var(--devui-danger, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}.devui-tag .devui-tag__item.devui-tag--colorful{background-color:#fff}.devui-tag .devui-tag__item.devui-tag--deletable{padding-right:32px}.devui-tag .remove-button{display:inline-block;margin-left:12px;font-size:var(--devui-font-size-icon, 16px);cursor:pointer;width:12px;height:12px;line-height:12px;border-radius:50%;text-align:center;position:absolute;top:50%;transform:translateY(-50%)}.devui-tag .remove-button i{vertical-align:0}

package/textarea/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, createVNode, mergeProps } from "vue";
+import { ref, toRefs, computed, defineComponent, createVNode, mergeProps } from "vue";
 const textareaProps = {
   id: {
     type: String,
@@ -16,14 +16,10 @@ const textareaProps = {
     type: String,
     default: void 0
   },
-  value: {
+  modelValue: {
     type: String,
     default: ""
   },
-  maxLength: {
-    type: [String, Number],
-    default: void 0
-  },
   disabled: {
     type: Boolean,
     default: false
@@ -32,90 +28,111 @@ const textareaProps = {
     type: Boolean,
     default: false
   },
-  cssClass: {
-    type: String,
-    default: ""
-  },
   resize: {
     type: String,
     default: "none"
   }
 };
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `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 useTextareaRender(props) {
+  const ns = useNamespace("textarea");
+  const isFocus = ref(false);
+  const { error, disabled } = toRefs(props);
+  const wrapClasses = computed(() => ({
+    [ns.b()]: true,
+    [ns.m("focus")]: isFocus.value,
+    [ns.m("disabled")]: disabled.value,
+    [ns.m("error")]: error.value
+  }));
+  return { isFocus, wrapClasses };
+}
+function useTextareaEvent(isFocus, ctx) {
+  const onFocus = (e) => {
+    isFocus.value = true;
+    ctx.emit("focus", e);
+  };
+  const onBlur = (e) => {
+    isFocus.value = false;
+    ctx.emit("blur", e);
+  };
+  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);
+  };
+  return { onFocus, onBlur, onInput, onChange, onKeydown };
+}
 var textarea = "";
 var Textarea = defineComponent({
   name: "DTextarea",
+  inheritAttrs: false,
   props: textareaProps,
-  emits: ["update:value", "focus", "blur", "change", "keydown"],
+  emits: ["update:modelValue", "focus", "blur", "change", "keydown"],
   setup(props, ctx) {
-    const textareaCls = {
-      error: props.error,
-      [props.cssClass]: true
-    };
-    const curValueRef = ref(props.value);
-    const onInput = ($event) => {
-      const inputValue = $event.target.value;
-      curValueRef.value = inputValue;
-      ctx.emit("update:value", inputValue);
-    }, onFocus = ($event) => {
-      ctx.emit("focus", $event);
-    }, onBlur = ($event) => {
-      ctx.emit("blur", $event);
-    }, onChange = ($event) => {
-      ctx.emit("change", $event.target.value);
-    }, onKeydown = ($event) => {
-      ctx.emit("keydown", $event);
-    };
-    return {
-      textareaCls,
-      onInput,
-      onFocus,
-      onBlur,
-      onChange,
-      onKeydown,
-      curValueRef,
-      autofocus: props.autofocus
-    };
-  },
-  render() {
     const {
-      id,
-      placeholder,
-      disabled,
-      maxLength,
-      resize,
-      textareaCls,
-      onInput,
+      modelValue,
+      disabled
+    } = toRefs(props);
+    const ns = useNamespace("textarea");
+    const {
+      isFocus,
+      wrapClasses
+    } = useTextareaRender(props);
+    const {
       onFocus,
       onBlur,
+      onInput,
       onChange,
-      onKeydown,
-      showCount,
-      autofocus,
-      curValueRef
-    } = this;
-    return createVNode("div", {
-      "class": "devui-textarea-wrap"
-    }, [createVNode("textarea", mergeProps({
-      DTextarea: true
-    }, {
-      "id": id,
-      "value": curValueRef,
-      "autofocus": autofocus,
-      "placeholder": placeholder,
-      "disabled": disabled,
-      "maxlength": maxLength,
-      "style": {
-        resize
-      },
-      "class": textareaCls,
-      "onInput": onInput,
-      "onFocus": onFocus,
-      "onBlur": onBlur,
-      "onChange": onChange,
-      "onKeydown": onKeydown
-    }), null), showCount && createVNode("div", {
-      "class": "devui-textarea-show-count"
-    }, [curValueRef.length, !(maxLength != null ? maxLength : false) ? "" : " / " + maxLength])]);
+      onKeydown
+    } = useTextareaEvent(isFocus, ctx);
+    return () => {
+      var _a;
+      return createVNode("div", null, [createVNode("textarea", mergeProps({
+        "id": props.id
+      }, ctx.attrs, {
+        "value": modelValue.value,
+        "autofocus": props.autofocus,
+        "placeholder": props.placeholder,
+        "disabled": disabled.value,
+        "style": {
+          resize: props.resize
+        },
+        "class": wrapClasses.value,
+        "onInput": onInput,
+        "onFocus": onFocus,
+        "onBlur": onBlur,
+        "onChange": onChange,
+        "onKeydown": onKeydown
+      }), null), props.showCount && createVNode("div", {
+        "class": ns.e("show-count")
+      }, [modelValue.value.length, !((_a = ctx.attrs.maxlength) != null ? _a : false) ? "" : " / " + ctx.attrs.maxlength])]);
+    };
   }
 });
 var index = {

package/textarea/index.umd.js

@@ -1 +1 @@
-(function(t,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(t=typeof globalThis!="undefined"?globalThis:t||self,a(t.index={},t.Vue))})(this,function(t,a){"use strict";const d={id:{type:String,default:void 0},autofocus:{type:Boolean,default:!1},showCount:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},value:{type:String,default:""},maxLength:{type:[String,Number],default:void 0},disabled:{type:Boolean,default:!1},error:{type:Boolean,default:!1},cssClass:{type:String,default:""},resize:{type:String,default:"none"}};var C="",l=a.defineComponent({name:"DTextarea",props:d,emits:["update:value","focus","blur","change","keydown"],setup(o,u){const s={error:o.error,[o.cssClass]:!0},n=a.ref(o.value);return{textareaCls:s,onInput:e=>{const r=e.target.value;n.value=r,u.emit("update:value",r)},onFocus:e=>{u.emit("focus",e)},onBlur:e=>{u.emit("blur",e)},onChange:e=>{u.emit("change",e.target.value)},onKeydown:e=>{u.emit("keydown",e)},curValueRef:n,autofocus:o.autofocus}},render(){const{id:o,placeholder:u,disabled:s,maxLength:n,resize:i,textareaCls:f,onInput:c,onFocus:p,onBlur:y,onChange:e,onKeydown:r,showCount:m,autofocus:v,curValueRef:g}=this;return a.createVNode("div",{class:"devui-textarea-wrap"},[a.createVNode("textarea",a.mergeProps({DTextarea:!0},{id:o,value:g,autofocus:v,placeholder:u,disabled:s,maxlength:n,style:{resize:i},class:f,onInput:c,onFocus:p,onBlur:y,onChange:e,onKeydown:r}),null),m&&a.createVNode("div",{class:"devui-textarea-show-count"},[g.length,(n!=null?n:!1)?" / "+n:""])])}}),h={title:"Textarea \u591A\u884C\u6587\u672C\u6846",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(o){o.component(l.name,l)}};t.Textarea=l,t.default=h,t.textareaProps=d,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(u,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(u=typeof globalThis!="undefined"?globalThis:u||self,a(u.index={},u.Vue))})(this,function(u,a){"use strict";const f={id:{type:String,default:void 0},autofocus:{type:Boolean,default:!1},showCount:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},modelValue:{type:String,default:""},disabled:{type:Boolean,default:!1},error:{type:Boolean,default:!1},resize:{type:String,default:"none"}};function c(t,e,s){let l=t;return e&&(l+=`__${e}`),s&&(l+=`--${s}`),l}function m(t){const e=`devui-${t}`;return{b:()=>c(e),e:o=>o?c(e,o):"",m:o=>o?c(e,"",o):"",em:(o,n)=>o&&n?c(e,o,n):""}}function y(t){const e=m("textarea"),s=a.ref(!1),{error:l,disabled:r}=a.toRefs(t),d=a.computed(()=>({[e.b()]:!0,[e.m("focus")]:s.value,[e.m("disabled")]:r.value,[e.m("error")]:l.value}));return{isFocus:s,wrapClasses:d}}function h(t,e){return{onFocus:n=>{t.value=!0,e.emit("focus",n)},onBlur:n=>{t.value=!1,e.emit("blur",n)},onInput:n=>{e.emit("update:modelValue",n.target.value)},onChange:n=>{e.emit("change",n.target.value)},onKeydown:n=>{e.emit("keydown",n)}}}var B="",i=a.defineComponent({name:"DTextarea",inheritAttrs:!1,props:f,emits:["update:modelValue","focus","blur","change","keydown"],setup(t,e){const{modelValue:s,disabled:l}=a.toRefs(t),r=m("textarea"),{isFocus:d,wrapClasses:o}=y(t),{onFocus:n,onBlur:v,onInput:b,onChange:w,onKeydown:C}=h(d,e);return()=>{var p;return a.createVNode("div",null,[a.createVNode("textarea",a.mergeProps({id:t.id},e.attrs,{value:s.value,autofocus:t.autofocus,placeholder:t.placeholder,disabled:l.value,style:{resize:t.resize},class:o.value,onInput:b,onFocus:n,onBlur:v,onChange:w,onKeydown:C}),null),t.showCount&&a.createVNode("div",{class:r.e("show-count")},[s.value.length,((p=e.attrs.maxlength)!=null?p:!1)?" / "+e.attrs.maxlength:""])])}}}),g={title:"Textarea \u591A\u884C\u6587\u672C\u6846",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(t){t.component(i.name,i)}};u.Textarea=i,u.default=g,u.textareaProps=f,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});

package/textarea/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-textarea-wrap .devui-textarea-show-count{text-align:right;color:inherit;white-space:nowrap;pointer-events:none;font-size:var(--devui-font-size, 12px)}
+.devui-textarea{width:100%;box-sizing:border-box;padding:4px 10px;color:var(--devui-text, #252b3a);vertical-align:middle;outline:none;border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);background:transparent;transition:border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-textarea:not(.devui-textarea--error):not(.devui-textarea--disabled):hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-textarea--focus:not(.devui-textarea--error){border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-textarea--focus:not(.devui-textarea--error):hover{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-textarea--disabled{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f6);cursor:not-allowed}.devui-textarea--disabled:hover{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-textarea--disabled .devui-textarea__inner{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-textarea--error{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}.devui-textarea__show-count{text-align:right;color:inherit;white-space:nowrap;pointer-events:none;font-size:var(--devui-font-size, 12px)}