72 lines
3.7 KiB
Markdown
72 lines
3.7 KiB
Markdown
# Checklist: UI Component Standardization & Premium Elevation
|
|
|
|
## 🧩 1. Core Component Enhancements (Phase 1)
|
|
Upgrade components in `resources/js/Components/Core/Forms/` with premium logic and props.
|
|
|
|
- [x] **`InputGroup.vue`**:
|
|
- [x] Add `error` (String) prop for displaying validation messages.
|
|
- [x] Add `hint` (String) prop for supporting text under the input.
|
|
- [x] Add `isPremium` (Boolean, default true) for enabling premium glassmorphism styles.
|
|
- [x] Add `variant` (String, 'default' | 'glass' | 'soft') prop.
|
|
- [x] Standardize the label to include a red asterisk if `required` is true.
|
|
- [x] Refactor styles to pull from global theme variables (`--bg-secondary`, `--text-primary`).
|
|
|
|
- [x] **`InputGroupSelect.vue`**:
|
|
- [x] Add `error` and `hint` props.
|
|
- [x] Add `isPremium` and `variant` props.
|
|
- [x] Support flexible `options` format (Array of Strings or Array of Objects `{ value, text }`).
|
|
- [x] Update dropdown arrow styling for premium look.
|
|
|
|
- [x] **`InputGroupButton.vue`**:
|
|
- [x] Add `variant` (String, 'primary' | 'secondary' | 'outline' | 'danger' | 'glass' | 'text').
|
|
- [x] Add `loading` (Boolean) to show integrated `LoadingSpinner`.
|
|
- [x] Add `size` (String, 'sm' | 'md' | 'lg').
|
|
- [x] Add `disabled` prop handling (visual and functional).
|
|
- [x] Add default slot support for complex button content (icons + text).
|
|
- [x] Remove hardcoded `text` prop requirement if slot is present.
|
|
|
|
- [x] **`InputGroupTextarea.vue`**:
|
|
- [x] Add `rows` (Number, default 3) prop.
|
|
- [x] Add `error` and `hint` props.
|
|
- [x] Add `isPremium` and `variant` props.
|
|
- [x] Ensure styling matches `InputGroup.vue`.
|
|
|
|
- [x] **`InputGroupCheckbox.vue`**:
|
|
- [x] Add `label` (String) prop.
|
|
- [x] Add `error` prop.
|
|
- [x] Add `isSwitch` (Boolean) prop for toggle-style checkbox.
|
|
- [x] Replace native checkbox with a premium, theme-aware custom design.
|
|
|
|
- [x] **`CardSimple.vue`**:
|
|
- [x] Add `isPremium` / `glass` (Boolean) prop for background glassmorphism.
|
|
- [x] Add `noPadding` (Boolean) for custom body content.
|
|
- [x] Add `shadow` (String, 'none' | 'sm' | 'md' | 'lg') prop.
|
|
|
|
## 🔍 2. Scanning & Replacement (Phase 2)
|
|
Identify and replace raw HTML elements in all pages.
|
|
|
|
### High-Priority Pages (Standardize first)
|
|
- [x] **`EditStoreUltimate.vue`**:
|
|
- [x] Replace `input` with `InputGroup`.
|
|
- [x] Replace `select` with `InputGroupSelect`.
|
|
- [x] Replace `textarea` with `InputGroupTextarea`.
|
|
- [x] Replace `button` with `InputGroupButton`.
|
|
- [x] Remove excessive `<style>` blocks once standardized components are used.
|
|
- [x] **`UserInfoEdit.vue`**:
|
|
- [x] Replace extensive set of ~40+ raw `input` and `select` with `InputGroup` components.
|
|
- [x] **`ShipmentDetail.vue`**:
|
|
- [x] Standardize action buttons with `InputGroupButton` variants.
|
|
- [x] **`AccountSettings.vue`**:
|
|
- [x] Replace user info inputs and buttons.
|
|
|
|
### Page Audit & Cleanup
|
|
- [x] **`resources/js/Pages/`**: Scan all remaining files for raw `<button>`, `<input>`, `<select>`, `<textarea>`.
|
|
- [x] **Consistency Check**: Verify that all replaced components correctly bind `v-model` and handle events like `@click` or `@change`.
|
|
- [x] **Dead Code Removal**: Search for and remove local CSS like `.premium-input`, `.premium-select`, `.btn-premium-launch` from component `<style>` blocks after they are integrated into the core components.
|
|
|
|
## 🏗️ 3. Build & Verification (Phase 3)
|
|
- [x] **NPM Build**: Run `npm run build` to ensure all changes are compiled.
|
|
- [x] **Visual Audit**: Verify the "WOW" factor across different pages and screen sizes.
|
|
- [x] **Docker Restart**: `docker restart bukidbountyapp`.
|
|
- [x] **Baseline Check**: Run tests again to ensure no regressions in functional logic.
|