@innertia-solutions/nuxt-theme-spark 0.1.11

package/components/Layout/Admin.vue

@@ -0,0 +1,32 @@
+<script setup>
+const showAnimation = ref(false)
+onMounted(() => {
+  const seen = sessionStorage.getItem('auth-entered')
+  if (!seen) {
+    showAnimation.value = true
+    sessionStorage.setItem('auth-entered', 'true')
+  }
+})
+</script>
+
+<template>
+  <div :class="{ 'animate-entrance': showAnimation }">
+    <AdminBase>
+      <template #logo><slot name="logo" /></template>
+      <template #menu><slot name="menu" /></template>
+      <template #user-footer><slot name="user-footer" /></template>
+
+      <AdminPage>
+        <slot />
+      </AdminPage>
+    </AdminBase>
+  </div>
+</template>
+
+<style scoped>
+.animate-entrance { animation: fadeInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
+@keyframes fadeInScale {
+  from { opacity: 0; transform: scale(0.96); filter: blur(4px); }
+  to   { opacity: 1; transform: scale(1);    filter: blur(0);   }
+}
+</style>

package/components/Layout/Auth.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="bg-slate-50 dark:bg-slate-900">
+    <div class="absolute top-4 right-4 z-20">
+      <slot name="theme-switch" />
+    </div>
+    <main class="flex min-h-full">
+      <!-- Columna izquierda: imagen/bienvenida -->
+      <div class="relative hidden min-h-screen lg:w-200 xl:w-[65%] bg-slate-100 lg:flex flex-col justify-between p-6 dark:bg-slate-950 overflow-hidden">
+        <slot name="background" />
+        <div class="z-0 p-20 pt-[max(180px,10vh)]">
+          <slot name="welcome" />
+        </div>
+      </div>
+
+      <!-- Columna derecha: formulario -->
+      <div class="grow px-12 z-10 -ml-6 pr-6 bg-white dark:bg-slate-900 rounded-tl-[1.5rem] rounded-bl-[1.5rem]">
+        <div class="h-full min-h-screen sm:w-112 flex flex-col justify-center mx-auto space-y-5 p-4">
+          <div class="flex justify-center mb-6">
+            <slot name="logo" />
+          </div>
+          <slot />
+          <div class="absolute bottom-4 right-4 text-xs text-slate-400">
+            <slot name="version" />
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>

package/components/Modal/DeleteConfirm.vue

@@ -0,0 +1,48 @@
+<script setup>
+const props = defineProps({
+  modelValue:  { type: Boolean, default: false },
+  title:       { type: String, default: 'Confirmar eliminación' },
+  message:     { type: String, default: 'Esta acción es irreversible. ¿Estás seguro de que deseas continuar?' },
+  confirmText: { type: String, default: 'Eliminar' },
+  cancelText:  { type: String, default: 'Cancelar' },
+  loading:     { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])
+
+const close = () => {
+  if (props.loading) return
+  emit('update:modelValue', false)
+  emit('cancel')
+}
+</script>
+
+<template>
+  <Modal
+    :model-value="modelValue"
+    :title="title"
+    size="sm"
+    :closable="!loading"
+    :backdrop-dismiss="!loading"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <p class="text-sm text-slate-500 dark:text-slate-400">{{ message }}</p>
+
+    <div class="flex justify-end gap-2 mt-5">
+      <AppButton
+        :text="cancelText"
+        severity="secondary"
+        size="sm"
+        :disabled="loading"
+        @click="close"
+      />
+      <AppButton
+        :text="confirmText"
+        severity="danger"
+        size="sm"
+        :loading="loading"
+        @click="$emit('confirm')"
+      />
+    </div>
+  </Modal>
+</template>

package/components/Modal.vue

@@ -0,0 +1,103 @@
+<script setup>
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  title:      { type: String, default: '' },
+  size:       { type: String, default: 'md', validator: v => ['xs','sm','md','lg','xl','2xl','3xl','fullscreen'].includes(v) },
+  closable:   { type: Boolean, default: true },
+  backdropDismiss: { type: Boolean, default: true },
+  showHeader: { type: Boolean, default: true },
+  showFooter: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'close'])
+
+const modalId = `modal-${Math.random().toString(36).slice(2, 9)}`
+
+const sizeClass = computed(() => ({
+  xs: 'max-w-xs', sm: 'max-w-sm', md: 'max-w-md',
+  lg: 'max-w-lg', xl: 'max-w-xl', '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl', fullscreen: 'max-w-full',
+}[props.size] ?? 'max-w-md'))
+
+const close = () => {
+  emit('update:modelValue', false)
+  emit('close')
+}
+
+const onBackdrop = (e) => {
+  if (e.target === e.currentTarget && props.backdropDismiss && props.closable) close()
+}
+
+const onEsc = (e) => { if (e.key === 'Escape' && props.modelValue && props.closable) close() }
+
+watch(() => props.modelValue, v => {
+  document.body.style.overflow = v ? 'hidden' : ''
+})
+
+onMounted(() => document.addEventListener('keydown', onEsc))
+onUnmounted(() => {
+  document.removeEventListener('keydown', onEsc)
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <Teleport v-if="modelValue" to="body">
+    <Transition name="modal" appear>
+      <div
+        class="fixed inset-0 z-[9999] bg-black/40 dark:bg-black/60 backdrop-blur-sm flex items-center justify-center p-4"
+        role="dialog"
+        tabindex="-1"
+        :aria-labelledby="`${modalId}-label`"
+        @click="onBackdrop"
+      >
+        <div
+          :class="['bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xl w-full modal-content', sizeClass]"
+          @click.stop
+        >
+          <!-- Header -->
+          <div v-if="showHeader" class="flex items-center justify-between px-5 py-4 border-b border-slate-200 dark:border-slate-700">
+            <h3 :id="`${modalId}-label`" class="text-sm font-semibold text-slate-800 dark:text-slate-100">
+              <slot name="header">{{ title }}</slot>
+            </h3>
+            <button
+              v-if="closable"
+              type="button"
+              class="size-7 flex items-center justify-center rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:text-slate-200 dark:hover:bg-slate-700 transition-colors"
+              @click="close"
+            >
+              <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                <path d="M18 6 6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Body -->
+          <div class="p-5">
+            <slot />
+          </div>
+
+          <!-- Footer -->
+          <div v-if="showFooter" class="flex items-center justify-end gap-2 px-5 py-4 border-t border-slate-200 dark:border-slate-700">
+            <slot name="footer">
+              <AppButton v-if="closable" text="Cerrar" severity="secondary" size="sm" @click="close" />
+            </slot>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-enter-active,
+.modal-leave-active { transition: opacity 0.15s ease; }
+.modal-enter-from,
+.modal-leave-to      { opacity: 0; }
+
+.modal-enter-from .modal-content,
+.modal-leave-to .modal-content  { transform: scale(0.97) translateY(-8px); opacity: 0; }
+.modal-enter-to .modal-content,
+.modal-leave-from .modal-content { transform: scale(1) translateY(0); opacity: 1; }
+.modal-content { transition: transform 0.15s ease, opacity 0.15s ease; }
+</style>

package/components/Nav/Tabs.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+
+interface Tab {
+  label: string
+  to: string
+  icon?: any
+  exact?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  tabs: Tab[]
+  activeClass?: string
+}>(), {
+  activeClass: 'bg-white dark:bg-slate-800 text-blue-600 dark:text-blue-400 shadow-sm',
+})
+
+const route = useRoute()
+
+const isActive = (tab: Tab) =>
+  tab.exact ? route.path === tab.to : route.path.startsWith(tab.to)
+</script>
+
+<template>
+  <div class="flex items-center gap-x-1 p-1 bg-slate-100 dark:bg-slate-900/50 rounded-xl w-fit border border-slate-200 dark:border-slate-700">
+    <NuxtLink
+      v-for="tab in tabs"
+      :key="tab.to"
+      :to="tab.to"
+      class="flex items-center gap-x-2 px-4 py-2 text-xs font-bold rounded-lg transition-all"
+      :class="isActive(tab)
+        ? activeClass
+        : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'"
+    >
+      <component :is="tab.icon" v-if="tab.icon" class="size-4" />
+      {{ tab.label }}
+    </NuxtLink>
+  </div>
+</template>

package/components/Table/DownloadDropdown.vue

@@ -0,0 +1,111 @@
+<script setup>
+import {
+  IconFileTypeXls,
+  IconCodeDots,
+  IconFileTypePdf,
+  IconFileTypeCsv,
+  IconDownload,
+} from "@tabler/icons-vue";
+
+const props = defineProps({
+  tableRef: { type: Object, required: true },
+});
+
+const exportAllPages = ref(true);
+const exportFilteredRows = ref(true);
+
+const exportTable = (format) => {
+  if (props.tableRef) {
+    props.tableRef.exportTable(
+      format,
+      exportAllPages.value,
+      exportFilteredRows.value
+    );
+  }
+};
+</script>
+<template>
+  <div
+    class="hs-dropdown [--auto-close:inside] [--placement:bottom-right] relative inline-block"
+  >
+    <button
+      id="hs-as-table-table-export-dropdown"
+      type="button"
+      class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm sm:text-xs font-medium rounded-lg border border-slate-200 bg-white text-slate-800 shadow-2xs hover:bg-slate-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-slate-50 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-700 dark:focus:bg-slate-700"
+      aria-haspopup="menu"
+      aria-expanded="false"
+      aria-label="Dropdown"
+    >
+      <IconDownload class="shrink-0 size-4" stroke="1.5" />
+      Exportar
+    </button>
+    <div
+      class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden divide-y divide-slate-200 min-w-48 z-10 bg-white shadow-md rounded-lg p-2 mt-2 dark:divide-slate-700 dark:bg-slate-800 dark:border dark:border-slate-700 border-t border-slate-200 dark:border-slate-700"
+      role="menu"
+      aria-orientation="vertical"
+      aria-labelledby="hs-as-table-table-export-dropdown"
+    >
+      <div class="py-2 first:pt-0 last:pb-0">
+        <a
+          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-slate-800 hover:bg-slate-100 focus:outline-hidden focus:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-300 dark:focus:bg-slate-700 dark:focus:text-slate-300"
+          href="#"
+          @click="exportTable('xlsx')"
+        >
+          <IconFileTypeXls class="shrink-0 size-5" stroke="1.5" />
+          Excel
+        </a>
+        <a
+          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-slate-800 hover:bg-slate-100 focus:outline-hidden focus:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-300 dark:focus:bg-slate-700 dark:focus:text-slate-300"
+          href="#"
+          @click="exportTable('csv')"
+        >
+          <IconFileTypeCsv class="shrink-0 size-5" stroke="1.5" />
+          CSV
+        </a>
+        <a
+          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-slate-800 hover:bg-slate-100 focus:outline-hidden focus:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-300 dark:focus:bg-slate-700 dark:focus:text-slate-300"
+          href="#"
+          @click="exportTable('pdf')"
+        >
+          <IconFileTypePdf class="shrink-0 size-5" stroke="1.5" />
+          PDF
+        </a>
+        <a
+          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-slate-800 hover:bg-slate-100 focus:outline-hidden focus:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-300 dark:focus:bg-slate-700 dark:focus:text-slate-300"
+          href="#"
+          @click="exportTable('json')"
+        >
+          <IconCodeDots class="shrink-0 size-5" stroke="1.5" />
+          JSON
+        </a>
+      </div>
+      <!-- checkbox - todas las paginas -->
+      <div
+        class="flex flex-col gap-y-2 py-2 px-3"
+        data-hs-dropdown-ignore-click
+      >
+        <label
+          class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200"
+        >
+          <input
+            type="checkbox"
+            v-model="exportAllPages"
+            class="shrink-0 border-slate-300 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-slate-800 dark:border-slate-600"
+          />
+          Todas las páginas
+        </label>
+
+        <label
+          class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200"
+        >
+          <input
+            type="checkbox"
+            v-model="exportFilteredRows"
+            class="shrink-0 border-slate-300 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-slate-800 dark:border-slate-600"
+          />
+          Solo filas filtradas
+        </label>
+      </div>
+    </div>
+  </div>
+</template>

package/components/Table/FilterDropdown.vue

@@ -0,0 +1,226 @@
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: null,
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: "Seleccionar...",
+  },
+  optionLabelKey: {
+    type: String,
+    default: "label",
+  },
+  optionValueKey: {
+    type: String,
+    default: "value",
+  },
+  clearable: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  menuClass: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const isOpen = ref(false);
+const dropdownRef = ref(null);
+
+const getOptionLabel = (option) => option?.[props.optionLabelKey] ?? option?.label ?? "";
+const getOptionValue = (option) => option?.[props.optionValueKey] ?? option?.value ?? null;
+
+const hasSelection = computed(() => props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== "");
+
+const selectedOption = computed(() =>
+  props.options.find((option) => getOptionValue(option) === props.modelValue),
+);
+
+const displayText = computed(() => {
+  if (!selectedOption.value) return props.placeholder;
+  return getOptionLabel(selectedOption.value) || props.placeholder;
+});
+
+const selectClasses = computed(() => {
+  const base =
+    "relative w-full rounded-lg border bg-white dark:bg-slate-800 transition-colors cursor-pointer text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-0 focus:border-gray-400";
+  const validation = "border-gray-200 dark:border-slate-700";
+  const disabled = props.disabled ? "opacity-50 cursor-not-allowed" : "";
+  return `${base} ${validation} ${disabled}`;
+});
+
+const closeDropdown = () => {
+  isOpen.value = false;
+};
+
+const toggleDropdown = () => {
+  if (props.disabled) return;
+  isOpen.value = !isOpen.value;
+};
+
+const selectOption = (option) => {
+  const selectedValue = getOptionValue(option);
+  const nextValue = props.modelValue === selectedValue ? null : selectedValue;
+  emit("update:modelValue", nextValue);
+  emit("change", nextValue);
+  closeDropdown();
+};
+
+const clearSelection = () => {
+  emit("update:modelValue", null);
+  emit("change", null);
+  closeDropdown();
+};
+
+const isOptionSelected = (option) => getOptionValue(option) === props.modelValue;
+
+const handleClickOutside = (event) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+    closeDropdown();
+  }
+};
+
+onMounted(() => document.addEventListener("mousedown", handleClickOutside));
+onUnmounted(() => document.removeEventListener("mousedown", handleClickOutside));
+</script>
+
+<template>
+  <div ref="dropdownRef" class="relative w-full">
+    <button
+      type="button"
+      :class="selectClasses"
+      :disabled="disabled"
+      :aria-expanded="isOpen"
+      :aria-haspopup="true"
+      @click="toggleDropdown"
+    >
+      <div class="flex items-center justify-between w-full">
+        <span
+          class="truncate flex-1 text-left pr-10"
+          :class="{
+            'text-gray-400 dark:text-slate-500': !hasSelection,
+            'text-slate-900 dark:text-white': hasSelection,
+          }"
+        >
+          <slot name="display" :selected-option="selectedOption" :display-text="displayText">
+            {{ displayText }}
+          </slot>
+        </span>
+
+        <span
+          v-if="clearable && hasSelection && !disabled"
+          class="absolute end-8 top-1/2 -translate-y-1/2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-full p-1 transition-colors focus:outline-none focus:ring-1 focus:ring-slate-400"
+          role="button"
+          tabindex="0"
+          @click.stop="clearSelection"
+          @keydown.enter.prevent="clearSelection"
+          @keydown.space.prevent="clearSelection"
+        >
+          <svg class="size-3.5 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fill-rule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </span>
+
+        <div class="absolute top-1/2 end-3 -translate-y-1/2">
+          <svg
+            class="shrink-0 size-3.5 text-gray-500 dark:text-gray-500 transition-transform"
+            :class="{ 'rotate-180': isOpen }"
+            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"
+          >
+            <path d="m7 15 5 5 5-5" />
+            <path d="m7 9 5-5 5 5" />
+          </svg>
+        </div>
+      </div>
+    </button>
+
+    <Transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-show="isOpen"
+        :class="[
+          'absolute z-50 w-full mt-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xl max-h-60 overflow-auto',
+          menuClass,
+        ]"
+      >
+        <div v-if="options.length">
+          <button
+            v-for="option in options"
+            :key="getOptionValue(option)"
+            type="button"
+            :class="[
+              'w-full px-3 py-2 text-left hover:bg-slate-50 dark:hover:bg-slate-700 flex items-center text-sm',
+              isOptionSelected(option) ? 'bg-slate-50 dark:bg-slate-700/50' : '',
+            ]"
+            @click="selectOption(option)"
+          >
+            <slot name="option" :option="option" :selected="isOptionSelected(option)">
+              <div class="flex items-center flex-1 min-w-0">
+                <span
+                  v-if="option.dot"
+                  class="relative flex-shrink-0 size-2.5 flex items-center justify-center mr-2.5"
+                >
+                  <span
+                    v-if="option.pulse"
+                    :class="['animate-ping absolute inline-flex h-full w-full rounded-full opacity-75', option.dot]"
+                  />
+                  <span :class="['relative inline-flex rounded-full size-2.5', option.dot]" />
+                </span>
+                <span class="font-bold text-slate-800 dark:text-slate-200 truncate">
+                  {{ getOptionLabel(option) }}
+                </span>
+              </div>
+            </slot>
+
+            <svg
+              v-if="isOptionSelected(option)"
+              class="w-4 h-4 text-slate-500 ml-2 shrink-0"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <div v-else class="px-3 py-4 text-center text-gray-500 dark:text-gray-400 text-sm">
+          Sin opciones
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>