josedario87
955584275b
- Agregar imports de Tailwind CSS v4 y Nuxt UI en main.css - Renombrar QueueActions.vue -> Actions.vue y QueueItem.vue -> Item.vue para evitar conflictos de nombres de componentes - Crear composable useMediaQuery para manejo de responsive - Corregir referencias a componentes en index.vue y PrintQueue.vue - Actualizar imports de servidor a rutas relativas - Instalar @iconify-json/heroicons y @iconify-json/lucide - Actualizar Jimp a sintaxis v1.x
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">
|
|
<QueueItem
|
|
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>
|