refactor(ui): Rediseño completo de UI con Nuxt UI 4
- 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
This commit is contained in:
40
app/components/layout/MobileNavigation.vue
Normal file
40
app/components/layout/MobileNavigation.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<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'
|
||||
}
|
||||
])
|
||||
</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>
|
||||
Reference in New Issue
Block a user