@innertia-solutions/nuxt-theme-spark 0.1.11

package/components/App/Tag.vue

@@ -0,0 +1,193 @@
+<script setup>
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: String,
+    required: false,
+    default: "sm",
+    validator: (value) => ["xs", "sm", "md", "lg"].includes(value),
+  },
+  severity: {
+    type: String,
+    required: false,
+    default: "secondary",
+    validator: (value) =>
+      ["primary", "secondary", "success", "danger", "warning", "info"].includes(
+        value
+      ),
+  },
+  outlined: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  icon: {
+    type: Object,
+    required: false,
+    default: null,
+  },
+  iconPosition: {
+    type: String,
+    required: false,
+    default: "left",
+    validator: (value) => ["left", "right"].includes(value),
+  },
+  class: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  iconClass: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  textClass: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  tooltip: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  tooltipPosition: {
+    type: String,
+    required: false,
+    default: "top",
+    validator: (value) =>
+      ["top", "bottom", "left", "right", "auto"].includes(value),
+  },
+});
+
+// Computed classes for sizes
+const sizeClasses = computed(() => {
+  const sizes = {
+    xs: "px-1.5 py-0.5 text-xs",
+    sm: "px-2 py-1.5 text-xs",
+    md: "px-2.5 py-1.5 text-sm",
+    lg: "px-3 py-2 text-sm",
+  };
+  return sizes[props.size] || sizes.sm;
+});
+
+// Computed classes for icon sizes
+const iconSizeClasses = computed(() => {
+  const sizes = {
+    xs: "size-2.5",
+    sm: "size-3",
+    md: "size-3.5",
+    lg: "size-4",
+  };
+  return sizes[props.size] || sizes.sm;
+});
+
+// Computed classes for severity colors
+const severityClasses = computed(() => {
+  const base = "font-light rounded-md";
+
+  if (props.outlined) {
+    const variants = {
+      primary:
+        "border border-blue-600 text-blue-600 bg-blue-50 dark:border-blue-500 dark:text-blue-500 dark:bg-blue-900/20",
+      secondary:
+        "border border-gray-500 text-gray-700 bg-gray-50 dark:border-gray-400 dark:text-gray-300 dark:bg-gray-800",
+      success:
+        "border border-green-600 text-green-600 bg-green-50 dark:border-green-500 dark:text-green-500 dark:bg-green-900/20",
+      danger:
+        "border border-red-600 text-red-600 bg-red-50 dark:border-red-500 dark:text-red-500 dark:bg-red-900/20",
+      warning:
+        "border border-yellow-500 text-yellow-600 bg-yellow-40 dark:border-yellow-500 dark:text-yellow-500 dark:bg-yellow-900/20",
+      info: "border border-cyan-600 text-cyan-600 bg-cyan-50 dark:border-cyan-500 dark:text-cyan-500 dark:bg-cyan-900/20",
+    };
+    return `${base} ${variants[props.severity] || variants.secondary}`;
+  } else {
+    const variants = {
+      primary: "bg-blue-600 text-white dark:bg-blue-600",
+      secondary:
+        "bg-gray-100 text-gray-800 dark:bg-neutral-700 dark:text-neutral-200",
+      success: "bg-green-600 text-white dark:bg-green-600",
+      danger: "bg-red-600 text-white dark:bg-red-600",
+      warning: "bg-yellow-600 text-white dark:bg-yellow-600",
+      info: "bg-cyan-600 text-white dark:bg-cyan-600",
+    };
+    return `${base} ${variants[props.severity] || variants.secondary}`;
+  }
+});
+
+// Tooltip attributes
+const tooltipClasses = computed(() => {
+  if (!props.tooltip) return "";
+
+  const placement = `[--placement:${props.tooltipPosition}]`;
+  return `hs-tooltip ${placement} inline-block`;
+});
+
+const tagClasses = computed(() => {
+  const baseClasses = `${sizeClasses.value} ${severityClasses.value} inline-flex items-center gap-x-1 ${props.class}`;
+
+  if (props.tooltip) {
+    return `${baseClasses} hs-tooltip-toggle`;
+  }
+
+  return baseClasses;
+});
+</script>
+
+<template>
+  <div v-if="tooltip" :class="tooltipClasses">
+    <span :class="tagClasses">
+      <!-- Icon Left -->
+      <component
+        v-if="icon && iconPosition === 'left'"
+        :is="icon"
+        :class="`${iconSizeClasses} ${iconClass}`"
+      />
+
+      <!-- Tag Text -->
+      <slot name="text">
+        <span :class="textClass">{{ text }}</span>
+      </slot>
+
+      <!-- Icon Right -->
+      <component
+        v-if="icon && iconPosition === 'right'"
+        :is="icon"
+        :class="`${iconSizeClasses} ${iconClass}`"
+      />
+
+      <!-- Tooltip Content -->
+      <span
+        class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-2xs dark:bg-neutral-700"
+        role="tooltip"
+      >
+        {{ tooltip }}
+      </span>
+    </span>
+  </div>
+
+  <span v-else :class="tagClasses">
+    <!-- Icon Left -->
+    <component
+      v-if="icon && iconPosition === 'left'"
+      :is="icon"
+      :class="`${iconSizeClasses} ${iconClass}`"
+    />
+
+    <!-- Tag Text -->
+    <slot name="text">
+      <span :class="textClass">{{ text }}</span>
+    </slot>
+
+    <!-- Icon Right -->
+    <component
+      v-if="icon && iconPosition === 'right'"
+      :is="icon"
+      :class="`${iconSizeClasses} ${iconClass}`"
+    />
+  </span>
+</template>

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/Input.vue

@@ -0,0 +1,72 @@
+<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
+}>()
+
+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 = 'py-2 px-3 block w-full rounded-lg text-sm text-slate-800 border border-gray-200 dark:border-slate-700 focus:ring-0 focus:border-gray-400 focus:outline-none disabled:opacity-50 dark:bg-transparent dark:text-slate-300 transition-colors placeholder:text-slate-400 dark:placeholder:text-slate-500'
+</script>
+
+<template>
+  <div class="w-full">
+    <label v-if="label" class="block text-sm font-medium text-slate-700 dark:text-slate-300 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-slate-400">
+        <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-slate-400 hover:text-slate-600 dark:hover:text-slate-300 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-slate-400 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-slate-700 dark:text-slate-300">
+      {{ label }}
+    </label>
+
+    <!-- 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>"
+          }'
+        >
+          <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-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>