@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,654 lines (1,651 loc) • 62.9 kB
JavaScript
var we = Object.defineProperty;
var ye = (i, e, t) => e in i ? we(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
var A = (i, e, t) => ye(i, typeof e != "symbol" ? e + "" : e, t);
import { getCustomStyle as te, getCustomClass as ne, excludeProperties as Ce, EVENT_PROPERTY_TAB_IDS as be, withInstall as Ie } from "../../components/common/index.esm.js";
import Ve, { listViewProps as Se, FListViewTable as xe } from "../../components/list-view/index.esm.js";
import { resolveAppearance as Me, createPropsResolver as oe, getPropsResolverGenerator as le, createCollectionBindingResolver as Te } from "../../components/dynamic-resolver/index.esm.js";
import { ref as V, computed as U, createVNode as a, Fragment as q, watch as ke, withModifiers as Ee, withDirectives as Pe, vModelText as Fe, createTextVNode as j, defineComponent as ae, inject as X, onMounted as re } from "vue";
import { DgControl as G, canvasChanged as Re, refreshCanvas as Ne, useDesignerComponent as ce } from "../../components/designer-canvas/index.esm.js";
import { useFilter as Be, useIdentify as Ae, useHierarchy as Ue, useGroupData as $e, useDataView as De, useSelection as _e, useRow as Oe, useEdit as Le, useVisualDataBound as je, useVisualDataCell as Ge, useVisualDataRow as He, useVisualGroupRow as qe, useVisualSummaryRow as We, useVisualData as ze } from "../../components/data-view/index.esm.js";
import { LocaleService as Ye } from "../../components/locale/index.esm.js";
import de, { FCheckbox as J } from "../../components/checkbox/index.esm.js";
import { cloneDeep as Ke } from "lodash-es";
function Xe(i, e) {
function t(l) {
const s = [];
let r = l.nextNode();
for (; r; )
s.push(r), r = l.nextNode();
return s;
}
function n(l, s) {
const r = document.createTreeWalker(l, NodeFilter.SHOW_TEXT);
return t(r).map((u) => ({ textNode: u, text: (u.textContent || "").toLocaleLowerCase() })).map(({ textNode: u, text: w }) => {
const v = [];
let C = 0;
for (; C < w.length; ) {
const I = w.indexOf(s, C);
if (I === -1)
break;
v.push(I), C = I + s.length;
}
return v.map((I) => {
const y = new Range();
return y.setStart(u, I), y.setEnd(u, I + s.length), y;
});
}).flat();
}
function o(l) {
if (!CSS.highlights || (CSS.highlights.clear(), !l || !e))
return;
const s = n(e.value, l.toLocaleLowerCase()), r = new Highlight(...s);
CSS.highlights.set("search-result", r);
}
return { search: o };
}
function se(i, e, t, n, o, l, s, r, c, p) {
const d = V(i.size), u = V(i.textField), w = V(i.titleField), v = V(i.disableField), C = U(() => {
var h, P;
return ((h = i.selection) == null ? void 0 : h.multiSelect) && ((P = i.selection) == null ? void 0 : P.showCheckbox);
}), {
onMouseenterItem: I,
onMouseoverItem: y,
onMouseoutItem: b
} = l, {
getKey: S,
listViewItemClass: F,
listViewItemStyle: k,
onCheckItem: T,
onClickItem: E
} = s, R = U(() => {
const h = {
"text-overflow": "ellipsis",
overflow: "hidden",
"white-space": "nowrap"
};
return i.itemClass ? h : {
margin: d.value === "small" ? "0.25rem 0" : "8px 0",
...h
};
});
function M(h, P, N) {
return h.checked = r.findIndexInSelectedItems(h) > -1, a("li", {
class: F(h, P),
id: S(h, P),
key: S(h, P),
style: k(h, P),
onClick: (B) => E(h, P, B),
onMouseenter: (B) => I(B, h, P),
onMouseover: (B) => y(B, h, P),
onMouseout: (B) => b(B, h, P)
}, [C.value && a("div", {
class: "f-list-select",
onClick: (B) => B.stopPropagation()
}, [a(J, {
id: "list-" + S(h, P),
customClass: "listview-checkbox float-left",
disabled: h[v.value],
checked: h.checked,
"onUpdate:checked": (B) => h.checked = B,
onChange: (B) => {
T(h, P, !B.checked);
}
}, null)]), a("div", {
class: "f-list-content"
}, [a("div", {
class: i.itemContentClass,
style: R.value,
title: h.raw[w.value] || h.raw[u.value]
}, [h.raw[u.value]])])]);
}
return {
renderItem: M
};
}
function Je(i, e, t, n, o, l, s, r, c, p) {
const d = V(i.multiSelect), u = V(i.disableField), w = V(i.textField), {
onMouseenterItem: v,
onMouseoverItem: C,
onMouseoutItem: I
} = l, {
getKey: y,
listViewItemClass: b,
listViewItemStyle: S,
onCheckItem: F,
onClickItem: k,
updateSelectedItems: T
} = s;
function E(M, h, P) {
return i.contentTemplate ? a(q, null, [i.contentTemplate({
item: M.raw,
index: h,
selectedItem: P
})]) : e.slots.content ? a(q, null, [e.slots.content && e.slots.content({
item: M.raw,
index: h,
selectedItem: P
})]) : a("div", {
style: "margin: 10px 0;"
}, [M.raw[w.value || "name"]]);
}
function R(M, h, P) {
return a("li", {
class: b(M, h),
id: y(M, h),
key: y(M, h),
style: S(M, h),
onClick: (N) => k(M, h, N),
onMouseenter: (N) => v(N, M, h),
onMouseover: (N) => C(N, M, h),
onMouseout: (N) => I(N, M, h)
}, [d.value && a("div", {
class: "f-list-select",
onClick: (N) => N.stopPropagation()
}, [a(J, {
id: "list-" + y(M, h),
customClass: "listview-checkbox",
disabled: M[u.value],
checked: M.checked,
"onUpdate:checked": (N) => M.checked = N,
onChange: (N) => {
F(M, h, !N.checked), T();
}
}, null)]), a("div", {
class: "f-list-content"
}, [E(M, h, P)])]);
}
return {
renderItem: R
};
}
function Qe(i, e, t, n, o, l, s, r, c, p) {
const d = V(i.multiSelect), u = V(i.disableField), w = V(i.textField), {
onMouseenterItem: v,
onMouseoverItem: C,
onMouseoutItem: I
} = l, {
getKey: y,
listViewItemClass: b,
onCheckItem: S,
onClickItem: F
} = s, {
dragstart: k,
dragenter: T,
dragover: E,
dragend: R
} = n, {
removeItem: M
} = c, h = U(() => ({
margin: d.value ? "10px 0" : "10px 0px 10px 14px"
}));
function P(g, f = "") {
const x = g.target;
x.title = x.scrollWidth > x.clientWidth ? f : "";
}
function N(g) {
return a("div", {
style: h.value,
onMouseenter: (f) => P(f, g.raw[w.value || "name"])
}, [g.raw[w.value || "name"]]);
}
function B() {
return e.slots.itemContent ? e.slots.itemContent : N;
}
const _ = B();
function O(g, f, x) {
return a("li", {
class: b(g, f),
id: y(g, f),
key: y(g, f),
onClick: (m) => F(g, f, m),
onMouseenter: (m) => v(m, g, f),
onMouseover: (m) => C(m, g, f),
onMouseout: (m) => I(m, g, f),
draggable: "true",
onDragstart: (m) => k(m, g, f),
onDragenter: (m) => T(m, f),
onDragend: (m) => R(m, g),
onDragover: (m) => E(m)
}, [d.value && a("div", {
class: "f-list-select",
onClick: (m) => m.stopPropagation()
}, [a(J, {
id: "list-" + y(g, f),
customClass: "listview-checkbox",
disabled: g[u.value],
checked: g.checked,
"onUpdate:checked": (m) => g.checked = m,
onChange: (m) => S(g, f, !m.checked)
}, null)]), a("div", {
class: "f-list-content"
}, [_(g)]), i.allowDelete && a("div", {
class: "f-list-remove",
onClick: (m) => {
m.stopPropagation(), M(f);
}
}, [a("div", {
class: "f-list-remove-icon"
}, [a("i", {
class: "f-icon f-icon-remove_face"
}, null)])]), a("div", {
class: "f-list-handle"
}, [a("div", null, [a("i", {
class: "f-icon f-icon-drag-vertical"
}, null)])])]);
}
return {
renderItem: O
};
}
function Ze(i, e, t, n, o, l, s, r, c, p) {
var y;
const d = V(((y = i.group) == null ? void 0 : y.groupFields) || []), {
collpaseGroupIconClass: u
} = o, {
toggleGroupRow: w
} = p;
function v(b, S) {
b.stopPropagation(), S.collapse = !S.collapse, t.value = w(S.collapse ? "collapse" : "expand", S, t.value);
}
function C(b, S, F) {
return e.slots.group ? a(q, null, [e.slots.content && e.slots.group({
item: b.raw,
index: S,
selectedItem: F
})]) : a("div", {
class: "f-navlookup-recentHeader",
onClick: (k) => v(k, b)
}, [a("div", {
class: "fv-grid-group-row-icon"
}, [a("span", {
class: u(b)
}, null)]), a("div", {
class: "f-navlookup-recommandLabel"
}, [b.raw[d.value[b.layer]]])]);
}
function I(b, S, F) {
return b.layer > -1 && C(b, S, F);
}
return {
renderItem: I
};
}
function et(i, e, t, n) {
const { dataView: o } = t, { updateSelectedItems: l } = n;
function s(r) {
if (r > -1 && r < o.value.length) {
if (i != null && i.checkBeforeRemoveItem && !i.checkBeforeRemoveItem(o.value[r]))
return;
const c = o.value.splice(r, 1);
l(), e.emit("removeItem", c[0]);
}
}
return { removeItem: s };
}
function tt(i, e, t, n, o, l, s, r, c, p) {
const d = V(i.view), u = V(i.view === "CardView"), w = V({}), v = et(i, e, n, c), C = U(() => ({
"f-list-view-group": !0,
"f-list-view-group-multiselect": i.multiSelect,
"d-flex": u.value,
"flex-wrap": u.value
})), I = U(() => !!t.value && t.value.length > 0), y = U(() => t.value.length === 0);
U(() => y.value && !e.slots.empty);
function b() {
return d.value === "SingleView" ? se : d.value === "DraggableView" ? Qe : (d.value === "ContentView" || d.value === "CardView") && (i.contentTemplate || e.slots.content) ? Je : se;
}
const S = b(), {
renderItem: F
} = S(i, e, t, p, o, l, c, s, v, r), {
renderItem: k
} = Ze(i, e, t, p, o, l, c, s, v, r), T = [F, k];
function E() {
return t.value.filter((h) => h.visible !== !1).map((h, P) => T[h.type](h, P, w));
}
function R() {
return a("div", {
class: "f-list-view-emptydata",
style: "margin: 0 auto;"
}, [a("p", {
class: "f-empty-title"
}, [i.emptyTemplate ? i.emptyTemplate() : e.slots.empty ? e.slots.empty() : Ye.getLocaleValue("listView.emptyMessage")])]);
}
function M() {
return a("ul", {
class: C.value,
style: "list-style: none;"
}, [I.value && E(), y.value && R()]);
}
return {
renderListArea: M
};
}
function nt(i, e, t, n, o) {
const {
showSelectAll: l,
selectAll: s,
unSelectAll: r,
selectAllStatus: c,
indeterminateStatus: p
} = n;
function d(v) {
v ? s() : r();
}
const u = U(() => "f-list-view-group-item f-combo-list-item f-un-select");
function w() {
return a("div", {
class: "f-list-view-header"
}, [l.value && o.dataView.value.length > 0 && a("ul", {
class: "f-list-view-group f-list-view-group-multiselect",
style: "list-style: none;"
}, [a("li", {
class: u.value
}, [a("div", {
class: "f-list-select"
}, [a(de, {
customClass: "listview-checkbox float-left",
modelValue: c.value,
indeterminate: p.value,
"onUpdate:modelValue": (v) => d(v)
}, null)])])]), e.slots.header && e.slots.header()]);
}
return {
renderHeader: w
};
}
function ie(i, e, t, n, o) {
const l = V(i.headerClass), s = V(i.placeholder), r = V(""), c = U(() => !r.value), p = U(() => !!r.value), {
showSelectAll: d,
selectAll: u,
unSelectAll: w,
selectAllStatus: v,
indeterminateStatus: C
} = n, I = U(() => "f-list-view-group-item f-combo-list-item f-un-select");
function y(T) {
r.value = "";
}
function b(T) {
T ? u() : w();
}
ke(r, (T) => {
i.enableHighlightSearch && t.search(T), e.emit("afterSearch", T);
});
const S = U(() => {
const T = {
"form-group": !0,
"farris-form-group": !0
};
return l.value && l.value.split(" ").reduce((R, M) => (R[M] = !0, R), T), T;
});
function F(T) {
}
function k() {
return a("div", {
class: "f-list-view-header",
onClick: Ee(() => F, ["prevent", "stop"])
}, [d.value && o.dataView.value.length > 0 && a("ul", {
class: "f-list-view-group f-list-view-group-multiselect",
style: "list-style: none;"
}, [a("li", {
class: I.value
}, [a("div", {
class: "f-list-select"
}, [a(de, {
customClass: "listview-checkbox float-left",
modelValue: v.value,
indeterminate: C.value,
"onUpdate:modelValue": (T) => b(T)
}, null)])])]), a("div", {
class: S.value
}, [a("div", {
class: "farris-input-wrap"
}, [a("div", {
class: "f-cmp-inputgroup"
}, [a("div", {
class: "input-group f-state-editable"
}, [Pe(a("input", {
class: "form-control f-utils-fill text-left",
"onUpdate:modelValue": (T) => r.value = T,
name: "input-group-value",
type: "text",
placeholder: s.value,
autocomplete: "off"
}, null), [[Fe, r.value]]), a("div", {
class: "input-group-append"
}, [p.value && a("span", {
class: "input-group-text input-group-clear",
onClick: (T) => y()
}, [a("i", {
class: "f-icon f-icon-close-circle"
}, null)]), c.value && a("span", {
class: "input-group-text"
}, [a("span", {
class: "f-icon f-icon-search"
}, null)])])])])])])]);
}
return {
renderHeader: k
};
}
function st() {
const i = V(""), e = V(-1), t = V(""), n = V(-1), o = V(!1);
function l(u, w, v) {
n.value = v;
}
function s(u, w, v) {
o.value || (n.value = v);
}
function r(u, w, v) {
n.value = -1;
}
function c() {
o.value = !0;
}
function p() {
o.value = !1;
}
function d() {
e.value = -1, i.value = "";
}
return {
activeIndex: e,
focusedItemId: t,
hoverIndex: n,
clearActiveItem: d,
onMouseenterItem: l,
onMouseoverItem: s,
onMouseoutItem: r,
resumeHover: p,
suspendHover: c
};
}
function it(i, e, t, n, o) {
const l = V(i.idField), { dataView: s } = t, r = V(-1), c = V(!1), { activeIndex: p, focusedItemId: d, hoverIndex: u, resumeHover: w, suspendHover: v } = n;
let C, I = 0, y = 0, b = null, S = null;
const F = 10, k = 50;
function T(g) {
if (!g)
return null;
const { overflowY: f } = getComputedStyle(g);
return f === "auto" || f === "scroll" ? g : T(g.parentElement);
}
function E(g, f) {
S && clearInterval(S), S = window.setInterval(() => {
f === "up" ? g.scrollTop -= F : g.scrollTop += F;
}, 16);
}
function R() {
S && (clearInterval(S), S = null);
}
function M(g) {
const f = g.target;
if (b || (b = T(f)), !b) {
R();
return;
}
const x = b.getBoundingClientRect(), m = g.clientY, D = m - x.top, $ = x.bottom - m;
D < k && b.scrollTop > 0 ? E(b, "up") : $ < k && b.scrollTop < b.scrollHeight - b.clientHeight ? E(b, "down") : R();
}
function h(g, f) {
const x = g - I, m = f - y;
C.style.left = parseInt(C.style.left) + x + "px", C.style.top = parseInt(C.style.top) + m + "px", I = g, y = f;
}
function P(g) {
const { left: f, top: x } = g.getBoundingClientRect(), m = g.cloneNode(!0);
return m.className = m.className + " f-listview-drag-moving", m.style.cssText = `
position:absolute;
left:${f}px;
top:${document.documentElement.scrollTop ? x + document.documentElement.scrollTop : x}px;
z-index: 999999;
pointer-events: none;
border-radius: 10px;
margin: 4px 2px;
display: flex;
align-items: center;
float: none;
text-align: initial;
width:${getComputedStyle(g).width};
height:${getComputedStyle(g).height};
`, m.children[0].style.cssText = "padding: 0 0 0 14px", m.children[0].children[0].style.cssText = `
margin: 10px 0px 10px 14px;
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
`, m.children[1].style.cssText = "flex:1 1 auto; width:100%", m.children[2].style.cssText = "padding: 0 14px 0 0", m.children[2].children[0].style.cssText = "display: initial", document.body.appendChild(m), m;
}
function N(g, f, x) {
if (g.stopPropagation(), v(), f) {
if (C = P(g.target), g.dataTransfer) {
const m = new Image();
m.src = "", g.dataTransfer.setDragImage(m, 0, 0);
}
I = g.pageX, y = g.pageY, setTimeout(() => {
r.value = x, c.value = !0, f.moving = !0;
});
}
}
function B(g, f) {
if (g.preventDefault(), r.value !== f && r.value !== -1) {
const x = s.value[r.value], m = o.value[r.value];
x && m && (s.value.splice(r.value, 1), s.value.splice(f, 0, x), o.value.splice(r.value, 1), o.value.splice(f, 0, m), o.value.forEach((D, $) => {
D.index = $, D.raw.__fv_index__ = $;
}), r.value = f, h(g.pageX, g.pageY));
}
}
function _(g) {
g.preventDefault(), g.dataTransfer && (g.dataTransfer.dropEffect = "move"), h(g.pageX, g.pageY), M(g);
}
function O(g, f) {
var m, D;
R(), b = null, f && (f.moving = !1, C && (document.body.removeChild(C), C = null)), s.value.forEach(($, L) => {
$.__fv_index__ = L;
}), o.value.forEach(($, L) => {
$.index = L, $.raw && ($.raw.__fv_index__ = L);
}), c.value = !1, w();
const x = ((m = f.raw) == null ? void 0 : m.__fv_index__) ?? 0;
u.value = x, p.value = x, d.value = (D = f.raw) == null ? void 0 : D[l.value], e.emit("change", s.value), e.emit("activeChange", [f.raw]);
}
return {
dragstart: N,
dragenter: B,
dragover: _,
dragend: O,
isDragging: c
};
}
function ot(i, e, t, n, o, l) {
var O, g;
const s = V(i.idField), r = V(i.disableField), c = V(i.draggable);
V(i.itemClass);
const p = V(((O = i.selection) == null ? void 0 : O.multiSelect) ?? !1), d = V(((g = i.selection) == null ? void 0 : g.multiSelectMode) || "DependOnCheck"), { isDragging: u } = n, { activeIndex: w, focusedItemId: v, hoverIndex: C } = o, { clearSelection: I, getSelectedItems: y, toggleSelectItem: b, currentSelectedDataId: S, multiSelectOnlyOnCheck: F } = l, k = V(y()), T = (f) => k.value.length === 0 ? !1 : k.value.some((x) => {
let m = "";
return x.data ? m = x.data[s.value] : m = x[s.value], m === f;
});
function E() {
k.value = y();
}
function R(f, x) {
return f.raw[s.value] != null ? f.raw[s.value] + "_" + x : "";
}
function M(f, x) {
const m = {
"f-list-view-group-item": !0,
"f-list-view-draggable-item": c.value,
"f-un-click": !f.checked,
"f-un-select": !!f.raw[r.value],
"f-listview-active": (
// 多选
p.value && T(R(f, x)) && i.showActiveWhenMultiSelect || // 单选
!p.value && f.raw[s.value] === S.value || p.value && !i.showActiveWhenMultiSelect && f.raw[s.value] === S.value
),
"f-listview-hover": !u.value && x === C.value,
moving: !!f.moving
};
if (typeof i.itemClass == "string")
return ne(m, i.itemClass);
if (typeof i.itemClass == "function") {
const D = i.itemClass(f);
return ne(m, D);
}
return m;
}
function h(f, x) {
const m = {};
if (typeof i.itemStyle == "string")
return te(m, i.itemStyle);
if (typeof i.itemStyle == "function") {
const D = i.itemStyle(f);
return te(m, D);
}
return m;
}
const P = U(() => !p.value);
function N(f, x, m) {
f.checked = m, !f.raw[r.value] && (P.value && (v.value = f.raw[s.value]), b(f));
}
const B = U(() => !p.value || p.value && d.value === "OnCheckAndClick");
function _(f, x, m) {
if (f.raw[r.value]) {
m == null || m.preventDefault(), m == null || m.stopPropagation();
return;
}
S.value = f.raw[s.value], v.value = f.raw[s.value], w.value = x, B.value && (b(f), E()), e.emit("clickItem", { data: k.value, index: x, dataItem: f.raw }), e.emit("activeChange", k.value);
}
return {
getKey: R,
selectedItems: k,
listViewItemClass: M,
listViewItemStyle: h,
updateSelectedItems: E,
onCheckItem: N,
onClickItem: _
};
}
const z = /* @__PURE__ */ new Map([
["appearance", Me]
]), lt = "root-viewmodel";
function at(i, e) {
const {
formSchemaUtils: t,
designViewModelUtils: n
} = e;
function o(d) {
return {
id: `${d.componentId}-component-viewmodel`,
code: `${d.componentId}-component-viewmodel`,
name: d.componentName,
bindTo: d.bindTo,
parent: lt,
fields: [],
commands: [],
states: [],
enableValidation: !0
};
}
function l(d) {
const u = i.getSchemaByType("component-ref");
return Object.assign(u, {
id: `${d.componentId}-component-ref`,
component: `${d.componentId}-component`
}), u;
}
function s(d, u, w) {
var y, b, S, F;
const v = (b = (y = u == null ? void 0 : u.parentComponentInstance) == null ? void 0 : y.schema) == null ? void 0 : b.type, C = (F = (S = t.getFormSchema()) == null ? void 0 : S.module) == null ? void 0 : F.templateId;
if (["double-list-template", "tree-list-template", "list-template"].includes(C))
return d;
const I = [G["content-container"].type, G["response-layout-item"].type, G["splitter-pane"].type, G.drawer.type];
if (v && I.includes(v)) {
const k = i.getSchemaByType(
"section",
{
parentComponentInstance: u.parentComponentInstance,
mainTitle: u.componentName
},
e
);
if (k && k.contents && k.contents.length) {
const T = k.contents[0];
return T.contents = [d], k;
}
}
return d;
}
function r(d) {
var C, I, y;
const u = i.getSchemaByType("list-view");
let w = !1;
const v = (y = (I = (C = d.parentComponentInstance) == null ? void 0 : C.schema) == null ? void 0 : I.appearance) == null ? void 0 : y.class;
return v && v.includes("f-page-main") && (w = !0), Object.assign(u, {
id: d.componentId + "-listView",
appearance: {
class: w ? "" : "f-grid-is-sub"
},
type: "list-view",
dataSource: d.dataSource || "",
columns: [
{ field: "name", title: "", dataType: "string" }
],
pagination: {
enable: !1
}
}), [u];
}
function c(d) {
var I, y, b;
const u = i.getSchemaByType("component"), w = r(d);
let v = !1;
const C = (b = (y = (I = d.parentComponentInstance) == null ? void 0 : I.schema) == null ? void 0 : y.appearance) == null ? void 0 : b.class;
return C && C.includes("f-page-main") && (v = !0), Object.assign(u, {
id: `${d.componentId}-component`,
viewModel: `${d.componentId}-component-viewmodel`,
componentType: d.componentType,
contents: w,
appearance: {
class: v ? "f-struct-wrapper f-utils-fill-flex-column" : ""
}
}), u;
}
function p(d) {
const u = l(d), w = c(d), v = o(d), C = t.getFormSchema();
return C.module.viewmodels.push(v), C.module.components.push(w), n.assembleDesignViewModel(), s(u, d);
}
return { createComponent: p };
}
function Y(i, e, t, n) {
var l, s, r, c, p, d;
const o = t.parentComponentInstance;
if (o && n) {
const u = Math.random().toString(36).slice(2, 6), w = {
componentId: `list-view-${u}`,
componentName: ((l = t.bindingSourceContext) == null ? void 0 : l.entityTitle) || ((r = (s = t.bindingSourceContext) == null ? void 0 : s.bindingEntity) == null ? void 0 : r.name) || `列表-${u}`,
componentType: "list-view",
parentContainerId: o.schema.id,
parentComponentInstance: o,
// editable: true,
bindTo: ((c = t.bindingSourceContext) == null ? void 0 : c.bindTo) || "",
dataSource: (d = (p = t.bindingSourceContext) == null ? void 0 : p.bindingEntity) == null ? void 0 : d.label
// selectedFields: context.bindingSourceContext?.bindingEntityFields
}, { createComponent: v } = at(i, n);
return v(w);
} else
return e;
}
const rt = "https://json-schema.org/draft/2020-12/schema", ct = "https://farris-design.gitee.io/list-view.schema.json", dt = "list-view", ut = "A Farris Component", pt = "object", mt = {
id: {
description: "The unique identifier for list-view",
type: "string"
},
type: {
description: "The type string of list-view",
type: "string",
default: "list-view"
},
dataSource: {
description: "",
type: "string",
default: ""
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
binding: {
description: "",
type: "object",
default: {}
},
disable: {
type: "string",
default: !1
},
editable: {
description: "",
type: "boolean",
default: !0
},
placeholder: {
description: "",
type: "string",
default: ""
},
readonly: {
description: "",
type: "boolean",
default: !1
},
require: {
description: "",
type: "boolean",
default: !1
},
tabindex: {
description: "",
type: "number",
default: -1
},
visible: {
description: "",
type: "boolean",
default: !0
},
itemClass: {
description: "",
type: "string",
default: ""
},
itemStyle: {
description: "",
type: "string",
default: ""
},
contentTemplate: {
description: "",
type: "string",
default: ""
},
footerTemplate: {
description: "",
type: "string",
default: ""
},
emptyTemplate: {
description: "",
type: "string",
default: ""
},
pagination: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
disablePagination: {
description: "",
type: "string",
default: ""
},
contentTemplate: {
description: "",
type: "string",
default: ""
},
index: {
description: "",
type: "number",
default: 1
},
mode: {
description: "",
type: "enum",
default: "server",
enum: [
"server",
"client"
]
},
showGoto: {
description: "",
type: "boolean",
default: !1
},
showIndex: {
description: "",
type: "boolean",
default: !0
},
showLimits: {
description: "",
type: "boolean",
default: !1
},
showPageInfo: {
description: "",
type: "boolean",
default: !0
},
size: {
description: "",
type: "number",
default: 20
},
sizeLimits: {
description: "",
type: "array",
default: [
10,
20,
30,
50,
100
]
},
onPageChange: {
description: "",
type: "string",
default: ""
},
onPageSizeChange: {
description: "",
type: "string",
default: ""
}
}
}
}, ft = [
"id",
"type"
], gt = {
onClickItem: "行点击事件"
}, ue = {
$schema: rt,
$id: ct,
title: dt,
description: ut,
type: pt,
properties: mt,
required: ft,
events: gt
}, Q = Ce(Se, "headerTemplate"), Ht = oe(Q, ue, z, Y), pe = le(
Q,
ue,
z,
Y
), K = {
"tab-page": { type: "tab-page" },
section: { type: "section" },
"list-view": { name: "列表" }
};
function vt(i) {
const { formSchemaUtils: e, formStateMachineUtils: t } = i;
function n(c, p = "") {
return {
path: p + c.code,
field: c.id,
fullPath: c.code
};
}
function o(c, p = "") {
const d = e.getViewModelById(c);
return d ? d.states.map((u) => n(u, p)) : [];
}
function l(c) {
const p = e.getRootViewModelId(), d = o(c);
if (c === p)
return d;
const u = o(p, "root-component.");
return [...d, ...u];
}
function s(c) {
return c.binding && c.binding.path || c.id || "";
}
function r() {
return t && t.getRenderStates() || [];
}
return { getVariables: l, getControlName: s, getStateMachines: r };
}
class ht {
constructor(e) {
A(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'"
}
]);
A(this, "expressionNames", {
compute: "计算表达式",
dependency: "依赖表达式",
validate: "验证表达式",
dataPicking: "帮助前表达式",
visible: "可见表达式",
readonly: "只读表达式",
required: "必填表达式"
});
A(this, "getExpressionConverter", (e, t) => ({
convertFrom: (n, o, l, s) => {
const r = l.getExpressionRuleValue(e, t || o);
return r && r.value || "";
},
convertTo: (n, o, l, s, r) => {
var c;
if (o === "dataPicking" && (l != null && l.target)) {
const p = `${l.target}_dataPicking`;
((c = l.rules) == null ? void 0 : c.some(
(u) => u.id === p && u.value
)) ? n.dictPickingExpressionId = p : delete n.dictPickingExpressionId;
}
s.updateExpression(l);
}
}));
this.formSchemaService = e;
}
getExpressionRule(e, t) {
const n = this.getExpressionData();
if (!n)
return "";
const o = n.find((s) => s.target === e);
if (!o)
return "";
const l = o.rules.find((s) => s.type === t);
return l || "";
}
// 获取上下文表单变量
getContextFormVariables() {
const { module: e } = this.formSchemaService.getFormSchema();
if (!e.viewmodels || e.viewmodels.length === 0)
return [];
const t = this.formSchemaService.getRootViewModelId(), n = this.formSchemaService.getViewModelById(t);
if (!n || !n.states || n.states.length === 0)
return [];
const o = [];
return n.states.filter((l) => l.category === "remote").forEach((l) => {
o.push({
key: l.code,
name: l.name,
description: l.name,
category: l.category
});
}), o;
}
createTreeNode(e, t, n = "label") {
return {
id: e.id,
name: e.name,
bindingPath: e[n],
parents: t,
type: "field"
};
}
buildEntityFieldsTreeData(e = null, t) {
const n = [];
return e == null || e.forEach((o) => {
var r;
const l = this.createTreeNode(o, t);
let s = [];
(r = o.type) != null && r.fields && (s = this.buildEntityFieldsTreeData(o.type.fields, [...t, o.label])), n.push({
data: l,
children: s,
expanded: !0
});
}), n;
}
buildChildEntityTreeData(e = null, t) {
const n = [];
return e == null || e.forEach((o) => {
var c, p;
const l = this.createTreeNode(o, t);
l.type = "entity";
const s = this.buildEntityFieldsTreeData((c = o.type) == null ? void 0 : c.fields, [...t, o.label]), r = this.buildChildEntityTreeData((p = o.type) == null ? void 0 : p.entities, [...t, o.label]);
r != null && r.length && (s == null || s.push(...r)), n.push({
data: l,
children: s || [],
// 空值回退
expanded: !0
});
}), n;
}
getEntitiesTreeData() {
const e = this.formSchemaService.getSchemaEntities();
if (!(e != null && e.length))
return [];
const t = e[0];
if (!(t != null && t.type))
return [];
const n = this.buildEntityFieldsTreeData(t.type.fields, [t.code]), o = this.buildChildEntityTreeData(t.type.entities, [t.code]);
return o != null && o.length && (n == null || n.push(...o)), {
entityCode: t.code,
fields: [{
data: this.createTreeNode(t, [], "code"),
children: n || []
}]
};
}
getEntitiesAndVariables() {
return {
entities: this.getEntitiesTreeData(),
variables: {
session: {
name: "系统变量",
items: this.sessionVariables,
visible: !1
},
forms: {
name: "表单变量",
items: this.getContextFormVariables(),
visible: !0
}
}
};
}
onBeforeOpenExpression(e, t, n) {
const o = n === "Field" ? e.binding.field : e.id, l = this.getExpressionRule(o, t), s = this.getEntitiesAndVariables(), r = {
message: ["validate", "required", "dataPicking"].includes(t) && l ? l.message : "",
...s
};
return l.messageType != null && (r.messageType = l.messageType), r;
}
buildRule(e, t, n, o) {
const { expression: l, message: s, messageType: r } = t, c = {
id: `${e}_${n}`,
type: n,
value: l
};
return (n === "validate" || n === "dataPicking" || n === "required") && (c.message = s), n === "dataPicking" && (c.messageType = r), n === "validate" && o && (c.elementId = o), c;
}
getExpressionData() {
const { expressions: e } = this.formSchemaService.getFormSchema().module;
return e || [];
}
updateExpression(e, t, n, o) {
const l = t === "Field" ? e.binding.field : e.id, s = this.buildRule(l, n, o, e.type === "form-group" ? e.id : "");
let c = this.getExpressionData().find((d) => d.targetType === t && d.target === l);
const p = (d) => d.value.trim() === "";
if (c) {
const d = c.rules.find((u) => u.id === s.id);
if (d)
p(s) ? c.rules = c.rules.filter((u) => u.id !== s.id) : (Object.assign(d, s), o === "validate" && e.type === "form-group" && (d.elementId = e.id));
else {
if (p(s))
return null;
c.rules = c.rules || [], c.rules.push(s);
}
} else {
if (p(s))
return null;
c = {
target: `${l}`,
rules: [s],
targetType: t
};
}
return c;
}
getExpressionEditorOptions(e, t, n, o) {
return n.reduce((l, s) => {
var c, p;
const r = t === "Field" ? (c = e == null ? void 0 : e.binding) == null ? void 0 : c.field : e.id;
return l[s] = {
hide: t === "Field" ? !!((p = e == null ? void 0 : e.binding) != null && p.field) : !1,
description: "",
title: this.expressionNames[s],
type: "string",
$converter: this.getExpressionConverter(r),
refreshPanelAfterChanged: !0,
editor: {
type: "expression-editor",
singleExpand: !1,
dialogTitle: `${this.expressionNames[s]}编辑器`,
showMessage: s === "validate" || s === "dataPicking" || s === "required",
showMessageType: s === "dataPicking",
beforeOpen: () => this.onBeforeOpenExpression(e, s, t),
onSubmitModal: (d) => {
const u = this.updateExpression(e, t, d, s);
if (o) {
const w = this.buildRule(r, d, s);
o(w);
}
return u;
}
}
}, l;
}, {});
}
getExpressionInfo(e, t, n) {
const o = t === "Field" ? e.binding.field : e.id, l = this.getExpressionRule(o, n), s = {
value: l && l.value,
targetId: o,
targetType: t,
expressionType: n
};
return l && l.message && (s.message = l.message), s;
}
getExpressionConfig(e, t, n = ["compute", "dependency", "validate"], o) {
var l;
return {
description: "表达式",
title: "表达式",
hide: !(e.binding && ((l = e.binding) == null ? void 0 : l.type) === "Form"),
properties: {
...this.getExpressionEditorOptions(e, t, n, o)
}
};
}
getExpressionOptions(e, t, n) {
const o = this.getExpressionInfo(e, t, n);
return {
dialogTitle: `${this.expressionNames[n] || "表达式"}编辑器`,
singleExpand: !1,
showMessage: n === "required",
beforeOpen: () => this.onBeforeOpenExpression(e, n, t),
expressionInfo: o
};
}
}
class wt {
constructor(e, t) {
A(this, "componentId");
A(this, "viewModelId");
A(this, "eventsEditorUtils");
A(this, "formSchemaUtils");
A(this, "formMetadataConverter");
A(this, "designViewModelUtils");
A(this, "designViewModelField");
A(this, "controlCreatorUtils");
A(this, "designerHostService");
A(this, "designerContext");
A(this, "modalService", null);
/** 表单规则 */
A(this, "formRule", null);
A(this, "schemaService", null);
A(this, "metadataService", null);
A(this, "propertyConfig", {
type: "object",
categories: {}
});
A(this, "expressionProperty");
var n;
this.componentId = e, this.designerHostService = t, this.eventsEditorUtils = t.eventsEditorUtils, this.formSchemaUtils = t.formSchemaUtils, this.formMetadataConverter = t.formMetadataConverter, this.viewModelId = ((n = this.formSchemaUtils) == null ? void 0 : n.getViewModelIdByComponentId(e)) || "", this.designViewModelUtils = t.designViewModelUtils, this.controlCreatorUtils = t.controlCreatorUtils, this.metadataService = t.metadataService, this.schemaService = t.schemaService, this.designerContext = t.designerContext, this.modalService = t.modalService, this.expressionProperty = new ht(this.formSchemaUtils);
}
/**
* 是否在响应式表单中
*/
inResponsiveForm() {
var e;
return !!((e = this.designerContext) != null && e.responsiveForm);
}
getFormDesignerInstance() {
var e, t;
return (t = (e = this.designerContext) == null ? void 0 : e.instances) == null ? void 0 : t.formDesigner.value;
}
getTableInfo() {
var e;
return (e = this.schemaService) == null ? void 0 : e.getTableInfoByViewModelId(this.viewModelId);
}
setDesignViewModelField(e) {
var n;
const t = e.binding && e.binding.type === "Form" && e.binding.field;
if (t) {
if (!this.designViewModelField) {
const o = this.designViewModelUtils.getDgViewModel(this.viewModelId);
this.designViewModelField = o.fields.find((l) => l.id === t);
}
e.updateOn = (n = this.designViewModelField) == null ? void 0 : n.updateOn;
}
}
getBasicPropConfig(e) {
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: e.type, name: G[e.type] && G[e.type].name }]
}
}
}
};
}
getAppearanceConfig(e = null, t = {}, n) {
const o = {
title: "外观",
description: "Appearance"
}, l = {
class: {
title: "class样式",
type: "string",
description: "组件的CSS样式",
$converter: "/converter/appearance.converter",
parentPropertyID: "appearance"
},
style: {
title: "style样式",
type: "string",
description: "组件的样式",
$converter: "/converter/appearance.converter",
parentPropertyID: "appearance"
}
};
for (const s in t)
l[s] = Object.assign(l[s] || {}, t[s]);
return {
...o,
properties: { ...l },
setPropertyRelates(s, r) {
if (s) {
switch (s && s.propertyID) {
case "class":
case "style": {
Re.value++;
break;
}
}
n && n(s, e, r);
}
}
};
}
/**
*
* @param propertyData
* @param propertyTypes
* @param propertyName
* @param constInfos
* @param variableInfos
* @param expressionType 指定表达式类型，存在属性和表达式类型不一致的情况
* @returns
*/
getPropertyEditorParams(e, t = [], n = "visible", o = {}, l = {}, s = "") {
const { getVariables: r, getControlName: c, getStateMachines: p } = vt(this.designerHostService), d = this.getRealTargetType(e), u = t && t.length > 0 ? t : ["Const", "Variable", "StateMachine", "Expression"], w = {
type: "property-editor",
propertyTypes: u
};
return u.map((v) => {
switch (v) {
case "Const":
Object.assign(w, {
constType: "enum",
constEnums: [{ id: !0, name: "是" }, { id: !1, name: "否" }]
}, o);
break;
case "Expression":
w.expressionConfig = this.getExpressionOptions(e, d, s || n);
break;
case "StateMachine":
w.stateMachines = p();
break;
case "Variable":
Object.assign(w, {
controlName: c(e),
newVariablePrefix: "is",
newVariableType: "Boolean",
variables: r(this.viewModelId),
parentComponentId: this.componentId === "root-component" ? "" : "root-component",
onBeforeOpenVariables: (C) => {
C.value = r(this.viewModelId);
}
}, l), this.designerContext.designerMode === "PC_RTC" && (w.newVariablePrefix = "ext_" + w.newVariablePrefix);
break;
}
}), w;
}
getVisibleProperty(e, t = "") {
var l;
let n = ["Const", "Variable", "StateMachine", "Expression"];
return t === "gridFieldEditor" ? n = ["Const", "Expression"] : t === "form-group" && !((l = e.binding) != null && l.field) ? n = ["Const", "Variable", "StateMachine", "Custom"] : t === "dataGrid" || t === "treeGrid" || t === "wizard" ? n = ["Const", "Variable", "Expression"] : (e.type.indexOf("toolbar-item") > -1 || t === "form-group") && (n = ["Const", "Variable", "StateMachine", "Custom", "Expression"]), {
visible: {
title: "是否可见",
type: "boolean",
description: "运行时组件是否可见",
editor: this.getPropertyEditorParams(e, n, "visible")
}
};
}
/**
* 获取行为
* @param propertyData
* @param viewModelId
* @returns
*/
getBehaviorConfig(e, t = "", n = {}, o) {
const l = {
title: "行为",
description: ""
}, s = this.getVisibleProperty(e, t);
for (const c in n)
s[c] = Object.assign(s[c] || {}, n[c]);
const r = this;
return {
...l,
properties: { ...s },
setPropertyRelates(c, p) {
if (c) {
switch (c.propertyID) {
case "disabled":
case "readonly":
case "visible":
r.afterMutilEditorChanged(e, c);
break;
}
o && o(c, p);
}
}
};
}
/**
* 当多值编辑器变更时
* @param propertyData
* @param changeObject
*/
afterMutilEditorChanged(e, t) {
this.addNewVariableToViewModel(t, this.viewModelId), this.updateExpressionValue(t, e), this.clearExpression(t, e);
}
/**
*
* @param propertyId
* @param componentInstance
* @returns
*/
updateElementByParentContainer(e, t) {
const n = t && t.parent && t.parent.schema;
if (!n)
return;
const o = n.contents.findIndex((s) => s.id === e), l = Ke(n.contents[o]);
n.contents.splice(o, 1), n.contents.splice(o, 0, l), Ne();
}
/**
* 属性编辑器，在编辑过程中会新增变量，此处需要将新增的变量追加到ViewModel中
* @param changeObject
* @param viewModelId
* @returns
*/
addNewVariableToViewModel(e, t) {
const n = e.propertyValue;
if (!(n && typeof n == "object") || !(n.type === "Variable" && n.isNewVariable))
return;
const s = {
id: n.field,
category: "locale",
code: n.fullPath,
name: n.fullPath,
type: n.newVariableType || "String",
isRtcVariable: this.designerContext.designerMode === "PC_RTC" ? !0 : void 0
};
delete n.newVariableType, delete n.isNewVariable, this.formSchemaUtils.getVariableByCode(s.code) || this.formSchemaUtils.getViewModelById("root-viewmodel").states.push(s);
}
getExpressions() {
let e = [];
return this.formRule ? (this.formRule.expressions = this.formRule.expressions || [], e = this.formRule.expressions || []) : e = this.formSchemaUtils.getExpressions(), e;
}
/**
* 更新表达式到expressions节点
* @param changeObject
*/
updateExpressionValue(e, t) {
const n = e.propertyValue;
if (!((n && n.type) === "Expression" && n.expressionInfo))
return;
const { expressionId: s, expressionInfo: r } = n, { targetId: c, targetType: p, expressionType: d, value: u, message: w } = r, v = this.getExpressions();
let C = v.find((y) => y.target === c);
C || (C = { target: c, rules: [], targetType: p }, v.push(C));
const I = C.rules.find((y) => y.type === d);
if (I)
I.id = s, I.value = u, I.message = w, (d === "minDate" || d === "maxDate" || d === "defaultTime") && (I.elementId = t.id);
else {
const y = { id: s, type: d, value: u, message: w, elementId: t.id };
C.rules.push(y);
}
delete n.expressionInfo;
}
/**
* 属性类型切换为非表达式后，清除原表达式
* @param changeObject
* @param propertyData
* @returns
*/
clearExpression(e, t) {
const n = e.propertyValue;
if (n && n.type === "Expression")
return;
const l = e.propertyID, s = this.getExpressions(), r = t.binding ? t.binding.field : t.id, c = s.find((p) => p.target === r);
!c || !c.rules || (c.rules = c.rules.filter((p) => p.type !== l));
}
getExpressionOptions(e, t, n) {
return this.expressionProperty.getExpressionOptions(e, t, n);
}
getRealTargetType(e) {
return ["response-toolbar-item", "tab-toolbar-item", "section-toolbar-item", "drawer-toolbar-item"].indexOf(e.type) > -1 ? "Button" : e.binding && e.binding.field ? "Field" : "Container";
}
createBaseEventProperty(e) {
const t = {};
return t[this.viewModelId] = {
type: "events-editor",
editor: {
initialData: e,
viewSourceHandle: (n) => {
var o;
((o = n.controller) == null ? void 0 : o.label.indexOf(this.formSchemaUtils.getModule().code)) > -1 && this.eventsEditorUtils.jumpToMethod(n);
}
}
}, t;
}
}
class yt extends wt {
constructor(e, t) {
super(e, t);
}
getPropertyConfig(e) {
return this.getBasicPropConfig(e), this.getAppearanceProperties(e), this.getEventPropConfig(e), this.propertyConfig;
}
getBasicPropConfig(e) {
var s, r, c;
const t = (c = (r = (s = this.formSchemaUtils.getFormSchema()) == null ? void 0 : s.module) == null ? void 0 : r.entity[0]) == null ? void 0 : c.entities[0], n = this.assembleSchemaEntityToTree(t, 0), o = this, l = super.getBasicPropConfig(e);
this.propertyConfig.categories.basic = {
description: "Basic Information",
title: "基本信息",
properties: {
...l.properties,
dataSource: {
description: "绑定数据源",
title: "绑定数据源",
editor: {
type: "combo-tree",
textField: "name",
valueField: "label",
data: n,
editable: !1
},
readonly: !0
}
},
setPropertyRelates(p, d) {
switch (p && p.propertyID) {
case "dataSource": {
const u = o.formSchemaUtils.getViewModelById(o.viewModelId);
if (u) {
const w = n.find((v) => v.label === p.propertyValue);
u.bindTo = w.bindTo;
}
o.designViewModelUtils.assembleDesignViewModel();
break;
}
}
}
};
}
/**
* 将schema实体表组装成树
*/
assembleSchemaEntityToTree(e, t, n, o = "", l = []) {
if (!e)
return l;
const s = o ? `${o}/${e.label}` : "/";
return l.push({
id: e.id,
name: e.name,
label: e.label,
layer: t,
parent: n && n.id,
bindTo: s.replace("//", "/")
}), e.type.entities && e.type.entities.length && e.type.entities.map((r) => this.assembleSchemaEntityToTree(r, t + 1, e, s, l)), l;
}
getAppearanceProperties(e) {
this.propertyConfig.categories.appearance = {
title: "外观",
properties: {
class: {
title: "列表class样式",
type: "string",
description: "组件的CSS样式"
},
itemClass: {
title: "行样式class",
type: "string",
description: "行样式class",
editor: {
type: "code-editor",
language: "javascript",
leftTemplate: () => a(q, null, [a("h5", null, [j("示例代码")]), a("pre", null, [`
(dataItem) => {
if(dataItem.code === '0001') {
return 'bg-danger text-center';
}
return '';
}
注：dataItem 行数据
函数返回值是一个字符串，
是由空格分隔的class组成 `])])
}
},
itemStyle: {
title: "行样式style",
type: "string",
description: "行样式style",
editor: {
type: "code-editor",
language: "javascript",
leftTemplate: () => a(q, null, [a("h5", null, [j("示例代码")]), a("pre", null, [`
(dataItem) => {
if(dataItem.code === '0001') {
return 'textAlign:center;color:green';
}
return '';
}
注：dataItem 行数据
函数返回值是一个字符串，
由分号分隔的css样式组成 `])])
}
},
contentTemplate: {
description: "内容模板",
title: "内容模板",
type: "string",
refreshPanelAfterChanged: !0,
editor: {
type: "code-editor",
language: "html"
}
},
footerTemplate: {
description: "底部模板",
title: "底部模板",
type: "string",
refreshPanelAfterChanged: !0,
editor: {
type: "code-editor",
language: "html"
}
},
emptyTemplate: {