@awes-io/ui 2.142.0 → 2.143.0

package/docs/components/organisms/aw-bottom-bar.md

@@ -0,0 +1,66 @@
+---
+metaTitle: BottomBar component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwBottomBar /> component displays a fixed bottom action bar - UI Vue component for AwesCode UI.
+title: BottomBar
+---
+
+# AwBottomBar
+
+**Category:** Organism | **Import:** Dynamic
+
+The `AwBottomBar` component displays a fixed action bar at the bottom of the screen, commonly used for mobile navigation or persistent actions.
+
+## Overview
+
+- Fixed bottom positioning
+- Action buttons
+- Mobile-optimized
+- Responsive visibility
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwBottomBar>
+  <AwButton>Save</AwButton>
+  <AwButton color="mono">Cancel</AwButton>
+</AwBottomBar>
+```
+
+### With Navigation
+
+```markup
+<AwBottomBar>
+  <AwButton href="/" icon="awesio/home">Home</AwButton>
+  <AwButton href="/search" icon="awesio/search">Search</AwButton>
+  <AwButton href="/profile" icon="awesio/user">Profile</AwButton>
+</AwBottomBar>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| visible | Show/hide bar | `Boolean` | `false` | `true` |
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Bar content | - | - |
+
+## Related Components
+
+- [AwPageMenuButtons](aw-page-menu-buttons.md) - Page action buttons
+
+## Notes
+
+- **Import Method:** Dynamic - Component is loaded on-demand as organism
+- Fixed to bottom of viewport
+- Adds padding to body to prevent content overlap
+- Typically used on mobile devices

package/docs/components/organisms/aw-calendar-days.md

@@ -0,0 +1,115 @@
+---
+metaTitle: Calendar Days component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwCalendarDays /> component is used to render Calendar Days - UI Vue component for AwesCode UI.
+title: Calendar Days
+---
+
+# AwCalendarDays
+
+**Category:** Organism (Internal) | **Import:** Dynamic
+
+The `AwCalendarDays` component is an internal calendar sub-component that renders a grid of days for a given month and year. It's used internally by `AwCalendar` and `AwDate` components.
+
+## Overview
+
+`AwCalendarDays` provides a calendar days grid with:
+- 42-day grid (6 weeks × 7 days)
+- Day highlighting and styling
+- Disabled day support
+- Today highlighting
+- Custom day class functions
+- Functional component for performance
+
+## Usage
+
+This component is typically used internally by `AwCalendar` and `AwDate`. Direct usage is not recommended unless building custom calendar components.
+
+### Internal Usage
+
+```markup
+<AwCalendarDays
+    :year="2024"
+    :month="0"
+    :first-day="1"
+    :day-class="getDayClass"
+    :day-disabled="isDayDisabled"
+    :show-today="true"
+/>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| year | Year to display (4 digits) | `Number` | `false` | Current year |
+| month | Month to display (0-11) | `Number` | `false` | Current month |
+| firstDay | First day of week (0=Sunday, 1=Monday) | `Number` | `false` | `null` (from config) |
+| dayClass | Function returning CSS classes for day | `Function` | `false` | `() => null` |
+| dayDisabled | Function returning disabled state for day | `Function` | `false` | `() => null` |
+| showToday | Highlight today's date | `Boolean` | `false` | `false` |
+
+**Day Class Function:**
+```javascript
+dayClass(date) {
+  // date is a Date object
+  // return string, array, or object for Vue class binding
+  return 'custom-class'
+}
+```
+
+**Day Disabled Function:**
+```javascript
+dayDisabled(date) {
+  // date is a Date object
+  // return true to disable, false to enable
+  return date.getDay() === 0 // Disable Sundays
+}
+```
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| default | Custom day cell rendering | `{ date, day, month, isOutside, isToday }` | Default day cell |
+| before | Content before day grid | - | - |
+| after | Content after day grid | - | - |
+
+### Events
+
+This component does not emit events directly (uses parent component's click handlers).
+
+### Config Options
+
+The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:
+
+```javascript
+export default {
+  AwCalendar: {
+    firstDay: 1  // Monday
+  }
+}
+```
+
+## Related Components
+
+- `AwCalendar` - Main calendar component
+- `AwCalendarNav` - Calendar navigation component
+- `AwCalendarWeekdays` - Weekday headers component
+- `AwCalendarDay` - Individual day cell component
+
+## Notes
+
+- **Import Method:** Dynamic - Component is loaded on-demand as an organism
+- Component is functional (stateless) for optimal performance
+- Always renders 42 days (6 weeks) to maintain consistent size
+- Days outside current month are marked with `isOutside` flag
+- Uses `getCalendarDates` utility function to generate date array
+- Day cells are rendered using `AwCalendarDay` component
+- Outside days get `aw-calendar__day_outside` class
+- Today gets `aw-calendar__day_today` class when `showToday` is true
+- Component uses config for `firstDay` if not provided as prop
+- Days are clickable and emit events through parent component

package/docs/components/organisms/aw-calendar-nav.md

@@ -0,0 +1,98 @@
+---
+metaTitle: Calendar Nav component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwCalendarNav /> component is used to render Calendar Nav - UI Vue component for AwesCode UI.
+title: Calendar Nav
+---
+
+# AwCalendarNav
+
+**Category:** Organism (Internal) | **Import:** Dynamic
+
+The `AwCalendarNav` component is an internal calendar sub-component that renders navigation controls (previous/next buttons) and displays the current month and year. It's used internally by `AwCalendar` and `AwDate` components.
+
+## Overview
+
+`AwCalendarNav` provides calendar navigation with:
+- Previous/next month buttons
+- Current month and year display
+- Disabled state support
+- Internationalized month names
+- Icon-based navigation buttons
+
+## Usage
+
+This component is typically used internally by `AwCalendar` and `AwDate`. Direct usage is not recommended unless building custom calendar components.
+
+### Internal Usage
+
+```markup
+<AwCalendarNav
+    :month="0"
+    :year="2024"
+    :disabled-prev="false"
+    :disabled-next="false"
+    @click:prev="shiftMonth(-1)"
+    @click:next="shiftMonth(1)"
+/>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| month | Month to display (0-11) | `Number` | `false` | - |
+| year | Year to display (4 digits) | `Number` | `false` | - |
+| months | Custom month names array or function | `Array` / `Function` | `false` | `null` |
+| disabledPrev | Disable previous button | `Boolean` | `false` | `false` |
+| disabledNext | Disable next button | `Boolean` | `false` | `false` |
+
+**Months Format:**
+- Array: `['January', 'February', ...]`
+- Function: Day.js locale function (e.g., `dayjs.localeData().months()`)
+
+### Slots
+
+This component does not have slots.
+
+### Events
+
+| Name | Payload | Description |
+|------|---------|-------------|
+| click:prev | - | Emitted when previous button is clicked |
+| click:next | - | Emitted when next button is clicked |
+
+### Config Options
+
+The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:
+
+```javascript
+export default {
+  AwCalendar: {
+    months: ['January', 'February', 'March', ...]
+  }
+}
+```
+
+## Related Components
+
+- `AwCalendar` - Main calendar component
+- `AwCalendarDays` - Calendar days grid component
+- `AwCalendarWeekdays` - Weekday headers component
+- `AwButton` - Button component used for navigation
+- `AwIconSystemMono` - Icon component used for arrows
+
+## Notes
+
+- **Import Method:** Dynamic - Component is loaded on-demand as an organism
+- Navigation buttons only show if corresponding event listeners are present
+- Month names are automatically internationalized using Day.js locale
+- Falls back to config months if Day.js locale is not available
+- Previous button shows left arrow icon
+- Next button shows right arrow icon (rotated 180°)
+- Title spacing adjusts based on which buttons are visible
+- Component uses `AwButton` with `theme="icon"` for navigation buttons
+- Month and year are displayed as plain text (format: "Month Year")

package/docs/components/organisms/aw-calendar-view.md

@@ -0,0 +1,98 @@
+---
+metaTitle: Calendar View component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwCalendarView /> component is used to render Calendar View - UI Vue component for AwesCode UI.
+title: Calendar View
+---
+
+# AwCalendarView
+
+**Category:** Organism (Internal) | **Import:** Dynamic
+
+The `AwCalendarView` component is an internal calendar sub-component that renders a simplified calendar view without navigation. It displays weekday headers and a days grid, and emits date click events.
+
+## Overview
+
+`AwCalendarView` provides a simplified calendar view with:
+- Weekday headers
+- Days grid
+- Date click handling
+- Custom day styling
+- Disabled day support
+- No navigation controls
+
+## Usage
+
+This component is typically used internally or for custom calendar implementations that don't need navigation.
+
+### Basic Example
+
+```markup
+<AwCalendarView
+    :month="0"
+    :year="2024"
+    :first-day="1"
+    :day-class="getDayClass"
+    :day-disabled="isDayDisabled"
+    @click:date="handleDateClick"
+/>
+```
+
+## API
+
+### Props
+
+All props from `AwCalendarDays` are supported, plus:
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| firstDay | First day of week (0=Sunday, 1=Monday) | `Number` | `false` | From config |
+
+**Inherited from AwCalendarDays:**
+- `year`, `month`, `dayClass`, `dayDisabled`, `showToday`
+
+### Slots
+
+All slots from `AwCalendarDays` are supported:
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| day | Custom day cell rendering | `{ date, day, month, isOutside, isToday }` | Default day cell |
+| day-outside | Custom rendering for days outside month | `{ date, day, month }` | Default day cell |
+| day-inside | Custom rendering for days inside month | `{ date, day, month, isToday }` | Default day cell |
+
+### Events
+
+| Name | Payload | Description |
+|------|---------|-------------|
+| click:date | `Date` | Emitted when a date is clicked |
+
+### Config Options
+
+The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:
+
+```javascript
+export default {
+  AwCalendar: {
+    firstDay: 1  // Monday
+  }
+}
+```
+
+## Related Components
+
+- `AwCalendar` - Main calendar component with navigation
+- `AwCalendarDays` - Calendar days grid component
+- `AwCalendarWeekdays` - Weekday headers component
+
+## Notes
+
+- **Import Method:** Dynamic - Component is loaded on-demand as an organism
+- Component name is empty in source (internal use)
+- Uses `getDateFromEvent` utility to extract date from click event
+- Date clicks are detected via event delegation
+- All day slots are proxied to parent component
+- Component is simpler than `AwCalendar` (no navigation)
+- Uses same day rendering logic as `AwCalendarDays`
+- Date object is extracted from clicked element's `data-time` attribute

package/docs/components/organisms/aw-calendar.md

@@ -0,0 +1,166 @@
+---
+metaTitle: Calendar component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwCalendar /> component is used to render Calendar - UI Vue component for AwesCode UI.
+title: Calendar
+---
+
+# AwCalendar
+
+**Category:** Organism | **Import:** Dynamic
+
+The `AwCalendar` component is a date picker calendar that displays a month view with navigation, weekday headers, and date selection. It supports single date, multiple dates, and date range selection.
+
+## Overview
+
+`AwCalendar` provides a calendar solution with:
+- Month view with navigation
+- Single date, multiple dates, or date range selection
+- Min/max date constraints
+- Custom disabled date filtering
+- Day.js integration for date handling
+- Customizable weekday start (first day of week)
+- Today highlighting
+- Custom header and footer slots
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwCalendar v-model="selectedDate" />
+```
+
+### Date Range
+
+```markup
+<AwCalendar v-model="dateRange" range />
+```
+
+### Multiple Dates
+
+```markup
+<AwCalendar v-model="selectedDates" />
+<!-- v-model is array -->
+```
+
+### With Min/Max Dates
+
+```markup
+<AwCalendar 
+    v-model="selectedDate"
+    :min="minDate"
+    :max="maxDate"
+/>
+```
+
+### With Disabled Days
+
+```markup
+<AwCalendar 
+    v-model="selectedDate"
+    :disabled-days="(date) => date.day() === 0 || date.day() === 6"
+/>
+```
+
+### Custom Format
+
+```markup
+<AwCalendar 
+    v-model="selectedDate"
+    parse-format="YYYY-MM-DD"
+    output-format="toDate"
+/>
+```
+
+### Custom Header
+
+```markup
+<AwCalendar v-model="selectedDate">
+    <template #header="{ viewDate, shiftMonth }">
+        <div class="custom-header">
+            <AwButton @click="shiftMonth(-1)">Prev</AwButton>
+            <span>{{ viewDate.format('MMMM YYYY') }}</span>
+            <AwButton @click="shiftMonth(1)">Next</AwButton>
+        </div>
+    </template>
+</AwCalendar>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| value | Selected date(s) or range | `String` / `Number` / `Object` / `Date` / `Array` / `Object` | `false` | `null` |
+| parseFormat | Custom parse format for string dates (e.g., `'YYYY-MM-DD[T]HH:mm:sszz'`) | `String` | `false` | `''` |
+| outputFormat | Output format: `'toDayjs'`, `'toDate'`, `'toJSON'`, or format string | `String` | `false` | `'toDate'` |
+| min | Minimum available date | `String` / `Number` / `Object` / `Date` | `false` | `null` |
+| max | Maximum available date | `String` / `Number` / `Object` / `Date` | `false` | `null` |
+| disabledDays | Function to filter disabled dates | `Function` | `false` | `() => false` |
+| range | Enable date range selection | `Boolean` | `false` | `false` |
+| firstDay | First day of week (0 = Sunday) | `Number` | `false` | `1` |
+| showToday | Highlight today's date | `Boolean` | `false` | `true` |
+
+**Range Value Format:**
+```javascript
+{ start: Date, end: Date }
+```
+
+**Multiple Dates Format:**
+```javascript
+[Date, Date, ...]
+```
+
+### Slots
+
+| Name | Description | Props | Default Slot Content |
+|------|-------------|-------|---------------------|
+| header | Custom header (replaces navigation) | `{ viewDate, isDisabledPrev, isDisabledNext, shiftMonth }` | Default `AwCalendarNav` component |
+| footer | Footer content | - | - |
+| day | Custom day cell rendering | `{ date, dayjs, isSelected, isDisabled, isToday, isInRange, isStart, isEnd }` | Default day cell |
+| day-outside | Custom rendering for days outside current month | `{ date, dayjs }` | Default day cell |
+| day-inside | Custom rendering for days inside current month | `{ date, dayjs, isSelected, isDisabled, isToday, isInRange, isStart, isEnd }` | Default day cell |
+
+### Events
+
+| Name | Payload | Description |
+|------|---------|-------------|
+| input | `Date` / `Array` / `Object` | Emitted when date is selected (format depends on `outputFormat`) |
+
+### Config Options
+
+The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:
+
+```javascript
+export default {
+  AwCalendar: {
+    firstDay: 1,  // Monday
+    weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    months: ['January', 'February', ...]
+  }
+}
+```
+
+## Related Components
+
+- `AwDate` - Date input with calendar dropdown
+- `AwCalendarNav` - Calendar navigation component
+- `AwCalendarDays` - Calendar days grid component
+- `AwCalendarWeekdays` - Weekday headers component
+
+## Notes
+
+- **Import Method:** Dynamic - Component is loaded on-demand as an organism
+- Uses Day.js for date manipulation and formatting
+- When `range` is true, value should be `{ start, end }` object
+- When value is array, supports multiple date selection
+- `disabledDays` function receives Day.js object, return `true` to disable
+- `parseFormat` is used when parsing string dates
+- `outputFormat` determines what type is emitted in `input` event
+- Navigation buttons are automatically disabled at min/max dates
+- Component uses calendar mixin for shared date logic
+- Hover effect shows range preview when selecting range
+- Today is highlighted by default (can be disabled)

package/docs/components/organisms/aw-chart.md

@@ -0,0 +1,154 @@
+---
+metaTitle: Chart component | AwesCode UI
+meta:
+  - name: description
+    content: The <AwChart /> component is used to render Chart - UI Vue component for AwesCode UI.
+title: Chart
+---
+
+# AwChart
+
+**Category:** Organism | **Import:** Dynamic
+
+The `AwChart` component is a wrapper for ApexCharts.js that provides interactive charts and graphs. It dynamically loads the ApexCharts library and renders charts based on configuration options.
+
+## Overview
+
+`AwChart` provides a charting solution with:
+- ApexCharts.js integration
+- Dynamic library loading
+- Reactive chart updates
+- Multiple chart types support
+- Customizable options
+
+## Usage
+
+### Basic Example
+
+```markup
+<AwChart :options="chartOptions" />
+```
+
+### Line Chart
+
+```markup
+<AwChart 
+    :options="{
+        series: [{
+            name: 'Sales',
+            data: [30, 40, 35, 50, 49, 60, 70]
+        }],
+        chart: {
+            type: 'line'
+        },
+        xaxis: {
+            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
+        }
+    }"
+/>
+```
+
+### Bar Chart
+
+```markup
+<AwChart 
+    :options="{
+        series: [{
+            name: 'Revenue',
+            data: [400, 430, 448, 470, 540, 580, 690]
+        }],
+        chart: {
+            type: 'bar'
+        },
+        xaxis: {
+            categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        }
+    }"
+/>
+```
+
+### Pie Chart
+
+```markup
+<AwChart 
+    :options="{
+        series: [44, 55, 13, 43, 22],
+        chart: {
+            type: 'pie'
+        },
+        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E']
+    }"
+/>
+```
+
+### With Custom Library Version
+
+```markup
+<AwChart 
+    :options="chartOptions"
+    lib-version="3.35.0"
+/>
+```
+
+## API
+
+### Props
+
+| Name | Description | Type | Required | Default |
+|------|-------------|------|----------|---------|
+| options | ApexCharts configuration object | `Object` | `true` | - |
+| libVersion | ApexCharts library version | `String` | `false` | `'latest'` |
+
+**Options Object:**
+See [ApexCharts Documentation](https://apexcharts.com/docs/) for complete options reference.
+
+**Required Options:**
+```javascript
+{
+  series: [{        // Required: data series
+    name: 'Series 1',
+    data: [1, 2, 3, 4, 5]
+  }],
+  chart: {
+    type: 'line'    // Chart type: line, bar, pie, etc.
+  }
+}
+```
+
+### Slots
+
+This component does not have slots.
+
+### Events
+
+This component does not emit custom events.
+
+### Config Options
+
+The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:
+
+```javascript
+export default {
+  AwChart: {
+    libVersion: 'latest'  // ApexCharts library version
+  }
+}
+```
+
+## Related Components
+
+- Dashboard components (AwDashboardLine, AwDashboardDonut, etc.) - Pre-configured chart components
+
+## Notes
+
+- **Import Method:** Dynamic - Component is loaded on-demand as an organism
+- Uses ApexCharts.js library (not Chart.js)
+- Library is loaded dynamically from CDN (jsdelivr)
+- Chart automatically updates when `options` prop changes
+- Chart is destroyed on component destroy
+- Chart is destroyed on route navigation
+- `series` property is required in options
+- See [ApexCharts documentation](https://apexcharts.com/docs/) for all chart types and options
+- Library version can be specified (defaults to 'latest')
+- Uses `loadjs` for dynamic script loading
+- Chart instance is stored internally and can be accessed via ref (not recommended)