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