@innertia-solutions/nuxt-theme-spark 0.1.26 → 0.1.28

package/components/App/DevEnvironmentBar.vue

@@ -0,0 +1,43 @@
+<script setup>
+const props = defineProps({ sidebar: { type: Boolean, default: false } })
+
+const config = useRuntimeConfig()
+const appEnv = config.public.appEnv
+
+const isVisible = computed(() => appEnv && appEnv !== 'production')
+
+useHead({
+  htmlAttrs: { class: (!props.sidebar && isVisible.value) ? 'has-env-bar' : '' },
+  style: [{ children: (!props.sidebar && isVisible.value) ? ':root { --env-bar-height: 1.5rem; }' : ':root { --env-bar-height: 0px; }' }],
+})
+
+const envColor = computed(() => {
+  const env = appEnv.toLowerCase()
+  if (env === 'staging') return props.sidebar ? 'bg-amber-50 text-amber-600 border border-amber-200 dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/30' : 'bg-amber-500 text-white'
+  if (env === 'local' || env === 'dev') return props.sidebar ? 'bg-blue-50 text-blue-600 border border-blue-200 dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/30' : 'bg-blue-600 text-white'
+  return props.sidebar ? 'bg-red-50 text-red-600 border border-red-200 dark:bg-red-500/10 dark:text-red-400 dark:border-red-500/30' : 'bg-red-600 text-white'
+})
+</script>
+
+<template>
+  <!-- Sidebar inline variant -->
+  <div v-if="isVisible && sidebar"
+    :class="['w-full rounded-lg px-3 py-1.5 flex items-center justify-center gap-x-1.5 select-none', envColor]"
+  >
+    <span class="text-[9px] font-black tracking-widest uppercase">ENTORNO: {{ appEnv }}</span>
+  </div>
+
+  <!-- Full-width fixed bar -->
+  <div v-else-if="isVisible && !sidebar"
+    class="fixed bottom-0 left-0 right-0 z-[100] h-6 overflow-hidden select-none pointer-events-none"
+  >
+    <div
+      class="flex items-center justify-center w-full h-full text-[10px] font-bold tracking-widest uppercase opacity-90 shadow-lg border-t border-white/10"
+      :class="envColor"
+    >
+      <span class="mr-2">━━━━━</span>
+      ENTORNO: {{ appEnv }}
+      <span class="ml-2">━━━━━</span>
+    </div>
+  </div>
+</template>

package/components/Table.vue

@@ -545,7 +545,7 @@ defineExpose({
                 </template>
                 <!-- Regular column header -->
                 <template v-else>
-                  <div class="px-6 py-3 flex items-center gap-x-1 text-[11px] font-bold text-gray-500 dark:text-slate-400 uppercase tracking-wider w-full">
+                  <div class="px-4 py-3 flex items-center gap-x-1 text-xs font-medium text-slate-500 dark:text-slate-400 w-full">
                     {{ header.column.columnDef.meta?.label ?? header.id }}
                     <span v-if="header.column.getCanSort()">
                       <IconArrowsSort v-if="!header.column.getIsSorted()" class="size-4 opacity-40" />
@@ -559,6 +559,8 @@ defineExpose({
                     class="absolute right-0 top-0 h-full w-3 cursor-col-resize group/rz flex items-center justify-center select-none touch-none"
                     @mousedown.stop="header.getResizeHandler()?.($event)"
                     @touchstart.passive.stop="header.getResizeHandler()?.($event)"
+                    @dragstart.stop.prevent
+                    @click.stop
                   >
                     <div
                       class="h-4 w-px transition-all"
@@ -604,7 +606,7 @@ defineExpose({
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
               :key="'skc-' + header.id"
-              :class="header.id === 'select' ? 'text-center w-12' : 'px-6'"
+              :class="header.id === 'select' ? 'text-center w-12' : 'px-4'"
               :style="{ height: lastRowHeight + 'px' }"
             >
               <div v-if="header.id === 'select'" class="w-4 h-4 bg-gray-300 dark:bg-slate-600 rounded mx-auto"></div>
@@ -622,7 +624,7 @@ defineExpose({
             <td
               v-for="header in (table.getHeaderGroups()[0]?.headers ?? [])"
               :key="'eskc-' + header.id"
-              :class="header.id === 'select' ? 'text-center w-12' : 'px-6'"
+              :class="header.id === 'select' ? 'text-center w-12' : 'px-4'"
               :style="{ height: lastRowHeight + 'px' }"
             >
               <div v-if="header.id === 'select'" class="w-4 h-4 bg-gray-200 dark:bg-slate-600 rounded mx-auto"></div>
@@ -650,7 +652,7 @@ defineExpose({
               :class="[
                 cell.column.id === 'select'
                   ? 'text-center w-12'
-                  : 'px-6 py-3 text-sm text-slate-600 dark:text-slate-300',
+                  : 'px-4 py-3 text-sm text-slate-600 dark:text-slate-300',
                 cell.column.id !== 'select' ? cell.column.columnDef.meta?.class ?? '' : '',
               ]"
               @click.stop="cell.column.id === 'select' ? null : undefined"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/nuxt-theme-spark",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
   "keywords": [
     "nuxt",
@@ -43,4 +43,4 @@
     "nuxt": "^4.4.2",
     "vue": "^3.5.0"
   }
-}
+}