nexa-ui-kit 0.11.2 → 0.11.3

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 +27 -27
  2. package/dist/components/NTreeMenu.nexa +2 -2
  3. package/package.json +4 -4
  4. package/src/components/NTreeMenu.nexa +2 -2
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-1dc3f956',
4
+ __scopeId: 'data-v-30df3c1d',
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-1dc3f956": "" }, [
51
+ return h('div', { class: "n-tree-menu", "data-v-30df3c1d": "" }, [
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-1dc3f956": "" }, [
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": "" }, [
55
55
  "\n ",
56
- h('div', { class: "n-tree-row", onClick: ($event) => { selectItem(item) }, "data-v-1dc3f956": "" }, [
56
+ h('div', { class: "n-tree-row", onClick: ($event) => { selectItem(item) }, "data-v-30df3c1d": "" }, [
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-1dc3f956": "" }, [
59
- h('svg', { viewBox: "0 0 24 24", width: "12", height: "12", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-1dc3f956": "" }, [
60
- h('path', { d: "M9 18l6-6-6-6", "data-v-1dc3f956": "" })
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": "" })
61
61
  ])
62
- ]) : (true) ? h('span', { class: "n-tree-toggle-placeholder", "data-v-1dc3f956": "" }) : null,
62
+ ]) : (true) ? h('span', { class: "n-tree-toggle-placeholder", "data-v-30df3c1d": "" }) : null,
63
63
  "\n ",
64
- (item.icon) ? h('span', { class: "n-tree-icon", "data-v-1dc3f956": "" }, [
64
+ (item.icon) ? h('span', { class: "n-tree-icon", "data-v-30df3c1d": "" }, [
65
65
  item.icon
66
66
  ]) : null,
67
- h('span', { class: "n-tree-label", "data-v-1dc3f956": "" }, [
67
+ h('span', { class: "n-tree-label", "data-v-30df3c1d": "" }, [
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-1dc3f956'
78
+ _sfc_main.__scopeId = 'data-v-30df3c1d'
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-1dc3f956]{
83
+ const __style = `.n-tree-menu[data-v-30df3c1d]{
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-1dc3f956]{
89
+ .n-tree-item[data-v-30df3c1d]{
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-1dc3f956]:not([style*="--n-tree-depth: 0"])::before{
95
+ .n-tree-item[data-v-30df3c1d]: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-1dc3f956]{
103
103
  opacity: 0.5;
104
104
  }
105
105
 
106
- .n-tree-row[data-v-1dc3f956]{
106
+ .n-tree-row[data-v-30df3c1d]{
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-1dc3f956]{
117
117
  }
118
118
 
119
119
  /* Línea conectora horizontal */
120
- .n-tree-item[data-v-1dc3f956]:not([style*="--n-tree-depth: 0"]) .n-tree-row::before{
120
+ .n-tree-item[data-v-30df3c1d]: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-1dc3f956]{
128
128
  opacity: 0.5;
129
129
  }
130
130
 
131
- .n-tree-row[data-v-1dc3f956]:hover{
131
+ .n-tree-row[data-v-30df3c1d]:hover{
132
132
  background: var(--n-color-surface-hover);
133
133
  }
134
134
 
135
- .n-tree-item.is-selected > .n-tree-row[data-v-1dc3f956]{
135
+ .n-tree-item.is-selected > .n-tree-row[data-v-30df3c1d]{
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-1dc3f956]{
141
+ .n-tree-toggle[data-v-30df3c1d]{
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,32 @@ const __style = `.n-tree-menu[data-v-1dc3f956]{
154
154
  flex-shrink: 0;
155
155
  }
156
156
 
157
- .n-tree-toggle[data-v-1dc3f956]:hover{
157
+ .n-tree-toggle[data-v-30df3c1d]: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-1dc3f956]{
163
+ .n-tree-toggle svg[data-v-30df3c1d]{
164
164
  transition: transform var(--n-transition-fast);
165
165
  }
166
166
 
167
- .n-tree-toggle.is-expanded svg[data-v-1dc3f956]{
168
- transform: rotate(90deg);
167
+ .n-tree-toggle.is-expanded svg[data-v-30df3c1d]{
168
+ transform: rotate(45deg);
169
169
  }
170
170
 
171
- .n-tree-toggle-placeholder[data-v-1dc3f956]{
171
+ .n-tree-toggle-placeholder[data-v-30df3c1d]{
172
172
  width: 20px;
173
173
  height: 20px;
174
174
  flex-shrink: 0;
175
175
  }
176
176
 
177
- .n-tree-icon[data-v-1dc3f956]{
177
+ .n-tree-icon[data-v-30df3c1d]{
178
178
  font-size: 1.1rem;
179
179
  flex-shrink: 0;
180
180
  }
181
181
 
182
- .n-tree-label[data-v-1dc3f956]{
182
+ .n-tree-label[data-v-30df3c1d]{
183
183
  flex: 1;
184
184
  min-width: 0;
185
185
  overflow: hidden;
@@ -187,4 +187,4 @@ const __style = `.n-tree-menu[data-v-1dc3f956]{
187
187
  white-space: nowrap;
188
188
  font-weight: var(--n-weight-medium);
189
189
  }`
190
- injectStyle('data-v-1dc3f956', __style)
190
+ injectStyle('data-v-30df3c1d', __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="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg></button>
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>
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>
@@ -154,7 +154,7 @@ const toggle = (id, e) => {
154
154
  }
155
155
 
156
156
  .n-tree-toggle.is-expanded svg {
157
- transform: rotate(90deg);
157
+ transform: rotate(45deg);
158
158
  }
159
159
 
160
160
  .n-tree-toggle-placeholder {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nexa-ui-kit",
3
- "version": "0.11.2",
3
+ "version": "0.11.3",
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.2",
26
- "nexa-mobile": "0.11.2"
25
+ "nexa-framework": "0.11.3",
26
+ "nexa-mobile": "0.11.3"
27
27
  },
28
28
  "devDependencies": {
29
29
  "cpx": "^1.5.0",
30
- "nexa-compiler": "0.11.2"
30
+ "nexa-compiler": "0.11.3"
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="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg></button>
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>
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>
@@ -154,7 +154,7 @@ const toggle = (id, e) => {
154
154
  }
155
155
 
156
156
  .n-tree-toggle.is-expanded svg {
157
- transform: rotate(90deg);
157
+ transform: rotate(45deg);
158
158
  }
159
159
 
160
160
  .n-tree-toggle-placeholder {