@aplus-frontend/ui
Version:
2 lines (1 loc) • 3.95 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),q=require("@aplus-frontend/antdv"),N=require("@ant-design/icons-vue");require("./ap-tag.vue2.js");require("../../config-provider/index.js");const b=require("lodash-unified"),g=require("./utils.js");require("../../hooks/index.js");const B=require("../../utils/warning.js"),T=require("./style/group.js"),W=require("../../config-provider/hooks/use-token.js"),z=require("../../config-provider/hooks/use-locale.js"),S=require("../../config-provider/hooks/use-namespace.js"),P=require("../../hooks/useResize.js"),D=require("./ap-tag.vue.js"),R=e.defineComponent({__name:"ap-tag-group",props:{list:{default:()=>[]},space:{default:4},ellipsisColor:{},ellipsis:{default:()=>({})}},setup(f){const{t:v}=z.useLocale(),o=f,{token:h}=W.useToken(),y=B.useDevWarning("ApTagGroup"),{b:p}=S.useNamespace("tag-group"),x=T.default("tag-group"),n=e.ref(),{observe:k,unobserve:w}=P.useResize(),r=e.computed(()=>({...{iconColor:h.value?.textColor1,symbol:"icon",text:v("ap.common.more")},...o.ellipsis})),C=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(()=>[p(),x.value].filter(Boolean)),d=()=>{let t=0,l=0;if(!n.value)return;const i=n.value.offsetWidth;for(let s of o.list){const c=s.size==="small"?8:12,m=g.getTextWidth(s.size==="large"?14:12,s.text)+c+o.space;if(t+=m,t>i){t-=m;break}l++}if(l<o.list.length){const c=g.getTextWidth(12,r.value.text);o.ellipsis.symbol==="icon"?t+=16:t+=c,t>i&&l--}u.value=l};e.watch(()=>o.list,(t,l)=>{t!==l&&e.nextTick(()=>{d()})},{immediate:!0});const V=()=>{d()};return e.onMounted(()=>{[["ellipsisColor","ellipse.color"]].forEach(([t,l])=>{y.deprecated(!o[t],t,l)}),n.value&&k(n.value,V)}),e.onUnmounted(()=>{n.value&&w(n.value)}),(t,l)=>(e.openBlock(),e.createBlock(e.unref(q.Tooltip),e.mergeProps({trigger:"hover"},C.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,(i,s)=>(e.openBlock(),e.createBlock(D.default,e.mergeProps({ref_for:!0},i,{key:s,style:{display:s>=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(N),{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(e.unref(p)("ellipsis-text")),style:{cursor:"pointer"}},e.toDisplayString(r.value.text),3)):e.createCommentVNode("",!0)],6)]),_:3},16))}});exports.default=R;