nexa-ui-kit 0.7.10 → 0.8.0

package/src/components/NInputNumber.nexa

@@ -1,232 +1,232 @@
-<script setup>
-import { signal, computed, inject, effect, batch } from 'nexa-framework'
-
-const props = defineProps({
-  modelValue: { type: Number, default: 0 },
-  min: { type: Number, default: null },
-  max: { type: Number, default: null },
-  step: { type: Number, default: 1 },
-  bindField: { type: Boolean, default: false },
-  disabled: { type: Boolean, default: false },
-  readonly: { type: Boolean, default: false },
-  label: { type: String, default: '' },
-  placeholder: { type: String, default: '' },
-  currency: { type: String, default: undefined },
-  locale: { type: String, default: undefined },
-})
-
-const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
-
-const field = inject('nexa-ui:form-field', undefined)
-
-const effectiveValue = computed(() => {
-  if (props.bindField && field?.value) {
-    const v = field.value.value
-    return typeof v === 'number' ? v : Number(v)
-  }
-  return props.modelValue
-})
-
-const effectiveDisabled = computed(() => {
-  if (props.disabled) return true
-  if (props.bindField && field?.disabled) return !!field.disabled.value
-  return false
-})
-
-const text = signal(String(effectiveValue.value ?? ''))
-
-effect(() => {
-  const next = effectiveValue.value
-  const nextText = next === null || next === undefined ? '' : String(next)
-  if (text.value === nextText) return
-  text.value = nextText
-})
-
-const canEdit = computed(() => !effectiveDisabled.value && !props.readonly)
-
-const isFocused = signal(false)
-
-const nfSignal = signal(null)
-
-effect(() => {
-  if (props.currency) {
-    nfSignal.value = new Intl.NumberFormat(props.locale || undefined, {
-      style: 'currency',
-      currency: props.currency,
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    })
-  } else {
-    nfSignal.value = null
-  }
-})
-
-const displayText = computed(() => {
-  const raw = text.value
-  const nf = nfSignal.value
-  if (!nf || isFocused.value) return raw
-  if (!raw) return raw
-  const n = parseFloat(raw)
-  if (Number.isNaN(n)) return raw
-  return nf.format(n)
-})
-
-const sanitize = (raw) => {
-  const input = String(raw ?? '')
-  if (!input) return ''
-  const allowMinus = typeof props.min === 'number' ? props.min < 0 : true
-  let out = ''
-  let hasDot = false
-  let hasMinus = false
-  for (let i = 0; i < input.length; i++) {
-    const ch = input[i] === ',' ? '.' : input[i]
-    const isDigit = ch >= '0' && ch <= '9'
-    if (isDigit) {
-      out += ch
-      continue
-    }
-    if (ch === '.' && !hasDot) {
-      hasDot = true
-      out += ch
-      continue
-    }
-    if (ch === '-' && allowMinus && !hasMinus && out.length === 0) {
-      hasMinus = true
-      out += ch
-    }
-  }
-  return out
-}
-
-const clamp = (n) => {
-  if (n == null || Number.isNaN(n)) return null
-  let out = n
-  if (typeof props.min === 'number' && !Number.isNaN(props.min)) out = Math.max(out, props.min)
-  if (typeof props.max === 'number' && !Number.isNaN(props.max)) out = Math.min(out, props.max)
-  return out
-}
-
-const parse = (raw) => {
-  const s = sanitize(raw).trim()
-  if (!s) return null
-  const n = Number(s)
-  if (Number.isNaN(n)) return null
-  return n
-}
-
-const setValue = (next) => {
-  if (!canEdit.value) return
-  const clamped = clamp(next)
-  if (clamped == null) return
-  batch(() => {
-    if (props.bindField && field?.setValue) field.setValue(clamped)
-    else emit('update:modelValue', clamped)
-    text.value = String(clamped)
-  })
-}
-
-const inc = () => {
-  if (!canEdit.value) return
-  const base = typeof effectiveValue.value === 'number' && !Number.isNaN(effectiveValue.value) ? effectiveValue.value : 0
-  setValue(base + (props.step || 1))
-}
-
-const dec = () => {
-  if (!canEdit.value) return
-  const base = typeof effectiveValue.value === 'number' && !Number.isNaN(effectiveValue.value) ? effectiveValue.value : 0
-  setValue(base - (props.step || 1))
-}
-
-const onInput = (e) => {
-  if (!canEdit.value) return
-  const nextRaw = e.target.value
-  const nextText = sanitize(nextRaw)
-  if (e?.target && e.target.value !== nextText) {
-    e.target.value = nextText
-  }
-  batch(() => {
-    text.value = nextText
-    const n = parse(nextText)
-    const clamped = clamp(n)
-    if (clamped == null) return
-    if (props.bindField && field?.setValue) field.setValue(clamped)
-    else emit('update:modelValue', clamped)
-  })
-}
-
-const onBeforeInput = (e) => {
-  if (!canEdit.value) return
-  const inputType = e?.inputType
-  if (typeof inputType === 'string' && inputType.includes('Composition')) return
-  if (typeof inputType === 'string' && !inputType.startsWith('insert')) return
-  const data = e?.data
-  if (typeof data !== 'string' || !data) return
-  for (let i = 0; i < data.length; i++) {
-    const ch = data[i] === ',' ? '.' : data[i]
-    const isDigit = ch >= '0' && ch <= '9'
-    if (isDigit || ch === '.' || ch === '-') continue
-    e.preventDefault()
-    return
-  }
-}
-
-const onPaste = (e) => {
-  if (!canEdit.value) return
-  const pasted = e?.clipboardData?.getData?.('text')
-  if (typeof pasted !== 'string') return
-  e.preventDefault()
-  const nextText = sanitize(pasted)
-  const target = e?.target
-  if (!target) return
-  target.value = nextText
-  onInput({ target })
-}
-
-const onKeydown = (e) => {
-  if (!canEdit.value) return
-  if (e.ctrlKey || e.metaKey || e.altKey) return
-  const key = e.key
-  if (typeof key !== 'string' || key.length !== 1) return
-  const ch = key === ',' ? '.' : key
-  const isDigit = ch >= '0' && ch <= '9'
-  if (isDigit || ch === '.' || ch === '-') return
-  e.preventDefault()
-}
-
-const onBlur = () => {
-  emit('blur')
-  if (props.bindField && field?.onBlur) field.onBlur()
-  isFocused.value = false
-  const n = parse(text.value)
-  const clamped = clamp(n)
-  if (clamped == null) {
-    text.value = String(effectiveValue.value ?? '')
-    return
-  }
-  batch(() => {
-    text.value = String(clamped)
-    if (props.bindField && field?.setValue) field.setValue(clamped)
-    else emit('update:modelValue', clamped)
-  })
-}
-
-const onFocus = () => {
-  isFocused.value = true
-  emit('focus')
-}
-</script>
-
-<template>
-  <div class="n-inum">
-    <label v-if="label" class="n-inum-label">{{ label }}</label>
-    <div class="n-inum-wrap" :class="{ 'is-disabled': effectiveDisabled.value }">
-      <button type="button" class="n-inum-btn n-inum-dec" :disabled="effectiveDisabled.value || readonly" aria-label="Decrement" @click="dec">−</button>
-      <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" />
-      <button type="button" class="n-inum-btn n-inum-inc" :disabled="effectiveDisabled.value || readonly" aria-label="Increment" @click="inc">+</button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.n-inum{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)}
-</style>
+<script setup>
+import { signal, computed, inject, effect, batch } from 'nexa-framework'
+
+const props = defineProps({
+  modelValue: { type: Number, default: 0 },
+  min: { type: Number, default: null },
+  max: { type: Number, default: null },
+  step: { type: Number, default: 1 },
+  bindField: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  currency: { type: String, default: undefined },
+  locale: { type: String, default: undefined },
+})
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
+
+const field = inject('nexa-ui:form-field', undefined)
+
+const effectiveValue = computed(() => {
+  if (props.bindField && field?.value) {
+    const v = field.value.value
+    return typeof v === 'number' ? v : Number(v)
+  }
+  return props.modelValue
+})
+
+const effectiveDisabled = computed(() => {
+  if (props.disabled) return true
+  if (props.bindField && field?.disabled) return !!field.disabled.value
+  return false
+})
+
+const text = signal(String(effectiveValue.value ?? ''))
+
+effect(() => {
+  const next = effectiveValue.value
+  const nextText = next === null || next === undefined ? '' : String(next)
+  if (text.value === nextText) return
+  text.value = nextText
+})
+
+const canEdit = computed(() => !effectiveDisabled.value && !props.readonly)
+
+const isFocused = signal(false)
+
+const nfSignal = signal(null)
+
+effect(() => {
+  if (props.currency) {
+    nfSignal.value = new Intl.NumberFormat(props.locale || undefined, {
+      style: 'currency',
+      currency: props.currency,
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })
+  } else {
+    nfSignal.value = null
+  }
+})
+
+const displayText = computed(() => {
+  const raw = text.value
+  const nf = nfSignal.value
+  if (!nf || isFocused.value) return raw
+  if (!raw) return raw
+  const n = parseFloat(raw)
+  if (Number.isNaN(n)) return raw
+  return nf.format(n)
+})
+
+const sanitize = (raw) => {
+  const input = String(raw ?? '')
+  if (!input) return ''
+  const allowMinus = typeof props.min === 'number' ? props.min < 0 : true
+  let out = ''
+  let hasDot = false
+  let hasMinus = false
+  for (let i = 0; i < input.length; i++) {
+    const ch = input[i] === ',' ? '.' : input[i]
+    const isDigit = ch >= '0' && ch <= '9'
+    if (isDigit) {
+      out += ch
+      continue
+    }
+    if (ch === '.' && !hasDot) {
+      hasDot = true
+      out += ch
+      continue
+    }
+    if (ch === '-' && allowMinus && !hasMinus && out.length === 0) {
+      hasMinus = true
+      out += ch
+    }
+  }
+  return out
+}
+
+const clamp = (n) => {
+  if (n == null || Number.isNaN(n)) return null
+  let out = n
+  if (typeof props.min === 'number' && !Number.isNaN(props.min)) out = Math.max(out, props.min)
+  if (typeof props.max === 'number' && !Number.isNaN(props.max)) out = Math.min(out, props.max)
+  return out
+}
+
+const parse = (raw) => {
+  const s = sanitize(raw).trim()
+  if (!s) return null
+  const n = Number(s)
+  if (Number.isNaN(n)) return null
+  return n
+}
+
+const setValue = (next) => {
+  if (!canEdit.value) return
+  const clamped = clamp(next)
+  if (clamped == null) return
+  batch(() => {
+    if (props.bindField && field?.setValue) field.setValue(clamped)
+    else emit('update:modelValue', clamped)
+    text.value = String(clamped)
+  })
+}
+
+const inc = () => {
+  if (!canEdit.value) return
+  const base = typeof effectiveValue.value === 'number' && !Number.isNaN(effectiveValue.value) ? effectiveValue.value : 0
+  setValue(base + (props.step || 1))
+}
+
+const dec = () => {
+  if (!canEdit.value) return
+  const base = typeof effectiveValue.value === 'number' && !Number.isNaN(effectiveValue.value) ? effectiveValue.value : 0
+  setValue(base - (props.step || 1))
+}
+
+const onInput = (e) => {
+  if (!canEdit.value) return
+  const nextRaw = e.target.value
+  const nextText = sanitize(nextRaw)
+  if (e?.target && e.target.value !== nextText) {
+    e.target.value = nextText
+  }
+  batch(() => {
+    text.value = nextText
+    const n = parse(nextText)
+    const clamped = clamp(n)
+    if (clamped == null) return
+    if (props.bindField && field?.setValue) field.setValue(clamped)
+    else emit('update:modelValue', clamped)
+  })
+}
+
+const onBeforeInput = (e) => {
+  if (!canEdit.value) return
+  const inputType = e?.inputType
+  if (typeof inputType === 'string' && inputType.includes('Composition')) return
+  if (typeof inputType === 'string' && !inputType.startsWith('insert')) return
+  const data = e?.data
+  if (typeof data !== 'string' || !data) return
+  for (let i = 0; i < data.length; i++) {
+    const ch = data[i] === ',' ? '.' : data[i]
+    const isDigit = ch >= '0' && ch <= '9'
+    if (isDigit || ch === '.' || ch === '-') continue
+    e.preventDefault()
+    return
+  }
+}
+
+const onPaste = (e) => {
+  if (!canEdit.value) return
+  const pasted = e?.clipboardData?.getData?.('text')
+  if (typeof pasted !== 'string') return
+  e.preventDefault()
+  const nextText = sanitize(pasted)
+  const target = e?.target
+  if (!target) return
+  target.value = nextText
+  onInput({ target })
+}
+
+const onKeydown = (e) => {
+  if (!canEdit.value) return
+  if (e.ctrlKey || e.metaKey || e.altKey) return
+  const key = e.key
+  if (typeof key !== 'string' || key.length !== 1) return
+  const ch = key === ',' ? '.' : key
+  const isDigit = ch >= '0' && ch <= '9'
+  if (isDigit || ch === '.' || ch === '-') return
+  e.preventDefault()
+}
+
+const onBlur = () => {
+  emit('blur')
+  if (props.bindField && field?.onBlur) field.onBlur()
+  isFocused.value = false
+  const n = parse(text.value)
+  const clamped = clamp(n)
+  if (clamped == null) {
+    text.value = String(effectiveValue.value ?? '')
+    return
+  }
+  batch(() => {
+    text.value = String(clamped)
+    if (props.bindField && field?.setValue) field.setValue(clamped)
+    else emit('update:modelValue', clamped)
+  })
+}
+
+const onFocus = () => {
+  isFocused.value = true
+  emit('focus')
+}
+</script>
+
+<template>
+  <div class="n-inum">
+    <label v-if="label" class="n-inum-label">{{ label }}</label>
+    <div class="n-inum-wrap" :class="{ 'is-disabled': effectiveDisabled.value }">
+      <button type="button" class="n-inum-btn n-inum-dec" :disabled="effectiveDisabled.value || readonly" aria-label="Decrement" @click="dec">−</button>
+      <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" />
+      <button type="button" class="n-inum-btn n-inum-inc" :disabled="effectiveDisabled.value || readonly" aria-label="Increment" @click="inc">+</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-inum{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)}
+</style>