@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,295 lines (1,294 loc) • 45.3 kB
JavaScript
import { withInstall as pe } from "../common/index.esm.js";
import { ref as R, computed as W, onMounted as H, onUnmounted as ve, defineComponent as I, watch as be, nextTick as ge, createVNode as y, createTextVNode as K, resolveComponent as ye, inject as Q } from "vue";
import { isPlainObject as Y, cloneDeep as Z } from "lodash-es";
import { getSchemaByTypeForDesigner as Te } from "../dynamic-resolver/index.esm.js";
function ee(e, t) {
let n;
function r(a) {
const { properties: s, title: m, ignore: i } = a, o = i && Array.isArray(i), l = Object.keys(s).reduce((b, k) => ((!o || !i.find((E) => E === k)) && (b[k] = s[k].type === "object" && s[k].properties ? r(s[k]) : Z(s[k].default)), b), {});
if (m && (!o || !i.find((b) => b === "id"))) {
const b = m.toLowerCase().replace(/-/g, "_");
l.id = `${b}_${Math.random().toString().slice(2, 6)}`;
}
return l;
}
function f(a) {
const { properties: s, title: m, required: i } = a;
if (i && Array.isArray(i)) {
const o = i.reduce((l, b) => (l[b] = s[b].type === "object" && s[b].properties ? r(s[b]) : Z(s[b].default), l), {});
if (m && i.find((l) => l === "id")) {
const l = m.toLowerCase().replace(/-/g, "_");
o.id = `${l}_${Math.random().toString().slice(2, 6)}`;
}
return o;
}
return {
type: m
};
}
function d(a, s = {}, m) {
const i = e[a];
if (i) {
let o = f(i);
const l = t[a];
return o = l ? l({ getSchemaByType: d }, o, s, m) : o, n != null && n.appendIdentifyForNewControl && n.appendIdentifyForNewControl(o), o;
}
return null;
}
function T(a, s) {
const m = r(s);
return Object.keys(m).reduce((i, o) => (Object.prototype.hasOwnProperty.call(a, o) && (i[o] && Y(i[o]) && Y(a[o] || !a[o]) ? Object.assign(i[o], a[o] || {}) : i[o] = a[o]), i), m), m;
}
function g(a, s) {
return Object.keys(a).filter((i) => a[i] != null).reduce((i, o) => {
if (s.has(o)) {
const l = s.get(o);
if (typeof l == "string")
i[l] = a[o];
else {
const b = l(o, a[o], a);
Object.assign(i, b);
}
} else
i[o] = a[o];
return i;
}, {});
}
function u(a, s, m = /* @__PURE__ */ new Map()) {
const i = T(a, s);
return g(i, m);
}
function c(a) {
var m;
const s = a.type;
if (s) {
const i = e[s];
if (!i)
return a;
const o = T(a, i), l = ((m = a.editor) == null ? void 0 : m.type) || "";
if (l) {
const b = e[l], k = T(a.editor, b);
o.editor = k;
}
return o;
}
return a;
}
function p(a) {
n = a;
}
return { getSchemaByType: d, resolveSchemaWithDefaultValue: c, resolveSchemaToProps: u, mappingSchemaToProps: g, setDesignerContext: p };
}
const te = {}, ne = {}, { resolveSchemaWithDefaultValue: he, resolveSchemaToProps: Se, mappingSchemaToProps: we } = ee(te, ne);
function ke(e = {}) {
function t(c, p, a, s) {
if (typeof a == "number")
return s[c].length === a;
if (typeof a == "object") {
const m = Object.keys(a)[0], i = a[m];
if (m === "not")
return Number(s[c].length) !== Number(i);
if (m === "moreThan")
return Number(s[c].length) >= Number(i);
if (m === "lessThan")
return Number(s[c].length) <= Number(i);
}
return !1;
}
function n(c, p, a, s) {
return s[c] && s[c].propertyValue && String(s[c].propertyValue.value) === String(a);
}
const r = /* @__PURE__ */ new Map([
["length", t],
["getProperty", n]
]);
Object.keys(e).reduce((c, p) => (c.set(p, e[p]), c), r);
function f(c, p) {
const a = c;
return typeof p == "number" ? [{ target: a, operator: "length", param: null, value: Number(p) }] : typeof p == "boolean" ? [{ target: a, operator: "getProperty", param: c, value: !!p }] : typeof p == "object" ? Object.keys(p).map((s) => {
if (s === "length")
return { target: a, operator: "length", param: null, value: p[s] };
const m = s, i = p[s];
return { target: a, operator: "getProperty", param: m, value: i };
}) : [];
}
function d(c) {
return Object.keys(c).reduce((a, s) => {
const m = f(s, c[s]);
return a.push(...m), a;
}, []);
}
function T(c, p) {
if (r.has(c.operator)) {
const a = r.get(c.operator);
return a && a(c.target, c.param, c.value, p) || !1;
}
return !1;
}
function g(c, p) {
return d(c).reduce((m, i) => m && T(i, p), !0);
}
function u(c, p) {
const a = Object.keys(c), s = a.includes("allOf"), m = a.includes("anyOf"), i = s || m, b = (i ? c[i ? s ? "allOf" : "anyOf" : "allOf"] : [c]).map((E) => g(E, p));
return s ? !b.includes(!1) : b.includes(!0);
}
return { parseValueSchema: u };
}
const Fe = {
convertTo: (e, t, n, r) => {
e.appearance || (e.appearance = {}), e.appearance[t] = n;
},
convertFrom: (e, t, n) => e.appearance ? e.appearance[t] : e[t]
}, Pe = {
convertFrom: (e, t, n) => e.buttons && e.buttons.length ? `共 ${e.buttons.length} 项` : "无"
}, Oe = {
convertTo: (e, t, n, r) => {
e.editor && (e.editor[t] = n);
},
convertFrom: (e, t, n) => e.editor && Object.prototype.hasOwnProperty.call(e.editor, t) ? e.editor[t] : e[t]
}, re = {
button: { type: "button", name: "按钮" },
"response-toolbar": { type: "response-toolbar", name: "工具栏" },
"response-toolbar-item": { type: "response-toolbar-item", name: "按钮" },
"content-container": { type: "content-container", name: "容器" },
table: { type: "table", name: "表格布局" },
"table-td": { type: "table-td", 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: "标签页工具栏按钮" },
"drawer-toolbar-item": { type: "drawer-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: "标签页工具栏" },
"drawer-toolbar": { type: "drawer-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: "列表导航" },
nav: { type: "nav", name: "标签类导航" },
"list-view": { type: "list-view", name: "列表" },
"filter-bar": { type: "filter-bar", name: "筛选条" },
"language-textbox": { type: "language-textbox", name: "多语输入框" },
image: { type: "image", name: "图像" },
avatar: { type: "avatar", name: "头像" },
"discussion-editor": { type: "discussion-editor", name: "评论编辑区" },
"discussion-list": { type: "discussion-list", name: "评论列表" },
comment: { type: "comment", name: "评论区" },
"approval-logs": { type: "approval-logs", name: "审批记录" },
"rich-text-editor": { type: "rich-text-editor", name: "富文本", icon: "rich-text-box" },
calendar: { type: "calendar", name: "日历", icon: "date-picker" },
wizard: { type: "wizard", name: "向导", icon: "wizard" },
"wizard-page": { type: "wizard-page", name: "向导页", icon: "wizard" },
"wizard-page-detail": { type: "wizard-page-detail", name: "向导详情", icon: "wizard" },
step: { type: "step", name: "步骤条", icon: "step" },
"dynamic-form": { type: "dynamic-form", name: "动态表单" }
}, Ne = {
convertFrom: (e, t, n) => {
var f;
const r = e.editor && e.editor[t] ? e.editor[t] : e[t];
return ((f = re[r]) == null ? void 0 : f.name) || r;
}
}, De = {
convertTo: (e, t, n, r) => {
e[t] = e[t];
},
convertFrom: (e, t, n) => e.editor ? n.getRealEditorType(e.editor.type) : ""
}, Me = {
convertTo: (e, t, n, r) => {
(e.type === "data-grid-column" || e.type === "tree-grid-column") && (e.formatter ? e.formatter[t] = n : e.formatter = {
[t]: n
});
},
convertFrom: (e, t, n) => {
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 === "dateFormat")
return e.formatter.dateFormat || "yyyy-MM-dd";
if (t === "customFormat")
return e.formatter.customFormat;
if (t === "type")
return e.formatter.type || "none";
}
return "none";
}
}, Ee = {
convertTo: (e, t, n, r) => {
e.command ? e.command[t] = n : e.command = {
[t]: n
}, t === "enableType" && n === "default" && (e.command.enable = !0, e.command.formatter = "", e.command.commands = [
{
text: "编辑",
type: "primary",
command: "edit"
},
{
text: "删除",
type: "danger",
command: "remove"
}
]), t === "enableType" && n === "custom" && (e.command.enable = !0, e.command.commands = [
{
value: "add",
text: "增加",
type: "link"
},
{
value: "edit",
text: "编辑",
type: "link"
},
{
value: "remove",
text: "删除",
type: "link"
}
]), t === "enableType" && n === "unable" && (e.command.enable = !1, e.command.formatter = "");
},
convertFrom: (e, t, n) => {
var r, f;
if (e.command) {
if (t === "enableType") {
if (e.command.enableType)
return e.command.enableType;
const d = (f = (r = e.command) == null ? void 0 : r.commands) == null ? void 0 : f.find((T) => T.command === "edit" && T.type === "primary");
return e.command.enable ? d ? "default" : "custom" : "unable";
}
if (t === "commands")
return e.command.enableType === "custom" ? e.command.commands : [];
if (t === "formatter")
return e.command.formatter;
if (t === "count")
return e.command.count;
if (t === "columnWidth")
return e.command.columnWidth || 200;
}
return "";
}
}, je = {
convertTo: (e, t, n, r) => {
if (e.column || (e.column = {}), t === "fitMode") {
n && n !== "none" ? (e.column.fitColumns = !0, e.column.fitMode = n) : (e.column.fitColumns = !1, e.column.fitMode = "average");
return;
}
if (t === "fitColumns") {
e.column.fitColumns = n, n && !e.column.fitMode && (e.column.fitMode = "average");
return;
}
e.column[t] = n;
},
convertFrom: (e, t, n) => {
if (e.column) {
if (t === "fitMode")
return e.column.fitColumns ? e.column.fitMode || "average" : "none";
if (t === "fitColumns")
return e.column.fitColumns;
}
return t === "fitMode" ? "none" : "";
}
}, $e = {
convertTo: (e, t, n, r) => {
e.summary ? e.summary[t] = n : e.summary = {
[t]: n
}, t === "enable" && n && (e.summary ? e.summary.groupFields || (e.summary.groupFields = []) : e.summary = {
enable: n,
groupFields: []
});
},
convertFrom: (e, t, n) => {
var r, f;
return t === "customSummaryStyle" ? e.summary.customSummaryStyle : t === "position" ? ((r = e.summary) == null ? void 0 : r[t]) || "bottom" : t === "customRender" ? ((f = e.summary) == null ? void 0 : f[t]) || "" : e.summary && t === "enable" ? e.summary.enable : e.type === "data-grid-column" ? e.enableSummary === void 0 ? !1 : e.enableSummary : "";
}
}, Re = {
convertTo: (e, t, n, r) => {
e.group ? e.group[t] = n : e.group = {
[t]: n
}, t === "enable" && n && (e.group ? e.group.groupFields || (e.group.groupFields = []) : e.group = {
enable: n,
groupFields: [],
showSummary: !1,
customRender: ""
});
},
convertFrom: (e, t, n) => {
if (e.group) {
if (t === "enable")
return e.group.enable;
if (t === "showSummary")
return e.group.showSummary;
if (t === "customRender")
return e.group.customRender;
if (t === "groupFields")
return e.group.groupFields;
}
}
}, Le = {
convertFrom: (e, t) => e.binding ? e.binding.path : "",
convertTo: (e, t, n) => {
if (n && n.length > 0) {
const r = n[0];
e.binding || (e.binding = {}), e.binding.type = "Form", e.binding.path = r.bindingField, e.binding.field = r.id, e.binding.fullPath = r.path, e.path = r.bindingPath;
}
}
}, Be = {
convertTo: (e, t, n, r) => {
if (e.pagination || (e.pagination = {}), t === "sizeLimits")
if (n == null)
delete e.pagination.sizeLimits;
else {
const f = [...new Set(
String(n).split(",").map((d) => d.trim()).filter((d) => d !== "").map((d) => parseInt(d, 10)).filter((d) => !Number.isNaN(d) && d > 0)
)];
f.length > 0 ? e.pagination.sizeLimits = f : delete e.pagination.sizeLimits;
}
else
e.pagination[t] = n;
},
convertFrom: (e, t, n) => {
var r;
return e.pagination ? t === "sizeLimits" ? ((r = e.pagination.sizeLimits) == null ? void 0 : r.join(",")) ?? "" : e.pagination[t] : e[t];
}
}, Ce = {
convertTo: (e, t, n, r) => {
e.rowNumber || (e.rowNumber = {}), e.rowNumber[t] = n;
},
convertFrom: (e, t, n) => e.rowNumber ? e.rowNumber[t] : e[t]
}, ze = {
convertTo: (e, t, n, r) => {
e.selection || (e.selection = {}), e.selection[t] = n;
},
convertFrom: (e, t, n) => {
if (!e.selection)
return !!e[t];
const r = !!e.selection[t];
return t === "showCheckbox" && r == null && e.selection.multiSelect === !0 ? !0 : r;
}
}, Ae = {
convertFrom: (e, t, n) => e[t] && e[t].length ? `共 ${e[t].length} 项` : ""
}, xe = {
convertFrom: (e, t) => e[t] || "",
convertTo: (e, t, n) => {
e[t] = n;
}
}, qe = {
convertTo: (e, t, n, r) => {
e.size || (e.size = {}), e.size[t] = n;
},
convertFrom: (e, t, n) => e.size ? e.size[t] : e[t]
}, We = {
convertFrom: (e, t, n) => {
var r, f;
return (r = e.formatter) != null && r.data && t === "formatterEnumData" && !e.formatterEnumData ? (f = e.formatter) == null ? void 0 : f.data : e.formatterEnumData;
}
}, Ue = {
convertTo: (e, t, n, r) => {
e.sort || (e.sort = {}), e.sort[t] = n;
},
convertFrom: (e, t, n) => {
var r, f;
if (t === "mode")
return ((r = e.sort) == null ? void 0 : r.mode) || "client";
if (t === "multiSort")
return !!((f = e.sort) != null && f.multiSort);
}
}, _e = {
convertTo: (e, t, n, r) => {
e.filter || (e.filter = {}), e.filter[t] = n, t === "enable" && (e.enableFilter = !1);
},
convertFrom: (e, t, n) => {
var r, f, d, T;
return t === "mode" ? ((r = e.filter) == null ? void 0 : r.mode) || "server" : t === "filterStyle" ? ((f = e.filter) == null ? void 0 : f.filterStyle) || "filter-column" : t === "enable" ? ((d = e.filter) == null ? void 0 : d.enable) !== void 0 ? !!e.filter.enable : !!e.enableFilter : ((T = e.filter) == null ? void 0 : T[t]) || void 0;
}
}, Ge = {
convertTo: (e, t, n, r) => {
e.rowOption ? e.rowOption[t] = n : e.rowOption = {
[t]: n
};
},
convertFrom: (e, t, n) => {
if (e.rowOption) {
if (t === "customRowStyle")
return e.rowOption.customRowStyle;
if (t === "customCellStyle")
return e.rowOption.customCellStyle;
if (t === "height")
return e.rowOption.height;
}
return "";
}
}, He = {
convertTo: (e, t, n, r) => {
(e.type === "data-grid-column" || e.type === "tree-grid-column") && (e[t] = n, t === "columnTemplateType" && n === "hyperlink" && (e.onClickLinkCommand ? e.columnTemplate = `
<span class="f-pretend-link f-cursor-pointer"
@click="(ctx)=>viewModel.current.${e.onClickLinkCommand || ""}({id: rowData.id,context: ctx})">
{{rowData.${e.field}}}
</span>` : e.columnTemplate = `
<span class="f-pretend-link f-cursor-pointer">
{{rowData.${e.field}}}
</span>`), t === "columnTemplateType" && n === "default" && (e.columnTemplate = ""), t === "columnTemplateType" && n === "custom" && (e.columnTemplate = ""));
},
convertFrom: (e, t, n) => t === "columnTemplate" ? e.columnTemplate : t === "columnTemplateType" ? e.columnTemplateType ? e.columnTemplateType || "default" : e.columnTemplate && !e.onClickLinkCommand ? "custom" : e.columnTemplate && e.onClickLinkCommand ? "hyperlink" : "default" : ""
}, Xe = {
convertTo: (e, t, n, r) => {
e.hierarchy || (e.hierarchy = {
cascadeOption: {}
}), e.hierarchy.cascadeOption || (e.hierarchy.cascadeOption = {}), e.hierarchy.cascadeOption[t] = n;
},
convertFrom: (e, t, n) => {
var r, f;
return !!((f = (r = e.hierarchy) == null ? void 0 : r.cascadeOption) != null && f[t]);
}
};
function oe(e, t, n) {
const r = /* @__PURE__ */ new Map([
["/converter/appearance.converter", Fe],
["/converter/buttons.converter", Pe],
["/converter/property-editor.converter", Oe],
["/converter/items-count.converter", Ae],
["/converter/type.converter", Ne],
["/converter/change-editor.converter", De],
["/converter/change-formatter.converter", Me],
["/converter/column-command.converter", Ee],
["/converter/column-option.converter", je],
["/converter/summary.converter", $e],
["/converter/group.converter", Re],
["/converter/form-group-label.converter", xe],
["/converter/field-selector.converter", Le],
["/converter/pagination.converter", Be],
["/converter/row-number.converter", Ce],
["/converter/grid-selection.converter", ze],
["/converter/size.converter", qe],
["/converter/change-formatter-enum.converter", We],
["/converter/grid-sort.converter", Ue],
["/converter/grid-filter.converter", _e],
["/converter/row-option.converter", Ge],
["/converter/change-formatter-type.converter", He],
["/converter/tree-auto-check.converter", Xe]
]), f = /* @__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 }],
["multiLanguage", { type: "language-textbox" }]
]), d = ke();
function T(i, o) {
return () => d.parseValueSchema(i, o);
}
function g(i, o, l) {
return i.includes("visible") && o.visible !== void 0 ? typeof o.visible == "boolean" ? () => !!o.visible : o.visible === void 0 ? !0 : T(o.visible, l) : () => !0;
}
function u(i, o, l) {
return i.includes("readonly") && o.readonly !== void 0 ? typeof o.readonly == "boolean" ? () => !!o.readonly : T(o.readonly, l) : () => !1;
}
function c(i, o) {
const l = i.$converter || o;
return typeof l == "string" && l && r.has(l) ? r.get(l) || null : l || null;
}
function p(i, o, l, b, k, E = "", w = "") {
return Object.keys(i).map((F) => {
const B = R(1), L = F, P = i[F], h = Object.keys(P), q = P.title, C = P.type, v = f.get(C) || { type: "input-group", enableClear: !1 }, S = P.editor ? Object.assign({}, v, P.editor) : Object.assign({}, v), O = g(h, P, o), N = u(h, P, o);
S.readonly = S.readonly === void 0 ? N() : S.readonly;
const M = P.type === "cascade" ? p(P.properties, o, l, b, k, E, w) : [], $ = !0;
let j = c(P, w);
const x = W({
get() {
if (B.value) {
if (["class", "style"].find((_) => _ === L) && !j && (j = r.get("/converter/appearance.converter") || null), j && j.convertFrom) {
const _ = j.convertFrom(l, F, k, E);
return _ === void 0 && Object.prototype.hasOwnProperty.call(P, "defaultValue") ? P.type === "boolean" ? P.defaultValue : P.defaultValue || "" : _;
}
const A = l[F];
return Object.prototype.hasOwnProperty.call(P, "defaultValue") && (A === void 0 || typeof A == "string" && A === "") ? P.type === "boolean" ? P.defaultValue : P.defaultValue || "" : A;
}
return null;
},
set(A) {
B.value += 1, j && j.convertTo ? (j.convertTo(b, F, A, k, E), j.convertTo(l, F, A, k, E)) : (b[F] = A, l[F] = A);
}
}), { refreshPanelAfterChanged: z, description: U, isExpand: de, parentPropertyID: me } = P, J = { propertyID: L, propertyName: q, propertyType: C, propertyValue: x, editor: S, visible: O, readonly: N, cascadeConfig: M, hideCascadeTitle: $, refreshPanelAfterChanged: z, description: U, isExpand: de, parentPropertyID: me };
return o[L] = J, J;
});
}
function a(i, o, l = {}) {
const b = {}, k = e[i];
return k && k.categories ? Object.keys(k.categories).map((w) => {
const D = k.categories[w], F = D == null ? void 0 : D.title, B = p(D.properties || {}, b, {}, l, o);
return { categoryId: w, categoryName: F, properties: B };
}) : [];
}
function s(i, o, l, b, k = "") {
const E = o.$ref.schema, w = o.$ref.converter, D = l[E], F = D.type, B = n(D), L = {}, P = e[F];
if (P && P.categories) {
const h = P.categories[i], q = h == null ? void 0 : h.title;
w && Object.keys(h.properties).forEach((S) => {
h.properties[S].$converter = w;
});
const C = (h == null ? void 0 : h.properties) || {}, v = p(C, L, B, D, b, k);
return { categoryId: i, categoryName: q, properties: v };
}
return { categoryId: i, categoryName: "", properties: [] };
}
function m(i, o, l, b, k) {
const E = i.type, w = n(i), D = {};
let F = k || e[E];
if (!(F && Object.keys(F).length > 0) && l && l.getPropConfig && (F = l.getPropConfig(b)), F && F.categories) {
const L = [];
return Object.keys(F.categories).map((P) => {
const h = F.categories[P];
if (h.$ref) {
L.push(s(P, h, i, o, b));
return;
}
const q = h == null ? void 0 : h.title, C = h == null ? void 0 : h.tabId, v = h == null ? void 0 : h.tabName, S = h == null ? void 0 : h.hide, O = h == null ? void 0 : h.hideTitle, N = p(h.properties || {}, D, w, i, o, b, h.$converter), { setPropertyRelates: M } = h, $ = h == null ? void 0 : h.parentPropertyID;
L.push({ categoryId: P, categoryName: q, tabId: C, tabName: v, hide: S, properties: N, hideTitle: O, setPropertyRelates: M, parentPropertyID: $ });
}), L;
}
return [];
}
return {
getPropertyConfigBySchema: m,
getPropertyConfigByType: a,
propertyConverterMap: r
};
}
const ae = {}, ie = {};
oe(ae, ie, he);
const le = {}, se = {}, { resolveSchemaWithDefaultValue: Je } = ee(le, se), ce = {}, ue = {};
oe(ce, ue, Je);
function Qe(e, t, n = /* @__PURE__ */ new Map(), r = (T, g, u, c) => g, f = {}, d = (T) => T) {
return te[t.title] = t, ne[t.title] = r, ae[t.title] = f, ie[t.title] = d, le[t.title] = t, se[t.title] = r, ce[t.title] = f, ue[t.title] = d, (T = {}, g = !0) => {
if (!g)
return we(T, n);
const u = Se(T, t, n), c = Object.keys(e).reduce((p, a) => (p[a] = e[a].default, p), {});
return Object.assign(c, u);
};
}
function Ye(e, t) {
return { customClass: t.class, customStyle: t.style };
}
const Ze = /* @__PURE__ */ new Map([
["appearance", Ye],
["scrollItems", "itemRef"],
["title", "extendTitle"]
]);
function fe(e, t) {
Array.isArray(e) && e.forEach((n) => {
if (n) {
if (n.type === "section" || n.type === "html-template") {
const r = n.title || n.mainTitle || n.id || "";
t.push({
id: n.id || "",
type: n.type,
title: r,
originalTitle: r,
selector: "#" + n.id || "",
visible: !0
});
}
n.contents && fe(n.contents, t), n.type === "component-ref" && n.component;
}
});
}
function Ve(e) {
var n;
const t = [];
return (n = e.module) != null && n.components && e.module.components.forEach((r) => {
r.contents && fe(r.contents, t);
}), t;
}
function Ie(e, t, n, r) {
if (!r)
return console.warn("designerHostService is undefined, returning empty scrollItems"), t.scrollItems = [], t;
const f = Ve(r.formSchemaUtils.getFormSchema());
return t.scrollItems = f, t;
}
const Ke = "https://json-schema.org/draft/2020-12/schema", et = "https://farris-design.gitee.io/scroll-navbar.schema.json", tt = "scroll-navbar", nt = "滚动导航", rt = "object", ot = {
id: {
description: "标识",
type: "string"
},
type: {
description: "组件类型",
type: "string",
default: "scroll-navbar"
},
visible: {
description: "是否可见",
type: "boolean",
default: !0
},
title: {
description: "标题",
type: "string",
default: "导航栏"
},
scrollItems: {
description: "导航内容",
type: "array",
default: []
},
contentRef: {
description: "",
type: "string",
default: ".fm-page-main"
},
isManualEditMode: {
description: "",
type: "boolean",
default: !1
},
contents: {
description: "",
type: "array",
default: []
},
alwaysShow: {
description: "Whether the navbar is always visible",
type: "boolean",
default: !1
},
extendable: {
description: "Whether the tab bar is extendable",
type: "boolean",
default: !1
},
extendTitle: {
description: "Title for extendable functionality",
type: "string"
},
appearance: {
description: "Component appearance styling",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
}
}, at = [
"id",
"type",
"visible",
"scrollItems"
], it = {
$schema: Ke,
$id: et,
title: tt,
description: nt,
type: rt,
properties: ot,
required: at
}, X = {
/** 是否始终显示导航栏 */
alwaysShow: { type: Boolean, default: !1 },
/** 内容区域选择器 */
contentRef: { type: String, default: ".fm-page-main" },
/** 是否可扩展 */
extendable: { type: Boolean, default: !1 },
/** 扩展标题 */
extendTitle: { type: String, default: "" },
/** 导航项引用配置 */
itemRef: { type: Array, default: [] }
}, V = Qe(
X,
it,
Ze,
Ie
), lt = (e, t) => {
const n = R([]), r = (g) => g.map((u) => {
const { id: c = "", title: p = "", selector: a = "", visible: s = !0 } = u;
if (!s)
return null;
const m = e.value.querySelector(a);
if (!m)
return null;
const { offsetTop: i, clientHeight: o } = m;
return {
name: c,
title: p,
offsetTop: i,
clientHeight: o,
element: m
};
}).filter((u) => u !== null), f = (g) => {
const u = [];
return g.forEach((c) => {
const p = Array.from(e.value.querySelectorAll(c));
u.push(...p);
}), u.map((c) => {
const { dataset: p, offsetTop: a, clientHeight: s } = c;
return {
name: p.id || "",
title: p.title || "",
offsetTop: a,
clientHeight: s,
element: c
};
});
}, d = () => {
if (n.value = [], !t || Array.isArray(t) && t.length === 0)
return n.value;
try {
const g = typeof t == "string" ? [t] : t;
typeof g[0] == "string" ? n.value = f(g) : n.value = r(g), n.value.sort((u, c) => u.offsetTop - c.offsetTop);
} catch (g) {
console.warn("获取导航项时出错:", g);
}
return n.value;
}, T = () => {
const g = e.value.scrollTop || 0, u = n.value;
if (u.length === 0)
return { name: "", title: "", offsetTop: 0, clientHeight: 0, element: null };
for (let c = 0; c < u.length; c++) {
const p = u[c];
if (p.offsetTop + p.clientHeight / 2 > g)
return p;
}
return u[u.length - 1];
};
return {
items: R(n.value),
getItems: d,
getTopElementInView: T
};
}, st = (e, t, n, r, f, d, T) => {
let g = 0;
const u = {
active: !1,
start: 0,
end: 0,
timer: 0
}, c = W(() => d.value), p = W(() => ({
"f-scroll-navbar": !0,
"f-scroll-navbar-fixed": r.value.scrollTop > g,
"f-scroll-navbar-visible": d.value
})), a = () => !r.value || !n.value ? !1 : r.value.contains(n.value), s = () => {
if (e.alwaysShow || a()) {
d.value = !0;
return;
}
const w = f.value[0] ? f.value[0].offsetTop : 0;
d.value = r.value.scrollTop > w;
}, m = () => {
const w = r.value;
if (!w || !(w instanceof HTMLElement)) {
console.warn("Content element is not available for style checking");
return;
}
const D = getComputedStyle(w), F = ["fixed", "absolute", "relative"];
(!D.position || !F.includes(D.position)) && (w.style.position = "relative");
}, i = (w) => {
u.active = !0, r.value && "scrollTo" in r.value && r.value.scrollTo({
top: Math.max(0, w.offsetTop - 44),
behavior: "smooth"
}), T.value = w.name, t.emit("change", w);
const D = r.value.scrollTop;
setTimeout(() => {
D === r.value.scrollTop && (u.active = !1);
}, 500);
}, o = (w) => {
i(w.item), console.log(`点击了导航项: ${w.item.title}, 索引: ${w.index}`);
}, l = (w) => {
u.end = r.value.scrollTop, u.start === u.end && (u.active = !1, w());
}, b = () => {
if (!r.value || !n.value)
return;
if (a() && (n.value.classList.contains("f-scroll-navbar-fixed") || (g = n.value.offsetTop), r.value.scrollTop > g ? n.value.classList.add("f-scroll-navbar-fixed") : n.value.classList.remove("f-scroll-navbar-fixed")), u.active) {
clearTimeout(u.timer), u.timer = window.setTimeout(() => {
l(s);
}, 100), u.start = r.value.scrollTop;
return;
}
const { scrollTop: w } = r.value;
let D;
for (const F of f.value)
if (F.offsetTop + F.clientHeight / 2 > w) {
D = F;
break;
}
D ? T.value = D.name : f.value.length > 0 && (T.value = f.value[f.value.length - 1].name), s();
}, k = () => {
r.value && r.value.addEventListener("scroll", b);
}, E = () => {
r.value && r.value.removeEventListener("scroll", b);
};
return H(() => {
k(), m(), s();
}), ve(() => {
E();
}), {
/** 是否显示导航栏 */
shouldShowNavbar: c,
/** 导航栏样式类 */
navbarFixedClass: p,
/** 标签切换处理 */
handlertabChange: i,
/** 面板项目点击处理 */
handlePanelItemClick: o,
/** 检查内容样式 */
checkContentStyle: m,
/** 滚动处理 */
handlerScroll: b,
/** 检查导航栏显示状态 */
checkNavbarShow: s,
/** 导航栏显示状态引用 */
navbarShow: d,
/** 检查内容包含 */
checkContentContainsNavbar: a
};
}, G = /* @__PURE__ */ I({
name: "FScrollNavbar",
props: X,
emits: ["change", "update:modelValue"],
setup(e, t) {
const n = R(), r = R(e.modelValue), f = R(!0), d = R(!1), T = W(() => {
try {
return document.querySelector(e.contentRef) || document.body;
} catch {
return document.body;
}
}), {
items: g,
getItems: u
} = lt(T, e.itemRef), c = st(e, t, n, T, g, f, r);
be(() => e.modelValue, (o) => {
r.value = o;
});
const p = () => {
d.value = !d.value;
}, a = (o, l) => {
r.value = o.name, c.handlertabChange(o), t.emit("change", o, l), t.emit("update:modelValue", o.name);
}, s = (o) => {
a(o.item, o.index), d.value = !1;
};
H(() => {
ge(() => {
u(), c.checkContentStyle(), c.checkNavbarShow();
});
});
const m = W(() => !g.value || g.value.length === 0 ? [{
name: "section1",
title: "基本信息",
active: !0,
disabled: !1
}, {
name: "section2",
title: "详细信息",
active: !1,
disabled: !1
}, {
name: "section3",
title: "附件信息",
active: !1,
disabled: !1
}, {
name: "section4",
title: "审批流程",
active: !1,
disabled: !0
}] : g.value.map((o, l) => ({
...o,
active: o.name === r.value,
disabled: !1
}))), i = W(() => {
const o = m.value.findIndex((E) => E.active), l = 100, b = 60, k = o * l + (l - b) / 2;
return {
width: `${b}px`,
transform: `translateX(${k}px)`
};
});
return () => {
var o;
return y("div", {
class: "drag-container",
dragref: "scroll-navbar-container"
}, [y("div", {
class: "fm-scroll-navbar-design-preview"
}, [y("div", {
class: "fm-scroll-navbar-design"
}, [y("nav", {
class: ["fm-tab-bar", "fm-tab-bar--designer", e.type === "nav" ? "fm-tab-bar-nav" : "", e.type === "tab" ? "fm-tab-bar-tab" : ""]
}, [y("div", {
class: ["fm-tab-bar-inner", e.extendable ? "fm-tab-bar-extendable" : ""]
}, [y("div", {
class: "fm-tab-bar-start"
}, null), y("div", {
class: "fm-tab-bar-end"
}, null), e.extendable && y("div", {
class: "fm-tab-bar-extend",
onClick: p
}, [y("span", {
class: "fm-icon-simulate"
}, [K("⋮")])]), y("div", {
class: "fm-scroll-view-simulate"
}, [y("div", {
class: "fm-tab-bar-list",
style: {
width: `${m.value.length * 100}px`
}
}, [m.value.map((l, b) => y("div", {
key: l.name,
class: ["fm-tab-bar-item", "fm-tab-bar-item-line", l.active ? "is-active" : "", l.disabled ? "is-disabled" : ""],
onClick: () => !l.disabled && a(l, b)
}, [y("div", {
class: "fm-tab-bar-item-content"
}, [y("div", {
class: "text",
title: l.title
}, [l.title])])]))]), e.type === "line" && e.ink && y("span", {
class: ["fm-tab-bar-ink", (o = m.value.find((l) => l.active)) != null && o.disabled ? "is-disabled" : ""],
style: i.value
}, null)])])]), y("div", {
class: "fm-scroll-navbar-placeholder"
}, null)]), y(ye("f-popup"), {
show: d.value,
"onUpdate:show": (l) => d.value = l,
position: "bottom",
round: !0
}, {
default: () => [y("div", {
class: "fm-tab-bar-panel"
}, [y("div", {
class: "fm-tab-bar-panel-header"
}, [y("span", null, [e.extendTitle || "更多"])]), y("div", {
class: "fm-tab-bar-panel-content"
}, [m.value.map((l, b) => y("div", {
key: l.name,
class: ["fm-tab-bar-panel-item", l.active ? "fm-tab-bar-panel-item-active" : ""],
onClick: () => !l.disabled && s({
item: l,
index: b
})
}, [y("span", {
class: "fm-tab-bar-panel-item-text"
}, [l.title])]))])])]
})])]);
};
}
});
function ct(e, t, n) {
var C;
const r = "", f = "", d = R();
let T;
function g() {
return (t == null ? void 0 : t.schema.componentType) !== "frame";
}
function u() {
return !1;
}
function c() {
return (t == null ? void 0 : t.schema.componentType) !== "frame";
}
function p() {
return (t == null ? void 0 : t.schema.componentType) === "frame";
}
function a(v) {
if (!v || !v.value)
return null;
if (v.value.schema && v.value.schema.type === "component")
return v.value;
const S = R(v == null ? void 0 : v.value.parent), O = a(S);
return O || null;
}
function s(v = t) {
var M;
const { componentInstance: S, designerItemElementRef: O } = v;
if (!S || !S.value)
return null;
const { getCustomButtons: N } = S.value;
return S.value.canMove || N && ((M = N()) != null && M.length) ? O : s(v.parent);
}
function m(v) {
return !1;
}
function i() {
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(v, S) {
var O;
!v || !S || (O = t == null ? void 0 : t.setupContext) == null || O.emit("dragEnd");
}
function b(v, S) {
const { componentType: O } = v;
let N = Te(O, v, S);
const M = O.toLowerCase().replace(/-/g, "_");
return N && !N.id && N.type === O && (N.id = `${M}_${Math.random().toString().slice(2, 6)}`), N;
}
function k(v) {
}
function E(...v) {
}
function w(v) {
if (!v)
return;
const S = t == null ? void 0 : t.schema, { formSchemaUtils: O } = v;
if (S && O.getExpressions().length) {
const N = O.getExpressions().findIndex((M) => M.target === S.id);
N > -1 && O.getExpressions().splice(N, 1);
}
}
function D(v) {
if (!v || !(t != null && t.schema))
return;
const S = t.schema, { formSchemaUtils: O } = v;
O.removeCommunicationInComponent(S);
}
function F(v) {
w(v), D(v), t != null && t.schema.contents && t.schema.contents.map((S) => {
let O = S.id;
S.type === "component-ref" && (O = S.component);
const N = e.value.querySelectorAll(`#${O}-design-item`);
N != null && N.length && Array.from(N).map((M) => {
var $;
($ = M == null ? void 0 : M.componentInstance) != null && $.value.onRemoveComponent && M.componentInstance.value.onRemoveComponent(v);
});
});
}
function B() {
}
function L(v) {
var O, N;
if (!((O = t == null ? void 0 : t.schema) != null && O.id))
return;
!T && v && (T = v.formSchemaUtils);
let S = "";
{
const { text: M, title: $, label: j, mainTitle: x, name: z, type: U } = t.schema;
S = M || $ || j || x || z || ((N = re[U]) == null ? void 0 : N.name);
}
S && T.getControlBasicInfoMap().set(t.schema.id, {
componentTitle: S,
parentPathName: S
});
}
function P(v) {
var M;
const { changeObject: S } = v, { propertyID: O, propertyValue: N } = S;
if (["text", "title", "label", "name", "mainTitle"].includes((M = v == null ? void 0 : v.changeObject) == null ? void 0 : M.propertyID) && O && N && (L(), T)) {
const $ = T.getControlBasicInfoMap(), j = $.keys().toArray().filter((x) => {
var z, U;
return ((z = $.get(x)) == null ? void 0 : z.reliedComponentId) === ((U = t == null ? void 0 : t.schema) == null ? void 0 : U.id);
});
j != null && j.length && j.forEach((x) => {
const z = $.get(x).parentPathName.split(" > ");
z[0] = N, $.get(x).parentPathName = z.join(" > ");
});
}
}
function h(v) {
P(v);
}
function q() {
return !0;
}
return d.value = {
canMove: g(),
canSelectParent: u(),
canDelete: c(),
canNested: !p(),
contents: t == null ? void 0 : t.schema.contents,
elementRef: e,
parent: (C = t == null ? void 0 : t.parent) == null ? void 0 : C.componentInstance,
schema: t == null ? void 0 : t.schema,
styles: r,
designerClass: f,
canAccepts: m,
getBelongedComponentInstance: a,
getDraggableDesignItemElement: s,
getDraggingDisplayText: i,
getPropConfig: E,
getDragScopeElement: o,
onAcceptMovedChildElement: l,
onChildElementMovedOut: k,
addNewChildComponentSchema: b,
triggerBelongedComponentToMoveWhenMoved: R(!1),
triggerBelongedComponentToDeleteWhenDeleted: R(!1),
onRemoveComponent: F,
getCustomButtons: B,
onPropertyChanged: h,
setComponentBasicInfoMap: L,
updateContextSchema: t == null ? void 0 : t.updateContextSchema,
shouldApplyClassToComponent: q
}, d;
}
const ut = /* @__PURE__ */ I({
name: "FScrollNavbarDesign",
props: X,
emits: ["clear", "update:modelValue", "change"],
setup(e, t) {
const n = R();
Q("designer-host-service");
const r = Q("design-item-context"), f = ct(n, r), d = R(e.itemRef);
H(() => {
n.value.componentInstance = f;
}), t.expose(f.value);
const T = W(() => {
if (!d.value || d.value.length === 0)
return [{
name: "section1",
title: "基本信息",
active: !0,
disabled: !1
}, {
name: "section2",
title: "详细信息",
active: !1,
disabled: !1
}, {
name: "section3",
title: "附件信息",
active: !1,
disabled: !1
}, {
name: "section4",
title: "审批流程",
active: !1,
disabled: !0
}];
{
const g = [];
for (let u = 0; u < d.value.length; u++)
u === 0 ? g[u] = {
name: d.value[u].id,
title: d.value[u].title,
active: !0,
disabled: !1
} : g[u] = {
name: d.value[u].id,
title: d.value[u].title,
active: !1,
disabled: !1
};
return g;
}
});
return () => {
var g;
return y("div", {
ref: n,
class: "drag-container",
dragref: `${r.schema.id}-container`
}, [y("div", {
class: "fm-scroll-navbar-design-preview"
}, [y("div", {
class: "fm-scroll-navbar-design"
}, [y("nav", {
class: ["fm-tab-bar", "fm-tab-bar--designer", e.type === "nav" ? "fm-tab-bar-nav" : "", e.type === "tab" ? "fm-tab-bar-tab" : ""]
}, [y("div", {
class: ["fm-tab-bar-inner", e.extendable ? "fm-tab-bar-extendable" : ""]
}, [y("div", {
class: "fm-tab-bar-start"
}, null), y("div", {
class: "fm-tab-bar-end"
}, null), e.extendable && y("div", {
class: "fm-tab-bar-extend"
}, [y("span", {
class: "fm-icon-simulate"
}, [K("⋮")])]), y("div", {
class: "fm-scroll-view-simulate"
}, [y("div", {
class: "fm-tab-bar-list",
style: {
width: "400px"
}
}, [T.value.map((u, c) => y("div", {
class: ["fm-tab-bar-item", "fm-tab-bar-item-line", u.active ? "is-active" : "", u.disabled ? "is-disabled" : ""]
}, [y("div", {
class: "fm-tab-bar-item-content"
}, [y("div", {
class: "text",
title: u.title
}, [u.title])])]))]), e.type === "line" && e.ink && y("span", {
class: ["fm-tab-bar-ink", (g = T.value.find((u) => u.active)) != null && g.disabled ? "is-disabled" : ""],
style: {
width: "60px",
transform: "translateX(20px)"
}
}, null)])])]), y("div", {
class: "fm-scroll-navbar-placeholder"
}, null)]), t.slots.default && t.slots.default()])]);
};
}
}), vt = pe(G), bt = {
install(e) {
e.component(G.name, G);
},
register(e, t) {
e["scroll-navbar"] = G, t["scroll-navbar"] = V;
},
registerDesigner(e, t) {
e["scroll-navbar"] = ut, t["scroll-navbar"] = V;
}
};
export {
vt as ScrollNavbar,
bt as default,
V as propsResolverGenerator,
X as scrollNavbarProps
};