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

Farris Vue, a Farris Design based Vue3 component library.

import { withInstall as P } from "../common/index.esm.js";
import { defineComponent as j, ref as n, watch as C, computed as v, onMounted as w, createVNode as o, nextTick as A } from "vue";
const W = {
  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" }
}, N = {
  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 }
}, T = /* @__PURE__ */ j({
  name: "FCapsuleItem",
  props: N,
  emits: ["mounted", "active"],
  setup(a, f) {
    const c = n(), r = n(a.isActive);
    C(() => a.isActive, (u) => {
      r.value = u;
    });
    const m = v(() => ({
      "f-capsule-item": !0,
      "f-capsule-active-item": r.value,
      "f-capsule-disabled": a.disabled
    }));
    w(() => {
      f.emit("mounted", c, a.value);
    });
    function s(u) {
      a.disabled || f.emit("active", u, {
        name: a.name,
        value: a.value
      });
    }
    return () => o("div", {
      ref: c,
      class: m.value,
      onClick: (u) => s(u)
    }, [a.icon && o("i", {
      class: a.icon
    }, null), a.name]);
  }
}), L = /* @__PURE__ */ j({
  name: "FCapsule",
  props: W,
  emits: ["change", "update:modelValue"],
  setup(a, f) {
    const c = n(a.items), r = n(), m = 2, s = n(a.modelValue), u = n("none"), I = n(a.type), O = v(() => {
      const e = {
        "f-capsule-container": !0
      };
      return I.value && (e[I.value] = !0), e;
    }), x = v(() => ({})), S = v(() => ({
      "f-capsule": !0
    })), b = n(m), h = n(0), p = n(0), V = v(() => ({
      left: `${b.value}px`,
      width: `${h.value}px`,
      transition: u.value
    })), B = v(() => ({
      width: `${p.value}px`
    })), 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 d = l.getBoundingClientRect(), $ = r.value.getBoundingClientRect();
          b.value = d.left - $.left + m + r.value.scrollLeft, h.value = d.width - 2 * m;
        }
      }
    }
    function g(e, t) {
      const l = e.value;
      s.value = l, f.emit("update:modelValue", l), R(e), t && f.emit("change", l);
    }
    function y(e) {
      const t = c.value.findIndex((l) => l.value === e);
      t > -1 && g(c.value[t], !1);
    }
    C(() => a.modelValue, (e) => {
      s.value = e, y(s.value);
    }), w(async () => {
      y(s.value), await A(), u.value = "0.1s ease-out all", p.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((d) => d.value === t) || i.delete(t);
      });
    }
    function E(e, t) {
      return o(T, {
        name: e.name,
        value: e.value,
        isActive: e.value === s.value,
        index: t,
        disabled: e.disabled,
        key: e.value,
        onMounted: F,
        onActive: k
      }, null);
    }
    return C(() => a.items, async (e) => {
      const t = e.filter((l) => l.show);
      M(t), c.value = t, await A(), y(s.value), p.value = Array.from(i.values()).reduce((l, d) => (l += d.value.clientWidth, l), 0);
    }), () => o("span", {
      ref: r,
      class: O.value,
      style: x.value
    }, [o("span", {
      class: "f-capsule-pane"
    }, [c.value.map((e, t) => E(e, t))]), o("small", {
      class: S.value,
      style: V.value
    }, null), o("div", {
      class: "f-capsule-board",
      style: B.value
    }, null)]);
  }
}), D = P(L);
export {
  L as FCapsule,
  N as capsuleItemProps,
  W as capsuleProps,
  D as default
};