@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,277 lines (1,276 loc) • 44.5 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 J } from "vue";
import { isPlainObject as Q, cloneDeep as Y } from "lodash-es";
import { getSchemaByTypeForDesigner as Te } from "../dynamic-resolver/index.esm.js";
function ee(e, t) {
let n;
function r(a) {
const { properties: c, title: f, ignore: i } = a, o = i && Array.isArray(i), l = Object.keys(c).reduce((v, k) => ((!o || !i.find((E) => E === k)) && (v[k] = c[k].type === "object" && c[k].properties ? r(c[k]) : Y(c[k].default)), v), {});
if (f && (!o || !i.find((v) => v === "id"))) {
const v = f.toLowerCase().replace(/-/g, "_");
l.id = `${v}_${Math.random().toString().slice(2, 6)}`;
}
return l;
}
function d(a) {
const { properties: c, title: f, required: i } = a;
if (i && Array.isArray(i)) {
const o = i.reduce((l, v) => (l[v] = c[v].type === "object" && c[v].properties ? r(c[v]) : Y(c[v].default), l), {});
if (f && i.find((l) => l === "id")) {
const l = f.toLowerCase().replace(/-/g, "_");
o.id = `${l}_${Math.random().toString().slice(2, 6)}`;
}
return o;
}
return {
type: f
};
}
function g(a, c = {}, f) {
const i = e[a];
if (i) {
let o = d(i);
const l = t[a];
return o = l ? l({ getSchemaByType: g }, o, c, f) : o, n != null && n.appendIdentifyForNewControl && n.appendIdentifyForNewControl(o), o;
}
return null;
}
function T(a, c) {
const f = r(c);
return Object.keys(f).reduce((i, o) => (Object.prototype.hasOwnProperty.call(a, o) && (i[o] && Q(i[o]) && Q(a[o] || !a[o]) ? Object.assign(i[o], a[o] || {}) : i[o] = a[o]), i), f), f;
}
function b(a, c) {
return Object.keys(a).filter((i) => a[i] != null).reduce((i, o) => {
if (c.has(o)) {
const l = c.get(o);
if (typeof l == "string")
i[l] = a[o];
else {
const v = l(o, a[o], a);
Object.assign(i, v);
}
} else
i[o] = a[o];
return i;
}, {});
}
function u(a, c, f = /* @__PURE__ */ new Map()) {
const i = T(a, c);
return b(i, f);
}
function s(a) {
var f;
const c = a.type;
if (c) {
const i = e[c];
if (!i)
return a;
const o = T(a, i), l = ((f = a.editor) == null ? void 0 : f.type) || "";
if (l) {
const v = e[l], k = T(a.editor, v);
o.editor = k;
}
return o;
}
return a;
}
function m(a) {
n = a;
}
return { getSchemaByType: g, resolveSchemaWithDefaultValue: s, resolveSchemaToProps: u, mappingSchemaToProps: b, setDesignerContext: m };
}
const te = {}, ne = {}, { resolveSchemaWithDefaultValue: he, resolveSchemaToProps: Se, mappingSchemaToProps: we } = ee(te, ne);
function ke(e = {}) {
function t(s, m, a, c) {
if (typeof a == "number")
return c[s].length === a;
if (typeof a == "object") {
const f = Object.keys(a)[0], i = a[f];
if (f === "not")
return Number(c[s].length) !== Number(i);
if (f === "moreThan")
return Number(c[s].length) >= Number(i);
if (f === "lessThan")
return Number(c[s].length) <= Number(i);
}
return !1;
}
function n(s, m, a, c) {
return c[s] && c[s].propertyValue && String(c[s].propertyValue.value) === String(a);
}
const r = /* @__PURE__ */ new Map([
["length", t],
["getProperty", n]
]);
Object.keys(e).reduce((s, m) => (s.set(m, e[m]), s), r);
function d(s, m) {
const a = s;
return typeof m == "number" ? [{ target: a, operator: "length", param: null, value: Number(m) }] : typeof m == "boolean" ? [{ target: a, operator: "getProperty", param: s, value: !!m }] : typeof m == "object" ? Object.keys(m).map((c) => {
if (c === "length")
return { target: a, operator: "length", param: null, value: m[c] };
const f = c, i = m[c];
return { target: a, operator: "getProperty", param: f, value: i };
}) : [];
}
function g(s) {
return Object.keys(s).reduce((a, c) => {
const f = d(c, s[c]);
return a.push(...f), a;
}, []);
}
function T(s, m) {
if (r.has(s.operator)) {
const a = r.get(s.operator);
return a && a(s.target, s.param, s.value, m) || !1;
}
return !1;
}
function b(s, m) {
return g(s).reduce((f, i) => f && T(i, m), !0);
}
function u(s, m) {
const a = Object.keys(s), c = a.includes("allOf"), f = a.includes("anyOf"), i = c || f, v = (i ? s[i ? c ? "allOf" : "anyOf" : "allOf"] : [s]).map((E) => b(E, m));
return c ? !v.includes(!1) : v.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: "容器" },
"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: "动态表单" }
}, De = {
convertFrom: (e, t, n) => {
var d;
const r = e.editor && e.editor[t] ? e.editor[t] : e[t];
return ((d = re[r]) == null ? void 0 : d.name) || r;
}
}, Ne = {
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, d;
if (e.command) {
if (t === "enableType") {
if (e.command.enableType)
return e.command.enableType;
const g = (d = (r = e.command) == null ? void 0 : r.commands) == null ? void 0 : d.find((T) => T.command === "edit" && T.type === "primary");
return e.command.enable ? g ? "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) => {
e.column ? e.column[t] = n : e.column = {
[t]: n
}, t === "fitColumns" && n && (e.column.fitMode || (e.column.fitMode = "average"));
},
convertFrom: (e, t, n) => {
if (e.column) {
if (t === "fitColumns")
return e.column.fitColumns;
if (t === "fitMode")
return e.column.fitMode;
}
return "";
}
}, $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, d;
return t === "customSummaryStyle" ? e.summary.customSummaryStyle : t === "position" ? ((r = e.summary) == null ? void 0 : r[t]) || "bottom" : t === "customRender" ? ((d = e.summary) == null ? void 0 : d[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;
}
}
}, Be = {
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;
}
}
}, Le = {
convertTo: (e, t, n, r) => {
e.pagination || (e.pagination = {}), t === "sizeLimits" ? e.pagination.sizeLimits = n.split(",") : 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]
}, Ae = {
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;
}
}, ze = {
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, d;
return (r = e.formatter) != null && r.data && t === "formatterEnumData" && !e.formatterEnumData ? (d = e.formatter) == null ? void 0 : d.data : e.formatterEnumData;
}
}, Ue = {
convertTo: (e, t, n, r) => {
e.sort || (e.sort = {}), e.sort[t] = n;
},
convertFrom: (e, t, n) => {
var r, d;
if (t === "mode")
return ((r = e.sort) == null ? void 0 : r.mode) || "client";
if (t === "multiSort")
return !!((d = e.sort) != null && d.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, d, g, T;
return t === "mode" ? ((r = e.filter) == null ? void 0 : r.mode) || "server" : t === "filterStyle" ? ((d = e.filter) == null ? void 0 : d.filterStyle) || "filter-column" : t === "enable" ? ((g = e.filter) == null ? void 0 : g.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" : ""
}, Ve = {
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, d;
return !!((d = (r = e.hierarchy) == null ? void 0 : r.cascadeOption) != null && d[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", ze],
["/converter/type.converter", De],
["/converter/change-editor.converter", Ne],
["/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", Be],
["/converter/pagination.converter", Le],
["/converter/row-number.converter", Ce],
["/converter/grid-selection.converter", Ae],
["/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", Ve]
]), d = /* @__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" }]
]), g = ke();
function T(i, o) {
return () => g.parseValueSchema(i, o);
}
function b(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 s(i, o) {
const l = i.$converter || o;
return typeof l == "string" && l && r.has(l) ? r.get(l) || null : l || null;
}
function m(i, o, l, v, k, E = "", w = "") {
return Object.keys(i).map((F) => {
const L = R(1), B = F, P = i[F], h = Object.keys(P), q = P.title, C = P.type, p = d.get(C) || { type: "input-group", enableClear: !1 }, S = P.editor ? Object.assign({}, p, P.editor) : Object.assign({}, p), O = b(h, P, o), D = u(h, P, o);
S.readonly = S.readonly === void 0 ? D() : S.readonly;
const M = P.type === "cascade" ? m(P.properties, o, l, v, k, E, w) : [], $ = !0;
let j = s(P, w);
const x = W({
get() {
if (L.value) {
if (["class", "style"].find((_) => _ === B) && !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 z = l[F];
return Object.prototype.hasOwnProperty.call(P, "defaultValue") && (z === void 0 || typeof z == "string" && z === "") ? P.type === "boolean" ? P.defaultValue : P.defaultValue || "" : z;
}
return null;
},
set(z) {
L.value += 1, j && j.convertTo ? (j.convertTo(v, F, z, k, E), j.convertTo(l, F, z, k, E)) : (v[F] = z, l[F] = z);
}
}), { refreshPanelAfterChanged: A, description: U, isExpand: de, parentPropertyID: me } = P, X = { propertyID: B, propertyName: q, propertyType: C, propertyValue: x, editor: S, visible: O, readonly: D, cascadeConfig: M, hideCascadeTitle: $, refreshPanelAfterChanged: A, description: U, isExpand: de, parentPropertyID: me };
return o[B] = X, X;
});
}
function a(i, o, l = {}) {
const v = {}, k = e[i];
return k && k.categories ? Object.keys(k.categories).map((w) => {
const N = k.categories[w], F = N == null ? void 0 : N.title, L = m(N.properties || {}, v, {}, l, o);
return { categoryId: w, categoryName: F, properties: L };
}) : [];
}
function c(i, o, l, v, k = "") {
const E = o.$ref.schema, w = o.$ref.converter, N = l[E], F = N.type, L = n(N), B = {}, 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) || {}, p = m(C, B, L, N, v, k);
return { categoryId: i, categoryName: q, properties: p };
}
return { categoryId: i, categoryName: "", properties: [] };
}
function f(i, o, l, v, k) {
const E = i.type, w = n(i), N = {};
let F = k || e[E];
if (!(F && Object.keys(F).length > 0) && l && l.getPropConfig && (F = l.getPropConfig(v)), F && F.categories) {
const B = [];
return Object.keys(F.categories).map((P) => {
const h = F.categories[P];
if (h.$ref) {
B.push(c(P, h, i, o, v));
return;
}
const q = h == null ? void 0 : h.title, C = h == null ? void 0 : h.tabId, p = h == null ? void 0 : h.tabName, S = h == null ? void 0 : h.hide, O = h == null ? void 0 : h.hideTitle, D = m(h.properties || {}, N, w, i, o, v, h.$converter), { setPropertyRelates: M } = h, $ = h == null ? void 0 : h.parentPropertyID;
B.push({ categoryId: P, categoryName: q, tabId: C, tabName: p, hide: S, properties: D, hideTitle: O, setPropertyRelates: M, parentPropertyID: $ });
}), B;
}
return [];
}
return {
getPropertyConfigBySchema: f,
getPropertyConfigByType: a,
propertyConverterMap: r
};
}
const ae = {}, ie = {};
oe(ae, ie, he);
const le = {}, ce = {}, { resolveSchemaWithDefaultValue: Xe } = ee(le, ce), se = {}, ue = {};
oe(se, ue, Xe);
function Je(e, t, n = /* @__PURE__ */ new Map(), r = (T, b, u, s) => b, d = {}, g = (T) => T) {
return te[t.title] = t, ne[t.title] = r, ae[t.title] = d, ie[t.title] = g, le[t.title] = t, ce[t.title] = r, se[t.title] = d, ue[t.title] = g, (T = {}, b = !0) => {
if (!b)
return we(T, n);
const u = Se(T, t, n), s = Object.keys(e).reduce((m, a) => (m[a] = e[a].default, m), {});
return Object.assign(s, u);
};
}
function Qe(e, t) {
return { customClass: t.class, customStyle: t.style };
}
const Ye = /* @__PURE__ */ new Map([
["appearance", Qe],
["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 Ze(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 d = Ze(r.formSchemaUtils.getFormSchema());
return t.scrollItems = d, 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
}, V = {
/** 是否始终显示导航栏 */
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: [] }
}, Z = Je(
V,
it,
Ye,
Ie
), lt = (e, t) => {
const n = R([]), r = (b) => b.map((u) => {
const { id: s = "", title: m = "", selector: a = "", visible: c = !0 } = u;
if (!c)
return null;
const f = e.value.querySelector(a);
if (!f)
return null;
const { offsetTop: i, clientHeight: o } = f;
return {
name: s,
title: m,
offsetTop: i,
clientHeight: o,
element: f
};
}).filter((u) => u !== null), d = (b) => {
const u = [];
return b.forEach((s) => {
const m = Array.from(e.value.querySelectorAll(s));
u.push(...m);
}), u.map((s) => {
const { dataset: m, offsetTop: a, clientHeight: c } = s;
return {
name: m.id || "",
title: m.title || "",
offsetTop: a,
clientHeight: c,
element: s
};
});
}, g = () => {
if (n.value = [], !t || Array.isArray(t) && t.length === 0)
return n.value;
try {
const b = typeof t == "string" ? [t] : t;
typeof b[0] == "string" ? n.value = d(b) : n.value = r(b), n.value.sort((u, s) => u.offsetTop - s.offsetTop);
} catch (b) {
console.warn("获取导航项时出错:", b);
}
return n.value;
}, T = () => {
const b = e.value.scrollTop || 0, u = n.value;
if (u.length === 0)
return { name: "", title: "", offsetTop: 0, clientHeight: 0, element: null };
for (let s = 0; s < u.length; s++) {
const m = u[s];
if (m.offsetTop + m.clientHeight / 2 > b)
return m;
}
return u[u.length - 1];
};
return {
items: R(n.value),
getItems: g,
getTopElementInView: T
};
}, ct = (e, t, n, r, d, g, T) => {
let b = 0;
const u = {
active: !1,
start: 0,
end: 0,
timer: 0
}, s = W(() => g.value), m = W(() => ({
"f-scroll-navbar": !0,
"f-scroll-navbar-fixed": r.value.scrollTop > b,
"f-scroll-navbar-visible": g.value
})), a = () => !r.value || !n.value ? !1 : r.value.contains(n.value), c = () => {
if (e.alwaysShow || a()) {
g.value = !0;
return;
}
const w = d.value[0] ? d.value[0].offsetTop : 0;
g.value = r.value.scrollTop > w;
}, f = () => {
const w = r.value;
if (!w || !(w instanceof HTMLElement)) {
console.warn("Content element is not available for style checking");
return;
}
const N = getComputedStyle(w), F = ["fixed", "absolute", "relative"];
(!N.position || !F.includes(N.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 N = r.value.scrollTop;
setTimeout(() => {
N === 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());
}, v = () => {
if (!r.value || !n.value)
return;
if (a() && (n.value.classList.contains("f-scroll-navbar-fixed") || (b = n.value.offsetTop), r.value.scrollTop > b ? 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(c);
}, 100), u.start = r.value.scrollTop;
return;
}
const { scrollTop: w } = r.value;
let N;
for (const F of d.value)
if (F.offsetTop + F.clientHeight / 2 > w) {
N = F;
break;
}
N ? T.value = N.name : d.value.length > 0 && (T.value = d.value[d.value.length - 1].name), c();
}, k = () => {
r.value && r.value.addEventListener("scroll", v);
}, E = () => {
r.value && r.value.removeEventListener("scroll", v);
};
return H(() => {
k(), f(), c();
}), ve(() => {
E();
}), {
/** 是否显示导航栏 */
shouldShowNavbar: s,
/** 导航栏样式类 */
navbarFixedClass: m,
/** 标签切换处理 */
handlertabChange: i,
/** 面板项目点击处理 */
handlePanelItemClick: o,
/** 检查内容样式 */
checkContentStyle: f,
/** 滚动处理 */
handlerScroll: v,
/** 检查导航栏显示状态 */
checkNavbarShow: c,
/** 导航栏显示状态引用 */
navbarShow: g,
/** 检查内容包含 */
checkContentContainsNavbar: a
};
}, G = /* @__PURE__ */ I({
name: "FScrollNavbar",
props: V,
emits: ["change", "update:modelValue"],
setup(e, t) {
const n = R(), r = R(e.modelValue), d = R(!0), g = R(!1), T = W(() => {
try {
return document.querySelector(e.contentRef) || document.body;
} catch {
return document.body;
}
}), {
items: b,
getItems: u
} = lt(T, e.itemRef), s = ct(e, t, n, T, b, d, r);
be(() => e.modelValue, (o) => {
r.value = o;
});
const m = () => {
g.value = !g.value;
}, a = (o, l) => {
r.value = o.name, s.handlertabChange(o), t.emit("change", o, l), t.emit("update:modelValue", o.name);
}, c = (o) => {
a(o.item, o.index), g.value = !1;
};
H(() => {
ge(() => {
u(), s.checkContentStyle(), s.checkNavbarShow();
});
});
const f = W(() => !b.value || b.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
}] : b.value.map((o, l) => ({
...o,
active: o.name === r.value,
disabled: !1
}))), i = W(() => {
const o = f.value.findIndex((E) => E.active), l = 100, v = 60, k = o * l + (l - v) / 2;
return {
width: `${v}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: m
}, [y("span", {
class: "fm-icon-simulate"
}, [K("⋮")])]), y("div", {
class: "fm-scroll-view-simulate"
}, [y("div", {
class: "fm-tab-bar-list",
style: {
width: `${f.value.length * 100}px`
}
}, [f.value.map((l, v) => 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, v)
}, [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 = f.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: g.value,
"onUpdate:show": (l) => g.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"
}, [f.value.map((l, v) => y("div", {
key: l.name,
class: ["fm-tab-bar-panel-item", l.active ? "fm-tab-bar-panel-item-active" : ""],
onClick: () => !l.disabled && c({
item: l,
index: v
})
}, [y("span", {
class: "fm-tab-bar-panel-item-text"
}, [l.title])]))])])]
})])]);
};
}
});
function st(e, t, n) {
var C;
const r = "", d = "", g = R();
let T;
function b() {
return (t == null ? void 0 : t.schema.componentType) !== "frame";
}
function u() {
return !1;
}
function s() {
return (t == null ? void 0 : t.schema.componentType) !== "frame";
}
function m() {
return (t == null ? void 0 : t.schema.componentType) === "frame";
}
function a(p) {
if (!p || !p.value)
return null;
if (p.value.schema && p.value.schema.type === "component")
return p.value;
const S = R(p == null ? void 0 : p.value.parent), O = a(S);
return O || null;
}
function c(p = t) {
var M;
const { componentInstance: S, designerItemElementRef: O } = p;
if (!S || !S.value)
return null;
const { getCustomButtons: D } = S.value;
return S.value.canMove || D && ((M = D()) != null && M.length) ? O : c(p.parent);
}
function f(p) {
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(p, S) {
var O;
!p || !S || (O = t == null ? void 0 : t.setupContext) == null || O.emit("dragEnd");
}
function v(p, S) {
const { componentType: O } = p;
let D = Te(O, p, S);
const M = O.toLowerCase().replace(/-/g, "_");
return D && !D.id && D.type === O && (D.id = `${M}_${Math.random().toString().slice(2, 6)}`), D;
}
function k(p) {
}
function E(...p) {
}
function w(p) {
if (!p)
return;
const S = t == null ? void 0 : t.schema, { formSchemaUtils: O } = p;
if (S && O.getExpressions().length) {
const D = O.getExpressions().findIndex((M) => M.target === S.id);
D > -1 && O.getExpressions().splice(D, 1);
}
}
function N(p) {
if (!p || !(t != null && t.schema))
return;
const S = t.schema, { formSchemaUtils: O } = p;
O.removeCommunicationInComponent(S);
}
function F(p) {
w(p), N(p), t != null && t.schema.contents && t.schema.contents.map((S) => {
let O = S.id;
S.type === "component-ref" && (O = S.component);
const D = e.value.querySelectorAll(`#${O}-design-item`);
D != null && D.length && Array.from(D).map((M) => {
var $;
($ = M == null ? void 0 : M.componentInstance) != null && $.value.onRemoveComponent && M.componentInstance.value.onRemoveComponent(p);
});
});
}
function L() {
}
function B(p) {
var O, D;
if (!((O = t == null ? void 0 : t.schema) != null && O.id))
return;
!T && p && (T = p.formSchemaUtils);
let S = "";
{
const { text: M, title: $, label: j, mainTitle: x, name: A, type: U } = t.schema;
S = M || $ || j || x || A || ((D = re[U]) == null ? void 0 : D.name);
}
S && T.getControlBasicInfoMap().set(t.schema.id, {
componentTitle: S,
parentPathName: S
});
}
function P(p) {
var M;
const { changeObject: S } = p, { propertyID: O, propertyValue: D } = S;
if (["text", "title", "label", "name", "mainTitle"].includes((M = p == null ? void 0 : p.changeObject) == null ? void 0 : M.propertyID) && O && D && (B(), T)) {
const $ = T.getControlBasicInfoMap(), j = $.keys().toArray().filter((x) => {
var A, U;
return ((A = $.get(x)) == null ? void 0 : A.reliedComponentId) === ((U = t == null ? void 0 : t.schema) == null ? void 0 : U.id);
});
j != null && j.length && j.forEach((x) => {
const A = $.get(x).parentPathName.split(" > ");
A[0] = D, $.get(x).parentPathName = A.join(" > ");
});
}
}
function h(p) {
P(p);
}
function q() {
return !0;
}
return g.value = {
canMove: b(),
canSelectParent: u(),
canDelete: s(),
canNested: !m(),
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: d,
canAccepts: f,
getBelongedComponentInstance: a,
getDraggableDesignItemElement: c,
getDraggingDisplayText: i,
getPropConfig: E,
getDragScopeElement: o,
onAcceptMovedChildElement: l,
onChildElementMovedOut: k,
addNewChildComponentSchema: v,
triggerBelongedComponentToMoveWhenMoved: R(!1),
triggerBelongedComponentToDeleteWhenDeleted: R(!1),
onRemoveComponent: F,
getCustomButtons: L,
onPropertyChanged: h,
setComponentBasicInfoMap: B,
updateContextSchema: t == null ? void 0 : t.updateContextSchema,
shouldApplyClassToComponent: q
}, g;
}
const ut = /* @__PURE__ */ I({
name: "FScrollNavbarDesign",
props: V,
emits: ["clear", "update:modelValue", "change"],
setup(e, t) {
const n = R();
J("designer-host-service");
const r = J("design-item-context"), d = st(n, r), g = R(e.itemRef);
H(() => {
n.value.componentInstance = d;
}), t.expose(d.value);
const T = W(() => {
if (!g.value || g.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 b = [];
for (let u = 0; u < g.value.length; u++)
u === 0 ? b[u] = {
name: g.value[u].id,
title: g.value[u].title,
active: !0,
disabled: !1
} : b[u] = {
name: g.value[u].id,
title: g.value[u].title,
active: !1,
disabled: !1
};
return b;
}
});
return () => {
var b;
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, s) => 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", (b = T.value.find((u) => u.active)) != null && b.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"] = Z;
},
registerDesigner(e, t) {
e["scroll-navbar"] = ut, t["scroll-navbar"] = Z;
}
};
export {
vt as ScrollNavbar,
bt as default,
Z as propsResolverGenerator,
V as scrollNavbarProps
};