nexa-ui-kit 0.6.0

package/dist/components/NDatepicker.nexa

@@ -0,0 +1,367 @@
+<script setup>
+import { signal, computed, onBeforeUnmount } from 'nexa-framework'
+import NInput from './NInput.nexa'
+import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  placeholder: { type: String, default: 'Seleccionar fecha' },
+  disabled: { type: Boolean, default: false },
+  min: { type: String, default: '' },
+  max: { type: String, default: '' },
+  placement: { type: String, default: 'auto' }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const isOpen = signal(false)
+const viewDate = signal(new Date())
+const instanceId = `n-dp-${Math.random().toString(16).slice(2)}`
+const popupStyle = signal({})
+const resolvedPlacement = signal('bottom')
+let stopTracking = null
+
+const today = new Date()
+today.setHours(0, 0, 0, 0)
+
+const year = computed(() => viewDate.value.getFullYear())
+const month = computed(() => viewDate.value.getMonth())
+
+const daysInMonth = computed(() => new Date(year.value, month.value + 1, 0).getDate())
+const firstDayOfWeek = computed(() => new Date(year.value, month.value, 1).getDay())
+
+const calendarDays = computed(() => {
+  const days = []
+  const totalCells = Math.ceil((firstDayOfWeek.value + daysInMonth.value) / 7) * 7
+  for (let i = 0; i < totalCells; i++) {
+    const day = i - firstDayOfWeek.value + 1
+    if (day > 0 && day <= daysInMonth.value) {
+      days.push(day)
+    } else {
+      days.push(null)
+    }
+  }
+  return days
+})
+
+const formatDate = (d) => {
+  const y = d.getFullYear()
+  const m = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+const parseDate = (value) => {
+  if (!value) return null
+  const parts = String(value).split('-')
+  if (parts.length !== 3) return null
+  const y = Number(parts[0])
+  const m = Number(parts[1])
+  const d = Number(parts[2])
+  if (!Number.isFinite(y) || !Number.isFinite(m) || !Number.isFinite(d)) return null
+  const date = new Date(y, m - 1, d)
+  if (date.getFullYear() !== y || date.getMonth() !== m - 1 || date.getDate() !== d) return null
+  date.setHours(0, 0, 0, 0)
+  return date
+}
+
+const minDate = computed(() => parseDate(props.min))
+const maxDate = computed(() => parseDate(props.max))
+
+const isDisabled = (day) => {
+  if (day == null) return true
+  const d = new Date(year.value, month.value, day)
+  d.setHours(0, 0, 0, 0)
+  const min = minDate.value
+  if (min && d < min) return true
+  const max = maxDate.value
+  if (max && d > max) return true
+  return false
+}
+
+const closePopup = () => {
+  if (!isOpen.value) return
+  isOpen.value = false
+  if (closeHandler) {
+    document.removeEventListener('click', closeHandler)
+    closeHandler = null
+  }
+  if (stopTracking) {
+    stopTracking()
+    stopTracking = null
+  }
+  rootEl.value = null
+}
+
+const syncViewDateFromModel = () => {
+  const selected = parseDate(props.modelValue)
+  if (!selected) return
+  viewDate.value = new Date(selected.getFullYear(), selected.getMonth(), 1)
+}
+
+const selectDate = (day) => {
+  if (day == null) return
+  if (isDisabled(day)) return
+  const d = new Date(year.value, month.value, day)
+  const formatted = formatDate(d)
+  emit('update:modelValue', formatted)
+  closePopup()
+}
+
+const prevMonth = () => {
+  viewDate.value = new Date(year.value, month.value - 1, 1)
+}
+
+const nextMonth = () => {
+  viewDate.value = new Date(year.value, month.value + 1, 1)
+}
+
+const monthNames = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
+const dayNames = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa']
+
+const isSelected = (day) => {
+  if (!props.modelValue) return false
+  const d = new Date(year.value, month.value, day)
+  return props.modelValue === formatDate(d)
+}
+
+const isToday = (day) => {
+  const d = new Date(year.value, month.value, day)
+  return formatDate(d) === formatDate(today)
+}
+
+let closeHandler = null
+const rootEl = signal(null)
+
+const openPopup = (e) => {
+  if (props.disabled) return
+  if (isOpen.value) {
+    closePopup()
+    return
+  }
+  isOpen.value = true
+  syncViewDateFromModel()
+  const target = e?.currentTarget || e?.target
+  rootEl.value = target?.closest ? target.closest(`[data-datepicker-root="${instanceId}"]`) : null
+  stopTracking = trackFloatingOverlay({
+    isOpen: () => isOpen.value,
+    getAnchor: () => {
+      const root = rootEl.value
+      return root ? root.querySelector('.n-datepicker-input') : null
+    },
+    getPopup: () => document.querySelector(`[data-datepicker-popup="${instanceId}"]`),
+    placement: props.placement,
+    align: 'start',
+    matchWidth: true,
+    minWidth: 240,
+    gap: 6,
+    margin: 8,
+    zIndex: 9999,
+    onUpdate: (result) => {
+      popupStyle.value = result.style
+      resolvedPlacement.value = result.placement
+    },
+    isEventInside: (event) => {
+      const t = event.target
+      if (!t || typeof t.closest !== 'function') return false
+      if (t.closest(`[data-datepicker-root="${instanceId}"]`)) return true
+      if (t.closest(`[data-datepicker-popup="${instanceId}"]`)) return true
+      return false
+    },
+    onOutside: () => closePopup(),
+  })
+  if (closeHandler) document.removeEventListener('click', closeHandler)
+  closeHandler = (e) => {
+    const target = e.target
+    if (target && typeof target.closest === 'function') {
+      if (target.closest(`[data-datepicker-root="${instanceId}"]`)) return
+      if (target.closest(`[data-datepicker-popup="${instanceId}"]`)) return
+    }
+    closePopup()
+  }
+  setTimeout(() => document.addEventListener('click', closeHandler), 0)
+}
+
+onBeforeUnmount(() => {
+  closePopup()
+})
+</script>
+
+<template>
+  <div class="n-datepicker" :data-datepicker-root="instanceId">
+    <div class="n-datepicker-input" @click="openPopup">
+      <NInput
+        :modelValue="modelValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        readonly
+      />
+      <span class="n-datepicker-icon">📅</span>
+    </div>
+
+    <Teleport to="body">
+      <div v-if="isOpen.value" class="n-datepicker-dropdown" :class="{ 'is-top': resolvedPlacement.value === 'top' }" :data-datepicker-popup="instanceId" :style="popupStyle.value">
+        <div class="n-datepicker-header">
+          <button type="button" class="n-datepicker-nav" @click="prevMonth">‹</button>
+          <span class="n-datepicker-title">{{ monthNames[month.value] }} {{ year.value }}</span>
+          <button type="button" class="n-datepicker-nav" @click="nextMonth">›</button>
+        </div>
+
+        <div class="n-datepicker-grid">
+          <div v-for="d in dayNames" :key="d" class="n-datepicker-day-header">{{ d }}</div>
+          <div
+            v-for="(day, i) in calendarDays.value"
+            :key="i"
+            :class="{
+              'n-datepicker-day': true,
+              'is-empty': day === null,
+              'is-disabled': day !== null && isDisabled(day),
+              'is-selected': day !== null && isSelected(day),
+              'is-today': day !== null && isToday(day)
+            }"
+            @click="selectDate(day)"
+          >{{ day ?? '' }}</div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.n-datepicker {
+  position: relative;
+  display: inline-block;
+  font-family: var(--n-font-sans);
+}
+
+.n-datepicker-input {
+  position: relative;
+  cursor: pointer;
+}
+
+.n-datepicker-input .n-input {
+  cursor: pointer;
+}
+
+.n-datepicker-icon {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1rem;
+  pointer-events: none;
+}
+
+.n-datepicker-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: var(--n-z-dropdown);
+  background: var(--n-color-surface-elevated);
+  border: 1px solid var(--n-color-border);
+  border-radius: var(--n-radius-lg);
+  box-shadow: var(--n-shadow-lg);
+  padding: 1rem;
+  width: 280px;
+  animation: fade-in 0.15s ease;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.n-datepicker-dropdown.is-top {
+  animation: fade-in-top 0.15s ease;
+}
+
+@keyframes fade-in-top {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.n-datepicker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.n-datepicker-title {
+  font-weight: var(--n-weight-semibold);
+  font-size: var(--n-text-sm);
+  color: var(--n-color-text);
+}
+
+.n-datepicker-nav {
+  background: none;
+  border: 1px solid var(--n-color-border);
+  color: var(--n-color-text-secondary);
+  width: 28px;
+  height: 28px;
+  border-radius: var(--n-radius-sm);
+  cursor: pointer;
+  font-size: 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--n-transition-fast);
+}
+
+.n-datepicker-nav:hover {
+  background: var(--n-color-surface-hover);
+  color: var(--n-color-text);
+}
+
+.n-datepicker-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.n-datepicker-day-header {
+  text-align: center;
+  font-size: var(--n-text-xs);
+  color: var(--n-color-text-muted);
+  font-weight: var(--n-weight-semibold);
+  padding: 0.35rem 0;
+}
+
+.n-datepicker-day {
+  text-align: center;
+  padding: 0.4rem 0;
+  font-size: var(--n-text-sm);
+  color: var(--n-color-text);
+  border-radius: var(--n-radius-sm);
+  cursor: pointer;
+  transition: all var(--n-transition-fast);
+}
+
+.n-datepicker-day:hover:not(.is-empty) {
+  background: var(--n-color-primary-light);
+}
+
+.n-datepicker-day.is-empty {
+  cursor: default;
+}
+
+.n-datepicker-day.is-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.n-datepicker-day.is-disabled:hover {
+  background: transparent;
+}
+
+.n-datepicker-day.is-today {
+  font-weight: var(--n-weight-bold);
+  color: var(--n-color-primary);
+}
+
+.n-datepicker-day.is-selected {
+  background: var(--n-color-primary);
+  color: white;
+  font-weight: var(--n-weight-semibold);
+}
+</style>

package/dist/components/NForm.js

@@ -0,0 +1,132 @@
+import { signal, computed, provide, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-38e99ca2',
+  __hmrId: 'NForm_nexa',
+  props: {
+  validateOn: { type: String, default: 'submit' },
+  disabled: { type: Boolean, default: false }
+},
+  emits: ['submit', 'invalid'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    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,
+    })
+    return { fieldNames, fields, registerField, getValues, values, errors, pending, valid, validateAll, reset, submit, onSubmit, provide, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { fieldNames, fields, registerField, getValues, values, errors, pending, valid, validateAll, reset, submit, onSubmit, provide, $slots, emit, validateOn, disabled, Fragment: _ntc_Fragment } = ctx
+    return h('form', { class: "n-form", onSubmit: onSubmit, "data-v-38e99ca2": "" }, [
+        "\n    ",
+        ctx.$slots.default ? ctx.$slots.default({ values: values, errors: errors, valid: valid, pending: pending, submit: submit, reset: reset }) : null,
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-38e99ca2'
+_sfc_main.__hmrId = 'NForm_nexa'
+
+export default _sfc_main
+
+const __style = `.n-form[data-v-38e99ca2]{
+  display: flex;
+  flex-direction: column;
+  gap: var(--n-space-4);
+  width: 100%;
+}`
+injectStyle('data-v-38e99ca2', __style)

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