@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
994 lines (993 loc) • 33.6 kB
JavaScript
import { ref as j, computed as N, defineComponent as J, watch as z, onMounted as _, createVNode as V, nextTick as G, inject as ve } from "vue";
import { cloneDeep as Y, isPlainObject as Z } from "lodash-es";
import { getSchemaByTypeForDesigner as de } from "../dynamic-resolver/index.esm.js";
import { withInstall as ye } from "../common/index.esm.js";
const be = "https://json-schema.org/draft/2020-12/schema", ge = "https://farris-design.gitee.io/capsule.schema.json", he = "capsule", Se = "A Farris Component", Te = "object", Fe = {
id: {
description: "The unique identifier for a capsule",
type: "string"
},
type: {
description: "The type string of capsule component",
type: "string",
default: "capsule"
},
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
}
}, Me = [
"id",
"type"
], Oe = {
$schema: be,
$id: ge,
title: he,
description: Se,
type: Te,
properties: Fe,
required: Me
};
function x(e, t) {
let r;
function c(i) {
const { properties: s, title: v, ignore: a } = i, o = a && Array.isArray(a), l = Object.keys(s).reduce((d, g) => ((!o || !a.find((P) => P === g)) && (d[g] = s[g].type === "object" && s[g].properties ? c(s[g]) : Y(s[g].default)), d), {});
if (v && (!o || !a.find((d) => d === "id"))) {
const d = v.toLowerCase().replace(/-/g, "_");
l.id = `${d}_${Math.random().toString().slice(2, 6)}`;
}
return l;
}
function T(i) {
const { properties: s, title: v, required: a } = i;
if (a && Array.isArray(a)) {
const o = a.reduce((l, d) => (l[d] = s[d].type === "object" && s[d].properties ? c(s[d]) : Y(s[d].default), l), {});
if (v && a.find((l) => l === "id")) {
const l = v.toLowerCase().replace(/-/g, "_");
o.id = `${l}_${Math.random().toString().slice(2, 6)}`;
}
return o;
}
return {
type: v
};
}
function F(i, s = {}, v) {
const a = e[i];
if (a) {
let o = T(a);
const l = t[i];
return o = l ? l({ getSchemaByType: F }, o, s, v) : o, r != null && r.appendIdentifyForNewControl && r.appendIdentifyForNewControl(o), o;
}
return null;
}
function S(i, s) {
const v = c(s);
return Object.keys(v).reduce((a, o) => (Object.prototype.hasOwnProperty.call(i, o) && (a[o] && Z(a[o]) && Z(i[o] || !i[o]) ? Object.assign(a[o], i[o] || {}) : a[o] = i[o]), a), v), v;
}
function B(i, s) {
return Object.keys(i).filter((a) => i[a] != null).reduce((a, o) => {
if (s.has(o)) {
const l = s.get(o);
if (typeof l == "string")
a[l] = i[o];
else {
const d = l(o, i[o], i);
Object.assign(a, d);
}
} else
a[o] = i[o];
return a;
}, {});
}
function k(i, s, v = /* @__PURE__ */ new Map()) {
const a = S(i, s);
return B(a, v);
}
function m(i) {
var v;
const s = i.type;
if (s) {
const a = e[s];
if (!a)
return i;
const o = S(i, a), l = ((v = i.editor) == null ? void 0 : v.type) || "";
if (l) {
const d = e[l], g = S(i.editor, d);
o.editor = g;
}
return o;
}
return i;
}
function y(i) {
r = i;
}
return { getSchemaByType: F, resolveSchemaWithDefaultValue: m, resolveSchemaToProps: k, mappingSchemaToProps: B, setDesignerContext: y };
}
const I = {}, K = {}, { getSchemaByType: mt, resolveSchemaWithDefaultValue: we, resolveSchemaToProps: je, mappingSchemaToProps: Pe, setDesignerContext: vt } = x(I, K);
function De(e = {}) {
function t(m, y, i, s) {
if (typeof i == "number")
return s[m].length === i;
if (typeof i == "object") {
const v = Object.keys(i)[0], a = i[v];
if (v === "not")
return Number(s[m].length) !== Number(a);
if (v === "moreThan")
return Number(s[m].length) >= Number(a);
if (v === "lessThan")
return Number(s[m].length) <= Number(a);
}
return !1;
}
function r(m, y, i, s) {
return s[m] && s[m].propertyValue && String(s[m].propertyValue.value) === String(i);
}
const c = /* @__PURE__ */ new Map([
["length", t],
["getProperty", r]
]);
Object.keys(e).reduce((m, y) => (m.set(y, e[y]), m), c);
function T(m, y) {
const i = m;
return typeof y == "number" ? [{ target: i, operator: "length", param: null, value: Number(y) }] : typeof y == "boolean" ? [{ target: i, operator: "getProperty", param: m, value: !!y }] : typeof y == "object" ? Object.keys(y).map((s) => {
if (s === "length")
return { target: i, operator: "length", param: null, value: y[s] };
const v = s, a = y[s];
return { target: i, operator: "getProperty", param: v, value: a };
}) : [];
}
function F(m) {
return Object.keys(m).reduce((i, s) => {
const v = T(s, m[s]);
return i.push(...v), i;
}, []);
}
function S(m, y) {
if (c.has(m.operator)) {
const i = c.get(m.operator);
return i && i(m.target, m.param, m.value, y) || !1;
}
return !1;
}
function B(m, y) {
return F(m).reduce((v, a) => v && S(a, y), !0);
}
function k(m, y) {
const i = Object.keys(m), s = i.includes("allOf"), v = i.includes("anyOf"), a = s || v, d = (a ? m[a ? s ? "allOf" : "anyOf" : "allOf"] : [m]).map((P) => B(P, y));
return s ? !d.includes(!1) : d.includes(!0);
}
return { parseValueSchema: k };
}
const Ee = {
convertTo: (e, t, r, c) => {
e.appearance || (e.appearance = {}), e.appearance[t] = r;
},
convertFrom: (e, t, r) => e.appearance ? e.appearance[t] : e[t]
}, Be = {
convertFrom: (e, t, r) => e.buttons && e.buttons.length ? `共 ${e.buttons.length} 项` : "无"
}, $e = {
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]
}, ee = {
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: "多语输入框" }
}, Re = {
convertFrom: (e, t, r) => {
var T;
const c = e.editor && e.editor[t] ? e.editor[t] : e[t];
return ((T = ee[c]) == null ? void 0 : T.name) || c;
}
}, Ae = {
convertTo: (e, t, r, c) => {
e[t] = e[t];
},
convertFrom: (e, t, r) => e.editor ? r.getRealEditorType(e.editor.type) : ""
}, ke = {
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";
}
}, Ce = {
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 : ""
}, Ne = {
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 "";
}
}, Ve = {
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 : ""
}, qe = {
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;
}
}
}, He = {
convertTo: (e, t, r, c) => {
e.pagination || (e.pagination = {}), e.pagination[t] = r;
},
convertFrom: (e, t, r) => e.pagination ? e.pagination[t] : e[t]
}, Le = {
convertTo: (e, t, r, c) => {
e.rowNumber || (e.rowNumber = {}), e.rowNumber[t] = r;
},
convertFrom: (e, t, r) => e.rowNumber ? e.rowNumber[t] : e[t]
}, ze = {
convertTo: (e, t, r, c) => {
e.selection || (e.selection = {}), e.selection[t] = r;
},
convertFrom: (e, t, r) => e.selection ? e.selection[t] : e[t]
}, _e = {
convertFrom: (e, t, r) => e[t] && e[t].length ? `共 ${e[t].length} 项` : ""
}, Ge = {
convertFrom: (e, t) => e[t] || "",
convertTo: (e, t, r) => {
e[t] = r;
}
}, Ue = {
convertTo: (e, t, r, c) => {
e.size || (e.size = {}), e.size[t] = r;
},
convertFrom: (e, t, r) => e.size ? e.size[t] : e[t]
}, Je = {
convertFrom: (e, t, r) => {
var c, T;
return (c = e.formatter) != null && c.data && t === "formatterEnumData" && !e.formatterEnumData ? (T = e.formatter) == null ? void 0 : T.data : e.formatterEnumData;
}
}, Qe = {
convertTo: (e, t, r, c) => {
e.sort || (e.sort = {}), e.sort[t] = r;
},
convertFrom: (e, t, r) => {
var c, T;
if (t === "mode")
return ((c = e.sort) == null ? void 0 : c.mode) || "client";
if (t === "multiSort")
return !!((T = e.sort) != null && T.multiSort);
}
}, Xe = {
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";
}
}, Ye = {
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 te(e, t, r) {
const c = /* @__PURE__ */ new Map([
["/converter/appearance.converter", Ee],
["/converter/buttons.converter", Be],
["/converter/property-editor.converter", $e],
["/converter/items-count.converter", _e],
["/converter/type.converter", Re],
["/converter/change-editor.converter", Ae],
["/converter/change-formatter.converter", ke],
["/converter/column-command.converter", Ce],
["/converter/column-option.converter", Ne],
["/converter/summary.converter", Ve],
["/converter/group.converter", qe],
["/converter/form-group-label.converter", Ge],
["/converter/field-selector.converter", We],
["/converter/pagination.converter", He],
["/converter/row-number.converter", Le],
["/converter/grid-selection.converter", ze],
["/converter/size.converter", Ue],
["/converter/change-formatter-enum.converter", Je],
["/converter/grid-sort.converter", Qe],
["/converter/grid-filter.converter", Xe],
["/converter/row-option.converter", Ye]
]), T = /* @__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 }]
]), F = De();
function S(a, o) {
return () => F.parseValueSchema(a, o);
}
function B(a, o, l) {
return a.includes("visible") && o.visible !== void 0 ? typeof o.visible == "boolean" ? () => !!o.visible : o.visible === void 0 ? !0 : S(o.visible, l) : () => !0;
}
function k(a, o, l) {
return a.includes("readonly") && o.readonly !== void 0 ? typeof o.readonly == "boolean" ? () => !!o.readonly : S(o.readonly, l) : () => !1;
}
function m(a, o) {
const l = a.$converter || o;
return typeof l == "string" && l && c.has(l) ? c.get(l) || null : l || null;
}
function y(a, o, l, d, g, P = "", $ = "") {
return Object.keys(a).map((M) => {
const R = j(1), p = M, n = a[M], f = Object.keys(n), O = n.title, u = n.type, b = T.get(u) || { type: "input-group", enableClear: !1 }, h = n.editor ? Object.assign({}, b, n.editor) : Object.assign({}, b), w = B(f, n, o), D = k(f, n, o);
h.readonly = h.readonly === void 0 ? D() : h.readonly;
const C = n.type === "cascade" ? y(n.properties, o, l, d, g, P, $) : [], H = !0;
let A = m(n, $);
const q = N({
get() {
if (R.value) {
if (["class", "style"].find((me) => me === p) && !A && (A = c.get("/converter/appearance.converter") || null), A && A.convertFrom)
return A.convertFrom(l, M, g, P);
const W = l[M];
return Object.prototype.hasOwnProperty.call(n, "defaultValue") && (W === void 0 || typeof W == "string" && W === "") ? n.type === "boolean" ? n.defaultValue : n.defaultValue || "" : W;
}
return null;
},
set(W) {
R.value += 1, A && A.convertTo ? (A.convertTo(d, M, W, g, P), A.convertTo(l, M, W, g, P)) : (d[M] = W, l[M] = W);
}
}), { refreshPanelAfterChanged: L, description: ue, isExpand: fe, parentPropertyID: pe } = n, X = { propertyID: p, propertyName: O, propertyType: u, propertyValue: q, editor: h, visible: w, readonly: D, cascadeConfig: C, hideCascadeTitle: H, refreshPanelAfterChanged: L, description: ue, isExpand: fe, parentPropertyID: pe };
return o[p] = X, X;
});
}
function i(a, o, l = {}) {
const d = {}, g = e[a];
return g && g.categories ? Object.keys(g.categories).map(($) => {
const E = g.categories[$], M = E == null ? void 0 : E.title, R = y(E.properties || {}, d, {}, l, o);
return { categoryId: $, categoryName: M, properties: R };
}) : [];
}
function s(a, o, l, d, g = "") {
const P = o.$ref.schema, $ = o.$ref.converter, E = l[P], M = E.type, R = r(E), p = {}, n = e[M];
if (n && n.categories) {
const f = n.categories[a], O = f == null ? void 0 : f.title;
$ && Object.keys(f.properties).forEach((h) => {
f.properties[h].$converter = $;
});
const u = (f == null ? void 0 : f.properties) || {}, b = y(u, p, R, E, d, g);
return { categoryId: a, categoryName: O, properties: b };
}
return { categoryId: a, categoryName: "", properties: [] };
}
function v(a, o, l, d, g) {
const P = a.type, $ = r(a), E = {};
let M = g || e[P];
if (M && Object.keys(M).length === 0 && l && l.getPropConfig && (M = l.getPropConfig(d)), M && M.categories) {
const R = [];
return Object.keys(M.categories).map((p) => {
const n = M.categories[p];
if (n.$ref) {
R.push(s(p, n, a, o, d));
return;
}
const f = n == null ? void 0 : n.title, O = n == null ? void 0 : n.tabId, u = n == null ? void 0 : n.tabName, b = n == null ? void 0 : n.hide, h = n == null ? void 0 : n.hideTitle, w = y(n.properties || {}, E, $, a, o, d, n.$converter), { setPropertyRelates: D } = n, C = n == null ? void 0 : n.parentPropertyID;
R.push({ categoryId: p, categoryName: f, tabId: O, tabName: u, hide: b, properties: w, hideTitle: h, setPropertyRelates: D, parentPropertyID: C });
}), R;
}
return [];
}
return {
getPropertyConfigBySchema: v,
getPropertyConfigByType: i,
propertyConverterMap: c
};
}
const ne = {}, re = {};
te(ne, re, we);
const oe = {}, ae = {}, { getSchemaByType: dt, resolveSchemaWithDefaultValue: Ze, resolveSchemaToProps: yt, mappingSchemaToProps: bt, setDesignerContext: gt } = x(oe, ae), ie = {}, ce = {};
te(ie, ce, Ze);
function xe(e, t, r = /* @__PURE__ */ new Map(), c = (S, B, k, m) => B, T = {}, F = (S) => S) {
return I[t.title] = t, K[t.title] = c, ne[t.title] = T, re[t.title] = F, oe[t.title] = t, ae[t.title] = c, ie[t.title] = T, ce[t.title] = F, (S = {}, B = !0) => {
if (!B)
return Pe(S, r);
const k = je(S, t, r), m = Object.keys(e).reduce((y, i) => (y[i] = e[i].default, y), {});
return Object.assign(m, k);
};
}
function Ie(e, t) {
return { customClass: t.class, customStyle: t.style };
}
const Ke = /* @__PURE__ */ new Map([
["appearance", Ie]
]);
function et(e, t, r) {
return t;
}
const tt = "capsule", nt = "A Farris Component", rt = "object", ot = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, at = {
title: tt,
description: nt,
type: rt,
categories: ot
}, Q = {
items: {
Type: Array,
default: [
{ name: "升序", value: "asc", icon: "f-icon f-icon-col-ascendingorder" },
{ name: "降序", value: "desc", icon: "f-icon f-icon-col-descendingorder" }
]
},
/**
* 组件值
*/
modelValue: { type: String, default: "" },
type: { type: String, default: "primary" }
}, it = {
name: { type: String, default: "" },
value: { type: String, default: "" },
isActive: { type: Boolean, default: !1 },
icon: { type: String, default: "" },
index: { type: Number, default: 0 },
show: { type: Boolean, default: !0 },
disabled: { type: Boolean, default: !1 }
}, le = xe(Q, Oe, Ke, et, at), se = /* @__PURE__ */ J({
name: "FCapsuleItem",
props: it,
emits: ["mounted", "active"],
setup(e, t) {
const r = j(), c = j(e.isActive);
z(() => e.isActive, (S) => {
c.value = S;
});
const T = N(() => ({
"f-capsule-item": !0,
"f-capsule-active-item": c.value,
"f-capsule-disabled": e.disabled
}));
_(() => {
t.emit("mounted", r, e.value);
});
function F(S) {
e.disabled || t.emit("active", S, {
name: e.name,
value: e.value
});
}
return () => V("div", {
ref: r,
class: T.value,
onClick: (S) => F(S)
}, [e.icon && V("i", {
class: e.icon
}, null), e.name]);
}
}), U = /* @__PURE__ */ J({
name: "FCapsule",
props: Q,
emits: ["change", "update:modelValue"],
setup(e, t) {
const r = j(e.items), c = j(), T = 2, F = j(e.modelValue), S = j("none"), B = j(e.type), k = N(() => {
const p = {
"f-capsule-container": !0
};
return B.value && (p[B.value] = !0), p;
}), m = N(() => ({})), y = N(() => ({
"f-capsule": !0
})), i = j(T), s = j(0), v = j(0), a = N(() => ({
left: `${i.value}px`,
width: `${s.value}px`,
transition: S.value
})), o = N(() => ({
width: `${v.value}px`
})), l = /* @__PURE__ */ new Map();
function d(p) {
var n;
if (l.has(p.value)) {
const f = (n = l.get(p.value)) == null ? void 0 : n.value;
if (f) {
const O = f.getBoundingClientRect(), u = c.value.getBoundingClientRect();
i.value = O.left - u.left + T + c.value.scrollLeft, s.value = O.width - 2 * T;
}
}
}
function g(p, n) {
const f = p.value;
F.value = f, t.emit("update:modelValue", f), d(p), n && t.emit("change", f);
}
function P(p) {
const n = r.value.findIndex((f) => f.value === p);
n > -1 && g(r.value[n], !1);
}
z(() => e.modelValue, (p) => {
F.value = p, P(F.value);
}), _(async () => {
P(F.value), await G(), S.value = "0.1s ease-out all", v.value = Array.from(l.values()).reduce((p, n) => (p += n.value.clientWidth, p), 0);
});
function $(p, n) {
g(n, !0);
}
function E(p, n) {
l.set(n, p);
}
function M(p) {
Array.from(l.keys()).forEach((n) => {
p.find((O) => O.value === n) || l.delete(n);
});
}
function R(p, n) {
return V(se, {
name: p.name,
value: p.value,
isActive: p.value === F.value,
index: n,
disabled: p.disabled,
key: p.value,
onMounted: E,
onActive: $
}, null);
}
return z(() => e.items, async (p) => {
const n = p.filter((f) => f.show);
M(n), r.value = n, await G(), P(F.value), v.value = Array.from(l.values()).reduce((f, O) => (f += O.value.clientWidth, f), 0);
}), () => V("span", {
ref: c,
class: k.value,
style: m.value
}, [V("span", {
class: "f-capsule-pane"
}, [r.value.map((p, n) => R(p, n))]), V("small", {
class: y.value,
style: a.value
}, null), V("div", {
class: "f-capsule-board",
style: o.value
}, null)]);
}
});
function ct(e, t, r) {
var O;
const c = "", T = "", F = j();
let S;
function B() {
return (t == null ? void 0 : t.schema.componentType) !== "frame";
}
function k() {
return !1;
}
function m() {
return (t == null ? void 0 : t.schema.componentType) !== "frame";
}
function y() {
return (t == null ? void 0 : t.schema.componentType) === "frame";
}
function i(u) {
if (!u || !u.value)
return null;
if (u.value.schema && u.value.schema.type === "component")
return u.value;
const b = j(u == null ? void 0 : u.value.parent), h = i(b);
return h || null;
}
function s(u = t) {
var D;
const { componentInstance: b, designerItemElementRef: h } = u;
if (!b || !b.value)
return null;
const { getCustomButtons: w } = b.value;
return b.value.canMove || w && ((D = w()) != null && D.length) ? h : s(u.parent);
}
function v(u) {
return !!r;
}
function a() {
return (t == null ? void 0 : t.schema.label) || (t == null ? void 0 : t.schema.title) || (t == null ? void 0 : t.schema.name);
}
function o() {
}
function l(u, b) {
var h;
!u || !b || (h = t == null ? void 0 : t.setupContext) == null || h.emit("dragEnd");
}
function d(u, b) {
const { componentType: h } = u;
let w = de(h, u, b);
const D = h.toLowerCase().replace(/-/g, "_");
return w && !w.id && w.type === h && (w.id = `${D}_${Math.random().toString().slice(2, 6)}`), w;
}
function g(u) {
}
function P(...u) {
}
function $(u) {
if (!u)
return;
const b = t == null ? void 0 : t.schema, { formSchemaUtils: h } = u;
if (b && h.getExpressions().length) {
const w = h.getExpressions().findIndex((D) => D.target === b.id);
w > -1 && h.getExpressions().splice(w, 1);
}
}
function E(u) {
if (!u || !(t != null && t.schema))
return;
const b = t.schema, { formSchemaUtils: h } = u;
h.removeCommunicationInComponent(b);
}
function M(u) {
$(u), E(u), t != null && t.schema.contents && t.schema.contents.map((b) => {
let h = b.id;
b.type === "component-ref" && (h = b.component);
const w = e.value.querySelectorAll(`#${h}-design-item`);
w != null && w.length && Array.from(w).map((D) => {
var C;
(C = D == null ? void 0 : D.componentInstance) != null && C.value.onRemoveComponent && D.componentInstance.value.onRemoveComponent(u);
});
});
}
function R() {
}
function p(u) {
var h, w;
if (!((h = t == null ? void 0 : t.schema) != null && h.id))
return;
!S && u && (S = u.formSchemaUtils);
let b = "";
{
const { text: D, title: C, label: H, mainTitle: A, name: q, type: L } = t.schema;
b = D || C || H || A || q || ((w = ee[L]) == null ? void 0 : w.name);
}
b && S.getControlBasicInfoMap().set(t.schema.id, {
componentTitle: b,
parentPathName: b
});
}
function n(u) {
var D;
const { changeObject: b } = u, { propertyID: h, propertyValue: w } = b;
if (["text", "title", "label", "name", "mainTitle"].includes((D = u == null ? void 0 : u.changeObject) == null ? void 0 : D.propertyID) && h && w && (p(), S)) {
const C = S.getControlBasicInfoMap(), H = C.keys().toArray().filter((A) => {
var q, L;
return ((q = C.get(A)) == null ? void 0 : q.reliedComponentId) === ((L = t == null ? void 0 : t.schema) == null ? void 0 : L.id);
});
H != null && H.length && H.forEach((A) => {
const q = C.get(A).parentPathName.split(" > ");
q[0] = w, C.get(A).parentPathName = q.join(" > ");
});
}
}
function f(u) {
n(u);
}
return F.value = {
canMove: B(),
canSelectParent: k(),
canDelete: m(),
canNested: !y(),
contents: t == null ? void 0 : t.schema.contents,
elementRef: e,
parent: (O = t == null ? void 0 : t.parent) == null ? void 0 : O.componentInstance,
schema: t == null ? void 0 : t.schema,
styles: c,
designerClass: T,
canAccepts: v,
getBelongedComponentInstance: i,
getDraggableDesignItemElement: s,
getDraggingDisplayText: a,
getPropConfig: P,
getDragScopeElement: o,
onAcceptMovedChildElement: l,
onChildElementMovedOut: g,
addNewChildComponentSchema: d,
triggerBelongedComponentToMoveWhenMoved: j(!1),
triggerBelongedComponentToDeleteWhenDeleted: j(!1),
onRemoveComponent: M,
getCustomButtons: R,
onPropertyChanged: f,
setComponentBasicInfoMap: p,
updateContextSchema: t == null ? void 0 : t.updateContextSchema
}, F;
}
const lt = /* @__PURE__ */ J({
name: "FCapsuleDesign",
props: Q,
emits: ["change", "update:modelValue"],
setup(e, t) {
const r = j(e.items), c = j(), T = 2, F = j(e.modelValue), S = j("none"), B = j(e.type), k = ve("design-item-context"), m = ct(c, k);
_(() => {
c.value.componentInstance = m;
}), t.expose(m.value);
const y = N(() => {
const n = {
"f-capsule-container": !0
};
return B.value && (n[B.value] = !0), n;
}), i = N(() => ({})), s = N(() => ({
"f-capsule": !0
})), v = j(T), a = j(0), o = j(0), l = N(() => ({
left: `${v.value}px`,
width: `${a.value}px`,
transition: S.value
})), d = N(() => ({
width: `${o.value}px`
})), g = /* @__PURE__ */ new Map();
function P(n) {
var f;
if (g.has(n.value)) {
const O = (f = g.get(n.value)) == null ? void 0 : f.value;
if (O) {
const u = O.getBoundingClientRect(), b = c.value.getBoundingClientRect();
v.value = u.left - b.left + T + c.value.scrollLeft, a.value = u.width - 2 * T;
}
}
}
function $(n, f) {
const O = n.value;
F.value = O, t.emit("update:modelValue", O), P(n), f && t.emit("change", O);
}
function E(n) {
const f = r.value.findIndex((O) => O.value === n);
f > -1 && $(r.value[f], !1);
}
z(() => e.modelValue, (n) => {
F.value = n, E(F.value);
}), z(() => e.items, async (n) => {
r.value = n, await G(), E(F.value), o.value = Array.from(g.values()).reduce((f, O) => (f += O.value.clientWidth, f), 0);
}), _(async () => {
E(F.value), await G(), S.value = "0.1s ease-out all", o.value = Array.from(g.values()).reduce((n, f) => (n += f.value.clientWidth, n), 0);
});
function M(n, f) {
$(f, !0);
}
function R(n, f) {
g.set(f, n);
}
function p(n, f) {
return V(se, {
name: n.name,
value: n.value,
isActive: n.value === F.value,
index: f,
onMounted: R,
onActive: M
}, null);
}
return () => V("span", {
ref: c,
class: y.value,
style: i.value
}, [V("span", {
class: "f-capsule-pane"
}, [r.value.map((n, f) => p(n, f))]), V("small", {
class: s.value,
style: l.value
}, null), V("div", {
class: "f-capsule-board",
style: d.value
}, null)]);
}
});
U.register = (e, t, r) => {
e.capsule = U, t.capsule = le;
};
U.registerDesigner = (e, t, r) => {
e.capsule = lt, t.capsule = le;
};
const ht = ye(U);
export {
U as FCapsule,
it as capsuleItemProps,
Q as capsuleProps,
ht as default,
le as propsResolver
};