@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
569 lines (568 loc) • 15.5 kB
JavaScript
import { getCustomClass as Je, withInstall as Ke } from "../common/index.esm.js";
import { createVNode as T, defineComponent as ne, ref as s, computed as D, onMounted as Qe, nextTick as Xe, inject as Ze } from "vue";
import { useResizeObserver as _e } from "@vueuse/core";
import { resolveAppearance as et, createPropsResolver as tt } from "../dynamic-resolver/index.esm.js";
import { getHierarchyRow as nt, useFilter as ie, useIdentify as oe, useHierarchy as ae, useDataView as le, useSelection as se, useSelectHierarchyItem as re, useColumn as ce, useGroupColumn as it, useRow as ue, useEdit as de, useVisualDataBound as fe, useVisualDataCell as me, useVisualDataRow as ve, useVisualData as ye, useCellPosition as he, useVirtualScroll as pe, useSidebar as ot, getVerticalScrollbar as at, getHorizontalScrollbar as lt, getSidebar as st, useFitColumn as rt, useDataViewContainerStyle as Ce, getEmpty as ct } from "../data-view/index.esm.js";
import { useDesignerComponent as ut } from "../designer-canvas/index.esm.js";
const dt = /* @__PURE__ */ new Map([
["appearance", et]
]);
function ft(e, n, d) {
return n;
}
const mt = "tree-view", vt = "A Farris Component", yt = "object", ht = {
basic: {
description: "Basic Infomation",
title: "基本信息",
properties: {
id: {
description: "组件标识",
title: "标识",
type: "string",
readonly: !0
},
type: {
description: "组件类型",
title: "控件类型",
type: "select",
editor: {
type: "waiting for modification",
enum: []
}
}
}
}
}, pt = {
title: mt,
description: vt,
type: yt,
categories: ht
}, Ct = "https://json-schema.org/draft/2020-12/schema", gt = "https://farris-design.gitee.io/tree-view.schema.json", wt = "tree-view", bt = "A Farris Component", It = "object", St = {
id: {
description: "The unique identifier for tree-view",
type: "string"
},
type: {
description: "The type string of tree-view",
type: "string",
default: "tree-view"
},
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
},
idField: {
description: "",
type: "string",
default: "id"
}
}, Vt = [
"id",
"type"
], Dt = {
$schema: Ct,
$id: gt,
title: wt,
description: bt,
type: It,
properties: St,
required: Vt
}, xt = {
/** 自动列宽。设为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 }
}, Q = {
/**
* 自定义样式
*/
customClass: { type: String, default: "" },
/**
* 列集合
*/
columns: {
type: Array,
default: [
{ field: "name", title: "", dataType: "string", width: "100%" }
]
},
columnOption: { type: Object },
displayField: { type: String, default: "name", require: !0 },
/**
* 是否显示连接线
*/
showLines: { type: Boolean, default: !1 },
/** 树表数据 */
/**
* 被绑定数据
*/
data: { type: Object, default: [] },
/**
* 禁用组件
*/
disable: { type: Boolean, default: !1 },
disabledField: { type: String, default: "disabled" },
/**
* 适配父组件尺寸
*/
fit: { type: Boolean, default: !1 },
/**
* 高度
*/
height: { type: Number, default: -1 },
/**
* DataGrid组件唯一标识
*/
id: { type: String, default: "" },
/**
* 被绑定数据的标识字段
*/
idField: { type: String, default: "id", require: !0 },
/**
* 最小高度
*/
minHeight: { type: Number, default: 300 },
/**
* 最小宽度
*/
minWidth: { type: Number, default: 400 },
/**
* 分页配置
*/
pagination: {
type: Object,
default: {
enable: !1,
size: -1
}
},
/**
* 行号配置
*/
rowNumber: {
type: Object,
default: {
enable: !1,
width: 36,
heading: "序号"
}
},
/**
* 选择配置
*/
selection: {
type: Object,
default: {
enableSelectRow: !0,
multiSelect: !1,
multiSelectMode: "DependOnCheck",
showCheckbox: !1,
showSelectAll: !1,
showSelection: !1
}
},
/**
* 已选数据标识
*/
selectionValues: { type: Array, default: [] },
/**
* 是否显示图标集
*/
showTreeNodeIcons: { type: Boolean, default: !1 },
/**
* 树节点图标数据
*/
treeNodeIconsData: { type: [Object, String], default: {} },
/**
* 绑定数据中的图标属性key值
*/
iconField: { type: String, default: "" },
/**
* 列宽度
* @default -1
*/
width: { type: Number, default: -1 },
/**
* 新增值
*/
newDataItem: {
type: [Function, Object],
default: () => {
}
},
/**
* 连接线颜色
*/
lineColor: { type: String, default: "#9399a0" },
/**
* 单元格高度
*/
cellHeight: { type: Number, default: 28 },
onOutputValue: { type: Function, default: () => {
} },
onCurrentEvent: { type: Function, default: () => {
} },
hierarchy: {
type: Object,
default: {
cascadeOption: {
autoCheckChildren: !1,
autoCheckParent: !1,
selectionRange: "All"
},
parentIdField: "parent"
}
},
/**
* 行配置
*/
rowOption: { type: Object },
/**
* 虚拟化渲染数据
*/
virtualized: { type: Boolean, default: !1 },
/**
* 是否出现省略号
*/
showEllipsis: { type: Boolean, default: !1 },
/**
* 自动高度 *
*/
autoHeight: { type: Boolean, default: !1 },
/**
* async loading data
*/
loadData: { type: Function },
checkboxPosition: { type: String, default: "after-expand" },
/**
* 自动撑开宽度，不出现横向滚动条
*/
autoExpandWidth: { type: Boolean, default: !1 }
}, ge = tt(Q, Dt, dt, ft, pt);
function we(e, n, d, u, R, r, O, g, w, a, v, f, b, i, l, y, N) {
const {
calculateCellPositionInRow: W
} = u, {
columnContext: x
} = R, {
gridDataStyle: M
} = f, {
renderDataRow: I
} = nt(e, n, x, d, r, O, g, w, a, v, f, b, i, y, N);
function P() {
const p = W(x.value.primaryColumns);
return d.value.filter((S) => S.visible !== !1).map((S, C) => I(S, p, "primary", C));
}
function h() {
return T("div", {
ref: l,
class: "fv-grid-content-primary"
}, [T("div", {
class: "fv-grid-data",
style: M.value
}, [P()])]);
}
return {
renderTreeArea: h
};
}
function te(e, n) {
function d() {
return n.slots.header && T("div", {
class: "f-tree-view-header"
}, [n.slots.header()]);
}
return {
renderHeader: d
};
}
const q = /* @__PURE__ */ ne({
name: "FTreeView",
props: Q,
emits: ["outputValue", "currentEvent", "clickRow", "selectItem", "unSelectItem", "selectionChange", "expandNode", "dblclickNode", "clickRow", "selectionUpdate"],
setup(e, n) {
var ee;
const d = s(null), u = s(((ee = e.rowOption) == null ? void 0 : ee.height) || 28), R = s(!1), r = s(), O = s(!1), g = s(), w = s(20), a = s([]), v = ie(e, n), f = oe(e), b = ae(e), i = le(e, /* @__PURE__ */ new Map(), v, b, f), l = se(e, i, f, a, n), y = re(e, a, i, f, l, n), N = D(() => Je({
// 'fv-tree': true
"fv-grid": !0,
"fv-tree-view": !0
}, e.customClass)), W = D(() => ({
// 'fv-tree-content': true
"fv-grid-content": !0,
"fv-grid-content-hover": O.value
})), x = s(e.columns), M = ce(e, n), {
columnContext: I
} = M, P = it(e, I), h = 0, p = D(() => e.virtualized ? Math.min(i.dataView.value.length, w.value) : i.dataView.value.length), S = D(() => !a.value || !a.value.length), C = ue(e, n, l, f), H = de(e, n, f, C, a), F = fe(e, i, u), k = me(e, H, F), z = ve(e, i, H, b, f, F, k, u), j = ye(e, x, i, p, h, z), {
getVisualData: B
} = j, L = he(e, I, u, R), c = pe(e, i, a, I, j, p, h, s(0), u, R), Y = ot(e, l), {
onWheel: U,
dataGridWidth: $,
viewPortHeight: G,
viewPortWidth: A,
resetScroll: E,
updateVisibleRowsOnLatestVisibleScope: be
} = c, {
renderVerticalScrollbar: Ie
} = at(e, r, c), {
renderHorizontalScrollbar: Se
} = lt(e, r, c), {
renderDataGridSidebar: Ve
} = st(e, C, l, Y, c), De = rt(e, I, r, A, P), {
calculateColumnsSize: X
} = De;
function Re() {
return e.header === "ContentHeader", te;
}
const Oe = Re(), {
renderHeader: He
} = Oe(e, n), {
renderTreeArea: Fe
} = we(e, n, a, L, M, i, H, b, C, l, y, c, j, F, g, u, R), {
containerStyleObject: je
} = Ce(e, a, () => {
var t;
return ((t = c.getHierarchyIndentWidth) == null ? void 0 : t.call(c)) || 0;
}, c.gridViewWidth);
function J() {
const t = l.getSelectionRow();
return t ? t.dataIndex - 1 : -1;
}
function Be() {
var o, m;
const t = Math.ceil(r.value.clientHeight / u.value);
t > w.value && (w.value = t, be()), G.value = ((o = g.value) == null ? void 0 : o.clientHeight) || 0, $.value = ((m = r.value) == null ? void 0 : m.clientWidth) || 0, X();
}
const {
renderEmpty: Te
} = ct(e, n);
Qe(() => {
r.value && (w.value = Math.max(Math.ceil(r.value.clientHeight / u.value), w.value), a.value = B(0, p.value + h - 1), _e(r.value, Be), X(), Xe(() => {
if (r.value && ($.value = r.value.clientWidth), g.value && (A.value = g.value.clientWidth, G.value = g.value.clientHeight), e.autoExpandWidth) {
const t = c.getHierarchyIndentWidth(), o = c.gridViewWidth.value + t;
d.value.style.width = `${o}px`;
}
}));
});
function xe() {
const t = J();
i.insertNewDataItem(t), a.value = B(0, p.value + h - 1);
}
function Me() {
const t = J();
i.insertNewChildDataItem(t), a.value = B(0, p.value + h - 1);
}
function Ne() {
const t = J(), o = y.getNextSelectableHierarchyItemId(t);
i.removeHierarchyDataItem(t), a.value = B(0, p.value + h - 1), o && y.selectItemById(o);
}
function We(t, o) {
i.editDataItem(t, o), a.value = B(0, p.value + h - 1);
}
function Pe() {
}
function ze() {
}
function Ae(t) {
return Object.prototype.hasOwnProperty.call(t, "raw") ? i.hasRealChildren(t.raw) : i.hasRealChildren(t);
}
function Ee(t, o) {
const m = a.value.find((K) => K.raw[f.idField.value] === o), V = m ? m.dataIndex - 1 : -1;
i.insertNewChildDataItems(t, V);
}
function Z(t) {
if (t > -1) {
const o = a.value[t];
o && l.selectItem(o);
}
}
function ke(t, o) {
if (t) {
const m = l.getSelectionRow();
if (i.load(t), i.reOrderVisibleIndex(), o != null && o.keepScrollPosition) {
const V = c.offsetY.value;
E(), c.scrollTo(V);
} else
E();
if (m && m.raw && m.raw.originalId) {
const V = t.findIndex((K) => K.originalId === m.raw.originalId);
V > -1 && Z(V);
}
}
}
function $e() {
l.clearSelection();
}
function Ge(t) {
y.selectItemByIds(t);
}
function _(t) {
C.activeRowById(t);
}
function qe(t, o = {
isCurrent: !0
}) {
o != null && o.isCurrent && _(t), y.selectItemById(t);
}
function Le(t) {
const o = f.idField.value, m = a.value.find((V) => V.raw[o] === t);
m && C.changeRow(m);
}
function Ye() {
l.emptyCurrentRowId();
}
n.expose({
addNewDataItem: xe,
addNewChildDataItem: Me,
removeDataItem: Ne,
editDataItem: We,
acceptDataItem: Pe,
cancelDataItem: ze,
selectItem: Z,
updateDataSource: ke,
clearSelection: $e,
selectItemById: qe,
activeRowById: _,
hasChildren: Ae,
addChildrenToNode: Ee,
selectRowById: Le,
selectItemByIds: Ge,
emptyCurrentRowId: Ye
});
const Ue = D(() => {
const t = {};
return c.shouldShowHorizontalScrollbar.value && (t.paddingBottom = "10px"), c.shouldShowVirticalScrollbar.value && (t.paddingRight = "10px"), t;
});
return () => T("div", {
ref: d,
class: N.value,
style: je.value,
onWheel: U
}, [He(), T("div", {
ref: r,
class: W.value,
onMouseover: () => {
O.value = !0;
},
onMouseleave: () => {
O.value = !1;
},
style: Ue.value
}, [r.value && Ve(a), Fe(), r.value && S.value && Te(), r.value && Se(), r.value && Ie()])]);
}
}), Rt = /* @__PURE__ */ ne({
name: "FTreeViewDesign",
props: Q,
emits: ["outputValue", "currentEvent", "selectionChange"],
setup(e, n) {
var A;
const d = s(!1), u = s(((A = e.rowOption) == null ? void 0 : A.height) || 28), R = s(), r = Ze("design-item-context"), O = ut(R, r), g = s();
s(e.idField);
const w = s(), a = s(!1), v = s([]), f = ie(e, n), b = ae(e), i = oe(e), l = le(e, /* @__PURE__ */ new Map(), f, b, i), y = se(e, l, i, v, n), N = re(e, v, l, i, y, n), W = D(() => ({
"fv-tree": !0
})), x = D(() => ({
"fv-tree-content": !0
})), {
containerStyleObject: M
} = Ce(e, v);
function I(E) {
}
function P() {
return [];
}
function h() {
return [];
}
const p = s(e.columns), S = ce(e, n), {
columnContext: C
} = S, H = 0, F = D(() => l.dataView.value.length), k = ue(e, n, y, i), z = de(e, n, i, k, v), j = fe(e, l, u), B = me(e, z, j), L = ve(e, l, z, b, i, j, B, u), c = ye(e, p, l, F, H, L), {
getVisualData: Y
} = c, U = he(e, C, u, d);
v.value = Y(0, F.value + H - 1);
const $ = pe(e, l, v, C, c, F, H, s(0), u, d), {
renderTreeArea: G
} = we(e, n, v, U, S, l, z, b, k, y, N, $, c, j, g, u, d);
return n.expose(O.value), () => T("div", {
class: W.value,
style: M.value,
onWheel: I
}, [T("div", {
ref: w,
class: x.value,
onMouseover: () => {
a.value = !0;
},
onMouseleave: () => {
a.value = !1;
}
}, [G(), P(), h()])]);
}
});
q.register = (e, n, d) => {
e["tree-view"] = q, n["tree-view"] = ge;
};
q.registerDesigner = (e, n, d) => {
e["tree-view"] = Rt, n["tree-view"] = ge;
};
const Mt = Ke(q);
export {
q as FTreeView,
xt as columnOptions,
Mt as default,
ge as propsResolver,
Q as treeViewProps
};