@awes-io/ui 2.142.3 → 2.143.0

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

@@ -0,0 +1,82 @@
+---
+metaTitle: Slider component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwSlider /> component is used to render Slider - UI Vue component for AwesCode UI.
+title: Slider
+---
+
+# Slider
+
+**Category:** Atom | **Import:** Global
+
+The `AwSlider` component provides a horizontal scrollable container with drag support and shadow indicators.
+
+## Overview
+
+`AwSlider` creates a horizontal scrolling container that supports mouse and touch drag gestures. It shows shadow indicators on the left and right edges when content can be scrolled, and prevents click events during drag operations.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwSlider>
+    <div class="flex gap-4">
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+    </div>
+</AwSlider>
+```
+
+### Custom Tag
+
+```markup
+<AwSlider tag="section">
+    <div>Scrollable content</div>
+</AwSlider>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| tag | HTML tag for container | `String` | `false` | `'div'` |
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Scrollable content | - | - |
+
+### Events
+
+| Name | Payload | Description |
+|------|---------|-------------|
+| resized | - | Emitted when container is resized |
+
+### Methods
+
+| Name | Parameters | Description |
+|------|-----------|-------------|
+| scrollTo | `element` | Scrolls to the specified child element |
+
+## Related Components
+
+- `AwFlow` - Flow layout component
+- `AwGrid` - Grid layout component
+
+## Notes
+
+- **Import Method:** Global - Available as atom component
+- Supports mouse and touch drag gestures
+- Shows shadow indicators when content is scrollable
+- Prevents click events during drag operations
+- Automatically handles resize events
+- Use `scrollTo(element)` method to programmatically scroll to a child element
+- Click threshold: 300ms or 5px movement to detect drag vs click
+
+

package/docs/components/atoms/aw-sub-headline.md

@@ -0,0 +1,73 @@
+---
+metaTitle: Sub Headline component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwSubHeadline /> component is used to render Sub Headline - UI Vue component for AwesCode UI.
+title: Sub Headline
+---
+
+# Sub Headline
+
+**Category:** Atom | **Import:** Global
+
+The `AwSubHeadline` component is a semantic sub-heading wrapper with consistent styling.
+
+## Overview
+
+`AwSubHeadline` provides a styled sub-heading component that can render as different HTML heading tags (h4-h6). It applies consistent typography and spacing for secondary headings.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwSubHeadline>Sub Heading</AwSubHeadline>
+```
+
+### With Custom Tag
+
+```markup
+<AwSubHeadline tag="h5">Section Subtitle</AwSubHeadline>
+```
+
+### In Cards
+
+```markup
+<AwCard>
+    <AwHeadline>Main Title</AwHeadline>
+    <AwSubHeadline>Subtitle</AwSubHeadline>
+    <p>Content</p>
+</AwCard>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| tag | HTML heading tag (h4-h6) | `String` | `false` | `'h4'` |
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Sub-heading text content | - | - |
+
+### Events
+
+No events are emitted by this component.
+
+## Related Components
+
+- `AwHeadline` - Main heading component
+- `AwTitle` - Title component
+- `AwCard` - Card component that uses sub-headlines
+
+## Notes
+
+- **Import Method:** Global - Available as atom component
+- Default tag is `h4`
+- Use for secondary headings and section subtitles
+- Maintains semantic HTML structure with appropriate heading levels
+

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

@@ -0,0 +1,115 @@
+---
+metaTitle: Switcher component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwSwitcher /> component is used to render Switcher - UI Vue component for AwesCode UI.
+title: Switcher
+---
+
+# Switcher
+
+**Category:** Atom | **Import:** Global
+
+The `AwSwitcher` component is a toggle switch with smooth animations and optional icons.
+
+## Overview
+
+`AwSwitcher` provides a styled toggle switch component that extends `AwCheckbox`. It supports drag gestures, custom colors, icons, and multiple sizes. The switch can be toggled by clicking or dragging.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwSwitcher v-model="enabled" label="Enable feature" />
+```
+
+### Different Sizes
+
+```markup
+<AwSwitcher v-model="enabled" size="sm" label="Small" />
+<AwSwitcher v-model="enabled" size="md" label="Medium" />
+<AwSwitcher v-model="enabled" size="lg" label="Large" />
+```
+
+### With Custom Colors
+
+```markup
+<AwSwitcher 
+    v-model="enabled" 
+    active-color="success"
+    inactive-color="mono-400"
+    label="Custom colors"
+/>
+```
+
+### With Icons
+
+```markup
+<AwSwitcher 
+    v-model="enabled" 
+    icon="awesio/check"
+    off-icon="awesio/close"
+    label="With icons"
+/>
+```
+
+### Icon in Toggle Circle
+
+```markup
+<AwSwitcher 
+    v-model="enabled" 
+    icon="awesio/check"
+    icon-place-in
+    label="Icon in circle"
+/>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| value | Value emitted when checked | `String` / `Number` / `Boolean` / `Object` | `false` | `'on'` |
+| checked | Checked state | `Array` / `Boolean` / `Number` | `false` | `false` |
+| size | Switch size (sm, md, lg) | `String` | `false` | `'md'` | Must be: sm, md, lg |
+| activeColor | Background color when active | `String` | `false` | `'success'` |
+| inactiveColor | Background color when inactive | `String` | `false` | `''` |
+| icon | Icon name when active | `String` | `false` | `''` |
+| offIcon | Icon name when inactive | `String` | `false` | `''` |
+| iconColor | Icon color | `String` | `false` | `''` |
+| hideIcon | Hide icons completely | `Boolean` | `false` | `false` |
+| iconPlaceIn | Place icon inside toggle circle | `Boolean` | `false` | `false` |
+
+All props from `AwCheckbox` are also supported.
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Custom switch element | `{ id, checked, onChange, setError, value }` | Default switch input |
+| label | Custom label content | `{ label, value, isChecked }` | Label text |
+| toggler-icon | Custom icon in toggle circle | - | Default icon |
+
+### Events
+
+| Name | Payload | Description |
+|------|---------|-------------|
+| change | `value` | Emitted when switch state changes |
+
+## Related Components
+
+- `AwCheckbox` - Checkbox component (extended by switcher)
+- `AwRadio` - Radio button component
+- `AwIcon` - Icon component
+
+## Notes
+
+- **Import Method:** Global - Available as atom component
+- Extends `AwCheckbox` for checkbox functionality
+- Supports drag gestures (mouse and touch) for toggling
+- Icons are only shown for md and lg sizes
+- Icon size adapts based on switch size (22px for lg, 12px for md)
+- Drag threshold is 5 pixels to prevent accidental toggles
+- Supports partial/indeterminate state from checkbox

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

@@ -0,0 +1,80 @@
+---
+metaTitle: Tag component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwTag /> component is used to render Tag - UI Vue component for AwesCode UI.
+title: Tag
+---
+
+# Tag
+
+**Category:** Atom | **Import:** Global
+
+The `AwTag` component displays a styled tag/badge with optional icon and customizable colors.
+
+## Overview
+
+`AwTag` provides a small badge-like component for displaying tags, labels, or status indicators. It supports custom colors, icons, and can render as different HTML tags.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwTag text="New" />
+```
+
+### With Icon
+
+```markup
+<AwTag text="Featured" icon="star" />
+```
+
+### With Custom Colors
+
+```markup
+<AwTag text="Success" color="success-500" />
+<AwTag text="Warning" color="warning-500" on-color="white" />
+```
+
+### As Link
+
+```markup
+<AwTag text="Tag" tag="a" href="/tagged" />
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| tag | HTML tag to render | `String` | `false` | `'span'` |
+| color | Background color | `String` | `false` | `'mono-100'` |
+| onColor | Text/icon color | `String` | `false` | `''` |
+| text | Tag text content | `String` | `true` | - |
+| icon | Icon name | `String` | `false` | `null` |
+
+### Slots
+
+No slots are available for this component.
+
+### Events
+
+No events are emitted by this component.
+
+## Related Components
+
+- `AwLabel` - Label component with similar functionality
+- `AwBadge` - Badge component
+- `AwTags` - Multiple tags component
+
+## Notes
+
+- **Import Method:** Global - Available as atom component
+- Default background color is `mono-100`
+- Text color is automatically calculated from background color if `onColor` not provided
+- Supports custom colors via theme color system
+- Icon is displayed before the text
+- Can be rendered as any HTML tag (e.g., `a` for links)
+

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

@@ -0,0 +1,70 @@
+---
+metaTitle: Title component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwTitle /> component is used to render Title - UI Vue component for AwesCode UI.
+title: Title
+---
+
+# Title
+
+**Category:** Atom | **Import:** Global
+
+The `AwTitle` component is a semantic title wrapper with consistent styling.
+
+## Overview
+
+`AwTitle` provides a styled title component that can render as different HTML heading tags (h1-h6). It applies consistent typography and spacing for page or section titles.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwTitle>Page Title</AwTitle>
+```
+
+### With Custom Tag
+
+```markup
+<AwTitle tag="h1">Main Title</AwTitle>
+```
+
+### Different Heading Levels
+
+```markup
+<AwTitle tag="h1">Level 1 Title</AwTitle>
+<AwTitle tag="h2">Level 2 Title</AwTitle>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| tag | HTML heading tag (h1-h6) | `String` | `false` | `'h2'` |
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Title text content | - | - |
+
+### Events
+
+No events are emitted by this component.
+
+## Related Components
+
+- `AwHeadline` - Headline component
+- `AwSubHeadline` - Sub-headline component
+- `AwPage` - Page component that uses titles
+
+## Notes
+
+- **Import Method:** Global - Available as atom component
+- Default tag is `h2`
+- Use for page titles and main section headings
+- Maintains semantic HTML structure with appropriate heading levels
+

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

@@ -0,0 +1,69 @@
+---
+metaTitle: Toggler component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwToggler /> component is used to render Toggler - UI Vue component for AwesCode UI.
+title: Toggler
+---
+
+# Toggler
+
+**Category:** Atom | **Import:** Global
+
+The `AwToggler` component is a collapsible content wrapper with a styled container.
+
+## Overview
+
+`AwToggler` provides a toggleable content section that can be expanded or collapsed. It wraps `AwAccordionFold` with additional styling for a content container.
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwToggler>
+    <p>Toggled content</p>
+</AwToggler>
+```
+
+### With Show Prop
+
+```markup
+<AwToggler :show="isOpen">
+    <div>Content that is open by default</div>
+</AwToggler>
+```
+
+## API
+
+### Props
+
+All props from `AwAccordionFold` are supported via `$attrs`:
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| show | Whether content is visible | `Boolean` | `false` | `false` |
+| tag | HTML tag for wrapper | `String` | `false` | `'div'` |
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Toggled content | - | - |
+
+### Events
+
+All events from `AwAccordionFold` are supported via `$listeners`.
+
+## Related Components
+
+- `AwAccordionFold` - Base accordion component
+- `AwCard` - Card component that may use togglers
+
+## Notes
+
+- **Import Method:** Global - Available as atom component
+- Wraps `AwAccordionFold` with styled content container
+- Content container has background, padding, and rounded corners
+- All props and events are passed through to `AwAccordionFold`
+- Use for collapsible sections with styled content areas

package/docs/components/layouts/aw-layout-center.md

@@ -0,0 +1,168 @@
+---
+metaTitle: LayoutCenter component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwLayoutCenter /> is a centered layout for authentication and standalone pages for AwesCode UI.
+title: LayoutCenter
+---
+
+# AwLayoutCenter
+
+**Category:** Layout | **Import:** Dynamic
+
+The `AwLayoutCenter` component is a centered layout designed for authentication pages, standalone forms, and centered content. It provides a centered frame with optional logo and background.
+
+## Overview
+
+`AwLayoutCenter` provides a centered layout with:
+- Centered content frame
+- Optional logo display
+- Background image support
+- Dark theme support
+- Footer copyright text
+- Responsive design
+
+## Usage
+
+### Nuxt Page (Recommended)
+
+For Nuxt pages, use the `layout` property in your component options:
+
+```markup
+<template>
+    <AwCard class="max-w-md mx-auto">
+        <template #title>
+            <AwHeadline>Sign In</AwHeadline>
+        </template>
+
+        <form @submit.prevent="onLogin">
+            <AwGrid>
+                <AwInput
+                    v-model="formData.email"
+                    name="email"
+                    label="Email"
+                    type="email"
+                    required
+                />
+
+                <AwPassword
+                    v-model="formData.password"
+                    name="password"
+                    label="Password"
+                    required
+                />
+
+                <AwButton type="submit" size="lg" class="w-full">
+                    Sign In
+                </AwButton>
+            </AwGrid>
+        </form>
+    </AwCard>
+</template>
+
+<script>
+export default {
+    layout: 'center',
+
+    data() {
+        return {
+            formData: {
+                email: '',
+                password: ''
+            }
+        }
+    },
+
+    methods: {
+        onLogin() {
+            // Handle login
+        }
+    }
+}
+</script>
+```
+
+### Component Usage
+
+For non-Nuxt contexts or custom layouts, use the component directly:
+
+```markup
+<AwLayoutCenter>
+    <AwCard>
+        <h1>Login</h1>
+        <AwForm url="/api/login">
+            <!-- form fields -->
+        </AwForm>
+    </AwCard>
+</AwLayoutCenter>
+```
+
+### With Custom Container
+
+```markup
+<AwLayoutCenter>
+    <template #container>
+        <div class="custom-container">
+            <slot />
+        </div>
+    </template>
+</AwLayoutCenter>
+```
+
+## API
+
+### Props
+
+This component does not have props. Logo and background are managed via Vuex store and config.
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Main content | - | - |
+| container | Custom container wrapper | - | Default centered container |
+
+### Events
+
+This component does not emit custom events.
+
+### Config Options
+
+Background and logo can be configured in `awes.config.js`:
+
+```javascript
+export default {
+  _config: {
+    default: {
+      background: {
+        src: '/path/to/background.jpg',
+        // ... other background styles
+      }
+    },
+    dark: {
+      background: {
+        src: '/path/to/dark-background.jpg'
+      }
+    }
+  }
+}
+```
+
+## Related Components
+
+- `AwLayoutProvider` - Layout provider component (used internally)
+- `AwLayout` - Default layout with sidebar
+
+## Notes
+
+- **Import Method:** Dynamic - Component is loaded on-demand as a layout
+- **For Nuxt pages:** Use `layout: 'center'` in component options instead of wrapping with `<AwLayoutCenter>`
+- The Nuxt layout system automatically wraps your page content with `AwLayoutCenter`
+- Logo is retrieved from Vuex store (`awesIo` module)
+- Background image is configured via `$awes._config`
+- Background changes based on dark theme state
+- Logo is hidden on mobile (`hidden sm:block`)
+- Footer copyright text is automatically displayed
+- Content frame is centered with max-width
+- Component uses `AwLayoutProvider` for layout structure
+- Suitable for login, registration, and standalone pages