@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,025 lines (1,024 loc) • 34 kB
JavaScript
import { ref as E, computed as H, defineComponent as Y, watch as fe, createVNode as M, inject as pe, onMounted as ve } from "vue";
import { cloneDeep as J, isPlainObject as Q } from "lodash-es";
import { getCustomClass as X } from "../common/index.esm.js";
import { getSchemaByTypeForDesigner as me } from "../dynamic-resolver/index.esm.js";
function Z(e, t) {
let r;
function c(s) {
const { properties: a, title: g, ignore: o } = s, i = o && Array.isArray(o), u = Object.keys(a).reduce((y, O) => ((!i || !o.find((D) => D === O)) && (y[O] = a[O].type === "object" && a[O].properties ? c(a[O]) : J(a[O].default)), y), {});
if (g && (!i || !o.find((y) => y === "id"))) {
const y = g.toLowerCase().replace(/-/g, "_");
u.id = `${y}_${Math.random().toString().slice(2, 6)}`;
}
return u;
}
function P(s) {
const { properties: a, title: g, required: o } = s;
if (o && Array.isArray(o)) {
const i = o.reduce((u, y) => (u[y] = a[y].type === "object" && a[y].properties ? c(a[y]) : J(a[y].default), u), {});
if (g && o.find((u) => u === "id")) {
const u = g.toLowerCase().replace(/-/g, "_");
i.id = `${u}_${Math.random().toString().slice(2, 6)}`;
}
return i;
}
return {
type: g
};
}
function w(s, a = {}, g) {
const o = e[s];
if (o) {
let i = P(o);
const u = t[s];
return i = u ? u({ getSchemaByType: w }, i, a, g) : i, r != null && r.appendIdentifyForNewControl && r.appendIdentifyForNewControl(i), i;
}
return null;
}
function d(s, a) {
const g = c(a);
return Object.keys(g).reduce((o, i) => (Object.prototype.hasOwnProperty.call(s, i) && (o[i] && Q(o[i]) && Q(s[i] || !s[i]) ? Object.assign(o[i], s[i] || {}) : o[i] = s[i]), o), g), g;
}
function N(s, a) {
return Object.keys(s).filter((o) => s[o] != null).reduce((o, i) => {
if (a.has(i)) {
const u = a.get(i);
if (typeof u == "string")
o[u] = s[i];
else {
const y = u(i, s[i], s);
Object.assign(o, y);
}
} else
o[i] = s[i];
return o;
}, {});
}
function B(s, a, g = /* @__PURE__ */ new Map()) {
const o = d(s, a);
return N(o, g);
}
function m(s) {
var g;
const a = s.type;
if (a) {
const o = e[a];
if (!o)
return s;
const i = d(s, o), u = ((g = s.editor) == null ? void 0 : g.type) || "";
if (u) {
const y = e[u], O = d(s.editor, y);
i.editor = O;
}
return i;
}
return s;
}
function S(s) {
r = s;
}
return { getSchemaByType: w, resolveSchemaWithDefaultValue: m, resolveSchemaToProps: B, mappingSchemaToProps: N, setDesignerContext: S };
}
const V = {}, x = {}, { getSchemaByType: ut, resolveSchemaWithDefaultValue: de, resolveSchemaToProps: be, mappingSchemaToProps: ge, setDesignerContext: ft } = Z(V, x);
function ye(e = {}) {
function t(m, S, s, a) {
if (typeof s == "number")
return a[m].length === s;
if (typeof s == "object") {
const g = Object.keys(s)[0], o = s[g];
if (g === "not")
return Number(a[m].length) !== Number(o);
if (g === "moreThan")
return Number(a[m].length) >= Number(o);
if (g === "lessThan")
return Number(a[m].length) <= Number(o);
}
return !1;
}
function r(m, S, s, a) {
return a[m] && a[m].propertyValue && String(a[m].propertyValue.value) === String(s);
}
const c = /* @__PURE__ */ new Map([
["length", t],
["getProperty", r]
]);
Object.keys(e).reduce((m, S) => (m.set(S, e[S]), m), c);
function P(m, S) {
const s = m;
return typeof S == "number" ? [{ target: s, operator: "length", param: null, value: Number(S) }] : typeof S == "boolean" ? [{ target: s, operator: "getProperty", param: m, value: !!S }] : typeof S == "object" ? Object.keys(S).map((a) => {
if (a === "length")
return { target: s, operator: "length", param: null, value: S[a] };
const g = a, o = S[a];
return { target: s, operator: "getProperty", param: g, value: o };
}) : [];
}
function w(m) {
return Object.keys(m).reduce((s, a) => {
const g = P(a, m[a]);
return s.push(...g), s;
}, []);
}
function d(m, S) {
if (c.has(m.operator)) {
const s = c.get(m.operator);
return s && s(m.target, m.param, m.value, S) || !1;
}
return !1;
}
function N(m, S) {
return w(m).reduce((g, o) => g && d(o, S), !0);
}
function B(m, S) {
const s = Object.keys(m), a = s.includes("allOf"), g = s.includes("anyOf"), o = a || g, y = (o ? m[o ? a ? "allOf" : "anyOf" : "allOf"] : [m]).map((D) => N(D, S));
return a ? !y.includes(!1) : y.includes(!0);
}
return { parseValueSchema: B };
}
const he = {
convertTo: (e, t, r, c) => {
e.appearance || (e.appearance = {}), e.appearance[t] = r;
},
convertFrom: (e, t, r) => e.appearance ? e.appearance[t] : e[t]
}, Se = {
convertFrom: (e, t, r) => e.buttons && e.buttons.length ? `共 ${e.buttons.length} 项` : "无"
}, Te = {
convertTo: (e, t, r, c) => {
e.editor && (e.editor[t] = r);
},
convertFrom: (e, t, r) => e.editor && Object.prototype.hasOwnProperty.call(e.editor, t) ? e.editor[t] : e[t]
}, K = {
button: { type: "button", name: "按钮" },
"response-toolbar": { type: "response-toolbar", name: "工具栏" },
"response-toolbar-item": { type: "response-toolbar-item", name: "按钮" },
"content-container": { type: "content-container", name: "容器" },
"input-group": { type: "input-group", name: "文本" },
textarea: { type: "textarea", name: "多行文本" },
lookup: { type: "lookup", name: "帮助" },
"number-spinner": { type: "number-spinner", name: "数值" },
"date-picker": { type: "date-picker", name: "日期" },
switch: { type: "switch", name: "开关" },
"radio-group": { type: "radio-group", name: "单选组" },
"check-box": { type: "check-box", name: "复选框" },
"check-group": { type: "check-group", name: "复选框组" },
"combo-list": { type: "combo-list", name: "下拉列表" },
"response-form": { type: "response-form", name: "卡片面板" },
"response-layout": { type: "response-layout", name: "布局容器", icon: "response-layout-3" },
"response-layout-item": { type: "response-layout-item", name: "布局", icon: "response-layout-1" },
"tree-grid": { type: "tree-grid", name: "树表格" },
"tree-grid-column": { type: "tree-grid-column", name: "树表格列" },
"data-grid": { type: "data-grid", name: "表格" },
"data-grid-column": { type: "data-grid-column", name: "表格列" },
module: { type: "Module", name: "模块" },
component: { type: "component", name: "组件" },
tabs: { type: "tabs", name: "标签页" },
"tab-page": { type: "tab-page", name: "标签页项", dependentParentControl: "Tab" },
"tab-toolbar-item": { type: "tab-toolbar-item", name: "标签页工具栏按钮" },
"html-template": { type: "html-template", name: "模板容器" },
"time-picker": { type: "time-picker", name: "时间选择" },
section: { type: "section", name: "分组面板" },
"section-toolbar": { type: "section-toolbar", name: "分组面板工具栏" },
"section-toolbar-item": { type: "section-toolbar-item", name: "分组面板按钮" },
splitter: { type: "splitter", name: "分栏面板" },
"splitter-pane": { type: "splitter-pane", name: "分栏面板项", dependentParentControl: "Splitter" },
"component-ref": { type: "component-ref", name: "组件引用节点" },
uploader: { type: "uploader", name: "附件上传" },
"page-header": { type: "page-header", name: "页头" },
"page-footer": { type: "page-footer", name: "页脚" },
"tab-toolbar": { type: "tab-toolbar", name: "标签页工具栏" },
fieldset: { type: "fieldset", name: "分组" },
"query-solution": { type: "query-solution", name: "筛选方案" },
drawer: { type: "drawer", name: "抽屉" },
"external-container": { type: "external-container", name: "外部容器", icon: "content-container" },
"list-nav": { type: "list-nav", name: "列表导航" },
"list-view": { type: "list-view", name: "列表" },
"filter-bar": { type: "filter-bar", name: "筛选条" },
"language-textbox": { type: "language-textbox", name: "多语输入框" }
}, Oe = {
convertFrom: (e, t, r) => {
var P;
const c = e.editor && e.editor[t] ? e.editor[t] : e[t];
return ((P = K[c]) == null ? void 0 : P.name) || c;
}
}, Fe = {
convertTo: (e, t, r, c) => {
e[t] = e[t];
},
convertFrom: (e, t, r) => e.editor ? r.getRealEditorType(e.editor.type) : ""
}, je = {
convertTo: (e, t, r, c) => {
(e.type === "data-grid-column" || e.type === "tree-grid-column") && (e.formatter ? e.formatter[t] = r : e.formatter = {
[t]: r
});
},
convertFrom: (e, t, r) => {
if (e.formatter) {
if (t === "trueText")
return e.formatter.trueText;
if (t === "falseText")
return e.formatter.falseText;
if (t === "prefix")
return e.formatter.prefix;
if (t === "suffix")
return e.formatter.suffix;
if (t === "precision")
return e.formatter.precision;
if (t === "decimal")
return e.formatter.decimal;
if (t === "thousand")
return e.formatter.thousand;
if (t === "tempDateFormat")
return e.formatter.dateFormat === "yyyy年MM月dd日" ? "yearMonthDay" : e.formatter.dateFormat === "yyyy-MM-dd HH:mm:ss" ? "yyyy-MM-ddTHH:mm:ss" : e.formatter.dateFormat === "yyyy/MM/dd HH:mm:ss" ? "yyyy/MM/ddTHH:mm:ss" : e.formatter.dateFormat === "yyyy年MM月dd日 HH时mm分ss秒" ? "yearMonthDayHourMinuteSecond" : e.formatter.tempDateFormat || e.formatter.dateFormat || "yyyy-MM-dd";
if (t === "customFormat")
return e.formatter.customFormat;
if (t === "type")
return e.formatter.type || "none";
}
return "none";
}
}, Me = {
convertTo: (e, t, r, c) => {
e.command ? e.command[t] = r : e.command = {
[t]: r
}, t === "enable" && r && (e.command.commands || (e.command.commands = [
{
text: "编辑",
type: "primary",
command: "edit"
},
{
text: "删除",
type: "danger",
command: "remove"
}
]));
},
convertFrom: (e, t, r) => e.command && t === "enable" ? e.command.enable : ""
}, Pe = {
convertTo: (e, t, r, c) => {
e.column ? e.column[t] = r : e.column = {
[t]: r
}, t === "fitColumns" && r && (e.column.fitMode || (e.column.fitMode = "average"));
},
convertFrom: (e, t, r) => {
if (e.column) {
if (t === "fitColumns")
return e.column.fitColumns;
if (t === "fitMode")
return e.column.fitMode;
}
return "";
}
}, ke = {
convertTo: (e, t, r, c) => {
e.summary ? e.summary[t] = r : e.summary = {
[t]: r
}, t === "enable" && r && (e.summary ? e.summary.groupFields || (e.summary.groupFields = []) : e.summary = {
enable: r,
groupFields: []
});
},
convertFrom: (e, t, r) => e.summary && t === "enable" ? e.summary.enable : e.type === "data-grid-column" ? e.enableSummary === void 0 ? !1 : e.enableSummary : ""
}, De = {
convertTo: (e, t, r, c) => {
e.group ? e.group[t] = r : e.group = {
[t]: r
}, t === "enable" && r && (e.group ? e.group.groupFields || (e.group.groupFields = []) : e.group = {
enable: r,
groupFields: [],
showSummary: !1
});
},
convertFrom: (e, t, r) => {
if (e.group) {
if (t === "enable")
return e.group.enable;
if (t === "showSummary")
return e.group.showSummary;
}
}
}, we = {
convertFrom: (e, t) => e.binding ? e.binding.path : "",
convertTo: (e, t, r) => {
if (r && r.length > 0) {
const c = r[0];
e.binding || (e.binding = {}), e.binding.type = "Form", e.binding.path = c.bindingField, e.binding.field = c.id, e.binding.fullPath = c.path, e.path = c.bindingPath;
}
}
}, Ee = {
convertTo: (e, t, r, c) => {
e.pagination || (e.pagination = {}), e.pagination[t] = r;
},
convertFrom: (e, t, r) => e.pagination ? e.pagination[t] : e[t]
}, Ne = {
convertTo: (e, t, r, c) => {
e.rowNumber || (e.rowNumber = {}), e.rowNumber[t] = r;
},
convertFrom: (e, t, r) => e.rowNumber ? e.rowNumber[t] : e[t]
}, $e = {
convertTo: (e, t, r, c) => {
e.selection || (e.selection = {}), e.selection[t] = r;
},
convertFrom: (e, t, r) => e.selection ? e.selection[t] : e[t]
}, Be = {
convertFrom: (e, t, r) => e[t] && e[t].length ? `共 ${e[t].length} 项` : ""
}, Re = {
convertFrom: (e, t) => e[t] || "",
convertTo: (e, t, r) => {
e[t] = r;
}
}, Ae = {
convertTo: (e, t, r, c) => {
e.size || (e.size = {}), e.size[t] = r;
},
convertFrom: (e, t, r) => e.size ? e.size[t] : e[t]
}, ze = {
convertFrom: (e, t, r) => {
var c, P;
return (c = e.formatter) != null && c.data && t === "formatterEnumData" && !e.formatterEnumData ? (P = e.formatter) == null ? void 0 : P.data : e.formatterEnumData;
}
}, Ce = {
convertTo: (e, t, r, c) => {
e.sort || (e.sort = {}), e.sort[t] = r;
},
convertFrom: (e, t, r) => {
var c, P;
if (t === "mode")
return ((c = e.sort) == null ? void 0 : c.mode) || "client";
if (t === "multiSort")
return !!((P = e.sort) != null && P.multiSort);
}
}, Le = {
convertTo: (e, t, r, c) => {
e.filter || (e.filter = {}), e.filter[t] = r;
},
convertFrom: (e, t, r) => {
var c;
if (t === "mode")
return ((c = e.filter) == null ? void 0 : c.mode) || "client";
}
}, qe = {
convertTo: (e, t, r, c) => {
e.rowOption ? e.rowOption[t] = r : e.rowOption = {
[t]: r
};
},
convertFrom: (e, t, r) => {
if (e.rowOption) {
if (t === "customRowStyle")
return e.rowOption.customRowStyle;
if (t === "customCellStyle")
return e.rowOption.customCellStyle;
}
return "";
}
};
function I(e, t, r) {
const c = /* @__PURE__ */ new Map([
["/converter/appearance.converter", he],
["/converter/buttons.converter", Se],
["/converter/property-editor.converter", Te],
["/converter/items-count.converter", Be],
["/converter/type.converter", Oe],
["/converter/change-editor.converter", Fe],
["/converter/change-formatter.converter", je],
["/converter/column-command.converter", Me],
["/converter/column-option.converter", Pe],
["/converter/summary.converter", ke],
["/converter/group.converter", De],
["/converter/form-group-label.converter", Re],
["/converter/field-selector.converter", we],
["/converter/pagination.converter", Ee],
["/converter/row-number.converter", Ne],
["/converter/grid-selection.converter", $e],
["/converter/size.converter", Ae],
["/converter/change-formatter-enum.converter", ze],
["/converter/grid-sort.converter", Ce],
["/converter/grid-filter.converter", Le],
["/converter/row-option.converter", qe]
]), P = /* @__PURE__ */ new Map([
["string", { type: "input-group", enableClear: !1 }],
["boolean", {
type: "combo-list",
textField: "name",
valueField: "value",
idField: "value",
enableClear: !1,
editable: !1,
data: [
{
value: !0,
name: "是"
},
{
value: !1,
name: "否"
}
]
}],
["enum", { type: "combo-list", maxHeight: 128, enableClear: !1, editable: !1 }],
["array", { type: "button-edit" }],
["number", { type: "number-spinner", placeholder: "" }],
["events-editor", { type: "events-editor", hide: !0 }]
]), w = ye();
function d(o, i) {
return () => w.parseValueSchema(o, i);
}
function N(o, i, u) {
return o.includes("visible") && i.visible !== void 0 ? typeof i.visible == "boolean" ? () => !!i.visible : i.visible === void 0 ? !0 : d(i.visible, u) : () => !0;
}
function B(o, i, u) {
return o.includes("readonly") && i.readonly !== void 0 ? typeof i.readonly == "boolean" ? () => !!i.readonly : d(i.readonly, u) : () => !1;
}
function m(o, i) {
const u = o.$converter || i;
return typeof u == "string" && u && c.has(u) ? c.get(u) || null : u || null;
}
function S(o, i, u, y, O, D = "", v = "") {
return Object.keys(o).map((b) => {
const R = E(1), A = b, n = o[b], p = Object.keys(n), F = n.title, l = n.type, h = P.get(l) || { type: "input-group", enableClear: !1 }, T = n.editor ? Object.assign({}, h, n.editor) : Object.assign({}, h), j = N(p, n, i), k = B(p, n, i);
T.readonly = T.readonly === void 0 ? k() : T.readonly;
const z = n.type === "cascade" ? S(n.properties, i, u, y, O, D, v) : [], q = !0;
let $ = m(n, v);
const C = H({
get() {
if (R.value) {
if (["class", "style"].find((ue) => ue === A) && !$ && ($ = c.get("/converter/appearance.converter") || null), $ && $.convertFrom)
return $.convertFrom(u, b, O, D);
const L = u[b];
return Object.prototype.hasOwnProperty.call(n, "defaultValue") && (L === void 0 || typeof L == "string" && L === "") ? n.type === "boolean" ? n.defaultValue : n.defaultValue || "" : L;
}
return null;
},
set(L) {
R.value += 1, $ && $.convertTo ? ($.convertTo(y, b, L, O, D), $.convertTo(u, b, L, O, D)) : (y[b] = L, u[b] = L);
}
}), { refreshPanelAfterChanged: _, description: ce, isExpand: ae, parentPropertyID: le } = n, U = { propertyID: A, propertyName: F, propertyType: l, propertyValue: C, editor: T, visible: j, readonly: k, cascadeConfig: z, hideCascadeTitle: q, refreshPanelAfterChanged: _, description: ce, isExpand: ae, parentPropertyID: le };
return i[A] = U, U;
});
}
function s(o, i, u = {}) {
const y = {}, O = e[o];
return O && O.categories ? Object.keys(O.categories).map((v) => {
const f = O.categories[v], b = f == null ? void 0 : f.title, R = S(f.properties || {}, y, {}, u, i);
return { categoryId: v, categoryName: b, properties: R };
}) : [];
}
function a(o, i, u, y, O = "") {
const D = i.$ref.schema, v = i.$ref.converter, f = u[D], b = f.type, R = r(f), A = {}, n = e[b];
if (n && n.categories) {
const p = n.categories[o], F = p == null ? void 0 : p.title;
v && Object.keys(p.properties).forEach((T) => {
p.properties[T].$converter = v;
});
const l = (p == null ? void 0 : p.properties) || {}, h = S(l, A, R, f, y, O);
return { categoryId: o, categoryName: F, properties: h };
}
return { categoryId: o, categoryName: "", properties: [] };
}
function g(o, i, u, y, O) {
const D = o.type, v = r(o), f = {};
let b = O || e[D];
if (b && Object.keys(b).length === 0 && u && u.getPropConfig && (b = u.getPropConfig(y)), b && b.categories) {
const R = [];
return Object.keys(b.categories).map((A) => {
const n = b.categories[A];
if (n.$ref) {
R.push(a(A, n, o, i, y));
return;
}
const p = n == null ? void 0 : n.title, F = n == null ? void 0 : n.tabId, l = n == null ? void 0 : n.tabName, h = n == null ? void 0 : n.hide, T = n == null ? void 0 : n.hideTitle, j = S(n.properties || {}, f, v, o, i, y, n.$converter), { setPropertyRelates: k } = n, z = n == null ? void 0 : n.parentPropertyID;
R.push({ categoryId: A, categoryName: p, tabId: F, tabName: l, hide: h, properties: j, hideTitle: T, setPropertyRelates: k, parentPropertyID: z });
}), R;
}
return [];
}
return {
getPropertyConfigBySchema: g,
getPropertyConfigByType: s,
propertyConverterMap: c
};
}
const ee = {}, te = {};
I(ee, te, de);
const re = {}, ne = {}, { getSchemaByType: pt, resolveSchemaWithDefaultValue: He, resolveSchemaToProps: vt, mappingSchemaToProps: mt, setDesignerContext: dt } = Z(re, ne), oe = {}, ie = {};
I(oe, ie, He);
function _e(e, t, r = /* @__PURE__ */ new Map(), c = (d, N, B, m) => N, P = {}, w = (d) => d) {
return V[t.title] = t, x[t.title] = c, ee[t.title] = P, te[t.title] = w, re[t.title] = t, ne[t.title] = c, oe[t.title] = P, ie[t.title] = w, (d = {}, N = !0) => {
if (!N)
return ge(d, r);
const B = be(d, t, r), m = Object.keys(e).reduce((S, s) => (S[s] = e[s].default, S), {});
return Object.assign(m, B);
};
}
function We(e, t) {
return { customClass: t.class, customStyle: t.style };
}
const Ge = /* @__PURE__ */ new Map([
["appearance", We]
]);
function Ue(e, t, r) {
return t;
}
const Je = "https://json-schema.org/draft/2020-12/schema", Qe = "https://farris-design.gitee.io/step.schema.json", Xe = "step", Ye = "A Farris Component", Ze = "object", Ve = {
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
}
}, xe = [
"id",
"type"
], Ke = {
$schema: Je,
$id: Qe,
title: Xe,
description: Ye,
type: Ze,
properties: Ve,
required: xe
}, Ie = "step", et = "A Farris Component", tt = "object", rt = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, nt = {
title: Ie,
description: et,
type: tt,
categories: rt
}, G = {
/** 步骤条方向 */
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: () => {
} }
}, se = _e(G, Ke, Ge, Ue, nt), W = /* @__PURE__ */ Y({
name: "FStep",
props: G,
emits: ["click"],
setup(e, t) {
const r = E(e.direction), c = E(e.fill), P = E(e.height), w = E(e.steps), d = E(e.activeIndex), N = H(() => ({
"f-progress-step-list": r.value === "horizontal",
"f-progress-step-list-block": r.value === "vertical",
"f-progress-step-horizontal-fill": r.value === "horizontal" && c.value,
"f-progress-step-vertical-fill": r.value === "vertical" && c.value
})), B = H(() => ({
height: r.value === "vertical" ? `${P.value}px` : ""
}));
function m(v, f) {
const b = {
step: !0,
active: f === d.value,
clickable: e.clickable,
current: f === d.value,
finish: f < d.value
};
return v.status && (b[v.status] = !0), X(b, v.class || "");
}
function S(v, f) {
if (!e.clickable)
return;
const b = {
step: v,
stepIndex: f
};
t.emit("click", b);
}
function s(v, f) {
const b = {
"f-progressstep-row": !0,
"step-active": f === d.value,
"step-current": f === d.value,
"step-finish": f < d.value
};
return v.status && (b["step-" + v.status] = !0), b;
}
function a(v, f) {
return X({
"step-icon": !0,
"step-success": f,
"f-icon": f,
"f-icon-check": f
}, v.icon || "");
}
function g(v, f) {
const b = [];
return v.icon ? b.push(M("span", {
class: a(v, !1)
}, null)) : f >= d.value ? b.push(M("span", {
class: "step-icon"
}, [f + 1])) : b.push(M("span", {
class: a(v, !0)
}, null)), b;
}
function o(v, f) {
return {
"step-name": !0,
"step-name-success": f < d.value
};
}
function i(v, f) {
return M("div", {
class: "f-progress-step-title"
}, [M("p", {
class: o(v, f)
}, [v.title])]);
}
function u(v, f) {
return {
"f-progress-step-line": !0,
"f-progress-step-line-success": f === d.value
};
}
function y(v, f) {
return f !== w.value.length - 1;
}
const O = H(() => ({
triangle: !0,
"": r.value === "vertical"
}));
function D() {
return w.value.map((v, f) => M("li", {
class: m(v, f),
onClick: (b) => S(v, f)
}, [M("div", {
class: s(v, f)
}, [M("div", {
class: "f-progress-step-content"
}, [g(v, f), i(v, f)]), y(v, f) && M("div", {
class: u(v, f)
}, [M("span", {
class: O.value
}, null)])])]));
}
return fe(() => e.activeIndex, () => {
e.activeIndex > -1 && e.activeIndex <= w.value.length && (d.value = e.activeIndex, D());
}), () => M("div", {
class: "f-progress-step"
}, [M("ul", {
class: N.value,
style: B.value
}, [D()])]);
}
});
function ot(e, t, r) {
var F;
const c = "", P = "", w = E();
let d;
function N() {
return (t == null ? void 0 : t.schema.componentType) !== "frame";
}
function B() {
return !1;
}
function m() {
return (t == null ? void 0 : t.schema.componentType) !== "frame";
}
function S() {
return (t == null ? void 0 : t.schema.componentType) === "frame";
}
function s(l) {
if (!l || !l.value)
return null;
if (l.value.schema && l.value.schema.type === "component")
return l.value;
const h = E(l == null ? void 0 : l.value.parent), T = s(h);
return T || null;
}
function a(l = t) {
var k;
const { componentInstance: h, designerItemElementRef: T } = l;
if (!h || !h.value)
return null;
const { getCustomButtons: j } = h.value;
return h.value.canMove || j && ((k = j()) != null && k.length) ? T : a(l.parent);
}
function g(l) {
return !!r;
}
function o() {
return (t == null ? void 0 : t.schema.label) || (t == null ? void 0 : t.schema.title) || (t == null ? void 0 : t.schema.name);
}
function i() {
}
function u(l, h) {
var T;
!l || !h || (T = t == null ? void 0 : t.setupContext) == null || T.emit("dragEnd");
}
function y(l, h) {
const { componentType: T } = l;
let j = me(T, l, h);
const k = T.toLowerCase().replace(/-/g, "_");
return j && !j.id && j.type === T && (j.id = `${k}_${Math.random().toString().slice(2, 6)}`), j;
}
function O(l) {
}
function D(...l) {
}
function v(l) {
if (!l)
return;
const h = t == null ? void 0 : t.schema, { formSchemaUtils: T } = l;
if (h && T.getExpressions().length) {
const j = T.getExpressions().findIndex((k) => k.target === h.id);
j > -1 && T.getExpressions().splice(j, 1);
}
}
function f(l) {
if (!l || !(t != null && t.schema))
return;
const h = t.schema, { formSchemaUtils: T } = l;
T.removeCommunicationInComponent(h);
}
function b(l) {
v(l), f(l), t != null && t.schema.contents && t.schema.contents.map((h) => {
let T = h.id;
h.type === "component-ref" && (T = h.component);
const j = e.value.querySelectorAll(`#${T}-design-item`);
j != null && j.length && Array.from(j).map((k) => {
var z;
(z = k == null ? void 0 : k.componentInstance) != null && z.value.onRemoveComponent && k.componentInstance.value.onRemoveComponent(l);
});
});
}
function R() {
}
function A(l) {
var T, j;
if (!((T = t == null ? void 0 : t.schema) != null && T.id))
return;
!d && l && (d = l.formSchemaUtils);
let h = "";
{
const { text: k, title: z, label: q, mainTitle: $, name: C, type: _ } = t.schema;
h = k || z || q || $ || C || ((j = K[_]) == null ? void 0 : j.name);
}
h && d.getControlBasicInfoMap().set(t.schema.id, {
componentTitle: h,
parentPathName: h
});
}
function n(l) {
var k;
const { changeObject: h } = l, { propertyID: T, propertyValue: j } = h;
if (["text", "title", "label", "name", "mainTitle"].includes((k = l == null ? void 0 : l.changeObject) == null ? void 0 : k.propertyID) && T && j && (A(), d)) {
const z = d.getControlBasicInfoMap(), q = z.keys().toArray().filter(($) => {
var C, _;
return ((C = z.get($)) == null ? void 0 : C.reliedComponentId) === ((_ = t == null ? void 0 : t.schema) == null ? void 0 : _.id);
});
q != null && q.length && q.forEach(($) => {
const C = z.get($).parentPathName.split(" > ");
C[0] = j, z.get($).parentPathName = C.join(" > ");
});
}
}
function p(l) {
n(l);
}
return w.value = {
canMove: N(),
canSelectParent: B(),
canDelete: m(),
canNested: !S(),
contents: t == null ? void 0 : t.schema.contents,
elementRef: e,
parent: (F = t == null ? void 0 : t.parent) == null ? void 0 : F.componentInstance,
schema: t == null ? void 0 : t.schema,
styles: c,
designerClass: P,
canAccepts: g,
getBelongedComponentInstance: s,
getDraggableDesignItemElement: a,
getDraggingDisplayText: o,
getPropConfig: D,
getDragScopeElement: i,
onAcceptMovedChildElement: u,
onChildElementMovedOut: O,
addNewChildComponentSchema: y,
triggerBelongedComponentToMoveWhenMoved: E(!1),
triggerBelongedComponentToDeleteWhenDeleted: E(!1),
onRemoveComponent: b,
getCustomButtons: R,
onPropertyChanged: p,
setComponentBasicInfoMap: A,
updateContextSchema: t == null ? void 0 : t.updateContextSchema
}, w;
}
const it = /* @__PURE__ */ Y({
name: "FStepDesign",
props: G,
emits: [],
setup(e, t) {
const r = E(e.direction), c = E(e.fill), P = E(e.height), w = E(e.steps), d = E(0), N = E(e.clickable), B = E(0), m = E(), S = pe("design-item-context"), s = ot(m, S);
ve(() => {
m.value.componentInstance = s;
}), t.expose(s.value);
const a = H(() => ({
"f-progress-step-list": r.value === "horizontal",
"f-progress-step-list-block": r.value === "vertical",
"f-progress-step-horizontal-fill": r.value === "horizontal" && c.value,
"f-progress-step-vertical-fill": r.value === "vertical" && c.value
})), g = H(() => ({
height: r.value === "vertical" ? `${P.value}px` : ""
}));
function o(n, p) {
const F = {
step: !0,
active: p === d.value,
clickable: N.value,
"click-disable": n.disable,
current: p === d.value
};
return p < d.value && (F.finish = !0), n.status && (F[n.status] = !0), n.hasOwnProperty("class") && n.class.split(" ").reduce((l, h) => (l[h] = !0, l), F), F;
}
function i(n, p) {
}
function u(n, p) {
const F = {
"f-progressstep-row": !0,
"step-active": p === d.value,
"step-current": p === d.value
};
return p < d.value && (F["step-finish"] = !0), n.status && (F["step-" + n.status] = !0), F;
}
function y(n, p) {
const F = {
"step-icon": !0,
"step-success": p,
"k-icon": p,
"k-i-check": p
};
return n.hasOwnProperty("icon") && n.class.split(" ").reduce((l, h) => (l[h] = !0, l), F), F;
}
function O(n, p) {
const F = [];
return n.icon ? F.push(M("span", {
class: y(n, !1)
}, null)) : p >= d.value || p === B.value ? F.push(M("span", {
class: "step-icon"
}, [p + 1])) : F.push(M("span", {
class: y(n, !0)
}, null)), F;
}
function D(n, p) {
return {
"step-name": !0,
"step-name-success": p < d.value
};
}
function v(n, p) {
return M("div", {
class: "f-progress-step-title"
}, [M("p", {
class: D(n, p)
}, [n.title])]);
}
function f(n, p) {
return {
"f-progress-step-line": !0,
"f-progress-step-line-success": p === d.value
};
}
function b(n, p) {
return p !== w.value.length - 1;
}
const R = H(() => ({
triangle: !0,
"": r.value === "vertical"
}));
function A() {
return w.value.map((n, p) => M("li", {
class: o(n, p),
onClick: (F) => void 0
}, [M("div", {
class: u(n, p)
}, [M("div", {
class: "f-progress-step-content"
}, [O(n, p), v(n, p)]), b(n, p) && M("div", {
class: f(n, p)
}, [M("span", {
class: R.value
}, null)])])]));
}
return () => M("div", {
ref: m,
class: "f-progress-step"
}, [M("ul", {
class: a.value,
style: g.value
}, [A()])]);
}
});
W.install = (e) => {
e.component(W.name, W);
};
W.register = (e, t, r, c) => {
e.step = W, t.step = se;
};
W.registerDesigner = (e, t, r) => {
e.step = it, t.step = se;
};
export {
W as FStep,
W as Step,
W as default,
se as propsResolver,
G as stepProps
};