@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
590 lines (589 loc) • 16.2 kB
JavaScript
import { defineComponent as F, ref as m, computed as E, watch as J, createVNode as d, inject as Q, onMounted as X } from "vue";
import { isPlainObject as q, cloneDeep as V } from "lodash-es";
const _ = {}, W = {};
function A(t) {
const { properties: e, title: l, ignore: c } = t, o = c && Array.isArray(c), v = Object.keys(e).reduce((u, O) => ((!o || !c.find((b) => b === O)) && (u[O] = e[O].type === "object" && e[O].properties ? A(e[O]) : V(e[O].default)), u), {});
if (l && (!o || !c.find((u) => u === "id"))) {
const u = l.toLowerCase().replace(/-/g, "_");
v.id = `${u}_${Math.random().toString().slice(2, 6)}`;
}
return v;
}
function Y(t) {
const { properties: e, title: l, required: c } = t;
if (c && Array.isArray(c)) {
const o = c.reduce((v, u) => (v[u] = e[u].type === "object" && e[u].properties ? A(e[u]) : V(e[u].default), v), {});
if (l && c.find((v) => v === "id")) {
const v = l.toLowerCase().replace(/-/g, "_");
o.id = `${v}_${Math.random().toString().slice(2, 6)}`;
}
return o;
}
return {
type: l
};
}
function U(t, e = {}, l) {
const c = _[t];
if (c) {
let o = Y(c);
const v = W[t];
return o = v ? v({ getSchemaByType: U }, o, e, l) : o, o;
}
return null;
}
function Z(t, e) {
const l = A(e);
return Object.keys(l).reduce((c, o) => (Object.prototype.hasOwnProperty.call(t, o) && (c[o] && q(c[o]) && q(t[o] || !t[o]) ? Object.assign(c[o], t[o] || {}) : c[o] = t[o]), c), l), l;
}
function G(t, e) {
return Object.keys(t).filter((c) => t[c] != null).reduce((c, o) => {
if (e.has(o)) {
const v = e.get(o);
if (typeof v == "string")
c[v] = t[o];
else {
const u = v(o, t[o], t);
Object.assign(c, u);
}
} else
c[o] = t[o];
return c;
}, {});
}
function H(t, e, l = /* @__PURE__ */ new Map()) {
const c = Z(t, e);
return G(c, l);
}
function C(t = {}) {
function e(a, h, f, y) {
if (typeof f == "number")
return y[a].length === f;
if (typeof f == "object") {
const j = Object.keys(f)[0], k = f[j];
if (j === "not")
return Number(y[a].length) !== Number(k);
if (j === "moreThan")
return Number(y[a].length) >= Number(k);
if (j === "lessThan")
return Number(y[a].length) <= Number(k);
}
return !1;
}
function l(a, h, f, y) {
return y[a] && y[a].propertyValue && String(y[a].propertyValue.value) === String(f);
}
const c = /* @__PURE__ */ new Map([
["length", e],
["getProperty", l]
]);
Object.keys(t).reduce((a, h) => (a.set(h, t[h]), a), c);
function o(a, h) {
const f = a;
return typeof h == "number" ? [{ target: f, operator: "length", param: null, value: Number(h) }] : typeof h == "boolean" ? [{ target: f, operator: "getProperty", param: a, value: !!h }] : typeof h == "object" ? Object.keys(h).map((y) => {
if (y === "length")
return { target: f, operator: "length", param: null, value: h[y] };
const j = y, k = h[y];
return { target: f, operator: "getProperty", param: j, value: k };
}) : [];
}
function v(a) {
return Object.keys(a).reduce((f, y) => {
const j = o(y, a[y]);
return f.push(...j), f;
}, []);
}
function u(a, h) {
if (c.has(a.operator)) {
const f = c.get(a.operator);
return f && f(a.target, a.param, a.value, h) || !1;
}
return !1;
}
function O(a, h) {
return v(a).reduce((j, k) => j && u(k, h), !0);
}
function b(a, h) {
const f = Object.keys(a), y = f.includes("allOf"), j = f.includes("anyOf"), k = y || j, P = (k ? a[k ? y ? "allOf" : "anyOf" : "allOf"] : [a]).map((T) => O(T, h));
return y ? !P.includes(!1) : P.includes(!0);
}
return { parseValueSchema: b };
}
const K = {}, x = {};
C();
function I(t, e, l = /* @__PURE__ */ new Map(), c = (u, O, b, a) => O, o = {}, v = (u) => u) {
return _[e.title] = e, W[e.title] = c, K[e.title] = o, x[e.title] = v, (u = {}, O = !0) => {
if (!O)
return G(u, l);
const b = H(u, e, l), a = Object.keys(t).reduce((h, f) => (h[f] = t[f].default, h), {});
return Object.assign(a, b);
};
}
function ee(t, e) {
return { customClass: e.class, customStyle: e.style };
}
const te = /* @__PURE__ */ new Map([
["appearance", ee]
]);
function se(t, e, l) {
return e;
}
const re = "https://json-schema.org/draft/2020-12/schema", ne = "https://farris-design.gitee.io/step.schema.json", ce = "step", ae = "A Farris Component", le = "object", oe = {
id: {
description: "The unique identifier for step",
type: "string"
},
type: {
description: "The type string of step",
type: "string",
default: "step"
},
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
}
}, ie = [
"id",
"type"
], ue = {
$schema: re,
$id: ne,
title: ce,
description: ae,
type: le,
properties: oe,
required: ie
}, pe = "step", fe = "A Farris Component", ve = "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: []
}
}
}
}
}, ye = {
title: pe,
description: fe,
type: ve,
categories: he
}, L = {
/** 步骤条方向 */
direction: { type: String, default: "horizontal" },
/** 是否平铺 */
fill: { type: Boolean, default: !1 },
/** 竖向步骤条，fill 时需要传递的高度 */
height: { type: Number, default: 0 },
/** 是否支持点击 */
clickable: { type: Boolean, default: !0 },
/** 步骤条的具体参数 */
steps: {
type: Array,
default: [
{
id: "1",
title: "审批中（示例）",
description: "正在审批"
},
{
id: "2",
title: "复核中（示例）",
description: "等待复核"
}
]
},
/** 当前active步骤的索引 */
activeIndex: { type: Number, default: 0 },
/** 步骤条点击后事件 */
onClick: { type: Function, default: () => {
} }
}, z = I(L, ue, te, se, ye), N = /* @__PURE__ */ F({
name: "FStep",
props: L,
emits: ["click"],
setup(t, e) {
const l = m(t.direction), c = m(t.fill), o = m(t.height), v = m(t.steps), u = m(t.clickable), O = m(0), b = m(t.activeIndex), a = E(() => ({
"f-progress-step-list": l.value === "horizontal",
"f-progress-step-list-block": l.value === "vertical",
"f-progress-step-horizontal-fill": l.value === "horizontal" && c.value,
"f-progress-step-vertical-fill": l.value === "vertical" && c.value
})), h = E(() => ({
height: l.value === "vertical" ? `${o.value}px` : ""
}));
function f(g, i) {
const n = {
step: !0,
active: i === b.value,
clickable: u.value,
// 'click-disable': step.disable,
current: i === b.value
};
return i < b.value && (n.finish = !0), n;
}
function y(g, i) {
const n = {
step: g,
stepIndex: i
};
e.emit("click", n);
}
function j(g, i) {
const n = {
"f-progressstep-row": !0,
"step-active": i === b.value,
"step-current": i === b.value
};
return i < b.value && (n["step-finish"] = !0), n;
}
function k(g, i) {
return {
"step-icon": !0,
"step-success": i,
"f-icon": i,
"f-icon-check": i
};
}
function M(g, i) {
const n = [];
return i >= b.value || i === O.value ? n.push(d("span", {
class: "step-icon"
}, [i + 1])) : n.push(d("span", {
class: k(g, !0)
}, null)), n;
}
function D(g, i) {
return {
"step-name": !0,
"step-name-success": i < b.value
};
}
function P(g, i) {
return d("div", {
class: "f-progress-step-title"
}, [d("p", {
class: D(g, i)
}, [g.title])]);
}
function w(g, i) {
return {
"f-progress-step-line": !0,
"f-progress-step-line-success": i === b.value
};
}
function T(g, i) {
return i !== v.value.length - 1;
}
const B = E(() => ({
triangle: !0,
"": l.value === "vertical"
}));
function R() {
return v.value.map((g, i) => d("li", {
class: f(g, i),
onClick: (n) => y(g, i)
}, [d("div", {
class: j(g, i)
}, [d("div", {
class: "f-progress-step-content"
}, [M(g, i), P(g, i)]), T(g, i) && d("div", {
class: w(g, i)
}, [d("span", {
class: B.value
}, null)])])]));
}
return J(() => t.activeIndex, () => {
t.activeIndex > -1 && t.activeIndex <= v.value.length && (b.value = t.activeIndex, R());
}), () => d("div", {
class: "f-progress-step"
}, [d("ul", {
class: a.value,
style: h.value
}, [R()])]);
}
});
function ge(t, e, l) {
var i;
const c = "", o = "", v = m();
function u() {
return (e == null ? void 0 : e.schema.componentType) !== "frame";
}
function O() {
return !1;
}
function b() {
return (e == null ? void 0 : e.schema.componentType) !== "frame";
}
function a() {
return (e == null ? void 0 : e.schema.componentType) === "frame";
}
function h(n) {
if (!n || !n.value)
return null;
if (n.value.schema && n.value.schema.type === "component")
return n.value;
const s = m(n == null ? void 0 : n.value.parent), r = h(s);
return r || null;
}
function f(n = e) {
var S;
const { componentInstance: s, designerItemElementRef: r } = n;
if (!s || !s.value)
return null;
const { getCustomButtons: p } = s.value;
return s.value.canMove || p && ((S = p()) != null && S.length) ? r : f(n.parent);
}
function y(n) {
return !!l;
}
function j() {
return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
}
function k() {
}
function M(n, s) {
var r;
!n || !s || (r = e == null ? void 0 : e.setupContext) == null || r.emit("dragEnd");
}
function D(n, s) {
const { componentType: r } = n;
let p = U(r, n, s);
const S = r.toLowerCase().replace(/-/g, "_");
return p && !p.id && p.type === r && (p.id = `${S}_${Math.random().toString().slice(2, 6)}`), p;
}
function P(n) {
}
function w(...n) {
}
function T(n) {
if (!n)
return;
const s = e == null ? void 0 : e.schema, { formSchemaUtils: r } = n;
if (s && r.getExpressions().length) {
const p = r.getExpressions().findIndex((S) => S.target === s.id);
p > -1 && r.getExpressions().splice(p, 1);
}
}
function B(n) {
T(n), e != null && e.schema.contents && e.schema.contents.map((s) => {
let r = s.id;
s.type === "component-ref" && (r = s.component);
const p = t.value.querySelectorAll(`#${r}-design-item`);
p != null && p.length && Array.from(p).map((S) => {
var $;
($ = S == null ? void 0 : S.componentInstance) != null && $.value.onRemoveComponent && S.componentInstance.value.onRemoveComponent(n);
});
});
}
function R() {
}
function g(n) {
}
return v.value = {
canMove: u(),
canSelectParent: O(),
canDelete: b(),
canNested: !a(),
contents: e == null ? void 0 : e.schema.contents,
elementRef: t,
parent: (i = e == null ? void 0 : e.parent) == null ? void 0 : i.componentInstance,
schema: e == null ? void 0 : e.schema,
styles: c,
designerClass: o,
canAccepts: y,
getBelongedComponentInstance: h,
getDraggableDesignItemElement: f,
getDraggingDisplayText: j,
getPropConfig: w,
getDragScopeElement: k,
onAcceptMovedChildElement: M,
onChildElementMovedOut: P,
addNewChildComponentSchema: D,
triggerBelongedComponentToMoveWhenMoved: m(!1),
triggerBelongedComponentToDeleteWhenDeleted: m(!1),
onRemoveComponent: B,
getCustomButtons: R,
onPropertyChanged: g
}, v;
}
const de = /* @__PURE__ */ F({
name: "FStepDesign",
props: L,
emits: [],
setup(t, e) {
const l = m(t.direction), c = m(t.fill), o = m(t.height), v = m(t.steps), u = m(0), O = m(t.clickable), b = m(0), a = m(), h = Q("design-item-context"), f = ge(a, h);
X(() => {
a.value.componentInstance = f;
}), e.expose(f.value);
const y = E(() => ({
"f-progress-step-list": l.value === "horizontal",
"f-progress-step-list-block": l.value === "vertical",
"f-progress-step-horizontal-fill": l.value === "horizontal" && c.value,
"f-progress-step-vertical-fill": l.value === "vertical" && c.value
})), j = E(() => ({
height: l.value === "vertical" ? `${o.value}px` : ""
}));
function k(s, r) {
const p = {
step: !0,
active: r === u.value,
clickable: O.value,
"click-disable": s.disable,
current: r === u.value
};
return r < u.value && (p.finish = !0), s.status && (p[s.status] = !0), s.hasOwnProperty("class") && s.class.split(" ").reduce((S, $) => (S[$] = !0, S), p), p;
}
function M(s, r) {
}
function D(s, r) {
const p = {
"f-progressstep-row": !0,
"step-active": r === u.value,
"step-current": r === u.value
};
return r < u.value && (p["step-finish"] = !0), s.status && (p["step-" + s.status] = !0), p;
}
function P(s, r) {
const p = {
"step-icon": !0,
"step-success": r,
"k-icon": r,
"k-i-check": r
};
return s.hasOwnProperty("icon") && s.class.split(" ").reduce((S, $) => (S[$] = !0, S), p), p;
}
function w(s, r) {
const p = [];
return s.icon ? p.push(d("span", {
class: P(s, !1)
}, null)) : r >= u.value || r === b.value ? p.push(d("span", {
class: "step-icon"
}, [r + 1])) : p.push(d("span", {
class: P(s, !0)
}, null)), p;
}
function T(s, r) {
return {
"step-name": !0,
"step-name-success": r < u.value
};
}
function B(s, r) {
return d("div", {
class: "f-progress-step-title"
}, [d("p", {
class: T(s, r)
}, [s.title])]);
}
function R(s, r) {
return {
"f-progress-step-line": !0,
"f-progress-step-line-success": r === u.value
};
}
function g(s, r) {
return r !== v.value.length - 1;
}
const i = E(() => ({
triangle: !0,
"": l.value === "vertical"
}));
function n() {
return v.value.map((s, r) => d("li", {
class: k(s, r),
onClick: (p) => void 0
}, [d("div", {
class: D(s, r)
}, [d("div", {
class: "f-progress-step-content"
}, [w(s, r), B(s, r)]), g(s, r) && d("div", {
class: R(s, r)
}, [d("span", {
class: i.value
}, null)])])]));
}
return () => d("div", {
ref: a,
class: "f-progress-step"
}, [d("ul", {
class: y.value,
style: j.value
}, [n()])]);
}
}), Oe = {
install(t) {
t.component(N.name, N);
},
register(t, e, l, c) {
t.step = N, e.step = z;
},
registerDesigner(t, e, l) {
t.step = de, e.step = z;
}
};
export {
N as Step,
Oe as default,
z as propsResolver,
L as stepProps
};