nexa-ui-kit 0.11.3 → 0.11.4

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.
Files changed (4) hide show
  1. package/dist/components/NTreeMenu.js +28 -30
  2. package/dist/components/NTreeMenu.nexa +5 -7
  3. package/package.json +4 -4
  4. package/src/components/NTreeMenu.nexa +5 -7
package/dist/components/NTreeMenu.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { signal, computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
2
2
 
3
3
  const _sfc_main = defineComponent({
4
- __scopeId: 'data-v-30df3c1d',
4
+ __scopeId: 'data-v-774fdef2',
5
5
  __hmrId: 'NTreeMenu_nexa',
6
6
  props: {
7
7
  items: { type: Array, default: () => [] },
@@ -48,23 +48,23 @@ const _sfc_main = defineComponent({
48
48
  // Injected render function
49
49
  _sfc_main.render = function(ctx) {
50
50
  let { expanded, toggleExpand, selectItem, hasChildren, isExpanded, isSelected, flatTree, toggle, $slots, emit, items, selectable, selected, Fragment: _ntc_Fragment } = ctx
51
- return h('div', { class: "n-tree-menu", "data-v-30df3c1d": "" }, [
51
+ return h('div', { class: "n-tree-menu", "data-v-774fdef2": "" }, [
52
52
  "\n ",
53
53
  (flatTree.value).map((item, index) =>
54
- h('div', { class: ["n-tree-item", { 'is-selected': isSelected(item.id) }], key: item.id, style: { '--n-tree-depth': String(item._depth) }, "data-v-30df3c1d": "" }, [
54
+ h('div', { class: ["n-tree-item", { 'is-selected': isSelected(item.id) }], key: item.id, style: { '--n-tree-depth': String(item._depth) }, "data-v-774fdef2": "" }, [
55
55
  "\n ",
56
- h('div', { class: "n-tree-row", onClick: ($event) => { selectItem(item) }, "data-v-30df3c1d": "" }, [
56
+ h('div', { class: "n-tree-row", onClick: ($event) => { selectItem(item) }, "data-v-774fdef2": "" }, [
57
57
  "\n ",
58
- (hasChildren(item)) ? h('button', { class: ["n-tree-toggle", { 'is-expanded': isExpanded(item.id) }], onClick: ($event) => { toggle(item.id, $event) }, "data-v-30df3c1d": "" }, [
59
- h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-30df3c1d": "" }, [
60
- h('path', { d: "M12 5v14M5 12h14", "data-v-30df3c1d": "" })
58
+ (hasChildren(item)) ? h('button', { class: ["n-tree-toggle", { 'is-expanded': isExpanded(item.id) }], onClick: ($event) => { toggle(item.id, $event) }, "data-v-774fdef2": "" }, [
59
+ h('span', { class: "n-tree-toggle-icon", "data-v-774fdef2": "" }, [
60
+ isExpanded(item.id) ? '−' : '+'
61
61
  ])
62
- ]) : (true) ? h('span', { class: "n-tree-toggle-placeholder", "data-v-30df3c1d": "" }) : null,
62
+ ]) : (true) ? h('span', { class: "n-tree-toggle-placeholder", "data-v-774fdef2": "" }) : null,
63
63
  "\n ",
64
- (item.icon) ? h('span', { class: "n-tree-icon", "data-v-30df3c1d": "" }, [
64
+ (item.icon) ? h('span', { class: "n-tree-icon", "data-v-774fdef2": "" }, [
65
65
  item.icon
66
66
  ]) : null,
67
- h('span', { class: "n-tree-label", "data-v-30df3c1d": "" }, [
67
+ h('span', { class: "n-tree-label", "data-v-774fdef2": "" }, [
68
68
  item.label
69
69
  ]),
70
70
  "\n "
@@ -75,24 +75,24 @@ _sfc_main.render = function(ctx) {
75
75
  "\n "
76
76
  ])
77
77
  }
78
- _sfc_main.__scopeId = 'data-v-30df3c1d'
78
+ _sfc_main.__scopeId = 'data-v-774fdef2'
79
79
  _sfc_main.__hmrId = 'NTreeMenu_nexa'
80
80
 
81
81
  export default _sfc_main
82
82
 
83
- const __style = `.n-tree-menu[data-v-30df3c1d]{
83
+ const __style = `.n-tree-menu[data-v-774fdef2]{
84
84
  font-family: var(--n-font-sans);
85
85
  font-size: var(--n-text-sm);
86
86
  user-select: none;
87
87
  }
88
88
 
89
- .n-tree-item[data-v-30df3c1d]{
89
+ .n-tree-item[data-v-774fdef2]{
90
90
  --n-tree-depth: 0;
91
91
  position: relative;
92
92
  }
93
93
 
94
94
  /* Líneas conectoras verticales */
95
- .n-tree-item[data-v-30df3c1d]:not([style*="--n-tree-depth: 0"])::before{
95
+ .n-tree-item[data-v-774fdef2]:not([style*="--n-tree-depth: 0"])::before{
96
96
  content: '';
97
97
  position: absolute;
98
98
  left: calc(0.5rem + (var(--n-tree-depth, 0) - 1) * 1.25rem + 0.5rem);
@@ -103,7 +103,7 @@ const __style = `.n-tree-menu[data-v-30df3c1d]{
103
103
  opacity: 0.5;
104
104
  }
105
105
 
106
- .n-tree-row[data-v-30df3c1d]{
106
+ .n-tree-row[data-v-774fdef2]{
107
107
  display: flex;
108
108
  align-items: center;
109
109
  gap: 0.5rem;
@@ -117,7 +117,7 @@ const __style = `.n-tree-menu[data-v-30df3c1d]{
117
117
  }
118
118
 
119
119
  /* Línea conectora horizontal */
120
- .n-tree-item[data-v-30df3c1d]:not([style*="--n-tree-depth: 0"]) .n-tree-row::before{
120
+ .n-tree-item[data-v-774fdef2]:not([style*="--n-tree-depth: 0"]) .n-tree-row::before{
121
121
  content: '';
122
122
  position: absolute;
123
123
  left: calc(0.75rem + (var(--n-tree-depth, 0) - 1) * 1.25rem + 0.5rem);
@@ -128,17 +128,17 @@ const __style = `.n-tree-menu[data-v-30df3c1d]{
128
128
  opacity: 0.5;
129
129
  }
130
130
 
131
- .n-tree-row[data-v-30df3c1d]:hover{
131
+ .n-tree-row[data-v-774fdef2]:hover{
132
132
  background: var(--n-color-surface-hover);
133
133
  }
134
134
 
135
- .n-tree-item.is-selected > .n-tree-row[data-v-30df3c1d]{
135
+ .n-tree-item.is-selected > .n-tree-row[data-v-774fdef2]{
136
136
  background: var(--n-color-primary-light);
137
137
  color: var(--n-color-primary);
138
138
  font-weight: var(--n-weight-semibold);
139
139
  }
140
140
 
141
- .n-tree-toggle[data-v-30df3c1d]{
141
+ .n-tree-toggle[data-v-774fdef2]{
142
142
  background: var(--n-color-glass);
143
143
  border: 1px solid var(--n-color-border);
144
144
  border-radius: var(--n-radius-sm);
@@ -154,32 +154,30 @@ const __style = `.n-tree-menu[data-v-30df3c1d]{
154
154
  flex-shrink: 0;
155
155
  }
156
156
 
157
- .n-tree-toggle[data-v-30df3c1d]:hover{
157
+ .n-tree-toggle[data-v-774fdef2]:hover{
158
158
  background: var(--n-color-primary-light);
159
159
  border-color: var(--n-color-primary);
160
160
  color: var(--n-color-primary);
161
161
  }
162
162
 
163
- .n-tree-toggle svg[data-v-30df3c1d]{
164
- transition: transform var(--n-transition-fast);
163
+ .n-tree-toggle-icon[data-v-774fdef2]{
164
+ font-size: 1rem;
165
+ line-height: 1;
166
+ font-weight: 700;
165
167
  }
166
168
 
167
- .n-tree-toggle.is-expanded svg[data-v-30df3c1d]{
168
- transform: rotate(45deg);
169
- }
170
-
171
- .n-tree-toggle-placeholder[data-v-30df3c1d]{
169
+ .n-tree-toggle-placeholder[data-v-774fdef2]{
172
170
  width: 20px;
173
171
  height: 20px;
174
172
  flex-shrink: 0;
175
173
  }
176
174
 
177
- .n-tree-icon[data-v-30df3c1d]{
175
+ .n-tree-icon[data-v-774fdef2]{
178
176
  font-size: 1.1rem;
179
177
  flex-shrink: 0;
180
178
  }
181
179
 
182
- .n-tree-label[data-v-30df3c1d]{
180
+ .n-tree-label[data-v-774fdef2]{
183
181
  flex: 1;
184
182
  min-width: 0;
185
183
  overflow: hidden;
@@ -187,4 +185,4 @@ const __style = `.n-tree-menu[data-v-30df3c1d]{
187
185
  white-space: nowrap;
188
186
  font-weight: var(--n-weight-medium);
189
187
  }`
190
- injectStyle('data-v-30df3c1d', __style)
188
+ injectStyle('data-v-774fdef2', __style)
package/dist/components/NTreeMenu.nexa CHANGED
@@ -59,7 +59,7 @@ const toggle = (id, e) => {
59
59
  class="n-tree-toggle"
60
60
  :class="{ 'is-expanded': isExpanded(item.id) }"
61
61
  @click="toggle(item.id, $event)"
62
- ><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
62
+ ><span class="n-tree-toggle-icon">{{ isExpanded(item.id) ? '−' : '+' }}</span></button>
63
63
  <span v-else class="n-tree-toggle-placeholder"></span>
64
64
  <span v-if="item.icon" class="n-tree-icon">{{ item.icon }}</span>
65
65
  <span class="n-tree-label">{{ item.label }}</span>
@@ -149,12 +149,10 @@ const toggle = (id, e) => {
149
149
  color: var(--n-color-primary);
150
150
  }
151
151
 
152
- .n-tree-toggle svg {
153
- transition: transform var(--n-transition-fast);
154
- }
155
-
156
- .n-tree-toggle.is-expanded svg {
157
- transform: rotate(45deg);
152
+ .n-tree-toggle-icon {
153
+ font-size: 1rem;
154
+ line-height: 1;
155
+ font-weight: 700;
158
156
  }
159
157
 
160
158
  .n-tree-toggle-placeholder {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nexa-ui-kit",
3
- "version": "0.11.3",
3
+ "version": "0.11.4",
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.3",
26
- "nexa-mobile": "0.11.3"
25
+ "nexa-framework": "0.11.4",
26
+ "nexa-mobile": "0.11.4"
27
27
  },
28
28
  "devDependencies": {
29
29
  "cpx": "^1.5.0",
30
- "nexa-compiler": "0.11.3"
30
+ "nexa-compiler": "0.11.4"
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",
package/src/components/NTreeMenu.nexa CHANGED
@@ -59,7 +59,7 @@ const toggle = (id, e) => {
59
59
  class="n-tree-toggle"
60
60
  :class="{ 'is-expanded': isExpanded(item.id) }"
61
61
  @click="toggle(item.id, $event)"
62
- ><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
62
+ ><span class="n-tree-toggle-icon">{{ isExpanded(item.id) ? '−' : '+' }}</span></button>
63
63
  <span v-else class="n-tree-toggle-placeholder"></span>
64
64
  <span v-if="item.icon" class="n-tree-icon">{{ item.icon }}</span>
65
65
  <span class="n-tree-label">{{ item.label }}</span>
@@ -149,12 +149,10 @@ const toggle = (id, e) => {
149
149
  color: var(--n-color-primary);
150
150
  }
151
151
 
152
- .n-tree-toggle svg {
153
- transition: transform var(--n-transition-fast);
154
- }
155
-
156
- .n-tree-toggle.is-expanded svg {
157
- transform: rotate(45deg);
152
+ .n-tree-toggle-icon {
153
+ font-size: 1rem;
154
+ line-height: 1;
155
+ font-weight: 700;
158
156
  }
159
157
 
160
158
  .n-tree-toggle-placeholder {