nexa-ui-kit 0.6.0

package/src/components/NPassword.nexa

@@ -0,0 +1,178 @@
+<script setup>
+import { signal, computed } from 'nexa-framework'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  label: { type: String, default: '' },
+  error: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  name: { type: String, default: '' },
+  autocomplete: { type: String, default: 'current-password' },
+  id: { type: String, default: '' },
+  clearable: { type: Boolean, default: false },
+  toggleMask: { type: Boolean, default: true },
+  showStrength: { type: Boolean, default: true },
+  validate: { type: Boolean, default: true },
+  showRequirements: { type: Boolean, default: true },
+  minLength: { type: Number, default: 8 },
+  requireLower: { type: Boolean, default: true },
+  requireUpper: { type: Boolean, default: true },
+  requireNumber: { type: Boolean, default: true },
+  requireSpecial: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['update:modelValue', 'clear'])
+
+const instanceId = `n-pwd-${Math.random().toString(16).slice(2)}`
+const inputId = computed(() => props.id || instanceId)
+
+const masked = signal(true)
+
+const type = computed(() => (props.toggleMask && masked.value ? 'password' : 'text'))
+
+const hasValue = computed(() => !!props.modelValue)
+
+const requirements = computed(() => {
+  const value = props.modelValue || ''
+  const lengthOk = value.length >= props.minLength
+  const lowerOk = !props.requireLower || /[a-z]/.test(value)
+  const upperOk = !props.requireUpper || /[A-Z]/.test(value)
+  const numberOk = !props.requireNumber || /\d/.test(value)
+  const specialOk = !props.requireSpecial || /[^A-Za-z0-9]/.test(value)
+  return [
+    { key: 'length', ok: lengthOk, label: `Mínimo ${props.minLength} caracteres` },
+    { key: 'lower', ok: lowerOk, label: 'Al menos una minúscula' },
+    { key: 'upper', ok: upperOk, label: 'Al menos una mayúscula' },
+    { key: 'number', ok: numberOk, label: 'Al menos un número' },
+    { key: 'special', ok: specialOk, label: 'Al menos un carácter especial' },
+  ].filter(r => {
+    if (r.key === 'lower') return props.requireLower
+    if (r.key === 'upper') return props.requireUpper
+    if (r.key === 'number') return props.requireNumber
+    if (r.key === 'special') return props.requireSpecial
+    return true
+  })
+})
+
+const strength = computed(() => {
+  const value = props.modelValue || ''
+  if (!value) return { score: 0, label: '' }
+  let score = 0
+  if (value.length >= props.minLength) score++
+  if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score++
+  if (/\d/.test(value)) score++
+  if (/[^A-Za-z0-9]/.test(value)) score++
+  const label = score <= 1 ? 'Débil' : score === 2 ? 'Media' : score === 3 ? 'Fuerte' : 'Muy fuerte'
+  return { score, label }
+})
+
+const internalError = computed(() => {
+  if (!props.validate) return ''
+  if (!props.modelValue) return ''
+  const first = requirements.value.find(r => !r.ok)
+  return first ? `Contraseña inválida: ${first.label}` : ''
+})
+
+const errorMessage = computed(() => props.error || internalError.value)
+const ariaInvalid = computed(() => (errorMessage.value ? 'true' : 'false'))
+
+const describedBy = computed(() => {
+  const ids = []
+  if (errorMessage.value) ids.push(`${inputId.value}-error`)
+  if (props.showStrength && hasValue.value) ids.push(`${inputId.value}-strength`)
+  if (props.showRequirements && props.validate && hasValue.value) ids.push(`${inputId.value}-requirements`)
+  return ids.join(' ') || undefined
+})
+
+const onInput = (e) => {
+  emit('update:modelValue', e.target.value)
+}
+
+const clear = (e) => {
+  if (props.disabled || props.readonly) return
+  e?.preventDefault?.()
+  emit('update:modelValue', '')
+  emit('clear')
+}
+
+const toggle = (e) => {
+  if (props.disabled) return
+  e?.preventDefault?.()
+  masked.value = !masked.value
+}
+</script>
+
+<template>
+  <div class="n-password">
+    <label v-if="label" class="n-password-label" :for="inputId.value">{{ label }}</label>
+    <div class="n-password-wrapper" :class="{ 'has-error': !!errorMessage.value, 'is-disabled': disabled }">
+      <input
+        class="n-password-input"
+        :id="inputId.value"
+        :name="name || undefined"
+        :type="type.value"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :autocomplete="autocomplete"
+        :aria-invalid="ariaInvalid.value"
+        :aria-describedby="describedBy.value"
+        @input="onInput"
+      />
+      <div class="n-password-actions">
+        <button v-if="clearable && modelValue" type="button" class="n-password-action" :disabled="disabled || readonly" aria-label="Limpiar" @click="clear">✕</button>
+        <button v-if="toggleMask" type="button" class="n-password-action" :aria-pressed="(!masked.value).toString()" :disabled="disabled" :aria-label="masked.value ? 'Mostrar contraseña' : 'Ocultar contraseña'" @click="toggle">
+          {{ masked.value ? '👁' : '🙈' }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="errorMessage.value" class="n-password-error" :id="inputId.value + '-error'" role="alert">
+      {{ errorMessage.value }}
+    </div>
+
+    <div v-if="showStrength && modelValue" class="n-password-strength" :id="inputId.value + '-strength'">
+      <div class="n-password-meter" role="progressbar" :aria-valuemin="0" :aria-valuemax="4" :aria-valuenow="strength.value.score" :aria-label="'Fuerza de contraseña: ' + strength.value.label">
+        <span v-for="n in [1, 2, 3, 4]" :key="n" class="n-password-meter-seg" :class="{ 'is-on': n <= strength.value.score }"></span>
+      </div>
+      <span class="n-password-strength-label">{{ strength.value.label }}</span>
+    </div>
+
+    <ul v-if="showRequirements && validate && modelValue" class="n-password-req" :id="inputId.value + '-requirements'">
+      <li v-for="r in requirements.value" :key="r.key" class="n-password-req-item" :class="{ 'is-ok': r.ok }">
+        <span class="n-password-req-icon">{{ r.ok ? '✓' : '•' }}</span>
+        <span>{{ r.label }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.n-password { display:flex; flex-direction:column; gap: var(--n-space-2); width:100%; font-family: var(--n-font-sans); }
+.n-password-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-password-wrapper { position:relative; display:flex; align-items:center; background: var(--n-color-bg); border: 1px solid var(--n-color-border); border-radius: var(--n-radius-md); transition: all var(--n-transition-normal); }
+.n-password-wrapper:focus-within { border-color: var(--n-color-primary); box-shadow: 0 0 0 3px var(--n-color-primary-light); background: var(--n-color-surface); }
+.n-password-wrapper.has-error { border-color: var(--n-color-danger); }
+.n-password-wrapper.has-error:focus-within { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
+.n-password-input { width:100%; background:transparent; border:none; outline:none; color: var(--n-color-text); padding: 0.75rem 2.75rem 0.75rem 1rem; font-size: var(--n-text-base); font-family: inherit; }
+.n-password-input::placeholder { color: var(--n-color-text-muted); }
+.n-password-actions { position:absolute; right: 0.5rem; display:flex; align-items:center; gap: 0.15rem; }
+.n-password-action { background:transparent; border:none; color: var(--n-color-text-muted); cursor:pointer; padding: 0.25rem; border-radius: var(--n-radius-sm); transition: all var(--n-transition-fast); line-height: 1; display:flex; align-items:center; }
+.n-password-action:hover:not(:disabled) { color: var(--n-color-text); background: var(--n-color-glass); }
+.n-password-action:disabled { opacity: 0.5; cursor: not-allowed; }
+.n-password-error { font-size: var(--n-text-xs); color: var(--n-color-danger); padding: 0 var(--n-space-1); }
+.n-password-strength { display:flex; align-items:center; gap: var(--n-space-2); padding: 0 var(--n-space-1); }
+.n-password-meter { display:grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 120px; }
+.n-password-meter-seg { height: 6px; border-radius: var(--n-radius-full); background: var(--n-color-border); transition: background var(--n-transition-fast); }
+.n-password-meter-seg.is-on { background: var(--n-color-primary); }
+.n-password-strength-label { font-size: var(--n-text-xs); color: var(--n-color-text-muted); }
+.n-password-req { list-style:none; padding: 0 var(--n-space-1); margin: 0; display:flex; flex-direction:column; gap: 0.25rem; }
+.n-password-req-item { display:flex; gap: var(--n-space-2); align-items:flex-start; font-size: var(--n-text-xs); color: var(--n-color-text-muted); }
+.n-password-req-item.is-ok { color: var(--n-color-success); }
+.n-password-req-icon { width: 14px; display:inline-flex; justify-content:center; flex-shrink:0; }
+.n-password-wrapper.is-disabled { opacity: 0.5; cursor: not-allowed; background: var(--n-color-surface-alt); }
+.n-password-wrapper.is-disabled .n-password-input { cursor: not-allowed; }
+</style>

package/src/components/NProgressBar.nexa

@@ -0,0 +1,111 @@
+<script setup>
+import { computed } from 'nexa-framework'
+
+const props = defineProps({
+  value: { type: Number, default: 0 },
+  max: { type: Number, default: 100 },
+  variant: { type: String, default: 'primary' },
+  size: { type: String, default: 'md' },
+  showLabel: { type: Boolean, default: false },
+  striped: { type: Boolean, default: false },
+  animated: { type: Boolean, default: false }
+})
+
+const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props.max) * 100)))
+</script>
+
+<template>
+  <div class="n-progress" :class="[`is-${size}`, striped ? 'is-striped' : '', animated ? 'is-animated' : '']">
+    <div class="n-progress-track">
+      <div
+        class="n-progress-bar"
+        :class="`is-${variant}`"
+        :style="{ width: percentage.value + '%' }"
+      >
+        <span v-if="showLabel && percentage.value > 15" class="n-progress-label">{{ Math.round(percentage.value) }}%</span>
+      </div>
+    </div>
+    <span v-if="showLabel && percentage.value <= 15" class="n-progress-label-outside">{{ Math.round(percentage.value) }}%</span>
+  </div>
+</template>
+
+<style scoped>
+.n-progress {
+  display: flex;
+  align-items: center;
+  gap: var(--n-space-3);
+  width: 100%;
+}
+
+.n-progress-track {
+  flex: 1;
+  background: var(--n-color-surface-alt);
+  border-radius: var(--n-radius-full);
+  overflow: hidden;
+}
+
+.is-sm .n-progress-track { height: 6px; }
+.is-md .n-progress-track { height: 10px; }
+.is-lg .n-progress-track { height: 14px; }
+
+.n-progress-bar {
+  height: 100%;
+  border-radius: var(--n-radius-full);
+  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 0.35rem;
+  min-width: 0;
+}
+
+.is-primary { background: var(--n-color-primary); }
+.is-success { background: var(--n-color-success); }
+.is-danger { background: var(--n-color-danger); }
+.is-warning { background: var(--n-color-warning); }
+.is-info { background: var(--n-color-info); }
+
+.n-progress-label {
+  color: white;
+  font-size: 0.65rem;
+  font-weight: var(--n-weight-bold);
+  white-space: nowrap;
+  line-height: 1;
+}
+
+.is-lg .n-progress-label {
+  font-size: var(--n-text-xs);
+}
+
+.n-progress-label-outside {
+  font-size: var(--n-text-xs);
+  font-weight: var(--n-weight-semibold);
+  color: var(--n-color-text-secondary);
+  flex-shrink: 0;
+  min-width: 3rem;
+  text-align: right;
+}
+
+.is-striped .n-progress-bar {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.12) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.12) 50%,
+    rgba(255, 255, 255, 0.12) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 1rem 1rem;
+}
+
+.is-animated .n-progress-bar {
+  animation: n-progress-stripe 1s linear infinite;
+}
+
+@keyframes n-progress-stripe {
+  from { background-position: 1rem 0; }
+  to { background-position: 0 0; }
+}
+</style>

package/src/components/NRadio.nexa

@@ -0,0 +1,81 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: [String, Number], default: '' },
+  value: { type: [String, Number], default: '' },
+  label: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  name: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const isChecked = () => props.modelValue === props.value
+
+const select = () => {
+  if (props.disabled) return
+  emit('update:modelValue', props.value)
+}
+</script>
+
+<template>
+  <label class="n-radio" :class="{ 'is-checked': isChecked(), 'is-disabled': disabled }">
+    <div class="n-radio-circle" @click="select">
+      <div class="n-radio-dot"></div>
+    </div>
+    <span v-if="label" class="n-radio-label">{{ label }}</span>
+  </label>
+</template>
+
+<style scoped>
+.n-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--n-space-3);
+  cursor: pointer;
+  user-select: none;
+}
+
+.n-radio-circle {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--n-color-border);
+  border-radius: var(--n-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--n-transition-fast);
+  flex-shrink: 0;
+}
+
+.is-checked .n-radio-circle {
+  border-color: var(--n-color-primary);
+}
+
+.n-radio-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--n-radius-full);
+  background: var(--n-color-primary);
+  transform: scale(0);
+  transition: all var(--n-transition-spring);
+}
+
+.is-checked .n-radio-dot {
+  transform: scale(1);
+}
+
+.n-radio-label {
+  font-size: var(--n-text-sm);
+  color: var(--n-color-text);
+  font-weight: var(--n-weight-medium);
+}
+
+.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.n-radio:hover:not(.is-disabled) .n-radio-circle {
+  border-color: var(--n-color-primary);
+}
+</style>