@innertia-solutions/nuxt-theme-spark 0.1.11

package/components/Admin/Base.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+const isOpen = ref(false)
+const open = () => { isOpen.value = true }
+const close = () => { isOpen.value = false }
+
+provide('vantage:sidebar', { isOpen, open, close })
+</script>
+
+<template>
+  <div class="bg-slate-50 dark:bg-slate-900 min-h-screen">
+
+    <!-- Backdrop mobile -->
+    <Transition enter-from-class="opacity-0" enter-active-class="transition-opacity duration-300"
+                leave-to-class="opacity-0"   leave-active-class="transition-opacity duration-300">
+      <div v-if="isOpen" class="lg:hidden fixed inset-0 z-50 bg-black/40 backdrop-blur-sm" @click="close" />
+    </Transition>
+
+    <!-- Sidebar -->
+    <aside
+      tabindex="-1"
+      aria-label="Sidebar"
+      :class="[
+        'fixed inset-y-0 start-0 z-60 w-65 h-full',
+        'bg-white dark:bg-slate-800 border-e border-slate-200 dark:border-slate-700',
+        'transition-transform duration-300',
+        'lg:translate-x-0',
+        isOpen ? 'translate-x-0' : 'max-lg:-translate-x-full',
+      ]"
+    >
+      <div class="flex flex-col h-full pt-3 lg:pt-6">
+
+        <!-- Logo + close mobile -->
+        <header class="h-11.5 ps-2 pe-2 lg:ps-5 flex items-center gap-x-1 shrink-0">
+          <slot name="logo" />
+          <div class="lg:hidden ms-auto">
+            <button type="button"
+              class="w-6 h-7 inline-flex justify-center items-center rounded-md border border-slate-200 bg-white text-slate-500 hover:bg-slate-50 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-700"
+              @click="close">
+              <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">
+                <polyline points="7 8 3 12 7 16" />
+                <line x1="21" x2="11" y1="12" y2="12" />
+                <line x1="21" x2="11" y1="6"  y2="6"  />
+                <line x1="21" x2="11" y1="18" y2="18" />
+              </svg>
+            </button>
+          </div>
+        </header>
+
+        <!-- Menu scrollable -->
+        <div class="flex-1 min-h-0 mt-1.5 overflow-y-auto
+          [&::-webkit-scrollbar]:w-2
+          [&::-webkit-scrollbar-thumb]:rounded-full
+          [&::-webkit-scrollbar-track]:bg-slate-100
+          [&::-webkit-scrollbar-thumb]:bg-slate-300
+          dark:[&::-webkit-scrollbar-track]:bg-slate-700
+          dark:[&::-webkit-scrollbar-thumb]:bg-slate-500">
+          <slot name="menu" />
+        </div>
+
+        <!-- User footer -->
+        <div class="shrink-0 border-t border-slate-200 dark:border-slate-700 p-5">
+          <slot name="user-footer" />
+        </div>
+
+      </div>
+    </aside>
+
+    <!-- Main content -->
+    <slot />
+
+  </div>
+</template>

package/components/Admin/Header.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+}>()
+
+const sidebar = inject('vantage:sidebar', null) as any
+</script>
+
+<template>
+  <header class="sticky top-0 z-40 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-4 lg:px-6 h-14 flex items-center gap-x-3">
+    <!-- Hamburger mobile -->
+    <button type="button"
+      class="lg:hidden size-8 flex items-center justify-center text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+      @click="sidebar?.open()">
+      <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
+      </svg>
+    </button>
+
+    <!-- Left slot -->
+    <div class="flex-1 flex items-center gap-x-3">
+      <slot name="left">
+        <span v-if="title" class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ title }}</span>
+      </slot>
+    </div>
+
+    <!-- Right slot -->
+    <div class="flex items-center gap-x-2">
+      <slot name="right" />
+    </div>
+  </header>
+</template>

package/components/Admin/Page.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="lg:ps-65">
+    <slot />
+  </div>
+</template>

package/components/Admin/PageHeader.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <div class="flex items-center justify-between mb-6">
+    <div>
+      <h1 class="text-xl font-semibold text-slate-800 dark:text-slate-100">{{ title }}</h1>
+      <p v-if="description" class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">{{ description }}</p>
+    </div>
+    <div class="flex items-center gap-x-2">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/components/App/Button.vue

@@ -0,0 +1,59 @@
+<script setup>
+const props = defineProps({
+  text: { type: String, required: true },
+  size: { type: String, default: "sm", validator: (v) => ["xs","sm","md","lg"].includes(v) },
+  class: { type: String, default: "" },
+  iconClass: { type: String, default: "" },
+  textClass: { type: String, default: "" },
+  outline: { type: Boolean, default: false },
+  severity: { type: String, default: "secondary", validator: (v) => ["primary","secondary","success","danger","warning","info"].includes(v) },
+  icon: { type: [Object, Function], default: null },
+  iconPosition: { type: String, default: "left", validator: (v) => ["left","right"].includes(v) },
+  loading: { type: Boolean, default: false },
+  loadingText: { type: String, default: "Cargando..." },
+  disabled: { type: Boolean, default: false },
+  type: { type: String, default: "button", validator: (v) => ["button","link"].includes(v) },
+  link: { type: String, default: "" },
+  variant: { type: String, default: "default", validator: (v) => ["default","dropdown"].includes(v) },
+})
+
+const sizeClasses = computed(() => ({ xs:"py-0.5 px-2 text-xs font-light", sm:"py-1 px-2.5 text-sm font-light", md:"py-2.5 px-3 text-sm font-light", lg:"py-3 px-4 text-base font-light" }[props.size] || "py-1 px-2.5 text-sm font-light"))
+const iconSizeClasses = computed(() => ({ xs:"size-2", sm:"size-3", md:"size-4", lg:"size-5" }[props.size] || "size-3"))
+
+const severityClasses = computed(() => {
+  if (props.variant === "dropdown") {
+    const d = { primary:"text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20", secondary:"text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-300", success:"text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-900/20", danger:"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20", warning:"text-yellow-600 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20", info:"text-cyan-600 hover:bg-cyan-50 dark:text-cyan-400 dark:hover:bg-cyan-900/20" }
+    return d[props.severity] || d.secondary
+  }
+  const base = "rounded-lg border transition-colors"
+  const v = { primary:"border-blue-600 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-500 dark:bg-blue-900/20 dark:text-blue-300 dark:hover:bg-blue-900/35", secondary:"border-slate-300 bg-slate-50 text-slate-700 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700", success:"border-emerald-600 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-500 dark:bg-emerald-900/20 dark:text-emerald-300 dark:hover:bg-emerald-900/35", danger:"border-red-600 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-500 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/35", warning:"border-yellow-600 bg-yellow-50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-500 dark:bg-yellow-900/20 dark:text-yellow-300 dark:hover:bg-yellow-900/35", info:"border-cyan-600 bg-cyan-50 text-cyan-700 hover:bg-cyan-100 dark:border-cyan-500 dark:bg-cyan-900/20 dark:text-cyan-300 dark:hover:bg-cyan-900/35" }
+  return `${base} ${v[props.severity] || v.primary}`
+})
+
+const buttonClasses = computed(() => {
+  if (props.variant === "dropdown") {
+    const dis = props.type === "button" ? "disabled:opacity-50 disabled:pointer-events-none" : isDisabled.value ? "opacity-50 pointer-events-none" : ""
+    return `w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm transition-colors text-left ${severityClasses.value} ${dis} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 ${props.class}`
+  }
+  const dis = props.type === "button" ? "disabled:opacity-50 disabled:pointer-events-none" : isDisabled.value ? "opacity-50 pointer-events-none" : ""
+  const cursor = props.type === "link" ? "cursor-pointer" : ""
+  return `${sizeClasses.value} ${severityClasses.value} ${dis} focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 ${cursor} inline-flex justify-center items-center gap-x-2 whitespace-nowrap ${props.class}`
+})
+
+const displayText = computed(() => props.loading ? props.loadingText : props.text)
+const isDisabled = computed(() => props.disabled || props.loading)
+</script>
+<template>
+  <NuxtLink v-if="type === 'link'" :to="link" :class="buttonClasses">
+    <div v-if="loading" :class="`animate-spin border-[2.5px] border-t-transparent rounded-full ${iconSizeClasses}`" :style="`border-color: currentColor; border-top-color: transparent`" role="status" />
+    <component v-else-if="icon && iconPosition === 'left'" :is="icon" :class="variant === 'dropdown' ? 'size-4 shrink-0' : `${iconSizeClasses} ${iconClass}`" />
+    <slot><span :class="textClass">{{ displayText }}</span></slot>
+    <component v-if="!loading && icon && iconPosition === 'right'" :is="icon" :class="variant === 'dropdown' ? 'size-4 shrink-0' : `${iconSizeClasses} ${iconClass}`" />
+  </NuxtLink>
+  <button v-else :disabled="isDisabled" :class="buttonClasses" type="button">
+    <div v-if="loading" :class="`animate-spin border-[2.5px] border-t-transparent rounded-full ${iconSizeClasses}`" :style="`border-color: currentColor; border-top-color: transparent`" role="status" />
+    <component v-else-if="icon && iconPosition === 'left'" :is="icon" :class="variant === 'dropdown' ? 'size-4 shrink-0' : `${iconSizeClasses} ${iconClass}`" />
+    <slot><span :class="textClass">{{ displayText }}</span></slot>
+    <component v-if="!loading && icon && iconPosition === 'right'" :is="icon" :class="variant === 'dropdown' ? 'size-4 shrink-0' : `${iconSizeClasses} ${iconClass}`" />
+  </button>
+</template>

package/components/App/Dropdown.vue

@@ -0,0 +1,286 @@
+<script setup>
+// Props
+const props = defineProps({
+  triggerText: {
+    type: String,
+    default: "Dropdown",
+  },
+  triggerLabel: {
+    type: String,
+    default: "Dropdown menu",
+  },
+  triggerClass: {
+    type: String,
+    default: "",
+  },
+  triggerSize: {
+    type: String,
+    default: "sm",
+    validator: (value) => ["xs", "sm", "md", "lg"].includes(value),
+  },
+  triggerSeverity: {
+    type: String,
+    default: "secondary",
+    validator: (value) =>
+      ["primary", "secondary", "success", "danger", "warning", "info"].includes(
+        value
+      ),
+  },
+  triggerOutline: {
+    type: Boolean,
+    default: true,
+  },
+  wrapperClass: {
+    type: String,
+    default: "",
+  },
+  menuClass: {
+    type: String,
+    default: "",
+  },
+  placement: {
+    type: String,
+    default: "bottom-right",
+    validator: (value) =>
+      [
+        "bottom",
+        "bottom-left",
+        "bottom-right",
+        "top",
+        "top-left",
+        "top-right",
+        "left",
+        "right",
+      ].includes(value),
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  autoClose: {
+    type: String,
+    default: "true",
+    validator: (value) =>
+      ["true", "false", "inside", "outside"].includes(value),
+  },
+});
+
+// Emits
+const emit = defineEmits(["item-click", "open", "close"]);
+
+// Reactive data
+const triggerId = ref(
+  `dropdown-trigger-${Math.random().toString(36).substr(2, 9)}`
+);
+
+// Computed
+const triggerSizeClasses = computed(() => {
+  const sizes = {
+    xs: "py-0.5 px-2 text-xs font-light",
+    sm: "py-1 px-2.5 text-sm font-light",
+    md: "py-2.5 px-3 text-sm font-light",
+    lg: "py-3 px-4 text-base font-light",
+  };
+  return sizes[props.triggerSize] || sizes.sm;
+});
+
+const triggerSeverityClasses = computed(() => {
+  const base = "rounded-lg border transition-colors";
+  const variants = {
+    primary: props.triggerOutline
+      ? "border-blue-600 text-blue-600 hover:bg-blue-50 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-900/20"
+      : "border-transparent bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700",
+    secondary: props.triggerOutline
+      ? "border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700/50"
+      : "border-transparent bg-gray-600 text-white hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-700",
+    success: props.triggerOutline
+      ? "border-green-600 text-green-600 hover:bg-green-50 dark:border-green-500 dark:text-green-500 dark:hover:bg-green-900/20"
+      : "border-transparent bg-green-600 text-white hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700",
+    danger: props.triggerOutline
+      ? "border-red-600 text-red-600 hover:bg-red-50 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-900/20"
+      : "border-transparent bg-red-600 text-white hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700",
+    warning: props.triggerOutline
+      ? "border-yellow-600 text-yellow-600 hover:bg-yellow-50 dark:border-yellow-500 dark:text-yellow-500 dark:hover:bg-yellow-900/20"
+      : "border-transparent bg-yellow-600 text-white hover:bg-yellow-700 dark:bg-yellow-600 dark:hover:bg-yellow-700",
+    info: props.triggerOutline
+      ? "border-cyan-600 text-cyan-600 hover:bg-cyan-50 dark:border-cyan-500 dark:text-cyan-500 dark:hover:bg-cyan-900/20"
+      : "border-transparent bg-cyan-600 text-white hover:bg-cyan-700 dark:bg-cyan-600 dark:hover:bg-cyan-700",
+  };
+
+  return `${base} ${variants[props.triggerSeverity] || variants.secondary}`;
+});
+
+const triggerButtonClasses = computed(() => {
+  const disabled = "disabled:opacity-50 disabled:pointer-events-none";
+  const focus =
+    "focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800";
+
+  return `hs-dropdown-toggle ${triggerSizeClasses.value} ${triggerSeverityClasses.value} ${disabled} ${focus} inline-flex justify-center items-center gap-x-2 ${props.triggerClass}`;
+});
+
+const placementClass = computed(() => {
+  const placements = {
+    bottom: "[--placement:bottom]",
+    "bottom-left": "[--placement:bottom-left]",
+    "bottom-right": "[--placement:bottom-right]",
+    top: "[--placement:top]",
+    "top-left": "[--placement:top-left]",
+    "top-right": "[--placement:top-right]",
+    left: "[--placement:left]",
+    right: "[--placement:right]",
+  };
+  return placements[props.placement] || "[--placement:bottom-left]";
+});
+
+const defaultItems = computed(() => {
+  return props.items.length
+    ? props.items
+    : [
+        {
+          label: "Editar",
+          type: "button",
+          severity: "primary",
+          action: () => {},
+        },
+        {
+          label: "Duplicar",
+          type: "button",
+          severity: "success",
+          action: () => {},
+        },
+        {
+          label: "Eliminar",
+          type: "button",
+          severity: "danger",
+          action: () => {},
+        },
+        { label: "Ver detalles", type: "link", href: "#" },
+      ];
+});
+
+// Methods
+const getItemButtonClasses = (item) => {
+  const severity = item.severity || "default";
+
+  const severityClasses = {
+    default:
+      "text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300",
+    primary:
+      "text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20",
+    success:
+      "text-green-600 hover:bg-green-50 dark:text-green-400 dark:hover:bg-green-900/20",
+    danger:
+      "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20",
+    warning:
+      "text-yellow-600 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20",
+    info: "text-cyan-600 hover:bg-cyan-50 dark:text-cyan-400 dark:hover:bg-cyan-900/20",
+  };
+
+  return severityClasses[severity] || severityClasses.default;
+};
+
+const toggleDropdown = () => {
+  // Handled by Preline JS automatically
+};
+
+const closeDropdown = () => {
+  // Handled by Preline JS automatically
+};
+
+const handleItemClick = (item, event) => {
+  emit("item-click", { item, event });
+
+  if (item.action && typeof item.action === "function") {
+    item.action();
+  }
+
+  if (item.href === "#" || item.href === "") {
+    event.preventDefault();
+  }
+};
+</script>
+<template>
+  <div class="hs-dropdown relative inline-flex" :class="wrapperClass">
+    <!-- Trigger button -->
+    <button
+      :id="triggerId"
+      type="button"
+      :class="triggerButtonClasses"
+      aria-haspopup="menu"
+      :aria-expanded="false"
+      :aria-label="triggerLabel"
+    >
+      <slot name="trigger" :toggle="toggleDropdown">
+        {{ triggerText }}
+        <svg
+          class="hs-dropdown-open:rotate-180 size-4 transition-transform duration-200"
+          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="m6 9 6 6 6-6" />
+        </svg>
+      </slot>
+    </button>
+
+    <!-- Dropdown menu -->
+    <div
+      class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-40 bg-white shadow-md rounded-lg p-1 space-y-0.5 mt-2 dark:bg-gray-800 dark:border dark:border-gray-700 dark:divide-gray-700 z-50 border border-gray-200"
+      :class="[menuClass, placementClass]"
+      role="menu"
+      :aria-orientation="'vertical'"
+      :aria-labelledby="triggerId"
+    >
+      <slot name="header" v-if="$slots.header"></slot>
+
+      <slot name="items" :close="closeDropdown">
+        <!-- Default items if no slot content provided -->
+        <template v-for="(item, index) in defaultItems" :key="index">
+          <!-- Button if type is button or has action -->
+          <button
+            v-if="item.type === 'button' || item.action"
+            type="button"
+            class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm transition-colors text-left focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800"
+            :class="[
+              item.class || getItemButtonClasses(item),
+              { 'opacity-50 pointer-events-none': item.disabled },
+            ]"
+            :disabled="item.disabled"
+            @click="handleItemClick(item, $event)"
+          >
+            <component
+              :is="item.icon"
+              v-if="item.icon"
+              class="size-4 shrink-0"
+            />
+            {{ item.label }}
+          </button>
+
+          <!-- Link if type is link or has href -->
+          <a
+            v-else
+            class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+            :class="item.class"
+            :href="item.href || '#'"
+            @click="handleItemClick(item, $event)"
+          >
+            <component
+              :is="item.icon"
+              v-if="item.icon"
+              class="size-4 shrink-0"
+            />
+            {{ item.label }}
+          </a>
+        </template>
+      </slot>
+
+      <slot name="footer" v-if="$slots.footer"></slot>
+    </div>
+  </div>
+</template>