josedario87
470ecef4f1
- Nuevo layout responsivo mobile-first con tabs inferiores - Sidebar colapsable en desktop con cola de impresión - Sistema de templates reutilizables con localStorage - Soporte Dark/Light mode con UColorModeButton - Composables usePrintQueue y useTemplates para estado global - Componentes modulares: CommandBuilder, QuickActions, PrintQueue, QueueItem - Navegación por tabs: Constructor | Cola | Templates
48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
const queue = usePrintQueue()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-3">
|
|
<div v-if="queue.operations.value.length === 0" class="text-center py-8">
|
|
<UIcon name="i-heroicons-queue-list" class="w-12 h-12 text-gray-400 dark:text-gray-600 mx-auto mb-2" />
|
|
<p class="text-gray-500 dark:text-gray-400">
|
|
No hay comandos en la cola
|
|
</p>
|
|
<p class="text-sm text-gray-400 dark:text-gray-500">
|
|
Usa el constructor para agregar comandos
|
|
</p>
|
|
</div>
|
|
|
|
<TransitionGroup name="list" tag="div" class="space-y-2">
|
|
<QueueQueueItem
|
|
v-for="(op, index) in queue.operations.value"
|
|
:key="index"
|
|
:operation="op"
|
|
:index="index"
|
|
:is-first="index === 0"
|
|
:is-last="index === queue.operations.value.length - 1"
|
|
@update="(newOp) => queue.updateOperation(index, newOp)"
|
|
@remove="queue.removeOperation(index)"
|
|
@move-up="queue.moveOperation(index, 'up')"
|
|
@move-down="queue.moveOperation(index, 'down')"
|
|
/>
|
|
</TransitionGroup>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.list-enter-active,
|
|
.list-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.list-enter-from,
|
|
.list-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-30px);
|
|
}
|
|
.list-move {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
</style>
|