55 lines
3.2 KiB
Markdown
55 lines
3.2 KiB
Markdown
# Plan: Standardize Vue Element Components & Design System Elevation
|
|
|
|
## 🎯 Goal
|
|
Standardize all UI elements across the application by replacing raw HTML elements (`button`, `input`, `select`, `textarea`, `label`, `checkbox`) with a centralized set of highly customizable, premium-designed Vue components. This will ensure visual consistency, reduce code duplication in `<style>` blocks, and provide a state-of-the-art "WOW" factor for the user.
|
|
|
|
## 🏗️ Technical Approach
|
|
|
|
### 1. Component Enhancements (`resources/js/Components/Core/Forms/`)
|
|
We will upgrade the existing "InputGroup" components to support premium aesthetics (glassmorphism, subtle gradients, and micro-animations) and deep customizability through props.
|
|
|
|
#### Shared Features across all Form Components:
|
|
- **Premium Styling**: Default to a high-end look (rounded corners, soft shadows, theme-aware glass effects).
|
|
- **Error Handling**: Standardized `error` prop and error message display.
|
|
- **Labels & Hints**: Consistent handling of labels (with optional required asterisks) and hint text.
|
|
- **Size Variants**: `sm`, `md` (default), `lg`.
|
|
- **States**: `disabled`, `readonly`, `loading`.
|
|
|
|
#### Specific Component Upgrades:
|
|
- **`InputGroup.vue`**:
|
|
- Support for different text-based input types (text, email, password, date, etc.).
|
|
- Built-in clear button option.
|
|
- **`InputGroupSelect.vue`**:
|
|
- Consistent icon positioning and custom dropdown styling.
|
|
- **`InputGroupTextarea.vue`**:
|
|
- Support for `rows`, `autoResize`.
|
|
- **`InputGroupButton.vue`**:
|
|
- New `variant` prop: `primary`, `secondary`, `outline`, `glass`, `danger`, `text`.
|
|
- Integrated `LoadingSpinner` when `loading` prop is true.
|
|
- Hover animations and scale effects.
|
|
- **`InputGroupCheckbox.vue`**:
|
|
- Premium custom checkbox design (replacing browser defaults).
|
|
- Support for toggle/switch style.
|
|
|
|
### 2. New Core Components
|
|
- **`BaseCard.vue` / `PremiumCard.vue`**: To replace repeated card structures like those in `EditStoreUltimate.vue`, supporting glassmorphism and header/footer slots.
|
|
|
|
### 3. Scanning and Replacement Phase
|
|
A systematic approach to scan `resources/js/Pages/` and replace raw elements:
|
|
1. **Batch 1: Core Pages** (Dashboard, Home, User Profiles).
|
|
2. **Batch 2: Market Pages** (Store Management, Add/Edit Store, POS).
|
|
3. **Batch 3: Configuration & Settings**.
|
|
|
|
## 🎨 Design Tokens (Global Update)
|
|
Ensure `app.js` or a new `theme.css` contains the necessary variables for these premium components to pull from, respecting the `dark-mode` state.
|
|
|
|
## 🚀 Implementation Workflow
|
|
1. **Refine Core Components**: Update the `Core/Forms` components with new props and premium logic.
|
|
2. **Component Proofing**: Test the new components in a dedicated playground page or by updating a single high-visibility page (e.g., `EditStoreUltimate.vue`).
|
|
3. **Broad Replacement**: Iterate through all identified pages, replacing raw HTML with standardized components and removing redundant `<style>` code.
|
|
4. **Audit**: Final check for any missed raw elements or styling inconsistencies.
|
|
|
|
## ⚠️ Stability & Compatibility
|
|
- Maintain existing `modelValue` / `v-model` compatibility to avoid breaking functional logic.
|
|
- Ensure props are optional or have sensible defaults to minimize immediate breakage during the transition.
|