Skip to content

Commit 7e48b77

Browse files
megafetismegafetis
committed
add readme
1 parent 48e8841 commit 7e48b77

File tree

6 files changed

+344
-26
lines changed

6 files changed

+344
-26
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ __pycache__/
2424
.Python
2525
build/
2626
develop-eggs/
27-
dist/
27+
2828
downloads/
2929
eggs/
3030
.eggs/

‎README.md

+110-18
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,123 @@
1-
# Vue 3 webpack boilerplate
1+
# vue3-blocks-tree
22

3-
This is preview version Vue 3, DO NOT USE IN PRODUCTION!
3+
> A simple organization tree view based on Vue3.x
44
5-
## Includes
5+
## Usage
6+
```vue
67
7-
- Vue 3.0.0-beta.18
8-
- Vue Router 4.0.0-beta.1
9-
- Vuex 4.0.0-beta.4
10-
- Typescript 3.9.6
11-
- Babel 7.10.4
12-
- Webpack 4.43.0
8+
<template>
139
10+
</template>
11+
12+
<script>
13+
im
14+
15+
</script>
1416
15-
## Project setup
16-
```
17-
npm install
1817
```
18+
### NPM
1919

20-
### Compiles and hot-reloads for development
2120
```
22-
npm run serve
21+
# use npm
22+
npm i vue3-blocks-tree
23+
24+
# use yarn
25+
yarn add vue3-blocks-tree
2326
```
27+
### Import Plugins
28+
29+
``` js
30+
import {createApp} from 'vue';
31+
import VueBlocksTree from 'vue3-blocks-tree'
2432

25-
### Compiles and minifies for production
33+
createApp(App).component('blocks-tree',VueBlocksTree)
34+
35+
// ...
2636
```
27-
npm run build
37+
38+
### CDN
39+
40+
``` html
41+
# css
42+
<link href="https://unpkg.com/vue2-org-tree/dist/style.css">
43+
44+
# js
45+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
46+
<script src="https://unpkg.com/vue2-org-tree/dist/index.js"></script>
2847
```
2948

30-
### To Do
31-
- webpack 5
49+
50+
## API
51+
52+
#### props
53+
54+
prop | descripton | type | default
55+
------------------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
56+
data | | `Object` |
57+
props | configure props | `Object` | `{label: 'label', children: 'children', expand: 'expand'}`
58+
labelWidth | node label width | `String` \| `Number` | `auto`
59+
collapsable | children node is collapsable | `Boolean` | `true`
60+
renderContent | how to render node label | `Function` | -
61+
labelClassName | node label class | `Function` \| `String` | -
62+
63+
64+
65+
### events
66+
67+
event name | descripton | type
68+
------------------|-----------------------------------------|:----------------------
69+
node-click | Click event | `Function`
70+
node-mouseover | onMouseOver event | `Function`
71+
node-mouseout | onMouseOut event | `Function`
72+
node-expand | click expand button event | `Function`
73+
74+
### Slots
75+
76+
slot name | descripton | params
77+
------------------|-----------------------------------------|:----------------------
78+
node | current node scoped slot | data - node data, context - node context
79+
80+
#### node-expand
81+
well be called when the collapse-btn clicked
82+
83+
- params `e` `Event`
84+
- params `data` `Current node data`
85+
- params `context` `Node context`
86+
87+
#### node-click
88+
well be called when the node-label clicked
89+
90+
- params `e` `Event`
91+
- params `data` `Current node data`
92+
- params `context` `Node context`
93+
94+
#### node-mouseover
95+
It is called when the mouse hovers over the label.
96+
97+
- params `e` `Event`
98+
- params `data` `Current node data`
99+
- params `context` `Node context`
100+
101+
#### node-mouseout
102+
It is called when the mouse leaves the label.
103+
104+
- params `e` `Event`
105+
- params `data` `Current node data`
106+
107+
## Example
108+
109+
- default
110+
111+
![default](./images/default.png)
112+
113+
- horizontal
114+
115+
![horizontal](./images/horizontal.png)
116+
117+
- use node slot
118+
119+
![horizontal](./images/horizontal.png)
120+
121+
122+
## License
123+
[MIT](http://opensource.org/licenses/MIT)

‎dist/vue-blocks-tree.css

+225
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
.org-tree-container {
2+
display: inline-block;
3+
padding: 15px;
4+
background-color: #fff;
5+
}
6+
.org-tree {
7+
display: table;
8+
text-align: center;
9+
}
10+
.org-tree:before,
11+
.org-tree:after {
12+
content: '';
13+
display: table;
14+
}
15+
.org-tree:after {
16+
clear: both;
17+
}
18+
.org-tree-node,
19+
.org-tree-node-children {
20+
position: relative;
21+
margin: 0;
22+
padding: 0;
23+
list-style-type: none;
24+
}
25+
.org-tree-node:before,
26+
.org-tree-node-children:before,
27+
.org-tree-node:after,
28+
.org-tree-node-children:after {
29+
transition: all 0.35s;
30+
}
31+
.org-tree-node-label {
32+
position: relative;
33+
display: inline-block;
34+
}
35+
.org-tree-node-label .org-tree-node-label-inner {
36+
padding: 10px 15px;
37+
text-align: center;
38+
border-radius: 3px;
39+
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
40+
}
41+
.org-tree-node-btn {
42+
position: absolute;
43+
top: 100%;
44+
left: 50%;
45+
width: 20px;
46+
height: 20px;
47+
z-index: 10;
48+
margin-left: -11px;
49+
margin-top: 9px;
50+
background-color: #fff;
51+
border: 1px solid #ccc;
52+
border-radius: 50%;
53+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
54+
cursor: pointer;
55+
transition: all 0.35s ease;
56+
}
57+
.org-tree-node-btn:hover {
58+
background-color: #e7e8e9;
59+
transform: scale(1.15);
60+
}
61+
.org-tree-node-btn:before,
62+
.org-tree-node-btn:after {
63+
content: '';
64+
position: absolute;
65+
}
66+
.org-tree-node-btn:before {
67+
top: 50%;
68+
left: 4px;
69+
right: 4px;
70+
height: 0;
71+
border-top: 1px solid #ccc;
72+
}
73+
.org-tree-node-btn:after {
74+
top: 4px;
75+
left: 50%;
76+
bottom: 4px;
77+
width: 0;
78+
border-left: 1px solid #ccc;
79+
}
80+
.org-tree-node-btn.expanded:after {
81+
border: none;
82+
}
83+
.org-tree-node {
84+
padding-top: 20px;
85+
display: table-cell;
86+
vertical-align: top;
87+
}
88+
.org-tree-node.is-leaf,
89+
.org-tree-node.collapsed {
90+
padding-left: 10px;
91+
padding-right: 10px;
92+
}
93+
.org-tree-node:before,
94+
.org-tree-node:after {
95+
content: '';
96+
position: absolute;
97+
top: 0;
98+
left: 0;
99+
width: 50%;
100+
height: 19px;
101+
}
102+
.org-tree-node:after {
103+
left: 50%;
104+
border-left: 1px solid #ddd;
105+
}
106+
.org-tree-node:not(:first-child):before,
107+
.org-tree-node:not(:last-child):after {
108+
border-top: 1px solid #ddd;
109+
}
110+
.collapsable .org-tree-node.collapsed {
111+
padding-bottom: 30px;
112+
}
113+
.collapsable .org-tree-node.collapsed .org-tree-node-label:after {
114+
content: '';
115+
position: absolute;
116+
top: 100%;
117+
left: 0;
118+
width: 50%;
119+
height: 20px;
120+
border-right: 1px solid #ddd;
121+
}
122+
.org-tree > .org-tree-node {
123+
padding-top: 0;
124+
}
125+
.org-tree > .org-tree-node:after {
126+
border-left: 0;
127+
}
128+
.org-tree-node-children {
129+
padding-top: 20px;
130+
display: table;
131+
}
132+
.org-tree-node-children:before {
133+
content: '';
134+
position: absolute;
135+
top: 0;
136+
left: 50%;
137+
width: 0;
138+
height: 20px;
139+
border-left: 1px solid #ddd;
140+
}
141+
.org-tree-node-children:after {
142+
content: '';
143+
display: table;
144+
clear: both;
145+
}
146+
.horizontal .org-tree-node {
147+
display: table-cell;
148+
float: none;
149+
padding-top: 0;
150+
padding-left: 20px;
151+
}
152+
.horizontal .org-tree-node.is-leaf,
153+
.horizontal .org-tree-node.collapsed {
154+
padding-top: 10px;
155+
padding-bottom: 10px;
156+
}
157+
.horizontal .org-tree-node:before,
158+
.horizontal .org-tree-node:after {
159+
width: 19px;
160+
height: 50%;
161+
}
162+
.horizontal .org-tree-node:after {
163+
top: 50%;
164+
left: 0;
165+
border-left: 0;
166+
}
167+
.horizontal .org-tree-node:only-child:before {
168+
top: 1px;
169+
border-bottom: 1px solid #ddd;
170+
}
171+
.horizontal .org-tree-node:not(:first-child):before,
172+
.horizontal .org-tree-node:not(:last-child):after {
173+
border-top: 0;
174+
border-left: 1px solid #ddd;
175+
}
176+
.horizontal .org-tree-node:not(:only-child):after {
177+
border-top: 1px solid #ddd;
178+
}
179+
.horizontal .org-tree-node .org-tree-node-inner {
180+
display: table;
181+
}
182+
.horizontal .org-tree-node-label {
183+
display: table-cell;
184+
vertical-align: middle;
185+
}
186+
.horizontal.collapsable .org-tree-node.collapsed {
187+
padding-right: 30px;
188+
}
189+
.horizontal.collapsable .org-tree-node.collapsed .org-tree-node-label:after {
190+
top: 0;
191+
left: 100%;
192+
width: 20px;
193+
height: 50%;
194+
border-right: 0;
195+
border-bottom: 1px solid #ddd;
196+
}
197+
.horizontal .org-tree-node-btn {
198+
top: 50%;
199+
left: 100%;
200+
margin-top: -11px;
201+
margin-left: 9px;
202+
}
203+
.horizontal > .org-tree-node:only-child:before {
204+
border-bottom: 0;
205+
}
206+
.horizontal .org-tree-node-children {
207+
display: table-cell;
208+
padding-top: 0;
209+
padding-left: 20px;
210+
}
211+
.horizontal .org-tree-node-children:before {
212+
top: 50%;
213+
left: 0;
214+
width: 20px;
215+
height: 0;
216+
border-left: 0;
217+
border-top: 1px solid #ddd;
218+
}
219+
.horizontal .org-tree-node-children:after {
220+
display: none;
221+
}
222+
.horizontal .org-tree-node-children > .org-tree-node {
223+
display: block;
224+
}
225+

‎dist/vue-blocks-tree.umd.min.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/index.js renamed to ‎src/index.ts

File renamed without changes.

0 commit comments

Comments
 (0)