@innertia-solutions/innertia-nuxt 0.1.1

package/components/App/EmptyState.vue

@@ -0,0 +1,433 @@
+<script setup>
+defineProps({
+  title: { type: String, default: "No hay contenido" },
+  description: { type: String, default: "Aún no hay datos que mostrar." },
+  actionText: { type: String, default: "" },
+  actionLink: { type: String, default: "" },
+  showAction: { type: Boolean, default: false },
+  shape: {
+    type: String,
+    default: "square",
+    validator: (value) => ["square", "circle"].includes(value),
+  },
+});
+</script>
+<template>
+  <div>
+    <slot v-if="shape == 'square'" name="icon">
+      <!-- Ícono por defecto (tu SVG) -->
+      <svg
+        class="w-48 mx-auto mb-4"
+        width="178"
+        height="90"
+        viewBox="0 0 178 90"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          x="27"
+          y="50.5"
+          width="124"
+          height="39"
+          rx="7.5"
+          fill="currentColor"
+          class="fill-white dark:fill-slate-800"
+        />
+        <rect
+          x="27"
+          y="50.5"
+          width="124"
+          height="39"
+          rx="7.5"
+          stroke="currentColor"
+          class="stroke-slate-50 dark:stroke-slate-700/10"
+        />
+        <rect
+          x="34.5"
+          y="58"
+          width="24"
+          height="24"
+          rx="4"
+          fill="currentColor"
+          class="fill-slate-50 dark:fill-slate-700/30"
+        />
+        <rect
+          x="66.5"
+          y="61"
+          width="60"
+          height="6"
+          rx="3"
+          fill="currentColor"
+          class="fill-slate-50 dark:fill-slate-700/30"
+        />
+        <rect
+          x="66.5"
+          y="73"
+          width="77"
+          height="6"
+          rx="3"
+          fill="currentColor"
+          class="fill-slate-50 dark:fill-slate-700/30"
+        />
+        <rect
+          x="19.5"
+          y="28.5"
+          width="139"
+          height="39"
+          rx="7.5"
+          fill="currentColor"
+          class="fill-white dark:fill-slate-800"
+        />
+        <rect
+          x="19.5"
+          y="28.5"
+          width="139"
+          height="39"
+          rx="7.5"
+          stroke="currentColor"
+          class="stroke-slate-100 dark:stroke-slate-700/30"
+        />
+        <rect
+          x="27"
+          y="36"
+          width="24"
+          height="24"
+          rx="4"
+          fill="currentColor"
+          class="fill-slate-100 dark:fill-slate-700/70"
+        />
+        <rect
+          x="59"
+          y="39"
+          width="60"
+          height="6"
+          rx="3"
+          fill="currentColor"
+          class="fill-slate-100 dark:fill-slate-700/70"
+        />
+        <rect
+          x="59"
+          y="51"
+          width="92"
+          height="6"
+          rx="3"
+          fill="currentColor"
+          class="fill-slate-100 dark:fill-slate-700/70"
+        />
+        <g filter="url(#filter15)">
+          <rect
+            x="12"
+            y="6"
+            width="154"
+            height="40"
+            rx="8"
+            fill="currentColor"
+            class="fill-white dark:fill-slate-800"
+            shape-rendering="crispEdges"
+          />
+          <rect
+            x="12.5"
+            y="6.5"
+            width="153"
+            height="39"
+            rx="7.5"
+            stroke="currentColor"
+            class="stroke-slate-100 dark:stroke-slate-700/60"
+            shape-rendering="crispEdges"
+          />
+          <rect
+            x="20"
+            y="14"
+            width="24"
+            height="24"
+            rx="4"
+            fill="currentColor"
+            class="fill-slate-200 dark:fill-slate-700"
+          />
+          <rect
+            x="52"
+            y="17"
+            width="60"
+            height="6"
+            rx="3"
+            fill="currentColor"
+            class="fill-slate-200 dark:fill-slate-700"
+          />
+          <rect
+            x="52"
+            y="29"
+            width="106"
+            height="6"
+            rx="3"
+            fill="currentColor"
+            class="fill-slate-200 dark:fill-slate-700"
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter15"
+            x="0"
+            y="0"
+            width="178"
+            height="64"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dy="6" />
+            <feGaussianBlur stdDeviation="6" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="BackgroundImageFix"
+              result="effect1_dropShadow_1187_14810"
+            />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="effect1_dropShadow_1187_14810"
+              result="shape"
+            />
+          </filter>
+        </defs>
+      </svg>
+    </slot>
+    <slot v-else name="icon">
+      <svg
+        class="w-48 mx-auto mb-4"
+        width="178"
+        height="90"
+        viewBox="0 0 178 90"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          x="27"
+          y="50.5"
+          width="124"
+          height="39"
+          rx="7.5"
+          fill="currentColor"
+          class="fill-white dark:fill-slate-800"
+        />
+        <rect
+          x="27"
+          y="50.5"
+          width="124"
+          height="39"
+          rx="7.5"
+          stroke="currentColor"
+          class="stroke-slate-50 dark:stroke-slate-700/10"
+        />
+        <rect
+          x="34.5"
+          y="58"
+          width="24"
+          height="24"
+          rx="12"
+          fill="currentColor"
+          class="fill-slate-50 dark:fill-slate-700/30"
+        />
+        <rect
+          x="66.5"
+          y="61"
+          width="60"
+          height="6"
+          rx="3"
+          fill="currentColor"
+          class="fill-slate-50 dark:fill-slate-700/30"
+        />
+        <rect
+          x="66.5"
+          y="73"
+          width="77"
+          height="6"
+          rx="3"
+          fill="currentColor"
+          class="fill-slate-50 dark:fill-slate-700/30"
+        />
+        <rect
+          x="19.5"
+          y="28.5"
+          width="139"
+          height="39"
+          rx="7.5"
+          fill="currentColor"
+          class="fill-white dark:fill-slate-800"
+        />
+        <rect
+          x="19.5"
+          y="28.5"
+          width="139"
+          height="39"
+          rx="7.5"
+          stroke="currentColor"
+          class="stroke-slate-100 dark:stroke-slate-700/30"
+        />
+        <rect
+          x="27"
+          y="36"
+          width="24"
+          height="24"
+          rx="12"
+          fill="currentColor"
+          class="fill-slate-100 dark:fill-slate-700/70"
+        />
+        <rect
+          x="59"
+          y="39"
+          width="60"
+          height="6"
+          rx="3"
+          fill="currentColor"
+          class="fill-slate-100 dark:fill-slate-700/70"
+        />
+        <rect
+          x="59"
+          y="51"
+          width="92"
+          height="6"
+          rx="3"
+          fill="currentColor"
+          class="fill-slate-100 dark:fill-slate-700/70"
+        />
+        <g filter="url(#filter4)">
+          <rect
+            x="12"
+            y="6"
+            width="154"
+            height="40"
+            rx="8"
+            class="fill-white dark:fill-slate-800"
+            shape-rendering="crispEdges"
+          />
+          <rect
+            x="12.5"
+            y="6.5"
+            width="153"
+            height="39"
+            rx="7.5"
+            stroke="currentColor"
+            class="stroke-slate-100 dark:stroke-slate-700/60"
+            shape-rendering="crispEdges"
+          />
+          <rect
+            x="20"
+            y="14"
+            width="24"
+            height="24"
+            rx="12"
+            fill="currentColor"
+            class="fill-slate-200 dark:fill-slate-700"
+          />
+          <rect
+            x="52"
+            y="17"
+            width="60"
+            height="6"
+            rx="3"
+            fill="currentColor"
+            class="fill-slate-200 dark:fill-slate-700"
+          />
+          <rect
+            x="52"
+            y="29"
+            width="106"
+            height="6"
+            rx="3"
+            fill="currentColor"
+            class="fill-slate-200 dark:fill-slate-700"
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter4"
+            x="0"
+            y="0"
+            width="178"
+            height="64"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dy="6" />
+            <feGaussianBlur stdDeviation="6" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="BackgroundImageFix"
+              result="effect1_dropShadow_1187_14810"
+            />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="effect1_dropShadow_1187_14810"
+              result="shape"
+            />
+          </filter>
+        </defs>
+      </svg>
+    </slot>
+
+    <div class="max-w-sm mx-auto">
+      <p class="mt-2 font-medium text-foreground">
+        {{ title }}
+      </p>
+      <p class="mb-5 text-sm text-muted-foreground text-wrap">
+        {{ description }}
+      </p>
+    </div>
+
+    <a
+      v-if="showAction"
+      :href="actionLink"
+      class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-card-line bg-card text-foreground shadow-2xs hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover"
+    >
+      {{ actionText }}
+    </a>
+
+    <template name="footer">
+      <button
+        type="button"
+        class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-blue-500"
+        data-hs-overlay="#hs-pro-empty"
+      >
+        <svg
+          class="hidden sm:block shrink-0 size-4"
+          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="M5 12h14" />
+          <path d="M12 5v14" /></svg
+        >Add user
+      </button>
+    </template>
+  </div>
+</template>

package/components/App/LoadingState.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="flex flex-col items-center justify-center py-10 px-4 space-y-6 w-full h-full text-center"
+  >
+    <!-- Ícono/loader -->
+    <svg
+      class="animate-spin w-10 h-10 text-muted-foreground-2"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="10" opacity=".25" />
+      <path d="M22 12a10 10 0 0 1-10 10" />
+    </svg>
+
+    <!-- Skeleton líneas -->
+    <div class="w-full max-w-xs space-y-3">
+      <div
+        class="h-4 bg-surface-1 rounded animate-pulse"
+      ></div>
+      <div
+        class="h-4 bg-surface-1 rounded animate-pulse"
+      ></div>
+      <div
+        v-if="showHint"
+        class="h-4 w-1/2 bg-surface-1 rounded animate-pulse mx-auto"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  showHint: { type: Boolean, default: false },
+});
+</script>

package/components/App/PageLoadingSpinner.vue

@@ -0,0 +1,118 @@
+<script setup>
+const isLoading = ref(false);
+let hideTimer;
+let cleanup = [];
+
+const showLoader = () => {
+  clearTimeout(hideTimer);
+  isLoading.value = true;
+};
+
+const hideLoader = () => {
+  clearTimeout(hideTimer);
+  hideTimer = setTimeout(() => {
+    isLoading.value = false;
+  }, 120);
+};
+
+onMounted(() => {
+  const nuxtApp = useNuxtApp();
+  const router = useRouter();
+
+  cleanup = [
+    nuxtApp.hooks.hook("page:start", showLoader),
+    nuxtApp.hooks.hook("page:finish", hideLoader),
+    nuxtApp.hooks.hook("app:error", hideLoader),
+    router.beforeEach((to, from) => {
+      if (to.fullPath !== from.fullPath) {
+        showLoader();
+      }
+    }),
+    router.afterEach(hideLoader),
+    router.onError(hideLoader),
+  ].filter(Boolean);
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(hideTimer);
+  cleanup.forEach((unregister) => unregister());
+});
+</script>
+
+<template>
+  <ClientOnly>
+    <Transition name="page-loading-spinner">
+      <div
+        v-if="isLoading"
+        class="page-loading-spinner"
+        aria-label="Cargando pagina"
+        role="status"
+      >
+        <span class="page-loading-spinner__ring"></span>
+      </div>
+    </Transition>
+  </ClientOnly>
+</template>
+
+<style scoped>
+.page-loading-spinner {
+  position: fixed;
+  top: 0.625rem;
+  right: 0.5rem;
+  z-index: 2147483647;
+  display: flex;
+  width: 2.5rem;
+  height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(226 232 240 / 0.9);
+  border-radius: 9999px;
+  background: rgb(255 255 255 / 0.88);
+  box-shadow: 0 10px 30px rgb(15 23 42 / 0.16);
+  backdrop-filter: blur(10px);
+  pointer-events: none;
+}
+
+.page-loading-spinner__ring {
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid rgb(148 163 184 / 0.38);
+  border-top-color: rgb(20 184 166);
+  border-radius: 9999px;
+  animation: page-loading-spinner-rotate 0.75s linear infinite;
+}
+
+.page-loading-spinner-enter-active,
+.page-loading-spinner-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.page-loading-spinner-enter-from,
+.page-loading-spinner-leave-to {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+@media (min-width: 640px) {
+  .page-loading-spinner {
+    right: 1.25rem;
+  }
+}
+
+:global(.dark) .page-loading-spinner {
+  border-color: rgb(51 65 85 / 0.85);
+  background: rgb(15 23 42 / 0.78);
+  box-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
+}
+
+:global(.dark) .page-loading-spinner__ring {
+  border-color: rgb(100 116 139 / 0.42);
+  border-top-color: rgb(45 212 191);
+}
+
+@keyframes page-loading-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/components/App/PreviewDock.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { IconX } from '@tabler/icons-vue'
+
+const { docked, undock, expandDock, activeDockId } = useDockedPreviews()
+const router = useRouter()
+const route  = useRoute()
+
+async function open(item, event) {
+  // Misma ruta → la tabla está montada, mostrar float encima del tab
+  if (route.path === item.route) {
+    const rect = event.currentTarget.getBoundingClientRect()
+    expandDock(item.id, rect)
+    return
+  }
+  // Ruta diferente → navegar y restaurar como preview completo
+  await router.push(item.route)
+  await nextTick()
+  useNuxtApp().hooks.callHook('preview:restore', item)
+}
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition ease-out duration-200"
+    enter-from-class="opacity-0 translate-y-4"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition ease-in duration-150"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 translate-y-4"
+  >
+    <div
+      v-if="docked.length"
+      class="fixed bottom-0 left-0 right-0 z-50 flex items-center gap-2 px-4 py-2 bg-card/95 backdrop-blur-md border-t border-card-line shadow-lg"
+    >
+      <span class="text-xs text-muted-foreground shrink-0 mr-1">Minimizados</span>
+
+      <div class="flex items-center gap-2 flex-1 overflow-x-auto">
+        <button
+          v-for="item in docked"
+          :key="item.id"
+          type="button"
+          class="group inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm transition-all shrink-0"
+          :class="activeDockId === item.id
+            ? 'border-primary/50 bg-primary/10 text-primary shadow-sm'
+            : 'border-card-line bg-surface hover:bg-muted-hover text-foreground'"
+          @click="open(item, $event)"
+        >
+          <span class="size-5 rounded-full bg-primary flex items-center justify-center text-[10px] font-bold text-primary-foreground shrink-0">
+            {{ (item.label?.[0] ?? '?').toUpperCase() }}
+          </span>
+          <span class="font-medium max-w-32 truncate">{{ item.label }}</span>
+          <span v-if="item.subtitle" class="text-muted-foreground text-xs max-w-28 truncate hidden sm:inline">{{ item.subtitle }}</span>
+
+          <span
+            class="size-4 inline-flex items-center justify-center rounded hover:bg-red-100 dark:hover:bg-red-900/30 hover:text-red-600 dark:hover:text-red-400 transition-colors ml-0.5"
+            @click.stop="undock(item.id)"
+          >
+            <IconX class="size-3" />
+          </span>
+        </button>
+      </div>
+    </div>
+  </Transition>
+</template>

package/components/App/SwitchColorTheme.vue

@@ -0,0 +1,51 @@
+<script setup>
+const isDark = ref(false)
+
+onMounted(() => {
+  isDark.value = document.documentElement.classList.contains('dark')
+})
+
+async function setTheme(value) {
+  const dark = value === 'dark'
+  isDark.value = dark
+  document.documentElement.classList.toggle('dark', dark)
+  localStorage.setItem('hs_theme', value)
+  document.cookie = `hs_theme=${value};path=/;max-age=${60 * 60 * 24 * 365};SameSite=Lax`
+
+  try {
+    const api = useApi()
+    await api.put('auth/me/preferences/appearance', { value })
+  } catch { /* best-effort */ }
+}
+</script>
+
+<template>
+  <button
+    v-if="isDark"
+    type="button"
+    class="font-medium text-slate-800 rounded-full hover:bg-surface focus:outline-hidden focus:bg-surface dark:text-foreground dark:hover:bg-card dark:focus:bg-card"
+    @click="setTheme('light')"
+  >
+    <span class="group inline-flex shrink-0 justify-center items-center size-9">
+      <svg class="shrink-0 size-4" 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">
+        <circle cx="12" cy="12" r="4"></circle>
+        <path d="M12 2v2"></path><path d="M12 20v2"></path>
+        <path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path>
+        <path d="M2 12h2"></path><path d="M20 12h2"></path>
+        <path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path>
+      </svg>
+    </span>
+  </button>
+  <button
+    v-else
+    type="button"
+    class="font-medium text-slate-400 rounded-full hover:bg-surface focus:outline-hidden focus:bg-surface dark:text-foreground dark:hover:bg-card dark:focus:bg-card"
+    @click="setTheme('dark')"
+  >
+    <span class="group inline-flex shrink-0 justify-center items-center size-9">
+      <svg class="shrink-0 size-4" 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="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+      </svg>
+    </span>
+  </button>
+</template>