106 lines
5.5 KiB
Markdown
106 lines
5.5 KiB
Markdown
# Project UI (Vue 3 + Vite)
|
|
|
|
This project frontend is built with Vue 3 and Vite. It provides a user interface for managing various aspects of the application.
|
|
|
|
## Development
|
|
|
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
|
|
|
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
|
|
|
|
|
## Standardized Card Components
|
|
|
|
This section documents the standardized card components used throughout the UI for modules like Asistencias, Empleados, Planillas, and Tareas. These components have been refactored for a consistent structure, styling approach, and user experience.
|
|
|
|
### Overview
|
|
|
|
Card components provide a summarized display of an item (e.g., an employee, a task) and offer quick actions. The standardization ensures that users encounter a familiar layout and interaction pattern across different modules.
|
|
|
|
### Common HTML Structure
|
|
|
|
All standardized card components share a common HTML structure:
|
|
|
|
- **Root Element:** `<div class="card ...">`
|
|
- This is the main container for the card.
|
|
- Styling is primarily applied using Tailwind CSS utility classes. Common classes include `bg-white shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col`.
|
|
- **Card Header:** `<div class="card-header ...">`
|
|
- Typically contains the title or ID of the item and a status badge.
|
|
- Styled with Tailwind: `flex justify-between items-center mb-3 md:mb-4 pb-2 md:pb-3 border-b border-gray-100`.
|
|
- The title element (e.g., `<h4>`) uses module-specific accent colors.
|
|
- **Card Body:** `<div class="card-body ...">`
|
|
- Displays the main content fields of the item.
|
|
- Styled with Tailwind: `text-sm text-gray-700 space-y-2`.
|
|
- **Card Actions:** `<div class="card-actions ...">`
|
|
- Contains action buttons like "Editar" and "Eliminar".
|
|
- Styled with Tailwind: `mt-auto pt-3 md:pt-4 flex justify-end space-x-2 md:space-x-3`.
|
|
|
|
### Styling with Tailwind CSS
|
|
|
|
The visual appearance of the cards (layout, spacing, typography, borders, shadows) is managed by [Tailwind CSS](https://tailwindcss.com/).
|
|
- Utility classes are applied directly in the component templates (`<template>` section of `.vue` files).
|
|
- The Tailwind configuration can be found in `ui/tailwind.config.js`.
|
|
- Core Tailwind directives (`@tailwind base; @tailwind components; @tailwind utilities;`) are included in `ui/src/style.css`.
|
|
|
|
### Theming with CSS Variables
|
|
|
|
While Tailwind handles most styling, module-specific theming (especially accent colors) and some global style properties are controlled by CSS variables. These variables are defined in the `:root` scope in `ui/src/style.css`.
|
|
|
|
**Key CSS Variables:**
|
|
|
|
- **Module Accent Colors:**
|
|
- `--accent-color-asistencias`: Accent color for the Asistencias module (e.g., for headers, buttons).
|
|
- `--accent-color-empleados`: Accent color for the Empleados module.
|
|
- `--accent-color-planillas`: Accent color for the Planillas module.
|
|
- `--accent-color-tareas`: Accent color for the Tareas module.
|
|
- **Common Colors & Styles:**
|
|
- `--warning-color`: Used for delete buttons and other warning indicators (e.g., `#dc3545`).
|
|
- `--background-color`: Default background for the application.
|
|
- `--text-color`: Default text color.
|
|
- `--muted-text-color`: For less prominent text.
|
|
- `--border-color`: Default border color.
|
|
- `--card-shadow`: Default shadow for cards.
|
|
- `--card-hover-shadow`: Shadow for cards on hover.
|
|
|
|
**Usage Example (in a Vue component):**
|
|
|
|
```html
|
|
<h4 :style="{ color: 'var(--accent-color-empleados)' }">Employee Name</h4>
|
|
|
|
<button :style="{ backgroundColor: 'var(--accent-color-empleados)' }">Edit Employee</button>
|
|
```
|
|
Alternatively, Tailwind's arbitrary value support can be used with CSS variables:
|
|
```html
|
|
<h4 class="text-[var(--accent-color-empleados)]">Employee Name</h4>
|
|
<button class="bg-[var(--accent-color-empleados)] hover:bg-[var(--accent-color-empleados)]/90 ...">Edit</button>
|
|
```
|
|
The latter approach (Tailwind arbitrary values) is generally preferred for consistency with other Tailwind classes, but direct `:style` binding is also used, especially for properties not easily covered by Tailwind utilities or for dynamic hover effects managed in JavaScript.
|
|
|
|
### Functionality
|
|
|
|
- **Actions:**
|
|
- **Edit:** Navigates to the form view for editing the item (e.g., `/empleados/:id`).
|
|
- **Delete:** Initiates a delete process for the item.
|
|
- **Delete Confirmation:** A standardized JavaScript `confirm()` dialog is used before deleting an item, with a message format like: `¿Está seguro de que desea eliminar [tipo de item] "[nombre/ID del item]" (ID: [ID])?`.
|
|
|
|
### Component Usage
|
|
|
|
Each card component is designed to be used within its respective module's views. They typically expect a prop containing the item data and emit an `edit` event.
|
|
|
|
**Example (`cardAsistencia.vue`):**
|
|
```vue
|
|
<template>
|
|
<cardAsistencia :asistencia="asistenciaData" @edit="handleEditAsistencia" />
|
|
</template>
|
|
|
|
<script setup>
|
|
// ...
|
|
const asistenciaData = { id: 1, /* ... other properties */ };
|
|
const handleEditAsistencia = (asistenciaId) => {
|
|
// Navigate to edit page or open modal
|
|
};
|
|
</script>
|
|
```
|
|
The specific prop name matches the module (e.g., `asistencia` for `cardAsistencia`, `employee` for `cardEmpleado`, `planilla` for `cardPlanilla`, `tarea` for `cardTarea`).
|
|
|