@bencamus/vue3-tree-chart 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.tree-container .node{fill:gray!important}.tree-container .link{stroke-width:2px!important;fill:transparent!important;stroke:#cecece!important}.tree-container .link-hidden{display:none;stroke-width:2px!important;fill:transparent!important;stroke:#fc2020!important}.tree-node-item-enter[data-v-c304c1c5],.tree-node-item-leave-to[data-v-c304c1c5]{opacity:0}.tree-container[data-v-c304c1c5]{touch-action:none;position:relative;overflow:hidden}.tree-container .vue-tree[data-v-c304c1c5]{position:relative}.tree-container>svg[data-v-c304c1c5],.tree-container .dom-container[data-v-c304c1c5]{width:100%;height:100%;position:absolute;left:0;top:0;overflow:visible;transform-origin:0 50%}.tree-container .dom-container[data-v-c304c1c5]{z-index:1;pointer-events:none}.node-slot[data-v-c304c1c5]{cursor:pointer;pointer-events:all;position:absolute;background-color:transparent;box-sizing:border-box;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-sizing:content-box;transition-timing-function:ease-in-out}
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import { defineComponent as S, ref as d, onMounted as k, onBeforeUnmount as I, watch as _, createElementBlock as c, openBlock as f, createElementVNode as D, normalizeStyle as m, createVNode as A, TransitionGroup as V, withCtx as H, Fragment as O, renderList as $, renderSlot as b, toDisplayString as B } from "vue";
|
|
2
|
+
import z, { Direction as T, TreeLinkStyle as U, DEFAULT_LEVEL_HEIGHT as w, DEFAULT_NODE_HEIGHT as F, DEFAULT_NODE_WIDTH as P } from "@bencamus/tree-chart-core";
|
|
3
|
+
const R = (e) => typeof e == "number" ? `${e}px` : typeof e == "string" && e.indexOf("px") !== -1 ? e : `${e}px`, G = S({
|
|
4
|
+
name: "VueTree",
|
|
5
|
+
props: {
|
|
6
|
+
config: {
|
|
7
|
+
type: Object,
|
|
8
|
+
default: () => ({
|
|
9
|
+
nodeWidth: P,
|
|
10
|
+
nodeHeight: F,
|
|
11
|
+
levelHeight: w,
|
|
12
|
+
focusToNode: !1,
|
|
13
|
+
initiallyCollapsed: !1,
|
|
14
|
+
useMobileZoom: !1,
|
|
15
|
+
useMouseZoom: !1,
|
|
16
|
+
collapseDepth: 0
|
|
17
|
+
})
|
|
18
|
+
},
|
|
19
|
+
linkStyle: {
|
|
20
|
+
type: String,
|
|
21
|
+
default: U.CURVE
|
|
22
|
+
},
|
|
23
|
+
direction: {
|
|
24
|
+
type: String,
|
|
25
|
+
default: T.VERTICAL
|
|
26
|
+
},
|
|
27
|
+
collapseEnabled: {
|
|
28
|
+
type: Boolean,
|
|
29
|
+
default: !0
|
|
30
|
+
},
|
|
31
|
+
dataset: {
|
|
32
|
+
type: [Object, Array],
|
|
33
|
+
required: !0
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
setup(e) {
|
|
37
|
+
const r = d(null), i = d(null), s = d(null), o = d(null), u = d([]), n = d({}), v = () => {
|
|
38
|
+
!i.value || !s.value || !r.value || (o.value = new z({
|
|
39
|
+
svgElement: i.value,
|
|
40
|
+
domElement: s.value,
|
|
41
|
+
treeContainer: r.value,
|
|
42
|
+
dataset: e.dataset,
|
|
43
|
+
direction: e.direction,
|
|
44
|
+
treeConfig: e.config,
|
|
45
|
+
collapseEnabled: e.collapseEnabled,
|
|
46
|
+
linkStyle: e.linkStyle
|
|
47
|
+
}), o.value.init(), u.value = o.value.getNodeDataList(), n.value = o.value.getInitialTransformStyle());
|
|
48
|
+
}, y = () => {
|
|
49
|
+
var t;
|
|
50
|
+
return (t = o.value) == null ? void 0 : t.zoomIn();
|
|
51
|
+
}, C = () => {
|
|
52
|
+
var t;
|
|
53
|
+
return (t = o.value) == null ? void 0 : t.zoomOut();
|
|
54
|
+
}, E = () => {
|
|
55
|
+
var t;
|
|
56
|
+
return (t = o.value) == null ? void 0 : t.setScale(1);
|
|
57
|
+
}, L = (t, a) => {
|
|
58
|
+
var l, g;
|
|
59
|
+
(l = o.value) == null || l.expandNodeByLevelAndPosition(t, a), u.value = ((g = o.value) == null ? void 0 : g.getNodeDataList()) || [];
|
|
60
|
+
}, N = () => {
|
|
61
|
+
var t;
|
|
62
|
+
return (t = o.value) == null ? void 0 : t.restorePosition();
|
|
63
|
+
}, h = (t) => {
|
|
64
|
+
var a, l;
|
|
65
|
+
(a = o.value) == null || a.onClickNode(t), u.value = ((l = o.value) == null ? void 0 : l.getNodeDataList()) || [], e.config.focusToNode && p(t);
|
|
66
|
+
}, p = (t) => {
|
|
67
|
+
var a;
|
|
68
|
+
return (a = o.value) == null ? void 0 : a.focusToNode(t);
|
|
69
|
+
};
|
|
70
|
+
return k(() => {
|
|
71
|
+
v();
|
|
72
|
+
}), I(() => {
|
|
73
|
+
var t;
|
|
74
|
+
(t = o.value) == null || t.destroy();
|
|
75
|
+
}), _(
|
|
76
|
+
() => e.dataset,
|
|
77
|
+
(t) => {
|
|
78
|
+
var a, l;
|
|
79
|
+
(a = o.value) == null || a.updateDataset(t), u.value = ((l = o.value) == null ? void 0 : l.getNodeDataList()) || [];
|
|
80
|
+
},
|
|
81
|
+
{ deep: !0 }
|
|
82
|
+
), {
|
|
83
|
+
container: r,
|
|
84
|
+
svg: i,
|
|
85
|
+
domContainer: s,
|
|
86
|
+
nodeDataList: u,
|
|
87
|
+
initialTransformStyle: n,
|
|
88
|
+
formatDimension: R,
|
|
89
|
+
Direction: T,
|
|
90
|
+
zoomIn: y,
|
|
91
|
+
zoomOut: C,
|
|
92
|
+
restoreScale: E,
|
|
93
|
+
expandNodeByLevelAndPosition: L,
|
|
94
|
+
restorePosition: N,
|
|
95
|
+
onClickNode: h,
|
|
96
|
+
focusToNode: p
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
}), M = (e, r) => {
|
|
100
|
+
const i = e.__vccOpts || e;
|
|
101
|
+
for (const [s, o] of r)
|
|
102
|
+
i[s] = o;
|
|
103
|
+
return i;
|
|
104
|
+
}, W = {
|
|
105
|
+
class: "tree-container",
|
|
106
|
+
ref: "container"
|
|
107
|
+
}, j = ["onClick"];
|
|
108
|
+
function Z(e, r, i, s, o, u) {
|
|
109
|
+
return f(), c("div", W, [
|
|
110
|
+
(f(), c("svg", {
|
|
111
|
+
class: "svg vue-tree",
|
|
112
|
+
ref: "svg",
|
|
113
|
+
style: m(e.initialTransformStyle)
|
|
114
|
+
}, null, 4)),
|
|
115
|
+
D("div", {
|
|
116
|
+
class: "dom-container",
|
|
117
|
+
ref: "domContainer",
|
|
118
|
+
style: m(e.initialTransformStyle)
|
|
119
|
+
}, [
|
|
120
|
+
A(V, {
|
|
121
|
+
name: "tree-node-item",
|
|
122
|
+
tag: "div"
|
|
123
|
+
}, {
|
|
124
|
+
default: H(() => [
|
|
125
|
+
(f(!0), c(O, null, $(e.nodeDataList, (n, v) => (f(), c("div", {
|
|
126
|
+
class: "node-slot",
|
|
127
|
+
onClick: (y) => e.onClickNode(v),
|
|
128
|
+
key: n.data._key,
|
|
129
|
+
style: m({
|
|
130
|
+
left: e.formatDimension(
|
|
131
|
+
e.direction === e.Direction.VERTICAL ? n.x : n.y
|
|
132
|
+
),
|
|
133
|
+
top: e.formatDimension(
|
|
134
|
+
e.direction === e.Direction.VERTICAL ? n.y : n.x
|
|
135
|
+
),
|
|
136
|
+
width: e.formatDimension(e.config.nodeWidth),
|
|
137
|
+
height: e.formatDimension(e.config.nodeHeight)
|
|
138
|
+
})
|
|
139
|
+
}, [
|
|
140
|
+
b(e.$slots, "node", {
|
|
141
|
+
node: n.data,
|
|
142
|
+
collapsed: n.data._collapsed
|
|
143
|
+
}, () => [
|
|
144
|
+
D("span", null, B(n.data.value), 1)
|
|
145
|
+
], !0)
|
|
146
|
+
], 12, j))), 128))
|
|
147
|
+
]),
|
|
148
|
+
_: 3
|
|
149
|
+
})
|
|
150
|
+
], 4)
|
|
151
|
+
], 512);
|
|
152
|
+
}
|
|
153
|
+
const K = /* @__PURE__ */ M(G, [["render", Z], ["__scopeId", "data-v-c304c1c5"]]);
|
|
154
|
+
export {
|
|
155
|
+
K as default
|
|
156
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue"),require("@bencamus/tree-chart-core")):typeof define=="function"&&define.amd?define(["vue","@bencamus/tree-chart-core"],a):(e=typeof globalThis<"u"?globalThis:e||self,e.Vue3TreeChart=a(e.Vue,e.TreeChartCore))})(this,function(e,a){"use strict";const g=t=>typeof t=="number"?`${t}px`:typeof t=="string"&&t.indexOf("px")!==-1?t:`${t}px`,D=e.defineComponent({name:"VueTree",props:{config:{type:Object,default:()=>({nodeWidth:a.DEFAULT_NODE_WIDTH,nodeHeight:a.DEFAULT_NODE_HEIGHT,levelHeight:a.DEFAULT_LEVEL_HEIGHT,focusToNode:!1,initiallyCollapsed:!1,useMobileZoom:!1,useMouseZoom:!1,collapseDepth:0})},linkStyle:{type:String,default:a.TreeLinkStyle.CURVE},direction:{type:String,default:a.Direction.VERTICAL},collapseEnabled:{type:Boolean,default:!0},dataset:{type:[Object,Array],required:!0}},setup(t){const c=e.ref(null),s=e.ref(null),d=e.ref(null),n=e.ref(null),f=e.ref([]),l=e.ref({}),u=()=>{!s.value||!d.value||!c.value||(n.value=new a({svgElement:s.value,domElement:d.value,treeContainer:c.value,dataset:t.dataset,direction:t.direction,treeConfig:t.config,collapseEnabled:t.collapseEnabled,linkStyle:t.linkStyle}),n.value.init(),f.value=n.value.getNodeDataList(),l.value=n.value.getInitialTransformStyle())},m=()=>{var o;return(o=n.value)==null?void 0:o.zoomIn()},L=()=>{var o;return(o=n.value)==null?void 0:o.zoomOut()},N=()=>{var o;return(o=n.value)==null?void 0:o.setScale(1)},S=(o,i)=>{var r,y;(r=n.value)==null||r.expandNodeByLevelAndPosition(o,i),f.value=((y=n.value)==null?void 0:y.getNodeDataList())||[]},h=()=>{var o;return(o=n.value)==null?void 0:o.restorePosition()},V=o=>{var i,r;(i=n.value)==null||i.onClickNode(o),f.value=((r=n.value)==null?void 0:r.getNodeDataList())||[],t.config.focusToNode&&p(o)},p=o=>{var i;return(i=n.value)==null?void 0:i.focusToNode(o)};return e.onMounted(()=>{u()}),e.onBeforeUnmount(()=>{var o;(o=n.value)==null||o.destroy()}),e.watch(()=>t.dataset,o=>{var i,r;(i=n.value)==null||i.updateDataset(o),f.value=((r=n.value)==null?void 0:r.getNodeDataList())||[]},{deep:!0}),{container:c,svg:s,domContainer:d,nodeDataList:f,initialTransformStyle:l,formatDimension:g,Direction:a.Direction,zoomIn:m,zoomOut:L,restoreScale:N,expandNodeByLevelAndPosition:S,restorePosition:h,onClickNode:V,focusToNode:p}}}),E=(t,c)=>{const s=t.__vccOpts||t;for(const[d,n]of c)s[d]=n;return s},k={class:"tree-container",ref:"container"},T=["onClick"];function v(t,c,s,d,n,f){return e.openBlock(),e.createElementBlock("div",k,[(e.openBlock(),e.createElementBlock("svg",{class:"svg vue-tree",ref:"svg",style:e.normalizeStyle(t.initialTransformStyle)},null,4)),e.createElementVNode("div",{class:"dom-container",ref:"domContainer",style:e.normalizeStyle(t.initialTransformStyle)},[e.createVNode(e.TransitionGroup,{name:"tree-node-item",tag:"div"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.nodeDataList,(l,u)=>(e.openBlock(),e.createElementBlock("div",{class:"node-slot",onClick:m=>t.onClickNode(u),key:l.data._key,style:e.normalizeStyle({left:t.formatDimension(t.direction===t.Direction.VERTICAL?l.x:l.y),top:t.formatDimension(t.direction===t.Direction.VERTICAL?l.y:l.x),width:t.formatDimension(t.config.nodeWidth),height:t.formatDimension(t.config.nodeHeight)})},[e.renderSlot(t.$slots,"node",{node:l.data,collapsed:l.data._collapsed},()=>[e.createElementVNode("span",null,e.toDisplayString(l.data.value),1)],!0)],12,T))),128))]),_:3})],4)],512)}return E(D,[["render",v],["__scopeId","data-v-c304c1c5"]])});
|
package/package.json
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@bencamus/vue3-tree-chart",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"main": "dist/vue3-tree-chart.umd.js",
|
|
5
|
+
"module": "dist/vue3-tree-chart.esm.js",
|
|
6
|
+
"types": "dist/vue3-tree-chart.d.ts",
|
|
7
|
+
"files": ["dist"],
|
|
8
|
+
"scripts": {
|
|
9
|
+
"build": "vite build",
|
|
10
|
+
"prepublishOnly": "npm run build",
|
|
11
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
12
|
+
},
|
|
13
|
+
"devDependencies": {
|
|
14
|
+
"@vitejs/plugin-vue": "^5.2.1",
|
|
15
|
+
"@vue/tsconfig": "^0.7.0",
|
|
16
|
+
"typescript": "~5.7.2",
|
|
17
|
+
"vite": "^6.2.0",
|
|
18
|
+
"less": "^4.2.2",
|
|
19
|
+
"@types/node": "^20.0.0"
|
|
20
|
+
},
|
|
21
|
+
"peerDependencies": {
|
|
22
|
+
"vue": "^3.0.0",
|
|
23
|
+
"@bencamus/tree-chart-core": "^0.1.0"
|
|
24
|
+
},
|
|
25
|
+
"license": "MIT",
|
|
26
|
+
"description": "Vue 3 component for tree chart visualization."
|
|
27
|
+
}
|