This commit introduces a new configuration module for UI appearance settings. You can now customize various aspects of the application's look and feel. Key features: - Customizable color palette: primary, secondary, warning, and background colors. - Font customization: font family and font size. - Theme selection: light and dark themes. - Animation control: toggle animations on/off. Changes include: - Extended `ui/src/stores/useUi.js` to manage appearance state, including actions for updates and integration with local storage for persistence. - Created `ui/src/views/SettingsView.vue` with UI controls for all customizable settings. - Implemented dynamic application of settings in `ui/src/App.vue` by updating CSS variables and classes on the root element. - Enhanced `SettingsView.vue` with modern styling (TailwindCSS) and subtle animations, ensuring it's theme-aware and respects animation preferences. - Added comprehensive unit tests for the `useUi` store and component tests for `SettingsView.vue` using Vitest and Vue Test Utils. The settings page allows for real-time previews of changes, and all preferences are saved locally to persist across sessions.
23 lines
490 B
JavaScript
23 lines
490 B
JavaScript
/// <reference types="vitest" />
|
|
import { defineConfig } from 'vite'
|
|
import tailwindcss from '@tailwindcss/vite'
|
|
import vue from '@vitejs/plugin-vue'
|
|
import path from 'node:path'
|
|
|
|
export default defineConfig({
|
|
plugins: [
|
|
vue(),
|
|
tailwindcss(),
|
|
],
|
|
resolve: {
|
|
alias: {
|
|
'@': path.resolve(__dirname, 'src'), // ← apunta a /ui/src
|
|
},
|
|
},
|
|
test: {
|
|
globals: true,
|
|
environment: 'jsdom',
|
|
setupFiles: [], // Can add setup files here if needed later
|
|
},
|
|
})
|