06c212821a
- Updated README.md to reflect new project structure and conventions. - Refactored component imports and paths to align with new layout. - Removed legacy components (AppConfig.vue, AppTopbar.vue) and created new layout components (MainLayout.vue, Sidebar.vue, TopBar.vue). - Implemented warehouse module with components for inventory management (WarehouseDashboard.vue, InventoryTable.vue). - Added composables and services for warehouse logic and API interactions. - Introduced shared components (KpiCard.vue) for KPI display. - Enhanced API service for handling HTTP requests. - Defined TypeScript types for warehouse entities and global application types.
41 lines
1.5 KiB
Vue
41 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { useLayout } from "../../composables/useLayout";
|
|
|
|
const { surfaces, surface, updateColors } = useLayout();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="absolute top-16 right-0 w-64 p-4 bg-white dark:bg-surface-900 rounded-md shadow-lg border border-surface-200 dark:border-surface-700 origin-top z-50 hidden"
|
|
>
|
|
<div class="flex flex-col gap-4">
|
|
<div>
|
|
<span class="text-sm text-surface-600 dark:text-surface-400 font-semibold">Color de Superficie</span>
|
|
<div class="pt-2 flex gap-2 flex-wrap justify-between">
|
|
<button
|
|
v-for="s of surfaces"
|
|
:key="s.name"
|
|
type="button"
|
|
:title="s.name"
|
|
:class="[
|
|
'border border-surface-200 dark:border-surface-700 w-5 h-5 rounded-full p-0 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2',
|
|
{
|
|
'ring-2 ring-offset-2 ring-surface-950 dark:ring-surface-0': surface === s.name,
|
|
},
|
|
]"
|
|
:style="{ backgroundColor: s.palette['500'] }"
|
|
@click="updateColors('surface', s.name)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
button:focus-visible {
|
|
outline: 2px solid var(--p-primary-500);
|
|
outline-offset: 2px;
|
|
}
|
|
</style>
|