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:

Batch 1: Core Pages (Dashboard, Home, User Profiles).
Batch 2: Market Pages (Store Management, Add/Edit Store, POS).
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

Refine Core Components: Update the Core/Forms components with new props and premium logic.
Component Proofing: Test the new components in a dedicated playground page or by updating a single high-visibility page (e.g., EditStoreUltimate.vue).
Broad Replacement: Iterate through all identified pages, replacing raw HTML with standardized components and removing redundant <style> code.
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.

3.2 KiB Raw Permalink Blame History