@awes-io/ui 2.142.0 → 2.143.0

package/docs/components/molecules/aw-badge.md

@@ -0,0 +1,108 @@
+---
+metaTitle: Badge component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwBadge /> component is used to render badges - UI Vue component for AwesCode UI.
+title: Badge
+---
+
+# Badge
+
+**Category:** Molecule | **Import:** Global
+
+The `AwBadge` component displays a small badge with text, icon, or custom content.
+
+## Overview
+
+`AwBadge` provides a small badge component for displaying counts, labels, or status indicators. It supports text, icons, custom colors, and can automatically hide when empty.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwBadge text="5" />
+```
+
+### With Icon
+
+```markup
+<AwBadge icon="notification" />
+```
+
+### With Text and Icon
+
+```markup
+<AwBadge text="3" icon="message" />
+```
+
+### Custom Color
+
+Valid color values: `''` (default), `'info'`, `'success'`, `'warning'`, `'error'`
+
+```markup
+<AwBadge text="New" color="info" />
+<AwBadge text="Error" color="error" />
+<AwBadge text="Success" color="success" />
+<AwBadge text="Warning" color="warning" />
+```
+
+### Hide When Empty
+
+```markup
+<AwBadge :text="count" :hide-if-empty="true" />
+```
+
+### With Pulse Animation
+
+```markup
+<AwBadge pulse />
+```
+
+### Custom Content
+
+```markup
+<AwBadge color="success">
+    <AwIcon name="awesio/check" />
+</AwBadge>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| text | Text or number inside badge | `String` / `Number` | `false` | `''` |
+| icon | Icon name inside badge | `String` | `false` | `''` |
+| color | Badge background color. Valid values: `''` (default), `'info'`, `'success'`, `'warning'`, `'error'` | `String` | `false` | `'page-bg'` |
+| hideIfEmpty | Hide badge if text is empty or 0 | `Boolean` | `false` | `false` |
+| pulse | Show pulse animation | `Boolean` | `false` | `false` |
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Custom badge content | - | Text and/or icon |
+
+### Events
+
+No events are emitted by this component.
+
+## Related Components
+
+- `AwTag` - Tag component
+- `AwLabel` - Label component
+- `AwIcon` - Icon component
+
+## Notes
+
+- **Import Method:** Global - Available as molecule component
+- Functional component for better performance
+- Uses CSS custom properties for colors with RGB support
+- Text badge has padding, icon-only badge has no padding
+- Pulse animation shows animated indicator
+- When `hideIfEmpty` is true, badge hides when text is empty, 0, or null
+- **Valid color values:** Only `''` (empty string for default), `'info'`, `'success'`, `'warning'`, and `'error'` are valid color values. Other values will not work correctly.
+
+

package/docs/components/molecules/aw-banner-text.md

@@ -0,0 +1,90 @@
+---
+metaTitle: Banner Text component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwBannerText /> component is used to render Banner Text - UI Vue component for AwesCode UI.
+title: Banner Text
+---
+
+# Banner Text
+
+**Category:** Molecule | **Import:** Global
+
+The `AwBannerText` component displays a banner with icon/image, title, and description text.
+
+## Overview
+
+`AwBannerText` provides a structured banner layout with an icon or image, title with arrow indicator, and description text. It's useful for informational banners and callouts.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwBannerText 
+    title="Banner Title"
+    description="Banner description text"
+    icon="awesio/info-circle"
+/>
+```
+
+### With Image
+
+```markup
+<AwBannerText 
+    title="Title"
+    description="Description"
+    src="/path/to/image.png"
+/>
+```
+
+### With Custom Icon Color
+
+```markup
+<AwBannerText 
+    title="Warning"
+    description="Warning message"
+    icon="alert"
+    icon-color="warning-500"
+/>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| src | Image source URL | `String` | `false` | `''` |
+| icon | Icon name (when not using image) | `String` | `false` | `''` |
+| iconColor | Icon color | `String` | `false` | `''` |
+| title | Banner title | `String` | `false` | `''` |
+| description | Banner description | `String` | `false` | `''` |
+| rounded | Whether icon is rounded | `Boolean` | `false` | `true` |
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Custom description content | - | Description text |
+| icon | Custom icon content | - | Icon or image |
+| title | Custom title content | - | Title text |
+
+### Events
+
+No events are emitted by this component.
+
+## Related Components
+
+- `AwAlert` - Alert component
+- `AwCard` - Card component
+- `AwIcon` - Icon component
+
+## Notes
+
+- **Import Method:** Global - Available as molecule component
+- Icon is displayed in a rounded container by default
+- Title includes an arrow indicator
+- When `src` is provided, image is used instead of icon
+- Use for informational banners and callouts
+

package/docs/components/molecules/aw-button-nav.md

@@ -0,0 +1,46 @@
+---
+metaTitle: Button nav component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwButtonNav /> component is used to render Button nav - UI Vue component for AwesCode UI.
+title: Button Nav
+---
+
+# Button Nav
+
+**Category:** Molecule | **Import:** Global
+
+The `AwButtonNav` component is a navigation component that extends `AwTabNav` with button-style navigation.
+
+## Overview
+
+`AwButtonNav` provides button-style navigation tabs. It extends `AwTabNav` and uses the same API but with button-specific styling.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwButtonNav :items="navItems" v-model="activeTab" />
+```
+
+See `AwTabNav` documentation for complete usage examples and API details.
+
+## API
+
+`AwButtonNav` extends `AwTabNav` and supports all its props, slots, and events. See [AwTabNav documentation](aw-tab-nav.md) for complete API reference.
+
+The component uses `aw-button-nav` as the base CSS class instead of `aw-tab-nav`.
+
+## Related Components
+
+- `AwTabNav` - Base tab navigation component
+- `AwButton` - Button component
+- `AwLink` - Link component
+
+## Notes
+
+- **Import Method:** Global - Available as molecule component
+- Extends `AwTabNav` with button-specific styling
+- Uses same API as `AwTabNav` - see that component's documentation for details
+- Base CSS class is `aw-button-nav`

package/docs/components/molecules/aw-button.md

@@ -0,0 +1,123 @@
+---
+metaTitle: Button component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwButton /> component is used to render Button - UI Vue component for AwesCode UI.
+title: Button
+---
+
+# Button
+
+**Category:** Molecule | **Import:** Global
+
+The `AwButton` component is a versatile button with multiple themes, sizes, colors, and states.
+
+## Overview
+
+`AwButton` provides a comprehensive button component that extends `AwLink` functionality, supporting routing, external links, and button actions. It includes loading states, icons, and various visual styles.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwButton>Click me</AwButton>
+```
+
+### With Icon
+
+```markup
+<AwButton icon="star">Favorite</AwButton>
+```
+
+### Different Themes
+
+```markup
+<AwButton theme="solid">Solid</AwButton>
+<AwButton theme="outline">Outline</AwButton>
+<AwButton theme="icon" icon="settings" />
+```
+
+### Different Sizes
+
+```markup
+<AwButton size="sm">Small</AwButton>
+<AwButton size="md">Medium</AwButton>
+<AwButton size="lg">Large</AwButton>
+```
+
+### With Loading State
+
+```markup
+<AwButton :loading="isLoading">Submit</AwButton>
+```
+
+### As Link
+
+```markup
+<AwButton href="/page">Go to Page</AwButton>
+<AwButton href="https://example.com">External Link</AwButton>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| size | Button size (xs, sm, md, lg) | `String` | `false` | `'md'` |
+| color | Button color (accent, error, mono, dark) | `String` | `false` | `'accent'` |
+| theme | Button theme (solid, outline, icon) | `String` | `false` | `'solid'` |
+| icon | Leading icon name | `String` | `false` | `''` |
+| iconRight | Trailing icon name | `String` | `false` | `''` |
+| loading | Show loading spinner | `Boolean` / `String` | `false` | `false` |
+| locked | Show lock icon and disable | `Boolean` | `false` | `false` |
+| lockedTooltip | Tooltip when locked | `String` | `false` | `''` |
+| hideText | Hide button text | `Boolean` | `false` | `false` |
+| autoWidth | Auto width (no full width) | `Boolean` | `false` | `false` |
+| highlightIcon | Highlight icon (lg size only) | `Boolean` | `false` | `false` |
+
+All link-related props from `AwLink` are also supported (e.g., `href`, `to`, `text`).
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Button text content | `{ text }` | Text prop value |
+| icon | Custom leading icon | `{ icon }` | Default icon |
+| icon-right | Custom trailing icon | `{ iconRight }` | Default icon |
+
+### Events
+
+All standard button/link events are supported (e.g., `click`).
+
+### Config Options
+
+The component uses default configuration from `@AwConfig`:
+
+```javascript
+export default {
+  AwButton: {
+    routerComponent: 'router-link',
+    size: 'md',
+    color: 'accent',
+    theme: 'solid'
+  }
+}
+```
+
+## Related Components
+
+- `AwActionButton` - Action button with descriptions
+- `AwButtonNav` - Navigation button
+- `AwLink` - Basic link component
+
+## Notes
+
+- **Import Method:** Global - Available as molecule component
+- Extends `AwLink` for routing and link functionality
+- Supports animated icons (automatically detected)
+- Icon highlighting only works with `size="lg"` and `theme="solid"`
+- Loading state shows spinner and disables button
+- Locked state shows lock icon and disables button
+- Custom themes and colors are supported via CSS classes

package/docs/components/molecules/aw-description-input.md

@@ -0,0 +1,67 @@
+---
+metaTitle: Description Input component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwDescriptionInput /> component is used to render Description Input wrapper - UI Vue component for AwesCode UI.
+title: Description Input
+---
+
+# Description Input
+
+**Category:** Molecule | **Import:** Global
+
+The `AwDescriptionInput` component wraps an input field with a description text below it.
+
+## Overview
+
+`AwDescriptionInput` provides a wrapper that combines an input field (via slot) with a description text that appears below it. It's useful for form fields that need helper text.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwDescriptionInput text="Enter your email address">
+    <AwInput v-model="email" label="Email" />
+</AwDescriptionInput>
+```
+
+### With HTML Content
+
+```markup
+<AwDescriptionInput text="<strong>Required</strong> field">
+    <AwInput v-model="name" label="Name" />
+</AwDescriptionInput>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| text | Description text (supports HTML) | `String` | `false` | `''` |
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Input field component | - | - |
+
+### Events
+
+No events are emitted by this component.
+
+## Related Components
+
+- `AwInput` - Input component
+- `AwDescription` - Description component
+- `AwForm` - Form component
+
+## Notes
+
+- **Import Method:** Global - Available as molecule component
+- Description text supports HTML (rendered with `v-html`)
+- Description only shows when `text` prop is not empty
+- Use for form fields that need helper text or instructions
+

package/docs/components/molecules/aw-empty-container.md

@@ -0,0 +1,86 @@
+---
+metaTitle: Empty Container component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwEmptyContainer /> component is used to render Empty Container - UI Vue component for AwesCode UI.
+title: Empty Container
+---
+
+# Empty Container
+
+**Category:** Molecule | **Import:** Global
+
+`AwEmptyContainer` renders an animated empty state with icon or image, title, description, and an optional call-to-action button.
+
+## Usage
+
+### Basic
+
+```markup
+<AwEmptyContainer
+    icon="awesio/empty-box"
+    title="Nothing here yet"
+    message="Start by adding your first item."
+/>
+```
+
+### Custom image and CTA prop
+
+```markup
+<AwEmptyContainer
+    theme="card"
+    image="/img/placeholders/empty.svg"
+    title="No projects"
+    message="Create your first project to get started."
+    :cta-button="{ label: 'Create project', variant: 'primary' }"
+/>
+```
+
+### Custom slots
+
+```markup
+<AwEmptyContainer
+    theme="empty"
+    title="No results"
+    message="Try adjusting your filters."
+>
+    <template #image>
+        <AwIcon name="awesio/search" size="80" />
+    </template>
+
+    <template #button>
+        <AwButton variant="ghost">Clear filters</AwButton>
+    </template>
+</AwEmptyContainer>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| image | Image URL | `String` | `false` | `''` |
+| icon | Icon name | `String` | `false` | `''` |
+| title | Empty state title | `String` | `false` | `''` |
+| message | Description text (sanitized HTML) | `String` | `false` | `''` |
+| theme | Layout style: `card`, `empty`, `transparent` | `String` | `false` | `'card'` |
+| ctaButton | Props passed to `AwButton` | `Object` | `false` | `null` |
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| image | Replace the image/icon | - | `img` or `AwIcon` |
+| button | Replace the CTA button area | - | `AwButton` from `ctaButton` |
+
+### Events
+
+No events are emitted.
+
+## Notes
+
+- Elements animate in on mount with staggered delays.
+- `theme="card"` applies padding and uses `AwCard`; `empty` and `transparent` remove card padding.
+- Use `message` for short HTML-safe descriptions.
+