@innertia-solutions/innertia-nuxt 0.1.1

package/components/Forms/DatePicker.vue

@@ -0,0 +1,255 @@
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'
+import { IconCalendar, IconX } from '@tabler/icons-vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Date, Array],
+    default: null
+  },
+  mode: {
+    type: String,
+    default: 'date', // 'date' | 'datetime' | 'time' | 'range' | 'range-time'
+  },
+  placeholder: {
+    type: String,
+    default: 'Seleccionar fecha'
+  },
+  minDate: {
+    type: [String, Date],
+    default: null
+  },
+  maxDate: {
+    type: [String, Date],
+    default: null
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const inputEl = ref(null)
+const calendarInstance = ref(null)
+const internalValue = ref('')
+
+const isRange = computed(() => props.mode.includes('range'))
+const hasTime = computed(() => props.mode.includes('time'))
+
+const formatDateToDDMMYYYY = (isoString) => {
+  if (!isoString || typeof isoString !== 'string') return isoString
+
+  // isoString comes as YYYY-MM-DD or YYYY-MM-DD HH:mm
+  const parts = isoString.split(' ')
+  const datePart = parts[0].split('-')
+
+  if (datePart.length === 3) {
+    const formattedDate = `${datePart[2]}-${datePart[1]}-${datePart[0]}`
+    if (parts[1]) {
+      return `${formattedDate} ${parts[1]}`
+    }
+    return formattedDate
+  }
+  return isoString
+}
+
+const formatForDisplay = (val) => {
+  if (!val) return ''
+
+  // If it's a range, val is an array of 2 dates (YYYY-MM-DD or YYYY-MM-DD HH:mm)
+  if (Array.isArray(val) && val.length === 2) {
+    if (hasTime.value) {
+      return `${formatDateToDDMMYYYY(val[0])} - ${formatDateToDDMMYYYY(val[1])}`
+    }
+    return `${formatDateToDDMMYYYY(val[0].split(' ')[0])} - ${formatDateToDDMMYYYY(val[1].split(' ')[0])}`
+  }
+
+  // Single date/datetime string
+  if (typeof val === 'string') {
+    return formatDateToDDMMYYYY(val)
+  }
+
+  return val.toString()
+}
+
+// Convert prop modelValue to internal text representation
+watch(() => props.modelValue, (newVal) => {
+  internalValue.value = formatForDisplay(newVal)
+}, { immediate: true })
+
+
+onMounted(async () => {
+  // Dynamic import to avoid SSR issues
+  try {
+    const { Calendar: VanillaCalendar } = await import('vanilla-calendar-pro')
+    await import('vanilla-calendar-pro/styles/index.css')
+
+    // Prepare config options based on props.mode
+    let type = 'default'
+    let time = false
+    let selectionDatesMode = 'single'
+
+    if (props.mode === 'datetime') {
+      time = true
+    } else if (props.mode === 'time') {
+      type = 'time'
+    } else if (props.mode === 'range') {
+      selectionDatesMode = 'multiple-ranged'
+    } else if (props.mode === 'range-time') {
+      selectionDatesMode = 'multiple-ranged'
+      time = true
+    }
+
+    // Set initial theme based on HTML class
+    const isDarkGlobal = useState('isDark')
+
+    let options = {
+      inputMode: true,
+      locale: 'es',
+      selectedTheme: isDarkGlobal.value ? 'dark' : 'light',
+      selectionDatesMode: selectionDatesMode,
+      selectionTimeMode: time ? 24 : false,
+      type: type,
+      onChangeToInput: (self, e) => {
+        let dates = self.context.selectedDates || []
+        let timeStr = self.context.selectedTime || ''
+
+        if (dates[0]) {
+          let res = dates[0]
+          if (dates[1]) res = [dates[0], dates[1]]
+
+          if (timeStr) {
+            if (dates[1]) {
+              res = [`${dates[0]} ${timeStr}`, `${dates[1]} ${timeStr}`]
+            } else {
+              res = `${dates[0]} ${timeStr}`
+            }
+          }
+          emit('update:modelValue', res)
+          emit('change', res)
+
+          if (!isRange.value && !hasTime.value) {
+            self.hide()
+          }
+        } else if (timeStr && type === 'time') {
+          emit('update:modelValue', timeStr)
+          emit('change', timeStr)
+        } else {
+          emit('update:modelValue', null)
+          emit('change', null)
+        }
+      }
+    }
+
+    if (props.mode === 'time') {
+      options.selectionDatesMode = false
+      options.type = 'time'
+    }
+
+    if (inputEl.value) {
+      calendarInstance.value = new VanillaCalendar(inputEl.value, options)
+      calendarInstance.value.init()
+
+      watch(() => isDarkGlobal.value, (newDark) => {
+        if (calendarInstance.value) {
+          calendarInstance.value.set({ selectedTheme: newDark ? 'dark' : 'light' })
+        }
+      })
+    }
+  } catch (e) {
+    // Vanilla Calendar Pro load failed — silently continue
+  }
+})
+
+onBeforeUnmount(() => {
+  // Teardown
+})
+
+const clear = () => {
+  emit('update:modelValue', null)
+  emit('change', null)
+}
+</script>
+
+<template>
+  <div class="relative w-full">
+    <div class="relative group">
+      <div class="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-3.5">
+        <IconCalendar class="size-4 text-gray-400 group-focus-within:text-blue-500 transition-colors" />
+      </div>
+
+      <input
+        ref="inputEl"
+        type="text"
+        :value="internalValue"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        class="w-full py-2 ps-10 pe-10 border border-gray-300 rounded-lg text-sm dark:bg-card dark:border-card-line dark:text-white disabled:opacity-50 disabled:pointer-events-none cursor-pointer focus:border-blue-500 focus:ring-blue-500/20 outline-none transition-all block"
+        readonly
+      />
+
+      <!-- Clear button -->
+      <button
+        v-if="clearable && internalValue && !disabled"
+        @click.stop="clear"
+        type="button"
+        class="absolute inset-y-0 end-0 flex items-center z-20 pe-3 text-gray-400 hover:text-red-500 transition-colors focus:outline-none"
+      >
+        <IconX class="size-4" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+/*
+  Vanilla Calendar v3 compiles Tailwind classes directly into its themes.
+  We override the selected date and hover backgrounds for Light and Dark modes.
+*/
+
+/* LIGHT MODE OVERRIDES */
+[data-vc-theme=light] .vc-months__month[data-vc-months-month-selected],
+[data-vc-theme=light] .vc-years__year[data-vc-years-year-selected],
+[data-vc-theme=light] .vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn,
+[data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn {
+  background-color: #2563eb !important; /* blue-600 */
+  color: #ffffff !important;
+}
+
+[data-vc-theme=light] .vc-months__month[data-vc-months-month-selected]:hover,
+[data-vc-theme=light] .vc-years__year[data-vc-years-year-selected]:hover,
+[data-vc-theme=light] .vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn:hover,
+[data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn:hover {
+  background-color: #1d4ed8 !important; /* blue-700 */
+}
+
+[data-vc-theme=light] .vc-date[data-vc-date-today] .vc-date__btn {
+  color: #2563eb !important;
+}
+
+/* DARK MODE OVERRIDES */
+[data-vc-theme=dark] .vc-months__month[data-vc-months-month-selected],
+[data-vc-theme=dark] .vc-years__year[data-vc-years-year-selected],
+[data-vc-theme=dark] .vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn,
+[data-vc-theme=dark] .vc-date[data-vc-date-selected] .vc-date__btn {
+  background-color: #3b82f6 !important; /* blue-500 */
+  color: #ffffff !important;
+}
+
+[data-vc-theme=dark] .vc-months__month[data-vc-months-month-selected]:hover,
+[data-vc-theme=dark] .vc-years__year[data-vc-years-year-selected]:hover,
+[data-vc-theme=dark] .vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn:hover,
+[data-vc-theme=dark] .vc-date[data-vc-date-selected] .vc-date__btn:hover {
+  background-color: #2563eb !important; /* blue-600 */
+}
+
+[data-vc-theme=dark] .vc-date[data-vc-date-today] .vc-date__btn {
+  color: #3b82f6 !important;
+}
+</style>

package/components/Forms/Input.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { IconEye, IconEyeOff } from '@tabler/icons-vue'
+
+const props = defineProps<{
+  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'
+  placeholder?: string
+  disabled?: boolean
+  error?: string | null
+  label?: string
+  hint?: string
+  iconLeft?: object | Function | null
+  autocomplete?: string
+  size?: 'sm' | 'md'
+}>()
+
+const modelValue = defineModel<string | number | null>({ default: '' })
+
+const showPassword = ref(false)
+
+const inputType = computed(() => {
+  if (props.type === 'password') return showPassword.value ? 'text' : 'password'
+  return props.type ?? 'text'
+})
+
+const baseClasses = computed(() =>
+  `${props.size === 'sm' ? 'py-1.5' : 'py-2'} px-3 block w-full rounded-lg text-sm text-slate-800 border border-card-line focus:ring-0 focus:border-gray-400 focus:outline-none disabled:opacity-50 dark:bg-transparent dark:text-muted-foreground-1 transition-colors placeholder:text-muted-foreground dark:placeholder:text-muted-foreground`
+)
+</script>
+
+<template>
+  <div class="w-full">
+    <label v-if="label" class="block text-sm font-medium text-foreground mb-1.5">
+      {{ label }}
+    </label>
+
+    <div class="relative">
+      <!-- Ícono izquierdo -->
+      <div v-if="iconLeft" class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none text-muted-foreground">
+        <component :is="iconLeft" class="size-4" />
+      </div>
+
+      <input
+        v-model="modelValue"
+        :type="inputType"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :autocomplete="autocomplete"
+        :class="[
+          baseClasses,
+          iconLeft ? 'ps-9' : '',
+          type === 'password' ? 'pe-10' : '',
+          error ? '!border-red-400 dark:!border-red-500' : '',
+        ]"
+      />
+
+      <!-- Toggle contraseña -->
+      <button
+        v-if="type === 'password'"
+        type="button"
+        tabindex="-1"
+        class="absolute inset-y-0 end-0 flex items-center px-3 text-muted-foreground hover:text-muted-foreground-1 transition-colors"
+        @click="showPassword = !showPassword"
+      >
+        <component :is="showPassword ? IconEyeOff : IconEye" class="size-4" />
+      </button>
+    </div>
+
+    <!-- Error -->
+    <p v-if="error" class="text-xs text-red-500 dark:text-red-400 mt-1">{{ error }}</p>
+
+    <!-- Hint -->
+    <p v-else-if="hint" class="text-xs text-muted-foreground mt-1">{{ hint }}</p>
+  </div>
+</template>

package/components/Forms/Select.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+const props = defineProps<{
+  options: { value: string | number; label: string }[]
+  modelValue?: string | number | null
+  label?: string
+  placeholder?: string
+  hint?: string
+  error?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | null]
+  change: [value: string | number | null]
+}>()
+
+const selectRef = ref<HTMLSelectElement | null>(null)
+
+const reinitHsSelect = async () => {
+  await nextTick()
+  const el = selectRef.value
+  if (!el) return
+
+  const instance = (window as any).HSSelect?.getInstance?.(el)
+  if (instance?.destroy) instance.destroy()
+
+  new (window as any).HSSelect(el)
+}
+
+// Re-initialize when options change (async load)
+watch(() => props.options, async () => {
+  await reinitHsSelect()
+}, { deep: true })
+
+onMounted(() => {
+  reinitHsSelect()
+})
+
+const handleChange = (e: Event) => {
+  const val = (e.target as HTMLSelectElement).value
+  emit('update:modelValue', val || null)
+  emit('change', val || null)
+}
+</script>
+
+<template>
+  <div class="space-y-1.5">
+    <!-- Label -->
+    <label v-if="label" class="block text-sm font-medium text-foreground">
+      {{ label }}
+    </label>
+
+    <!-- Select (HSSelect) -->
+    <ClientOnly>
+      <template #fallback>
+        <div class="h-[38px] bg-surface animate-pulse rounded-lg" />
+      </template>
+
+      <div :class="['relative', error ? 'select-error' : '']">
+        <select
+          ref="selectRef"
+          class="hs-select w-full"
+          :value="modelValue ?? ''"
+          :disabled="disabled"
+          @change="handleChange"
+          data-hs-select='{
+            "placeholder": "Seleccionar...",
+            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
+            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-card border border-card-line rounded-lg text-start text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:text-muted-foreground-1 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-blue-600",
+            "dropdownClasses": "mt-1 z-50 w-full max-h-72 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg overflow-hidden overflow-y-auto shadow-lg",
+            "optionClasses": "py-2 px-4 w-full text-sm text-foreground cursor-pointer hover:bg-muted-hover rounded-lg focus:outline-hidden focus:bg-muted-hover dark:bg-card",
+            "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-blue-600 dark:text-blue-500\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
+          }'
+        >
+          <option value="">{{ placeholder ?? 'Seleccionar...' }}</option>
+          <option
+            v-for="option in options"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ option.label }}
+          </option>
+        </select>
+      </div>
+    </ClientOnly>
+
+    <!-- Error -->
+    <p v-if="error" class="text-xs text-red-500 dark:text-red-400">{{ error }}</p>
+
+    <!-- Hint -->
+    <p v-else-if="hint" class="text-xs text-muted-foreground">{{ hint }}</p>
+  </div>
+</template>
+
+<style scoped>
+/* Apply error border to the HSSelect toggle button when in error state */
+.select-error :deep(button[aria-expanded]) {
+  border-color: rgb(248 113 113) !important; /* red-400 */
+}
+</style>