@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
581 lines (580 loc) • 15.9 kB
JavaScript
import { defineComponent as F, ref as m, computed as R, watch as J, createVNode as d, inject as Q, onMounted as U } from "vue";
import { isPlainObject as q, cloneDeep as V } from "lodash-es";
const _ = {}, W = {};
function L(s) {
const { properties: e, title: l, ignore: c } = s, i = c && Array.isArray(c), f = Object.keys(e).reduce((o, O) => ((!i || !c.find((b) => b === O)) && (o[O] = e[O].type === "object" && e[O].properties ? L(e[O]) : V(e[O].default)), o), {});
if (l && (!i || !c.find((o) => o === "id"))) {
const o = l.toLowerCase().replace(/-/g, "_");
f.id = `${o}_${Math.random().toString().slice(2, 6)}`;
}
return f;
}
function X(s) {
const { properties: e, title: l, required: c } = s;
if (c && Array.isArray(c)) {
const i = c.reduce((f, o) => (f[o] = e[o].type === "object" && e[o].properties ? L(e[o]) : V(e[o].default), f), {});
if (l && c.find((f) => f === "id")) {
const f = l.toLowerCase().replace(/-/g, "_");
i.id = `${f}_${Math.random().toString().slice(2, 6)}`;
}
return i;
}
return {
type: l
};
}
function H(s, e = {}, l) {
const c = _[s];
if (c) {
let i = X(c);
const f = W[s];
return i = f ? f({ getSchemaByType: H }, i, e, l) : i, i;
}
return null;
}
function Y(s, e) {
const l = L(e);
return Object.keys(l).reduce((c, i) => (Object.prototype.hasOwnProperty.call(s, i) && (c[i] && q(c[i]) && q(s[i] || !s[i]) ? Object.assign(c[i], s[i] || {}) : c[i] = s[i]), c), l), l;
}
function G(s, e) {
return Object.keys(s).filter((c) => s[c] != null).reduce((c, i) => {
if (e.has(i)) {
const f = e.get(i);
if (typeof f == "string")
c[f] = s[i];
else {
const o = f(i, s[i], s);
Object.assign(c, o);
}
} else
c[i] = s[i];
return c;
}, {});
}
function Z(s, e, l = /* @__PURE__ */ new Map()) {
const c = Y(s, e);
return G(c, l);
}
function C(s = {}) {
function e(a, v, u, y) {
if (typeof u == "number")
return y[a].length === u;
if (typeof u == "object") {
const j = Object.keys(u)[0], S = u[j];
if (j === "not")
return Number(y[a].length) !== Number(S);
if (j === "moreThan")
return Number(y[a].length) >= Number(S);
if (j === "lessThan")
return Number(y[a].length) <= Number(S);
}
return !1;
}
function l(a, v, u, y) {
return y[a] && y[a].propertyValue && String(y[a].propertyValue.value) === String(u);
}
const c = /* @__PURE__ */ new Map([
["length", e],
["getProperty", l]
]);
Object.keys(s).reduce((a, v) => (a.set(v, s[v]), a), c);
function i(a, v) {
const u = a;
return typeof v == "number" ? [{ target: u, operator: "length", param: null, value: Number(v) }] : typeof v == "boolean" ? [{ target: u, operator: "getProperty", param: a, value: !!v }] : typeof v == "object" ? Object.keys(v).map((y) => {
if (y === "length")
return { target: u, operator: "length", param: null, value: v[y] };
const j = y, S = v[y];
return { target: u, operator: "getProperty", param: j, value: S };
}) : [];
}
function f(a) {
return Object.keys(a).reduce((u, y) => {
const j = i(y, a[y]);
return u.push(...j), u;
}, []);
}
function o(a, v) {
if (c.has(a.operator)) {
const u = c.get(a.operator);
return u && u(a.target, a.param, a.value, v) || !1;
}
return !1;
}
function O(a, v) {
return f(a).reduce((j, S) => j && o(S, v), !0);
}
function b(a, v) {
const u = Object.keys(a), y = u.includes("allOf"), j = u.includes("anyOf"), S = y || j, k = (S ? a[S ? y ? "allOf" : "anyOf" : "allOf"] : [a]).map((P) => O(P, v));
return y ? !k.includes(!1) : k.includes(!0);
}
return { parseValueSchema: b };
}
const K = {}, x = {};
C();
function I(s, e, l = /* @__PURE__ */ new Map(), c = (o, O, b, a) => O, i = {}, f = (o) => o) {
return _[e.title] = e, W[e.title] = c, K[e.title] = i, x[e.title] = f, (o = {}, O = !0) => {
if (!O)
return G(o, l);
const b = Z(o, e, l), a = Object.keys(s).reduce((v, u) => (v[u] = s[u].default, v), {});
return Object.assign(a, b);
};
}
function ee(s, e) {
return { customClass: e.class, customStyle: e.style };
}
const te = /* @__PURE__ */ new Map([
["appearance", ee]
]);
function se(s, 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", ie = {
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
}
}, oe = [
"id",
"type"
], ue = {
$schema: re,
$id: ne,
title: ce,
description: ae,
type: le,
properties: ie,
required: oe
}, 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
}, E = {
/** 步骤条方向 */
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(E, ue, te, se, ye), A = /* @__PURE__ */ F({
name: "FStep",
props: E,
emits: ["click"],
setup(s, e) {
const l = m(s.direction), c = m(s.fill), i = m(s.height), f = m(s.steps), o = m(s.clickable), O = m(0), b = m(s.activeIndex), a = R(() => ({
"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
})), v = R(() => ({
height: l.value === "vertical" ? `${i.value}px` : ""
}));
function u(h, t) {
const p = {
step: !0,
active: t === b.value,
clickable: o.value,
// 'click-disable': step.disable,
current: t === b.value
};
return t < b.value && (p.finish = !0), p;
}
function y(h, t) {
const p = {
step: h,
stepIndex: t
};
e.emit("click", p);
}
function j(h, t) {
const p = {
"f-progressstep-row": !0,
"step-active": t === b.value,
"step-current": t === b.value
};
return t < b.value && (p["step-finish"] = !0), p;
}
function S(h, t) {
return {
"step-icon": !0,
"step-success": t,
"f-icon": t,
"f-icon-check": t
};
}
function M(h, t) {
const p = [];
return t >= b.value || t === O.value ? p.push(d("span", {
class: "step-icon"
}, [t + 1])) : p.push(d("span", {
class: S(h, !0)
}, null)), p;
}
function T(h, t) {
return {
"step-name": !0,
"step-name-success": t < b.value
};
}
function k(h, t) {
return d("div", {
class: "f-progress-step-title"
}, [d("p", {
class: T(h, t)
}, [h.title])]);
}
function D(h, t) {
return {
"f-progress-step-line": !0,
"f-progress-step-line-success": t === b.value
};
}
function P(h, t) {
return t !== f.value.length - 1;
}
const $ = R(() => ({
triangle: !0,
"": l.value === "vertical"
}));
function w() {
return f.value.map((h, t) => d("li", {
class: u(h, t),
onClick: (p) => y(h, t)
}, [d("div", {
class: j(h, t)
}, [d("div", {
class: "f-progress-step-content"
}, [M(h, t), k(h, t)]), P(h, t) && d("div", {
class: D(h, t)
}, [d("span", {
class: $.value
}, null)])])]));
}
return J(() => s.activeIndex, () => {
s.activeIndex > -1 && s.activeIndex <= f.value.length && (b.value = s.activeIndex, w());
}), () => d("div", {
class: "f-progress-step"
}, [d("ul", {
class: a.value,
style: v.value
}, [w()])]);
}
});
function ge(s, e, l) {
var h;
const c = "", i = "", f = m();
function o() {
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 v(t) {
if (!t || !t.value)
return null;
if (t.value.schema && t.value.schema.type === "component")
return t.value;
const p = m(t == null ? void 0 : t.value.parent), r = v(p);
return r || null;
}
function u(t = e) {
var g;
const { componentInstance: p, designerItemElementRef: r } = t;
if (!p || !p.value)
return null;
const { getCustomButtons: n } = p.value;
return p.value.canMove || n && ((g = n()) != null && g.length) ? r : u(t.parent);
}
function y(t) {
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 S() {
}
function M(t, p) {
var r;
!t || !p || (r = e == null ? void 0 : e.setupContext) == null || r.emit("dragEnd");
}
function T(t, p) {
const { componentType: r } = t;
let n = H(r, t, p);
const g = r.toLowerCase().replace(/-/g, "_");
return n && !n.id && n.type === r && (n.id = `${g}_${Math.random().toString().slice(2, 6)}`), n;
}
function k(t) {
}
function D(...t) {
}
function P() {
e != null && e.schema.contents && e.schema.contents.map((t) => {
let p = t.id;
t.type === "component-ref" && (p = t.component);
const r = s.value.querySelectorAll(`#${p}-design-item`);
r != null && r.length && Array.from(r).map((n) => {
var g;
(g = n == null ? void 0 : n.componentInstance) != null && g.value.onRemoveComponent && n.componentInstance.value.onRemoveComponent();
});
});
}
function $() {
}
function w(t) {
}
return f.value = {
canMove: o(),
canSelectParent: O(),
canDelete: b(),
canNested: !a(),
contents: e == null ? void 0 : e.schema.contents,
elementRef: s,
parent: (h = e == null ? void 0 : e.parent) == null ? void 0 : h.componentInstance,
schema: e == null ? void 0 : e.schema,
styles: c,
designerClass: i,
canAccepts: y,
getBelongedComponentInstance: v,
getDraggableDesignItemElement: u,
getDraggingDisplayText: j,
getPropConfig: D,
getDragScopeElement: S,
onAcceptMovedChildElement: M,
onChildElementMovedOut: k,
addNewChildComponentSchema: T,
triggerBelongedComponentToMoveWhenMoved: m(!1),
triggerBelongedComponentToDeleteWhenDeleted: m(!1),
onRemoveComponent: P,
getCustomButtons: $,
onPropertyChanged: w
}, f;
}
const de = /* @__PURE__ */ F({
name: "FStepDesign",
props: E,
emits: [],
setup(s, e) {
const l = m(s.direction), c = m(s.fill), i = m(s.height), f = m(s.steps), o = m(0), O = m(s.clickable), b = m(0), a = m(), v = Q("design-item-context"), u = ge(a, v);
U(() => {
a.value.componentInstance = u;
}), e.expose(u.value);
const y = R(() => ({
"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 = R(() => ({
height: l.value === "vertical" ? `${i.value}px` : ""
}));
function S(r, n) {
const g = {
step: !0,
active: n === o.value,
clickable: O.value,
"click-disable": r.disable,
current: n === o.value
};
return n < o.value && (g.finish = !0), r.status && (g[r.status] = !0), r.hasOwnProperty("class") && r.class.split(" ").reduce((B, N) => (B[N] = !0, B), g), g;
}
function M(r, n) {
}
function T(r, n) {
const g = {
"f-progressstep-row": !0,
"step-active": n === o.value,
"step-current": n === o.value
};
return n < o.value && (g["step-finish"] = !0), r.status && (g["step-" + r.status] = !0), g;
}
function k(r, n) {
const g = {
"step-icon": !0,
"step-success": n,
"k-icon": n,
"k-i-check": n
};
return r.hasOwnProperty("icon") && r.class.split(" ").reduce((B, N) => (B[N] = !0, B), g), g;
}
function D(r, n) {
const g = [];
return r.icon ? g.push(d("span", {
class: k(r, !1)
}, null)) : n >= o.value || n === b.value ? g.push(d("span", {
class: "step-icon"
}, [n + 1])) : g.push(d("span", {
class: k(r, !0)
}, null)), g;
}
function P(r, n) {
return {
"step-name": !0,
"step-name-success": n < o.value
};
}
function $(r, n) {
return d("div", {
class: "f-progress-step-title"
}, [d("p", {
class: P(r, n)
}, [r.title])]);
}
function w(r, n) {
return {
"f-progress-step-line": !0,
"f-progress-step-line-success": n === o.value
};
}
function h(r, n) {
return n !== f.value.length - 1;
}
const t = R(() => ({
triangle: !0,
"": l.value === "vertical"
}));
function p() {
return f.value.map((r, n) => d("li", {
class: S(r, n),
onClick: (g) => void 0
}, [d("div", {
class: T(r, n)
}, [d("div", {
class: "f-progress-step-content"
}, [D(r, n), $(r, n)]), h(r, n) && d("div", {
class: w(r, n)
}, [d("span", {
class: t.value
}, null)])])]));
}
return () => d("div", {
ref: a,
class: "f-progress-step"
}, [d("ul", {
class: y.value,
style: j.value
}, [p()])]);
}
}), Oe = {
install(s) {
s.component(A.name, A);
},
register(s, e, l, c) {
s.step = A, e.step = z;
},
registerDesigner(s, e, l) {
s.step = de, e.step = z;
}
};
export {
A as Step,
Oe as default,
z as propsResolver,
E as stepProps
};