vue-amazing-ui/lib/tag/Tag.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),N=require("../space/index.cjs"),z=require("../utils/index.cjs"),$={key:0,class:"tag-icon"},S={class:"tag-label"},q={class:"tag-label"},T=["onClick"],L=e.defineComponent({__name:"Tag",props:{closable:{type:Boolean,default:!1},color:{default:void 0},icon:{default:void 0},size:{default:"middle"},bordered:{type:Boolean,default:!0},dynamic:{type:Boolean,default:!1},spaceProps:{default:()=>({})},value:{default:()=>[]}},emits:["update:value","close","dynamicClose"],setup(m,{emit:y}){const t=m,u=e.ref(),s=e.ref(!1),i=e.ref(""),r=["success","processing","error","warning","default","pink","red","yellow","orange","cyan","green","blue","purple","geekblue","magenta","volcano","gold","lime"],p=e.ref(!1),d=e.ref(),f=e.ref(Array(t.value.length).fill(1)),k=z.useSlotsExist(["icon"]),c=y,v=e.computed(()=>{if(t.dynamic&&t.value.length){if(typeof t.value[0]=="string")return!0;if(typeof t.value[0]=="object")return!1}return null}),h=e.computed(()=>t.dynamic&&t.value.length?v.value?t.value.map(l=>({label:l,closable:!0})):t.value.map(l=>({closable:!0,...l})):[]),b=e.computed(()=>t.dynamic?!1:k.icon||t.icon);e.watchEffect(()=>{if(t.dynamic){const l=t.value.length;f.value=Array(l).fill(1),e.nextTick(()=>{if(d.value)for(let a=0;a<l;a++)f.value[a]=d.value[a].offsetWidth})}});function B(l){p.value=!0,c("close",l)}function C(l,a){const o=t.value.filter((n,g)=>g!==a);c("update:value",o),c("dynamicClose",l,a)}async function E(){s.value=!0,await e.nextTick(),u.value.focus()}function V(){v.value?c("update:value",[...t.value,i.value]):c("update:value",[...t.value,{label:i.value}]),s.value=!1,u.value=""}function w(l){l.key==="Enter"&&u.value.blur()}return(l,a)=>l.dynamic?(e.openBlock(),e.createBlock(e.unref(N.default),e.mergeProps({key:1,gap:"small"},l.spaceProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["tag-wrap",[`tag-${o.size||l.size}`,(o.color||l.color)&&r.includes(o.color||l.color)?`tag-${o.color||l.color}`:"",{"tag-borderless":o.bordered!==void 0&&!o.bordered,"tag-has-color":(o.color||l.color)&&!r.includes(o.color||l.color)}]]),style:e.normalizeStyle(`background-color: ${(o.color||l.color)&&!r.includes(o.color||l.color)?o.color||l.color:""};`),key:n},[f.value[n]?(e.openBlock(),e.createElementBlock("span",{key:0,ref_for:!0,ref_key:"tagsIconRef",ref:d,class:"tag-icon"},[e.renderSlot(l.$slots,"icon",{item:o,icon:l.icon,index:n},()=>[e.createTextVNode(e.toDisplayString(o.icon),1)],!0)],512)):e.createCommentVNode("",!0),e.createElementVNode("span",q,[e.renderSlot(l.$slots,"label",{item:o,label:o.label,index:n},()=>[e.createTextVNode(e.toDisplayString(o.label),1)],!0)]),o.closable||l.closable?(e.openBlock(),e.createElementBlock("span",{key:1,class:"tag-close",onClick:g=>C(o,n)},[...a[3]||(a[3]=[e.createElementVNode("svg",{focusable:"false",class:"close-svg","data-icon":"close",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"})],-1)])],8,T)):e.createCommentVNode("",!0)],6))),128)),s.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["tag-wrap",[`tag-${l.size}`,{"tag-plus":l.dynamic}]]),onClick:E},[...a[4]||(a[4]=[e.createElementVNode("svg",{focusable:"false",class:"plus-svg","data-icon":"plus",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"}),e.createElementVNode("path",{d:"M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"})],-1)])],2)),s.value?e.withDirectives((e.openBlock(),e.createElementBlock("input",{key:1,ref_key:"inputRef",ref:u,class:e.normalizeClass(["tag-input",`input-${l.size}`]),type:"text","onUpdate:modelValue":a[0]||(a[0]=o=>i.value=o),onBlur:a[1]||(a[1]=o=>s.value=!1),onChange:V,onKeydown:w},null,34)),[[e.vModelText,i.value]]):e.createCommentVNode("",!0)]),_:3},16)):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["tag-wrap",[`tag-${l.size}`,l.color&&r.includes(l.color)?`tag-${l.color}`:"",{"tag-borderless":!l.bordered,"tag-has-color":l.color&&!r.includes(l.color),"tag-hidden":p.value}]]),style:e.normalizeStyle(`background-color: ${l.color&&!r.includes(l.color)?l.color:""};`)},[b.value?(e.openBlock(),e.createElementBlock("span",$,[e.renderSlot(l.$slots,"icon",{},()=>[e.createTextVNode(e.toDisplayString(l.icon),1)],!0)])):e.createCommentVNode("",!0),e.createElementVNode("span",S,[e.renderSlot(l.$slots,"default",{},void 0,!0)]),l.closable?(e.openBlock(),e.createElementBlock("span",{key:1,class:"tag-close",onClick:B},[...a[2]||(a[2]=[e.createElementVNode("svg",{focusable:"false",class:"close-svg","data-icon":"close",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},[e.createElementVNode("path",{d:"M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"})],-1)])])):e.createCommentVNode("",!0)],6))}});exports.default=L;