Skip to content

Commit e75a80a

Browse files
geekhybridgeekhybrid
committed
Revert guide-line styling
1 parent ec75bdb commit e75a80a

File tree

3 files changed

+134
-194
lines changed

3 files changed

+134
-194
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue3-tree-vue",
3-
"version": "2.0.7",
3+
"version": "2.0.8",
44
"description": "",
55
"license": "MIT",
66
"repository": {

‎src/style.css

Lines changed: 132 additions & 192 deletions
Original file line numberDiff line numberDiff line change
@@ -1,205 +1,145 @@
11
.selected-tree-item {
2-
background: rgba(235, 106, 59, 0.795);
3-
color: white;
4-
}
2+
background: rgba(235, 106, 59, 0.795);
3+
color: white;
4+
}
5+
6+
.tree-item:hover .on-item-hover {
7+
display: block;
8+
}
9+
10+
.tree-item .on-item-hover {
11+
display: none;
12+
}
513

6-
.tree-item:hover .on-item-hover{
14+
.tree-item-node:hover li>.on-item-hover {
715
display: block;
816
}
917

10-
.tree-item .on-item-hover{
18+
19+
.tree-item-node li>.on-item-hover {
1120
display: none;
1221
}
1322

14-
.tree-item-node:hover li > .on-item-hover{
23+
24+
.tree-item {
25+
padding: 0.25em;
26+
}
27+
28+
ul {
29+
padding-left: 0;
30+
margin: 0;
31+
list-style-type: none;
32+
display: inline-block;
33+
}
34+
35+
li {
36+
border-radius: 4px;
37+
}
38+
39+
.tree-item__drag-over {
40+
background-color: rgba(22, 22, 22, 0.068) !important;
41+
}
42+
43+
44+
.root__drag-over {
45+
border-left: 6px solid #ccc !important;
46+
}
47+
48+
49+
.chevron-right {
50+
color: gray;
51+
}
52+
53+
.hide-chevron {
54+
visibility: collapse;
55+
}
56+
57+
.icon-area {
58+
width: 22px;
59+
margin-right: 0.4em;
60+
}
61+
62+
.guide-line {
63+
width: 1em;
64+
border-top: 1px dashed rgb(192, 192, 192);
65+
}
66+
67+
.node-name {
68+
cursor: pointer;
69+
margin-left: 5px;
70+
}
71+
72+
.d-flex {
73+
display: flex;
74+
align-items: center;
75+
}
76+
77+
.align-items-center {
78+
align-items: center;
79+
}
80+
81+
.nested {
82+
margin-left: 47px !important;
83+
}
84+
85+
.root {
86+
margin-left: 30px !important;
87+
}
88+
89+
.tiny_horizontal_margin {
90+
margin-left: 2px;
91+
margin-right: 2px;
92+
}
93+
94+
.tree-item__checkbox-area {
95+
display: flex;
96+
align-items: center;
97+
}
98+
99+
.node-child {
100+
text-align: left;
15101
display: block;
102+
border-left: 1px dashed rgb(192, 192, 192);
16103
}
17104

18-
.tree-item-node li > .on-item-hover{
105+
.hide {
19106
display: none;
20107
}
21-
22-
23-
.no-guide .tree-item-node {
24-
border: none !important;
25-
}
26-
.no-guide .tree-item-node::before {
27-
border: none !important;
28-
}
29-
30-
.no-guide .horizontal-dashes {
31-
border: none !important;
32-
}
33-
34-
.no-guide .horizontal-dashes::before {
35-
border: none !important;
36-
}
37-
38-
39-
40-
/**
41-
* Create Vertical Guideline
42-
* Add a dashed border to the left of all but the last child in a parent node.
43-
* There will be a gap between the bottom of this tree-item-node and the top of the next sibling.
44-
*/
45-
.node-child > .tree-item-node-parent .tree-item-node:not(:last-child) {
46-
position: relative;
47-
border-left: 1px dashed rgb(192, 192, 192);
48-
border-radius: 0;
49-
}
50-
51-
/**
52-
* Fill in gap on Vertical Guideline
53-
* use the ::before pseudo-element to create a dashed line that extends down to the next sibling.
54-
* This will be applied to all but the last child in a parent node, and fill in the gap mentioned above.
55-
*/
56-
.node-child > .tree-item-node-parent .tree-item-node:not(:last-child)::before {
57-
content: "";
58-
position: absolute;
59-
top: 100%; /* Extend below the actual element */
60-
left: -1px; /* Match the border-left width */
61-
height: 1em; /* Adjust the desired height */
62-
border-left: 1px dashed rgb(192, 192, 192);
63-
}
64-
65-
66-
.tree-item-node:only-child .tree-view-item{
67-
position: relative; /* Needed to position the ::before pseudo-element */
68-
}
69-
70-
/**
71-
* Create Vertical Guideline for only-children
72-
* Since we rely on the previous sibling to fill in the gap by extending down,
73-
* only-child elements will need to extend up to fill in the gap.
74-
*/
75-
.node-child > .tree-item-node-parent .tree-item-node:only-child > .tree-view-item > .horizontal-dashes::before {
76-
content: "";
77-
position: absolute;
78-
bottom: 50%; /* Extend above the actual element */
79-
left: -1px; /* Match the border-left width */
80-
height: 1em; /* Extend 20px above the element */
81-
border-left: 1px dashed rgb(192, 192, 192);
82-
}
83-
84-
85-
.tree-item {
86-
padding: 0.25em;
87-
}
88-
89-
ul {
90-
padding-left: 0;
91-
margin: 0;
92-
list-style-type: none;
93-
display: inline-block;
94-
}
95-
96-
li {
97-
border-radius: 4px;
98-
}
99-
100-
.tree-item__drag-over {
101-
background-color: rgba(22, 22, 22, 0.068) !important;
102-
}
103-
104-
105-
.root__drag-over {
106-
border-left: 6px solid #ccc !important;
107-
}
108-
109-
110-
.chevron-right {
111-
color: gray;
112-
}
113-
114-
.hide-chevron {
115-
visibility: collapse;
116-
}
117-
118-
.icon-area {
119-
width: 22px;
120-
margin-right: 0.4em;
121-
}
122-
123-
.horizontal-dashes {
124-
width: 1em;
125-
border-top: 1px dashed rgb(192, 192, 192);
126-
}
127-
128-
.node-name {
129-
cursor: pointer;
130-
margin-left: 5px;
131-
}
132-
133-
.d-flex {
134-
display: flex;
135-
align-items: center;
136-
}
137-
138-
.align-items-center {
139-
align-items: center;
140-
}
141-
142-
.nested {
143-
margin-left: 47px !important;
144-
}
145-
146-
.root {
147-
margin-left: 30px !important;
148-
}
149-
150-
.tiny_horizontal_margin {
151-
margin-left: 2px;
152-
margin-right: 2px;
153-
}
154-
155-
.tree-item__checkbox-area {
156-
display: flex;
157-
align-items: center;
158-
}
159-
160-
.node-child {
161-
text-align: left;
162-
display: block;
163-
}
164-
165-
.hide {
166-
display: none;
167-
}
168-
169-
.hide-guidelines {
170-
border-left: none !important;
171-
}
172-
173-
.chevron-right {
174-
box-sizing: border-box;
175-
position: relative;
176-
display: block;
177-
transform: scale(var(--ggs,1));
178-
width: 22px;
179-
height: 22px;
180-
border: 2px solid transparent;
181-
border-radius: 100px;
182-
transition: .2s;
183-
}
184-
185-
.pointer {
186-
cursor: pointer;
187-
}
188-
189-
.chevron-right.rotate-90::after {
190-
transform: rotateZ(45deg);
191-
}
192-
193-
.chevron-right::after {
194-
content: "";
195-
display: block;
196-
box-sizing: border-box;
197-
position: absolute;
198-
width: 7px;
199-
height: 7px;
200-
border-bottom: 2px solid;
201-
border-right: 2px solid;
202-
transform: rotate(-45deg);
203-
right: 6px;
204-
top: 5px
205-
}
108+
109+
.hide-guidelines {
110+
border-left: none !important;
111+
}
112+
113+
.chevron-right {
114+
box-sizing: border-box;
115+
position: relative;
116+
display: block;
117+
transform: scale(var(--ggs, 1));
118+
width: 22px;
119+
height: 22px;
120+
border: 2px solid transparent;
121+
border-radius: 100px;
122+
transition: .2s;
123+
}
124+
125+
.pointer {
126+
cursor: pointer;
127+
}
128+
129+
.chevron-right.rotate-90::after {
130+
transform: rotateZ(45deg);
131+
}
132+
133+
.chevron-right::after {
134+
content: "";
135+
display: block;
136+
box-sizing: border-box;
137+
position: absolute;
138+
width: 7px;
139+
height: 7px;
140+
border-bottom: 2px solid;
141+
border-right: 2px solid;
142+
transform: rotate(-45deg);
143+
right: 6px;
144+
top: 5px
145+
}

‎src/tree-item.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="d-flex align-items-center" @contextmenu.prevent="$emit('onContextMenu', { item, event: $event })">
3-
<div class="horizontal-dashes" v-if="parent != null && !hideGuideLines"></div>
3+
<div class="guide-line" v-if="parent != null && !hideGuideLines"></div>
44

55
<div @click="toggleExpand()" v-show="lazyLoad || item.children && item.children.length > 0">
66
<slot name="expander" v-bind="item">

0 commit comments

Comments
 (0)