@aplus-frontend/ui 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as D, ref as
|
|
1
|
+
import { defineComponent as D, ref as C, computed as n, unref as f, watch as N, nextTick as S, onMounted as j, onUnmounted as G, openBlock as c, createBlock as d, mergeProps as b, withCtx as g, renderSlot as R, createTextVNode as A, toDisplayString as k, createElementVNode as o, normalizeClass as W, normalizeStyle as _, createElementBlock as T, Fragment as F, renderList as I, createCommentVNode as U } from "vue";
|
|
2
2
|
import { Tooltip as q } from "ant-design-vue";
|
|
3
3
|
import H from "@ant-design/icons-vue";
|
|
4
4
|
import "./ap-tag.vue2.mjs";
|
|
@@ -9,7 +9,7 @@ import { useLocale as K } from "../config-provider/hooks/use-locale.mjs";
|
|
|
9
9
|
import { useGlobalConfig as O } from "../config-provider/hooks/use-global-config.mjs";
|
|
10
10
|
import { useNamespace as Q } from "../config-provider/hooks/use-namespace.mjs";
|
|
11
11
|
import X from "./ap-tag.vue.mjs";
|
|
12
|
-
const
|
|
12
|
+
const pe = /* @__PURE__ */ D({
|
|
13
13
|
__name: "ap-tag-group",
|
|
14
14
|
props: {
|
|
15
15
|
list: { default: () => [] },
|
|
@@ -17,15 +17,15 @@ const ue = /* @__PURE__ */ D({
|
|
|
17
17
|
ellipsisColor: {},
|
|
18
18
|
ellipsis: { default: () => ({}) }
|
|
19
19
|
},
|
|
20
|
-
setup(
|
|
21
|
-
const { t:
|
|
20
|
+
setup(E) {
|
|
21
|
+
const { t: z } = K(), i = E, B = O("uiMode"), { b: V, bm: v } = Q("tag-group"), u = C(), r = n(() => ({
|
|
22
22
|
...{
|
|
23
23
|
iconColor: "#34B77C",
|
|
24
24
|
symbol: "icon",
|
|
25
|
-
text:
|
|
25
|
+
text: z("ap.common.more")
|
|
26
26
|
},
|
|
27
27
|
...i.ellipsis
|
|
28
|
-
})),
|
|
28
|
+
})), $ = n(() => r.value.tooltip && typeof r.value.tooltip == "object" ? J(r.value.tooltip, ["trigger", "title"]) : {}), p = n(() => f(m) < i.list.length), m = C(0), L = n(() => i.list.map((e) => e.text).join("、")), M = n(() => [V()].filter(Boolean)), P = n(() => B.value === "aplus" ? [v("ellipsis-text", "aplus")] : [v("ellipsis-text", "admin")]), h = (e, t) => {
|
|
29
29
|
let s = document.createElement("canvas");
|
|
30
30
|
const l = s.getContext("2d");
|
|
31
31
|
l.font = `${e}px system-ui`;
|
|
@@ -38,12 +38,14 @@ const ue = /* @__PURE__ */ D({
|
|
|
38
38
|
if (!u.value) return;
|
|
39
39
|
const s = u.value.offsetWidth;
|
|
40
40
|
for (let l of i.list) {
|
|
41
|
-
const a = l.size === "large" ? 16 : 12,
|
|
41
|
+
const a = l.size === "large" ? 16 : 12, w = h(
|
|
42
42
|
l.size === "large" ? 14 : 12,
|
|
43
43
|
l.text
|
|
44
|
-
);
|
|
45
|
-
if (e +=
|
|
44
|
+
) + a + 2 + i.space;
|
|
45
|
+
if (e += w, e > s) {
|
|
46
|
+
e -= w;
|
|
46
47
|
break;
|
|
48
|
+
}
|
|
47
49
|
t++;
|
|
48
50
|
}
|
|
49
51
|
if (t < i.list.length) {
|
|
@@ -76,15 +78,15 @@ const ue = /* @__PURE__ */ D({
|
|
|
76
78
|
), window.addEventListener("resize", y);
|
|
77
79
|
}), G(() => {
|
|
78
80
|
window.removeEventListener("resize", y);
|
|
79
|
-
}), (e, t) => (c(), d(f(q),
|
|
81
|
+
}), (e, t) => (c(), d(f(q), b({ trigger: "hover" }, $.value), {
|
|
80
82
|
title: g(() => [
|
|
81
83
|
R(e.$slots, "tooltip", { tags: e.list }, () => [
|
|
82
|
-
A(
|
|
84
|
+
A(k(L.value), 1)
|
|
83
85
|
])
|
|
84
86
|
]),
|
|
85
87
|
default: g(() => [
|
|
86
88
|
o("div", {
|
|
87
|
-
class:
|
|
89
|
+
class: W(M.value),
|
|
88
90
|
ref_key: "container",
|
|
89
91
|
ref: u,
|
|
90
92
|
style: _({
|
|
@@ -92,7 +94,7 @@ const ue = /* @__PURE__ */ D({
|
|
|
92
94
|
// opacity: isUpdating ? '0' : '1'
|
|
93
95
|
})
|
|
94
96
|
}, [
|
|
95
|
-
(c(!0), T(F, null, I(e.list, (s, l) => (c(), d(X,
|
|
97
|
+
(c(!0), T(F, null, I(e.list, (s, l) => (c(), d(X, b({ ref_for: !0 }, s, {
|
|
96
98
|
key: l,
|
|
97
99
|
style: {
|
|
98
100
|
display: l >= m.value ? "none" : "inline-block",
|
|
@@ -161,8 +163,8 @@ const ue = /* @__PURE__ */ D({
|
|
|
161
163
|
_: 1
|
|
162
164
|
}, 8, ["style"])) : p.value && r.value.symbol === "text" ? (c(), T("span", {
|
|
163
165
|
key: 1,
|
|
164
|
-
class:
|
|
165
|
-
},
|
|
166
|
+
class: W(P.value)
|
|
167
|
+
}, k(r.value.text), 3)) : U("", !0)
|
|
166
168
|
], 6)
|
|
167
169
|
]),
|
|
168
170
|
_: 3
|
|
@@ -170,5 +172,5 @@ const ue = /* @__PURE__ */ D({
|
|
|
170
172
|
}
|
|
171
173
|
});
|
|
172
174
|
export {
|
|
173
|
-
|
|
175
|
+
pe as default
|
|
174
176
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),V=require("ant-design-vue"),_=require("@ant-design/icons-vue");require("./ap-tag.vue2.js");require("../config-provider/index.js");const b=require("lodash-unified");require("./style/ap-tag-group.css");const N=require("../config-provider/hooks/use-locale.js"),B=require("../config-provider/hooks/use-global-config.js"),T=require("../config-provider/hooks/use-namespace.js"),q=require("./ap-tag.vue.js"),W=e.defineComponent({__name:"ap-tag-group",props:{list:{default:()=>[]},space:{default:4},ellipsisColor:{},ellipsis:{default:()=>({})}},setup(
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),V=require("ant-design-vue"),_=require("@ant-design/icons-vue");require("./ap-tag.vue2.js");require("../config-provider/index.js");const b=require("lodash-unified");require("./style/ap-tag-group.css");const N=require("../config-provider/hooks/use-locale.js"),B=require("../config-provider/hooks/use-global-config.js"),T=require("../config-provider/hooks/use-namespace.js"),q=require("./ap-tag.vue.js"),W=e.defineComponent({__name:"ap-tag-group",props:{list:{default:()=>[]},space:{default:4},ellipsisColor:{},ellipsis:{default:()=>({})}},setup(v){const{t:h}=N.useLocale(),r=v,y=B.useGlobalConfig("uiMode"),{b:x,bm:p}=T.useNamespace("tag-group"),a=e.ref(),n=e.computed(()=>({...{iconColor:"#34B77C",symbol:"icon",text:h("ap.common.more")},...r.ellipsis})),C=e.computed(()=>n.value.tooltip&&typeof n.value.tooltip=="object"?b.omit(n.value.tooltip,["trigger","title"]):{}),c=e.computed(()=>e.unref(u)<r.list.length),u=e.ref(0),w=e.computed(()=>r.list.map(t=>t.text).join("、")),E=e.computed(()=>[x()].filter(Boolean)),k=e.computed(()=>y.value==="aplus"?[p("ellipsis-text","aplus")]:[p("ellipsis-text","admin")]),d=(t,l)=>{let s=document.createElement("canvas");const o=s.getContext("2d");o.font=`${t}px system-ui`;const i=o.measureText(l);return setTimeout(()=>{s=null},0),i.width},m=()=>{let t=0,l=0;if(!a.value)return;const s=a.value.offsetWidth;for(let o of r.list){const i=o.size==="large"?16:12,f=d(o.size==="large"?14:12,o.text)+i+2+r.space;if(t+=f,t>s){t-=f;break}l++}if(l<r.list.length){const i=d(12,n.value.text);r.ellipsis.symbol==="icon"?t+=16:t+=i,t>s&&l--}u.value=l};e.watch(()=>r.list,(t,l)=>{t!==l&&e.nextTick(()=>{m()})},{immediate:!0});const g=()=>{m()};return e.onMounted(()=>{[["ellipsisColor","ellipse.color"]].forEach(([t,l])=>{r[t]&&console.error(`[ApTagGroup]: \`${t}\` is deprecated, please use \`${l}\` instead.`)}),window.addEventListener("resize",g)}),e.onUnmounted(()=>{window.removeEventListener("resize",g)}),(t,l)=>(e.openBlock(),e.createBlock(e.unref(V.Tooltip),e.mergeProps({trigger:"hover"},C.value),{title:e.withCtx(()=>[e.renderSlot(t.$slots,"tooltip",{tags:t.list},()=>[e.createTextVNode(e.toDisplayString(w.value),1)])]),default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(E.value),ref_key:"container",ref:a,style:e.normalizeStyle({pointerEvents:c.value?"auto":"none"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.list,(s,o)=>(e.openBlock(),e.createBlock(q.default,e.mergeProps({ref_for:!0},s,{key:o,style:{display:o>=u.value?"none":"inline-block",marginRight:`${t.space}px`}}),null,16,["style"]))),128)),c.value&&n.value.symbol==="icon"?(e.openBlock(),e.createBlock(e.unref(_),{key:0,style:e.normalizeStyle({color:t.ellipsisColor||n.value.iconColor})},{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"])):c.value&&n.value.symbol==="text"?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(k.value)},e.toDisplayString(n.value.text),3)):e.createCommentVNode("",!0)],6)]),_:3},16))}});exports.default=W;
|