@farris/ui-vue/components/verify-detail/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

var Q = Object.defineProperty;
var X = (n, e, l) => e in n ? Q(n, e, { enumerable: !0, configurable: !0, writable: !0, value: l }) : n[e] = l;
var $ = (n, e, l) => X(n, typeof e != "symbol" ? e + "" : e, l);
import { defineComponent as V, ref as T, computed as M, createVNode as s, onBeforeMount as q, createApp as Y, onUnmounted as Z, inject as K, onMounted as x } from "vue";
import { isPlainObject as H, cloneDeep as F } from "lodash-es";
const _ = {}, C = {};
function N(n) {
  const { properties: e, title: l, ignore: i } = n, c = i && Array.isArray(i), f = Object.keys(e).reduce((h, y) => ((!c || !i.find((D) => D === y)) && (h[y] = e[y].type === "object" && e[y].properties ? N(e[y]) : F(e[y].default)), h), {});
  if (l && (!c || !i.find((h) => h === "id"))) {
    const h = l.toLowerCase().replace(/-/g, "_");
    f.id = `${h}_${Math.random().toString().slice(2, 6)}`;
  }
  return f;
}
function I(n) {
  const { properties: e, title: l, required: i } = n;
  if (i && Array.isArray(i)) {
    const c = i.reduce((f, h) => (f[h] = e[h].type === "object" && e[h].properties ? N(e[h]) : F(e[h].default), f), {});
    if (l && i.find((f) => f === "id")) {
      const f = l.toLowerCase().replace(/-/g, "_");
      c.id = `${f}_${Math.random().toString().slice(2, 6)}`;
    }
    return c;
  }
  return {
    type: l
  };
}
function W(n, e = {}, l) {
  const i = _[n];
  if (i) {
    let c = I(i);
    const f = C[n];
    return c = f ? f({ getSchemaByType: W }, c, e, l) : c, c;
  }
  return null;
}
function ee(n, e) {
  const l = N(e);
  return Object.keys(l).reduce((i, c) => (Object.prototype.hasOwnProperty.call(n, c) && (i[c] && H(i[c]) && H(n[c] || !n[c]) ? Object.assign(i[c], n[c] || {}) : i[c] = n[c]), i), l), l;
}
function U(n, e) {
  return Object.keys(n).filter((i) => n[i] != null).reduce((i, c) => {
    if (e.has(c)) {
      const f = e.get(c);
      if (typeof f == "string")
        i[f] = n[c];
      else {
        const h = f(c, n[c], n);
        Object.assign(i, h);
      }
    } else
      i[c] = n[c];
    return i;
  }, {});
}
function te(n, e, l = /* @__PURE__ */ new Map()) {
  const i = ee(n, e);
  return U(i, l);
}
function ne(n = {}) {
  function e(u, v, p, d) {
    if (typeof p == "number")
      return d[u].length === p;
    if (typeof p == "object") {
      const g = Object.keys(p)[0], b = p[g];
      if (g === "not")
        return Number(d[u].length) !== Number(b);
      if (g === "moreThan")
        return Number(d[u].length) >= Number(b);
      if (g === "lessThan")
        return Number(d[u].length) <= Number(b);
    }
    return !1;
  }
  function l(u, v, p, d) {
    return d[u] && d[u].propertyValue && String(d[u].propertyValue.value) === String(p);
  }
  const i = /* @__PURE__ */ new Map([
    ["length", e],
    ["getProperty", l]
  ]);
  Object.keys(n).reduce((u, v) => (u.set(v, n[v]), u), i);
  function c(u, v) {
    const p = u;
    return typeof v == "number" ? [{ target: p, operator: "length", param: null, value: Number(v) }] : typeof v == "boolean" ? [{ target: p, operator: "getProperty", param: u, value: !!v }] : typeof v == "object" ? Object.keys(v).map((d) => {
      if (d === "length")
        return { target: p, operator: "length", param: null, value: v[d] };
      const g = d, b = v[d];
      return { target: p, operator: "getProperty", param: g, value: b };
    }) : [];
  }
  function f(u) {
    return Object.keys(u).reduce((p, d) => {
      const g = c(d, u[d]);
      return p.push(...g), p;
    }, []);
  }
  function h(u, v) {
    if (i.has(u.operator)) {
      const p = i.get(u.operator);
      return p && p(u.target, u.param, u.value, v) || !1;
    }
    return !1;
  }
  function y(u, v) {
    return f(u).reduce((g, b) => g && h(b, v), !0);
  }
  function D(u, v) {
    const p = Object.keys(u), d = p.includes("allOf"), g = p.includes("anyOf"), b = d || g, L = (b ? u[b ? d ? "allOf" : "anyOf" : "allOf"] : [u]).map((O) => y(O, v));
    return d ? !L.includes(!1) : L.includes(!0);
  }
  return { parseValueSchema: D };
}
const ie = {}, re = {};
ne();
function se(n, e, l = /* @__PURE__ */ new Map(), i = (h, y, D, u) => y, c = {}, f = (h) => h) {
  return _[e.title] = e, C[e.title] = i, ie[e.title] = c, re[e.title] = f, (h = {}, y = !0) => {
    if (!y)
      return U(h, l);
    const D = te(h, e, l), u = Object.keys(n).reduce((v, p) => (v[p] = n[p].default, v), {});
    return Object.assign(u, D);
  };
}
function le(n, e) {
  return { customClass: e.class, customStyle: e.style };
}
const ae = /* @__PURE__ */ new Map([
  ["appearance", le]
]);
function oe(n, e, l) {
  return e;
}
const ce = "https://json-schema.org/draft/2020-12/schema", ue = "https://farris-design.gitee.io/verify-detail.schema.json", fe = "verify-detail", pe = "A Farris Component", ve = "object", ye = {
  id: {
    description: "The unique identifier for verify-detail",
    type: "string"
  },
  type: {
    description: "The type string of verify-detail",
    type: "string",
    default: "verify-detail"
  },
  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
  }
}, he = [
  "id",
  "type"
], de = {
  $schema: ce,
  $id: ue,
  title: fe,
  description: pe,
  type: ve,
  properties: ye,
  required: he
}, me = "verify-detail", ge = "A Farris Component", we = "object", be = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  }
}, Te = {
  title: me,
  description: ge,
  type: we,
  categories: be
}, B = {
  /** 表单验证默认显示的分组信息 */
  showType: { type: String, default: "" },
  /** 是否默认显示验证信息列表 */
  showList: { type: Boolean, default: !1 },
  /** 表单验证列表 */
  verifyList: {
    type: Array,
    default: [
      {
        id: "111",
        title: "单据信息[销售组织]",
        msg: "字段值不能为空",
        type: "empty"
      },
      {
        id: "222",
        title: "单据信息[销售组织]",
        msg: "字段值不能为空",
        type: "empty"
      }
    ]
  },
  verifyType: {
    type: Array,
    default: [
      {
        id: "vertifyType1",
        type: "all",
        title: "全部"
      },
      {
        id: "vertifyType3",
        type: "empty",
        title: "值为空"
      }
    ]
  },
  customClass: { type: String, default: "" },
  maxHeight: { type: Number, default: 200 }
}, R = se(B, de, ae, oe, Te), E = /* @__PURE__ */ V({
  name: "FVerifyDetail",
  props: B,
  emits: ["validatorClick", "listshow"],
  setup(n, e) {
    let l = [];
    const i = T(n.showList), c = T(n.maxHeight), f = T(n.verifyList), h = T(n.showType), y = T(n.verifyType), D = T(n.customClass);
    function u() {
      i.value = !i.value, e.emit("listshow", i.value);
    }
    function v(r) {
      var a;
      !r && y.value && y.value.length > 0 && (r = y.value[0].type), (a = y.value) == null || a.forEach((t) => {
        t.active = t.type === r;
      });
    }
    function p(r) {
      r = r || l[0].type, l.forEach((a) => {
        a.show = a.type === r;
      });
    }
    function d(r) {
      r.length <= 0 || (v(r.type), p(r.type));
    }
    function g() {
      i.value = !1, e.emit("listshow", !1);
    }
    function b(r) {
      e.emit("validatorClick", r);
    }
    function j(r) {
      return s("li", {
        class: "f-verify-list",
        onClick: () => b(r)
      }, [s("span", {
        class: ["f-icon f-icon-close-outline list-icon list-error", {
          "list-warning": r.type === "warn"
        }]
      }, null), s("div", {
        class: "list-con"
      }, [s("p", {
        class: "list-title",
        title: r.title
      }, [r.title]), s("p", {
        class: "list-msg",
        title: r.msg
      }, [r.msg])])]);
    }
    function k() {
      return l.map((r) => s("ul", {
        class: ["f-verify-list-content", {
          active: r.show
        }]
      }, [r.list && r.list.map((a) => j(a))]));
    }
    const L = M(() => {
      var r;
      return ((r = f.value) == null ? void 0 : r.length) > 0;
    });
    function S(r) {
      return {
        btn: !0,
        "verify-title-btn": !0,
        "f-state-selected": r.active,
        disabled: r.length <= 0
      };
    }
    const O = M(() => {
      var r;
      return (r = y.value) == null ? void 0 : r.map((a) => s("button", {
        class: S(a),
        onClick: () => d(a)
      }, [a.title, s("span", null, [a.length])]));
    }), P = M(() => {
      var r;
      return s("div", {
        class: "f-verify-nums",
        onClick: u
      }, [s("span", {
        class: "nums-icon f-icon f-icon-warning"
      }, null), s("span", {
        class: "nums-count"
      }, [(r = f.value) == null ? void 0 : r.length])]);
    });
    function A() {
      var a;
      const r = [];
      y.value && ((a = y.value) != null && a.length) && (y.value.map((t) => {
        const o = {
          list: t.type === "all" ? f.value : [],
          show: !1,
          type: t.type
        };
        r.push(o);
      }), r.map((t, o) => {
        const m = f.value.filter((w) => w.type === t.type);
        r[o].list = o !== 0 ? m : r[o].list;
      }), y.value.map((t, o) => {
        t.length = r[o].list.length;
      })), l = r;
    }
    return q(() => {
      A(), p(h.value), v(h.value);
    }), () => s("div", {
      class: L.value ? `f-verify-detail ${D.value}` : ""
    }, [L.value ? s("div", {
      class: "f-verify-detail-content"
    }, [P.value, s("div", {
      class: "f-verify-form-main",
      hidden: !i.value
    }, [s("div", {
      class: "f-verify-form-content"
    }, [s("div", {
      class: "f-verify-form-content-arrow"
    }, null), s("div", {
      class: "f-verify-form-content-list"
    }, [s("div", {
      class: "f-verify-forms-title"
    }, [s("div", {
      class: "btn-group"
    }, [O.value]), s("div", {
      class: "f-verify-close",
      onClick: g
    }, [s("span", {
      class: "f-icon f-icon-close"
    }, null)])]), s("div", {
      class: "f-verify-forms-list",
      style: {
        maxHeight: c.value + "px"
      }
    }, [k()])])])])]) : null]);
  }
});
function De(n, e, l) {
  Y({
    setup() {
      return Z(() => {
        e && e();
      }), () => s(E, n, null);
    }
  }).mount(l);
}
class z {
  static show(e, l) {
    this.clear();
    let i = 0;
    this.verifyContainer = document.createElement("div"), l ? (i = l.offsetHeight - 110, l.appendChild(this.verifyContainer)) : (i = document.documentElement.clientHeight - 110, document.body.appendChild(this.verifyContainer)), e.maxHeight = e.maxHeight ? e.maxHeight : i, De(e, this.clear, this.verifyContainer);
  }
  static clear() {
    let e = this.verifyContainer;
    e && (e.parentNode && e.parentNode.removeChild(e), e = null);
  }
}
$(z, "verifyContainer", null);
function Le(n, e, l) {
  var r;
  const i = "", c = "", f = T();
  function h() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function y() {
    return !1;
  }
  function D() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function u() {
    return (e == null ? void 0 : e.schema.componentType) === "frame";
  }
  function v(a) {
    if (!a || !a.value)
      return null;
    if (a.value.schema && a.value.schema.type === "component")
      return a.value;
    const t = T(a == null ? void 0 : a.value.parent), o = v(t);
    return o || null;
  }
  function p(a = e) {
    var w;
    const { componentInstance: t, designerItemElementRef: o } = a;
    if (!t || !t.value)
      return null;
    const { getCustomButtons: m } = t.value;
    return t.value.canMove || m && ((w = m()) != null && w.length) ? o : p(a.parent);
  }
  function d(a) {
    return !!l;
  }
  function g() {
    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 j(a, t) {
    var o;
    !a || !t || (o = e == null ? void 0 : e.setupContext) == null || o.emit("dragEnd");
  }
  function k(a, t) {
    const { componentType: o } = a;
    let m = W(o, a, t);
    const w = o.toLowerCase().replace(/-/g, "_");
    return m && !m.id && m.type === o && (m.id = `${w}_${Math.random().toString().slice(2, 6)}`), m;
  }
  function L(a) {
  }
  function S(...a) {
  }
  function O() {
    e != null && e.schema.contents && e.schema.contents.map((a) => {
      let t = a.id;
      a.type === "component-ref" && (t = a.component);
      const o = n.value.querySelectorAll(`#${t}-design-item`);
      o != null && o.length && Array.from(o).map((m) => {
        var w;
        (w = m == null ? void 0 : m.componentInstance) != null && w.value.onRemoveComponent && m.componentInstance.value.onRemoveComponent();
      });
    });
  }
  function P() {
  }
  function A(a) {
  }
  return f.value = {
    canMove: h(),
    canSelectParent: y(),
    canDelete: D(),
    canNested: !u(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: n,
    parent: (r = e == null ? void 0 : e.parent) == null ? void 0 : r.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: i,
    designerClass: c,
    canAccepts: d,
    getBelongedComponentInstance: v,
    getDraggableDesignItemElement: p,
    getDraggingDisplayText: g,
    getPropConfig: S,
    getDragScopeElement: b,
    onAcceptMovedChildElement: j,
    onChildElementMovedOut: L,
    addNewChildComponentSchema: k,
    triggerBelongedComponentToMoveWhenMoved: T(!1),
    triggerBelongedComponentToDeleteWhenDeleted: T(!1),
    onRemoveComponent: O,
    getCustomButtons: P,
    onPropertyChanged: A
  }, f;
}
const je = /* @__PURE__ */ V({
  name: "FVerifyDetailDesign",
  props: B,
  emits: ["validatorClick", "listshow"],
  setup(n, e) {
    let l = [];
    const i = T(n.showList), c = T(n.maxHeight), f = T(n.verifyList), h = T(n.showType), y = T(n.verifyType), D = T(), u = K("design-item-context"), v = Le(D, u);
    x(() => {
      D.value.componentInstance = v;
    }), e.expose(v.value);
    function p() {
      i.value = !i.value, e.emit("listshow", i.value);
    }
    function d(t) {
      var o;
      (o = y.value) == null || o.forEach((m) => {
        m.active = m.type === t;
      });
    }
    function g(t) {
      l.forEach((o) => {
        o.show = o.type === t;
      });
    }
    function b(t) {
      t.length <= 0 || (d(t.type), g(t.type));
    }
    function j() {
      i.value = !1, e.emit("listshow", !1);
    }
    function k(t) {
      e.emit("validatorClick", t);
    }
    function L(t) {
      return s("li", {
        class: "f-verify-list",
        onClick: () => k(t)
      }, [s("span", {
        class: ["f-icon f-icon-close-outline list-icon list-error", {
          "list-warning": t.type === "warn"
        }]
      }, null), s("div", {
        class: "list-con"
      }, [s("p", {
        class: "list-title",
        title: t.title
      }, [t.title]), s("p", {
        class: "list-msg",
        title: t.msg
      }, [t.msg])])]);
    }
    function S() {
      return l.map((t) => s("ul", {
        class: ["f-verify-list-content", {
          active: t.show
        }]
      }, [t.list && t.list.map((o) => L(o))]));
    }
    const O = M(() => {
      var t;
      return ((t = f.value) == null ? void 0 : t.length) > 0;
    });
    function P(t) {
      return {
        "btn btn-secondary": !0,
        active: t.active,
        disabled: t.length <= 0
      };
    }
    const A = M(() => {
      var t;
      return (t = y.value) == null ? void 0 : t.map((o) => s("button", {
        class: P(o),
        onClick: () => b(o)
      }, [o.title, s("span", null, [o.length])]));
    }), r = M(() => {
      var t;
      return s("div", {
        class: "f-verify-nums",
        onClick: p
      }, [s("span", {
        class: "nums-icon f-icon f-icon-warning"
      }, null), s("span", {
        class: "nums-count"
      }, [(t = f.value) == null ? void 0 : t.length])]);
    });
    function a() {
      var o;
      const t = [];
      y.value && ((o = y.value) != null && o.length) && (y.value.map((m) => {
        const w = {
          list: m.type === "all" ? f.value : [],
          show: !1,
          type: m.type
        };
        t.push(w);
      }), t.map((m, w) => {
        const G = f.value.filter((J) => J.type === m.type);
        t[w].list = w !== 0 ? G : t[w].list;
      }), y.value.map((m, w) => {
        m.length = t[w].list.length;
      })), l = t;
    }
    return q(() => {
      a(), g(h.value), d(h.value);
    }), () => s("div", {
      ref: D
    }, [O.value ? s("div", {
      class: "f-verify-detail"
    }, [s("div", {
      class: "f-verify-detail-content"
    }, [r.value, s("div", {
      class: "f-verify-form-main",
      hidden: !i.value
    }, [s("div", {
      class: "f-verify-form-content"
    }, [s("div", {
      class: "f-verify-form-content-arrow"
    }, null), s("div", {
      class: "f-verify-form-content-list"
    }, [s("div", {
      class: "f-verify-forms-title"
    }, [s("div", {
      class: "btn-group"
    }, [A.value]), s("div", {
      class: "f-verify-close",
      onClick: j
    }, [s("span", {
      class: "f-icon f-icon-close"
    }, null)])]), s("div", {
      class: "f-verify-forms-list",
      style: {
        maxHeight: c.value + "px"
      }
    }, [S()])])])])])]) : null]);
  }
}), Me = {
  install(n) {
    n.component(E.name, E), n.provide("FVerifyDetailService", z);
  },
  register(n, e, l, i) {
    n["verify-detail"] = E, e["verify-detail"] = R;
  },
  registerDesigner(n, e, l) {
    n["verify-detail"] = je, e["verify-detail"] = R;
  }
};
export {
  E as FVerifyDetail,
  z as FVerifyDetailService,
  Me as default,
  R as propsResolver,
  B as verifyDetailProps
};