nexa-ui-kit 0.6.0

package/dist/components/NInput.nexa

@@ -0,0 +1,311 @@
+<script setup>
+import { signal, computed, inject, effect } from 'nexa-framework'
+
+const props = defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  type: { type: String, default: 'text' },
+  placeholder: { type: String, default: '' },
+  label: { type: String, default: '' },
+  error: { type: String, default: '' },
+  id: { type: String, default: '' },
+  name: { type: String, default: '' },
+  autocomplete: { type: String, default: '' },
+  ariaDescribedby: { type: String, default: '' },
+  ariaInvalid: { type: [Boolean, String], default: false },
+  bindField: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: false },
+  maxlength: { type: Number, default: 0 },
+  prefixIcon: { type: String, default: '' },
+  suffixIcon: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue', 'clear', 'focus', 'blur'])
+
+const field = inject('nexa-ui:form-field', undefined)
+
+const showPassword = signal(false)
+const isFocused = signal(false)
+
+const effectiveValue = computed(() => {
+  if (props.bindField && field?.value) return field.value.value
+  return props.modelValue
+})
+
+const draft = signal(String(effectiveValue.value ?? ''))
+
+effect(() => {
+  const next = String(effectiveValue.value ?? '')
+  if (draft.value === next) return
+  draft.value = next
+})
+
+const effectiveId = computed(() => {
+  if (props.id) return props.id
+  if (props.bindField && field?.inputId) return field.inputId.value
+  return ''
+})
+
+const effectiveDescribedBy = computed(() => {
+  if (props.ariaDescribedby) return props.ariaDescribedby
+  if (props.bindField && field?.describedBy) return field.describedBy.value || ''
+  return ''
+})
+
+const effectiveInvalid = computed(() => {
+  if (props.bindField && field?.invalid) return field.invalid.value
+  return props.ariaInvalid
+})
+
+const effectiveError = computed(() => {
+  if (props.error) return props.error
+  if (props.bindField && field?.error) return field.error.value || ''
+  return ''
+})
+
+const effectiveDisabled = computed(() => {
+  if (props.disabled) return true
+  if (props.bindField && field?.disabled) return !!field.disabled.value
+  return false
+})
+
+const inputType = computed(() => {
+  if (props.type === 'password' && showPassword.value) return 'text'
+  return props.type
+})
+
+const currentLength = computed(() => draft.value.length)
+
+const onInput = (e) => {
+  const next = e.target.value
+  if (draft.value !== next) draft.value = next
+  if (props.bindField && field?.setValue) {
+    field.setValue(next)
+    return
+  }
+  emit('update:modelValue', next)
+}
+
+const onFocus = () => {
+  isFocused.value = true
+  emit('focus')
+}
+
+const onBlur = () => {
+  isFocused.value = false
+  if (props.bindField && field?.onBlur) {
+    field.onBlur()
+  }
+  emit('blur')
+}
+
+const clear = () => {
+  if (draft.value) draft.value = ''
+  if (props.bindField && field?.setValue) {
+    field.setValue('')
+    emit('clear')
+    return
+  }
+  emit('update:modelValue', '')
+  emit('clear')
+}
+
+const togglePassword = () => {
+  showPassword.value = !showPassword.value
+}
+</script>
+
+<template>
+  <div class="n-input-group">
+    <label v-if="label" class="n-input-label">{{ label }}</label>
+    <div class="n-input-wrapper" :class="{ 'is-focused': isFocused.value, 'has-error': effectiveError.value, 'is-disabled': effectiveDisabled.value }">
+      <span v-if="prefixIcon" class="n-input-icon is-prefix">{{ prefixIcon }}</span>
+      <input
+        :id="effectiveId.value || undefined"
+        :name="name || undefined"
+        :type="inputType.value"
+        :value="draft.value"
+        :placeholder="placeholder"
+        :disabled="effectiveDisabled.value"
+        :readonly="readonly"
+        :autocomplete="autocomplete || undefined"
+        :aria-describedby="effectiveDescribedBy.value || undefined"
+        :aria-invalid="effectiveInvalid.value || undefined"
+        :maxlength="maxlength || undefined"
+        class="n-input"
+        :class="{ 'has-prefix': !!prefixIcon, 'has-suffix': !!suffixIcon || clearable || type === 'password' }"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+      <div class="n-input-focus-ring"></div>
+      <div class="n-input-actions">
+        <button v-if="clearable && draft.value" class="n-input-action" @click="clear" tabindex="-1" type="button">✕</button>
+        <button v-if="type === 'password'" class="n-input-action" @click="togglePassword" tabindex="-1" type="button">
+          {{ showPassword.value ? '◉' : '◎' }}
+        </button>
+        <span v-if="suffixIcon" class="n-input-icon is-suffix">{{ suffixIcon }}</span>
+      </div>
+    </div>
+    <div class="n-input-bottom">
+      <span v-if="effectiveError.value" class="n-input-error-msg">{{ effectiveError.value }}</span>
+      <span v-if="maxlength > 0" class="n-input-counter">{{ currentLength.value }}/{{ maxlength }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-2);
+  width: 100%;
+}
+
+.n-input-label {
+  font-size: var(--n-text-sm);
+  font-weight: var(--n-weight-semibold);
+  color: var(--n-color-text-secondary);
+  margin-left: var(--n-space-1);
+}
+
+.n-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  transition: all var(--n-transition-fast);
+}
+
+.n-input {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  min-height: 44px;
+  background: var(--n-color-bg);
+  border: 1px solid var(--n-color-border);
+  color: var(--n-color-text);
+  padding: 0.75rem 1rem;
+  border-radius: var(--n-radius-md);
+  font-family: inherit;
+  font-size: var(--n-text-base);
+  line-height: 1.2;
+  box-sizing: border-box;
+  transition: all var(--n-transition-normal);
+  outline: none;
+}
+
+.n-input.has-prefix {
+  padding-left: 2.5rem;
+}
+
+.n-input.has-suffix {
+  padding-right: 2.5rem;
+}
+
+.n-input::placeholder {
+  color: var(--n-color-text-muted);
+}
+
+.n-input-focus-ring {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--n-radius-md);
+  background: linear-gradient(135deg, var(--n-color-primary), var(--n-color-info));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--n-transition-normal);
+  z-index: 0;
+}
+
+.is-focused .n-input-focus-ring {
+  opacity: 0.35;
+}
+
+.is-focused .n-input {
+  border-color: var(--n-color-primary);
+  background: var(--n-color-surface);
+}
+
+.has-error .n-input {
+  border-color: var(--n-color-danger);
+}
+
+.has-error .n-input-focus-ring {
+  background: var(--n-color-danger);
+  opacity: 0.35;
+}
+
+.n-input-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--n-color-text-muted);
+  font-size: var(--n-text-sm);
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.n-input-icon.is-prefix {
+  left: 0.85rem;
+}
+
+.n-input-icon.is-suffix {
+  right: 0.85rem;
+}
+
+.n-input-actions {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+}
+
+.n-input-action {
+  background: transparent;
+  border: none;
+  color: var(--n-color-text-muted);
+  cursor: pointer;
+  padding: 0.25rem;
+  font-size: var(--n-text-sm);
+  border-radius: var(--n-radius-sm);
+  transition: all var(--n-transition-fast);
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.n-input-action:hover {
+  color: var(--n-color-text);
+  background: var(--n-color-glass);
+}
+
+.n-input-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 var(--n-space-1);
+}
+
+.n-input-error-msg {
+  font-size: var(--n-text-xs);
+  color: var(--n-color-danger);
+}
+
+.n-input-counter {
+  font-size: var(--n-text-xs);
+  color: var(--n-color-text-muted);
+  margin-left: auto;
+}
+
+.is-disabled .n-input {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--n-color-surface-alt);
+}
+</style>

package/dist/components/NInputNumber.js

@@ -0,0 +1,202 @@
+import { signal, computed, inject, effect, batch, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-6dd313',
+  __hmrId: 'NInputNumber_nexa',
+  props: {
+  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: '' }
+},
+  emits: ['update:modelValue', 'focus', 'blur'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    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 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()
+      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 = () => emit('focus')
+    return { field, effectiveValue, effectiveDisabled, text, canEdit, sanitize, clamp, parse, setValue, inc, dec, onInput, onBeforeInput, onPaste, onKeydown, onBlur, onFocus, inject, batch, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  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
+    return h('div', { class: "n-inum", "data-v-6dd313": "" }, [
+        "\n    ",
+        (label) ? h('label', { class: "n-inum-label", "data-v-6dd313": "" }, [
+        label
+      ]) : null,
+        h('div', { class: ["n-inum-wrap", { 'is-disabled': effectiveDisabled.value }], "data-v-6dd313": "" }, [
+        "\n      ",
+        h('button', { class: "n-inum-btn n-inum-dec", type: "button", disabled: effectiveDisabled.value || readonly, "aria-label": "Decrement", onClick: dec, "data-v-6dd313": "" }, [
+        "−"
+      ]),
+        "\n      ",
+        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": "" }),
+        "\n      ",
+        h('button', { class: "n-inum-btn n-inum-inc", type: "button", disabled: effectiveDisabled.value || readonly, "aria-label": "Increment", onClick: inc, "data-v-6dd313": "" }, [
+        "+"
+      ]),
+        "\n    "
+      ]),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-6dd313'
+_sfc_main.__hmrId = 'NInputNumber_nexa'
+
+export default _sfc_main
+
+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)}`
+injectStyle('data-v-6dd313', __style)