nexa-ui-kit 0.6.0

package/dist/components/NFormField.js

@@ -0,0 +1,173 @@
+import { signal, computed, inject, provide, effect, onUnmounted, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-30bdb720',
+  __hmrId: 'NFormField_nexa',
+  props: {
+  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 }
+},
+  emits: ['update:modelValue'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    let nextAutoId = 1
+    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()
+    })
+    return { nextAutoId, form, autoId, inputId, helpId, errorId, describedBy, value, initialValue, touched, pending, errors, dirty, error, invalid, shouldValidateOn, validate, setValue, onBlur, reset, unregister, inject, provide, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { nextAutoId, form, autoId, inputId, helpId, errorId, describedBy, value, initialValue, touched, pending, errors, dirty, error, invalid, shouldValidateOn, validate, setValue, onBlur, reset, unregister, inject, provide, $slots, emit, name, label, help, id, modelValue, rules, validateOn, showError, disabled, Fragment: _ntc_Fragment } = ctx
+    return h('div', { class: ["n-form-field", { 'is-invalid': invalid.value, 'is-disabled': disabled, 'is-pending': pending.value }], "data-v-30bdb720": "" }, [
+        "\n    ",
+        (label) ? h('label', { class: "n-form-field-label", for: inputId.value, "data-v-30bdb720": "" }, [
+        label
+      ]) : null,
+        h('div', { class: "n-form-field-control", "data-v-30bdb720": "" }, [
+        "\n      ",
+        ctx.$slots.default ? ctx.$slots.default() : null,
+        "\n    "
+      ]),
+        "\n    ",
+        (help) ? h('div', { class: "n-form-field-help", id: helpId.value, "data-v-30bdb720": "" }, [
+        help
+      ]) : null,
+        (showError && error.value) ? h('div', { class: "n-form-field-error", id: errorId.value, "data-v-30bdb720": "" }, [
+        error.value
+      ]) : null
+      ])
+}
+_sfc_main.__scopeId = 'data-v-30bdb720'
+_sfc_main.__hmrId = 'NFormField_nexa'
+
+export default _sfc_main
+
+const __style = `.n-form-field[data-v-30bdb720]{
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-2);
+  width: 100%;
+}
+
+.n-form-field-label[data-v-30bdb720]{
+  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[data-v-30bdb720]{
+  width: 100%;
+}
+
+.n-form-field-help[data-v-30bdb720]{
+  font-size: var(--n-text-xs);
+  color: var(--n-color-text-muted);
+  padding: 0 var(--n-space-1);
+}
+
+.n-form-field-error[data-v-30bdb720]{
+  font-size: var(--n-text-xs);
+  color: var(--n-color-danger);
+  padding: 0 var(--n-space-1);
+}
+
+.is-disabled[data-v-30bdb720]{
+  opacity: 0.6;
+}`
+injectStyle('data-v-30bdb720', __style)

package/dist/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/dist/components/NInput.js

@@ -0,0 +1,311 @@
+import { signal, computed, inject, effect, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-7dbed0f8',
+  __hmrId: 'NInput_nexa',
+  props: {
+  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: '' }
+},
+  emits: ['update:modelValue', 'clear', 'focus', 'blur'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    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
+    }
+    return { field, showPassword, isFocused, effectiveValue, draft, effectiveId, effectiveDescribedBy, effectiveInvalid, effectiveError, effectiveDisabled, inputType, currentLength, onInput, onFocus, onBlur, clear, togglePassword, inject, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { field, showPassword, isFocused, effectiveValue, draft, effectiveId, effectiveDescribedBy, effectiveInvalid, effectiveError, effectiveDisabled, inputType, currentLength, onInput, onFocus, onBlur, clear, togglePassword, inject, $slots, emit, modelValue, type, placeholder, label, error, id, name, autocomplete, ariaDescribedby, ariaInvalid, bindField, disabled, readonly, clearable, maxlength, prefixIcon, suffixIcon, Fragment: _ntc_Fragment } = ctx
+    return h('div', { class: "n-input-group", "data-v-7dbed0f8": "" }, [
+        "\n    ",
+        (label) ? h('label', { class: "n-input-label", "data-v-7dbed0f8": "" }, [
+        label
+      ]) : null,
+        h('div', { class: ["n-input-wrapper", { 'is-focused': isFocused.value, 'has-error': effectiveError.value, 'is-disabled': effectiveDisabled.value }], "data-v-7dbed0f8": "" }, [
+        "\n      ",
+        (prefixIcon) ? h('span', { class: "n-input-icon is-prefix", "data-v-7dbed0f8": "" }, [
+        prefixIcon
+      ]) : null,
+        h('input', { class: ["n-input", { 'has-prefix': !!prefixIcon, 'has-suffix': !!suffixIcon || clearable || type === 'password' }], 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, onInput: onInput, onFocus: onFocus, onBlur: onBlur, "data-v-7dbed0f8": "" }),
+        "\n      ",
+        h('div', { class: "n-input-focus-ring", "data-v-7dbed0f8": "" }),
+        "\n      ",
+        h('div', { class: "n-input-actions", "data-v-7dbed0f8": "" }, [
+        "\n        ",
+        (clearable && draft.value) ? h('button', { class: "n-input-action", onClick: clear, tabindex: "-1", type: "button", "data-v-7dbed0f8": "" }, [
+        "✕"
+      ]) : null,
+        (type === 'password') ? h('button', { class: "n-input-action", onClick: togglePassword, tabindex: "-1", type: "button", "data-v-7dbed0f8": "" }, [
+        "\n          ",
+        showPassword.value ? '◉' : '◎',
+        "\n        "
+      ]) : null,
+        (suffixIcon) ? h('span', { class: "n-input-icon is-suffix", "data-v-7dbed0f8": "" }, [
+        suffixIcon
+      ]) : null
+      ]),
+        "\n    "
+      ]),
+        "\n    ",
+        h('div', { class: "n-input-bottom", "data-v-7dbed0f8": "" }, [
+        "\n      ",
+        (effectiveError.value) ? h('span', { class: "n-input-error-msg", "data-v-7dbed0f8": "" }, [
+        effectiveError.value
+      ]) : null,
+        (maxlength > 0) ? h('span', { class: "n-input-counter", "data-v-7dbed0f8": "" }, [
+        currentLength.value,
+        "/",
+        maxlength
+      ]) : null
+      ]),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-7dbed0f8'
+_sfc_main.__hmrId = 'NInput_nexa'
+
+export default _sfc_main
+
+const __style = `.n-input-group[data-v-7dbed0f8]{
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-2);
+  width: 100%;
+}
+
+.n-input-label[data-v-7dbed0f8]{
+  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[data-v-7dbed0f8]{
+  position: relative;
+  display: flex;
+  align-items: center;
+  transition: all var(--n-transition-fast);
+}
+
+.n-input[data-v-7dbed0f8]{
+  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[data-v-7dbed0f8]{
+  padding-left: 2.5rem;
+}
+
+.n-input.has-suffix[data-v-7dbed0f8]{
+  padding-right: 2.5rem;
+}
+
+.n-input[data-v-7dbed0f8]::placeholder{
+  color: var(--n-color-text-muted);
+}
+
+.n-input-focus-ring[data-v-7dbed0f8]{
+  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[data-v-7dbed0f8]{
+  opacity: 0.35;
+}
+
+.is-focused .n-input[data-v-7dbed0f8]{
+  border-color: var(--n-color-primary);
+  background: var(--n-color-surface);
+}
+
+.has-error .n-input[data-v-7dbed0f8]{
+  border-color: var(--n-color-danger);
+}
+
+.has-error .n-input-focus-ring[data-v-7dbed0f8]{
+  background: var(--n-color-danger);
+  opacity: 0.35;
+}
+
+.n-input-icon[data-v-7dbed0f8]{
+  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[data-v-7dbed0f8]{
+  left: 0.85rem;
+}
+
+.n-input-icon.is-suffix[data-v-7dbed0f8]{
+  right: 0.85rem;
+}
+
+.n-input-actions[data-v-7dbed0f8]{
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+}
+
+.n-input-action[data-v-7dbed0f8]{
+  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[data-v-7dbed0f8]:hover{
+  color: var(--n-color-text);
+  background: var(--n-color-glass);
+}
+
+.n-input-bottom[data-v-7dbed0f8]{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 var(--n-space-1);
+}
+
+.n-input-error-msg[data-v-7dbed0f8]{
+  font-size: var(--n-text-xs);
+  color: var(--n-color-danger);
+}
+
+.n-input-counter[data-v-7dbed0f8]{
+  font-size: var(--n-text-xs);
+  color: var(--n-color-text-muted);
+  margin-left: auto;
+}
+
+.is-disabled .n-input[data-v-7dbed0f8]{
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--n-color-surface-alt);
+}`
+injectStyle('data-v-7dbed0f8', __style)