- Crear modelo Printer con campos: id, name, host, deviceId, timeout, isDefault - Almacenamiento persistente en data/printers.json - APIs CRUD: GET/POST /api/printers, GET/PUT/DELETE /api/printers/:id - API para seleccionar impresora activa: POST /api/printers/select - Endpoint de impresión ahora usa la impresora seleccionada o la especificada por printerId - Composable usePrinters() para el cliente - UI: Selector de impresora en sidebar, tab Impresoras en mobile - Componentes: PrintersList, PrintersCard, PrintersForm, PrintersSelector
46 lines
1.0 KiB
Vue
46 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
const activeTab = defineModel<string>({ default: 'constructor' })
|
|
|
|
const queue = usePrintQueue()
|
|
|
|
const tabs = computed(() => [
|
|
{
|
|
label: 'Constructor',
|
|
value: 'constructor',
|
|
icon: 'i-heroicons-pencil-square'
|
|
},
|
|
{
|
|
label: `Cola (${queue.operations.value.length})`,
|
|
value: 'queue',
|
|
icon: 'i-heroicons-queue-list'
|
|
},
|
|
{
|
|
label: 'Templates',
|
|
value: 'templates',
|
|
icon: 'i-heroicons-document-duplicate'
|
|
},
|
|
{
|
|
label: 'Impresoras',
|
|
value: 'printers',
|
|
icon: 'i-heroicons-printer'
|
|
}
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="fixed bottom-0 left-0 right-0 bg-white/95 dark:bg-gray-950/95 backdrop-blur border-t border-gray-200 dark:border-gray-800 md:hidden z-50 safe-area-bottom">
|
|
<UTabs
|
|
v-model="activeTab"
|
|
:items="tabs"
|
|
variant="pill"
|
|
color="neutral"
|
|
:content="false"
|
|
class="justify-center py-2"
|
|
:ui="{
|
|
list: 'justify-center gap-1',
|
|
trigger: 'px-3 py-2'
|
|
}"
|
|
/>
|
|
</nav>
|
|
</template>
|