nexa-ui-kit 0.11.6 → 0.11.9

package/dist/components/NInput.nexa

@@ -1,5 +1,5 @@
 <script setup>
-import { signal, computed, inject, effect } from 'nexa-framework'
+import { signal, computed } from 'nexa-framework'
 
 const props = defineProps({
   modelValue: { type: [String, Number], default: '' },
@@ -7,327 +7,157 @@ const props = defineProps({
   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: '' }
 })
 
-const emit = defineEmits(['update:modelValue', 'clear', 'focus', 'blur'])
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'clear'])
 
-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
-}
 </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>
+  <div class="n-input-wrapper" :class="{ 'is-focused': isFocused, 'is-error': error, 'is-disabled': disabled }">
+    <label v-if="label" class="n-input-label">
+      {{ label }}
+      <span v-if="required" class="n-input-required">*</span>
+    </label>
+    <div class="n-input-container">
+      <span v-if="prefix" class="n-input-prefix">{{ prefix }}</span>
       <input
-        :id="effectiveId.value || undefined"
-        :name="name || undefined"
-        :type="inputType.value"
-        :value="draft.value"
+        :type="type"
+        :value="modelValue"
         :placeholder="placeholder"
-        :disabled="effectiveDisabled.value"
+        :disabled="disabled"
         :readonly="readonly"
-        :autocomplete="autocomplete || undefined"
-        :aria-describedby="effectiveDescribedBy.value || undefined"
-        :aria-invalid="effectiveInvalid.value || undefined"
-        :maxlength="maxlength || undefined"
+        :required="required"
         class="n-input"
-        :class="{ 'has-prefix': !!prefixIcon, 'has-suffix': !!suffixIcon || clearable || type === 'password' }"
-        @input="onInput"
-        @focus="onFocus"
-        @blur="onBlur"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
       />
-      <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" aria-label="Clear"><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"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button>
-        <button v-if="type === 'password'" class="n-input-action" @click="togglePassword" tabindex="-1" type="button" :aria-label="showPassword.value ? 'Hide password' : 'Show password'">
-          <svg v-if="!showPassword.value" 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"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-          <svg v-else 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"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/><path d="M23 1L1 23"/></svg>
-        </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>
+      <button v-if="clearable && modelValue" class="n-input-clear" @click="handleClear" type="button">
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <line x1="18" y1="6" x2="6" y2="18"/>
+          <line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+      </button>
+      <span v-if="suffix" class="n-input-suffix">{{ suffix }}</span>
     </div>
+    <span v-if="error" class="n-input-error">{{ error }}</span>
   </div>
 </template>
 
 <style scoped>
-.n-input-group {
+.n-input-wrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--n-space-2);
+  gap: 0.5rem;
   width: 100%;
 }
-
 .n-input-label {
-  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;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--n-color-text);
+  letter-spacing: normal;
 }
-
-.n-input-wrapper {
+.n-input-required {
+  color: var(--n-color-danger);
+  margin-left: 0.25rem;
+}
+.n-input-container {
   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);
+  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 {
-  padding-left: 2.5rem;
-}
-
-.n-input.has-suffix {
-  padding-right: 2.5rem;
-}
-
-.n-input::placeholder {
-  color: var(--n-color-text-muted);
+  transition: background-color var(--n-transition-fast), border-color var(--n-transition-fast), color var(--n-transition-fast), box-shadow var(--n-transition-fast);
 }
-
-.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) cubic-bezier(0.16, 1, 0.3, 1);
-  z-index: 0;
+.n-input-container:hover {
+  border-color: var(--n-color-border-hover);
 }
-
-.is-focused .n-input-focus-ring {
-  opacity: 0.15;
-}
-
-.is-focused .n-input {
+.is-focused .n-input-container {
   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 {
+.is-error .n-input-container {
   border-color: var(--n-color-danger);
 }
-
-.has-error .n-input-focus-ring {
-  background: var(--n-color-danger);
-  opacity: 0.35;
+.is-error.is-focused .n-input-container {
+  box-shadow: var(--n-ring-danger);
 }
-
-.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;
+.is-disabled .n-input-container {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: var(--n-color-surface-alt);
 }
-
-.n-input-icon.is-prefix {
-  left: 0.85rem;
+.n-input {
+  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 {
-  right: 0.85rem;
+.n-input::placeholder {
+  color: var(--n-color-text-muted);
 }
-
-.n-input-actions {
-  position: absolute;
-  right: 0.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  gap: 0.15rem;
+.n-input:disabled {
+  cursor: not-allowed;
 }
-
-.n-input-action {
+.n-input-prefix,
+.n-input-suffix {
+  padding: 0 0.75rem;
+  color: var(--n-color-text-muted);
+  font-size: 0.875rem;
+  user-select: none;
+}
+.n-input-clear {
   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:hover {
+.n-input-clear:hover {
   color: var(--n-color-text);
-  background: var(--n-color-glass);
 }
-
-.n-input-bottom {
+.n-input-error {
+  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 {
-  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 {
-  position: relative;
-}
-
-.is-disabled::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 {
-  cursor: not-allowed;
-  background: var(--n-color-surface-alt);
+  gap: 0.25rem;
 }
 </style>

package/dist/components/NInputNumber.nexa

@@ -227,6 +227,6 @@ const onFocus = () => {
   </div>
 </template>
 
-<style scoped>
+<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>

package/dist/components/NModal.js

@@ -127,122 +127,5 @@ _sfc_main.__hmrId = 'NModal_nexa'
 
 export default _sfc_main
 
-const __style = `.n-modal-root[data-v-46af727f]{
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--n-z-modal);
-}
-
-.n-modal-overlay[data-v-46af727f]{
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--n-color-overlay);
-  backdrop-filter: blur(8px);
-  opacity: 0;
-  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.n-modal-overlay.is-active[data-v-46af727f]{
-  opacity: 1;
-}
-
-.n-modal-container[data-v-46af727f]{
-  position: relative;
-  width: 90%;
-  background: var(--n-color-surface);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid var(--n-color-glass-border);
-  border-radius: var(--n-radius-2xl);
-  box-shadow: var(--n-shadow-xl), var(--n-shadow-glow-primary), 0 0 0 1px var(--n-color-glass-border);
-  transform: scale(0.9) translateY(20px);
-  opacity: 0;
-  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-  overflow: hidden;
-  outline: none;
-  max-height: 85vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.n-modal-container.is-active[data-v-46af727f]{
-  transform: scale(1) translateY(0);
-  opacity: 1;
-}
-
-.n-modal-header[data-v-46af727f]{
-  padding: var(--n-space-6) var(--n-space-8);
-  border-bottom: 1px solid var(--n-color-border);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.n-modal-header h3[data-v-46af727f]{
-  margin: 0;
-  font-size: var(--n-text-xl);
-  font-weight: var(--n-weight-bold);
-  color: var(--n-color-text);
-}
-
-.n-modal-close[data-v-46af727f]{
-  background: transparent;
-  border: none;
-  color: var(--n-color-text-secondary);
-  font-size: 1.75rem;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-  padding: 0;
-  line-height: 1;
-  width: 44px;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--n-radius-lg);
-  flex-shrink: 0;
-}
-
-.n-modal-close[data-v-46af727f]:hover{
-  color: var(--n-color-text);
-  background: var(--n-color-glass-hover);
-  transform: scale(1.1);
-}
-
-.n-modal-close[data-v-46af727f]:active{
-  transform: scale(0.95);
-}
-
-.n-modal-close[data-v-46af727f]:focus-visible{
-  outline: 2px solid var(--n-color-primary);
-  outline-offset: 2px;
-}
-
-.n-modal-content[data-v-46af727f]{
-  padding: var(--n-space-8);
-  color: var(--n-color-text-secondary);
-  overflow-y: auto;
-  overflow-x: hidden;
-  flex: 1;
-}
-
-.n-modal-footer[data-v-46af727f]{
-  padding: var(--n-space-5) var(--n-space-8);
-  background: var(--n-color-glass);
-  border-top: 1px solid var(--n-color-border);
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--n-space-4);
-  flex-shrink: 0;
-}`
+const __style = `.n-modal-root[data-v-46af727f]{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--n-z-modal);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--n-color-overlay);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
  position: relative;
  width: 90%;
  background: var(--n-color-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--n-color-glass-border);
  border-radius: var(--n-radius-2xl);
  box-shadow: var(--n-shadow-xl), var(--n-shadow-glow-primary), 0 0 0 1px var(--n-color-glass-border);
  transform: scale(0.9) translateY(20px);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  outline: none;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: scale(1) translateY(0);
  opacity: 1;
  padding: var(--n-space-6) var(--n-space-8);
  border-bottom: 1px solid var(--n-color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  font-size: var(--n-text-xl);
  font-weight: var(--n-weight-bold);
  color: var(--n-color-text);
  background: transparent;
  border: none;
  color: var(--n-color-text-secondary);
  font-size: 1.75rem;
  cursor: pointer;
  transition: color var(--n-transition-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--n-radius-lg);
  flex-shrink: 0;
  color: var(--n-color-text);
  background: var(--n-color-glass-hover);
  transform: scale(0.95);
  outline: 2px solid var(--n-color-primary);
  outline-offset: 2px;
  padding: var(--n-space-8);
  color: var(--n-color-text-secondary);
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding: var(--n-space-5) var(--n-space-8);
  background: var(--n-color-glass);
  border-top: 1px solid var(--n-color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--n-space-4);
  flex-shrink: 0;
 injectStyle('data-v-46af727f', __style)