@innertia-solutions/ui 0.1.4 → 0.1.6

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-slate-800 dark:border-slate-600 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/Select.vue

@@ -1,89 +1,100 @@
 <script setup lang="ts">
-import { ref, watch, nextTick } from "vue";
-
 const props = defineProps<{
-  options: { value: string; label: string }[];
-}>();
+  options: { value: string | number; label: string }[]
+  modelValue?: string | number | null
+  label?: string
+  placeholder?: string
+  hint?: string
+  error?: string
+  disabled?: boolean
+}>()
 
-const modelValue = defineModel<string | null>({ default: null });
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | null]
+  change: [value: string | number | null]
+}>()
 
-const selectRef = ref<HTMLSelectElement | null>(null);
+const selectRef = ref<HTMLSelectElement | null>(null)
 
 const reinitHsSelect = async () => {
-  await nextTick();
-
-  const el = selectRef.value;
-  if (!el) return;
+  await nextTick()
+  const el = selectRef.value
+  if (!el) return
 
-  const instance = window.HSSelect?.getInstance?.(el);
-  if (instance?.destroy) instance.destroy();
+  const instance = (window as any).HSSelect?.getInstance?.(el)
+  if (instance?.destroy) instance.destroy()
 
-  new window.HSSelect(el);
-};
+  new (window as any).HSSelect(el)
+}
 
-watch(
-  () => props.options,
-  async () => {
-    await reinitHsSelect();
-  },
-  { deep: true }
-);
+// Re-initialize when options change (async load)
+watch(() => props.options, async () => {
+  await reinitHsSelect()
+}, { deep: true })
 
 onMounted(() => {
-  reinitHsSelect();
-});
+  reinitHsSelect()
+})
+
+const handleChange = (e: Event) => {
+  const val = (e.target as HTMLSelectElement).value
+  emit('update:modelValue', val || null)
+  emit('change', val || null)
+}
 </script>
 
 <template>
-  <ClientOnly>
-    <!-- Fallback mientras se monta en el cliente -->
-    <template #fallback>
-      <div
-        class="h-12 bg-slate-100 dark:bg-slate-800 animate-pulse rounded-lg"
-      ></div>
-    </template>
-    <div class="relative">
-      <select
-        ref="selectRef"
-        class="hs-select w-full"
-        :value="modelValue"
-        @change="(e) => modelValue?.value ? modelValue.value = (e.target as HTMLSelectElement).value : null"
-        data-hs-select='{
-          "placeholder": "Select option...",
-          "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-white border border-slate-200 rounded-lg text-start text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-400 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-slate-600",
-          "dropdownClasses": "mt-1 z-50 w-full max-h-72 p-1 space-y-0.5 bg-white border border-slate-200 rounded-lg overflow-hidden overflow-y-auto dark:bg-slate-900 dark:border-slate-700",
-          "optionClasses": "py-2 px-4 w-full text-sm text-slate-800 cursor-pointer hover:bg-slate-100 rounded-lg focus:outline-hidden focus:bg-slate-100 dark:bg-slate-900 dark:hover:bg-slate-800 dark:text-slate-200 dark:focus:bg-slate-800",
-          "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:.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 disabled value="">Selecciona</option>
-        <option
-          v-for="option in options"
-          :key="option.value"
-          :value="option.value"
-        >
-          {{ option.label }}
-        </option>
-      </select>
+  <div class="space-y-1.5">
+    <!-- Label -->
+    <label v-if="label" class="block text-sm font-medium text-slate-700 dark:text-slate-300">
+      {{ label }}
+    </label>
 
-      <div class="absolute top-1/2 end-2.5 -translate-y-1/2">
-        <svg
-          class="shrink-0 size-4 text-slate-500 dark:text-slate-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"
+    <!-- Select (HSSelect) -->
+    <ClientOnly>
+      <template #fallback>
+        <div class="h-[38px] bg-slate-100 dark:bg-slate-800 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-white border border-slate-200 rounded-lg text-start text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 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-white border border-slate-200 rounded-lg overflow-hidden overflow-y-auto shadow-lg dark:bg-slate-800 dark:border-slate-700",
+            "optionClasses": "py-2 px-4 w-full text-sm text-slate-800 cursor-pointer hover:bg-slate-100 rounded-lg focus:outline-hidden focus:bg-slate-100 dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-200 dark:focus:bg-slate-700",
+            "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>"
+          }'
         >
-          <path d="m7 15 5 5 5-5"></path>
-          <path d="m7 9 5-5 5 5"></path>
-        </svg>
+          <option value="">{{ placeholder ?? 'Seleccionar...' }}</option>
+          <option
+            v-for="option in options"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ option.label }}
+          </option>
+        </select>
       </div>
-    </div>
-  </ClientOnly>
+    </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-slate-400 dark:text-slate-500">{{ 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>