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"),z=require("../space/index.cjs"),$=require("../utils/index.cjs"),p={key:0,class:"tag-icon"},S={class:"tag-label"},q={class:"tag-label"},T=["onClick"],x=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(l,{emit:k}){const n=l,i=e.ref(),s=e.ref(!1),d=e.ref(""),c=["success","processing","error","warning","default","pink","red","yellow","orange","cyan","green","blue","purple","geekblue","magenta","volcano","gold","lime"],g=e.ref(!1),f=e.ref(),v=e.ref(Array(n.value.length).fill(1)),h=$.useSlotsExist(["icon"]),u=k,m=e.computed(()=>{if(n.dynamic&&n.value.length){if(typeof n.value[0]=="string")return!0;if(typeof n.value[0]=="object")return!1}return null}),b=e.computed(()=>n.dynamic&&n.value.length?m.value?n.value.map(a=>({label:a,closable:!0})):n.value.map(a=>({closable:!0,...a})):[]),B=e.computed(()=>n.dynamic?!1:h.icon||n.icon);e.watchEffect(()=>{if(n.dynamic){const a=n.value.length;v.value=Array(a).fill(1),e.nextTick(()=>{if(f.value)for(let t=0;t<a;t++)v.value[t]=f.value[t].offsetWidth})}});function C(a){g.value=!0,u("close",a)}function E(a,t){const o=n.value.filter((r,y)=>y!==t);u("update:value",o),u("dynamicClose",a,t)}async function V(){s.value=!0,await e.nextTick(),i.value.focus()}function w(){m.value?u("update:value",[...n.value,d.value]):u("update:value",[...n.value,{label:d.value}]),s.value=!1,i.value=""}function N(a){a.key==="Enter"&&i.value.blur()}return(a,t)=>l.dynamic?(e.openBlock(),e.createBlock(e.unref(z.default),e.mergeProps({key:1,gap:"small"},l.spaceProps),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,(o,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["tag-wrap",[`tag-${o.size||l.size}`,(o.color||l.color)&&c.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)&&!c.includes(o.color||l.color)}]]),style:e.normalizeStyle(`background-color: ${(o.color||l.color)&&!c.includes(o.color||l.color)?o.color||l.color:""};`),key:r},[v.value[r]?(e.openBlock(),e.createElementBlock("span",{key:0,ref_for:!0,ref_key:"tagsIconRef",ref:f,class:"tag-icon"},[e.renderSlot(a.$slots,"icon",{item:o,icon:l.icon,index:r},()=>[e.createTextVNode(e.toDisplayString(o.icon),1)],!0)],512)):e.createCommentVNode("",!0),e.createElementVNode("span",q,[e.renderSlot(a.$slots,"label",{item:o,label:o.label,index:r},()=>[e.createTextVNode(e.toDisplayString(o.label),1)],!0)]),o.closable||l.closable?(e.openBlock(),e.createElementBlock("span",{key:1,class:"tag-close",onClick:y=>E(o,r)},[...t[3]||(t[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:V},[...t[4]||(t[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:i,class:e.normalizeClass(["tag-input",`input-${l.size}`]),type:"text","onUpdate:modelValue":t[0]||(t[0]=o=>d.value=o),onBlur:t[1]||(t[1]=o=>s.value=!1),onChange:w,onKeydown:N},null,34)),[[e.vModelText,d.value]]):e.createCommentVNode("",!0)]),_:3},16)):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["tag-wrap",[`tag-${l.size}`,l.color&&c.includes(l.color)?`tag-${l.color}`:"",{"tag-borderless":!l.bordered,"tag-has-color":l.color&&!c.includes(l.color),"tag-hidden":g.value}]]),style:e.normalizeStyle(`background-color: ${l.color&&!c.includes(l.color)?l.color:""};`)},[B.value?(e.openBlock(),e.createElementBlock("span",p,[e.renderSlot(a.$slots,"icon",{},()=>[e.createTextVNode(e.toDisplayString(l.icon),1)],!0)])):e.createCommentVNode("",!0),e.createElementVNode("span",S,[e.renderSlot(a.$slots,"default",{},void 0,!0)]),l.closable?(e.openBlock(),e.createElementBlock("span",{key:1,class:"tag-close",onClick:C},[...t[2]||(t[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=x;