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

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as C, ref as y, watch as D, computed as M, onMounted as k, createVNode as A, nextTick as E, inject as X } from "vue";
import { isPlainObject as L, cloneDeep as W } from "lodash-es";
import { withInstall as Y } from "../common/index.esm.js";
const Z = "https://json-schema.org/draft/2020-12/schema", I = "https://farris-design.gitee.io/capsule.schema.json", K = "capsule", x = "A Farris Component", ee = "object", te = {
  id: {
    description: "The unique identifier for a capsule",
    type: "string"
  },
  type: {
    description: "The type string of capsule component",
    type: "string",
    default: "capsule"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  disable: {
    type: "string",
    default: !1
  },
  editable: {
    description: "",
    type: "boolean",
    default: !0
  },
  placeholder: {
    description: "",
    type: "string",
    default: ""
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  require: {
    description: "",
    type: "boolean",
    default: !1
  },
  tabindex: {
    description: "",
    type: "number",
    default: -1
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  }
}, ne = [
  "id",
  "type"
], ae = {
  $schema: Z,
  $id: I,
  title: K,
  description: x,
  type: ee,
  properties: te,
  required: ne
}, _ = {}, H = {};
function F(n) {
  const { properties: e, title: o, ignore: l } = n, c = l && Array.isArray(l), r = Object.keys(e).reduce((i, g) => ((!c || !l.find((j) => j === g)) && (i[g] = e[g].type === "object" && e[g].properties ? F(e[g]) : W(e[g].default)), i), {});
  if (o && (!c || !l.find((i) => i === "id"))) {
    const i = o.toLowerCase().replace(/-/g, "_");
    r.id = `${i}_${Math.random().toString().slice(2, 6)}`;
  }
  return r;
}
function se(n) {
  const { properties: e, title: o, required: l } = n;
  if (l && Array.isArray(l)) {
    const c = l.reduce((r, i) => (r[i] = e[i].type === "object" && e[i].properties ? F(e[i]) : W(e[i].default), r), {});
    if (o && l.find((r) => r === "id")) {
      const r = o.toLowerCase().replace(/-/g, "_");
      c.id = `${r}_${Math.random().toString().slice(2, 6)}`;
    }
    return c;
  }
  return {
    type: o
  };
}
function z(n, e = {}, o) {
  const l = _[n];
  if (l) {
    let c = se(l);
    const r = H[n];
    return c = r ? r({ getSchemaByType: z }, c, e, o) : c, c;
  }
  return null;
}
function le(n, e) {
  const o = F(e);
  return Object.keys(o).reduce((l, c) => (Object.prototype.hasOwnProperty.call(n, c) && (l[c] && L(l[c]) && L(n[c] || !n[c]) ? Object.assign(l[c], n[c] || {}) : l[c] = n[c]), l), o), o;
}
function G(n, e) {
  return Object.keys(n).filter((l) => n[l] != null).reduce((l, c) => {
    if (e.has(c)) {
      const r = e.get(c);
      if (typeof r == "string")
        l[r] = n[c];
      else {
        const i = r(c, n[c], n);
        Object.assign(l, i);
      }
    } else
      l[c] = n[c];
    return l;
  }, {});
}
function ce(n, e, o = /* @__PURE__ */ new Map()) {
  const l = le(n, e);
  return G(l, o);
}
function re(n = {}) {
  function e(u, f, p, v) {
    if (typeof p == "number")
      return v[u].length === p;
    if (typeof p == "object") {
      const h = Object.keys(p)[0], b = p[h];
      if (h === "not")
        return Number(v[u].length) !== Number(b);
      if (h === "moreThan")
        return Number(v[u].length) >= Number(b);
      if (h === "lessThan")
        return Number(v[u].length) <= Number(b);
    }
    return !1;
  }
  function o(u, f, p, v) {
    return v[u] && v[u].propertyValue && String(v[u].propertyValue.value) === String(p);
  }
  const l = /* @__PURE__ */ new Map([
    ["length", e],
    ["getProperty", o]
  ]);
  Object.keys(n).reduce((u, f) => (u.set(f, n[f]), u), l);
  function c(u, f) {
    const p = u;
    return typeof f == "number" ? [{ target: p, operator: "length", param: null, value: Number(f) }] : typeof f == "boolean" ? [{ target: p, operator: "getProperty", param: u, value: !!f }] : typeof f == "object" ? Object.keys(f).map((v) => {
      if (v === "length")
        return { target: p, operator: "length", param: null, value: f[v] };
      const h = v, b = f[v];
      return { target: p, operator: "getProperty", param: h, value: b };
    }) : [];
  }
  function r(u) {
    return Object.keys(u).reduce((p, v) => {
      const h = c(v, u[v]);
      return p.push(...h), p;
    }, []);
  }
  function i(u, f) {
    if (l.has(u.operator)) {
      const p = l.get(u.operator);
      return p && p(u.target, u.param, u.value, f) || !1;
    }
    return !1;
  }
  function g(u, f) {
    return r(u).reduce((h, b) => h && i(b, f), !0);
  }
  function j(u, f) {
    const p = Object.keys(u), v = p.includes("allOf"), h = p.includes("anyOf"), b = v || h, B = (b ? u[b ? v ? "allOf" : "anyOf" : "allOf"] : [u]).map((R) => g(R, f));
    return v ? !B.includes(!1) : B.includes(!0);
  }
  return { parseValueSchema: j };
}
const ue = {}, oe = {};
re();
function ie(n, e, o = /* @__PURE__ */ new Map(), l = (i, g, j, u) => g, c = {}, r = (i) => i) {
  return _[e.title] = e, H[e.title] = l, ue[e.title] = c, oe[e.title] = r, (i = {}, g = !0) => {
    if (!g)
      return G(i, o);
    const j = ce(i, e, o), u = Object.keys(n).reduce((f, p) => (f[p] = n[p].default, f), {});
    return Object.assign(u, j);
  };
}
function pe(n, e) {
  return { customClass: e.class, customStyle: e.style };
}
const fe = /* @__PURE__ */ new Map([
  ["appearance", pe]
]);
function de(n, e, o) {
  return e;
}
const ve = "capsule", me = "A Farris Component", ye = "object", he = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, ge = {
  title: ve,
  description: me,
  type: ye,
  categories: he
}, q = {
  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" }
}, be = {
  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 }
}, J = ie(q, ae, fe, de, ge), Q = /* @__PURE__ */ C({
  name: "FCapsuleItem",
  props: be,
  emits: ["mounted", "active"],
  setup(n, e) {
    const o = y(), l = y(n.isActive);
    D(() => n.isActive, (i) => {
      l.value = i;
    });
    const c = M(() => ({
      "f-capsule-item": !0,
      "f-capsule-active-item": l.value,
      "f-capsule-disabled": n.disabled
    }));
    k(() => {
      e.emit("mounted", o, n.value);
    });
    function r(i) {
      n.disabled || e.emit("active", i, {
        name: n.name,
        value: n.value
      });
    }
    return () => A("div", {
      ref: o,
      class: c.value,
      onClick: (i) => r(i)
    }, [n.icon && A("i", {
      class: n.icon
    }, null), n.name]);
  }
}), N = /* @__PURE__ */ C({
  name: "FCapsule",
  props: q,
  emits: ["change", "update:modelValue"],
  setup(n, e) {
    const o = y(n.items), l = y(), c = 2, r = y(n.modelValue), i = y("none"), g = y(n.type), j = M(() => {
      const a = {
        "f-capsule-container": !0
      };
      return g.value && (a[g.value] = !0), a;
    }), u = M(() => ({})), f = M(() => ({
      "f-capsule": !0
    })), p = y(c), v = y(0), h = y(0), b = M(() => ({
      left: `${p.value}px`,
      width: `${v.value}px`,
      transition: i.value
    })), S = M(() => ({
      width: `${h.value}px`
    })), O = /* @__PURE__ */ new Map();
    function B(a) {
      var t;
      if (O.has(a.value)) {
        const s = (t = O.get(a.value)) == null ? void 0 : t.value;
        if (s) {
          const m = s.getBoundingClientRect(), T = l.value.getBoundingClientRect();
          p.value = m.left - T.left + c + l.value.scrollLeft, v.value = m.width - 2 * c;
        }
      }
    }
    function w(a, t) {
      const s = a.value;
      r.value = s, e.emit("update:modelValue", s), B(a), t && e.emit("change", s);
    }
    function R(a) {
      const t = o.value.findIndex((s) => s.value === a);
      t > -1 && w(o.value[t], !1);
    }
    D(() => n.modelValue, (a) => {
      r.value = a, R(r.value);
    }), k(async () => {
      R(r.value), await E(), i.value = "0.1s ease-out all", h.value = Array.from(O.values()).reduce((a, t) => (a += t.value.clientWidth, a), 0);
    });
    function $(a, t) {
      w(t, !0);
    }
    function P(a, t) {
      O.set(t, a);
    }
    function V(a) {
      Array.from(O.keys()).forEach((t) => {
        a.find((m) => m.value === t) || O.delete(t);
      });
    }
    function d(a, t) {
      return A(Q, {
        name: a.name,
        value: a.value,
        isActive: a.value === r.value,
        index: t,
        disabled: a.disabled,
        key: a.value,
        onMounted: P,
        onActive: $
      }, null);
    }
    return D(() => n.items, async (a) => {
      const t = a.filter((s) => s.show);
      V(t), o.value = t, await E(), R(r.value), h.value = Array.from(O.values()).reduce((s, m) => (s += m.value.clientWidth, s), 0);
    }), () => A("span", {
      ref: l,
      class: j.value,
      style: u.value
    }, [A("span", {
      class: "f-capsule-pane"
    }, [o.value.map((a, t) => d(a, t))]), A("small", {
      class: f.value,
      style: b.value
    }, null), A("div", {
      class: "f-capsule-board",
      style: S.value
    }, null)]);
  }
});
function je(n, e, o) {
  var V;
  const l = "", c = "", r = y();
  function i() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function g() {
    return !1;
  }
  function j() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function u() {
    return (e == null ? void 0 : e.schema.componentType) === "frame";
  }
  function f(d) {
    if (!d || !d.value)
      return null;
    if (d.value.schema && d.value.schema.type === "component")
      return d.value;
    const a = y(d == null ? void 0 : d.value.parent), t = f(a);
    return t || null;
  }
  function p(d = e) {
    var m;
    const { componentInstance: a, designerItemElementRef: t } = d;
    if (!a || !a.value)
      return null;
    const { getCustomButtons: s } = a.value;
    return a.value.canMove || s && ((m = s()) != null && m.length) ? t : p(d.parent);
  }
  function v(d) {
    return !!o;
  }
  function h() {
    return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
  }
  function b() {
  }
  function S(d, a) {
    var t;
    !d || !a || (t = e == null ? void 0 : e.setupContext) == null || t.emit("dragEnd");
  }
  function O(d, a) {
    const { componentType: t } = d;
    let s = z(t, d, a);
    const m = t.toLowerCase().replace(/-/g, "_");
    return s && !s.id && s.type === t && (s.id = `${m}_${Math.random().toString().slice(2, 6)}`), s;
  }
  function B(d) {
  }
  function w(...d) {
  }
  function R() {
    e != null && e.schema.contents && e.schema.contents.map((d) => {
      let a = d.id;
      d.type === "component-ref" && (a = d.component);
      const t = n.value.querySelectorAll(`#${a}-design-item`);
      t != null && t.length && Array.from(t).map((s) => {
        var m;
        (m = s == null ? void 0 : s.componentInstance) != null && m.value.onRemoveComponent && s.componentInstance.value.onRemoveComponent();
      });
    });
  }
  function $() {
  }
  function P(d) {
  }
  return r.value = {
    canMove: i(),
    canSelectParent: g(),
    canDelete: j(),
    canNested: !u(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: n,
    parent: (V = e == null ? void 0 : e.parent) == null ? void 0 : V.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: l,
    designerClass: c,
    canAccepts: v,
    getBelongedComponentInstance: f,
    getDraggableDesignItemElement: p,
    getDraggingDisplayText: h,
    getPropConfig: w,
    getDragScopeElement: b,
    onAcceptMovedChildElement: S,
    onChildElementMovedOut: B,
    addNewChildComponentSchema: O,
    triggerBelongedComponentToMoveWhenMoved: y(!1),
    triggerBelongedComponentToDeleteWhenDeleted: y(!1),
    onRemoveComponent: R,
    getCustomButtons: $,
    onPropertyChanged: P
  }, r;
}
const Oe = /* @__PURE__ */ C({
  name: "FCapsuleDesign",
  props: q,
  emits: ["change", "update:modelValue"],
  setup(n, e) {
    const o = y(n.items), l = y(), c = 2, r = y(n.modelValue), i = y("none"), g = y(n.type), j = X("design-item-context"), u = je(l, j);
    k(() => {
      l.value.componentInstance = u;
    }), e.expose(u.value);
    const f = M(() => {
      const t = {
        "f-capsule-container": !0
      };
      return g.value && (t[g.value] = !0), t;
    }), p = M(() => ({})), v = M(() => ({
      "f-capsule": !0
    })), h = y(c), b = y(0), S = y(0), O = M(() => ({
      left: `${h.value}px`,
      width: `${b.value}px`,
      transition: i.value
    })), B = M(() => ({
      width: `${S.value}px`
    })), w = /* @__PURE__ */ new Map();
    function R(t) {
      var s;
      if (w.has(t.value)) {
        const m = (s = w.get(t.value)) == null ? void 0 : s.value;
        if (m) {
          const T = m.getBoundingClientRect(), U = l.value.getBoundingClientRect();
          h.value = T.left - U.left + c + l.value.scrollLeft, b.value = T.width - 2 * c;
        }
      }
    }
    function $(t, s) {
      const m = t.value;
      r.value = m, e.emit("update:modelValue", m), R(t), s && e.emit("change", m);
    }
    function P(t) {
      const s = o.value.findIndex((m) => m.value === t);
      s > -1 && $(o.value[s], !1);
    }
    D(() => n.modelValue, (t) => {
      r.value = t, P(r.value);
    }), D(() => n.items, async (t) => {
      o.value = t, await E(), P(r.value), S.value = Array.from(w.values()).reduce((s, m) => (s += m.value.clientWidth, s), 0);
    }), k(async () => {
      P(r.value), await E(), i.value = "0.1s ease-out all", S.value = Array.from(w.values()).reduce((t, s) => (t += s.value.clientWidth, t), 0);
    });
    function V(t, s) {
      $(s, !0);
    }
    function d(t, s) {
      w.set(s, t);
    }
    function a(t, s) {
      return A(Q, {
        name: t.name,
        value: t.value,
        isActive: t.value === r.value,
        index: s,
        onMounted: d,
        onActive: V
      }, null);
    }
    return () => A("span", {
      ref: l,
      class: f.value,
      style: p.value
    }, [A("span", {
      class: "f-capsule-pane"
    }, [o.value.map((t, s) => a(t, s))]), A("small", {
      class: v.value,
      style: O.value
    }, null), A("div", {
      class: "f-capsule-board",
      style: B.value
    }, null)]);
  }
});
N.register = (n, e, o) => {
  n.capsule = N, e.capsule = J;
};
N.registerDesigner = (n, e, o) => {
  n.capsule = Oe, e.capsule = J;
};
const Se = Y(N);
export {
  N as FCapsule,
  be as capsuleItemProps,
  q as capsuleProps,
  Se as default,
  J as propsResolver
};