@awes-io/ui 2.143.0 → 2.144.0

package/docs/reference/colors.md

@@ -0,0 +1,232 @@
+---
+metaTitle: Built-in Colors | AwesCode UI
+meta:
+  - name: description
+    content: Complete list of built-in colors available in AwesCode UI components.
+title: Built-in Colors
+---
+
+# Built-in Colors
+
+AwesCode UI provides a comprehensive color system including semantic colors, mono scale, and named colors for use across all components.
+
+## Color Categories
+
+### Semantic Colors
+
+Semantic colors convey meaning and should be used according to their intended purpose:
+
+| Color | Purpose | Use Cases |
+|-------|---------|-----------|
+| `accent` | Primary brand color | Primary actions, highlights, brand elements |
+| `success` | Positive outcomes | Success messages, completed states, confirmations |
+| `info` | Informational content | Help text, tips, neutral notifications |
+| `notify` | Notifications | Alerts, announcements, attention-grabbing elements |
+| `warning` | Cautionary states | Warnings, pending actions, important notes |
+| `error` | Error states | Error messages, validation failures, critical issues |
+
+### Mono Scale
+
+Grayscale colors from lightest to darkest, useful for backgrounds, borders, and text:
+
+| Color | Lightness | Common Uses |
+|-------|-----------|-------------|
+| `mono-0` | Lightest (white) | Backgrounds, cards |
+| `mono-50` | Very light gray | Subtle backgrounds |
+| `mono-100` | Light gray | Hover states, disabled backgrounds |
+| `mono-200` | Light-medium gray | Borders, dividers |
+| `mono-300` | Medium-light gray | Subtle borders |
+| `mono-400` | Medium gray | Placeholder text |
+| `mono-500` | Neutral gray | Secondary text |
+| `mono-600` | Medium-dark gray | Body text |
+| `mono-700` | Dark gray | Headings |
+| `mono-800` | Darker gray | Emphasized text |
+| `mono-900` | Darkest (black) | Primary text, strong emphasis |
+
+### Named Colors
+
+Additional colors for specific design needs:
+
+| Color | Description |
+|-------|-------------|
+| `red` | Standard red |
+| `peach` | Soft peachy orange |
+| `yellow` | Bright yellow |
+| `magenta` | Vibrant magenta/pink |
+| `purple` | Standard purple |
+| `light-blue` | Light blue shade |
+| `blue` | Standard blue |
+| `green` | Standard green |
+| `lime` | Bright lime green |
+| `grey` | Standard gray |
+| `light-grey` | Light gray variant |
+| `black` | Pure black |
+| `forest` | Deep forest green |
+| `brown` | Earthy brown |
+
+## Usage Examples
+
+### In Components with Color Prop
+
+```markup
+<!-- AwLink -->
+<AwLink href="/page" color="accent">Accent Link</AwLink>
+<AwLink href="/page" color="success">Success Link</AwLink>
+<AwLink href="/page" color="error">Error Link</AwLink>
+
+<!-- AwLabel -->
+<AwLabel label="Active" color="success" />
+<AwLabel label="Pending" color="warning" />
+<AwLabel label="Error" color="error" />
+
+<!-- AwButton -->
+<AwButton color="accent">Primary Action</AwButton>
+<AwButton color="success">Confirm</AwButton>
+<AwButton color="error">Delete</AwButton>
+```
+
+### With Text Utilities
+
+```markup
+<!-- Using semantic colors -->
+<span class="text-success">Success message</span>
+<span class="text-error">Error message</span>
+<span class="text-warning">Warning message</span>
+
+<!-- Using mono scale -->
+<span class="text-mono-600">Body text</span>
+<span class="text-mono-400">Placeholder text</span>
+```
+
+### With Background Utilities
+
+```markup
+<!-- Semantic backgrounds -->
+<div class="bg-success">Success background</div>
+<div class="bg-warning">Warning background</div>
+
+<!-- Mono backgrounds -->
+<div class="bg-mono-0">White background</div>
+<div class="bg-mono-100">Light gray background</div>
+```
+
+## Design Guidelines
+
+### Semantic Color Usage
+
+- **accent**: Use for primary calls-to-action, active states, and brand elements
+- **success**: Confirmations, completed tasks, positive status indicators
+- **info**: Neutral information, help text, general notifications
+- **notify**: Important announcements, new features, attention-needed items
+- **warning**: Cautions, pending reviews, items requiring attention
+- **error**: Errors, validation failures, destructive actions
+
+### Mono Scale Usage
+
+- **Text**: Use mono-600 to mono-900 for readable text
+- **Borders**: Use mono-200 to mono-400 for subtle borders
+- **Backgrounds**: Use mono-0 to mono-200 for backgrounds
+- **Disabled States**: Use mono-100 to mono-300 for disabled elements
+
+### Accessibility
+
+- Ensure sufficient contrast between text and background colors
+- Semantic colors (success, error, warning) should be paired with icons or text for colorblind users
+- Use mono-600 or darker for body text to meet WCAG AA standards
+- Avoid using color as the only means of conveying information
+
+## Color System Architecture
+
+### Paired Colors (Color + OnColor)
+
+AwesCode UI uses a **paired color system** where every background color has a corresponding foreground color optimized for contrast and readability. This ensures text and icons remain readable on any background.
+
+#### How Paired Colors Work
+
+Each color in the system has two variants:
+- **Background color** - Used for backgrounds, fills, and surfaces
+- **OnColor** - The contrasting foreground color for text and icons on that background
+
+For example:
+- `accent` background (#56af40 green) → `on-accent` foreground (#fff white)
+- `error` background (#FF4931 red) → `on-error` foreground (#fff white)
+- `mono-900` background (#f3f5f7 light gray) → `on-mono-900` foreground (#14171d dark)
+
+#### Named Color Backgrounds
+
+Named colors have special light/dark background variants for use in surfaces:
+- **Light backgrounds** (CUSTOM_COLORS_BG_LIGHT) - Soft, pastel versions for light mode
+- **Dark backgrounds** (CUSTOM_COLORS_BG_DARK) - Muted, darker versions for dark mode
+- **OnColor** - The original vibrant color used for text/icons on the backgrounds
+
+Example for `red`:
+- Background in light mode: `#fed9d9` (soft pink)
+- Background in dark mode: `#583433` (dark red)
+- OnColor: `#fa0000` (bright red for text/icons)
+
+### Color Utility Functions
+
+#### `toColor(color)`
+
+Converts a color name to a CSS custom property reference. Used for background colors.
+
+```javascript
+toColor('accent')      // → 'var(--c-accent)'
+toColor('mono-600')    // → 'var(--c-mono-600)'
+toColor('#fa0000')     // → '#fa0000' (CSS colors passed through)
+```
+
+**Behavior:**
+- If the input is a CSS color (hex, rgb, rgba, hsl, hsla), returns it as-is
+- Otherwise, converts to CSS custom property format: `var(--c-{color})`
+- Color names are automatically lowercased
+
+#### `toOnColor(color)`
+
+Converts a color name to its paired foreground color. Used for text and icons.
+
+```javascript
+toOnColor('accent')     // → 'var(--c-on-accent)'
+toOnColor('error')      // → 'var(--c-on-error)'
+toOnColor('on-success') // → 'var(--c-on-success)' (strips 'on-' prefix)
+toOnColor('#fa0000')    // → '#fa0000' (CSS colors passed through)
+```
+
+**Behavior:**
+- If the input starts with `#`, returns it as-is (CSS color)
+- Strips any `on-` prefix from the color name
+- Converts to CSS custom property format: `var(--c-on-{color})`
+- Automatically ensures proper contrast for accessibility
+
+#### Usage in Components
+
+Components use these utilities to maintain paired colors:
+
+```vue
+<template>
+  <div :style="{
+    backgroundColor: toColor(color),
+    color: toOnColor(color)
+  }">
+    Content with proper contrast
+  </div>
+</template>
+```
+
+### Theme Support
+
+The color system supports light and dark themes:
+- **Light theme** (default) - Uses bright backgrounds with dark text
+- **Dark theme** - Uses dark backgrounds with light text
+- All paired colors automatically adapt to the active theme
+- Custom properties ensure consistency across theme switches
+
+## Notes
+
+- All colors support CSS custom property fallbacks
+- Color names are case-insensitive in component props
+- Semantic colors adapt to light/dark theme modes
+- The mono scale provides consistent grayscale values across the system
+- Named colors are fixed but their background variants change with themes
+- Always use paired colors (color + onColor) for accessible contrast
+- The `toOnColor` utility automatically provides the correct foreground color

package/docs/reference/icons.md

@@ -0,0 +1,163 @@
+---
+metaTitle: Built-in Icons | AwesCode UI
+meta:
+  - name: description
+    content: Complete list of built-in icons available in AwesCode UI components.
+title: Built-in Icons
+---
+
+# Built-in Icons
+
+AwesCode UI includes a comprehensive set of mono icons available for use in components like `AwIcon`, `AwButton`, and other components with icon support.
+
+## Icon Naming
+
+All built-in icons use the `awesio/` prefix followed by the icon name. For example:
+- `awesio/check`
+- `awesio/settings`
+- `awesio/user`
+
+## Available Icons
+
+### Navigation & UI
+
+| Icon Name | Description |
+|-----------|-------------|
+| `awesio/angle` | Angle/chevron arrow |
+| `awesio/arrow` | Standard arrow |
+| `awesio/back` | Back navigation |
+| `awesio/close` | Close/dismiss icon |
+| `awesio/close-circle` | Close icon in circle |
+| `awesio/exit` | Exit/logout icon |
+| `awesio/external` | External link indicator |
+| `awesio/menu` | Hamburger menu |
+| `awesio/menu-dots` | Three dots menu |
+| `awesio/more` | More options (horizontal) |
+| `awesio/more-v` | More options (vertical) |
+
+### Actions & Controls
+
+| Icon Name | Description |
+|-----------|-------------|
+| `awesio/check` | Checkmark |
+| `awesio/check-circle` | Checkmark in circle |
+| `awesio/circle` | Circle outline |
+| `awesio/delete` | Delete/trash icon |
+| `awesio/download` | Download arrow |
+| `awesio/drag` | Drag handle |
+| `awesio/edit` | Edit/pencil icon |
+| `awesio/minus` | Minus sign |
+| `awesio/plus` | Plus sign |
+| `awesio/plus-circle` | Plus in circle |
+| `awesio/plus-fill-square` | Plus in filled square |
+| `awesio/save` | Save/floppy disk |
+| `awesio/search` | Search/magnifying glass |
+| `awesio/undo` | Undo action |
+| `awesio/upload` | Upload arrow |
+
+### Status & Info
+
+| Icon Name | Description |
+|-----------|-------------|
+| `awesio/ban` | Ban/prohibited sign |
+| `awesio/bell` | Notification bell |
+| `awesio/info-circle` | Information in circle |
+| `awesio/question-circle` | Question mark in circle |
+| `awesio/spinner` | Loading spinner |
+| `awesio/triangle` | Triangle warning |
+| `awesio/warning` | Warning/alert icon |
+
+### Content & Files
+
+| Icon Name | Description |
+|-----------|-------------|
+| `awesio/box` | Box/package |
+| `awesio/empty-box` | Empty box |
+| `awesio/copy` | Copy/document icon |
+| `awesio/file-csv` | CSV file |
+| `awesio/file-excel` | Excel file |
+| `awesio/file-image` | Image file |
+| `awesio/file-pdf` | PDF file |
+| `awesio/file-word` | Word document |
+| `awesio/image` | Image/picture icon |
+
+### User & Social
+
+| Icon Name | Description |
+|-----------|-------------|
+| `awesio/gift` | Gift/present |
+| `awesio/heart` | Heart outline |
+| `awesio/heart-fill` | Filled heart |
+| `awesio/mail` | Email/envelope |
+| `awesio/phone` | Phone/call icon |
+| `awesio/star` | Star outline |
+| `awesio/star-fill` | Filled star |
+| `awesio/user` | User/person icon |
+
+### Location & Maps
+
+| Icon Name | Description |
+|-----------|-------------|
+| `awesio/home` | Home icon |
+| `awesio/location` | Location/map marker |
+| `awesio/pin` | Pin/thumbtack |
+| `awesio/pin-no` | Unpin icon |
+
+### Security & Privacy
+
+| Icon Name | Description |
+|-----------|-------------|
+| `awesio/eye` | Visible/show |
+| `awesio/eye-no` | Hidden/hide |
+| `awesio/lock` | Lock/secured |
+| `awesio/lock-fill` | Filled lock |
+| `awesio/unlock` | Unlock/unsecured |
+
+### Tools & Settings
+
+| Icon Name | Description |
+|-----------|-------------|
+| `awesio/chart` | Chart/analytics |
+| `awesio/filter` | Filter funnel |
+| `awesio/light` | Light bulb/idea |
+| `awesio/link` | Link/chain icon |
+| `awesio/magic` | Magic wand |
+| `awesio/settings` | Settings/gear icon |
+| `awesio/tag` | Tag outline |
+| `awesio/tag-fill` | Filled tag |
+
+## Usage Examples
+
+### In AwIcon Component
+
+```markup
+<AwIcon name="awesio/check" />
+<AwIcon name="awesio/settings" size="24" />
+```
+
+### In AwButton Component
+
+```markup
+<AwButton icon="awesio/plus" text="Add Item" />
+<AwButton icon="awesio/download">Download</AwButton>
+```
+
+### In Custom Components
+
+```markup
+<AwList :items="items">
+    <template #item="{ item }">
+        <AwFlow :gap="2" align-items="center">
+            <AwIcon :name="item.icon" size="16" />
+            <span>{{ item.title }}</span>
+        </AwFlow>
+    </template>
+</AwList>
+```
+
+## Notes
+
+- All icons are mono (single-color) and inherit the current text color
+- Icon size can be customized using the `size` prop in components that support it
+- Icons are SVG-based for crisp rendering at any size
+- The `awesio/` prefix is required when using built-in icons

package/docs/reference/troubleshooting.md

@@ -406,6 +406,25 @@ if (Object.keys(this.customer.errors).length > 0) {
 
 ## Table Issues
 
+### Rows Not Reactive When Using vue-mc Models
+
+**Problem:** Table rows (for example in `AwTableBuilder`) update only for the first row or only after calling `$forceUpdate` when using `@awes-io/vue-mc` models.
+
+**Cause:** The project uses different Vue versions for `@awes-io/ui` and `@awes-io/vue-mc`, so models are created in one Vue instance and rendered in another, breaking reactivity.
+
+**Solution:** Ensure the project has a single Vue version by configuring root `resolutions`:
+
+```json
+// package.json (root of monorepo)
+"resolutions": {
+    "vue": "2.7.16",
+    "vue-template-compiler": "2.7.16",
+    "vue-server-renderer": "2.7.16"
+}
+```
+
+Remove any Vue-specific `overrides` / `resolutions` from package-level configs (for example `packages/vue-mc/package.json`), reinstall dependencies, and verify a single Vue version with `yarn why vue`.
+
 ### @click:row and #dropdown Conflict
 
 **Problem:** Row click doesn't work when dropdown is present.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@awes-io/ui",
-    "version": "2.143.0",
+    "version": "2.144.0",
     "description": "User Interface (UI) components",
     "keywords": [
         "ui",
@@ -116,5 +116,5 @@
     "peerDependencies": {
         "nuxt": "^2.18.1"
     },
-    "gitHead": "873b089186b8a4dc32b262df8ea1dfcea7b81790"
+    "gitHead": "bbe43e6419007e0b50b286c01f05b2ce733701cb"
 }

package/store/awesIo.js

@@ -42,6 +42,7 @@ export const state = () => ({
     beforeMobileMenu: null,
     beforeProfileButton: null,
     userMenuAvatar: null,
+    bottomBarMoreMenuItem: null,
     afterMobileMenu: null,
     bottomBarAction: null,
 
@@ -142,6 +143,10 @@ export const getters = {
         return state.userMenuAvatar
     },
 
+    bottomBarMoreMenuItemComponent(state) {
+        return state.bottomBarMoreMenuItem
+    },
+
     afterMobileMenuComponent(state) {
         return state.afterMobileMenu
     },
@@ -255,6 +260,12 @@ export const mutations = {
         }
     },
 
+    SET_BOTTOM_BAR_MORE_MENU_ITEM(state, payload) {
+        if (payload && payload.component) {
+            state.bottomBarMoreMenuItem = payload.component
+        }
+    },
+
     SET_AFTER_MOBILE_MENU(state, payload) {
         if (payload && payload.component) {
             state.afterMobileMenu = payload.component