@farris/ui-vue/components/capsule/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { withInstall as N } from "../common/index.esm.js";
import { defineComponent as O, ref as u, watch as b, computed as o, onMounted as w, createVNode as r, nextTick as A } from "vue";
const P = {
  items: {
    Type: Array,
    default: [
      { name: "升序", value: "asc", icon: "f-icon f-icon-col-ascendingorder" },
      { name: "降序", value: "desc", icon: "f-icon f-icon-col-descendingorder" }
    ]
  },
  /**
   * 组件值
   */
  modelValue: { type: String, default: "" },
  type: { type: String, default: "primary" }
}, T = {
  name: { type: String, default: "" },
  value: { type: String, default: "" },
  isActive: { type: Boolean, default: !1 },
  icon: { type: String, default: "" },
  index: { type: Number, default: 0 },
  show: { type: Boolean, default: !0 },
  disabled: { type: Boolean, default: !1 },
  minWidth: { type: Number, default: 20 }
}, L = /* @__PURE__ */ O({
  name: "FCapsuleItem",
  props: T,
  emits: ["mounted", "active"],
  setup(a, v) {
    const c = u(), d = u(a.isActive);
    b(() => a.isActive, (n) => {
      d.value = n;
    });
    const m = o(() => ({
      "f-capsule-item": !0,
      "f-capsule-active-item": d.value,
      "f-capsule-disabled": a.disabled
    })), s = o(() => ({
      minWidth: `${a.minWidth}px`
    }));
    w(() => {
      v.emit("mounted", c, a.value);
    });
    function p(n) {
      a.disabled || v.emit("active", n, {
        name: a.name,
        value: a.value
      });
    }
    return () => r("div", {
      ref: c,
      class: m.value,
      style: s.value,
      onClick: (n) => p(n)
    }, [a.icon && r("i", {
      class: a.icon
    }, null), a.name]);
  }
}), q = /* @__PURE__ */ O({
  name: "FCapsule",
  props: P,
  emits: ["change", "update:modelValue"],
  setup(a, v) {
    const c = u(a.items), d = u(), m = 2, s = u(a.modelValue), p = u("none"), n = u(a.type), x = o(() => {
      const e = {
        "f-capsule-container": !0
      };
      return n.value && (e[n.value] = !0), e;
    }), S = o(() => ({})), V = o(() => ({
      "f-capsule": !0
    })), h = u(m), I = u(0), y = u(0), W = o(() => ({
      left: `${h.value}px`,
      width: `${I.value}px`,
      transition: p.value
    })), B = o(() => ({
      width: y.value ? `${y.value}px` : "100%"
    })), i = /* @__PURE__ */ new Map();
    function R(e) {
      var t;
      if (i.has(e.value)) {
        const l = (t = i.get(e.value)) == null ? void 0 : t.value;
        if (l) {
          const f = l.clientWidth > 0 ? 0 : 100;
          setTimeout(() => {
            const j = l.getBoundingClientRect(), E = d.value.getBoundingClientRect();
            h.value = j.left - E.left + m + d.value.scrollLeft, I.value = j.width - 2 * m;
          }, f);
        }
      }
    }
    function g(e, t) {
      const l = e.value;
      s.value = l, v.emit("update:modelValue", l), R(e), t && v.emit("change", l);
    }
    function C(e) {
      const t = c.value.findIndex((l) => l.value === e);
      t > -1 && g(c.value[t], !1);
    }
    b(() => a.modelValue, (e) => {
      s.value = e, C(s.value);
    }), w(async () => {
      C(s.value), await A(), p.value = "0.1s ease-out all", y.value = Array.from(i.values()).reduce((e, t) => (e += t.value.clientWidth, e), 0);
    });
    function k(e, t) {
      g(t, !0);
    }
    function F(e, t) {
      i.set(t, e);
    }
    function M(e) {
      Array.from(i.keys()).forEach((t) => {
        e.find((f) => f.value === t) || i.delete(t);
      });
    }
    function $(e, t) {
      return r(L, {
        name: e.name,
        value: e.value,
        isActive: e.value === s.value,
        index: t,
        disabled: e.disabled,
        minWidth: e.minWidth,
        key: e.value,
        onMounted: F,
        onActive: k
      }, null);
    }
    return b(() => a.items, async (e) => {
      const t = e.filter((l) => l.show);
      M(t), c.value = t, await A(), C(s.value), y.value = Array.from(i.values()).reduce((l, f) => (l += f.value.clientWidth, l), 0);
    }), () => r("span", {
      ref: d,
      class: x.value,
      style: S.value
    }, [r("span", {
      class: "f-capsule-pane"
    }, [c.value.map((e, t) => $(e, t))]), r("small", {
      class: V.value,
      style: W.value
    }, null), r("div", {
      class: "f-capsule-board",
      style: B.value
    }, null)]);
  }
}), G = N(q);
export {
  q as FCapsule,
  T as capsuleItemProps,
  P as capsuleProps,
  G as default
};