nexa-ui-kit 0.11.0 → 0.11.1
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.
- package/dist/components/NTreeMenu.js +51 -14
- package/dist/components/NTreeMenu.nexa +51 -14
- package/package.json +4 -4
- package/src/components/NTreeMenu.nexa +51 -14
|
@@ -88,18 +88,44 @@ const __style = `.n-tree-menu[data-v-1dc3f956]{
|
|
|
88
88
|
|
|
89
89
|
.n-tree-item[data-v-1dc3f956]{
|
|
90
90
|
--n-tree-depth: 0;
|
|
91
|
+
position: relative;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Líneas conectoras verticales */
|
|
95
|
+
.n-tree-item[data-v-1dc3f956]:not([style*="--n-tree-depth: 0"])::before{
|
|
96
|
+
content: '';
|
|
97
|
+
position: absolute;
|
|
98
|
+
left: calc(0.5rem + (var(--n-tree-depth, 0) - 1) * 1.25rem + 0.5rem);
|
|
99
|
+
top: 0;
|
|
100
|
+
bottom: 0;
|
|
101
|
+
width: 1px;
|
|
102
|
+
background: var(--n-color-border);
|
|
103
|
+
opacity: 0.5;
|
|
91
104
|
}
|
|
92
105
|
|
|
93
106
|
.n-tree-row[data-v-1dc3f956]{
|
|
94
107
|
display: flex;
|
|
95
108
|
align-items: center;
|
|
96
|
-
gap: 0.
|
|
97
|
-
padding: 0.
|
|
98
|
-
padding-left: calc(0.
|
|
109
|
+
gap: 0.5rem;
|
|
110
|
+
padding: 0.5rem 0.75rem;
|
|
111
|
+
padding-left: calc(0.75rem + var(--n-tree-depth, 0) * 1.25rem);
|
|
99
112
|
border-radius: var(--n-radius-sm);
|
|
100
113
|
cursor: pointer;
|
|
101
114
|
transition: all var(--n-transition-fast);
|
|
102
115
|
color: var(--n-color-text);
|
|
116
|
+
position: relative;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* Línea conectora horizontal */
|
|
120
|
+
.n-tree-item[data-v-1dc3f956]:not([style*="--n-tree-depth: 0"]) .n-tree-row::before{
|
|
121
|
+
content: '';
|
|
122
|
+
position: absolute;
|
|
123
|
+
left: calc(0.75rem + (var(--n-tree-depth, 0) - 1) * 1.25rem + 0.5rem);
|
|
124
|
+
top: 50%;
|
|
125
|
+
width: 0.75rem;
|
|
126
|
+
height: 1px;
|
|
127
|
+
background: var(--n-color-border);
|
|
128
|
+
opacity: 0.5;
|
|
103
129
|
}
|
|
104
130
|
|
|
105
131
|
.n-tree-row[data-v-1dc3f956]:hover{
|
|
@@ -113,33 +139,43 @@ const __style = `.n-tree-menu[data-v-1dc3f956]{
|
|
|
113
139
|
}
|
|
114
140
|
|
|
115
141
|
.n-tree-toggle[data-v-1dc3f956]{
|
|
116
|
-
background:
|
|
117
|
-
border:
|
|
118
|
-
|
|
142
|
+
background: var(--n-color-glass);
|
|
143
|
+
border: 1px solid var(--n-color-border);
|
|
144
|
+
border-radius: var(--n-radius-sm);
|
|
145
|
+
color: var(--n-color-text-secondary);
|
|
119
146
|
cursor: pointer;
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
height: 16px;
|
|
147
|
+
width: 20px;
|
|
148
|
+
height: 20px;
|
|
123
149
|
display: flex;
|
|
124
150
|
align-items: center;
|
|
125
151
|
justify-content: center;
|
|
126
152
|
padding: 0;
|
|
127
|
-
transition:
|
|
153
|
+
transition: all var(--n-transition-fast);
|
|
128
154
|
flex-shrink: 0;
|
|
129
155
|
}
|
|
130
156
|
|
|
131
|
-
.n-tree-toggle
|
|
157
|
+
.n-tree-toggle[data-v-1dc3f956]:hover{
|
|
158
|
+
background: var(--n-color-primary-light);
|
|
159
|
+
border-color: var(--n-color-primary);
|
|
160
|
+
color: var(--n-color-primary);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.n-tree-toggle svg[data-v-1dc3f956]{
|
|
164
|
+
transition: transform var(--n-transition-fast);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.n-tree-toggle.is-expanded svg[data-v-1dc3f956]{
|
|
132
168
|
transform: rotate(90deg);
|
|
133
169
|
}
|
|
134
170
|
|
|
135
171
|
.n-tree-toggle-placeholder[data-v-1dc3f956]{
|
|
136
|
-
width:
|
|
137
|
-
height:
|
|
172
|
+
width: 20px;
|
|
173
|
+
height: 20px;
|
|
138
174
|
flex-shrink: 0;
|
|
139
175
|
}
|
|
140
176
|
|
|
141
177
|
.n-tree-icon[data-v-1dc3f956]{
|
|
142
|
-
font-size: 1rem;
|
|
178
|
+
font-size: 1.1rem;
|
|
143
179
|
flex-shrink: 0;
|
|
144
180
|
}
|
|
145
181
|
|
|
@@ -149,5 +185,6 @@ const __style = `.n-tree-menu[data-v-1dc3f956]{
|
|
|
149
185
|
overflow: hidden;
|
|
150
186
|
text-overflow: ellipsis;
|
|
151
187
|
white-space: nowrap;
|
|
188
|
+
font-weight: var(--n-weight-medium);
|
|
152
189
|
}`
|
|
153
190
|
injectStyle('data-v-1dc3f956', __style)
|
|
@@ -77,18 +77,44 @@ const toggle = (id, e) => {
|
|
|
77
77
|
|
|
78
78
|
.n-tree-item {
|
|
79
79
|
--n-tree-depth: 0;
|
|
80
|
+
position: relative;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Líneas conectoras verticales */
|
|
84
|
+
.n-tree-item:not([style*="--n-tree-depth: 0"])::before {
|
|
85
|
+
content: '';
|
|
86
|
+
position: absolute;
|
|
87
|
+
left: calc(0.5rem + (var(--n-tree-depth, 0) - 1) * 1.25rem + 0.5rem);
|
|
88
|
+
top: 0;
|
|
89
|
+
bottom: 0;
|
|
90
|
+
width: 1px;
|
|
91
|
+
background: var(--n-color-border);
|
|
92
|
+
opacity: 0.5;
|
|
80
93
|
}
|
|
81
94
|
|
|
82
95
|
.n-tree-row {
|
|
83
96
|
display: flex;
|
|
84
97
|
align-items: center;
|
|
85
|
-
gap: 0.
|
|
86
|
-
padding: 0.
|
|
87
|
-
padding-left: calc(0.
|
|
98
|
+
gap: 0.5rem;
|
|
99
|
+
padding: 0.5rem 0.75rem;
|
|
100
|
+
padding-left: calc(0.75rem + var(--n-tree-depth, 0) * 1.25rem);
|
|
88
101
|
border-radius: var(--n-radius-sm);
|
|
89
102
|
cursor: pointer;
|
|
90
103
|
transition: all var(--n-transition-fast);
|
|
91
104
|
color: var(--n-color-text);
|
|
105
|
+
position: relative;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Línea conectora horizontal */
|
|
109
|
+
.n-tree-item:not([style*="--n-tree-depth: 0"]) .n-tree-row::before {
|
|
110
|
+
content: '';
|
|
111
|
+
position: absolute;
|
|
112
|
+
left: calc(0.75rem + (var(--n-tree-depth, 0) - 1) * 1.25rem + 0.5rem);
|
|
113
|
+
top: 50%;
|
|
114
|
+
width: 0.75rem;
|
|
115
|
+
height: 1px;
|
|
116
|
+
background: var(--n-color-border);
|
|
117
|
+
opacity: 0.5;
|
|
92
118
|
}
|
|
93
119
|
|
|
94
120
|
.n-tree-row:hover {
|
|
@@ -102,33 +128,43 @@ const toggle = (id, e) => {
|
|
|
102
128
|
}
|
|
103
129
|
|
|
104
130
|
.n-tree-toggle {
|
|
105
|
-
background:
|
|
106
|
-
border:
|
|
107
|
-
|
|
131
|
+
background: var(--n-color-glass);
|
|
132
|
+
border: 1px solid var(--n-color-border);
|
|
133
|
+
border-radius: var(--n-radius-sm);
|
|
134
|
+
color: var(--n-color-text-secondary);
|
|
108
135
|
cursor: pointer;
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
height: 16px;
|
|
136
|
+
width: 20px;
|
|
137
|
+
height: 20px;
|
|
112
138
|
display: flex;
|
|
113
139
|
align-items: center;
|
|
114
140
|
justify-content: center;
|
|
115
141
|
padding: 0;
|
|
116
|
-
transition:
|
|
142
|
+
transition: all var(--n-transition-fast);
|
|
117
143
|
flex-shrink: 0;
|
|
118
144
|
}
|
|
119
145
|
|
|
120
|
-
.n-tree-toggle
|
|
146
|
+
.n-tree-toggle:hover {
|
|
147
|
+
background: var(--n-color-primary-light);
|
|
148
|
+
border-color: var(--n-color-primary);
|
|
149
|
+
color: var(--n-color-primary);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.n-tree-toggle svg {
|
|
153
|
+
transition: transform var(--n-transition-fast);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.n-tree-toggle.is-expanded svg {
|
|
121
157
|
transform: rotate(90deg);
|
|
122
158
|
}
|
|
123
159
|
|
|
124
160
|
.n-tree-toggle-placeholder {
|
|
125
|
-
width:
|
|
126
|
-
height:
|
|
161
|
+
width: 20px;
|
|
162
|
+
height: 20px;
|
|
127
163
|
flex-shrink: 0;
|
|
128
164
|
}
|
|
129
165
|
|
|
130
166
|
.n-tree-icon {
|
|
131
|
-
font-size: 1rem;
|
|
167
|
+
font-size: 1.1rem;
|
|
132
168
|
flex-shrink: 0;
|
|
133
169
|
}
|
|
134
170
|
|
|
@@ -138,5 +174,6 @@ const toggle = (id, e) => {
|
|
|
138
174
|
overflow: hidden;
|
|
139
175
|
text-overflow: ellipsis;
|
|
140
176
|
white-space: nowrap;
|
|
177
|
+
font-weight: var(--n-weight-medium);
|
|
141
178
|
}
|
|
142
179
|
</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nexa-ui-kit",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.1",
|
|
4
4
|
"description": "Premium component library for Nexa Framework",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -22,12 +22,12 @@
|
|
|
22
22
|
"src"
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"nexa-framework": "0.11.
|
|
26
|
-
"nexa-mobile": "0.11.
|
|
25
|
+
"nexa-framework": "0.11.1",
|
|
26
|
+
"nexa-mobile": "0.11.1"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"cpx": "^1.5.0",
|
|
30
|
-
"nexa-compiler": "0.11.
|
|
30
|
+
"nexa-compiler": "0.11.1"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
33
|
"build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist && cpx \"src/styles/*.css\" dist/styles",
|
|
@@ -77,18 +77,44 @@ const toggle = (id, e) => {
|
|
|
77
77
|
|
|
78
78
|
.n-tree-item {
|
|
79
79
|
--n-tree-depth: 0;
|
|
80
|
+
position: relative;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Líneas conectoras verticales */
|
|
84
|
+
.n-tree-item:not([style*="--n-tree-depth: 0"])::before {
|
|
85
|
+
content: '';
|
|
86
|
+
position: absolute;
|
|
87
|
+
left: calc(0.5rem + (var(--n-tree-depth, 0) - 1) * 1.25rem + 0.5rem);
|
|
88
|
+
top: 0;
|
|
89
|
+
bottom: 0;
|
|
90
|
+
width: 1px;
|
|
91
|
+
background: var(--n-color-border);
|
|
92
|
+
opacity: 0.5;
|
|
80
93
|
}
|
|
81
94
|
|
|
82
95
|
.n-tree-row {
|
|
83
96
|
display: flex;
|
|
84
97
|
align-items: center;
|
|
85
|
-
gap: 0.
|
|
86
|
-
padding: 0.
|
|
87
|
-
padding-left: calc(0.
|
|
98
|
+
gap: 0.5rem;
|
|
99
|
+
padding: 0.5rem 0.75rem;
|
|
100
|
+
padding-left: calc(0.75rem + var(--n-tree-depth, 0) * 1.25rem);
|
|
88
101
|
border-radius: var(--n-radius-sm);
|
|
89
102
|
cursor: pointer;
|
|
90
103
|
transition: all var(--n-transition-fast);
|
|
91
104
|
color: var(--n-color-text);
|
|
105
|
+
position: relative;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Línea conectora horizontal */
|
|
109
|
+
.n-tree-item:not([style*="--n-tree-depth: 0"]) .n-tree-row::before {
|
|
110
|
+
content: '';
|
|
111
|
+
position: absolute;
|
|
112
|
+
left: calc(0.75rem + (var(--n-tree-depth, 0) - 1) * 1.25rem + 0.5rem);
|
|
113
|
+
top: 50%;
|
|
114
|
+
width: 0.75rem;
|
|
115
|
+
height: 1px;
|
|
116
|
+
background: var(--n-color-border);
|
|
117
|
+
opacity: 0.5;
|
|
92
118
|
}
|
|
93
119
|
|
|
94
120
|
.n-tree-row:hover {
|
|
@@ -102,33 +128,43 @@ const toggle = (id, e) => {
|
|
|
102
128
|
}
|
|
103
129
|
|
|
104
130
|
.n-tree-toggle {
|
|
105
|
-
background:
|
|
106
|
-
border:
|
|
107
|
-
|
|
131
|
+
background: var(--n-color-glass);
|
|
132
|
+
border: 1px solid var(--n-color-border);
|
|
133
|
+
border-radius: var(--n-radius-sm);
|
|
134
|
+
color: var(--n-color-text-secondary);
|
|
108
135
|
cursor: pointer;
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
height: 16px;
|
|
136
|
+
width: 20px;
|
|
137
|
+
height: 20px;
|
|
112
138
|
display: flex;
|
|
113
139
|
align-items: center;
|
|
114
140
|
justify-content: center;
|
|
115
141
|
padding: 0;
|
|
116
|
-
transition:
|
|
142
|
+
transition: all var(--n-transition-fast);
|
|
117
143
|
flex-shrink: 0;
|
|
118
144
|
}
|
|
119
145
|
|
|
120
|
-
.n-tree-toggle
|
|
146
|
+
.n-tree-toggle:hover {
|
|
147
|
+
background: var(--n-color-primary-light);
|
|
148
|
+
border-color: var(--n-color-primary);
|
|
149
|
+
color: var(--n-color-primary);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.n-tree-toggle svg {
|
|
153
|
+
transition: transform var(--n-transition-fast);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.n-tree-toggle.is-expanded svg {
|
|
121
157
|
transform: rotate(90deg);
|
|
122
158
|
}
|
|
123
159
|
|
|
124
160
|
.n-tree-toggle-placeholder {
|
|
125
|
-
width:
|
|
126
|
-
height:
|
|
161
|
+
width: 20px;
|
|
162
|
+
height: 20px;
|
|
127
163
|
flex-shrink: 0;
|
|
128
164
|
}
|
|
129
165
|
|
|
130
166
|
.n-tree-icon {
|
|
131
|
-
font-size: 1rem;
|
|
167
|
+
font-size: 1.1rem;
|
|
132
168
|
flex-shrink: 0;
|
|
133
169
|
}
|
|
134
170
|
|
|
@@ -138,5 +174,6 @@ const toggle = (id, e) => {
|
|
|
138
174
|
overflow: hidden;
|
|
139
175
|
text-overflow: ellipsis;
|
|
140
176
|
white-space: nowrap;
|
|
177
|
+
font-weight: var(--n-weight-medium);
|
|
141
178
|
}
|
|
142
179
|
</style>
|