vue-devui 1.0.0-rc.8 → 1.0.1

package/tabs/index.umd.js

@@ -1 +1 @@
-(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"});
+(function(g,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(g=typeof globalThis!="undefined"?globalThis:g||self,t(g.index={},g.Vue))})(this,function(g,t){"use strict";const N={modelValue:{type:[String,Number],default:null},type:{type:String,default:"tabs"},showContent:{type:Boolean,default:!0},reactivable:{type:Boolean,default:!0},customWidth:{type:String,default:""},cssClass:{type:String,default:""},beforeChange:{type:Function,default:null},closeable:{type:Boolean,default:!1},addable:{type:Boolean,default:!1},tabPosition:{type:String,default:"top"}};function C(e,a,n){let o=e;return a&&(o+=`__${a}`),n&&(o+=`--${n}`),o}function T(e,a=!1){const n=a?`.devui-${e}`:`devui-${e}`;return{b:()=>C(n),e:s=>s?C(n,s):"",m:s=>s?C(n,"",s):"",em:(s,f)=>s&&f?C(n,s,f):""}}const h=T("tabs");function M(e,a){const{cssClass:n,tabPosition:o,customWidth:r}=t.toRefs(e),l=t.computed(()=>({[h.e("nav")]:!0,[h.em("nav",e.type)]:!0,[n.value]:Boolean(n.value),[h.em("nav","top")]:o.value==="top",[h.em("nav","right")]:o.value==="right",[h.em("nav","bottom")]:o.value==="bottom",[h.em("nav","left")]:o.value==="left"})),i=t.computed(()=>({["custom-width"]:Boolean(r.value)})),s={width:e.customWidth?e.customWidth:""},f=t.computed(()=>["top","bottom"].includes(e.tabPosition)?{left:a.offsetLeft+"px",width:a.offsetWidth+"px"}:{top:a.offsetTop+"px",height:a.offsetHeight+"px",width:a.offsetWidth+"px"});return{ulClasses:l,aClasses:i,customStyle:s,sliderAnimationStyle:f}}function W(e,a,n,o,r,l){const i=()=>{e.type==="slider"&&setTimeout(()=>{var c;const d=(c=l.value)==null?void 0:c.querySelector("#"+e.modelValue+".active");d&&l.value&&(["top","bottom"].includes(e.tabPosition)?o.offsetLeft=d.getBoundingClientRect().left-l.value.getBoundingClientRect().left:(o.offsetTop=d.getBoundingClientRect().top-l.value.getBoundingClientRect().top,o.offsetHeight=d.getBoundingClientRect().height),o.offsetWidth=d.getBoundingClientRect().width)})},s=d=>{let c=Promise.resolve(!0);if(typeof e.beforeChange=="function"){const u=e.beforeChange(d);typeof u!="undefined"&&(u.then?c=u:c=Promise.resolve(u))}return c},f=(d,c)=>{const u=d.props.id;!e.reactivable&&e.modelValue===u||s(u).then(v=>{if(!v)return;const p=n.value.find(P=>P.props.id===u);a&&p&&!p.props.disabled&&(a.state.active=u,e.type==="slider"&&c&&l&&l.value&&(["left","right"].includes(e.tabPosition)?o.offsetLeft=c.getBoundingClientRect().left-l.value.nativeElement.getBoundingClientRect().left:(o.offsetTop=c.getBoundingClientRect().top-l.value.nativeElement.getBoundingClientRect().top,o.offsetHeight=c.getBoundingClientRect().height),o.offsetWidth=c.getBoundingClientRect().width),r.emit("active-tab-change",p.props.id))})};return{update:i,activeClick:f,beforeMount:()=>{e.type!=="slider"&&e.modelValue===void 0&&n.value&&n.value.length>0&&f(n.value[0])},mounted:()=>{var d;if(e.type==="slider"&&e.modelValue===void 0&&n.value&&n.value.length>0&&n.value[0]){const c=n.value[0],u=(d=c.tabsEle)==null?void 0:d.value,v=u==null?void 0:u.getElementById(c.tabId);f(v)}},tabCanClose:d=>(e.closeable||d.closeable)&&!d.disabled}}function $(e){return{onTabRemove:(o,r)=>{r.stopPropagation(),e.emit("tab-remove",o.props,r),e.emit("tab-change",o.props.id,"delete")},onTabAdd:()=>{e.emit("tab-add"),e.emit("tab-change",void 0,"add")}}}var _="",j=t.defineComponent({name:"DTabNav",props:N,emits:["active-tab-change","tab-remove","tab-add","tab-change"],setup(e,a){const n=T("tabs"),o=t.shallowRef(),r=t.reactive({offsetLeft:0,offsetWidth:0,offsetTop:0,offsetHeight:0,id:null}),l=t.inject("tabs"),i=t.computed(()=>Object.values((l==null?void 0:l.state.data)||{})),{ulClasses:s,aClasses:f,customStyle:y,sliderAnimationStyle:V}=M(e,r),{update:m,beforeMount:d,mounted:c,activeClick:u,tabCanClose:v}=W(e,l,i,r,a,o),{onTabRemove:p,onTabAdd:P}=$(a);return t.onUpdated(()=>m()),t.onBeforeMount(()=>d()),t.onMounted(()=>c()),t.watch(()=>e.modelValue,()=>{const B=i.value.find(S=>S.props.id===e.modelValue);B&&u(B)}),()=>{const B=b=>v(b)?t.createVNode("span",{class:n.e("close-btn"),onClick:I=>p(b,I)},[t.createVNode(t.resolveComponent("d-icon"),{size:"12px",name:"error-o"},null)]):null,S=e.addable?t.createVNode("li",{class:n.e("new-tab"),onClick:P},[t.createVNode(t.resolveComponent("d-icon"),{name:"add"},null)]):null;return t.createVNode("ul",{ref:o,role:"tablist",class:s.value},[(i.value||[]).map(b=>t.createVNode("li",{role:"presentation",onClick:()=>{u(b)},class:(e.modelValue===b.props.id?"active":"")+(b.props.disabled?" disabled":""),id:b.props.id},[t.createVNode("span",{class:n.e("nav-content")},[t.createVNode("a",{role:"tab","data-toggle":b.props.id,"aria-expanded":e.modelValue===b.props.id,class:f.value,style:y},[b.slots.title?b.slots.title():t.createVNode("span",null,[b.props.title])]),B(b)])])),S,t.createVNode("div",{class:n.e(`nav-${e.type}-animation`),style:V.value},null)])}}});const A=T("tabs");function U(e){return{onUpdateModelValue:i=>{e.emit("update:modelValue",i)},onActiveTabChange:i=>{e.emit("active-tab-change",i)},onTabRemove:(i,s)=>{e.emit("tab-remove",i,s)},onTabAdd:()=>{e.emit("tab-add")},onTabChange:(i,s)=>{e.emit("tab-change",i,s)}}}function k(e){return{tabsClasses:t.computed(()=>({[A.b()]:!0,[A.m(e.tabPosition)]:!0}))}}var R=t.defineComponent({name:"DTabs",props:N,emits:["update:modelValue","active-tab-change","tab-remove","tab-add","tab-change"],setup(e,a){const n=t.reactive({data:{},active:e.modelValue,showContent:e.showContent}),o=m=>{m.uid&&(n.data[m.uid]=m)},r=m=>{m&&delete n.data[m]};t.provide("tabs",{state:n,addTab:o,deleteTab:r});const{onUpdateModelValue:l,onActiveTabChange:i,onTabRemove:s,onTabAdd:f,onTabChange:y}=U(a),{tabsClasses:V}=k(e);return t.watch(()=>n.active,()=>{l(n.active)}),()=>{var c,u;const m=t.createVNode(j,t.mergeProps(e,{onActiveTabChange:i,onTabRemove:s,onTabAdd:f,onTabChange:y}),null),d=(u=(c=a.slots).default)==null?void 0:u.call(c);return t.createVNode("div",{class:V.value},[e.tabPosition==="bottom"?[d,m]:[m,d],t.createVNode("div",{style:"clear: both"},null)])}}});const D={title:{type:[String,Number],default:null},id:{type:String,default:null},disabled:{type:Boolean,default:!1},closeable:{type:Boolean,default:!1}};var F="",w=t.defineComponent({name:"DTab",props:D,setup(e,{slots:a}){const n=t.inject("tabs"),o=T("tab"),r=t.getCurrentInstance(),l=t.reactive({uid:r==null?void 0:r.uid,slots:a,props:e});return t.onMounted(()=>{n==null||n.addTab(l)}),t.onUnmounted(()=>{n==null||n.deleteTab(l.uid)}),()=>{var f;const{id:i}=e;return(n==null?void 0:n.state.showContent)&&n.state.active===i?t.createVNode("div",{class:o.e("content")},[t.createVNode("div",{role:"tabpanel"},[(f=a.default)==null?void 0:f.call(a)])]):null}}}),H={title:"Tabs \u9009\u9879\u5361",category:"\u5BFC\u822A",status:"100%",install(e){e.component(R.name,R),e.component(w.name,w)}};g.Tab=w,g.Tabs=R,g.default=H,g.tabsProps=N,Object.defineProperty(g,"__esModule",{value:!0}),g[Symbol.toStringTag]="Module"});

package/tabs/style.css

@@ -1 +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))}
+:host{display:block}.devui-tabs__nav--tabs,.devui-tabs__nav--pills{font-size:var(--devui-font-size, 14px);background:transparent;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-aide-text, #71757f)}.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--tabs .devui-tabs__new-tab,.devui-tabs__nav--pills .devui-tabs__new-tab{padding:2px 0 0}.devui-tabs__nav--options{background:var(--devui-base-bg, #ffffff);border:1px solid var(--devui-dividing-line, #f2f2f3);border-radius:var(--devui-border-radius, 2px);padding:2px;width:fit-content}.devui-tabs__nav--options>li{cursor:pointer;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),text-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--options>li span>a{border:none;color:var(--devui-aide-text, #71757f);line-height:26px;padding:0 16px}.devui-tabs__nav--options>li span>a:hover,.devui-tabs__nav--options>li span>a:focus,.devui-tabs__nav--options>li span>a:active{outline:none}.devui-tabs__nav--options>li.active{background-color:var(--devui-brand-foil, #f2f2f3)}.devui-tabs__nav--options>li.active span>a{color:var(--devui-brand, #5e7ce0);padding:0 16px}.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 span>a:hover,.devui-tabs__nav--options>li:hover:not(.disabled) span>a:hover{color:var(--devui-brand, #5e7ce0);background:transparent}.devui-tabs__nav--options .devui-tabs__close-btn{margin-right:12px}.devui-tabs__nav--options .devui-tabs__new-tab{padding:2px 16px 0}.devui-tabs__nav--slider{font-size:var(--devui-font-size, 14px);border:none;border-radius:var(--devui-border-radius, 2px);background:var(--devui-list-item-hover-bg, #f2f2f3);width:fit-content;display:flex;align-items:center;position:relative}.devui-tabs__nav--slider>li{cursor:pointer;margin:2px;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-aide-text, #71757f);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{text-shadow:0 0 .7px var(--devui-brand, #5e7ce0)}.devui-tabs__nav--slider>li:hover:not(.active):not(.disabled){color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--slider .devui-tabs__close-btn{margin-right:12px}.devui-tabs__nav--slider .devui-tabs__new-tab{padding:2px 16px 0}.devui-tabs__nav--wrapped{font-size:var(--devui-font-size, 14px);background:transparent;border-bottom:1px solid var(--devui-dividing-line, #f2f2f3);background-color:var(--devui-base-bg, #ffffff)}.devui-tabs__nav--wrapped>li{cursor:pointer;position:relative;padding:8px 16px}.devui-tabs__nav--wrapped>li a{cursor:pointer;border:none;color:var(--devui-aide-text, #71757f);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, #f2f2f3);background:var(--devui-global-bg, #f8f8fa);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;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--tabs{border-bottom:1px var(--devui-line, #d7d8da) solid}.devui-tabs__nav--tabs li{margin-left:32px;margin-bottom:-3px}.devui-tabs__nav--tabs li:first-child{margin-left:0}.devui-tabs__nav--pills>li{margin-left:32px}.devui-tabs__nav--pills>li:first-child{margin-left:0}.devui-tabs__nav{display:flex;align-items:center;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--right,.devui-tabs__nav--left{margin:0}.devui-tabs__nav--right .devui-tabs__nav-slider-animation,.devui-tabs__nav--left .devui-tabs__nav-slider-animation{transition:top var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),height var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--right .devui-tabs__new-tab,.devui-tabs__nav--left .devui-tabs__new-tab{text-align:center}.devui-tabs__nav--right{display:block;float:right;border-bottom:none;margin-left:10px}.devui-tabs__nav--right>li{margin-left:0;padding:0 16px;position:relative}.devui-tabs__nav--right>li:after{display:none}.devui-tabs__nav--right>li:before{content:" ";position:absolute;top:0;left:-5px;margin:auto;height:0;width:2px;background:transparent;transition:height 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--right>li.active:before{height:100%;background:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--left{display:block;float:left;border-bottom:none;margin-right:10px}.devui-tabs__nav--left>li{margin-left:0;padding:0 16px;position:relative}.devui-tabs__nav--left>li:after{content:" ";position:absolute;top:0;right:-5px;margin:auto;height:0;width:2px;background:transparent;transition:height 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--left>li.active:after{height:100%;width:2px;background:var(--devui-brand, #5e7ce0)}.devui-tabs__nav-content{display:flex;align-items:center}.devui-tabs__nav--options{padding-left:2px}.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))}.devui-tabs__new-tab .devui-icon__container:hover,.devui-tabs__close-btn .devui-icon__container:hover{color:var(--devui-text, #252b3a)}.devui-tabs__new-tab .devui-icon__container>i,.devui-tabs__close-btn .devui-icon__container>i{transition:none}.devui-tabs__new-tab .devui-icon__container{color:var(--devui-aide-text, #71757f)}.devui-tabs__close-btn{margin-left:12px}.devui-tabs__close-btn .devui-icon__container{color:var(--devui-form-control-line, #d7d8da)}.devui-tabs--right .devui-tabs__nav--options,.devui-tabs--right .devui-tabs__nav--wrapped,.devui-tabs--left .devui-tabs__nav--options,.devui-tabs--left .devui-tabs__nav--wrapped{border-bottom:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-tabs--right .devui-tabs__nav--options>li:after,.devui-tabs--right .devui-tabs__nav--wrapped>li:after,.devui-tabs--left .devui-tabs__nav--options>li:after,.devui-tabs--left .devui-tabs__nav--wrapped>li:after{display:none}.devui-tabs--right .devui-tabs__nav--options>li:before,.devui-tabs--right .devui-tabs__nav--wrapped>li:before,.devui-tabs--left .devui-tabs__nav--options>li:before,.devui-tabs--left .devui-tabs__nav--wrapped>li:before{display:none}.devui-tabs--right .devui-tabs__nav--wrapped,.devui-tabs--left .devui-tabs__nav--wrapped{border-bottom:none}.devui-tabs--right .devui-tabs__nav--wrapped>li,.devui-tabs--left .devui-tabs__nav--wrapped>li{padding:8px 16px}.devui-tabs--right .devui-tabs__nav--slider>li:after,.devui-tabs--left .devui-tabs__nav--slider>li:after{display:none}.devui-tabs--right .devui-tabs__nav--slider>li:before,.devui-tabs--left .devui-tabs__nav--slider>li:before{display:none}.devui-tabs--right .devui-tabs__nav--slider .devui-tabs__nav-slider-animation,.devui-tabs--left .devui-tabs__nav--slider .devui-tabs__nav-slider-animation{left:1px}.devui-tabs--right .devui-tabs__nav--wrapped{border-left:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-tabs--right .devui-tabs__nav--wrapped>li a{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-tabs--right .devui-tabs__nav--wrapped>li.active{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0;border-bottom-color:var(--devui-dividing-line, #f2f2f3);border-left-color:transparent}.devui-tabs--right .devui-tabs__nav--tabs{border-left:1px solid var(--devui-line, #d7d8da)}.devui-tabs--left .devui-tabs__nav--wrapped{border-right:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-tabs--left .devui-tabs__nav--wrapped>li a{border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-tabs--left .devui-tabs__nav--wrapped>li.active{border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px);border-bottom-color:var(--devui-dividing-line, #f2f2f3);border-right-color:transparent}.devui-tabs--left .devui-tabs__nav--tabs{border-right:1px solid var(--devui-line, #d7d8da)}.devui-tab__content{margin-top:10px;overflow:hidden;padding:10px 0}

package/tag/index.es.js

@@ -1,4 +1,4 @@
-import { computed, defineComponent, toRefs, ref, watch, onUnmounted, withDirectives, createVNode, resolveComponent, vShow } from "vue";
+import { computed, defineComponent, toRefs, watch, onUnmounted, createVNode, resolveComponent } from "vue";
 const tagProps = {
   type: {
     type: String,
@@ -19,6 +19,10 @@ const tagProps = {
   deletable: {
     type: Boolean,
     default: false
+  },
+  size: {
+    type: String,
+    default: "xs"
   }
 };
 function createBem(namespace, element, modifier) {
@@ -31,8 +35,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) : "";
@@ -48,7 +52,7 @@ function useClass(props) {
   const ns = useNamespace("tag");
   return computed(() => {
     const { type, color, deletable } = props;
-    return `${ns.e("item")} ${ns.m(type || (color ? "colorful" : "") || "default")} ${deletable ? ns.m("deletable") : ""}`;
+    return `${ns.e("item")} ${ns.m(type || (color ? "colorful" : "") || "default")} ${deletable ? ns.m("deletable") : ""} ${ns.m(props.size)}`;
   });
 }
 function useColor(props) {
@@ -99,12 +103,11 @@ var Tag = defineComponent({
     const themeColor = useColor(props);
     const tagTitle = titleContent.value || "";
     const isDefaultTag = () => !type.value && !color.value;
-    const isShow = ref(true);
     const handleClick = (e) => {
       emit("click", e);
     };
     const handleDelete = (e) => {
-      isShow.value = false;
+      e.stopPropagation();
       emit("tagDelete", e);
     };
     const closeIconEl = () => {
@@ -127,7 +130,7 @@ var Tag = defineComponent({
     onUnmounted(() => unWatch());
     return () => {
       var _a;
-      return isShow.value && withDirectives(createVNode("div", {
+      return createVNode("div", {
         "class": ns.b(),
         "onClick": handleClick
       }, [createVNode("span", {
@@ -138,7 +141,7 @@ var Tag = defineComponent({
           backgroundColor: checked.value ? themeColor.value : !color.value ? "" : "var(--devui-base-bg, #ffffff)"
         },
         "title": tagTitle
-      }, [(_a = slots.default) == null ? void 0 : _a.call(slots), closeIconEl()])]), [[vShow, isShow.value]]);
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots), closeIconEl()])]);
     };
   }
 });

package/tag/index.umd.js

@@ -1 +1 @@
-(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"});
+(function(o,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis!="undefined"?globalThis:o||self,e(o.index={},o.Vue))})(this,function(o,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},size:{type:String,default:"xs"}};function s(n,t,a){let l=n;return t&&(l+=`__${t}`),a&&(l+=`--${a}`),l}function v(n,t=!1){const a=t?`.devui-${n}`:`devui-${n}`;return{b:()=>s(a),e:c=>c?s(a,c):"",m:c=>c?s(a,"",c):"",em:(c,f)=>c&&f?s(a,c,f):""}}function y(n){const t=v("tag");return e.computed(()=>{const{type:a,color:l,deletable:u}=n;return`${t.e("item")} ${t.m(a||(l?"colorful":"")||"default")} ${u?t.m("deletable"):""} ${t.m(n.size)}`})}function b(n){return e.computed(()=>{const{color:t,type:a}=n,l={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&&a?l[a]:u[t]||t})}var V="",p=e.defineComponent({name:"DTag",props:m,emits:["click","tagDelete","checkedChange"],setup(n,{slots:t,emit:a}){const l=v("tag"),{type:u,color:d,checked:i,titleContent:c,deletable:f}=e.toRefs(n),h=y(n),g=b(n),w=c.value||"",k=()=>!u.value&&!d.value,T=r=>{a("click",r)},$=r=>{r.stopPropagation(),a("tagDelete",r)},N=()=>f.value?e.createVNode("a",{class:"remove-button",onClick:$},[k()?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:g.value},null)]):null,S=e.watch(i,r=>{a("checkedChange",r)});return e.onUnmounted(()=>S()),()=>{var r;return e.createVNode("div",{class:l.b(),onClick:T},[e.createVNode("span",{class:h.value,style:{display:"block",color:i.value?"#fff":g.value,backgroundColor:i.value?g.value:d.value?"var(--devui-base-bg, #ffffff)":""},title:w},[(r=t.default)==null?void 0:r.call(t),N()])])}}}),C={title:"Tag \u6807\u7B7E",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(n){n.component(p.name,p)}};o.Tag=p,o.default=C,o.tagProps=m,Object.defineProperty(o,"__esModule",{value:!0}),o[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}.devui-tag .devui-tag__item{display:block;position:relative;padding:0 8px;height:20px;border:1px solid;border-radius:var(--devui-border-radius, 2px);font-size:var(--devui-font-size, 14px);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, #f7f8fa)}.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 .devui-tag__item.devui-tag--lg{font-size:var(--devui-font-size-lg, 14px);height:32px;line-height:30px}.devui-tag .devui-tag__item.devui-tag--md{font-size:var(--devui-font-size-lg, 14px);height:28px;line-height:26px}.devui-tag .devui-tag__item.devui-tag--sm{font-size:var(--devui-font-size-sm, 12px);height:24px;line-height:22px}.devui-tag .devui-tag__item.devui-tag--xs{font-size:var(--devui-font-size-sm, 12px);height:20px;line-height:18px}.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}