nexa-ui-kit 0.6.0

package/dist/components/NDatepicker.js

@@ -0,0 +1,379 @@
+import { signal, computed, onBeforeUnmount, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
+import NInput from './NInput.js'
+import { trackFloatingOverlay } from '../services/FloatingOverlay.js'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-69fa2c78',
+  __hmrId: 'NDatepicker_nexa',
+  props: {
+  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' }
+},
+  emits: ['update:modelValue'],
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    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()
+    })
+    return { isOpen, viewDate, instanceId, popupStyle, resolvedPlacement, stopTracking, today, year, month, daysInMonth, firstDayOfWeek, calendarDays, formatDate, parseDate, minDate, maxDate, isDisabled, closePopup, syncViewDateFromModel, selectDate, prevMonth, nextMonth, monthNames, dayNames, isSelected, isToday, closeHandler, rootEl, openPopup, onBeforeUnmount, NInput, trackFloatingOverlay, $slots, emit }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { isOpen, viewDate, instanceId, popupStyle, resolvedPlacement, stopTracking, today, year, month, daysInMonth, firstDayOfWeek, calendarDays, formatDate, parseDate, minDate, maxDate, isDisabled, closePopup, syncViewDateFromModel, selectDate, prevMonth, nextMonth, monthNames, dayNames, isSelected, isToday, closeHandler, rootEl, openPopup, onBeforeUnmount, NInput: _ntc_NInput, trackFloatingOverlay, $slots, emit, modelValue, placeholder, disabled, min, max, placement, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+    return h('div', { class: "n-datepicker", "data-datepicker-root": instanceId, "data-v-69fa2c78": "" }, [
+        "\n    ",
+        h('div', { class: "n-datepicker-input", onClick: openPopup, "data-v-69fa2c78": "" }, [
+        "\n      ",
+        h(_ntc_NInput, { modelValue: modelValue, placeholder: placeholder, disabled: disabled, readonly: true, "data-v-69fa2c78": "" }),
+        "\n      ",
+        h('span', { class: "n-datepicker-icon", "data-v-69fa2c78": "" }, [
+        "📅"
+      ]),
+        "\n    "
+      ]),
+        "\n\n    ",
+        h(_ntc_Teleport, { to: "body", "data-v-69fa2c78": "" }, [
+        "\n      ",
+        (isOpen.value) ? h('div', { class: ["n-datepicker-dropdown", { 'is-top': resolvedPlacement.value === 'top' }], "data-datepicker-popup": instanceId, style: popupStyle.value, "data-v-69fa2c78": "" }, [
+        "\n        ",
+        h('div', { class: "n-datepicker-header", "data-v-69fa2c78": "" }, [
+        "\n          ",
+        h('button', { class: "n-datepicker-nav", type: "button", onClick: prevMonth, "data-v-69fa2c78": "" }, [
+        "‹"
+      ]),
+        "\n          ",
+        h('span', { class: "n-datepicker-title", "data-v-69fa2c78": "" }, [
+        monthNames[month.value],
+        " ",
+        year.value
+      ]),
+        "\n          ",
+        h('button', { class: "n-datepicker-nav", type: "button", onClick: nextMonth, "data-v-69fa2c78": "" }, [
+        "›"
+      ]),
+        "\n        "
+      ]),
+        "\n\n        ",
+        h('div', { class: "n-datepicker-grid", "data-v-69fa2c78": "" }, [
+        "\n          ",
+        dayNames.map((d, index) =>
+        h('div', { class: "n-datepicker-day-header", key: d, "data-v-69fa2c78": "" }, [
+        d
+      ])
+      ),
+        "\n          ",
+        calendarDays.value.map((day, i) =>
+        h('div', { 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)
+            }, key: i, onClick: ($event) => { selectDate(day) }, "data-v-69fa2c78": "" }, [
+        day ?? ''
+      ])
+      ),
+        "\n        "
+      ]),
+        "\n      "
+      ]) : null
+      ]),
+        "\n  "
+      ])
+}
+_sfc_main.__scopeId = 'data-v-69fa2c78'
+_sfc_main.__hmrId = 'NDatepicker_nexa'
+
+export default _sfc_main
+
+const __style = `.n-datepicker[data-v-69fa2c78]{
+  position: relative;
+  display: inline-block;
+  font-family: var(--n-font-sans);
+}
+
+.n-datepicker-input[data-v-69fa2c78]{
+  position: relative;
+  cursor: pointer;
+}
+
+.n-datepicker-input .n-input[data-v-69fa2c78]{
+  cursor: pointer;
+}
+
+.n-datepicker-icon[data-v-69fa2c78]{
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1rem;
+  pointer-events: none;
+}
+
+.n-datepicker-dropdown[data-v-69fa2c78]{
+  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[data-v-69fa2c78]{ opacity: 0; transform: translateY(-4px); }
+to[data-v-69fa2c78]{ opacity: 1; transform: translateY(0); }
+}
+
+.n-datepicker-dropdown.is-top[data-v-69fa2c78]{
+  animation: fade-in-top 0.15s ease;
+}
+
+@keyframes fade-in-top {
+from[data-v-69fa2c78]{ opacity: 0; transform: translateY(4px); }
+to[data-v-69fa2c78]{ opacity: 1; transform: translateY(0); }
+}
+
+.n-datepicker-header[data-v-69fa2c78]{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.n-datepicker-title[data-v-69fa2c78]{
+  font-weight: var(--n-weight-semibold);
+  font-size: var(--n-text-sm);
+  color: var(--n-color-text);
+}
+
+.n-datepicker-nav[data-v-69fa2c78]{
+  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[data-v-69fa2c78]:hover{
+  background: var(--n-color-surface-hover);
+  color: var(--n-color-text);
+}
+
+.n-datepicker-grid[data-v-69fa2c78]{
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.n-datepicker-day-header[data-v-69fa2c78]{
+  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[data-v-69fa2c78]{
+  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[data-v-69fa2c78]:hover:not(.is-empty){
+  background: var(--n-color-primary-light);
+}
+
+.n-datepicker-day.is-empty[data-v-69fa2c78]{
+  cursor: default;
+}
+
+.n-datepicker-day.is-disabled[data-v-69fa2c78]{
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.n-datepicker-day.is-disabled[data-v-69fa2c78]:hover{
+  background: transparent;
+}
+
+.n-datepicker-day.is-today[data-v-69fa2c78]{
+  font-weight: var(--n-weight-bold);
+  color: var(--n-color-primary);
+}
+
+.n-datepicker-day.is-selected[data-v-69fa2c78]{
+  background: var(--n-color-primary);
+  color: white;
+  font-weight: var(--n-weight-semibold);
+}`
+injectStyle('data-v-69fa2c78', __style)