nexa-ui-kit 0.6.0

package/src/components/NForm.nexa

@@ -0,0 +1,133 @@
+<script setup>
+import { signal, computed, provide } from 'nexa-framework'
+
+const props = defineProps({
+  validateOn: { type: String, default: 'submit' },
+  disabled: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['submit', 'invalid'])
+
+const fieldNames = signal([])
+const fields = Object.create(null)
+
+const registerField = (name, field) => {
+  if (!name) return () => {}
+  fields[name] = field
+  if (!fieldNames.value.includes(name)) fieldNames.value = [...fieldNames.value, name]
+  return () => {
+    delete fields[name]
+    if (fieldNames.value.includes(name)) {
+      fieldNames.value = fieldNames.value.filter(n => n !== name)
+    }
+  }
+}
+
+const getValues = () => {
+  const out = {}
+  for (const name of fieldNames.value) {
+    const field = fields[name]
+    if (!field) continue
+    out[name] = field.value.value
+  }
+  return out
+}
+
+const values = computed(() => {
+  const names = fieldNames.value
+  const out = {}
+  for (const name of names) {
+    const field = fields[name]
+    if (!field) continue
+    out[name] = field.value.value
+  }
+  return out
+})
+
+const errors = computed(() => {
+  const names = fieldNames.value
+  const out = {}
+  for (const name of names) {
+    const field = fields[name]
+    if (!field) continue
+    out[name] = field.errors.value
+  }
+  return out
+})
+
+const pending = computed(() => {
+  const names = fieldNames.value
+  for (const name of names) {
+    const field = fields[name]
+    if (!field) continue
+    if (field.pending.value) return true
+  }
+  return false
+})
+
+const valid = computed(() => {
+  const names = fieldNames.value
+  for (const name of names) {
+    const field = fields[name]
+    if (!field) continue
+    if (field.errors.value.length > 0) return false
+  }
+  return true
+})
+
+const validateAll = async () => {
+  const tasks = fieldNames.value.map(async (name) => {
+    const field = fields[name]
+    if (!field) return true
+    const errs = await field.validate('submit')
+    return errs.length === 0
+  })
+  const results = await Promise.all(tasks)
+  return results.every(Boolean)
+}
+
+const reset = () => {
+  for (const name of fieldNames.value) {
+    const field = fields[name]
+    if (!field) continue
+    field.reset()
+  }
+}
+
+const submit = async () => {
+  if (props.disabled) return
+  const ok = await validateAll()
+  if (!ok) {
+    emit('invalid', errors.value)
+    return
+  }
+  emit('submit', values.value)
+}
+
+const onSubmit = (e) => {
+  if (e && typeof e.preventDefault === 'function') e.preventDefault()
+  submit()
+}
+
+provide('nexa-ui:form', {
+  validateOn: props.validateOn,
+  disabled: props.disabled,
+  registerField,
+  getValues,
+})
+</script>
+
+<template>
+  <form class="n-form" @submit="onSubmit">
+    <slot :values="values" :errors="errors" :valid="valid" :pending="pending" :submit="submit" :reset="reset" />
+  </form>
+</template>
+
+<style scoped>
+.n-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-4);
+  width: 100%;
+}
+</style>

package/src/components/NFormField.nexa

@@ -0,0 +1,171 @@
+<script setup>
+import { signal, computed, inject, provide, effect, onUnmounted } from 'nexa-framework'
+
+let nextAutoId = 1
+
+const props = defineProps({
+  name: { type: String, default: '' },
+  label: { type: String, default: '' },
+  help: { type: String, default: '' },
+  id: { type: String, default: '' },
+  modelValue: { type: null, default: '' },
+  rules: { type: Array, default: () => [] },
+  validateOn: { type: String, default: '' },
+  showError: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const form = inject('nexa-ui:form', undefined)
+const autoId = `n-field-${nextAutoId++}`
+
+const inputId = computed(() => props.id || autoId)
+const helpId = computed(() => `${inputId.value}-help`)
+const errorId = computed(() => `${inputId.value}-error`)
+const describedBy = computed(() => {
+  const parts = []
+  if (props.help) parts.push(helpId.value)
+  if (props.showError && error.value) parts.push(errorId.value)
+  return parts.join(' ') || undefined
+})
+
+const value = signal(props.modelValue)
+const initialValue = signal(props.modelValue)
+const touched = signal(false)
+const pending = signal(false)
+const errors = signal([])
+
+const dirty = computed(() => value.value !== initialValue.value)
+const error = computed(() => errors.value[0] || '')
+const invalid = computed(() => errors.value.length > 0)
+
+effect(() => {
+  if (props.modelValue === value.value) return
+  value.value = props.modelValue
+})
+
+const shouldValidateOn = (reason) => {
+  const mode = props.validateOn || form?.validateOn || 'submit'
+  if (mode === 'change' && (reason === 'change' || reason === 'input')) return true
+  if (mode === 'blur' && reason === 'blur') return true
+  if (mode === 'submit' && reason === 'submit') return true
+  return false
+}
+
+const validate = async (reason = 'submit') => {
+  if (!shouldValidateOn(reason) && reason !== 'submit') return errors.value
+  if (form?.disabled || props.disabled) return []
+  const rules = Array.isArray(props.rules) ? props.rules : []
+  if (rules.length === 0) {
+    errors.value = []
+    return []
+  }
+
+  pending.value = true
+  const nextErrors = []
+  const values = form?.getValues ? form.getValues() : { [props.name]: value.value }
+
+  for (const rule of rules) {
+    if (!rule) continue
+    const res = await rule(value.value, values)
+    if (!res) continue
+    nextErrors.push(String(res))
+  }
+
+  errors.value = nextErrors
+  pending.value = false
+  return nextErrors
+}
+
+const setValue = (next) => {
+  if (form?.disabled || props.disabled) return
+  value.value = next
+  emit('update:modelValue', next)
+  validate('change')
+}
+
+const onBlur = () => {
+  touched.value = true
+  validate('blur')
+}
+
+provide('nexa-ui:form-field', {
+  inputId,
+  describedBy,
+  invalid,
+  error,
+  errors,
+  touched,
+  dirty,
+  pending,
+  value,
+  setValue,
+  onBlur,
+  disabled: computed(() => !!(props.disabled || form?.disabled)),
+})
+
+const reset = () => {
+  touched.value = false
+  errors.value = []
+  pending.value = false
+  initialValue.value = props.modelValue
+  value.value = props.modelValue
+}
+
+let unregister = null
+if (form?.registerField && props.name) {
+  unregister = form.registerField(props.name, { value, touched, dirty, errors, pending, validate, reset })
+}
+
+onUnmounted(() => {
+  if (unregister) unregister()
+})
+</script>
+
+<template>
+  <div class="n-form-field" :class="{ 'is-invalid': invalid.value, 'is-disabled': disabled, 'is-pending': pending.value }">
+    <label v-if="label" class="n-form-field-label" :for="inputId.value">{{ label }}</label>
+    <div class="n-form-field-control">
+      <slot />
+    </div>
+    <div v-if="help" :id="helpId.value" class="n-form-field-help">{{ help }}</div>
+    <div v-if="showError && error.value" :id="errorId.value" class="n-form-field-error">{{ error.value }}</div>
+  </div>
+</template>
+
+<style scoped>
+.n-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-2);
+  width: 100%;
+}
+
+.n-form-field-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-form-field-control {
+  width: 100%;
+}
+
+.n-form-field-help {
+  font-size: var(--n-text-xs);
+  color: var(--n-color-text-muted);
+  padding: 0 var(--n-space-1);
+}
+
+.n-form-field-error {
+  font-size: var(--n-text-xs);
+  color: var(--n-color-danger);
+  padding: 0 var(--n-space-1);
+}
+
+.is-disabled {
+  opacity: 0.6;
+}
+</style>

package/src/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>