@aplus-frontend/ui/lib/src/ap-tag/ap-tag-group.vue.js

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),N=require("@aplus-frontend/antdv"),q=require("@ant-design/icons-vue");require("./ap-tag.vue2.js");require("../config-provider/index.js");const B=require("lodash-unified"),f=require("./utils.js");require("../hooks/index.js");const T=require("../utils/warning.js"),W=require("../config-provider/hooks/use-locale.js"),z=require("../config-provider/hooks/use-global-config.js"),S=require("../config-provider/hooks/use-namespace.js"),M=require("../hooks/useResize.js"),P=require("./ap-tag.vue.js"),D=e.defineComponent({__name:"ap-tag-group",props:{list:{default:()=>[]},space:{default:4},ellipsisColor:{},ellipsis:{default:()=>({})}},setup(v){const{t:h}=W.useLocale(),o=v,y=T.useDevWarning("ApTagGroup"),p=z.useGlobalConfig("uiMode"),{b:x,bm:d}=S.useNamespace("tag-group"),n=e.ref(),{observe:C,unobserve:w}=M.useResize(),r=e.computed(()=>({...{iconColor:p.value==="aplus"?"#182948":"#333",symbol:"icon",text:h("ap.common.more")},...o.ellipsis})),k=e.computed(()=>r.value.tooltip&&typeof r.value.tooltip=="object"?B.omit(r.value.tooltip,["trigger","title"]):{}),a=e.computed(()=>e.unref(u)<o.list.length),u=e.ref(0),_=e.computed(()=>o.list.map(t=>t.text).join("、")),E=e.computed(()=>[x()].filter(Boolean)),V=e.computed(()=>p.value==="aplus"?[d("ellipsis-text","aplus")]:[d("ellipsis-text","admin")]),m=()=>{let t=0,l=0;if(!n.value)return;const s=n.value.offsetWidth;for(let i of o.list){const c=i.size==="small"?8:12,g=f.getTextWidth(i.size==="large"?14:12,i.text)+c+o.space;if(t+=g,t>s){t-=g;break}l++}if(l<o.list.length){const c=f.getTextWidth(12,r.value.text);o.ellipsis.symbol==="icon"?t+=16:t+=c,t>s&&l--}u.value=l};e.watch(()=>o.list,(t,l)=>{t!==l&&e.nextTick(()=>{m()})},{immediate:!0});const b=()=>{m()};return e.onMounted(()=>{[["ellipsisColor","ellipse.color"]].forEach(([t,l])=>{y.deprecated(!o[t],t,l)}),n.value&&C(n.value,b)}),e.onUnmounted(()=>{n.value&&w(n.value)}),(t,l)=>(e.openBlock(),e.createBlock(e.unref(N.Tooltip),e.mergeProps({trigger:"hover"},k.value),{title:e.withCtx(()=>[e.renderSlot(t.$slots,"tooltip",{tags:t.list},()=>[e.createTextVNode(e.toDisplayString(_.value),1)])]),default:e.withCtx(()=>[e.createElementVNode("div",{ref_key:"container",ref:n,class:e.normalizeClass(E.value),style:e.normalizeStyle({pointerEvents:a.value?"auto":"none"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.list,(s,i)=>(e.openBlock(),e.createBlock(P.default,e.mergeProps({ref_for:!0},s,{key:i,style:{display:i>=u.value?"none":"inline-flex",marginRight:`${t.space}px`}}),null,16,["style"]))),128)),a.value&&r.value.symbol==="icon"?(e.openBlock(),e.createBlock(e.unref(q),{key:0,style:e.normalizeStyle({color:t.ellipsisColor||r.value.iconColor,cursor:"pointer"})},{component:e.withCtx(()=>l[0]||(l[0]=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",fill:"none",version:"1.1",width:"16",height:"16",viewBox:"0 0 16 16"},[e.createElementVNode("defs",null,[e.createElementVNode("clipPath",{id:"master_svg0_1133_24991"},[e.createElementVNode("rect",{x:"0",y:"0",width:"16",height:"16",rx:"0"})])]),e.createElementVNode("g",{"clip-path":"url(#master_svg0_1133_24991)"},[e.createElementVNode("g",null,[e.createElementVNode("ellipse",{cx:"8",cy:"8",rx:"1",ry:"1",fill:"currentColor","fill-opacity":"1"})]),e.createElementVNode("g",null,[e.createElementVNode("ellipse",{cx:"3.25",cy:"8",rx:"1",ry:"1",fill:"currentColor","fill-opacity":"1"})]),e.createElementVNode("g",null,[e.createElementVNode("ellipse",{cx:"12.75",cy:"8",rx:"1",ry:"1",fill:"currentColor","fill-opacity":"1"})])])],-1)])),_:1},8,["style"])):a.value&&r.value.symbol==="text"?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(V.value),style:{cursor:"pointer"}},e.toDisplayString(r.value.text),3)):e.createCommentVNode("",!0)],6)]),_:3},16))}});exports.default=D;