@awes-io/ui 2.142.3 → 2.143.0

package/docs/components/atoms/aw-label.md

@@ -0,0 +1,83 @@
+---
+metaTitle: Label component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwLabel /> component is used to render Label - UI Vue component for AwesCode UI.
+title: Label
+---
+
+# Label
+
+**Category:** Atom | **Import:** Global
+
+The `AwLabel` component displays a styled label with optional icons and customizable colors.
+
+## Overview
+
+`AwLabel` provides a badge-like label component that can display text with optional leading and trailing icons. It supports custom colors and is commonly used for tags, categories, and status indicators.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwLabel label="New" />
+```
+
+### With Icons
+
+```markup
+<AwLabel label="Featured" icon="star" />
+<AwLabel label="Verified" icon="awesio/check" icon-second="awesio/close" />
+```
+
+### With Colors
+
+```markup
+<AwLabel label="Success" color="success-500" />
+<AwLabel label="Warning" color="warning-500" on-color="white" />
+```
+
+### Boolean Icon
+
+```markup
+<AwLabel label="Active" :icon="true" />
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| label | Label text | `String` | `true` | - |
+| color | Background color | `String` | `false` | `''` |
+| onColor | Text/icon color | `String` | `false` | `''` |
+| icon | Leading icon (boolean for default, string for custom) | `Boolean` / `String` | `false` | `null` |
+| iconSecond | Trailing icon name | `String` | `false` | `null` |
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Custom label content (replaces label prop) | - | Label text |
+
+### Events
+
+No events are emitted by this component.
+
+## Related Components
+
+- `AwTag` - Tag component
+- `AwBadge` - Badge component
+- `AwIcon` - Icon component
+
+## Notes
+
+- **Import Method:** Global - Available as atom component
+- When `icon` is `true`, displays default circle icon
+- When `icon` is a string, displays that icon
+- System icons are automatically detected and use `AwIconSystemMono`
+- Default colors are mono-900 background with mono-400 text if no colors specified
+- Use `onColor` to override text color when using custom background color
+

package/docs/components/atoms/aw-link.md

@@ -0,0 +1,99 @@
+---
+metaTitle: Link component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwLink /> component is used to render Link - UI Vue component for AwesCode UI.
+title: Link
+---
+
+# Link
+
+**Category:** Atom | **Import:** Global
+
+The `AwLink` component is a flexible link component that supports routing, external links, and custom styling.
+
+## Overview
+
+`AwLink` provides a link component that automatically handles routing (via Vue Router) for internal links and regular anchor tags for external links. It extends the link mixin for consistent link behavior across the library.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwLink href="/page">Go to Page</AwLink>
+```
+
+### External Link
+
+```markup
+<AwLink href="https://example.com">External Link</AwLink>
+```
+
+### With Router
+
+```markup
+<AwLink :to="{ name: 'page', params: { id: 1 } }">Router Link</AwLink>
+```
+
+### With Custom Color
+
+```markup
+<AwLink href="/page" color="accent-500">Colored Link</AwLink>
+```
+
+### Reset Styling
+
+```markup
+<AwLink href="/page" reset>Unstyled Link</AwLink>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| href | Link destination (string or router object) | `String` / `Object` | `false` | - |
+| to | Router destination (alternative to href) | `String` / `Object` | `false` | - |
+| className | CSS class name | `String` | `false` | From config |
+| text | Link text content | `String` | `false` | - |
+| color | Link color | `String` | `false` | `null` |
+| reset | Remove default link styling | `Boolean` | `false` | `false` |
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Link content | - | Text prop value |
+
+### Events
+
+All standard link events are supported (e.g., `click`).
+
+### Config Options
+
+The component uses default configuration from `@AwConfig`:
+
+```javascript
+export default {
+  AwLink: {
+    routerComponent: 'router-link',
+    baseClass: 'link'
+  }
+}
+```
+
+## Related Components
+
+- `AwButton` - Button component that extends AwLink
+- `AwActionButton` - Action button component
+
+## Notes
+
+- **Import Method:** Global - Available as atom component
+- Automatically uses `router-link` for internal links and `<a>` for external links
+- External links are detected by protocol (http://, https://)
+- Supports both `href` and `to` props for routing
+- Color prop sets CSS custom property for link color
+- Reset prop removes default link styling

package/docs/components/atoms/aw-list.md

@@ -0,0 +1,88 @@
+---
+metaTitle: List component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwList /> component is used to render List - UI Vue component for AwesCode UI.
+title: List
+---
+
+# List
+
+**Category:** Atom | **Import:** Global
+
+The `AwList` component renders an ordered list with optional items array or custom slot content.
+
+## Overview
+
+`AwList` provides a styled ordered list (`<ol>`) that can either render items from an array prop or use custom slot content. It's useful for displaying structured lists with consistent styling.
+
+## Usage
+
+### Basic Example with Items Array
+
+```markup
+<AwList :items="['Item 1', 'Item 2', 'Item 3']" />
+```
+
+### With Custom Item Slot
+
+```markup
+<AwList :items="items">
+    <template #item="{ item, index }">
+        <div>{{ index + 1 }}. {{ item.name }}</div>
+    </template>
+</AwList>
+```
+
+### With Custom Content
+
+```markup
+<AwList>
+    <li>Custom item 1</li>
+    <li>Custom item 2</li>
+    <li>Custom item 3</li>
+</AwList>
+```
+
+### With Item Classes
+
+```markup
+<AwList 
+    :items="items" 
+    item-class="custom-item-class"
+/>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| items | Array of items to render | `Array` | `false` | `[]` |
+| itemClass | CSS class(es) for each list item | `String` / `Array` / `Object` | `false` | `''` |
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Custom list items (replaces items array) | - | Rendered items from array |
+| item | Custom item template when using items array | `{ item, index }` | Item value/text |
+
+### Events
+
+No events are emitted by this component.
+
+## Related Components
+
+- `AwCard` - Card component that may contain lists
+- `AwFlow` - Flow layout for list-like layouts
+
+## Notes
+
+- **Import Method:** Global - Available as atom component
+- Renders as an ordered list (`<ol>`) element
+- When `items` prop is provided, items are rendered automatically
+- When using default slot, provide `<li>` elements directly
+- Use `item` slot for custom item rendering when using `items` array
+

package/docs/components/atoms/aw-progress.md

@@ -0,0 +1,70 @@
+---
+metaTitle: Progress component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwProgress /> component is used to render Progress bar - UI Vue component for AwesCode UI.
+title: Progress
+---
+
+# Progress
+
+**Category:** Atom | **Import:** Global
+
+The `AwProgress` component displays an animated progress bar with customizable color.
+
+## Overview
+
+`AwProgress` provides a horizontal progress bar that animates smoothly when the progress value changes. It supports reading initial value from URL query parameters and custom colors.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwProgress :progress="75" />
+```
+
+### With Custom Color
+
+```markup
+<AwProgress :progress="50" color="success-500" />
+```
+
+### With Initial Value from URL
+
+```markup
+<!-- URL: /page?prev_progress=30 -->
+<AwProgress :progress="75" prev-value-param="prev_progress" />
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| progress | Progress value (0-100) | `Number` | `false` | `0` |
+| prevValueParam | URL query parameter name for initial value | `String` | `false` | `'prev_progress'` |
+| color | Progress bar color | `String` | `false` | `'accent'` |
+
+### Slots
+
+No slots are available for this component.
+
+### Events
+
+No events are emitted by this component.
+
+## Related Components
+
+- `AwButton` - Button component that may show loading/progress
+- `AwUploader` - Upload component that uses progress
+
+## Notes
+
+- **Import Method:** Global - Available as atom component
+- Progress value is clamped between 0 and 100
+- Animation duration is 1000ms with easeOutCirc easing
+- Initial value can be read from URL query parameters
+- Color supports theme color names (e.g., 'accent', 'success-500')
+

package/docs/components/atoms/aw-radio.md

@@ -0,0 +1,109 @@
+---
+metaTitle: Radio component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwRadio /> component is used to render Radio - UI Vue component for AwesCode UI.
+title: Radio
+---
+
+# Radio
+
+**Category:** Atom | **Import:** Global
+
+The `AwRadio` component is a styled radio button input with label support and error handling.
+
+## Overview
+
+`AwRadio` provides a radio button input with consistent styling, label support, and error states. It's designed for radio button groups where only one option can be selected.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwRadio v-model="selected" value="option1" label="Option 1" />
+<AwRadio v-model="selected" value="option2" label="Option 2" />
+```
+
+### Radio Group
+
+```markup
+<template>
+    <div>
+        <AwRadio 
+            v-model="choice" 
+            value="yes" 
+            label="Yes" 
+        />
+        <AwRadio 
+            v-model="choice" 
+            value="no" 
+            label="No" 
+        />
+        <AwRadio 
+            v-model="choice" 
+            value="maybe" 
+            label="Maybe" 
+        />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            choice: 'yes'
+        }
+    }
+}
+</script>
+```
+
+### With Error
+
+```markup
+<AwRadio 
+    v-model="selected" 
+    value="option1" 
+    label="Required option"
+    :error="errorMessage"
+/>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| value | Radio button value | `String` / `Number` / `Boolean` | `false` | `'on'` |
+| checked | Currently selected value (for v-model) | `String` / `Number` / `Boolean` | `false` | - |
+
+All standard HTML radio attributes are supported via `$attrs` (e.g., `disabled`, `required`).
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| label | Custom label content | `{ label, value, isChecked }` | Label text |
+
+### Events
+
+| Name | Payload | Description |
+|------|---------|-------------|
+| change | `value` | Emitted when radio is selected |
+
+## Related Components
+
+- `AwCheckbox` - Checkbox component
+- `AwSwitcher` - Toggle switch component
+- `AwInput` - Text input component
+
+## Notes
+
+- **Import Method:** Global - Available as atom component
+- Uses v-model with `checked` prop and `change` event
+- Only one radio in a group can be selected at a time
+- Extends field and error mixins for label and error handling
+- Value can be string, number, or boolean
+- Radio buttons in the same group should share the same v-model binding

package/docs/components/atoms/aw-refresh-wrapper.md

@@ -0,0 +1,81 @@
+---
+metaTitle: Refresh Wrapper component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwRefreshWrapper /> component is used to render Pull-to-refresh wrapper - UI Vue component for AwesCode UI.
+title: Refresh Wrapper
+---
+
+# Refresh Wrapper
+
+**Category:** Atom | **Import:** Global
+
+The `AwRefreshWrapper` component provides pull-to-refresh functionality for mobile touch devices.
+
+## Overview
+
+`AwRefreshWrapper` enables pull-to-refresh gesture on mobile devices. When the user pulls down at the top of the scrollable content, it triggers a refresh event. The component shows a loading indicator and rotating icon during the pull gesture.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwRefreshWrapper @refresh="handleRefresh">
+    <div>Scrollable content</div>
+</AwRefreshWrapper>
+```
+
+### With Loading State
+
+```markup
+<AwRefreshWrapper :loading="isRefreshing" @refresh="handleRefresh">
+    <div>Content</div>
+</AwRefreshWrapper>
+```
+
+### Disable Refresh
+
+```markup
+<AwRefreshWrapper :ignore-refresh="true">
+    <div>Content without refresh</div>
+</AwRefreshWrapper>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| loading | Whether refresh is in progress | `Boolean` | `false` | `false` |
+| ignoreRefresh | Disable pull-to-refresh functionality | `Boolean` | `false` | `false` |
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Scrollable content | - | - |
+| before | Content before refresh loader | - | - |
+
+### Events
+
+| Name | Payload | Description |
+|------|---------|-------------|
+| refresh | - | Emitted when user completes pull-to-refresh gesture |
+
+## Related Components
+
+- `AwDock` - Dock component with similar touch interactions
+- `AwPage` - Page component that may use refresh wrapper
+
+## Notes
+
+- **Import Method:** Global - Available as atom component
+- Only works on touch devices (mobile)
+- Requires page to be at scroll position 0 (top) to trigger
+- Minimum pull distance is 75px to trigger refresh
+- Maximum pull distance is calculated based on viewport height
+- Supports haptic feedback (vibration) on supported devices
+- Icon rotates based on pull distance when not loading
+

package/docs/components/atoms/aw-select-native.md

@@ -0,0 +1,106 @@
+---
+metaTitle: Select Native component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwSelectNative /> component is used to render Native Select dropdown - UI Vue component for AwesCode UI.
+title: Select Native
+---
+
+# Select Native
+
+**Category:** Atom | **Import:** Global
+
+The `AwSelectNative` component is a styled wrapper around the native HTML select element with label and error handling.
+
+## Overview
+
+`AwSelectNative` provides a native select dropdown with consistent styling, label support, prefix/postfix slots, and error handling. It's useful for simple dropdowns where native behavior is preferred.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwSelectNative 
+    :options="['Option 1', 'Option 2', 'Option 3']"
+    v-model="selected"
+/>
+```
+
+### With Objects
+
+```markup
+<AwSelectNative 
+    :options="options"
+    option-label="name"
+    track-by="id"
+    v-model="selected"
+/>
+```
+
+### With Label and Error
+
+```markup
+<AwSelectNative 
+    label="Choose option"
+    :options="options"
+    v-model="selected"
+    :error="error"
+/>
+```
+
+### With Prefix/Postfix
+
+```markup
+<AwSelectNative 
+    prefix="https://"
+    postfix=".com"
+    :options="domains"
+    v-model="selected"
+/>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| options | Array of options (strings or objects) | `Array` | `false` | `[]` |
+| value | Selected value | `String` / `Number` / `Object` | `false` | `null` |
+| optionLabel | Property name or function to get label | `String` / `Function` | `false` | `''` |
+| optionDisabled | Function to determine if option is disabled | `Function` | `false` | `() => false` |
+| trackBy | Property name or function to get value | `String` / `Function` | `false` | `''` |
+| size | Input size (sm, md) | `String` | `false` | `'md'` |
+| prefix | Prefix text or slot content | `String` | `false` | `''` |
+| postfix | Postfix text or slot content | `String` | `false` | `''` |
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| prefix | Custom prefix content | - | Prefix text |
+| postfix | Custom postfix content | - | Postfix text |
+| label | Custom label content | - | Label text |
+
+### Events
+
+| Name | Payload | Description |
+|------|---------|-------------|
+| input | `value` | Emitted when selection changes |
+
+## Related Components
+
+- `AwSelect` - Advanced select component with search and custom options
+- `AwSelectObject` - Select component for object options
+- `AwInput` - Input component with similar styling
+
+## Notes
+
+- **Import Method:** Global - Available as atom component
+- Uses native HTML select element for better mobile support
+- Supports both string arrays and object arrays
+- When using objects, provide `optionLabel` and `trackBy` props
+- Inherits error handling from error mixin
+- Inherits field mixin for label and ID management
+