@aplus-frontend/ui/es/src/ap-tag/ap-tag-group.vue.mjs

import { defineComponent as j, ref as C, computed as n, unref as f, watch as G, nextTick as L, onMounted as A, onUnmounted as F, createBlock as g, openBlock as a, mergeProps as w, withCtx as d, createElementVNode as t, normalizeStyle as b, normalizeClass as k, createElementBlock as _, createCommentVNode as I, Fragment as U, renderList as q, toDisplayString as W, renderSlot as H, createTextVNode as J } from "vue";
import { Tooltip as K } from "@aplus-frontend/antdv";
import O from "@ant-design/icons-vue";
import "./ap-tag.vue2.mjs";
import "../config-provider/index.mjs";
import { omit as Q } from "lodash-unified";
import { getTextWidth as T } from "./utils.mjs";
import "../hooks/index.mjs";
import { useDevWarning as X } from "../utils/warning.mjs";
import { useLocale as Y } from "../config-provider/hooks/use-locale.mjs";
import { useGlobalConfig as Z } from "../config-provider/hooks/use-global-config.mjs";
import { useNamespace as ee } from "../config-provider/hooks/use-namespace.mjs";
import { useResize as te } from "../hooks/useResize.mjs";
import le from "./ap-tag.vue.mjs";
const ye = /* @__PURE__ */ j({
  __name: "ap-tag-group",
  props: {
    list: { default: () => [] },
    space: { default: 4 },
    ellipsisColor: {},
    ellipsis: { default: () => ({}) }
  },
  setup(z) {
    const { t: V } = Y(), o = z, B = X("ApTagGroup"), v = Z("uiMode"), { b: E, bm: h } = ee("tag-group"), r = C(), { observe: D, unobserve: M } = te(), i = n(() => ({
      ...{
        iconColor: v.value === "aplus" ? "#182948" : "#333",
        symbol: "icon",
        text: V("ap.common.more")
      },
      ...o.ellipsis
    })), P = n(() => i.value.tooltip && typeof i.value.tooltip == "object" ? Q(i.value.tooltip, ["trigger", "title"]) : {}), p = n(() => f(c) < o.list.length), c = C(0), N = n(() => o.list.map((e) => e.text).join("、")), R = n(() => [E()].filter(Boolean)), S = n(() => v.value === "aplus" ? [h("ellipsis-text", "aplus")] : [h("ellipsis-text", "admin")]), y = () => {
      let e = 0, l = 0;
      if (!r.value) return;
      const u = r.value.offsetWidth;
      for (let s of o.list) {
        const m = s.size === "small" ? 8 : 12, x = T(
          s.size === "large" ? 14 : 12,
          s.text
        ) + m + o.space;
        if (e += x, e > u) {
          e -= x;
          break;
        }
        l++;
      }
      if (l < o.list.length) {
        const m = T(12, i.value.text);
        o.ellipsis.symbol === "icon" ? e += 16 : e += m, e > u && l--;
      }
      c.value = l;
    };
    G(
      () => o.list,
      (e, l) => {
        e !== l && L(() => {
          y();
        });
      },
      {
        immediate: !0
      }
    );
    const $ = () => {
      y();
    };
    return A(() => {
      [["ellipsisColor", "ellipse.color"]].forEach(
        ([e, l]) => {
          B.deprecated(
            !o[e],
            e,
            l
          );
        }
      ), r.value && D(r.value, $);
    }), F(() => {
      r.value && M(r.value);
    }), (e, l) => (a(), g(f(K), w({ trigger: "hover" }, P.value), {
      title: d(() => [
        H(e.$slots, "tooltip", { tags: e.list }, () => [
          J(W(N.value), 1)
        ])
      ]),
      default: d(() => [
        t("div", {
          ref_key: "container",
          ref: r,
          class: k(R.value),
          style: b({
            pointerEvents: p.value ? "auto" : "none"
            // opacity: isUpdating ? '0' : '1'
          })
        }, [
          (a(!0), _(U, null, q(e.list, (u, s) => (a(), g(le, w({ ref_for: !0 }, u, {
            key: s,
            style: {
              display: s >= c.value ? "none" : "inline-flex",
              marginRight: `${e.space}px`
            }
          }), null, 16, ["style"]))), 128)),
          p.value && i.value.symbol === "icon" ? (a(), g(f(O), {
            key: 0,
            style: b({
              color: e.ellipsisColor || i.value.iconColor,
              cursor: "pointer"
            })
          }, {
            component: d(() => l[0] || (l[0] = [
              t("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"
              }, [
                t("defs", null, [
                  t("clipPath", { id: "master_svg0_1133_24991" }, [
                    t("rect", {
                      x: "0",
                      y: "0",
                      width: "16",
                      height: "16",
                      rx: "0"
                    })
                  ])
                ]),
                t("g", { "clip-path": "url(#master_svg0_1133_24991)" }, [
                  t("g", null, [
                    t("ellipse", {
                      cx: "8",
                      cy: "8",
                      rx: "1",
                      ry: "1",
                      fill: "currentColor",
                      "fill-opacity": "1"
                    })
                  ]),
                  t("g", null, [
                    t("ellipse", {
                      cx: "3.25",
                      cy: "8",
                      rx: "1",
                      ry: "1",
                      fill: "currentColor",
                      "fill-opacity": "1"
                    })
                  ]),
                  t("g", null, [
                    t("ellipse", {
                      cx: "12.75",
                      cy: "8",
                      rx: "1",
                      ry: "1",
                      fill: "currentColor",
                      "fill-opacity": "1"
                    })
                  ])
                ])
              ], -1)
            ])),
            _: 1
          }, 8, ["style"])) : p.value && i.value.symbol === "text" ? (a(), _("span", {
            key: 1,
            class: k(S.value),
            style: { cursor: "pointer" }
          }, W(i.value.text), 3)) : I("", !0)
        ], 6)
      ]),
      _: 3
    }, 16));
  }
});
export {
  ye as default
};