nexa-ui-kit 0.7.4 → 0.7.5

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/NInputNumber.js +43 -14
  2. package/dist/components/NInputNumber.nexa +36 -3
  3. package/package.json +4 -4
  4. package/src/components/NInputNumber.nexa +36 -3
package/dist/components/NInputNumber.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { signal, computed, inject, effect, batch, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
2
2
 
3
3
  const _sfc_main = defineComponent({
4
- __scopeId: 'data-v-6dd313',
4
+ __scopeId: 'data-v-76a3e703',
5
5
  __hmrId: 'NInputNumber_nexa',
6
6
  props: {
7
7
  modelValue: { type: Number, default: 0 },
@@ -12,7 +12,9 @@ const _sfc_main = defineComponent({
12
12
  disabled: { type: Boolean, default: false },
13
13
  readonly: { type: Boolean, default: false },
14
14
  label: { type: String, default: '' },
15
- placeholder: { type: String, default: '' }
15
+ placeholder: { type: String, default: '' },
16
+ currency: { type: String, default: undefined },
17
+ locale: { type: String, default: undefined },
16
18
  },
17
19
  emits: ['update:modelValue', 'focus', 'blur'],
18
20
  setup(props, setupContext) {
@@ -38,6 +40,29 @@ const _sfc_main = defineComponent({
38
40
  text.value = nextText
39
41
  })
40
42
  const canEdit = computed(() => !effectiveDisabled.value && !props.readonly)
43
+ const isFocused = signal(false)
44
+ const nfSignal = signal(null)
45
+ effect(() => {
46
+ if (props.currency) {
47
+ nfSignal.value = new Intl.NumberFormat(props.locale || undefined, {
48
+ style: 'currency',
49
+ currency: props.currency,
50
+ minimumFractionDigits: 2,
51
+ maximumFractionDigits: 2,
52
+ })
53
+ } else {
54
+ nfSignal.value = null
55
+ }
56
+ })
57
+ const displayText = computed(() => {
58
+ const raw = text.value
59
+ const nf = nfSignal.value
60
+ if (!nf || isFocused.value) return raw
61
+ if (!raw) return raw
62
+ const n = parseFloat(raw)
63
+ if (Number.isNaN(n)) return raw
64
+ return nf.format(n)
65
+ })
41
66
  const sanitize = (raw) => {
42
67
  const input = String(raw ?? '')
43
68
  if (!input) return ''
@@ -153,6 +178,7 @@ const _sfc_main = defineComponent({
153
178
  const onBlur = () => {
154
179
  emit('blur')
155
180
  if (props.bindField && field?.onBlur) field.onBlur()
181
+ isFocused.value = false
156
182
  const n = parse(text.value)
157
183
  const clamped = clamp(n)
158
184
  if (clamped == null) {
@@ -165,27 +191,30 @@ const _sfc_main = defineComponent({
165
191
  else emit('update:modelValue', clamped)
166
192
  })
167
193
  }
168
- const onFocus = () => emit('focus')
169
- return { field, effectiveValue, effectiveDisabled, text, canEdit, sanitize, clamp, parse, setValue, inc, dec, onInput, onBeforeInput, onPaste, onKeydown, onBlur, onFocus, inject, batch, $slots, emit }
194
+ const onFocus = () => {
195
+ isFocused.value = true
196
+ emit('focus')
197
+ }
198
+ return { field, effectiveValue, effectiveDisabled, text, canEdit, isFocused, nfSignal, displayText, sanitize, clamp, parse, setValue, inc, dec, onInput, onBeforeInput, onPaste, onKeydown, onBlur, onFocus, inject, batch, $slots, emit }
170
199
  }
171
200
  })
172
201
  // Injected render function
173
202
  _sfc_main.render = function(ctx) {
174
- const { field, effectiveValue, effectiveDisabled, text, canEdit, sanitize, clamp, parse, setValue, inc, dec, onInput, onBeforeInput, onPaste, onKeydown, onBlur, onFocus, inject, batch, $slots, emit, modelValue, min, max, step, bindField, disabled, readonly, label, placeholder, Fragment: _ntc_Fragment } = ctx
175
- return h('div', { class: "n-inum", "data-v-6dd313": "" }, [
203
+ const { field, effectiveValue, effectiveDisabled, text, canEdit, isFocused, nfSignal, displayText, sanitize, clamp, parse, setValue, inc, dec, onInput, onBeforeInput, onPaste, onKeydown, onBlur, onFocus, inject, batch, $slots, emit, modelValue, min, max, step, bindField, disabled, readonly, label, placeholder, currency, locale, Fragment: _ntc_Fragment } = ctx
204
+ return h('div', { class: "n-inum", "data-v-76a3e703": "" }, [
176
205
  "\n ",
177
- (label) ? h('label', { class: "n-inum-label", "data-v-6dd313": "" }, [
206
+ (label) ? h('label', { class: "n-inum-label", "data-v-76a3e703": "" }, [
178
207
  label
179
208
  ]) : null,
180
- h('div', { class: ["n-inum-wrap", { 'is-disabled': effectiveDisabled.value }], "data-v-6dd313": "" }, [
209
+ h('div', { class: ["n-inum-wrap", { 'is-disabled': effectiveDisabled.value }], "data-v-76a3e703": "" }, [
181
210
  "\n ",
182
- h('button', { class: "n-inum-btn n-inum-dec", type: "button", disabled: effectiveDisabled.value || readonly, "aria-label": "Decrement", onClick: dec, "data-v-6dd313": "" }, [
211
+ h('button', { class: "n-inum-btn n-inum-dec", type: "button", disabled: effectiveDisabled.value || readonly, "aria-label": "Decrement", onClick: dec, "data-v-76a3e703": "" }, [
183
212
  "−"
184
213
  ]),
185
214
  "\n ",
186
- h('input', { class: "n-inum-input", type: "text", value: text.value, placeholder: placeholder, disabled: effectiveDisabled.value, readonly: readonly, inputmode: "decimal", autocomplete: "off", onBeforeinput: onBeforeInput, onKeydown: onKeydown, onPaste: onPaste, onInput: onInput, onFocus: onFocus, onBlur: onBlur, "data-v-6dd313": "" }),
215
+ h('input', { class: "n-inum-input", type: "text", value: displayText.value, placeholder: placeholder, disabled: effectiveDisabled.value, readonly: readonly, inputmode: "decimal", autocomplete: "off", onBeforeinput: onBeforeInput, onKeydown: onKeydown, onPaste: onPaste, onInput: onInput, onFocus: onFocus, onBlur: onBlur, "data-v-76a3e703": "" }),
187
216
  "\n ",
188
- h('button', { class: "n-inum-btn n-inum-inc", type: "button", disabled: effectiveDisabled.value || readonly, "aria-label": "Increment", onClick: inc, "data-v-6dd313": "" }, [
217
+ h('button', { class: "n-inum-btn n-inum-inc", type: "button", disabled: effectiveDisabled.value || readonly, "aria-label": "Increment", onClick: inc, "data-v-76a3e703": "" }, [
189
218
  "+"
190
219
  ]),
191
220
  "\n "
@@ -193,10 +222,10 @@ _sfc_main.render = function(ctx) {
193
222
  "\n "
194
223
  ])
195
224
  }
196
- _sfc_main.__scopeId = 'data-v-6dd313'
225
+ _sfc_main.__scopeId = 'data-v-76a3e703'
197
226
  _sfc_main.__hmrId = 'NInputNumber_nexa'
198
227
 
199
228
  export default _sfc_main
200
229
 
201
- const __style = `.n-inum[data-v-6dd313]{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-inum-label{display:block;font-size:var(--n-text-sm);font-weight:var(--n-weight-medium);color:var(--n-color-text-secondary);margin-bottom:var(--n-space-2)}.n-inum-wrap{display:flex;align-items:stretch;min-height:44px;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);overflow:hidden;transition:all var(--n-transition-fast)}.n-inum-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-inum-input{flex:1;background:transparent;border:none;outline:none;padding:0.75rem 0.75rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit;text-align:center;line-height:1.2;box-sizing:border-box}.n-inum-btn{width:2.5rem;background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--n-text-base);transition:all var(--n-transition-fast)}.n-inum-btn:hover:not(:disabled){background:var(--n-color-glass);color:var(--n-color-text)}.n-inum-btn:disabled{opacity:0.5;cursor:not-allowed}.is-disabled{opacity:0.6;cursor:not-allowed;background:var(--n-color-surface-alt)}`
202
- injectStyle('data-v-6dd313', __style)
230
+ const __style = `.n-inum[data-v-76a3e703]{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-inum-label{display:block;font-size:var(--n-text-sm);font-weight:var(--n-weight-medium);color:var(--n-color-text-secondary);margin-bottom:var(--n-space-2)}.n-inum-wrap{display:flex;align-items:stretch;min-height:44px;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);overflow:hidden;transition:all var(--n-transition-fast)}.n-inum-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-inum-input{flex:1;background:transparent;border:none;outline:none;padding:0.75rem 0.75rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit;text-align:center;line-height:1.2;box-sizing:border-box}.n-inum-btn{width:2.5rem;background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--n-text-base);transition:all var(--n-transition-fast)}.n-inum-btn:hover:not(:disabled){background:var(--n-color-glass);color:var(--n-color-text)}.n-inum-btn:disabled{opacity:0.5;cursor:not-allowed}.is-disabled{opacity:0.6;cursor:not-allowed;background:var(--n-color-surface-alt)}`
231
+ injectStyle('data-v-76a3e703', __style)
package/dist/components/NInputNumber.nexa CHANGED
@@ -10,7 +10,9 @@ const props = defineProps({
10
10
  disabled: { type: Boolean, default: false },
11
11
  readonly: { type: Boolean, default: false },
12
12
  label: { type: String, default: '' },
13
- placeholder: { type: String, default: '' }
13
+ placeholder: { type: String, default: '' },
14
+ currency: { type: String, default: undefined },
15
+ locale: { type: String, default: undefined },
14
16
  })
15
17
 
16
18
  const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
@@ -42,6 +44,33 @@ effect(() => {
42
44
 
43
45
  const canEdit = computed(() => !effectiveDisabled.value && !props.readonly)
44
46
 
47
+ const isFocused = signal(false)
48
+
49
+ const nfSignal = signal(null)
50
+
51
+ effect(() => {
52
+ if (props.currency) {
53
+ nfSignal.value = new Intl.NumberFormat(props.locale || undefined, {
54
+ style: 'currency',
55
+ currency: props.currency,
56
+ minimumFractionDigits: 2,
57
+ maximumFractionDigits: 2,
58
+ })
59
+ } else {
60
+ nfSignal.value = null
61
+ }
62
+ })
63
+
64
+ const displayText = computed(() => {
65
+ const raw = text.value
66
+ const nf = nfSignal.value
67
+ if (!nf || isFocused.value) return raw
68
+ if (!raw) return raw
69
+ const n = parseFloat(raw)
70
+ if (Number.isNaN(n)) return raw
71
+ return nf.format(n)
72
+ })
73
+
45
74
  const sanitize = (raw) => {
46
75
  const input = String(raw ?? '')
47
76
  if (!input) return ''
@@ -167,6 +196,7 @@ const onKeydown = (e) => {
167
196
  const onBlur = () => {
168
197
  emit('blur')
169
198
  if (props.bindField && field?.onBlur) field.onBlur()
199
+ isFocused.value = false
170
200
  const n = parse(text.value)
171
201
  const clamped = clamp(n)
172
202
  if (clamped == null) {
@@ -180,7 +210,10 @@ const onBlur = () => {
180
210
  })
181
211
  }
182
212
 
183
- const onFocus = () => emit('focus')
213
+ const onFocus = () => {
214
+ isFocused.value = true
215
+ emit('focus')
216
+ }
184
217
  </script>
185
218
 
186
219
  <template>
@@ -188,7 +221,7 @@ const onFocus = () => emit('focus')
188
221
  <label v-if="label" class="n-inum-label">{{ label }}</label>
189
222
  <div class="n-inum-wrap" :class="{ 'is-disabled': effectiveDisabled.value }">
190
223
  <button type="button" class="n-inum-btn n-inum-dec" :disabled="effectiveDisabled.value || readonly" aria-label="Decrement" @click="dec">−</button>
191
- <input class="n-inum-input" type="text" :value="text.value" :placeholder="placeholder" :disabled="effectiveDisabled.value" :readonly="readonly" inputmode="decimal" autocomplete="off" @beforeinput="onBeforeInput" @keydown="onKeydown" @paste="onPaste" @input="onInput" @focus="onFocus" @blur="onBlur" />
224
+ <input class="n-inum-input" type="text" :value="displayText.value" :placeholder="placeholder" :disabled="effectiveDisabled.value" :readonly="readonly" inputmode="decimal" autocomplete="off" @beforeinput="onBeforeInput" @keydown="onKeydown" @paste="onPaste" @input="onInput" @focus="onFocus" @blur="onBlur" />
192
225
  <button type="button" class="n-inum-btn n-inum-inc" :disabled="effectiveDisabled.value || readonly" aria-label="Increment" @click="inc">+</button>
193
226
  </div>
194
227
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nexa-ui-kit",
3
- "version": "0.7.4",
3
+ "version": "0.7.5",
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.7.4",
26
- "nexa-mobile": "0.7.4"
25
+ "nexa-framework": "0.7.5",
26
+ "nexa-mobile": "0.7.5"
27
27
  },
28
28
  "devDependencies": {
29
29
  "cpx": "^1.5.0",
30
- "nexa-compiler": "0.7.4"
30
+ "nexa-compiler": "0.7.5"
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/NInputNumber.nexa CHANGED
@@ -10,7 +10,9 @@ const props = defineProps({
10
10
  disabled: { type: Boolean, default: false },
11
11
  readonly: { type: Boolean, default: false },
12
12
  label: { type: String, default: '' },
13
- placeholder: { type: String, default: '' }
13
+ placeholder: { type: String, default: '' },
14
+ currency: { type: String, default: undefined },
15
+ locale: { type: String, default: undefined },
14
16
  })
15
17
 
16
18
  const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
@@ -42,6 +44,33 @@ effect(() => {
42
44
 
43
45
  const canEdit = computed(() => !effectiveDisabled.value && !props.readonly)
44
46
 
47
+ const isFocused = signal(false)
48
+
49
+ const nfSignal = signal(null)
50
+
51
+ effect(() => {
52
+ if (props.currency) {
53
+ nfSignal.value = new Intl.NumberFormat(props.locale || undefined, {
54
+ style: 'currency',
55
+ currency: props.currency,
56
+ minimumFractionDigits: 2,
57
+ maximumFractionDigits: 2,
58
+ })
59
+ } else {
60
+ nfSignal.value = null
61
+ }
62
+ })
63
+
64
+ const displayText = computed(() => {
65
+ const raw = text.value
66
+ const nf = nfSignal.value
67
+ if (!nf || isFocused.value) return raw
68
+ if (!raw) return raw
69
+ const n = parseFloat(raw)
70
+ if (Number.isNaN(n)) return raw
71
+ return nf.format(n)
72
+ })
73
+
45
74
  const sanitize = (raw) => {
46
75
  const input = String(raw ?? '')
47
76
  if (!input) return ''
@@ -167,6 +196,7 @@ const onKeydown = (e) => {
167
196
  const onBlur = () => {
168
197
  emit('blur')
169
198
  if (props.bindField && field?.onBlur) field.onBlur()
199
+ isFocused.value = false
170
200
  const n = parse(text.value)
171
201
  const clamped = clamp(n)
172
202
  if (clamped == null) {
@@ -180,7 +210,10 @@ const onBlur = () => {
180
210
  })
181
211
  }
182
212
 
183
- const onFocus = () => emit('focus')
213
+ const onFocus = () => {
214
+ isFocused.value = true
215
+ emit('focus')
216
+ }
184
217
  </script>
185
218
 
186
219
  <template>
@@ -188,7 +221,7 @@ const onFocus = () => emit('focus')
188
221
  <label v-if="label" class="n-inum-label">{{ label }}</label>
189
222
  <div class="n-inum-wrap" :class="{ 'is-disabled': effectiveDisabled.value }">
190
223
  <button type="button" class="n-inum-btn n-inum-dec" :disabled="effectiveDisabled.value || readonly" aria-label="Decrement" @click="dec">−</button>
191
- <input class="n-inum-input" type="text" :value="text.value" :placeholder="placeholder" :disabled="effectiveDisabled.value" :readonly="readonly" inputmode="decimal" autocomplete="off" @beforeinput="onBeforeInput" @keydown="onKeydown" @paste="onPaste" @input="onInput" @focus="onFocus" @blur="onBlur" />
224
+ <input class="n-inum-input" type="text" :value="displayText.value" :placeholder="placeholder" :disabled="effectiveDisabled.value" :readonly="readonly" inputmode="decimal" autocomplete="off" @beforeinput="onBeforeInput" @keydown="onKeydown" @paste="onPaste" @input="onInput" @focus="onFocus" @blur="onBlur" />
192
225
  <button type="button" class="n-inum-btn n-inum-inc" :disabled="effectiveDisabled.value || readonly" aria-label="Increment" @click="inc">+</button>
193
226
  </div>
194
227
  </div>