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

Farris Vue, a Farris Design based Vue3 component library.

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