cc-ui-plus/dist/tabs/index.mjs

import { defineComponent as $, openBlock as m, createElementBlock as g, createElementVNode as C, provide as G, renderSlot as S, inject as V, computed as _, onBeforeMount as fe, h as de, createBlock as J, unref as f, withCtx as R, getCurrentInstance as he, ref as w, watch as j, nextTick as B, normalizeClass as y, normalizeStyle as L, createVNode as E, createCommentVNode as T, Fragment as me, renderList as pe, resolveDynamicComponent as ve, toDisplayString as ge, withModifiers as H, useSlots as be, withDirectives as ye, vShow as xe } from "vue";
function D(t, e) {
  return t.install = (n) => {
    n.component(e, t);
  }, t;
}
function N(t, e, n) {
  let o = t;
  return e && (o += `__${e}`), n && (o += `--${n}`), o;
}
function we(t) {
  const e = `cc-${t}`;
  return {
    b: () => N(e),
    e: (l) => l ? N(e, l) : "",
    m: (l) => l ? N(e, "", l) : "",
    em: (l, u) => l && u ? N(e, l, u) : ""
  };
}
const Ce = {
  xmlns: "http://www.w3.org/2000/svg",
  "xmlns:xlink": "http://www.w3.org/1999/xlink",
  viewBox: "0 0 1024 1024"
}, _e = /* @__PURE__ */ C(
  "path",
  {
    d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8L295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512L196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1l216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z",
    fill: "currentColor"
  },
  null,
  -1
), $e = [_e], ke = $({
  name: "CloseOutlined",
  render: function(e, n) {
    return m(), g("svg", Ce, $e);
  }
}), Ee = {
  xmlns: "http://www.w3.org/2000/svg",
  "xmlns:xlink": "http://www.w3.org/1999/xlink",
  viewBox: "0 0 1024 1024"
}, Se = /* @__PURE__ */ C(
  "path",
  {
    d: "M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281l360-281.1c3.8-3 6.1-7.7 6.1-12.6z",
    fill: "currentColor"
  },
  null,
  -1
), Ae = [Se], Te = $({
  name: "LeftOutlined",
  render: function(e, n) {
    return m(), g("svg", Ee, Ae);
  }
}), Be = {
  xmlns: "http://www.w3.org/2000/svg",
  "xmlns:xlink": "http://www.w3.org/1999/xlink",
  viewBox: "0 0 1024 1024"
}, Le = /* @__PURE__ */ C(
  "path",
  {
    d: "M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1l-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z",
    fill: "currentColor"
  },
  null,
  -1
), Ne = [Le], ze = $({
  name: "RightOutlined",
  render: function(e, n) {
    return m(), g("svg", Be, Ne);
  }
});
function Re(t) {
  let e = 0;
  for (let n = 0; n < t.length; ++n)
    t[n] === "&" && ++e;
  return e;
}
const Q = /\s*,(?![^(]*\))\s*/g, je = /\s+/g;
function Ie(t, e) {
  const n = [];
  return e.split(Q).forEach((o) => {
    let r = Re(o);
    if (r) {
      if (r === 1) {
        t.forEach((l) => {
          n.push(o.replace("&", l));
        });
        return;
      }
    } else {
      t.forEach((l) => {
        n.push(
          (l && l + " ") + o
        );
      });
      return;
    }
    let s = [
      o
    ];
    for (; r--; ) {
      const l = [];
      s.forEach((u) => {
        t.forEach((a) => {
          l.push(u.replace("&", a));
        });
      }), s = l;
    }
    s.forEach((l) => n.push(l));
  }), n;
}
function Pe(t, e) {
  const n = [];
  return e.split(Q).forEach((o) => {
    t.forEach((r) => {
      n.push((r && r + " ") + o);
    });
  }), n;
}
function Oe(t) {
  let e = [""];
  return t.forEach((n) => {
    n = n && n.trim(), n && (n.includes("&") ? e = Ie(e, n) : e = Pe(e, n));
  }), e.join(", ").replace(je, " ");
}
const Ve = /[A-Z]/g;
function Y(t) {
  return t.replace(Ve, (e) => "-" + e.toLowerCase());
}
function qe(t, e = "  ") {
  return typeof t == "object" && t !== null ? ` {
` + Object.entries(t).map((n) => e + `  ${Y(n[0])}: ${n[1]};`).join(`
`) + `
` + e + "}" : `: ${t};`;
}
function Me(t, e, n) {
  return typeof t == "function" ? t({
    context: e.context,
    props: n
  }) : t;
}
function U(t, e, n, o) {
  if (!e)
    return "";
  const r = Me(e, n, o);
  if (!r)
    return "";
  if (typeof r == "string")
    return `${t} {
${r}
}`;
  const s = Object.keys(r);
  if (s.length === 0)
    return n.config.keepEmptyBlock ? t + ` {
}` : "";
  const l = t ? [
    t + " {"
  ] : [];
  return s.forEach((u) => {
    const a = r[u];
    if (u === "raw") {
      l.push(`
` + a + `
`);
      return;
    }
    u = Y(u), a != null && l.push(`  ${u}${qe(a)}`);
  }), t && l.push("}"), l.join(`
`);
}
function q(t, e, n) {
  !t || t.forEach((o) => {
    if (Array.isArray(o))
      q(o, e, n);
    else if (typeof o == "function") {
      const r = o(e);
      Array.isArray(r) ? q(r, e, n) : r && n(r);
    } else
      o && n(o);
  });
}
function ee(t, e, n, o, r, s) {
  const l = t.$;
  !l || typeof l == "string" ? e.push(l) : typeof l == "function" ? e.push(l({
    context: o.context,
    props: r
  })) : (l.before && l.before(o.context), !l.$ || typeof l.$ == "string" ? e.push(l.$) : l.$ && e.push(l.$({
    context: o.context,
    props: r
  })));
  const u = Oe(e), a = U(u, t.props, o, r);
  s && a && s.insertRule(a), !s && a.length && n.push(a), t.children && q(t.children, {
    context: o.context,
    props: r
  }, (d) => {
    if (typeof d == "string") {
      const k = U(u, { raw: d }, o, r);
      s ? s.insertRule(k) : n.push(k);
    } else
      ee(d, e, n, o, r, s);
  }), e.pop(), l && l.after && l.after(o.context);
}
function te(t, e, n, o = !1) {
  const r = [];
  return ee(t, [], r, e, n, o ? t.instance.__styleSheet : void 0), o ? "" : r.join(`

`);
}
function We(t) {
  for (var e = 0, n, o = 0, r = t.length; r >= 4; ++o, r -= 4)
    n = t.charCodeAt(o) & 255 | (t.charCodeAt(++o) & 255) << 8 | (t.charCodeAt(++o) & 255) << 16 | (t.charCodeAt(++o) & 255) << 24, n = (n & 65535) * 1540483477 + ((n >>> 16) * 59797 << 16), n ^= n >>> 24, e = (n & 65535) * 1540483477 + ((n >>> 16) * 59797 << 16) ^ (e & 65535) * 1540483477 + ((e >>> 16) * 59797 << 16);
  switch (r) {
    case 3:
      e ^= (t.charCodeAt(o + 2) & 255) << 16;
    case 2:
      e ^= (t.charCodeAt(o + 1) & 255) << 8;
    case 1:
      e ^= t.charCodeAt(o) & 255, e = (e & 65535) * 1540483477 + ((e >>> 16) * 59797 << 16);
  }
  return e ^= e >>> 13, e = (e & 65535) * 1540483477 + ((e >>> 16) * 59797 << 16), ((e ^ e >>> 15) >>> 0).toString(36);
}
function I(t) {
  if (!t)
    return;
  const e = t.parentElement;
  e && e.removeChild(t);
}
function X(t) {
  return document.querySelector(`style[cssr-id="${t}"]`);
}
function De(t) {
  const e = document.createElement("style");
  return e.setAttribute("cssr-id", t), e;
}
window && (window.__cssrContext = {});
function ne(t) {
  const e = t.getAttribute("mount-count");
  return e === null ? null : Number(e);
}
function M(t, e) {
  t.setAttribute("mount-count", String(e));
}
function Z(t, e, n, o) {
  const { els: r } = e;
  if (n === void 0)
    r.forEach(I), e.els = [];
  else {
    const s = X(n);
    if (s && r.includes(s)) {
      const l = ne(s);
      o ? l === null ? console.error(`[css-render/unmount]: The style with target='${n}' is mounted in count mode.`) : l <= 1 ? (I(s), e.els = r.filter((u) => u !== s)) : M(s, l - 1) : l !== null ? console.error(`[css-render/unmount]: The style with target='${n}' is mounted in no-count mode.`) : (I(s), e.els = r.filter((u) => u !== s));
    }
  }
}
function Xe(t, e) {
  t.push(e);
}
function Ke(t, e, n, o, r, s, l, u, a) {
  if (l && !a) {
    if (n === void 0) {
      console.error("[css-render/mount]: `id` is required in `boost` mode.");
      return;
    }
    const b = window.__cssrContext;
    b[n] || (b[n] = !0, te(e, t, o, l));
    return;
  }
  let d;
  const { els: k } = e;
  let p;
  if (n === void 0 && (p = e.render(o), n = We(p)), a) {
    a(n, p != null ? p : e.render(o));
    return;
  }
  const v = X(n);
  if (u || v === null) {
    if (d = v === null ? De(n) : v, p === void 0 && (p = e.render(o)), d.textContent = p, v !== null)
      return;
    if (r) {
      const b = document.head.getElementsByTagName("style")[0] || null;
      document.head.insertBefore(d, b);
    } else
      document.head.appendChild(d);
    s && M(d, 1), Xe(k, d);
  } else {
    const b = ne(v);
    s ? b === null ? console.error(`[css-render/mount]: The style with id='${n}' has been mounted in no-count mode.`) : M(v, b + 1) : b !== null && console.error(`[css-render/mount]: The style with id='${n}' has been mounted in count mode.`);
  }
  return v != null ? v : d;
}
function Fe(t) {
  return te(this, this.instance, t);
}
function He(t = {}) {
  const { target: e, id: n, ssr: o, props: r, count: s = !1, head: l = !1, boost: u = !1, force: a = !1 } = t;
  return Ke(this.instance, this, n != null ? n : e, r, l, s, u, a, o);
}
function Ue(t = {}) {
  const { id: e, target: n, delay: o = 0, count: r = !1 } = t;
  o === 0 ? Z(this.instance, this, e != null ? e : n, r) : setTimeout(() => Z(this.instance, this, e != null ? e : n, r), o);
}
const z = function(t, e, n, o) {
  return {
    instance: t,
    $: e,
    props: n,
    children: o,
    els: [],
    render: Fe,
    mount: He,
    unmount: Ue
  };
}, Ze = function(t, e, n, o) {
  return Array.isArray(e) ? z(t, { $: null }, null, e) : Array.isArray(n) ? z(t, e, null, n) : Array.isArray(o) ? z(t, e, n, o) : z(t, e, n, null);
};
function Ge(t = {}) {
  let e = null;
  const n = {
    c: (...o) => Ze(n, ...o),
    use: (o, ...r) => o.install(n, ...r),
    find: X,
    context: {},
    config: t,
    get __styleSheet() {
      if (!e) {
        const o = document.createElement("style");
        return document.head.appendChild(o), e = document.styleSheets[document.styleSheets.length - 1], e;
      }
      return e;
    }
  };
  return n;
}
const { c: P } = Ge(), Je = P(".xicon", {
  width: "1em",
  height: "1em",
  display: "inline-flex"
}, [
  P("svg", {
    width: "1em",
    height: "1em"
  }),
  P("svg:not([fill])", {
    fill: "currentColor"
  })
]), Qe = () => {
  Je.mount({ id: "xicons-icon" });
}, oe = {
  size: [String, Number],
  color: String,
  tag: String
}, le = Symbol("IconConfigInjection");
$({
  name: "IconConfigProvider",
  props: oe,
  setup(t, { slots: e }) {
    return G(le, t), () => S(e, "default");
  }
});
const Ye = "span", et = $({
  name: "Icon",
  props: oe,
  setup(t, { slots: e }) {
    const n = V(le, null), o = _(() => {
      var l;
      const u = (l = t.size) !== null && l !== void 0 ? l : n == null ? void 0 : n.size;
      if (u !== void 0)
        return typeof u == "number" || /^\d+$/.test(u) ? `${u}px` : u;
    }), r = _(() => {
      const { color: l } = t;
      return l === void 0 ? n ? n.color : void 0 : l;
    }), s = _(() => {
      var l;
      const { tag: u } = t;
      return u === void 0 ? (l = n == null ? void 0 : n.tag) !== null && l !== void 0 ? l : Ye : u;
    });
    return fe(() => {
      Qe();
    }), () => de(s.value, {
      class: "xicon",
      style: {
        color: r.value,
        fontSize: o.value
      }
    }, [
      S(e, "default")
    ]);
  }
}), tt = /* @__PURE__ */ $({
  __name: "icon",
  props: {
    color: { default: "inherit" },
    size: { default: 16 },
    tag: { default: "span" }
  },
  setup(t) {
    return (e, n) => (m(), J(f(et), {
      size: t.size,
      color: t.color,
      tag: t.tag
    }, {
      default: R(() => [
        S(e.$slots, "default")
      ]),
      _: 3
    }, 8, ["size", "color", "tag"]));
  }
}), O = D(tt, "cc-icon"), W = Symbol("TabsProvide"), nt = { style: { overflow: "hidden" } }, ot = ["id", "onClick"], lt = { key: 1 }, rt = ["onClick"], st = ["onClick"], ut = /* @__PURE__ */ $({
  __name: "tabs",
  props: {
    modelValue: null,
    type: { default: "" },
    closable: { type: Boolean, default: !1 },
    addable: { type: Boolean, default: !1 },
    editable: { type: Boolean, default: !1 }
  },
  emits: [
    "update:modelValue",
    "tab-click",
    "tab-remove",
    "tab-change"
  ],
  setup(t, { emit: e }) {
    var F;
    const n = t, o = we("tabs"), r = (F = he()) == null ? void 0 : F.uid, s = w([]), l = w(n.modelValue), u = w(""), a = w(""), d = w(), k = w(), p = w(!1), v = w(0), b = (i) => {
      i.disabled || s.value.push(i);
    }, re = (i, h) => {
      s.value.length === 1 ? (l.value = "", s.value = []) : (h === s.value.length - 1 && h >= 0 && (l.value = s.value[h - 1].name), s.value = s.value.filter((c) => c.name !== i), e("tab-remove", i));
    }, se = (i, h) => {
      i.disabled || (l.value = i.name, K(l.value, !0), e("tab-click", i, h));
    }, K = (i, h = !1) => {
      i && B(() => {
        const c = document.querySelector(`#tab-${i}-${r}`), x = window.getComputedStyle(
          c,
          null
        ), A = Number(x.paddingLeft.replace("px", "")), ce = Number(x.paddingRight.replace("px", "")), ae = Number(x.width.replace("px", ""));
        u.value = `${ae - A - ce}px`, h && (a.value = `${c.offsetLeft + A}px`);
      });
    }, ue = () => {
      v.value = 0;
    }, ie = () => {
      B(() => {
        const i = Number(
          window.getComputedStyle(d.value, null).width.replace("px", "")
        );
        let h = 0;
        for (let c = 0; c < s.value.length; c++)
          h += Number(
            window.getComputedStyle(
              document.querySelector(
                `#tab-${s.value[c].name}-${r}`
              )
            ).width.replace("px", "")
          );
        v.value = -(h - i + 20 * 2);
      });
    };
    return j(
      () => n.modelValue,
      (i) => {
        l.value = i, e("tab-change", i);
      }
    ), j(
      () => l.value,
      (i) => {
        B(() => {
          K(i);
        });
      },
      { immediate: !0 }
    ), j(
      () => s.value,
      (i) => {
        let h = 0;
        B(() => {
          const c = Number(
            window.getComputedStyle(d.value, null).width.replace("px", "")
          );
          i.forEach((x) => {
            h += Number(
              window.getComputedStyle(
                document.querySelector(`#tab-${x.name}-${r}`)
              ).width.replace("px", "")
            );
          }), p.value = h > c;
        });
      },
      { deep: !0 }
    ), G(W, {
      addTabPaneContext: b,
      currentName: _(() => l.value)
    }), (i, h) => (m(), g("div", {
      class: y([f(o).b()])
    }, [
      C("div", {
        ref_key: "wrap",
        ref: d,
        class: y([f(o).e("wrap")]),
        style: L({ padding: p.value ? "0 20px" : "0" })
      }, [
        p.value ? (m(), g("div", {
          key: 0,
          class: y([f(o).e("icon-left")]),
          onClick: ue
        }, [
          E(f(O), null, {
            default: R(() => [
              E(f(Te))
            ]),
            _: 1
          })
        ], 2)) : T("", !0),
        C("div", nt, [
          C("div", {
            ref_key: "label",
            ref: k,
            class: y([f(o).e("label")]),
            style: L({ transform: `translateX(${v.value}px)` })
          }, [
            t.type ? T("", !0) : (m(), g("div", {
              key: 0,
              class: y([f(o).e("active-bar")]),
              style: L({
                width: u.value,
                transform: `translateX(${a.value})`
              })
            }, null, 6)),
            (m(!0), g(me, null, pe(s.value, (c, x) => (m(), g("div", {
              id: `tab-${c.name}-${f(r)}`,
              key: c.name,
              class: y([
                f(o).e("label-item"),
                f(o).m(`${t.type}`),
                ,
                { "is-disabled": c.disabled }
              ]),
              style: L({
                color: c.name === l.value ? "var(--cc-color-primary)" : "inherit",
                paddingLeft: x === 0 && !t.type ? 0 : "12px"
              }),
              onClick: (A) => se(c, A)
            }, [
              c.slot ? (m(), J(ve(c.slot), { key: 0 })) : (m(), g("span", lt, ge(c.label), 1)),
              t.closable || c.closable ? (m(), g("div", {
                key: 2,
                class: y([f(o).e("close-btn")]),
                onClick: H((A) => re(c.name, x), ["stop"])
              }, [
                E(f(O), null, {
                  default: R(() => [
                    E(f(ke))
                  ]),
                  _: 1
                })
              ], 10, rt)) : T("", !0)
            ], 14, ot))), 128))
          ], 6)
        ]),
        p.value ? (m(), g("div", {
          key: 1,
          class: y([f(o).e("icon-right")]),
          onClick: H(ie, ["stop"])
        }, [
          E(f(O), null, {
            default: R(() => [
              E(f(ze))
            ]),
            _: 1
          })
        ], 10, st)) : T("", !0)
      ], 6),
      C("div", {
        class: y([f(o).e("content")])
      }, [
        S(i.$slots, "default")
      ], 2)
    ], 2));
  }
}), it = { style: { display: "none" } }, ct = /* @__PURE__ */ $({
  __name: "tab-pane",
  props: {
    label: { default: "" },
    name: null,
    disabled: { type: Boolean, default: !1 },
    closable: { type: Boolean, default: !1 }
  },
  setup(t) {
    var r, s;
    const e = t, n = (r = V(W)) == null ? void 0 : r.addTabPaneContext, o = (s = V(W)) == null ? void 0 : s.currentName;
    return n({
      label: _(() => e.label).value,
      name: _(() => e.name).value,
      disabled: _(() => e.disabled).value,
      closable: _(() => e.closable).value,
      slot: be().label
    }), (l, u) => ye((m(), g("div", null, [
      S(l.$slots, "default"),
      C("div", it, [
        l.$slots.label ? S(l.$slots, "label", { key: 0 }) : T("", !0)
      ])
    ], 512)), [
      [xe, f(o) === t.name]
    ]);
  }
}), at = D(ut, "cc-tabs"), ft = D(ct, "cc-tab-pane"), ht = {
  Tabs: at,
  TabPane: ft
};
export {
  ht as default
};