vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
3 lines (2 loc) • 2.77 kB
JavaScript
"use strict";const o=require("vue");require("../icon/index.cjs");require("../renderer/index.cjs");const t=require("@vexip-ui/config"),n=require("@vexip-ui/utils"),C=require("./props.cjs"),d=require("../icon/icon.cjs"),u=require("../renderer/renderer.cjs"),v=Object.freeze(["default","primary","info","success","error","warning","lime","pink","magenta","tomato","orange","cyan","navy","gold","purple"]),y=o.defineComponent({name:"Tag",components:{Icon:d},props:C.tagProps,emits:[],setup(p,{slots:l}){const e=t.useProps("tag",p,{size:t.createSizeProp(),type:{default:"default",validator:s=>v.includes(s)},border:!1,closable:!1,color:null,simple:!1,circle:!1,prefix:"",prefixBg:"",prefixColor:"",suffix:"",suffixBg:"",suffixColor:"",disabled:!1,slots:()=>({})}),r=t.useNameHelper("tag"),b=t.useIcons(),x=o.computed(()=>({[r.b()]:!0,[r.bs("vars")]:!0,[r.bm("inherit")]:e.inherit,[r.bm(e.size)]:e.size!=="default",[r.bm(e.type)]:e.type!=="default",[r.bm("border")]:e.border,[r.bm("simple")]:e.simple,[r.bm("circle")]:e.circle,[r.bm("closable")]:e.closable,[r.bm("disabled")]:e.disabled})),m=o.computed(()=>{if(!e.color)return;const s=n.isClient?getComputedStyle(document.documentElement):null,i=n.parseColorToRgba((s==null?void 0:s.getPropertyValue(r.nv("color-white")))||"#fff"),a=n.parseColorToRgba(e.color),c=a.toString();return r.cvm({color:"var(--vxp-color-white)","bg-color":c,"b-color":c,"close-color":"var(--vxp-color-white)","d-color":n.mixColor(i,a,.3).toString(),...e.simple||e.border?{color:c,"close-color":c}:{},...e.simple?{"bg-color":n.adjustAlpha(a,.2).toString()}:{}})});function g(s){if(!e.closable||e.disabled||s.button>0)return!1;s.stopPropagation(),t.emitEvent(e.onClose)}function f(){return e.closable?o.createVNode("button",{type:"button",class:r.be("close"),onClick:g},[o.createVNode(d,o.mergeProps(b.value.close,{label:"close"}),null)]):null}return()=>{const s=!!(e.prefix===0||e.prefix||l.prefix||e.slots.prefix),i=!!(e.suffix===0||e.suffix||l.suffix||e.slots.suffix);return o.createVNode("div",{class:x.value,style:m.value},[s?o.createVNode("span",{class:[r.be("unit"),r.be("prefix")],style:{color:e.prefixColor,backgroundColor:e.prefixBg,borderColor:e.prefixBg}},[o.renderSlot(l,"prefix",void 0,()=>[o.createVNode(u,{renderer:e.slots.prefix},{default:()=>[e.prefix]})])]):null,o.createVNode("span",{class:[r.be("unit"),r.be("content")]},[o.renderSlot(l,"default",void 0,()=>[o.createVNode(u,{renderer:e.slots.default},null)]),!i&&f()]),i?o.createVNode("span",{class:[r.be("unit"),r.be("suffix")],style:{color:e.suffixColor,backgroundColor:e.suffixBg,borderColor:e.suffixBg}},[o.renderSlot(l,"suffix",void 0,()=>[o.createVNode(u,{renderer:e.slots.suffix},{default:()=>[e.suffix]})]),f()]):null])}}});module.exports=y;
//# sourceMappingURL=tag.cjs.map