feat: Variables programáticas en templates

Permite definir variables en templates con sintaxis {{nombre🏷️default}}
- Auto-detección de variables al guardar templates
- Drawer para completar valores al cargar template con variables
- Badge mostrando cantidad de variables en tarjeta de template
- Resolución de variables antes de cargar en cola

app/components/templates/TemplateCard.vue

@@ -51,10 +51,13 @@ function formatDate(date: string | number) {
         >
           {{ template.description }}
         </p>
-        <div class="flex items-center gap-2 mt-2">
+        <div class="flex items-center gap-2 mt-2 flex-wrap">
           <UBadge variant="subtle" size="xs">
             {{ template.operations.length }} comandos
           </UBadge>
+          <UBadge v-if="template.variables?.length" variant="subtle" size="xs" color="primary">
+            {{ template.variables.length }} {{ template.variables.length === 1 ? 'variable' : 'variables' }}
+          </UBadge>
           <span class="text-xs text-gray-400 dark:text-gray-500">
             {{ formatDate(template.updatedAt) }}
           </span>

app/components/templates/TemplateList.vue

@@ -1,21 +1,48 @@
 <script setup lang="ts">
+import type { PrintTemplate } from '~/composables/useTemplates'
+import { resolveVariables } from '~/composables/useTemplates'
+
 const templates = useTemplates()
 const queue = usePrintQueue()
 const toast = useToast()
 
+// Estado para el drawer de variables
+const variablesDrawerOpen = ref(false)
+const selectedTemplate = ref<PrintTemplate | null>(null)
+
 // Cargar templates al montar
 onMounted(() => {
   templates.fetchTemplates()
 })
 
 function loadTemplate(id: string) {
-  const ops = templates.loadTemplate(id)
-  if (ops) {
-    queue.loadFromTemplate(ops)
-    toast.add({ title: 'Template cargado en la cola', color: 'success' })
+  const template = templates.templates.value.find(t => t.id === id)
+  if (!template) return
+
+  // Si tiene variables, abrir el drawer
+  if (template.variables && template.variables.length > 0) {
+    selectedTemplate.value = template
+    variablesDrawerOpen.value = true
+  } else {
+    // Sin variables, cargar directo
+    const ops = templates.loadTemplate(id)
+    if (ops) {
+      queue.loadFromTemplate(ops)
+      toast.add({ title: 'Template cargado en la cola', color: 'success' })
+    }
   }
 }
 
+function handleLoadWithVariables(values: Record<string, string>) {
+  if (!selectedTemplate.value) return
+
+  const ops = resolveVariables(selectedTemplate.value.operations, values)
+  queue.loadFromTemplate(ops)
+  toast.add({ title: 'Template cargado en la cola', color: 'success' })
+  variablesDrawerOpen.value = false
+  selectedTemplate.value = null
+}
+
 async function duplicateTemplate(id: string) {
   const result = await templates.duplicateTemplate(id)
   if (result) {
@@ -72,5 +99,13 @@ async function deleteTemplate(id: string) {
         @delete="deleteTemplate"
       />
     </div>
+
+    <!-- Drawer para completar variables -->
+    <TemplatesVariablesDrawer
+      :template="selectedTemplate"
+      :open="variablesDrawerOpen"
+      @update:open="variablesDrawerOpen = $event"
+      @load="handleLoadWithVariables"
+    />
   </div>
 </template>

app/components/templates/VariablesDrawer.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { PrintTemplate } from '~/composables/useTemplates'
+
+const props = defineProps<{
+  template: PrintTemplate | null
+  open: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  load: [values: Record<string, string>]
+}>()
+
+const values = ref<Record<string, string>>({})
+
+// Inicializar con valores por defecto cuando cambia el template
+watch(() => props.template, (t) => {
+  if (t) {
+    values.value = {}
+    for (const v of t.variables || []) {
+      values.value[v.name] = v.defaultValue || ''
+    }
+  }
+}, { immediate: true })
+
+function handleLoad() {
+  emit('load', { ...values.value })
+}
+
+function handleDrawerUpdate(value: boolean) {
+  emit('update:open', value)
+}
+
+function handleClose() {
+  emit('update:open', false)
+}
+
+// Validar que todos los campos requeridos estén completos
+const canLoad = computed(() => {
+  if (!props.template?.variables) return false
+  return props.template.variables.every(v => values.value[v.name]?.trim())
+})
+</script>
+
+<template>
+  <UDrawer
+    :open="open"
+    direction="bottom"
+    title="Completar variables"
+    description="Ingresa los valores para las variables del template"
+    @update:open="handleDrawerUpdate"
+  >
+    <template #body>
+      <div class="space-y-4 p-4">
+        <p class="text-sm text-gray-500 dark:text-gray-400">
+          Template: <strong>{{ template?.name }}</strong>
+        </p>
+
+        <UFormField
+          v-for="v in template?.variables || []"
+          :key="v.name"
+          :label="v.label || v.name"
+          required
+        >
+          <UInput
+            v-model="values[v.name]"
+            :placeholder="v.defaultValue || `Ingrese ${v.label || v.name}`"
+          />
+        </UFormField>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex gap-2 justify-end p-4">
+        <UButton variant="ghost" @click="handleClose">
+          Cancelar
+        </UButton>
+        <UButton
+          color="primary"
+          :disabled="!canLoad"
+          @click="handleLoad"
+        >
+          Cargar en cola
+        </UButton>
+      </div>
+    </template>
+  </UDrawer>
+</template>

app/composables/useTemplates.ts

@@ -1,14 +1,40 @@
 import type { Operation } from './usePrintQueue'
 
+export interface TemplateVariable {
+  name: string
+  label?: string
+  defaultValue?: string
+}
+
 export interface PrintTemplate {
   id: string
   name: string
   description?: string
   operations: Operation[]
+  variables: TemplateVariable[]
   createdAt: string
   updatedAt: string
 }
 
+// Regex para detectar variables en templates
+const VARIABLE_REGEX = /\{\{(\w+)(?::([^:}]+))?(?::([^}]+))?\}\}/g
+
+// Resolver variables en operaciones
+export function resolveVariables(
+  operations: Operation[],
+  values: Record<string, string>
+): Operation[] {
+  return JSON.parse(JSON.stringify(operations)).map((op: Operation) => {
+    for (const [key, val] of Object.entries(op)) {
+      if (typeof val === 'string') {
+        // Reemplazar {{nombre:label:default}} con el valor proporcionado
+        op[key] = val.replace(VARIABLE_REGEX, (_, name) => values[name] ?? '')
+      }
+    }
+    return op
+  })
+}
+
 export function useTemplates() {
   const templates = useState<PrintTemplate[]>('templates', () => [])
   const loading = useState('templatesLoading', () => false)
@@ -119,6 +145,7 @@ export function useTemplates() {
     updateTemplate,
     deleteTemplate,
     loadTemplate,
-    duplicateTemplate
+    duplicateTemplate,
+    resolveVariables
   }
 }

app/pages/index.vue

@@ -71,7 +71,9 @@ onMounted(() => {
           </template>
 
           <template v-else-if="activeTab === 'templates'">
-            <TemplatesTemplateList />
+            <ClientOnly>
+              <TemplatesTemplateList />
+            </ClientOnly>
           </template>
 
           <template v-else-if="activeTab === 'printers'">
@@ -79,9 +81,11 @@ onMounted(() => {
           </template>
 
           <!-- En desktop: mostrar templates debajo del constructor -->
-          <template v-if="isDesktop">
-            <TemplatesTemplateList />
-          </template>
+          <ClientOnly>
+            <template v-if="isDesktop">
+              <TemplatesTemplateList />
+            </template>
+          </ClientOnly>
         </div>
       </main>
     </div>