nexa-ui-kit 0.11.9 → 0.11.10

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 (7) hide show
  1. package/dist/components/NInput.js +32 -32
  2. package/dist/components/NInput.nexa +1 -1
  3. package/dist/components/NSelect.js +11 -27
  4. package/dist/components/NSelect.nexa +11 -27
  5. package/package.json +4 -4
  6. package/src/components/NInput.nexa +1 -1
  7. package/src/components/NSelect.nexa +11 -27
package/dist/components/NInput.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-58540fa7',
4
+ __scopeId: 'data-v-32b2b2b6',
5
5
  __hmrId: 'NInput_nexa',
6
6
  props: {
7
7
  modelValue: { type: [String, Number], default: '' },
@@ -41,66 +41,66 @@ const _sfc_main = defineComponent({
41
41
  // Injected render function
42
42
  _sfc_main.render = function(ctx) {
43
43
  let { isFocused, handleInput, handleFocus, handleBlur, handleClear, $slots, emit, modelValue, type, placeholder, label, error, disabled, readonly, required, clearable, prefix, suffix, Fragment: _ntc_Fragment } = ctx
44
- return h('div', { class: ["n-input-wrapper", { 'is-focused': isFocused, 'is-error': error, 'is-disabled': disabled }], "data-v-58540fa7": "" }, [
44
+ return h('div', { class: ["n-input-wrapper", { 'is-focused': isFocused.value, 'is-error': error, 'is-disabled': disabled }], "data-v-32b2b2b6": "" }, [
45
45
  "\n ",
46
- (label) ? h('label', { class: "n-input-label", "data-v-58540fa7": "" }, [
46
+ (label) ? h('label', { class: "n-input-label", "data-v-32b2b2b6": "" }, [
47
47
  "\n ",
48
48
  label,
49
49
  "\n ",
50
- (required) ? h('span', { class: "n-input-required", "data-v-58540fa7": "" }, [
50
+ (required) ? h('span', { class: "n-input-required", "data-v-32b2b2b6": "" }, [
51
51
  "*"
52
52
  ]) : null
53
53
  ]) : null,
54
- h('div', { class: "n-input-container", "data-v-58540fa7": "" }, [
54
+ h('div', { class: "n-input-container", "data-v-32b2b2b6": "" }, [
55
55
  "\n ",
56
- (prefix) ? h('span', { class: "n-input-prefix", "data-v-58540fa7": "" }, [
56
+ (prefix) ? h('span', { class: "n-input-prefix", "data-v-32b2b2b6": "" }, [
57
57
  prefix
58
58
  ]) : null,
59
- h('input', { class: "n-input", type: type, value: modelValue, placeholder: placeholder, disabled: disabled, readonly: readonly, required: required, onInput: handleInput, onFocus: handleFocus, onBlur: handleBlur, "data-v-58540fa7": "" }),
59
+ h('input', { class: "n-input", type: type, value: modelValue, placeholder: placeholder, disabled: disabled, readonly: readonly, required: required, onInput: handleInput, onFocus: handleFocus, onBlur: handleBlur, "data-v-32b2b2b6": "" }),
60
60
  "\n ",
61
- (clearable && modelValue) ? h('button', { class: "n-input-clear", onClick: handleClear, type: "button", "data-v-58540fa7": "" }, [
61
+ (clearable && modelValue) ? h('button', { class: "n-input-clear", onClick: handleClear, type: "button", "data-v-32b2b2b6": "" }, [
62
62
  "\n ",
63
- h('svg', { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "data-v-58540fa7": "" }, [
63
+ h('svg', { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "data-v-32b2b2b6": "" }, [
64
64
  "\n ",
65
- h('line', { x1: "18", y1: "6", x2: "6", y2: "18", "data-v-58540fa7": "" }),
65
+ h('line', { x1: "18", y1: "6", x2: "6", y2: "18", "data-v-32b2b2b6": "" }),
66
66
  "\n ",
67
- h('line', { x1: "6", y1: "6", x2: "18", y2: "18", "data-v-58540fa7": "" }),
67
+ h('line', { x1: "6", y1: "6", x2: "18", y2: "18", "data-v-32b2b2b6": "" }),
68
68
  "\n "
69
69
  ]),
70
70
  "\n "
71
71
  ]) : null,
72
- (suffix) ? h('span', { class: "n-input-suffix", "data-v-58540fa7": "" }, [
72
+ (suffix) ? h('span', { class: "n-input-suffix", "data-v-32b2b2b6": "" }, [
73
73
  suffix
74
74
  ]) : null
75
75
  ]),
76
76
  "\n ",
77
- (error) ? h('span', { class: "n-input-error", "data-v-58540fa7": "" }, [
77
+ (error) ? h('span', { class: "n-input-error", "data-v-32b2b2b6": "" }, [
78
78
  error
79
79
  ]) : null
80
80
  ])
81
81
  }
82
- _sfc_main.__scopeId = 'data-v-58540fa7'
82
+ _sfc_main.__scopeId = 'data-v-32b2b2b6'
83
83
  _sfc_main.__hmrId = 'NInput_nexa'
84
84
 
85
85
  export default _sfc_main
86
86
 
87
- const __style = `.n-input-wrapper[data-v-58540fa7]{
87
+ const __style = `.n-input-wrapper[data-v-32b2b2b6]{
88
88
  display: flex;
89
89
  flex-direction: column;
90
90
  gap: 0.5rem;
91
91
  width: 100%;
92
92
  }
93
- .n-input-label[data-v-58540fa7]{
93
+ .n-input-label[data-v-32b2b2b6]{
94
94
  font-size: 0.875rem;
95
95
  font-weight: 500;
96
96
  color: var(--n-color-text);
97
97
  letter-spacing: normal;
98
98
  }
99
- .n-input-required[data-v-58540fa7]{
99
+ .n-input-required[data-v-32b2b2b6]{
100
100
  color: var(--n-color-danger);
101
101
  margin-left: 0.25rem;
102
102
  }
103
- .n-input-container[data-v-58540fa7]{
103
+ .n-input-container[data-v-32b2b2b6]{
104
104
  position: relative;
105
105
  display: flex;
106
106
  align-items: center;
@@ -109,25 +109,25 @@ const __style = `.n-input-wrapper[data-v-58540fa7]{
109
109
  border-radius: var(--n-radius-md);
110
110
  transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), color var(--n-transition-fast), box-shadow var(--n-transition-fast);
111
111
  }
112
- .n-input-container[data-v-58540fa7]:hover{
112
+ .n-input-container[data-v-32b2b2b6]:hover{
113
113
  border-color: var(--n-color-border-hover);
114
114
  }
115
- .is-focused .n-input-container[data-v-58540fa7]{
115
+ .is-focused .n-input-container[data-v-32b2b2b6]{
116
116
  border-color: var(--n-color-primary);
117
117
  box-shadow: var(--n-ring-primary);
118
118
  }
119
- .is-error .n-input-container[data-v-58540fa7]{
119
+ .is-error .n-input-container[data-v-32b2b2b6]{
120
120
  border-color: var(--n-color-danger);
121
121
  }
122
- .is-error.is-focused .n-input-container[data-v-58540fa7]{
122
+ .is-error.is-focused .n-input-container[data-v-32b2b2b6]{
123
123
  box-shadow: var(--n-ring-danger);
124
124
  }
125
- .is-disabled .n-input-container[data-v-58540fa7]{
125
+ .is-disabled .n-input-container[data-v-32b2b2b6]{
126
126
  opacity: 0.6;
127
127
  cursor: not-allowed;
128
128
  background-color: var(--n-color-surface-alt);
129
129
  }
130
- .n-input[data-v-58540fa7]{
130
+ .n-input[data-v-32b2b2b6]{
131
131
  flex: 1;
132
132
  background: transparent;
133
133
  border: none;
@@ -138,20 +138,20 @@ const __style = `.n-input-wrapper[data-v-58540fa7]{
138
138
  font-family: inherit;
139
139
  width: 100%;
140
140
  }
141
- .n-input[data-v-58540fa7]::placeholder{
141
+ .n-input[data-v-32b2b2b6]::placeholder{
142
142
  color: var(--n-color-text-muted);
143
143
  }
144
- .n-input[data-v-58540fa7]:disabled{
144
+ .n-input[data-v-32b2b2b6]:disabled{
145
145
  cursor: not-allowed;
146
146
  }
147
- .n-input-prefix[data-v-58540fa7],
148
- .n-input-suffix[data-v-58540fa7]{
147
+ .n-input-prefix[data-v-32b2b2b6],
148
+ .n-input-suffix[data-v-32b2b2b6]{
149
149
  padding: 0 0.75rem;
150
150
  color: var(--n-color-text-muted);
151
151
  font-size: 0.875rem;
152
152
  user-select: none;
153
153
  }
154
- .n-input-clear[data-v-58540fa7]{
154
+ .n-input-clear[data-v-32b2b2b6]{
155
155
  background: transparent;
156
156
  border: none;
157
157
  cursor: pointer;
@@ -162,14 +162,14 @@ const __style = `.n-input-wrapper[data-v-58540fa7]{
162
162
  align-items: center;
163
163
  justify-content: center;
164
164
  }
165
- .n-input-clear[data-v-58540fa7]:hover{
165
+ .n-input-clear[data-v-32b2b2b6]:hover{
166
166
  color: var(--n-color-text);
167
167
  }
168
- .n-input-error[data-v-58540fa7]{
168
+ .n-input-error[data-v-32b2b2b6]{
169
169
  font-size: 0.75rem;
170
170
  color: var(--n-color-danger);
171
171
  display: flex;
172
172
  align-items: center;
173
173
  gap: 0.25rem;
174
174
  }`
175
- injectStyle('data-v-58540fa7', __style)
175
+ injectStyle('data-v-32b2b2b6', __style)
package/dist/components/NInput.nexa CHANGED
@@ -40,7 +40,7 @@ const handleClear = () => {
40
40
  </script>
41
41
 
42
42
  <template>
43
- <div class="n-input-wrapper" :class="{ 'is-focused': isFocused, 'is-error': error, 'is-disabled': disabled }">
43
+ <div class="n-input-wrapper" :class="{ 'is-focused': isFocused.value, 'is-error': error, 'is-disabled': disabled }">
44
44
  <label v-if="label" class="n-input-label">
45
45
  {{ label }}
46
46
  <span v-if="required" class="n-input-required">*</span>
package/dist/components/NSelect.js CHANGED
@@ -388,22 +388,24 @@ from[data-v-2dd8d436]{ opacity: 0; transform: scale(0.98); }
388
388
  to[data-v-2dd8d436]{ opacity: 1; transform: scale(1); }
389
389
  }
390
390
  .n-select-search[data-v-2dd8d436]{
391
- padding: var(--n-space-2);
391
+ padding: 0.5rem;
392
392
  border-bottom: 1px solid var(--n-color-border);
393
+ background: var(--n-color-surface);
393
394
  }
394
395
  .n-select-search-input[data-v-2dd8d436]{
395
396
  width: 100%;
396
- background: var(--n-color-bg);
397
+ background: var(--n-color-surface);
397
398
  border: 1px solid var(--n-color-border);
398
399
  border-radius: var(--n-radius-sm);
399
- padding: var(--n-space-2) var(--n-space-3);
400
+ padding: 0.4rem 0.6rem;
400
401
  color: var(--n-color-text);
401
402
  font-size: var(--n-text-sm);
402
403
  outline: none;
403
- font-family: inherit;
404
+ transition: border-color var(--n-transition-fast), box-shadow var(--n-transition-fast);
404
405
  }
405
406
  .n-select-search-input[data-v-2dd8d436]:focus{
406
407
  border-color: var(--n-color-primary);
408
+ box-shadow: 0 0 0 1px var(--n-color-primary);
407
409
  }
408
410
  .n-select-options[data-v-2dd8d436]{
409
411
  max-height: 250px;
@@ -419,35 +421,17 @@ to[data-v-2dd8d436]{ opacity: 1; transform: scale(1); }
419
421
  background: var(--n-color-bg);
420
422
  }
421
423
  .n-select-option[data-v-2dd8d436]{
422
- padding: 0.7rem 1rem;
423
- padding-left: 1rem;
424
+ padding: 0.6rem 1rem;
424
425
  color: var(--n-color-text-secondary);
425
426
  cursor: pointer;
426
- transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), color var(--n-transition-fast), box-shadow var(--n-transition-fast);
427
- letter-spacing: 0.01em;
428
- position: relative;
429
- }
430
- .n-select-option[data-v-2dd8d436]::before{
431
- content: '';
432
- position: absolute;
433
- left: 0;
434
- top: 50%;
435
- scaleY(0);
436
- width: 3px;
437
- height: 50%;
438
- background: var(--n-color-primary);
439
- border-radius: 0 3px 3px 0;
440
- transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
441
- }
442
- .n-select-option[data-v-2dd8d436]:hover::before,
443
- .n-select-option.is-focused[data-v-2dd8d436]::before{
444
- scaleY(1);
427
+ transition: background-color var(--n-transition-fast), color var(--n-transition-fast);
428
+ border-radius: var(--n-radius-sm);
429
+ margin: 0.15rem 0.35rem;
445
430
  }
446
431
  .n-select-option[data-v-2dd8d436]:hover,
447
432
  .n-select-option.is-focused[data-v-2dd8d436]{
448
- background: var(--n-color-glass);
433
+ background: var(--n-color-surface-hover);
449
434
  color: var(--n-color-text);
450
- padding-left: 1.25rem;
451
435
  }
452
436
  .n-select-option.is-selected[data-v-2dd8d436]{
453
437
  background: var(--n-color-primary-light);
package/dist/components/NSelect.nexa CHANGED
@@ -367,22 +367,24 @@ onBeforeUnmount(() => {
367
367
  to { opacity: 1; transform: scale(1); }
368
368
  }
369
369
  .n-select-search {
370
- padding: var(--n-space-2);
370
+ padding: 0.5rem;
371
371
  border-bottom: 1px solid var(--n-color-border);
372
+ background: var(--n-color-surface);
372
373
  }
373
374
  .n-select-search-input {
374
375
  width: 100%;
375
- background: var(--n-color-bg);
376
+ background: var(--n-color-surface);
376
377
  border: 1px solid var(--n-color-border);
377
378
  border-radius: var(--n-radius-sm);
378
- padding: var(--n-space-2) var(--n-space-3);
379
+ padding: 0.4rem 0.6rem;
379
380
  color: var(--n-color-text);
380
381
  font-size: var(--n-text-sm);
381
382
  outline: none;
382
- font-family: inherit;
383
+ transition: border-color var(--n-transition-fast), box-shadow var(--n-transition-fast);
383
384
  }
384
385
  .n-select-search-input:focus {
385
386
  border-color: var(--n-color-primary);
387
+ box-shadow: 0 0 0 1px var(--n-color-primary);
386
388
  }
387
389
  .n-select-options {
388
390
  max-height: 250px;
@@ -398,35 +400,17 @@ onBeforeUnmount(() => {
398
400
  background: var(--n-color-bg);
399
401
  }
400
402
  .n-select-option {
401
- padding: 0.7rem 1rem;
402
- padding-left: 1rem;
403
+ padding: 0.6rem 1rem;
403
404
  color: var(--n-color-text-secondary);
404
405
  cursor: pointer;
405
- transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), color var(--n-transition-fast), box-shadow var(--n-transition-fast);
406
- letter-spacing: 0.01em;
407
- position: relative;
408
- }
409
- .n-select-option::before {
410
- content: '';
411
- position: absolute;
412
- left: 0;
413
- top: 50%;
414
- scaleY(0);
415
- width: 3px;
416
- height: 50%;
417
- background: var(--n-color-primary);
418
- border-radius: 0 3px 3px 0;
419
- transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
420
- }
421
- .n-select-option:hover::before,
422
- .n-select-option.is-focused::before {
423
- scaleY(1);
406
+ transition: background-color var(--n-transition-fast), color var(--n-transition-fast);
407
+ border-radius: var(--n-radius-sm);
408
+ margin: 0.15rem 0.35rem;
424
409
  }
425
410
  .n-select-option:hover,
426
411
  .n-select-option.is-focused {
427
- background: var(--n-color-glass);
412
+ background: var(--n-color-surface-hover);
428
413
  color: var(--n-color-text);
429
- padding-left: 1.25rem;
430
414
  }
431
415
  .n-select-option.is-selected {
432
416
  background: var(--n-color-primary-light);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nexa-ui-kit",
3
- "version": "0.11.9",
3
+ "version": "0.11.10",
4
4
  "description": "Premium component library for Nexa Framework",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -22,11 +22,11 @@
22
22
  "src"
23
23
  ],
24
24
  "dependencies": {
25
- "nexa-framework": "^0.11.9",
26
- "nexa-mobile": "^0.11.9"
25
+ "nexa-framework": "^0.11.10",
26
+ "nexa-mobile": "^0.11.10"
27
27
  },
28
28
  "devDependencies": {
29
- "nexa-compiler": "^0.11.9",
29
+ "nexa-compiler": "^0.11.10",
30
30
  "cpx": "^1.5.0"
31
31
  },
32
32
  "scripts": {
package/src/components/NInput.nexa CHANGED
@@ -40,7 +40,7 @@ const handleClear = () => {
40
40
  </script>
41
41
 
42
42
  <template>
43
- <div class="n-input-wrapper" :class="{ 'is-focused': isFocused, 'is-error': error, 'is-disabled': disabled }">
43
+ <div class="n-input-wrapper" :class="{ 'is-focused': isFocused.value, 'is-error': error, 'is-disabled': disabled }">
44
44
  <label v-if="label" class="n-input-label">
45
45
  {{ label }}
46
46
  <span v-if="required" class="n-input-required">*</span>
package/src/components/NSelect.nexa CHANGED
@@ -367,22 +367,24 @@ onBeforeUnmount(() => {
367
367
  to { opacity: 1; transform: scale(1); }
368
368
  }
369
369
  .n-select-search {
370
- padding: var(--n-space-2);
370
+ padding: 0.5rem;
371
371
  border-bottom: 1px solid var(--n-color-border);
372
+ background: var(--n-color-surface);
372
373
  }
373
374
  .n-select-search-input {
374
375
  width: 100%;
375
- background: var(--n-color-bg);
376
+ background: var(--n-color-surface);
376
377
  border: 1px solid var(--n-color-border);
377
378
  border-radius: var(--n-radius-sm);
378
- padding: var(--n-space-2) var(--n-space-3);
379
+ padding: 0.4rem 0.6rem;
379
380
  color: var(--n-color-text);
380
381
  font-size: var(--n-text-sm);
381
382
  outline: none;
382
- font-family: inherit;
383
+ transition: border-color var(--n-transition-fast), box-shadow var(--n-transition-fast);
383
384
  }
384
385
  .n-select-search-input:focus {
385
386
  border-color: var(--n-color-primary);
387
+ box-shadow: 0 0 0 1px var(--n-color-primary);
386
388
  }
387
389
  .n-select-options {
388
390
  max-height: 250px;
@@ -398,35 +400,17 @@ onBeforeUnmount(() => {
398
400
  background: var(--n-color-bg);
399
401
  }
400
402
  .n-select-option {
401
- padding: 0.7rem 1rem;
402
- padding-left: 1rem;
403
+ padding: 0.6rem 1rem;
403
404
  color: var(--n-color-text-secondary);
404
405
  cursor: pointer;
405
- transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), color var(--n-transition-fast), box-shadow var(--n-transition-fast);
406
- letter-spacing: 0.01em;
407
- position: relative;
408
- }
409
- .n-select-option::before {
410
- content: '';
411
- position: absolute;
412
- left: 0;
413
- top: 50%;
414
- scaleY(0);
415
- width: 3px;
416
- height: 50%;
417
- background: var(--n-color-primary);
418
- border-radius: 0 3px 3px 0;
419
- transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
420
- }
421
- .n-select-option:hover::before,
422
- .n-select-option.is-focused::before {
423
- scaleY(1);
406
+ transition: background-color var(--n-transition-fast), color var(--n-transition-fast);
407
+ border-radius: var(--n-radius-sm);
408
+ margin: 0.15rem 0.35rem;
424
409
  }
425
410
  .n-select-option:hover,
426
411
  .n-select-option.is-focused {
427
- background: var(--n-color-glass);
412
+ background: var(--n-color-surface-hover);
428
413
  color: var(--n-color-text);
429
- padding-left: 1.25rem;
430
414
  }
431
415
  .n-select-option.is-selected {
432
416
  background: var(--n-color-primary-light);