@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,817 lines (1,816 loc) • 54 kB
JavaScript
import { getCustomClass as hn, excludeProperties as vn, withInstall as Cn } from "../../components/common/index.esm.js";
import { createVNode as F, defineComponent as _e, ref as b, computed as j, onMounted as Le, nextTick as Se, onUnmounted as bn, watch as ye, Fragment as wn, createTextVNode as Sn, inject as ze } from "vue";
import { useResizeObserver as Ue } from "@vueuse/core";
import { isUndefined as J } from "lodash-es";
import { LocaleService as In } from "../../components/locale/index.esm.js";
import { getHierarchyRow as Rn, useIdentify as $e, useGroupData as Bn, useFilter as qe, useHierarchy as Ke, useLoading as Fn, useDataView as Ye, useSelection as Je, useSelectHierarchyItem as Dn, usePagination as On, useDataViewContainerStyle as Qe, useCommandColumn as Xe, useSettingColumn as Pn, useColumn as Tn, useSort as Ze, useGroupColumn as et, useRow as tt, useEdit as nt, useVisualDataBound as ot, useVisualDataCell as it, useVisualDataRow as at, useVisualData as Gn, useCellPosition as xn, useSidebar as lt, useVirtualScroll as st, useFitColumn as jn, useFilterHistory as kn, useColumnFilter as Vn, useDragColumn as Mn, getColumnHeader as Hn, getSidebar as En, getDisableMask as An, getHorizontalScrollbar as rt, getVerticalScrollbar as Nn, getEmpty as Wn, getPagination as zn, getSummary as _n, ColumnSettingSolution as Ln, COMMAND_COLUMN_DATA_TYPE as Te, SETTING_COLUMN_DATA_TYPE as Ge } from "../../components/data-view/index.esm.js";
import Un from "../../components/input-group/index.esm.js";
import $n from "../../components/button/index.esm.js";
import { resolveAppearance as qn, createPropsResolver as dt, createTreeGridSelectionItemResolver as Kn, createTreeGridBindingResolver as Yn, createDataViewUpdateColumnsResolver as Jn } from "../../components/dynamic-resolver/index.esm.js";
import { treeGridProps as ut } from "../../components/tree-grid/index.esm.js";
import { getColumnHeader as Qn } from "../data-grid/index.esm.js";
import { DgControl as xe, useDesignerComponent as Xn } from "../../components/designer-canvas/index.esm.js";
import { BaseControlProperty as Zn } from "../../components/property-panel/index.esm.js";
import { useCommandOption as eo, useColumnOption as to, useRowOption as no, useSummary as oo, useAppearance as io, useSelection as ao, useRowNumber as lo, usePagination as so, useDataGridEvent as ro, useDesignerColumn as uo, useDesignerVisualData as co, useDesignerFitColumn as po } from "../data-view/index.esm.js";
const Yo = {
/** 启用分页 */
enable: { type: Boolean, default: !1 },
/** 当前页码 */
index: { type: Number, default: 1 },
/** 分页交互模式 */
mode: { type: String, default: "server" },
/** 显示页码输入框 */
showGoto: { type: Boolean, default: !1 },
/** 显示页码 */
showIndex: { type: Boolean, default: !0 },
/** 显示每页记录数 */
showLimits: { type: Boolean, default: !1 },
/** 显示分页汇总信息 */
showPageInfo: { type: Boolean, default: !0 },
/** 默认每页记录数 */
size: { type: Number, default: 20 },
/** 可选择的没有记录数据 */
sizeLimits: { type: Array, default: [10, 20, 30, 50, 100] },
/** 总记录数 */
total: { type: Number, default: 0 }
}, Jo = {
/** 启用排序 */
enable: { type: Boolean, default: !1 },
/** 排序字段集合 */
fields: { type: Array, default: [] },
/** 排序交互模式 */
mode: { type: String, default: "client" },
/** 多列排序 */
multiSort: { type: Boolean, default: !1 }
}, Qo = {
/** 自定义分组合计内容 */
customGroupRow: { type: Function, default: () => {
} },
/** 自定义分组行样式 */
customGroupRowStyle: { type: Function, default: () => {
} },
/** 自行分组合计行样式 */
customSummaryStyle: { type: Function, default: () => {
} },
/** 启用行数据分组 */
enable: { type: Boolean, default: !1 },
/** 分组行合并列数 */
groupColSpan: { type: Number, default: 1 },
/** 行数据分组字段；多字段分组以英文逗号分隔 */
groupFields: { type: Array, default: [] },
/** 在DataGrid中显示被分组的列 */
showGroupedColumn: { type: Boolean, default: !0 },
/** 显示分组面板 */
showGroupPanel: { type: Boolean, default: !1 },
/** 启用合计行 */
showSummary: { type: Boolean, default: !1 },
/** 显示合计行位置； */
summaryPosition: { type: String, default: "separate" }
}, Xo = {
/** 启用筛选 */
enable: { type: Boolean, default: !1 },
/** DataGrid筛选风格 */
filterStyle: { type: String, default: "filter-column" },
/** 筛选交互模式 */
mode: { type: String, default: "server" },
/** 显示过滤条件工具条 */
showSummary: { type: Boolean, default: !0 }
}, Zo = {
/** 允许折行显示列标题 */
wrapHeadings: { type: Boolean, default: !1 }
}, ei = {
/** 自定义行样式 */
customRowStyle: { type: Function, default: () => {
} },
customCellStyle: { type: Function, default: () => {
} },
/** 禁止行选中表达式 */
disable: { type: Function, default: () => {
} },
/** 默认行高度为 29px */
height: { type: Number, default: 28 },
/** 鼠标滑过行效果 */
showHovering: { type: Boolean, default: !0 },
/** 禁止数据折行 */
wrapContent: { type: Boolean, default: !1 }
}, ti = {
/** 显示合计信息 */
enable: { type: Boolean, default: !1 },
/** 合计行自定义样式，对启用合计行模板无效 */
customSummaryStyle: { type: Function, default: () => {
} },
/** 分组合计字段 */
groupFields: { type: Array, default: [] },
/** 合计交互模式 */
mode: { type: String, default: "client" },
/** 合计行显示位置， top: 顶部 bottom: 底部， both: 顶部与底部同时显示 */
position: { type: String, default: "bottom" }
}, ni = {
/** 自动列宽。设为true后，所有列将填满表格并不会出现横向滚动条。 */
fitColumns: { type: Boolean, default: !1 },
/** 自动适配列宽度模式 */
fitMode: { type: String, default: "average" },
groups: { type: Array, defaut: [] },
/** 允许拖动表头改变列显示顺序 */
reorderColumn: { type: Boolean, default: !1 },
/** 允许拖动改变列宽度 */
resizeColumn: { type: Boolean, default: !0 },
/** 双击表头列自适应内容宽度 */
resizeColumnOnDoubleClick: { type: Boolean, default: !0 }
}, oi = {
/** 编辑时选中文本 */
selectOnEditing: { type: Boolean, default: !1 },
/** 编辑模式； row：整行编辑，cell: 单元格编辑 */
editMode: { type: String, default: "cell" }
}, ii = {
/** show loading */
show: { type: Boolean, default: !1 },
/** message on display when loading */
message: { type: String, default: `${In.getLocaleValue("datagrid.loadingMessage")}...` }
}, fo = {
/** 自定义样式 */
customClass: { type: String, default: "" },
/** 排序配置 */
sort: { type: Object },
/** 筛选配置 */
filter: { type: Object },
/** 自动勾选子节点 */
autoCheckChildren: { type: Boolean, default: !1 },
/** 列集合 */
columns: { type: Array, default: [] },
/** 列配置 */
columnOption: { type: Object },
/** 命令列配置选项 */
commandOption: {
type: Object,
default: {
enable: !1,
commands: []
}
},
/** 被绑定数据 */
data: { type: Array, default: [] },
/** 禁用组件 */
disabled: { type: Boolean, default: !1 },
/** 用于控制节点禁用状态的字段 */
disabledField: { type: String, default: "disabled" },
/** 用于显示信息的字段 */
displayField: { type: String, default: "name" },
/** 允许编辑 */
editable: { type: Boolean, default: !1 },
/** 编辑配置 */
editOption: { type: Object, default: { selectOnEditing: !1, editMode: "cell" } },
/** 适配父组件尺寸 */
fit: { type: Boolean, default: !1 },
/** 列标题配置 */
header: { type: Object },
/** 高度 */
height: { type: Number, default: -1 },
/** 层级关系配置对象 */
hierarchy: {
type: Object,
default: {
cascadeOption: {
autoCancelParent: !0,
autoCheckChildren: !1,
autoCheckParent: !1,
selectionRange: "All"
},
parentIdField: "parent"
}
},
/** DataGrid组件唯一标识 */
id: { type: String, default: "" },
/** 被绑定数据的标识字段 */
idField: { type: String, default: "id", require: !0 },
/** async loading data */
loadData: { type: Function },
// 是否展示 loading
loading: {
type: Boolean,
default: !1
},
/** 最小高度 */
minHeight: { type: Number, default: 300 },
/** 最小宽度 */
minWidth: { type: Number, default: 400 },
/** 新建数据 */
newDataItem: {
type: Function,
default: () => {
}
},
/** 分页配置 */
pagination: {
type: Object,
default: {
enable: !1,
size: -1
}
},
/** 行号配置 */
rowNumber: {
type: Object,
default: {
enable: !0,
width: 36,
heading: "序号"
}
},
/** 行配置 */
rowOption: {
type: Object,
default: {
wrapContent: !1
}
},
/** 选择配置 */
selection: {
type: Object,
default: {
enableSelectRow: !0,
multiSelect: !1,
multiSelectMode: "DependOnCheck",
showCheckbox: !1,
showSelectAll: !1,
showSelection: !1
}
},
/** 已选数据标识 */
selectionValues: { type: Array, default: [] },
/** 显示边框 */
showBorder: { type: Boolean, default: !1 },
/** 显示列头 */
showHeader: { type: Boolean, default: !0 },
/** 显示横向行分割线 */
showHorizontalLines: { type: Boolean, default: !0 },
/** 显示节点连接线 */
showLines: { type: Boolean, default: !1 },
/** 显示配置按钮 */
showOptions: { type: Boolean, default: !1 },
/** 显示滚动条 */
showScrollBar: { type: String, default: "auto" },
/** 显示设置按钮 */
showSetting: { type: Boolean, default: !1 },
/** 显示条纹 */
showStripe: { type: Boolean, default: !0 },
/** 显示树节点图标 */
showTreeNodeIcons: { type: Boolean, default: !1 },
/** 显示纵向列分割线 */
showVerticallLines: { type: Boolean, default: !1 },
/** 树节点图标数据 */
treeNodeIconsData: { type: [Object, String], default: {} },
/** 宽度 */
width: { type: Number, default: -1 },
/** 启用虚拟渲染 */
virtualized: { type: Boolean, default: !1 },
/** 空数据模板 */
emptyTemplate: { type: Object },
/** 合计配置 */
summary: {
type: Object,
default: {
// 默认合计行开启后,后面不展示值,所以默认不开启
enable: !1,
groupFields: ["numericField1", "numericField2"]
}
},
/** 自动高度 **/
autoHeight: { type: Boolean, default: !1 },
/** 是否可见, 为了适配低代码表单，该属性不应该属于表格组件的行为 */
/** 复选框位置 */
checkboxPosition: { type: String, default: "after-expand" },
enableColumnSettingSolution: { type: Boolean, default: !1 },
/** 搜索配置 */
searchable: {
type: Boolean,
default: !1
},
customSearch: { type: Function }
};
function mo(e, n, f, l, r, C, I, w, m, a, c, v, T, s, k, V, D, d, x) {
const {
calculateCellPositionInRow: A
} = C, {
columnContext: O,
hasLeftFixedColumn: N,
hasRightFixedColumn: S
} = I, {
gridDataStyle: W,
leftFixedGridDataStyle: Q,
rightFixedGridDataStyle: ee
} = s, {
renderDataRow: i
} = Rn(e, n, O, D, w, m, a, c, v, T, s, k, V, d, x), le = [i];
function R(B, X) {
const te = A(B);
return D.value.filter((q) => q.visible !== !1).map((q, z) => le[q.type](q, te, X, z));
}
function $() {
return F("div", {
ref: l,
class: "fv-grid-content-left-fixed"
}, [F("div", {
class: "fv-grid-data",
style: Q.value
}, [R(O.value.leftColumns.filter((B) => B.visible), "left")])]);
}
function se() {
return F("div", {
ref: f,
class: "fv-grid-content-primary"
}, [F("div", {
class: "fv-grid-data",
style: W.value
}, [R(O.value.primaryColumns.filter((B) => B.visible), "primary")])]);
}
function E() {
return F("div", {
ref: r,
class: "fv-grid-content-right-fixed"
}, [F("div", {
class: "fv-grid-data",
style: ee.value
}, [R(O.value.rightColumns.filter((B) => B.visible), "right")])]);
}
function re() {
const B = [];
return N.value && B.push($()), B.push(se()), S.value && B.push(E()), B;
}
return {
renderDataArea: re
};
}
const yo = /* @__PURE__ */ _e({
name: "FTreeGrid",
props: fo,
emits: ["selectionChange", "clickRow", "expandNode", "unSelectItem", "dblclickNode", "doubleClickRow", "unSelectItem", "selectItem", "filterChanged", "unSelectAll", "selectAll", "sortChanged", "selectionUpdate", "endEditCell"],
setup(e, n) {
var Ne, We;
const f = b(!1), l = b(!1), r = 0, C = b(((Ne = e.rowOption) == null ? void 0 : Ne.height) || 28);
let I = [], w = [];
const m = b(20), a = b(e.columns), c = $e(e), {
idField: v
} = c, T = b(), s = b(), k = b(), V = b(), D = b(), d = b([]), x = b(!1), A = b(((We = e.rowOption) == null ? void 0 : We.wrapContent) || !1), O = Bn(e, c), N = qe(e, n), S = Ke(e), {
collapseField: W
} = S, {
showLoading: Q,
renderLoading: ee
} = Fn(e, T), i = Ye(e, /* @__PURE__ */ new Map(), N, S, c), {
dataView: le
} = i, R = Je(e, i, c, d, n), {
showSelection: $,
selectedValues: se
} = R, E = Dn(e, d, i, c, R, n), re = j(() => e.disabled), B = j(() => e.virtualized ? Math.min(i.dataView.value.length, m.value) : i.dataView.value.length), X = On(e, i), {
shouldRenderPagination: te
} = X, {
containerStyleObject: q
} = Qe(e, d), z = b(""), ne = b([]), Re = j(() => e.searchable || !1), Z = b(0), de = Xe(e), {
applyCommands: ge
} = de;
ge(a);
const {
applyColumnSetting: oe,
removeColumnSetting: he
} = Pn(e);
e.showSetting && oe(a);
const _ = Tn(e, n), ue = Ze(e), {
applyColumnSorter: ve,
columnContext: L,
updateColumnRenderContext: Be
} = _;
ve(i, ue);
const ce = et(e, L), K = tt(e, n, R, c), Y = nt(e, n, c, K, d), pe = ot(e, i, C), Fe = it(e, Y, pe), Ce = at(e, i, Y, S, c, pe, Fe, C), ie = Gn(e, a, i, B, r, Ce), {
getVisualData: G
} = ie, be = xn(e, L, C, f), ae = lt(e, R), {
sidebarWidth: yt
} = ae, P = st(e, i, d, L, ie, B, r, yt, C, f), {
onWheel: gt,
dataGridWidth: je,
viewPortHeight: ke,
viewPortWidth: we,
resetScroll: De,
updateVisibleRowsOnLatestVisibleScope: ht
} = P, Ve = jn(e, L, s, we, ce), {
calculateColumnsSize: fe
} = Ve, Me = kn(), vt = Vn(s, D, i, Me, P), Ct = Mn(e, n, _, i, ce, O, P), bt = j(() => {
const t = {
"fv-grid": !0,
"fv-grid-bordered": e.showBorder,
"fv-grid-horizontal-bordered": e.showHorizontalLines,
"fv-datagrid-strip": e.showStripe
};
return hn(t, e.customClass);
}), wt = j(() => ({
"fv-grid-content": !0,
"fv-grid-content-hover": x.value,
"fv-grid-wrap-content": A.value
})), {
renderDataArea: St
} = mo(e, n, k, V, D, be, _, i, Y, S, K, R, E, P, ie, pe, d, C, f), {
renderGridHeader: It,
renderGridColumnResizeOverlay: Rt,
shouldShowHeader: Bt
} = Hn(e, n, s, V, D, _, i, Ct, vt, N, Me, Ve, ce, R, ae, ue, P, we, d, l), {
renderDataGridSidebar: Ft
} = En(e, K, R, ae, P), {
renderDisableMask: Dt
} = An(), {
renderHorizontalScrollbar: Ot
} = rt(e, s, P), {
renderVerticalScrollbar: Pt
} = Nn(e, s, P);
function Tt() {
var t, o, y;
if (s.value && s.value.clientHeight > 0 && ((t = s.value) == null ? void 0 : t.clientWidth) > 0) {
const p = Math.ceil(s.value.clientHeight / C.value);
p > m.value && (m.value = p, ht()), ke.value = ((o = k.value) == null ? void 0 : o.clientHeight) || 0, je.value = ((y = s.value) == null ? void 0 : y.clientWidth) || 0;
}
s.value && (s.value.clientHeight > 0 || s.value.clientWidth > 0) && fe();
}
Le(() => {
s.value && (m.value = Math.max(Math.ceil(s.value.clientHeight / C.value), m.value), d.value = G(0, B.value + r - 1), Ue(s.value, Tt), fe(), Se(() => {
s.value && (je.value = s.value.clientWidth), k.value && (we.value = k.value.clientWidth, ke.value = k.value.clientHeight);
})), Q.value && ee();
}), bn(() => {
}), ye(we, () => {
s.value && fe();
});
function Gt(t) {
i.collapseTo(t), i.reOrderVisibleIndex(), De();
}
function xt(t) {
i.expandTo(t), i.reOrderVisibleIndex(), De();
}
function Oe() {
const t = R.getSelectionRow();
return t ? t.dataIndex - 1 : -1;
}
function jt(t) {
const o = t !== void 0 ? t : Oe(), y = i.insertNewDataItem(o === -1 ? 0 : o);
return d.value = G(0, B.value + r - 1), y;
}
function kt() {
const t = Oe();
i.insertNewChildDataItem(t), d.value = G(0, B.value + r - 1);
}
function Vt(t, o) {
const y = d.value.find((g) => g.raw[v.value] === o), p = y ? y.dataIndex - 1 : -1;
i.insertNewChildDataItems(t, p);
}
function Mt() {
const t = Oe(), o = E.getNextSelectableHierarchyItemId(t);
i.removeHierarchyDataItem(t), d.value = G(0, B.value + r - 1), o && E.selectItemById(o);
}
function Ht(t) {
Y.onEditingRow(t);
}
function Et(t) {
Y.acceptEditingRow(t);
}
function At(t) {
Y.cancelEditingRow(t);
}
function me(t) {
t && (a.value = t, ge(a), e.showSetting && oe(a), Be(a.value), ve(i, ue), fe());
}
ye(() => e.columns, (t) => {
if (e.showSetting && e.enableColumnSettingSolution) {
me(a.value);
return;
}
me(t);
});
function Nt(t, o) {
t && (i.load(t), i.reOrderVisibleIndex(), o != null && o.keepScrollPosition ? P.scrollTo(P.offsetY.value) : De());
}
function Pe(t) {
K.activeRowById(t);
}
function Wt(t, o = {
isCurrent: !0
}) {
o != null && o.isCurrent && Pe(t), E.selectItemById(t);
}
function zt(t) {
const o = d.value.find((y) => y.raw[c.idField.value] === t);
o && K.clickRowItem(o);
}
function _t(t) {
E.selectItemByIds(t);
}
function Lt() {
return R.getSelectedItems();
}
function He() {
R.clearSelection();
}
function Ut() {
R.emptyCurrentRowId();
}
const $t = j(() => !d.value || !d.value.length), {
renderEmpty: qt
} = Wn(e, n);
function Kt() {
return R.getSelectionRow();
}
function Yt(t, o = {
clearCurrent: !0
}) {
o != null && o.clearCurrent && Pe(""), E.unSelectItemByIds(t);
}
function Jt() {
return R.currentSelectedDataId.value;
}
function Qt(t, o, y) {
const p = le.value.find((g) => g[v.value] === t);
if (p) {
if (Object.keys(p).forEach((h) => {
Object.prototype.hasOwnProperty.call(o, h) && (p[h] = o[h]);
}), y) {
const {
collapseField: h,
disabledField: M,
checkedField: U,
visibleField: H
} = y;
h && !J(o[h]) && (p.__fv_collapse__ = o[h]), U && !J(o[U]) && (p.__fv_checked__ = o[U]), M && !J(o[M]) && (p.__fv_disabled__ = o[M]), H && !J(o[H]) && (p.__fv_visible__ = o[H]);
}
const g = d.value.find((h) => h.raw[v.value] === t), u = d.value.findIndex((h) => h.raw[v.value] === t);
if (g) {
if (g.raw = p, Object.keys(g.data).forEach((h) => {
g.data[h].updateData(p);
}), y) {
const {
collapseField: h,
disabledField: M,
checkedField: U,
visibleField: H
} = y;
h && !J(o[h]) && (g.collapse = o[h]), U && !J(o[U]) && (g.checked = o[U]), M && !J(o[M]) && (g.disabled = o[M]), H && !J(o[H]) && (g.visible = o[H]);
}
d.value = [...d.value.slice(0, u), g, ...d.value.slice(u + 1)], i.updateSummary();
}
}
}
function Xt(t) {
return Object.prototype.hasOwnProperty.call(t, "raw") ? i.hasRealChildren(t.raw) : i.hasRealChildren(t);
}
function Zt(t) {
const o = i.dataView.value.find((y) => y[v.value] === t);
return o ? o[W.value] : "";
}
function en() {
return W.value;
}
ye(() => e.showSetting, (t, o) => {
t !== o && (t ? oe(a) : he(a), me(a.value));
});
function tn(t) {
return d.value.filter((o) => t.includes(o.raw[e.idField]));
}
function Ee(t) {
const o = c.idField.value, y = d.value.find((p) => p.raw[o] === t);
y && K.changeRow(y);
}
function nn() {
R.keepSelectingOnPaging.value || He(), i.updateVisibleDataSummary(d.value);
}
function on(t) {
R.updateSelectedValues(t);
}
function an(t) {
R.removeSelectedValues(t);
}
function ln(t) {
Se(() => {
P.scrollToRowByIndex(t.dataIndex - 1);
});
}
function sn(t) {
let o = t;
for (; o.parentId; ) {
const y = i.dataView.value.find((p) => p[c.idField.value] === o.parentId);
if (y)
y[c.idField.value], i.unFold({
raw: y
}), o = y;
else
break;
}
}
function rn(t, o) {
if (t.length !== o.length)
return !1;
const y = t.map((g) => g[c.idField.value]).sort(), p = o.map((g) => g[c.idField.value]).sort();
return y.every((g, u) => g === p[u]);
}
function Ae() {
if (!z.value.trim()) {
ne.value = [], Z.value = 0;
return;
}
const t = [], o = z.value.toLowerCase().trim();
i.dataView.value.forEach((p) => {
var u;
let g = !1;
(u = e.search) != null && u.customSearch ? g = e.search.customSearch(o, p, e.columns) : e.columns.forEach((h) => {
!g && h.field && p[h.field] !== void 0 && String(p[h.field]).toLowerCase().includes(o) && (g = !0);
}), g && (t.push(p), sn(p));
}), !rn(t, ne.value) ? (ne.value = t, Z.value = 0) : t.length > 0 && (Z.value = (Z.value + 1) % t.length), t.length > 0 && Se(() => {
const p = t[Z.value];
Ee(p[c.idField.value]);
const g = d.value.find((u) => u.raw[c.idField.value] === p[c.idField.value]);
g && ln(g);
});
}
function dn(t) {
t.key === "Enter" && Ae();
}
function un() {
Ae();
}
n.expose({
activeRowById: Pe,
addNewDataItem: jt,
addNewChildDataItem: kt,
addChildrenToNode: Vt,
collapseTo: Gt,
expandTo: xt,
removeDataItem: Mt,
editDataItem: Ht,
acceptDataItem: Et,
cancelDataItem: At,
updateColumns: me,
updateDataSource: Nt,
selectItemById: Wt,
selectItemByIds: _t,
getSelectedItems: Lt,
clearSelection: He,
getSelectionRow: Kt,
clickRowItemById: zt,
unSelectItemByIds: Yt,
getCurrentRowId: Jt,
reassignRowData: Qt,
hasChildren: Xt,
getCollapseField: en,
getCollapseStatusById: Zt,
getVisibleDataByIds: tn,
selectRowById: Ee,
updateDerivedData: nn,
emptyCurrentRowId: Ut,
calculateColumnsSize: fe,
updateSelectedValues: on,
removeSelectedValues: an
});
const cn = j(() => {
const t = {};
return P.shouldShowHorizontalScrollbar.value && (t.paddingBottom = "10px"), P.shouldShowVirticalScrollbar.value && (t.paddingRight = "10px"), t;
}), pn = j(() => ({
...q.value,
borderRadius: "5px"
})), {
renderDataGridPagination: ko
} = zn(e, n, i, P, X, R), fn = j(() => ({
"d-flex": !0,
"justify-content-between": te.value && $.value,
"justify-content-end": te.value && !$.value,
"position-relative": !0
})), mn = j(() => ({
"d-flex": !0,
"align-items-center": !0
}));
function yn(t) {
const o = t.map((u) => u.id), y = [...a.value, ...I, ...w];
y.filter((u) => u.dataType !== Te && u.dataType !== Ge).forEach((u) => {
const h = t.find((M) => M.id === u.id);
h && (u.width = h.actualWidth || u.width || 120, u.title = h.title, u.halign = h.halign, u.align = h.align, u.fixed = h.fixed);
}), w = y.filter((u) => u.dataType === Te || u.dataType === Ge);
const p = y.filter((u) => u.dataType !== Te && u.dataType !== Ge), g = p.filter((u) => o.includes(u.id));
I = p.filter((u) => !o.includes(u.id)), g.sort((u, h) => {
const M = t.findIndex((H) => H.id === u.id), U = t.findIndex((H) => H.id === h.id);
return M - U;
}), me(g);
}
const {
renderDataGridSummary: gn
} = _n(e, i, _);
return () => F(wn, null, [Re.value && F("div", {
class: "fv-grid-search",
style: {
padding: "8px 12px",
border: "1px solid #e0e0e0",
borderBottom: "none",
borderRadius: "4px 4px 0 0"
}
}, [F("div", {
style: {
display: "flex",
alignItems: "center"
}
}, [F(Un, {
value: z.value,
onInput: (t) => z.value = t,
onKeydown: dn,
placeholder: "搜索数据...",
style: {
flex: 1
}
}, null), F($n, {
type: "link",
onClick: un,
style: {
cursor: "pointer",
marginLeft: "8px"
}
}, {
default: () => [F("i", {
class: "f-icon f-icon-search"
}, null)]
})])]), F("div", {
ref: T,
class: bt.value,
style: pn.value,
onWheel: gt
}, [s.value && Bt.value && It(), F("div", {
ref: s,
class: wt.value,
onMouseover: () => x.value = !0,
onMouseleave: () => x.value = !1,
onTouchstart: (t) => {
t.stopPropagation(), x.value = !0, P.onTouchstartScrollThumb(t, s);
},
onTouchend: (t) => {
x.value = !1;
},
style: cn.value
}, [s.value && Ft(d), s.value && St(), s.value && $t.value && qt(), s.value && Ot(), s.value && Pt()]), s.value && gn(), $.value && F("div", {
class: fn.value
}, [$.value && F("div", {
class: mn.value
}, [F("div", null, ["已选：" + se.value.length, Sn(" 条")])])]), Rt(), re.value && Dt()]), e.enableColumnSettingSolution && F(Ln, {
columns: [...a.value, ...I],
componentId: e.id,
modelValue: l.value,
"onUpdate:modelValue": (t) => l.value = t,
onChangeColumnSetting: yn
}, null)]);
}
}), go = "https://json-schema.org/draft/2020-12/schema", ho = "https://farris-design.gitee.io/tree-grid.schema.json", vo = "tree-grid", Co = "A Farris Data Grid Component", bo = "object", wo = {
id: {
description: "The unique identifier for a Input Group",
type: "string"
},
type: {
description: "The type string of Input Group component",
type: "string",
default: "tree-grid"
},
appearance: {
description: "",
type: "object",
properties: {
class: {
type: "string"
},
style: {
type: "string"
}
},
default: {}
},
fit: {
type: "boolean",
default: !1
},
showStripe: {
type: "boolean",
default: !0
},
showBorder: {
type: "boolean",
default: !1
},
showTreeNodeIcons: {
type: "boolean",
default: !1
},
showSetting: {
type: "boolean",
default: !1
},
size: {
description: "",
type: "object",
properties: {
width: {
type: "number"
},
height: {
type: "number"
}
},
default: null
},
dataSource: {
description: "",
type: "string",
default: ""
},
columns: {
description: "",
type: "array",
default: []
},
identifyField: {
description: "",
type: "string"
},
editable: {
description: "",
type: "boolean",
default: !1
},
disabled: {
description: "",
type: "boolean",
default: !1
},
visible: {
description: "",
type: "boolean",
default: !0
},
cell: {
type: "object",
properties: {
highlightFocusingCell: {
description: "",
type: "boolean",
default: !1
},
mergeCell: {
description: "",
type: "boolean",
default: !1
},
showEditableIcon: {
description: "",
type: "boolean",
default: !1
}
}
},
column: {
type: "object",
properties: {
fitColumns: {
description: "",
type: "boolean",
default: !1
},
fitMode: {
description: "",
type: "string",
default: "average"
},
groups: {
description: "",
type: "array",
default: []
},
reorderColumn: {
description: "Enable to drag column to reorder",
type: "boolean",
default: !1
},
resizeColumn: {
type: "boolean",
default: !0
},
resizeColumnOnDoubleClick: {
description: "",
type: "boolean",
default: !0
}
}
},
command: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
commands: {
type: "array",
default: []
},
commandColumnWidth: {
description: "",
type: "number",
default: 120
},
onClickDeleteCommand: {
description: "",
type: "string",
default: ""
},
onClickEditCommand: {
description: "",
type: "string",
default: ""
},
onHandleAction: {
description: "",
type: "string",
default: ""
},
count: {
description: "",
type: "number",
default: 2
}
}
},
contextMenu: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
}
}
},
customizaiton: {
type: "object",
properties: {
enableScheme: {
description: "",
type: "boolean",
default: !1
},
enableSetting: {
description: "",
type: "boolean",
default: !1
}
}
},
edit: {
type: "object",
properties: {
mode: {
description: "",
type: "string",
default: "cell",
enum: [
"cell",
"row",
"card"
]
},
selectOnEditing: {
description: "",
type: "boolean",
default: !1
},
onAppendRow: {
description: "",
type: "string",
default: ""
},
onBeforeEdit: {
description: "",
type: "string",
default: ""
}
}
},
filter: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
filterStyle: {
description: "",
type: "string",
default: "filter-column",
enum: [
"filter-column",
"filter-row"
]
},
mode: {
description: "",
type: "string",
default: "server",
enum: [
"server"
]
},
showSummary: {
description: "",
type: "boolean",
default: !0
},
onFilterChange: {
description: "",
type: "string",
default: ""
}
}
},
footer: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
customFooterStyle: {
description: "",
type: "object"
},
footerDataCommand: {
description: "",
type: "string",
default: ""
},
footerDataFrom: {
description: "",
type: "string",
default: "client"
},
footerHeight: {
description: "",
type: "number",
default: 29
},
footerPosition: {
description: "",
type: "string",
default: "bottom"
},
footerTemplate: {
description: "",
type: "string",
default: ""
}
}
},
group: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
customGroupRow: {
description: "",
type: "object"
},
customGroupRowStyle: {
description: "",
type: "object"
},
customSummaryStyle: {
description: "",
type: "object"
},
groupColSpan: {
description: "",
type: "number",
default: 1
},
groupFields: {
description: "",
type: "array",
default: []
},
showGroupedColumn: {
description: "",
type: "boolean",
default: !0
},
showGroupPanel: {
description: "",
type: "boolean",
default: !1
},
showSummary: {
description: "",
type: "boolean",
default: !1
},
summaryPosition: {
description: "",
type: "string",
default: "separate",
enum: [
"separate",
"merge-to-group"
]
},
disableGroupOnEditing: {
description: "",
type: "boolean",
default: !0
},
expandGroupRows: {
description: "",
type: "boolean",
default: !0
}
}
},
header: {
type: "object",
properties: {
wrapHeadings: {
description: "",
type: "boolean",
default: !1
}
}
},
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: "string",
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: ""
}
}
},
rowOption: {
type: "object",
properties: {
customRowStyle: {
description: "自定义行样式",
type: "string",
default: ""
},
customCellStyle: {
description: "自定义单元格样式",
type: "string",
default: ""
},
disable: {
description: "",
type: "object"
},
height: {
description: "",
type: "number",
default: 30
},
showHovering: {
type: "boolean",
default: !0
},
wrapContent: {
type: "boolean",
default: !1
}
}
},
rowNumber: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
heading: {
description: "",
type: "string",
default: "序号"
},
width: {
description: "",
type: "number",
default: 36
},
onClickRow: {
description: "",
type: "string",
default: ""
},
onDoubleClickRow: {
description: "",
type: "string",
default: ""
}
}
},
onClickRow: {
description: "行点击事件",
type: "string",
default: ""
},
onSelectionChange: {
description: "行切换事件",
type: "string",
default: ""
},
onPageIndexChanged: {
description: "切换页码事件",
type: "string",
default: ""
},
onPageSizeChanged: {
description: "分页条数变化事件",
type: "string",
default: ""
},
selection: {
type: "object",
properties: {
enableSelectRow: {
description: "允许选中行",
type: "boolean",
default: !0
},
enable: {
description: "",
type: "boolean",
default: !0
},
checkOnSelect: {
description: "",
type: "boolean",
default: !1
},
showSelectAll: {
description: "",
type: "boolean",
default: !1
},
clearSelectionOnEmpty: {
description: "",
type: "boolean",
default: !0
},
customSelectionItem: {
description: "",
type: "object"
},
focusSelection: {
description: "",
type: "string",
default: "current",
enum: [
"current",
"all"
]
},
keepSelectingOnClick: {
description: "",
type: "boolean",
default: !0
},
keepSelectingOnPaging: {
description: "",
type: "boolean",
default: !0
},
multiSelect: {
description: "",
type: "boolean",
default: !1
},
selectionMode: {
description: "",
type: "string",
default: "default"
},
selectOnCheck: {
description: "",
type: "boolean",
default: !1
},
selectOnEditing: {
description: "",
type: "boolean",
default: !1
},
showCheckbox: {
description: "",
type: "boolean",
default: !1
},
showCheckAll: {
description: "",
type: "boolean",
default: !1
},
showSelection: {
description: "",
type: "boolean",
default: !1
},
onBeforeSelect: {
description: "",
type: "string",
default: ""
},
onBeforeUnCheck: {
description: "",
type: "",
default: ""
},
onBeforeUnSelect: {
description: "",
type: "string",
default: ""
},
onCheckAll: {
description: "",
type: "string",
default: ""
},
onChecked: {
description: "",
type: "string",
default: ""
},
onSelectionChange: {
description: "",
type: "string",
default: ""
},
onUnCheckAll: {
description: "",
type: "string",
default: ""
},
onUnChecked: {
description: "",
type: "string",
default: ""
},
onCheckedChange: {
description: "",
type: "string"
}
}
},
sort: {
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
fields: {
description: "",
type: "array",
default: []
},
mode: {
description: "",
type: "string",
default: "server",
enum: [
"server"
]
},
multiSort: {
description: "",
type: "boolean",
default: !1
}
}
},
summary: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
},
customSummaryStyle: {
description: "",
type: "object"
},
groupFields: {
description: "",
type: "array",
default: []
},
mode: {
description: "",
type: "string",
default: "client",
enum: [
"client",
"server"
]
},
position: {
description: "",
type: "boolean",
default: "bottom",
enum: [
"bottom",
"top",
"both"
]
}
}
},
toolbar: {
description: "",
type: "object",
properties: {
enable: {
description: "",
type: "boolean",
default: !1
}
}
},
visualization: {
autoHeight: {
description: "",
type: "boolean",
default: !1
},
emptyDataHeight: {
description: "",
type: "number",
default: 36
},
emptyTemplate: {
description: "",
type: "string",
default: ""
},
maxHeight: {
description: "",
type: "number",
default: 300
},
scrollBarShowMode: {
description: "",
type: "string",
default: "auto"
},
showBorder: {
description: "",
type: "boolean",
default: !1
},
showScrollArrow: {
description: "",
type: "boolean",
default: !1
},
striped: {
description: "",
type: "boolean",
default: !0
},
useBlankWhenDataIsEmpty: {
description: "",
type: "boolean",
default: !1
}
},
emptyTemplate: {
description: "",
type: "string",
default: ""
},
fieldEditable: {
description: "是否可编辑",
type: "boolean",
default: !1
},
searchable: {
description: "是否可搜索定位",
type: "boolean",
default: !1
},
enableColumnSettingSolution: {
description: "是否启用列配置方案",
type: "boolean",
default: !1
}
}, So = [
"id",
"type",
"columns"
], Io = {
onSelectionChange: "行切换事件",
onClickRow: "行点击事件",
onDoubleClickRow: "行双击事件",
onFilterChanged: "过滤事件",
onClickEditCommand: "操作列编辑事件",
onClickDeleteCommand: "操作列删除事件",
onExpandNode: "展开事件",
onSelectItem: "选中行事件",
onUnSelectItem: "取消选中行事件",
onSelectAll: "全选事件",
onUnSelectAll: "取消全选事件"
}, ct = {
$schema: go,
$id: ho,
title: vo,
description: Co,
type: bo,
properties: wo,
required: So,
events: Io
}, pt = /* @__PURE__ */ new Map([
["appearance", qn],
["column", "columnOption"],
["command", "commandOption"]
]);
function Ro(e, n, f) {
var v;
const l = f.parentComponentInstance, r = l.schema.type, C = String(((v = l.schema.appearance) == null ? void 0 : v.class) || "").split(" "), I = r === "section" || r === "tab-page", w = C.includes("f-page-content-nav"), m = C.includes("f-page-main"), a = e.getSchemaByType("component");
a.id = `${n.id}-component`, a.componentType = "data-grid";
let c = "";
return c += I ? "f-struct-data-grid-in-card f-struct-is-subgrid" : "", c += w ? "f-struct-data-grid-in-nav f-struct-wrapper f-utils-fill-flex-column" : "", c += m ? "f-struct-data-grid f-struct-wrapper" : "", a.appearance = {
class: c
}, a.contents = [n], a;
}
function Bo(e, n, f) {
const l = f.parentComponentInstance, r = String(l.schema.appearance.class || "").split(" "), C = r.includes("f-page-content-nav"), I = r.includes("f-page-main"), w = e.getSchemaByType("section");
w.id = `${n.id}-section`;
let m = "";
return m += C ? "f-section-in-nav " : "", m += I ? "f-section-in-managelist " : "", m += "f-section-grid", w.appearance = { class: m }, w.contents = [n], w;
}
function Fo(e, n, f) {
const l = e.getSchemaByType("content-container");
return l.id = `${n.id}-layout`, l.appearance = { class: "f-grid-is-sub f-utils-flex-column" }, l.contents = [n], l;
}
function ft(e, n, f) {
const r = f.parentComponentInstance.schema.type, C = r === "section" || r === "tab-page";
n.appearance = { class: "f-component-grid" };
const w = (C ? Fo : Bo)(e, n, f);
return Ro(e, w, f);
}
const Do = dt(ut, ct, pt, ft), Oo = Kn(), Po = Yn(), mt = vn(Object.assign({}, ut, { componentId: { type: String, default: "" } }), "columnOption", "commandOption"), To = dt(mt, ct, pt, ft), Go = Jn();
class xo extends Zn {
constructor(n, f) {
super(n, f);
}
getPropertyConfig(n) {
return this.getBasicPropConfig(n), this.getAppearanceProperties(n), this.propertyConfig.categories.command = eo(this).getCommandColumnProperties(n), this.propertyConfig.categories.column = to().getColumnOptionProperties(n), this.propertyConfig.categories.rowOption = no().getRowOptionProperties(n), this.propertyConfig.categories.summary = oo().getSummaryProperties(n), this.propertyConfig.categories.filter = {
title: "过滤",
description: "",
properties: {
mode: {
title: "类型",
type: "enum",
description: "过滤类型",
$converter: "/converter/grid-filter.converter",
editor: {
data: [
{ id: "server", name: "服务端" }
]
}
}
}
}, this.getEventPropConfig(n), this.propertyConfig;
}
getBasicPropConfig(n) {
var I, w, m;
const f = (m = (w = (I = this.formSchemaUtils.getFormSchema()) == null ? void 0 : I.module) == null ? void 0 : w.entity[0]) == null ? void 0 : m.entities[0], l = this.assembleSchemaEntityToTree(f, 0), r = this, C = super.getBasicPropConfig(n);
this.propertyConfig.categories.basic = {
description: "Basic Information",
title: "基本信息",
properties: {
...C.properties,
dataSource: {
description: "绑定数据源",
title: "绑定数据源",
editor: {
type: "combo-tree",
textField: "name",
valueField: "label",
data: l,
editable: !1
},
readonly: !0
}
},
setPropertyRelates(a, c) {
switch (a && a.propertyID) {
case "dataSource": {
const v = r.formSchemaUtils.getViewModelById(r.viewModelId);
if (v) {
const T = l.find((s) => s.label === a.propertyValue);
v.bindTo = T.bindTo;
}
r.designViewModelUtils.assembleDesignViewModel();
break;
}
}
}
};
}
getAppearanceProperties(n) {
this.propertyConfig.categories.appearance = io(this).getTreeGrid(n, this.viewModelId), this.propertyConfig.categories.selection = ao().getSelection(n), this.propertyConfig.categories.rowNumber = lo().getRowNumber(n), this.propertyConfig.categories.pagination = so().getPagination(n, !0);
}
getEventPropConfig(n) {
const f = ro().initEvent(n), l = this, r = l.eventsEditorUtils.formProperties(n, l.viewModelId, f), C = l.createBaseEventProperty(r);
this.propertyConfig.categories.eventsEditor = {
title: "事件",
hideTitle: !0,
properties: C,
// 这个属性，标记当属性变更得时候触发重新更新属性
refreshPanelAfterChanged: !0,
tabId: "commands",
tabName: "交互",
setPropertyRelates(I, w) {
const m = I.propertyValue;
delete n[l.viewModelId], m && (m.setPropertyRelates = this.setPropertyRelates, l.eventsEditorUtils.saveRelatedParameters(n, l.viewModelId, m.events, m)), n.remoteSort = !!n.columnSorted, n.command && (n.command.onClickEditCommand = n.onClickEditCommand, n.command.onClickDeleteCommand = n.onClickDeleteCommand, n.command.onHandleAction = n.onHandleAction);
}
};
}
/**
* 将schema实体表组装成树
*/
assembleSchemaEntityToTree(n, f, l, r = "", C = []) {
const I = r ? `${r}/${n.label}` : "/";
return C.push({
id: n.id,
name: n.name,
label: n.label,
layer: f,
parent: l && l.id,
bindTo: I.replace("//", "/")
}), n.type.entities && n.type.entities.length && n.type.entities.map((w) => this.assembleSchemaEntityToTree(w, f + 1, n, I, C)), C;
}
}
function jo(e, n) {
const f = e.schema, l = b(!0), r = b(!0);
function C(v) {
return v && v.sourceType === "control" ? v.componentCategory === "input" : !1;
}
function I() {
return !1;
}
function w() {
return !1;
}
function m() {
return !0;
}
function a(v) {
return new xo(v, n).getPropertyConfig(f);
}
function c() {
var v, T, s, k;
if (e && n) {
const V = (v = e == null ? void 0 : e.componentInstance) == null ? void 0 : v.value.belongedComponentId;
let D = "", d = "";
const { formSchemaUtils: x } = n;
if (V) {
const O = x.getRootViewModelId(), N = x.getComponentByViewModelId(O), S = x.selectNode(N, (W) => W.contents && W.contents.find((Q) => Q.component === V));
(S == null ? void 0 : S.type) === ((T = xe["tab-page"]) == null ? void 0 : T.type) && ((s = S == null ? void 0 : S.contents) != null && s.length) && (D = S.title || ""), (S == null ? void 0 : S.type) === ((k = xe.section) == null ? void 0 : k.type) && (S == null ? void 0 : S.showHeader) !== !1 && (D = S.mainTitle || ""), D = D ? `${D} > ` : "", d = D ? S.id : "";
}
const A = xe["tree-grid"].name;
n == null || n.formSchemaUtils.getControlBasicInfoMap().set(e.schema.id, {
componentTitle: A,
parentPathName: `${D}${A}`,
reliedComponentId: d
});
}
}
return {
canAccepts: C,
checkCanDeleteComponent: I,
checkCanMoveComponent: w,
hideNestedPaddingInDesginerView: m,
triggerBelongedComponentToMoveWhenMoved: l,
triggerBelongedComponentToDeleteWhenDeleted: r,
getPropsConfig: a,
setComponentBasicInfoMap: c
};
}
const Ie = /* @__PURE__ */ _e({
name: "FTreeGridDesign",
props: mt,
emits: [],
setup(e, n) {
var Ce, ie;
const f = b(), l = 0, r = b(((Ce = e.rowOption) == null ? void 0 : Ce.height) || 28), C = b(!1), I = b(20), w = b(e.columns), m = $e(e), a = b(), c = b(), v = b([]), T = b(!1), s = b(((ie = e.rowOption) == null ? void 0 : ie.wrapContent) || !1), k = ze("designer-host-service"), V = ze("design-item-context"), D = jo(V, k), d = Xn(f, V, D);
d.value.designerClass = "f-utils-fill-flex-column";
const x = qe(e, n), A = Ke(e), O = Ye(e, /* @__PURE__ */ new Map(), x, A, m), N = Je(e, O, m, v, n), S = j(() => O.dataView.value.length), {
containerStyleObject: W
} = Qe(e, v), Q = Xe(e), {
applyCommands: ee
} = Q;
ee(w);
const i = uo(e), {
applyColumnSorter: le,
columnContext: R,
updateColumnRenderContext: $
} = i, se = Ze(e), E = et(e, R), re = tt(e, n, N, m), B = nt(e, n, m, re, v), X = ot(e, O, r), te = it(e, B, X), q = at(e, O, B, A, m, X, te, r), z = co(e, w, O, S, l, q), {
getVisualData: ne
} = z, Re = lt(e, N), {
sidebarWidth: Z
} = Re;
v.value = ne(0, S.value + l - 1);
const de = st(e, O, v, R, z, S, l, Z, r, C), {
onWheel: ge,
dataGridWidth: oe,
viewPortHeight: he,
viewPortWidth: _,
updateVisibleRowsOnLatestVisibleScope: ue
} = de, ve = po(e, R, a, _, E), {
calculateColumnsSize: L
} = ve, Be = j(() => ({
"drag-container": !0,
"fv-grid": !0,
"fv-grid-bordered": e.showBorder,