nexa-ui-kit 0.11.6 → 0.11.9

package/dist/components/NInput.js

@@ -1,7 +1,7 @@
-import { signal, computed, inject, effect, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+import { signal, computed, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-5b5ed8a8',
+  __scopeId: 'data-v-58540fa7',
   __hmrId: 'NInput_nexa',
   props: {
   modelValue: { type: [String, Number], default: '' },
@@ -9,334 +9,167 @@ const _sfc_main = defineComponent({
   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 },
+  required: { type: Boolean, default: false },
   clearable: { type: Boolean, default: false },
-  maxlength: { type: Number, default: 0 },
-  prefixIcon: { type: String, default: '' },
-  suffixIcon: { type: String, default: '' }
+  prefix: { type: String, default: '' },
+  suffix: { type: String, default: '' }
 },
-  emits: ['update:modelValue', 'clear', 'focus', 'blur'],
+  emits: ['update:modelValue', 'focus', 'blur', 'clear'],
   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 handleInput = (e) => {
+      emit('update:modelValue', e.target.value)
     }
-    const onFocus = () => {
+    const handleFocus = (e) => {
       isFocused.value = true
-      emit('focus')
+      emit('focus', e)
     }
-    const onBlur = () => {
+    const handleBlur = (e) => {
       isFocused.value = false
-      if (props.bindField && field?.onBlur) {
-        field.onBlur()
-      }
-      emit('blur')
+      emit('blur', e)
     }
-    const clear = () => {
-      if (draft.value) draft.value = ''
-      if (props.bindField && field?.setValue) {
-        field.setValue('')
-        emit('clear')
-        return
-      }
+    const handleClear = () => {
       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 }
+    return { isFocused, handleInput, handleFocus, handleBlur, handleClear, $slots, emit }
   }
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  let { 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-5b5ed8a8": "" }, [
+  let { isFocused, handleInput, handleFocus, handleBlur, handleClear, $slots, emit, modelValue, type, placeholder, label, error, disabled, readonly, required, clearable, prefix, suffix, Fragment: _ntc_Fragment } = ctx
+    return h('div', { class: ["n-input-wrapper", { 'is-focused': isFocused, 'is-error': error, 'is-disabled': disabled }], "data-v-58540fa7": "" }, [
         "\n    ",
-        (label) ? h('label', { class: "n-input-label", "data-v-5b5ed8a8": "" }, [
-        label
-      ]) : null,
-        h('div', { class: ["n-input-wrapper", { 'is-focused': isFocused.value, 'has-error': effectiveError.value, 'is-disabled': effectiveDisabled.value }], "data-v-5b5ed8a8": "" }, [
+        (label) ? h('label', { class: "n-input-label", "data-v-58540fa7": "" }, [
+        "\n      ",
+        label,
         "\n      ",
-        (prefixIcon) ? h('span', { class: "n-input-icon is-prefix", "data-v-5b5ed8a8": "" }, [
-        prefixIcon
+        (required) ? h('span', { class: "n-input-required", "data-v-58540fa7": "" }, [
+        "*"
+      ]) : null
       ]) : 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-5b5ed8a8": "" }),
+        h('div', { class: "n-input-container", "data-v-58540fa7": "" }, [
         "\n      ",
-        h('div', { class: "n-input-focus-ring", "data-v-5b5ed8a8": "" }),
+        (prefix) ? h('span', { class: "n-input-prefix", "data-v-58540fa7": "" }, [
+        prefix
+      ]) : null,
+        h('input', { class: "n-input", type: type, value: modelValue, placeholder: placeholder, disabled: disabled, readonly: readonly, required: required, onInput: handleInput, onFocus: handleFocus, onBlur: handleBlur, "data-v-58540fa7": "" }),
         "\n      ",
-        h('div', { class: "n-input-actions", "data-v-5b5ed8a8": "" }, [
+        (clearable && modelValue) ? h('button', { class: "n-input-clear", onClick: handleClear, type: "button", "data-v-58540fa7": "" }, [
         "\n        ",
-        (clearable && draft.value) ? h('button', { class: "n-input-action", onClick: clear, tabindex: "-1", type: "button", "aria-label": "Clear", "data-v-5b5ed8a8": "" }, [
-        h('svg', { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-5b5ed8a8": "" }, [
-        h('path', { d: "M18 6L6 18", "data-v-5b5ed8a8": "" }),
-        h('path', { d: "M6 6l12 12", "data-v-5b5ed8a8": "" })
-      ])
-      ]) : null,
-        (type === 'password') ? h('button', { class: "n-input-action", onClick: togglePassword, tabindex: "-1", type: "button", "aria-label": showPassword.value ? 'Hide password' : 'Show password', "data-v-5b5ed8a8": "" }, [
+        h('svg', { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "data-v-58540fa7": "" }, [
         "\n          ",
-        (!showPassword.value) ? h('svg', { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-5b5ed8a8": "" }, [
-        h('path', { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", "data-v-5b5ed8a8": "" }),
-        h('circle', { cx: "12", cy: "12", r: "3", "data-v-5b5ed8a8": "" })
-      ]) : (true) ? h('svg', { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", focusable: "false", "aria-hidden": "true", "data-v-5b5ed8a8": "" }, [
-        h('path', { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z", "data-v-5b5ed8a8": "" }),
-        h('circle', { cx: "12", cy: "12", r: "3", "data-v-5b5ed8a8": "" }),
-        h('path', { d: "M23 1L1 23", "data-v-5b5ed8a8": "" })
-      ]) : null,
+        h('line', { x1: "18", y1: "6", x2: "6", y2: "18", "data-v-58540fa7": "" }),
+        "\n          ",
+        h('line', { x1: "6", y1: "6", x2: "18", y2: "18", "data-v-58540fa7": "" }),
         "\n        "
+      ]),
+        "\n      "
       ]) : null,
-        (suffixIcon) ? h('span', { class: "n-input-icon is-suffix", "data-v-5b5ed8a8": "" }, [
-        suffixIcon
+        (suffix) ? h('span', { class: "n-input-suffix", "data-v-58540fa7": "" }, [
+        suffix
       ]) : null
-      ]),
-        "\n    "
       ]),
         "\n    ",
-        h('div', { class: "n-input-bottom", "data-v-5b5ed8a8": "" }, [
-        "\n      ",
-        (effectiveError.value) ? h('span', { class: "n-input-error-msg", "data-v-5b5ed8a8": "" }, [
-        effectiveError.value
-      ]) : null,
-        (maxlength > 0) ? h('span', { class: "n-input-counter", "data-v-5b5ed8a8": "" }, [
-        currentLength.value,
-        "/",
-        maxlength
+        (error) ? h('span', { class: "n-input-error", "data-v-58540fa7": "" }, [
+        error
       ]) : null
-      ]),
-        "\n  "
       ])
 }
-_sfc_main.__scopeId = 'data-v-5b5ed8a8'
+_sfc_main.__scopeId = 'data-v-58540fa7'
 _sfc_main.__hmrId = 'NInput_nexa'
 
 export default _sfc_main
 
-const __style = `.n-input-group[data-v-5b5ed8a8]{
+const __style = `.n-input-wrapper[data-v-58540fa7]{
   display: flex;
   flex-direction: column;
-  gap: var(--n-space-2);
+  gap: 0.5rem;
   width: 100%;
 }
-
-.n-input-label[data-v-5b5ed8a8]{
-  font-size: var(--n-text-sm);
-  font-weight: var(--n-weight-medium);
-  color: var(--n-color-text-secondary);
-  margin-left: var(--n-space-1);
-  letter-spacing: 0.01em;
+.n-input-label[data-v-58540fa7]{
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--n-color-text);
+  letter-spacing: normal;
 }
-
-.n-input-wrapper[data-v-5b5ed8a8]{
+.n-input-required[data-v-58540fa7]{
+  color: var(--n-color-danger);
+  margin-left: 0.25rem;
+}
+.n-input-container[data-v-58540fa7]{
   position: relative;
   display: flex;
   align-items: center;
-  transition: all var(--n-transition-fast);
-}
-
-.n-input[data-v-5b5ed8a8]{
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  min-height: 44px;
-  background: var(--n-color-bg);
+  background-color: var(--n-color-surface);
   border: 1px solid var(--n-color-border);
-  color: var(--n-color-text);
-  padding: 0.75rem 1.125rem;
-  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) cubic-bezier(0.16, 1, 0.3, 1);
-  outline: none;
-  caret-color: var(--n-color-primary);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.n-input.has-prefix[data-v-5b5ed8a8]{
-  padding-left: 2.5rem;
-}
-
-.n-input.has-suffix[data-v-5b5ed8a8]{
-  padding-right: 2.5rem;
-}
-
-.n-input[data-v-5b5ed8a8]::placeholder{
-  color: var(--n-color-text-muted);
-}
-
-.n-input-focus-ring[data-v-5b5ed8a8]{
-  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) cubic-bezier(0.16, 1, 0.3, 1);
-  z-index: 0;
+  transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), color var(--n-transition-fast), box-shadow var(--n-transition-fast);
 }
-
-.is-focused .n-input-focus-ring[data-v-5b5ed8a8]{
-  opacity: 0.15;
+.n-input-container[data-v-58540fa7]:hover{
+  border-color: var(--n-color-border-hover);
 }
-
-.is-focused .n-input[data-v-5b5ed8a8]{
+.is-focused .n-input-container[data-v-58540fa7]{
   border-color: var(--n-color-primary);
-  background: var(--n-color-surface);
-  box-shadow:
-    0 0 0 3px var(--n-color-primary-light),
-    0 0 0 1px var(--n-color-primary),
-    inset 0 1px 3px rgba(0,0,0,0.04);
+  box-shadow: var(--n-ring-primary);
 }
-
-.has-error .n-input[data-v-5b5ed8a8]{
+.is-error .n-input-container[data-v-58540fa7]{
   border-color: var(--n-color-danger);
 }
-
-.has-error .n-input-focus-ring[data-v-5b5ed8a8]{
-  background: var(--n-color-danger);
-  opacity: 0.35;
+.is-error.is-focused .n-input-container[data-v-58540fa7]{
+  box-shadow: var(--n-ring-danger);
 }
-
-.n-input-icon[data-v-5b5ed8a8]{
-  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;
+.is-disabled .n-input-container[data-v-58540fa7]{
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--n-color-surface-alt);
 }
-
-.n-input-icon.is-prefix[data-v-5b5ed8a8]{
-  left: 0.85rem;
+.n-input[data-v-58540fa7]{
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--n-color-text);
+  font-family: inherit;
+  width: 100%;
 }
-
-.n-input-icon.is-suffix[data-v-5b5ed8a8]{
-  right: 0.85rem;
+.n-input[data-v-58540fa7]::placeholder{
+  color: var(--n-color-text-muted);
 }
-
-.n-input-actions[data-v-5b5ed8a8]{
-  position: absolute;
-  right: 0.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  gap: 0.15rem;
+.n-input[data-v-58540fa7]:disabled{
+  cursor: not-allowed;
 }
-
-.n-input-action[data-v-5b5ed8a8]{
+.n-input-prefix[data-v-58540fa7], 
+.n-input-suffix[data-v-58540fa7]{
+  padding: 0 0.75rem;
+  color: var(--n-color-text-muted);
+  font-size: 0.875rem;
+  user-select: none;
+}
+.n-input-clear[data-v-58540fa7]{
   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);
+  padding: 0.5rem;
+  color: var(--n-color-text-muted);
+  transition: color var(--n-transition-fast);
   display: flex;
   align-items: center;
-  line-height: 1;
+  justify-content: center;
 }
-
-.n-input-action[data-v-5b5ed8a8]:hover{
+.n-input-clear[data-v-58540fa7]:hover{
   color: var(--n-color-text);
-  background: var(--n-color-glass);
 }
-
-.n-input-bottom[data-v-5b5ed8a8]{
+.n-input-error[data-v-58540fa7]{
+  font-size: 0.75rem;
+  color: var(--n-color-danger);
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 0 var(--n-space-1);
-}
-
-.n-input-error-msg[data-v-5b5ed8a8]{
-  font-size: var(--n-text-xs);
-  color: var(--n-color-danger);
-}
-
-.n-input-counter[data-v-5b5ed8a8]{
-  font-size: var(--n-text-xs);
-  color: var(--n-color-text-muted);
-  margin-left: auto;
-}
-
-.is-disabled[data-v-5b5ed8a8]{
-  position: relative;
-}
-
-.is-disabled[data-v-5b5ed8a8]::after{
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: var(--n-color-glass);
-  border-radius: var(--n-radius-md);
-  pointer-events: none;
-  z-index: 2;
-}
-
-.is-disabled .n-input[data-v-5b5ed8a8]{
-  cursor: not-allowed;
-  background: var(--n-color-surface-alt);
+  gap: 0.25rem;
 }`
-injectStyle('data-v-5b5ed8a8', __style)
+injectStyle('data-v-58540fa7', __style)