UNPKG

@farris/ui-vue

Version:

Farris Vue, a Farris Design based Vue3 component library.

1,435 lines 406 kB
var Yo = Object.defineProperty; var Uo = (n, t, e) => t in n ? Yo(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e; var P = (n, t, e) => Uo(n, typeof t != "symbol" ? t + "" : t, e); import { defineComponent as tt, ref as S, computed as A, watch as Me, onMounted as kt, createVNode as O, withDirectives as qn, vModelText as Xo, nextTick as Bt, Fragment as Qt, reactive as yt, createApp as Gn, onUnmounted as un, Transition as zn, mergeProps as Rt, createTextVNode as Lt, onBeforeUnmount as Yn, resolveDirective as Qo, onBeforeMount as Ko, Teleport as Jo, shallowRef as Zo, render as dn, h as er, cloneVNode as tr, inject as Tt, provide as nr, triggerRef as or, isVNode as rr } from "vue"; import { isPlainObject as In, cloneDeep as Et, isUndefined as ut, throttle as ir } from "lodash-es"; import { useCommonUtils as Un, useTextBox as ar, useClear as sr, useGuid as lr, resolveField as rt, FormSchemaEntityFieldTypeName as On, useDateFormat as ur, useNumberFormat as cr, setFieldValue as hn, getCustomClass as fn, withInstall as Xn, FormSchemaEntityField$Type as Pn, FormSchemaEntityFieldType$Type as dr } from "../common/index.esm.js"; import { DgControl as Dn } from "../designer-canvas/index.esm.js"; import { useResizeObserver as Qn } from "@vueuse/core"; import { useIdentify as fr, useGroupData as pr, useFilter as mr, useHierarchy as hr, useLoading as vr, useDataView as gr, useSelection as yr, useSelectHierarchyItem as br, useDataViewContainerStyle as wr, useCommandColumn as Cr, useColumn as xr, useSort as _r, useGroupColumn as Sr, useRow as Tr, useEdit as Er, useVisualDataBound as Mr, useVisualDataCell as kr, useVisualDataRow as Fr, useVisualData as Ir, useCellPosition as Or, useSidebar as Pr, useVirtualScroll as Dr, useFitColumn as Vr, useFilterHistory as Nr, useColumnFilter as Br, useDragColumn as Rr, getColumnHeader as Lr, getSidebar as Wr, getDisableMask as $r, getHorizontalScrollbar as Hr, getVerticalScrollbar as jr, getEmpty as Ar } from "../data-view/index.esm.js"; import "../modal/index.esm.js"; import qr from "../transfer/index.esm.js"; import Gr from "../tabs/index.esm.js"; import zr from "../order/index.esm.js"; import "../condition/index.esm.js"; import { FCheckbox as Yr } from "../checkbox/index.esm.js"; import Ur from "../filter-bar/index.esm.js"; import Vn from "../tooltip/index.esm.js"; import Xr from "../pagination/index.esm.js"; import Qr from "../button/index.esm.js"; import Kr from "../search-box/index.esm.js"; import Jr from "../tags/index.esm.js"; import Zr, { FDynamicFormGroup as ei, FDynamicFormInput as ti } from "../dynamic-form/index.esm.js"; import { createPropsResolver as ni } from "../dynamic-resolver/index.esm.js"; import "../property-panel/index.esm.js"; import oi from "../accordion/index.esm.js"; import ri from "../avatar/index.esm.js"; import ii from "../../designer/button-edit/index.esm.js"; import ai from "../button-group/index.esm.js"; import si from "../calendar/index.esm.js"; import li from "../capsule/index.esm.js"; import Nn from "../../designer/checkbox/index.esm.js"; import Bn from "../../designer/checkbox-group/index.esm.js"; import vn from "../combo-list/index.esm.js"; import ui from "../combo-tree/index.esm.js"; import ci from "../component/index.esm.js"; import di from "../color-picker/index.esm.js"; import fi from "../content-container/index.esm.js"; import pi from "../date-picker/index.esm.js"; import mi from "../../designer/data-grid/index.esm.js"; import hi from "../dropdown/index.esm.js"; import vi from "../events-editor/index.esm.js"; import gi from "../field-selector/index.esm.js"; import yi from "../binding-selector/index.esm.js"; import bi from "../image-cropper/index.esm.js"; import wi from "../../designer/input-group/index.esm.js"; import Ci from "../layout/index.esm.js"; import xi from "../list-nav/index.esm.js"; import _i from "../list-view/index.esm.js"; import Si from "../lookup/index.esm.js"; import Ti from "../mapping-editor/index.esm.js"; import Ei from "../nav/index.esm.js"; import Mi from "../number-range/index.esm.js"; import ki from "../number-spinner/index.esm.js"; import Fi from "../page-header/index.esm.js"; import Ii from "../page-footer/index.esm.js"; import Oi from "../progress/index.esm.js"; import Pi from "../query-solution/index.esm.js"; import Di from "../../designer/radio-group/index.esm.js"; import Vi from "../rate/index.esm.js"; import Ni from "../response-toolbar/index.esm.js"; import Bi from "../response-layout/index.esm.js"; import Ri from "../response-layout-editor/index.esm.js"; import Li from "../section/index.esm.js"; import Wi from "../smoke-detector/index.esm.js"; import $i from "../splitter/index.esm.js"; import Hi from "../step/index.esm.js"; import ji from "../switch/index.esm.js"; import Ai from "../text/index.esm.js"; import qi from "../time-picker/index.esm.js"; import Gi from "../tree-view/index.esm.js"; import zi from "../uploader/index.esm.js"; import Yi from "../verify-detail/index.esm.js"; import Ui from "../video/index.esm.js"; import Xi from "../textarea/index.esm.js"; import Qi from "../schema-selector/index.esm.js"; import Ki from "../tree-grid/index.esm.js"; import Ji from "../event-parameter/index.esm.js"; import Zi from "../filter-condition-editor/index.esm.js"; import ea from "../fieldset/index.esm.js"; import ta from "../sort-condition-editor/index.esm.js"; import na from "../menu-lookup/index.esm.js"; import oa from "../drawer/index.esm.js"; import ra from "../json-editor/index.esm.js"; import ia from "../property-editor/index.esm.js"; import aa from "../expression-editor/index.esm.js"; import sa from "../code-editor/index.esm.js"; import la from "../html-template/index.esm.js"; import "../external-container/index.esm.js"; import "../notify/index.esm.js"; const Kn = {}, Jn = {}; function Cn(n) { const { properties: t, title: e, ignore: o } = n, r = o && Array.isArray(o), i = Object.keys(t).reduce((a, s) => ((!r || !o.find((l) => l === s)) && (a[s] = t[s].type === "object" && t[s].properties ? Cn(t[s]) : Et(t[s].default)), a), {}); if (e && (!r || !o.find((a) => a === "id"))) { const a = e.toLowerCase().replace(/-/g, "_"); i.id = `${a}_${Math.random().toString().slice(2, 6)}`; } return i; } function ua(n) { const { properties: t, title: e, required: o } = n; if (o && Array.isArray(o)) { const r = o.reduce((i, a) => (i[a] = t[a].type === "object" && t[a].properties ? Cn(t[a]) : Et(t[a].default), i), {}); if (e && o.find((i) => i === "id")) { const i = e.toLowerCase().replace(/-/g, "_"); r.id = `${i}_${Math.random().toString().slice(2, 6)}`; } return r; } return { type: e }; } function Zn(n, t = {}, e) { const o = Kn[n]; if (o) { let r = ua(o); const i = Jn[n]; return r = i ? i({ getSchemaByType: Zn }, r, t, e) : r, r; } return null; } function ca(n, t) { const e = Cn(t); return Object.keys(e).reduce((o, r) => (Object.prototype.hasOwnProperty.call(n, r) && (o[r] && In(o[r]) && In(n[r] || !n[r]) ? Object.assign(o[r], n[r] || {}) : o[r] = n[r]), o), e), e; } function eo(n, t) { return Object.keys(n).filter((o) => n[o] != null).reduce((o, r) => { if (t.has(r)) { const i = t.get(r); if (typeof i == "string") o[i] = n[r]; else { const a = i(r, n[r], n); Object.assign(o, a); } } else o[r] = n[r]; return o; }, {}); } function da(n, t, e = /* @__PURE__ */ new Map()) { const o = ca(n, t); return eo(o, e); } function fa(n = {}) { function t(c, d, u, f) { if (typeof u == "number") return f[c].length === u; if (typeof u == "object") { const m = Object.keys(u)[0], p = u[m]; if (m === "not") return Number(f[c].length) !== Number(p); if (m === "moreThan") return Number(f[c].length) >= Number(p); if (m === "lessThan") return Number(f[c].length) <= Number(p); } return !1; } function e(c, d, u, f) { return f[c] && f[c].propertyValue && String(f[c].propertyValue.value) === String(u); } const o = /* @__PURE__ */ new Map([ ["length", t], ["getProperty", e] ]); Object.keys(n).reduce((c, d) => (c.set(d, n[d]), c), o); function r(c, d) { const u = c; return typeof d == "number" ? [{ target: u, operator: "length", param: null, value: Number(d) }] : typeof d == "boolean" ? [{ target: u, operator: "getProperty", param: c, value: !!d }] : typeof d == "object" ? Object.keys(d).map((f) => { if (f === "length") return { target: u, operator: "length", param: null, value: d[f] }; const m = f, p = d[f]; return { target: u, operator: "getProperty", param: m, value: p }; }) : []; } function i(c) { return Object.keys(c).reduce((u, f) => { const m = r(f, c[f]); return u.push(...m), u; }, []); } function a(c, d) { if (o.has(c.operator)) { const u = o.get(c.operator); return u && u(c.target, c.param, c.value, d) || !1; } return !1; } function s(c, d) { return i(c).reduce((m, p) => m && a(p, d), !0); } function l(c, d) { const u = Object.keys(c), f = u.includes("allOf"), m = u.includes("anyOf"), p = f || m, v = (p ? c[p ? f ? "allOf" : "anyOf" : "allOf"] : [c]).map((g) => s(g, d)); return f ? !v.includes(!1) : v.includes(!0); } return { parseValueSchema: l }; } const de = { 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: "列表导航" }, "filter-bar": { type: "filter-bar", name: "筛选条" } }, pa = {}, ma = {}; fa(); function $t(n, t, e = /* @__PURE__ */ new Map(), o = (a, s, l, c) => s, r = {}, i = (a) => a) { return Kn[t.title] = t, Jn[t.title] = o, pa[t.title] = r, ma[t.title] = i, (a = {}, s = !0) => { if (!s) return eo(a, e); const l = da(a, t, e), c = Object.keys(n).reduce((d, u) => (d[u] = n[u].default, d), {}); return Object.assign(c, l); }; } function cn(n, t) { return { customClass: t.class, customStyle: t.style }; } function ha() { function n(t, e) { const { dataSource: o } = t || {}; return o === void 0 ? {} : {}; } return { resolve: n }; } function va() { function n(t, e) { return t.selectItemById(e); } return { selectItemById: n }; } function ga() { function n(t, e) { const { columns: o } = e; return t.updateColumns(o); } return { updateColumns: n }; } const ya = /* @__PURE__ */ new Map([ ["appearance", cn] ]), ba = "https://json-schema.org/draft/2020-12/schema", wa = "https://farris-design.gitee.io/switch.schema.json", Ca = "textarea", xa = "A Farris Component", _a = "object", Sa = { id: { description: "The unique identifier for a textarea", type: "string" }, type: { description: "The type string of textarea component", type: "string", default: "textarea" }, appearance: { description: "", type: "object", properties: { class: { type: "string" }, style: { type: "string" } }, default: {} }, binding: { description: "", type: "object", default: {} }, disabled: { type: "boolean", default: !1 }, editable: { description: "", type: "boolean", default: !0 }, placeholder: { description: "", type: "string", default: "" }, readonly: { description: "", type: "boolean", default: !1 }, required: { description: "", type: "boolean", default: !1 }, tabindex: { description: "", type: "number", default: -1 }, visible: { description: "", type: "boolean", default: !0 }, rows: { description: "", type: "number" }, showCount: { description: "", type: "boolean", default: !1 }, maxLength: { description: "", type: "number", default: 0 }, updateOn: { description: "", type: "string", default: "blur" }, allowUnlimtedWhenEmpty: { description: "", type: "boolean", default: !0 }, autoHeight: { description: "", type: "boolean", default: !1 }, resizable: { description: "", type: "boolean", default: !1 } }, Ta = [ "type" ], Ea = [ "id", "appearance", "binding", "visible" ], Ma = { $schema: ba, $id: wa, title: Ca, description: xa, type: _a, properties: Sa, required: Ta, ignore: Ea }; function ka(n, t, e) { return t; } const xn = { /** 是否撑开高度 */ autoHeight: { type: Boolean, default: !1 }, /** 自动聚焦 */ autofocus: { type: Boolean, default: !1 }, /** 自动完成 */ autocomplete: { type: Boolean, default: !1 }, /** when length equals 0 and allowUnlimtedWhenEmpty equals true, character input is not limited */ allowUnlimtedWhenEmpty: { type: Boolean, default: !1 }, /** 禁用 */ disabled: { type: Boolean, default: !1 }, /** 启用清除按钮 */ enableClear: { type: Boolean, default: !1 }, /** 组件标识 */ id: { type: String, default: "" }, /** 最小字符长度 */ minLength: { type: Number, default: 0 }, /** 最大字符长度 */ maxLength: { type: Number }, /** 组件值 */ modelValue: { type: String, default: "" }, /** 背景文字 */ placeholder: { type: String, default: "" }, /** 只读 */ readonly: { type: Boolean, default: !1 }, /** 文本区域可见的行数 */ rows: { type: Number }, /** 是否可以拖拽调整大小 */ resizable: { type: Boolean, default: !1 }, /** 展示输入文本数量 */ showCount: { type: Boolean, default: !1 }, /** 展示边线 */ showBorder: { Type: Boolean, default: !0 }, /** 键盘按键索引 */ tabIndex: { type: Number, default: -1 }, /** * 作为内嵌编辑器被创建后默认获得焦点 */ focusOnCreated: { type: Boolean, default: !1 }, /** * 作为内嵌编辑器被创建后默认选中文本 */ selectOnCreated: { type: Boolean, default: !1 }, /** * modelValue 更新时机, 默认 blur; 可选值:blur | input * - blur: 离开焦点时更新 * - change: 输入时更新 */ updateOn: { type: String, default: "blur" } }, Fa = Object.assign({}, xn, { readonly: {} }), to = $t(xn, Ma, ya, ka), tn = /* @__PURE__ */ tt({ name: "FTextarea", props: xn, emits: ["update:modelValue", "valueChange", "change", "mousedownEvent", "mouseupEvent"], setup(n, t) { var I; const { isUndefined: e } = Un(), o = S(), r = S(null), i = A(() => n.modelValue), a = A(() => { if (!(n.allowUnlimtedWhenEmpty && n.maxLength === 0 || e(n.maxLength))) return typeof n.maxLength == "number" && !isNaN(n.maxLength) ? n.maxLength : n.modelValue ? n.modelValue.length : 0; }), s = S(((I = n.modelValue) == null ? void 0 : I.slice(0, a.value)) || ""), l = ar(n, t, s, i, o), { inputGroupClass: c, onBlur: d, onFocus: u, onMousedown: f, onMouseup: m, onTextBoxValueChange: p, hasFocused: k } = l, w = sr(n, t, l), { onMouseEnter: v, onMouseLeave: b, clearButtonClass: g, shouldShowClearButton: x, clearButtonStyle: T } = w, E = (F) => { var q, H, V; F.stopPropagation(), t.emit("update:modelValue", (q = F.target) == null ? void 0 : q.value), t.emit("valueChange", (H = F.target) == null ? void 0 : H.value), t.emit("change", (V = F.target) == null ? void 0 : V.value); }, h = (F) => { F.stopPropagation(), r.value.value = "", t.emit("update:modelValue", ""), t.emit("valueChange", ""), t.emit("change", ""); }, _ = (F) => { if (n.readonly || !k) return; const { shiftKey: q, altKey: H, key: V } = F; if (F.stopPropagation(), V === "Enter" && !H && F.preventDefault(), (V === "ArrowUp" || V === "ArrowDown") && F.preventDefault(), H && V === "Enter") { F.preventDefault(); const { selectionStart: W, selectionEnd: Q } = r.value; s.value = s.value.slice(0, W) + ` ` + s.value.slice(Q), Bt(() => { var D; r.value.selectionStart = W + 1, r.value.selectionEnd = W + 1, (D = r.value) == null || D.focus(); }); return; } if (q && (V === "ArrowUp" || V === "ArrowDown")) { F.preventDefault(); const W = r.value.selectionStart, Q = s.value; let D = 0, N = 0, Y = 0, j = 0; const L = Q.split(` `); for (let z = 0; z < L.length; z++) { const K = L[z].length; if (j + K + 1 >= W) { j = j + K + 1, D = z; break; } else j = j + K + 1; } V === "ArrowUp" && D > 0 && (Y = W - L[D - 1].length - 1, Y >= L[D - 1].length + 1 ? N = 0 : N = L[D - 1].length + 1 - Y, Bt(() => { r.value.selectionStart = W - Y - N, r.value.selectionEnd = W - Y - N, r.value.focus(); })), V === "ArrowDown" && D < L.length - 1 && (Y = W - (j - L[D].length), Y >= L[D + 1].length + 1 ? N = 0 : N = L[D + 1].length + 1 - Y, Bt(() => { r.value.selectionStart = W + Y + N, r.value.selectionEnd = W + Y + N, r.value.focus(); })); } }, C = A(() => ({ "form-control": !0, "h-100": n.autoHeight })), M = A(() => { const F = {}; return n.resizable || (F.resize = "none"), n.rows > 2 ? { height: "auto", ...F } : F; }), y = A(() => n.disabled || n.readonly ? "" : n.placeholder); Me(() => n.modelValue, (F, q) => { F !== q && (s.value = F); }); const B = () => r.value; t.expose({ elementRef: r, getTextareaElement: B }); function R() { var F, q; n.selectOnCreated && ((F = r.value) == null || F.select()), n.focusOnCreated && ((q = r.value) == null || q.focus({ preventScroll: !0 })); } return kt(() => { R(); }), () => O("div", { ref: o, class: c.value, onMouseenter: v, onMouseleave: b, style: "position:relative" }, [qn(O("textarea", { ref: r, class: C.value, id: n.id, "onUpdate:modelValue": (F) => s.value = F, minlength: n.minLength, maxlength: a.value, tabindex: n.tabIndex, disabled: n.disabled, readonly: n.readonly, autocomplete: n.autocomplete, placeholder: y.value, autofocus: n.autofocus, rows: n.rows, onInput: E, onFocus: u, onChange: p, onKeydown: _, onBlur: d, onMousedown: f, onMouseup: m, style: M.value }, null), [[Xo, s.value]]), x.value && O("span", { id: "clearIcon", class: g.value, style: T.value, onClick: (F) => h(F) }, [O("i", { class: "f-icon modal_close" }, null)])]); } }); function no(n, t, e) { var h; const o = e && e.getStyles && e.getStyles() || "", r = e && e.getDesignerClass && e.getDesignerClass() || "", i = S(); function a() { return (t == null ? void 0 : t.schema.componentType) === "frame" ? !1 : e && e.checkCanMoveComponent ? e.checkCanMoveComponent() : !0; } function s() { return !1; } function l() { return (t == null ? void 0 : t.schema.componentType) === "frame" ? !1 : e && e.checkCanDeleteComponent ? e.checkCanDeleteComponent() : !0; } function c() { return (t == null ? void 0 : t.schema.componentType) === "frame" ? !0 : e && e.hideNestedPaddingInDesginerView ? e.hideNestedPaddingInDesginerView() : !1; } function d(_) { if (!_ || !_.value) return null; if (_.value.schema && _.value.schema.type === "component") return _.value; const C = S(_ == null ? void 0 : _.value.parent), M = d(C); return M || null; } function u(_ = t) { var B; if (e != null && e.getDraggableDesignItemElement) return e.getDraggableDesignItemElement(_); const { componentInstance: C, designerItemElementRef: M } = _; if (!C || !C.value) return null; const { getCustomButtons: y } = C.value; return C.value.canMove || y && ((B = y()) != null && B.length) ? M : u(_.parent); } function f(_) { return !!e && e.canAccepts(_); } function m() { return (t == null ? void 0 : t.schema.label) || (t == null ? void 0 : t.schema.title) || (t == null ? void 0 : t.schema.name); } function p() { } function k(_, C) { var M; !_ || !C || (e != null && e.onAcceptMovedChildElement && e.onAcceptMovedChildElement(_, C), (M = t == null ? void 0 : t.setupContext) == null || M.emit("dragEnd")); } function w(_, C) { const { componentType: M } = _; let y = Zn(M, _, C); e && e.onResolveNewComponentSchema && (y = e.onResolveNewComponentSchema(_, y)); const B = M.toLowerCase().replace(/-/g, "_"); return y && !y.id && y.type === M && (y.id = `${B}_${Math.random().toString().slice(2, 6)}`), y; } function v(_) { _ && e != null && e.onChildElementMovedOut && e.onChildElementMovedOut(_); } function b(..._) { if (e && e.getPropsConfig) return e.getPropsConfig(..._); } function g(_) { if (!_) return; const C = t == null ? void 0 : t.schema, { formSchemaUtils: M } = _; if (C && M.getExpressions().length) { const y = M.getExpressions().findIndex((B) => B.target === C.id); y > -1 && M.getExpressions().splice(y, 1); } } function x(_) { e && e.onRemoveComponent && e.onRemoveComponent(), g(_), t != null && t.schema.contents && t.schema.contents.map((C) => { let M = C.id; C.type === "component-ref" && (M = C.component); const y = n.value.querySelectorAll(`#${M}-design-item`); y != null && y.length && Array.from(y).map((B) => { var R; (R = B == null ? void 0 : B.componentInstance) != null && R.value.onRemoveComponent && B.componentInstance.value.onRemoveComponent(_); }); }); } function T() { if (e && e.getCustomButtons) return e.getCustomButtons(); } function E(_) { if (e && e.onPropertyChanged) return e.onPropertyChanged(_); } return i.value = { canMove: a(), canSelectParent: s(), canDelete: l(), canNested: !c(), contents: t == null ? void 0 : t.schema.contents, elementRef: n, parent: (h = t == null ? void 0 : t.parent) == null ? void 0 : h.componentInstance, schema: t == null ? void 0 : t.schema, styles: o, designerClass: r, canAccepts: f, getBelongedComponentInstance: d, getDraggableDesignItemElement: u, getDraggingDisplayText: m, getPropConfig: b, getDragScopeElement: p, onAcceptMovedChildElement: k, onChildElementMovedOut: v, addNewChildComponentSchema: w, triggerBelongedComponentToMoveWhenMoved: !!e && e.triggerBelongedComponentToMoveWhenMoved || S(!1), triggerBelongedComponentToDeleteWhenDeleted: !!e && e.triggerBelongedComponentToDeleteWhenDeleted || S(!1), onRemoveComponent: x, getCustomButtons: T, onPropertyChanged: E }, i; } const Ia = S(0); function Oa() { Ia.value++; } const Wt = S(0); function Pa(n, t) { const e = t.getBoundingClientRect(), o = n.getBoundingClientRect(), r = o.top >= e.top, i = o.top <= e.bottom; return r && i; } function Da(n) { const t = n.querySelector(".component-btn-group"); if (!t) return; t.style.display = ""; const e = t.getBoundingClientRect(); if (!(e.top === 0 && e.left === 0)) { const o = t.querySelector("div"); if (o) { const r = o.getBoundingClientRect(); o.style.top = e.top + "px"; let i = e.left - r.width; const a = document.querySelector(".editorDiv"); if (a) { const s = a.getBoundingClientRect(); i < s.left && ({ left: i } = n.getBoundingClientRect()); } o.style.left = i + "px"; } } } function Va(n) { if (!window.scrollContainerList) return; const t = Array.from(window.scrollContainerList); if (t.length && t.length === 1) { const e = t[0], o = document.querySelector(`[id=${e}]`); if (o && o.contains(n)) return o; } } function oo(n) { if (!n) return; const t = n.getBoundingClientRect(); if (t.width === 0 && t.height === 0) return; const e = n.querySelector(".component-btn-group"); if (e) { let o = !0; const r = Va(n); if (r && (o = Pa(n, r)), !o) { e.style.display = "none"; return; } Da(n); } } function Na(n) { if (!n) return; let t; n.className.includes("dgComponentSelected") ? t = n : t = n.querySelector(".dgComponentSelected"), t && oo(t); } function Ba(n) { const { formSchemaUtils: t, formStateMachineUtils: e } = n; function o(l, c = "") { return { path: c + l.code, field: l.id, fullPath: l.code }; } function r(l, c = "") { return t.getViewModelById(l).states.map((u) => o(u, c)); } function i(l) { const c = t.getRootViewModelId(), d = r(l); if (l === c) return d; const u = r(c, "root-component."); return [...d, ...u]; } function a(l) { return l.binding && l.binding.path || l.id || ""; } function s() { return e && e.getRenderStates() || []; } return { getVariables: i, getControlName: a, getStateMachines: s }; } class ro { constructor(t) { P(this, "sessionVariables", [ { key: "CurrentSysOrgName", name: "当前组织Name", description: "当前组织Name" }, // { // key: "CurrentSysOrgCode", // name: "当前组织Code", // description: "当前组织Code" // }, { key: "CurrentSysOrgId", name: "当前组织Id", description: "当前组织Id" }, { key: "CurrentUserName", name: "当前用户Name", description: "当前用户Name" }, { key: "CurrentUserCode", name: "当前用户Code", description: "当前用户Code" }, { key: "CurrentUserId", name: "当前用户Id", description: "当前用户Id" }, { key: "CurrentLanguage", name: "当前语言编号", description: "当前登录的语言编号,例如简体中文返回'zh-CHS',英文返回'en',繁体中文'zh-CHT'" } ]); P(this, "expressionNames", { compute: "计算表达式", dependency: "依赖表达式", validate: "验证表达式", dataPicking: "帮助前表达式", visible: "可见表达式", readonly: "只读表达式", required: "必填表达式" }); P(this, "getExpressionConverter", (t, e) => ({ convertFrom: (o, r, i, a) => { const s = i.getExpressionRuleValue(t, e || r); return s && s.value || ""; }, convertTo: (o, r, i, a, s) => { var l; if (r === "dataPicking" && (i != null && i.target)) { const c = `${i.target}_dataPicking`; ((l = i.rules) == null ? void 0 : l.some( (u) => u.id === c && u.value )) ? o.dictPickingExpressionId = c : delete o.dictPickingExpressionId; } a.updateExpression(i); } })); this.formSchemaService = t; } getExpressionRule(t, e) { const o = this.formSchemaService.getExpressions(); if (!o) return ""; const r = o.find((a) => a.target === t); if (!r) return ""; const i = r.rules.find((a) => a.type === e); return i || ""; } // 获取上下文表单变量 getContextFormVariables() { const { module: t } = this.formSchemaService.getFormSchema(); if (!t.viewmodels || t.viewmodels.length === 0) return []; const e = this.formSchemaService.getRootViewModelId(), o = this.formSchemaService.getViewModelById(e); if (!o || !o.states || o.states.length === 0) return []; const r = []; return o.states.forEach((i) => { r.push({ key: i.code, name: i.name, description: i.name, category: i.category }); }), r; } createTreeNode(t, e, o = "label") { return { id: t.id, name: t.name, bindingPath: t[o], parents: e }; } buildEntityFieldsTreeData(t = null, e) { const o = []; return t == null || t.forEach((r) => { var s; const i = this.createTreeNode(r, e); let a = []; (s = r.type) != null && s.fields && (a = this.buildEntityFieldsTreeData(r.type.fields, [...e, r.label])), o.push({ data: i, children: a, expanded: !0 }); }), o; } buildChildEntityTreeData(t = null, e) { const o = []; return t == null || t.forEach((r) => { var l, c; const i = this.createTreeNode(r, e), a = this.buildEntityFieldsTreeData((l = r.type) == null ? void 0 : l.fields, [...e, r.label]), s = this.buildChildEntityTreeData((c = r.type) == null ? void 0 : c.entities, [...e, r.label]); s != null && s.length && (a == null || a.push(...s)), o.push({ data: i, children: a || [], // 空值回退 expanded: !0 }); }), o; } getEntitiesTreeData() { const t = this.formSchemaService.getSchemaEntities(); if (!(t != null && t.length)) return []; const e = t[0]; if (!(e != null && e.type)) return []; const o = this.buildEntityFieldsTreeData(e.type.fields, [e.code]), r = this.buildChildEntityTreeData(e.type.entities, [e.code]); return r != null && r.length && (o == null || o.push(...r)), { entityCode: e.code, fields: [{ data: this.createTreeNode(e, [], "code"), children: o || [] }] }; } getEntitiesAndVariables() { return { entities: this.getEntitiesTreeData(), variables: { session: { name: "系统变量", items: this.sessionVariables, visible: !1 }, forms: { name: "表单变量", items: this.getContextFormVariables(), visible: !0 } } }; } onBeforeOpenExpression(t, e, o) { const r = o === "Field" ? t.binding.field : t.id, i = this.getExpressionRule(r, e), a = this.getEntitiesAndVariables(), s = { message: ["validate", "required", "dataPicking"].includes(e) && i ? i.message : "", ...a }; return i.messageType != null && (s.messageType = i.messageType), s; } buildRule(t, e, o, r) { const { expression: i, message: a, messageType: s } = e, l = { id: `${t}_${o}`, type: o, value: i }; return (o === "validate" || o === "dataPicking" || o === "required") && (l.message = a), o === "dataPicking" && (l.messageType = s), o === "validate" && r && (l.elementId = r), l; } getExpressionData() { const { expressions: t } = this.formSchemaService.getFormSchema().module; return t || []; } updateExpression(t, e, o, r) { const i = e === "Field" ? t.binding.field : t.id, a = this.buildRule(i, o, r, t.type === "form-group" ? t.id : ""); let l = this.getExpressionData().find((d) => d.targetType === e && d.target === i); const c = (d) => d.value.trim() === ""; if (l) { const d = l.rules.find((u) => u.id === a.id); if (d) c(a) ? l.rules = l.rules.filter((u) => u.id !== a.id) : (Object.assign(d, a), r === "validate" && t.type === "form-group" && (d.elementId = t.id)); else { if (c(a)) return null; l.rules = l.rules || [], l.rules.push(a); } } else { if (c(a)) return null; l = { target: `${i}`, rules: [a], targetType: e }; } return l; } getExpressionEditorOptions(t, e, o, r) { return o.reduce((i, a) => { var l, c; const s = e === "Field" ? (l = t == null ? void 0 : t.binding) == null ? void 0 : l.field : t.id; return i[a] = { hide: e === "Field" ? !!((c = t == null ? void 0 : t.binding) != null && c.field) : !1, description: "", title: this.expressionNames[a], type: "string", $converter: this.getExpressionConverter(s), editor: { type: "expression-editor", singleExpand: !1, dialogTitle: `${this.expressionNames[a]}编辑器`, showMessage: a === "validate" || a === "dataPicking" || a === "required", showMessageType: a === "dataPicking", beforeOpen: () => this.onBeforeOpenExpression(t, a, e), onSubmitModal: (d) => { const u = this.updateExpression(t, e, d, a); if (r) { const f = this.buildRule(s, d, a); r(f); } return u; } } }, i; }, {}); } getExpressionInfo(t, e, o) { const r = e === "Field" ? t.binding.field : t.id, i = this.getExpressionRule(r, o), a = { value: i && i.value, targetId: r, targetType: e, expressionType: o }; return i && i.message && (a.message = i.message), a; } getExpressionConfig(t, e, o = ["compute", "dependency", "validate"], r) { return { description: "表达式", title: "表达式", properties: { ...this.getExpressionEditorOptions(t, e, o, r) } }; } getExpressionOptions(t, e, o) { const r = this.getExpressionInfo(t, e, o); return { dialogTitle: `${this.expressionNames[o]}编辑器`, singleExpand: !1, showMessage: o === "required", beforeOpen: () => this.onBeforeOpenExpression(t, o, e), expressionInfo: r }; } } class io { constructor(t, e) { P(this, "componentId"); P(this, "viewModelId"); P(this, "eventsEditorUtils"); P(this, "formSchemaUtils"); P(this, "formMetadataConverter"); P(this, "designViewModelUtils"); P(this, "designViewModelField"); P(this, "controlCreatorUtils"); P(this, "designerHostService"); P(this, "schemaService", null); P(this, "metadataService", null); P(this, "propertyConfig", { type: "object", categories: {} }); var o; this.componentId = t, this.designerHostService = e, this.eventsEditorUtils = e.eventsEditorUtils, this.formSchemaUtils = e.formSchemaUtils, this.formMetadataConverter = e.formMetadataConverter, this.viewModelId = ((o = this.formSchemaUtils) == null ? void 0 : o.getViewModelIdByComponentId(t)) || "", this.designViewModelUtils = e.designViewModelUtils, this.controlCreatorUtils = e.controlCreatorUtils, this.metadataService = e.metadataService, this.schemaService = e.schemaService; } getTableInfo() { var t; return (t = this.schemaService) == null ? void 0 : t.getTableInfoByViewModelId(this.viewModelId); } setDesignViewModelField(t) { var o; const e = t.binding && t.binding.type === "Form" && t.binding.field; if (e) { if (!this.designViewModelField) { const r = this.designViewModelUtils.getDgViewModel(this.viewModelId); this.designViewModelField = r.fields.find((i) => i.id === e); } t.updateOn = (o = this.designViewModelField) == null ? void 0 : o.updateOn; } } getBasicPropConfig(t) { return { description: "Basic Information", title: "基本信息", properties: { id: { description: "组件标识", title: "标识", type: "string", readonly: !0 }, type: { description: "组件类型", title: "控件类型", type: "select", editor: { type: "combo-list", textField: "name", valueField: "value", idField: "value", editable: !1, data: [{ value: t.type, name: de[t.type].name }] } } } }; } getAppearanceConfig(t = null, e = {}, o) { const r = { title: "外观", description: "Appearance" }, i = { class: { title: "class样式", type: "string", description: "组件的CSS样式", $converter: "/converter/appearance.converter" }, style: { title: "style样式", type: "string", description: "组件的样式", $converter: "/converter/appearance.converter" } }; for (const a in e) i[a] = Object.assign(i[a] || {}, e[a]); return { ...r, properties: { ...i }, setPropertyRelates(a, s) { if (a) { switch (a && a.propertyID) { case "class": case "style": { Wt.value++; break; } } o && o(a, t, s); } } }; } getPropertyEditorParams(t, e = [], o = "visible", r = {}, i = {}) { const { getVariables: a, getControlName: s, getStateMachines: l } = Ba(this.designerHostService), c = this.getRealTargetType(t), d = e && e.length > 0 ? e : ["Const", "Variable", "StateMachine", "Expression"], u = { type: "property-editor", propertyTypes: d }; return d.map((f) => { switch (f) { case "Const": Object.assign(u, { constType: "enum", constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }] }, r); break; case "Expression": u.expressionConfig = this.getExpressionOptions(t, c, o); break; case "StateMachine": u.stateMachines = l(); break; case "Variable": Object.assign(u, { controlName: s(t), newVariablePrefix: "is", newVariableType: "Boolean", variables: a(this.viewModelId), onBeforeOpenVariables: (m) => { m.value = a(this.viewModelId); } }, i); break; } }), u; } getVisibleProperty(t, e = "") { return { visible: { title: "是否可见", type: "boolean", description: "运行时组件是否可见", editor: this.getPropertyEditorParams(t, e === "gridFieldEditor" ? ["Const", "Expression"] : ["Const", "Variable", "StateMachine", "Expression"], "visible") } }; } /** * 获取行为 * @param propertyData * @param viewModelId * @returns */ getBehaviorConfig(t, e = "", o = {}, r) { const i = { title: "行为", description: "" }, a = this.getVisibleProperty(t, e); for (const l in o) a[l] = Object.assign(a[l] || {}, o[l]); const s = this; return { ...i, properties: { ...a }, setPropertyRelates(l, c) { if (l) { switch (l.propertyID) { case "disabled": case "readonly": case "visible": s.afterMutilEditorChanged(t, l); break; } r && r(l, c); } } }; } /** * 当多值编辑器变更时 * @param propertyData * @param changeObject */ afterMutilEditorChanged(t, e) { this.addNewVariableToViewModel(e, this.viewModelId), this.updateExpressionValue(e), this.clearExpression(e, t); } /** * * @param propertyId * @param componentInstance * @returns */ updateElementByParentContainer(t, e) { const o = e && e.parent && e.parent.schema; if (!o) return; const r = o.contents.findIndex((a) => a.id === t), i = Et(o.contents[r]); o.contents.splice(r, 1), o.contents.splice(r, 0, i), Oa(); } /** * 属性编辑器,在编辑过程中会新增变量,此处需要将新增的变量追加到ViewModel中 * @param changeObject * @param viewModelId * @returns */ addNewVariableToViewModel(t, e) { const o = t.propertyValue; if (!(o && typeof o == "object") || !(o.type === "Variable" && o.isNewVariable)) return; const a = { id: o.field, category: "locale", code: o.fullPath, name: o.fullPath, type: o.newVariableType || "String" }; delete o.newVariableType, delete o.isNewVariable, this.formSchemaUtils.getVariableByCode(a.code) || this.formSchemaUtils.getViewModelById(e).states.push(a); } /** * 更新表达式到expressions节点 * @param changeObject */ updateExpressionValue(t) { const e = t.propertyValue; if (!((e && e.type) === "Expression" && e.expressionInfo)) return; const { expressionId: i, expressionInfo: a } = e, { targetId: s, targetType: l, expressionType: c, value: d, message: u } = a, f = this.formSchemaUtils.getModule(); f.expressions ?? (f.expressions = []); const { expressions: m } = f; let p = m.find((w) => w.target === s); p || (p = { target: s, rules: [], targetType: l }, m.push(p)); const k = p.rules.find((w) => w.type === c); if (k) k.value = d, k.message = u; else { const w = { id: i, type: c, value: d, message: u }; p.rules.push(w); } delete e.expressionInfo; } /** * 属性类型切换为非表达式后,清除原表达式 * @param changeObject * @param propertyData * @returns */ clearExpression(t, e) { const o = t.propertyValue; if (o && o.type === "Expression") return; const i = t.propertyID, a = this.formSchemaUtils.getExpressions(), s = e.binding ? e.binding.field : e.id, l = a.find((c) => c.target === s); !l || !l.rules || (l.rules = l.rules.filter((c) => c.type !== i)); } getExpressionOptions(t, e, o) { return new ro(this.formSchemaUtils).getExpressionOptions(t, e, o); } getRealTargetType(t) { return ["response-toolbar-item", "tab-toolbar-item", "section-toolbar-item"].indexOf(t.type) > -1 ? "Button" : t.binding && t.binding.field ? "Field" : "Container"; } } const jt = class jt { /** * 根据绑定字段类型获取可用的输入类控件 */ static getEditorTypesByMDataType(t, e = "") { let o = jt.fieldControlTypeMapping[t]; if (e === "data-grid-column" && (o != null && o.length)) { const r = [de["check-group"].type, de["radio-group"].type]; o = o.filter((i) => !r.includes(i.key)); } return o; } /** * 获取所有输入类控件 */ static getAllInputTypes() { const t = []; for (const e in jt.fieldControlTypeMapping) jt.fieldControlTypeMapping[e].forEach((o) => { t.find((r) => r.key === o.key && r.value === o.value) || t.push({ key: o.key, value: o.value }); }); return t; } /** * 提供schema字段基础属性和DOM控件属性的映射 * @param control 控件元数据 */ static mappingDomPropAndSchemaProp(t, e) { var i; const o = (i = t.editor) == null ? void 0 : i.type, r = []; return (t.type === de["data-grid-column"].type || t.type === de["tree-grid-column"].type) && e && e.categoryId && e.categoryId.indexOf("gridFieldEditor") < 0 && r.push({ domField: "title", schemaField: "name" }), r.push({ domField: "label", schemaField: "name" }), r.push({ domField: "editor.required", schemaField: "require" }), r.push({ domField: "editor.readonly", schemaField: "readonly" }), (o === de["input-group"].type || o === de.textarea.type || o === de["number-spinner"].type) && r.push({ domField: "editor.maxLength", schemaField: "type.length" }), o === de["number-spinner"].type && r.push({ domField: "editor.precision", schemaField: "type.precision" }), (t.type === de["data-grid-column"].type || t.type === de["tree-grid-column"].type) && r.push({ domField: "formatter.precision", schemaField: "type.precision" }), (o === de["combo-list"].type || o === de["radio-group"].type) && r.push({ domField: "editor.data", schemaField: "type.enumValues" }), (t.type === de["data-grid-column"].type || t.type === de["tree-grid-column"].type) && r.push({ domField: "formatter.data", schemaField: "type.enumValues" }), o === de["date-picker"].type && (r.push({ domField: "editor.displayFormat", schemaField: "editor.format" }), r.push({ domField: "editor.fieldType", schemaField: "type.name" })), o === de["number-spinner"].type && (r.push({ domField: "editor.max", schemaField: "editor.maxValue" }), r.push({ domField: "editor.min", schemaField: "editor.minValue" })), o === de.lookup.type && (r.push({ domField: "editor.dataSource", schemaField: "editor.dataSource" }), r.push({ domField: "editor.valueField", schemaField: "editor.valueField" }), r.push({ domField: "editor.textField", schemaField: "editor.textField" }), r.push({ domField: "editor.displayType", schemaField: "editor.displayType" }), r.push({ domField: "editor.mapFields", schemaField: "editor.mapFields" }), r.push({ domField: "editor.helpId", schemaField: "editor.helpId" })), r.push({ domField: "path", schemaField: "bindingPath" }), r.push({ domField: "binding.path", schemaField: "bindingField" }), r.push({ domField: "binding.fullPath", schemaField: "path" }), (t.type === de["data-grid-column"].type || t.type === de["tree-grid-column"].type) && r.push({ domField: "field", schemaField: "bindingPath" }), r; } }; /** * <字段类型,可配置的控件类型列表>的映射 */ P(jt, "fieldControlTypeMapping", { String: [ { key: de["input-group"].type, value: de["input-group"].name }, { key: de.lookup.type, value: de.lookup.name }, { key: de["date-picker"].type, value: de["date-picker"].name }, { key: de["check-group"].type, value: de["check-group"].name }, { key: de["radio-group"].type, value: de["radio-group"].name }, { key: de["combo-list"].type, value: de["combo-list"].name }, { key: de.textarea.type, value: de.textarea.name }, { key: de["time-picker"].type, value: de["time-picker"].name } ], Text: [ { key: de.textarea.type, value: de.textarea.name }, { key: de.lookup.type, value: de.lookup.name } ], Decimal: [ { key: de["number-spinner"].type, value: de["number-spinner"].name } ], Integer: [ { key: de["number-spinner"].type, value: de["number-spinner"].name } ], Number: [ { key: de["number-spinner"].type, value: de["number-spinner"].name } ], BigNumber: [ { key: de["number-spinner"].type, value: de["number-spinner"].name } ], Date: [ { key: de["date-picker"].type, value: de["date-picker"].name } ], DateTime: [ { key: de["date-picker"].type, value: de["date-picker"].name } ], Boolean: [ { key: de.switch.type, value: de.switch.name }, { key: de["check-box"].type, value: de["check-box"].name } ], Enum: [ { key: de["combo-list"].type, value: de["combo-list"].name }, { key: de["radio-group"].type, value: de["radio-group"].name } ], Object: [ { key: de.lookup.type, value: de.lookup.name }, { key: de["combo-list"].type, value: de["combo-list"].name }, { key: de["radio-group"].type, value: de["radio-group"].name } ] }); let nn = jt; var Jt = /* @__PURE__ */ ((n) => (n.Form = "Form", n.Variable = "Variable", n))(Jt || {}); class Ra { constructor() { /** 控件标题 */ P(this, "label", ""); /** 控件id */ P(this, "id", ""); /** 每个控件占用的栅格数 */ P(this, "columnInSM", 12); P(this, "columnInMD", 6); P(this, "columnInLG", 3); P(this, "columnInEL", 2); /** 每个控件占用的列数 */ P(this, "displayWidthInSM", 1); P(this, "displayWidthInMD", 1); P(this, "displayWidthInLG", 1); P(this, "displayWidthInEL", 1); /** 编辑器内部默认显示的屏幕大小-----可以去掉 */ P(this, "displayColumnCountAtBreakPoint", "md"); /** 控件所在行,传0即可-----编辑器内部使用 */ P(this, "tagRow", 0); /** 控件是否显示上方空白:传0即可-----编辑器内部使用 */ P(this, "showTopBorder", 0); /** 区域,从1开始。卡片内的控件从上往下,从左往右划分区域,遇到分组fieldSet时group+1,分组结束后group+1 */ P(this, "group", 1); /** 控件是否符合标准的class配置(设计器用的) */ P(this, "isSupportedClass", !0); /** 控件所在分组id(设计器用的) */ P(this, "fieldSetId", ""); } } function La(n) { let t, e; const o = /* @__PURE__ */ new Map(); let r = []; function i(d, u) { const m = d.split(" ").filter((b) => b.startsWith("col-")); if (m.length === 0) { u.isSupportedClass = !1; return; } let p = m.find((b) => /^col-([1-9]|10|11|12)$/.test(b)), k = m.find((b) => /^col-md-([1-9]|10|11|12)$/.test(b)), w = m.find((b) => /^col-xl-([1-9]|10|11|12)$/.test(b)), v = m.find((b) => /^col-el-([1-9]|10|11|12)$/.test(b)); p = p || "col-12", u.columnInSM = parseInt(p.replace("col-", ""), 10), u.displayWidthInSM = u.columnInSM / 12, u.displayWidthInSM !== 1 && (u.isSupportedClass = !1), k = k || "col-md-" + u.columnInSM, u.columnInMD = parseInt(k.replace("col-md-", ""), 10), u.displayWidthInMD = u.columnInMD / 6, [1, 2].includes(u.displayWidthInMD) || (u.isSupportedClass = !1), w = w || "col-xl-" + u.columnInMD, u.columnInLG = parseInt(w.replace("col-xl-", ""), 10), u.displayWidthInLG = u.columnInLG / 3, [