@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
1,105 lines (1,104 loc) • 28 kB
JavaScript
import Ce, { treeGridProps as K } from "../../components/tree-grid/index.esm.js";
import { excludeProperties as he, withInstall as ve } from "../../components/common/index.esm.js";
import { ref as m, defineComponent as we, inject as q, computed as V, onMounted as Se, nextTick as Pe, watch as L, createVNode as J } from "vue";
import { useResizeObserver as Re } from "@vueuse/core";
import { resolveAppearance as Ie, createPropsResolver as Q, createTreeGridSelectionItemResolver as Te, createTreeGridBindingResolver as Ge, createDataViewUpdateColumnsResolver as je } from "../../components/dynamic-resolver/index.esm.js";
import { useIdentify as Me, useFilter as ke, useHierarchy as De, useDataView as Ve, useSelection as Be, useDataViewContainerStyle as Oe, useCommandColumn as Fe, useSort as Ee, useGroupColumn as We, useRow as Ae, useEdit as ze, useVisualDataBound as Ne, useVisualDataCell as Ue, useVisualDataRow as $e, useSidebar as He, useVirtualScroll as xe, getHorizontalScrollbar as qe } from "../../components/data-view/index.esm.js";
import { getColumnHeader as Le } from "../data-grid/index.esm.js";
import { DgControl as B, useDesignerComponent as Je } from "../../components/designer-canvas/index.esm.js";
import { BaseControlProperty as Ke } from "../../components/property-panel/index.esm.js";
import { useCommandOption as Qe, useColumnOption as Xe, useRowOption as Ye, useSummary as Ze, useAppearance as _e, useRowNumber as et, usePagination as tt, useDataGridEvent as ot, useDesignerColumn as nt, useDesignerVisualData as it, useDesignerFitColumn as rt } from "../data-view/index.esm.js";
const st = "https://json-schema.org/draft/2020-12/schema", at = "https://farris-design.gitee.io/tree-grid.schema.json", lt = "tree-grid", ct = "A Farris Data Grid Component", pt = "object", dt = {
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: ""
}
}
},
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: "obejct",
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: "obejct"
},
customSummaryStyle: {
description: "",
type: "obejct"
},
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"
},
customCellStyle: {
description: "自定义单元格样式",
type: "string",
default: ""
},
disable: {
description: "",
type: "obejct"
},
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: ""
}
}, ut = [
"id",
"type",
"columns"
], ft = {
onSelectionChange: "行切换事件",
onClickRow: "行点击事件",
onDoubleClickRow: "行双击事件",
onFilterChanged: "过滤事件",
onSortChanged: "排序事件",
onSelectItem: "选中行事件",
onUnSelectItem: "取消选中行事件",
onSelectAll: "全选事件",
onUnSelectAll: "取消全选事件",
onClickEditCommand: "操作列编辑事件",
onClickDeleteCommand: "操作列删除事件"
}, X = {
$schema: st,
$id: at,
title: lt,
description: ct,
type: pt,
properties: dt,
required: ut,
events: ft
}, Y = /* @__PURE__ */ new Map([
["appearance", Ie],
["column", "columnOption"],
["command", "commandOption"]
]);
function mt(t, e, i) {
var c;
const o = i.parentComponentInstance, r = o.schema.type, a = String(((c = o.schema.appearance) == null ? void 0 : c.class) || "").split(" "), l = r === "section" || r === "tab-page", s = a.includes("f-page-content-nav"), n = a.includes("f-page-main"), d = t.getSchemaByType("component");
d.id = `${e.id}-component`, d.componentType = "data-grid";
let u = "";
return u += l ? "f-struct-data-grid-in-card f-struct-is-subgrid" : "", u += s ? "f-struct-data-grid-in-nav f-struct-wrapper f-utils-fill-flex-column" : "", u += n ? "f-struct-data-grid f-struct-wrapper" : "", d.appearance = {
class: u
}, d.contents = [e], d;
}
function gt(t, e, i) {
const o = i.parentComponentInstance, r = String(o.schema.appearance.class || "").split(" "), a = r.includes("f-page-content-nav"), l = r.includes("f-page-main"), s = t.getSchemaByType("section");
s.id = `${e.id}-section`;
let n = "";
return n += a ? "f-section-in-nav " : "", n += l ? "f-section-in-managelist " : "", n += "f-section-grid", s.appearance = { class: n }, s.contents = [e], s;
}
function yt(t, e, i) {
const o = t.getSchemaByType("content-container");
return o.id = `${e.id}-layout`, o.appearance = { class: "f-grid-is-sub f-utils-flex-column" }, o.contents = [e], o;
}
function Z(t, e, i) {
const r = i.parentComponentInstance.schema.type, a = r === "section" || r === "tab-page";
e.appearance = { class: "f-component-grid" };
const s = (a ? yt : gt)(t, e, i);
return mt(t, s, i);
}
const bt = Q(K, X, Y, Z), Ct = Te(), ht = Ge(), _ = he(Object.assign({}, K, { componentId: { type: String, default: "" } }), "columnOption", "commandOption"), vt = Q(_, X, Y, Z), wt = je();
class St extends Ke {
constructor(e, i) {
super(e, i);
}
getPropertyConfig(e) {
return this.getBasicPropConfig(e), this.getAppearanceProperties(e), this.propertyConfig.categories.command = Qe().getCommandColumnProperties(e), this.propertyConfig.categories.column = Xe().getColumnOptionProperties(e), this.propertyConfig.categories.rowOption = Ye().getRowOptionProperties(e), this.propertyConfig.categories.summary = Ze().getSummaryProperties(e), this.propertyConfig.categories.filter = {
title: "过滤",
description: "",
properties: {
mode: {
title: "类型",
type: "enum",
description: "过滤类型",
$converter: "/converter/grid-filter.converter",
editor: {
data: [
{ id: "server", name: "服务端" }
]
}
}
}
}, this.getEventPropConfig(e), this.propertyConfig;
}
getBasicPropConfig(e) {
var l, s, n;
const i = (n = (s = (l = this.formSchemaUtils.getFormSchema()) == null ? void 0 : l.module) == null ? void 0 : s.entity[0]) == null ? void 0 : n.entities[0], o = this.assembleSchemaEntityToTree(i, 0), r = this, a = super.getBasicPropConfig(e);
this.propertyConfig.categories.basic = {
description: "Basic Information",
title: "基本信息",
properties: {
...a.properties,
dataSource: {
description: "绑定数据源",
title: "绑定数据源",
editor: {
type: "combo-tree",
textField: "name",
valueField: "label",
data: o,
editable: !1
},
readonly: !0
}
},
setPropertyRelates(d, u) {
switch (d && d.propertyID) {
case "dataSource": {
const c = r.formSchemaUtils.getViewModelById(r.viewModelId);
if (c) {
const b = o.find((h) => h.label === d.propertyValue);
c.bindTo = b.bindTo;
}
r.designViewModelUtils.assembleDesignViewModel();
break;
}
}
}
};
}
getAppearanceProperties(e) {
this.propertyConfig.categories.appearance = _e().getDataGrid(e, this.viewModelId), this.propertyConfig.categories.rowNumber = et().getRowNumber(e), this.propertyConfig.categories.pagination = tt().getPagination(e, !0);
}
getEventPropConfig(e) {
const i = ot().initEvent(e), o = this, r = o.eventsEditorUtils.formProperties(e, o.viewModelId, i), a = o.createBaseEventProperty(r);
this.propertyConfig.categories.eventsEditor = {
title: "事件",
hideTitle: !0,
properties: a,
// 这个属性，标记当属性变更得时候触发重新更新属性
refreshPanelAfterChanged: !0,
tabId: "commands",
tabName: "交互",
setPropertyRelates(l, s) {
const n = l.propertyValue;
delete e[o.viewModelId], n && (n.setPropertyRelates = this.setPropertyRelates, o.eventsEditorUtils.saveRelatedParameters(e, o.viewModelId, n.events, n)), e.remoteSort = !!e.columnSorted, e.command && (e.command.onClickEditCommand = e.onClickEditCommand, e.command.onClickDeleteCommand = e.onClickDeleteCommand);
}
};
}
/**
* 将schema实体表组装成树
*/
assembleSchemaEntityToTree(e, i, o, r = "", a = []) {
const l = r ? `${r}/${e.label}` : "/";
return a.push({
id: e.id,
name: e.name,
label: e.label,
layer: i,
parent: o && o.id,
bindTo: l.replace("//", "/")
}), e.type.entities && e.type.entities.length && e.type.entities.map((s) => this.assembleSchemaEntityToTree(s, i + 1, e, l, a)), a;
}
}
function Pt(t, e) {
const i = t.schema, o = m(!0), r = m(!0);
function a(c) {
return c && c.sourceType === "control" ? c.componentCategory === "input" : !1;
}
function l() {
return !1;
}
function s() {
return !1;
}
function n() {
return !0;
}
function d(c) {
return new St(c, e).getPropertyConfig(i);
}
function u() {
var c, b, h, C;
if (t && e) {
const S = (c = t == null ? void 0 : t.componentInstance) == null ? void 0 : c.value.belongedComponentId;
let f = "", P = "";
const { formSchemaUtils: v } = e;
if (S) {
const R = v.getRootViewModelId(), w = v.getComponentByViewModelId(R), p = v.selectNode(w, (I) => I.contents && I.contents.find((T) => T.component === S));
(p == null ? void 0 : p.type) === ((b = B["tab-page"]) == null ? void 0 : b.type) && ((h = p == null ? void 0 : p.contents) != null && h.length) && (f = p.title || ""), (p == null ? void 0 : p.type) === ((C = B.section) == null ? void 0 : C.type) && (p == null ? void 0 : p.showHeader) !== !1 && (f = p.mainTitle || ""), f = f ? `${f} > ` : "", P = f ? p.id : "";
}
const g = B["tree-grid"].name;
e == null || e.formSchemaUtils.getControlBasicInfoMap().set(t.schema.id, {
componentTitle: g,
parentPathName: `${f}${g}`,
reliedComponentId: P
});
}
}
return {
canAccepts: a,
checkCanDeleteComponent: l,
checkCanMoveComponent: s,
hideNestedPaddingInDesginerView: n,
triggerBelongedComponentToMoveWhenMoved: o,
triggerBelongedComponentToDeleteWhenDeleted: r,
getPropsConfig: d,
setComponentBasicInfoMap: u
};
}
const j = /* @__PURE__ */ we({
name: "FTreeGridDesign",
props: _,
emits: [],
setup(t, e) {
var U, $;
const i = m(), o = 0, r = ((U = t.rowOption) == null ? void 0 : U.height) || 28, a = m(20), l = m(t.columns), s = Me(t), n = m(), d = m(), u = m([]), c = m(!1), b = m((($ = t.rowOption) == null ? void 0 : $.wrapContent) || !1), h = q("designer-host-service"), C = q("design-item-context"), S = Pt(C, h), f = Je(i, C, S);
f.value.designerClass = "f-utils-fill-flex-column";
const P = ke(t, e), v = De(t), g = Ve(t, /* @__PURE__ */ new Map(), P, v, s), R = Be(t, g, s, u, e), w = V(() => g.dataView.value.length), {
containerStyleObject: p
} = Oe(t), I = Fe(t), {
applyCommands: T
} = I;
T(l);
const O = nt(t), {
applyColumnSorter: ee,
columnContext: M,
updateColumnRenderContext: te
} = O, oe = Ee(t), ne = We(t, M), ie = Ae(t, e, R, s), F = ze(t, e, s, ie, u), E = Ne(t), re = Ue(t, F, E), se = $e(t, g, F, v, s, E, re), W = it(t, l, g, w, o, se), {
getVisualData: A
} = W, ae = He(t, R), {
sidebarWidth: le
} = ae;
u.value = A(0, w.value + o - 1);
const k = xe(t, g, u, M, W, w, o, le), {
onWheel: ce,
dataGridWidth: z,
viewPortHeight: N,
viewPortWidth: D,
updateVisibleRowsOnLatestVisibleScope: pe
} = k, de = rt(t, M, n, D, ne), {
calculateColumnsSize: G
} = de, ue = V(() => ({
"drag-container": !0,
"fv-grid": !0,
"fv-grid-bordered": t.showBorder,
"fv-datagrid-strip": t.showStripe
})), fe = V(() => ({
"fv-grid-content": !0,
"fv-grid-content-hover": c.value,
"fv-grid-wrap-content": b.value
})), {
renderGridHeader: me
} = Le(C, t, O, k, "tree-grid-column"), {
renderHorizontalScrollbar: ge
} = qe(t, n, k);
function ye() {
var H, x;
const y = Math.ceil(n.value.clientHeight / r);
y > a.value && (a.value = y, pe()), N.value = ((H = d.value) == null ? void 0 : H.clientHeight) || 0, z.value = ((x = n.value) == null ? void 0 : x.clientWidth) || 0, G();
}
Se(() => {
i.value.componentInstance = f, n.value && (a.value = Math.max(Math.ceil(n.value.clientHeight / r), a.value), u.value = A(0, w.value + o - 1), Re(n.value, ye), G(), Pe(() => {
n.value && (z.value = n.value.clientWidth), d.value && (D.value = d.value.clientWidth, N.value = d.value.clientHeight);
}));
});
function be(y) {
y && (l.value = y, T(l), te(l.value), ee(g, oe), G());
}
return L(() => t.columns, (y) => {
be(y);
}), L(D, () => {
n.value && G();
}), e.expose(f.value), () => J("div", {
ref: i,
class: ue.value,
style: p.value,
onWheel: ce,
dragref: `${C.schema.id}-container`
}, [n.value && me(), J("div", {
ref: n,
class: fe.value,
onMouseover: () => {
c.value = !0;
},
onMouseleave: () => {
c.value = !1;
}
}, [ge()])]);
}
});
j.register = (t, e, i, o) => {
t["tree-grid"] = Ce, e["tree-grid"] = bt, o["tree-grid"] = { bindingResolver: ht, selectionItemResolver: Ct, updateColumnsResolver: wt };
};
j.registerDesigner = (t, e, i) => {
t["tree-grid"] = j, e["tree-grid"] = vt;
};
const Ot = ve(j);
export {
j as FTreeGridDesign,
ht as bindingResolver,
Ot as default,
vt as designPropsResolver,
bt as propsResolver,
Ct as selectionItemResolver,
_ as treeGridDesignProps,
wt as updateColumnsResolver
};