@mixd-id/web-scaffold 0.2.250801010 → 0.2.250801012

package/docs/components/AccountIcon.md

@@ -0,0 +1,16 @@
+# AccountIcon
+A button component for account-related actions.
+
+## Props
+None
+
+## Slots
+None
+
+## Samples
+
+### Basic
+```vue
+<AccountIcon />
+```
+

package/docs/components/Ahref.md

@@ -0,0 +1,35 @@
+# Ahref
+A link component that automatically handles internal (router-link) and external (anchor) links.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| href | String | `''` | The URL to navigate to. Uses router-link for internal, anchor for external |
+| target | String | `undefined` | Link target attribute (e.g., `'_blank'`) |
+| text | String | `undefined` | Text content of the link |
+| variant | String/Number | `'primary'` | Visual variant: `'primary'`, `'secondary'`, `'outline'` |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| default | Custom content inside the link, overrides `text` prop |
+
+## Samples
+
+### External link
+```vue
+<Ahref href="https://example.com" target="_blank" text="Visit Example" />
+```
+
+### With custom content
+```vue
+<Ahref href="/profile">
+  <span>👤 My Profile</span>
+</Ahref>
+```
+
+### Secondary variant
+```vue
+<Ahref href="/settings" text="Settings" variant="secondary" />
+```
+

package/docs/components/Alert.md

@@ -0,0 +1,72 @@
+# Alert
+A modal alert dialog component for displaying messages to users. Teleports to the overlay container.
+
+## Props
+None (controlled via methods)
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| appear | - | Emitted when the alert has finished appearing |
+
+## Methods
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| open | `{ title?, message, buttonText?, onConfirm? }` | Opens the alert dialog |
+| close | - | Closes the alert dialog |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| icon | Custom icon to display in the alert |
+
+## Samples
+
+### Basic usage via ref
+```vue
+<template>
+  <Alert ref="alert" />
+  <Button @click="showAlert">Show Alert</Button>
+</template>
+
+<script setup>
+const alert = ref(null)
+
+function showAlert() {
+  alert.value.open({
+    title: 'Warning',
+    message: 'This action cannot be undone.'
+  })
+}
+</script>
+```
+
+### With custom button text and callback
+```vue
+<script setup>
+function showAlert() {
+  alert.value.open({
+    title: 'Success',
+    message: 'Your changes have been saved.',
+    buttonText: 'Got it!',
+    onConfirm: () => {
+      console.log('Alert confirmed')
+    }
+  })
+}
+</script>
+```
+
+### Error alert from API response
+```vue
+<script setup>
+async function fetchData() {
+  try {
+    await api.getData()
+  } catch (error) {
+    alert.value.open(error)
+  }
+}
+</script>
+```
+

package/docs/components/ArrayList.md

@@ -0,0 +1,39 @@
+# ArrayList
+A component for displaying and managing a list of items with add and remove capabilities.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| items | Array | `undefined` | Array of items to display. Each item should have a `name` property |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| add | - | Emitted when the add button is clicked |
+| remove | Object | Emitted when an item's remove button is clicked, with the item as payload |
+
+## Slots
+| Slot | Props | Description |
+|------|-------|-------------|
+| default | `{ item }` | Custom template for each item |
+
+## Samples
+
+### Basic
+```vue
+<ArrayList 
+  :items="[{ name: 'Item 1' }, { name: 'Item 2' }]"
+  @add="addItem"
+  @remove="removeItem"
+/>
+```
+
+### With custom item template
+```vue
+<ArrayList :items="tags" @add="addTag" @remove="removeTag">
+  <template #default="{ item }">
+    <span class="badge">{{ item.name }}</span>
+  </template>
+</ArrayList>
+```
+

package/docs/components/Article.md

@@ -0,0 +1,28 @@
+# Article
+A rich HTML article component with edit mode support for WYSIWYG editing.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| htmlText | String | `undefined` | HTML content to render in the article |
+
+## Methods
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| getSelection | - | Returns the current text selection with `text`, `href`, and `target` |
+| addLink | `{ href, target, text }` | Inserts a link at the current selection |
+| addTableColumn | - | Adds a column to the table at current selection |
+| addTableRow | - | Adds a row to the table at current selection |
+
+## Samples
+
+### Basic
+```vue
+<Article :htmlText="'<p>Hello <strong>World</strong></p>'" />
+```
+
+### With rich content
+```vue
+<Article :htmlText="articleContent" />
+```
+

package/docs/components/BarChart.md

@@ -0,0 +1,81 @@
+# BarChart
+A bar chart component powered by Chart.js, with support for stacked bars, percentage display, interactive legends, and click interactions.
+
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| uid | String | `undefined` | Unique identifier for the chart instance |
+| label | String | `undefined` | Title label displayed above the chart |
+| datasourceUid | String | `undefined` | UID of the datasource to query |
+| barHeight | Number | `200` | Height of the chart area in pixels |
+| stacked | Boolean \| Number | `undefined` | Enable stacked bar mode |
+| usePercentage | Boolean \| Number | `undefined` | Display y-axis values as percentages |
+| xAxes | Array | `undefined` | X-axis field configuration |
+| yAxes | Array | `undefined` | Y-axis field configuration |
+| xAxeMultiple | Boolean | `undefined` | Enable multiple x-axis grouping |
+| yAxeMultiple | Boolean | `undefined` | Enable multiple y-axis datasets with legend |
+| xAxesGroup | String | `undefined` | Grouping key for x-axis |
+| segments | Array | `undefined` | Segment configuration |
+| excluded | Array | `[]` | Dataset labels to exclude from rendering |
+| interactions | Array | `undefined` | Click interaction definitions |
+| yAxeOnClick | Array | `undefined` | Click handler configuration for y-axis |
+
+## Inject
+| Name | Description |
+|------|-------------|
+| getSrc | Returns the data source endpoint |
+| getViewedPreset | Returns the currently viewed preset |
+| getQueryFilters | Returns active query filters |
+| selectPreset | Function to navigate to a preset |
+| socket | WebSocket instance for data fetching |
+
+## Events
+| Event | Description |
+|-------|-------------|
+| `{uid}.load` | Triggers a reload of the chart data |
+| `dashboard.load` | Triggers a reload (shared across dashboard components) |
+
+## Samples
+
+### Basic
+```vue
+<BarChart uid="chart-1"
+          label="Revenue"
+          datasource-uid="ds-1"
+          :x-axes="['month']"
+          :y-axes="['total']" />
+```
+
+### Stacked with percentage
+```vue
+<BarChart uid="chart-2"
+          label="Distribution"
+          datasource-uid="ds-1"
+          :stacked="true"
+          :use-percentage="true"
+          :bar-height="300"
+          :x-axes="['category']"
+          :y-axes="['count']"
+          :y-axe-multiple="true" />
+```
+
+### With click interaction
+```vue
+<BarChart uid="chart-3"
+          label="Sales by Region"
+          datasource-uid="ds-2"
+          :x-axes="['region']"
+          :y-axes="['sales']"
+          :interactions="[{
+            event: 'click',
+            action: 'openDashboardPreset',
+            presetUid: 'detail-preset',
+            filters: [{
+              datasourceUid: 'ds-2',
+              key: 'region',
+              operator: 'eq',
+              value: '{segment}'
+            }]
+          }]" />
+```

package/docs/components/Block.md

@@ -0,0 +1,23 @@
+# Block
+A container component that renders a list of dynamic components.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| items | Array | `undefined` | Array of component definitions. Each item should have a `type` property |
+
+## Samples
+
+### Basic
+```vue
+<Block :items="[
+  { type: 'Text', text: 'Hello' },
+  { type: 'Button', text: 'Click me' }
+]" />
+```
+
+### With custom styling
+```vue
+<Block :items="components" :style="{ padding: '20px' }" />
+```
+

package/docs/components/Box.md

@@ -0,0 +1,15 @@
+# Box
+A simple container box component with centered content.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| title | String | `'Box'` | The title of the box |
+
+## Samples
+
+### Basic
+```vue
+<Box title="My Box" />
+```
+

package/docs/components/Button.md

@@ -0,0 +1,68 @@
+# Button
+A versatile button component with multiple variants and loading state support.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| variant | String/Number | `'primary'` | Visual variant: `'primary'`, `'secondary'`, `'outline'`, `'minimal'` |
+| state | String/Number | `1` | Button state: `1` (normal), `-1` (disabled), `2` (loading) |
+| text | String | `undefined` | Button text content |
+| target | String | `undefined` | Navigation target URL or section |
+| targetType | String | `undefined` | Type of target: `'section'` for scroll behavior |
+| disabledText | String | `undefined` | Tooltip text shown when disabled |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| click | Event | Emitted on button click when enabled |
+| disabled-click | - | Emitted when clicking a disabled button |
+
+## Methods
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| focus | - | Focuses the button |
+| setState | `state` | Programmatically sets the button state |
+| resetState | - | Resets state to the prop value |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| default | Custom button content, overrides `text` prop |
+
+## Samples
+
+### Basic
+```vue
+<Button text="Click me" @click="handleClick" />
+```
+
+### With variants
+```vue
+<Button text="Primary" variant="primary" />
+<Button text="Secondary" variant="secondary" />
+<Button text="Outline" variant="outline" />
+<Button text="Minimal" variant="minimal" />
+```
+
+### Loading state
+```vue
+<Button text="Submitting..." :state="2" />
+```
+
+### Disabled state
+```vue
+<Button text="Submit" :state="-1" disabled-text="Please fill all fields" />
+```
+
+### Scroll to section
+```vue
+<Button text="Go to Features" target="features" target-type="section" />
+```
+
+### With custom content
+```vue
+<Button @click="save">
+  <span>💾</span> Save Changes
+</Button>
+```
+

package/docs/components/Card.md

@@ -0,0 +1,67 @@
+# Card
+A card component that can be used as a static container or floating modal.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| class | String | `undefined` | Custom CSS class |
+| dismissable | Boolean | `false` | Whether the card can be dismissed |
+| float | Boolean | `false` | Enables floating/modal mode with teleport |
+| height | String/Number | `undefined` | Card height |
+| width | String/Number | `undefined` | Card width |
+| state | Boolean | `false` | Initial open state (for non-float mode) |
+| hash | String | `undefined` | URL hash to control card visibility |
+| query | String | `undefined` | URL query param to control card visibility |
+
+## Methods
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| open | `context?` | Opens the floating card |
+| close | - | Closes the floating card |
+
+## Slots
+| Slot | Props | Description |
+|------|-------|-------------|
+| header | - | Custom header content (float mode) |
+| default | `{ context }` | Main card content |
+
+## Samples
+
+### Static card
+```vue
+<Card class="p-4">
+  <h3>Card Title</h3>
+  <p>Card content goes here</p>
+</Card>
+```
+
+### Floating card (modal)
+```vue
+<Card ref="card" float width="400">
+  <template #default="{ context }">
+    <div class="p-4">
+      <h3>Modal Card</h3>
+      <p>{{ context.message }}</p>
+    </div>
+  </template>
+</Card>
+
+<Button @click="$refs.card.open({ message: 'Hello!' })">Open Card</Button>
+```
+
+### Hash-controlled card
+```vue
+<Card float hash="#details" width="500">
+  <div class="p-4">Details content</div>
+</Card>
+
+<router-link :to="{ hash: '#details' }">Show Details</router-link>
+```
+
+### Query-controlled card
+```vue
+<Card float query="edit" width="600">
+  <div class="p-4">Edit form</div>
+</Card>
+```
+

package/docs/components/Carousel.md

@@ -0,0 +1,70 @@
+# Carousel
+A carousel/slider component with touch support, auto-play, and navigation controls.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| items | Array | `undefined` | Array of items to display in the carousel |
+| infinite | Boolean | `false` | Enable infinite loop scrolling |
+| ratio | Array | `undefined` | Aspect ratio [width, height] |
+| autoPlay | Number/String | `undefined` | Auto-play interval in milliseconds |
+| useLegend | Boolean/Number | `undefined` | Show pagination dots |
+| useNextPrev | Boolean/Number | `undefined` | Show next/previous navigation buttons |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| change | Number | Emitted when slide index changes |
+
+## Methods
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| setIndex | `index` | Navigate to specific slide |
+| next | `useBack?` | Go to next slide |
+| prev | - | Go to previous slide |
+| play | - | Start auto-play |
+| stop | - | Stop auto-play |
+| setPosition | `noAnimation?` | Update carousel position |
+
+## Slots
+| Slot | Props | Description |
+|------|-------|-------------|
+| default | `{ item }` | Custom template for each carousel item |
+| next | - | Custom next button |
+| prev | - | Custom previous button |
+| legend | - | Custom pagination dots |
+
+## Samples
+
+### Basic
+```vue
+<Carousel :items="images" />
+```
+
+### With navigation
+```vue
+<Carousel :items="slides" use-next-prev use-legend />
+```
+
+### Auto-play
+```vue
+<Carousel :items="banners" :auto-play="5000" />
+```
+
+### Custom item template
+```vue
+<Carousel :items="products">
+  <template #default="{ item }">
+    <div class="product-slide">
+      <Image :src="item.image" />
+      <h3>{{ item.name }}</h3>
+    </div>
+  </template>
+</Carousel>
+```
+
+### Infinite loop
+```vue
+<Carousel :items="gallery" infinite use-next-prev />
+```
+

package/docs/components/Cart.md

@@ -0,0 +1,20 @@
+# Cart
+A shopping cart component with item management, quantity controls, and checkout functionality.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| apiUrl | String | `undefined` | API endpoint for cart operations |
+
+## Inject
+| Name | Description |
+|------|-------------|
+| alert | Alert component instance for error handling |
+
+## Samples
+
+### Basic
+```vue
+<Cart api-url="/api/cart" />
+```
+

package/docs/components/CartIcon.md

@@ -0,0 +1,29 @@
+# CartIcon
+A shopping cart icon button with badge and dropdown preview.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| items | Array | `undefined` | Array of custom icon components |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| icon | Custom icon content |
+
+## Samples
+
+### Basic
+```vue
+<CartIcon />
+```
+
+### With custom icon
+```vue
+<CartIcon>
+  <template #icon>
+    <svg><!-- custom cart icon --></svg>
+  </template>
+</CartIcon>
+```
+

package/docs/components/Chart.md

@@ -0,0 +1,53 @@
+# Chart
+A chart component supporting multiple chart types (bar, line, doughnut, pie, maps) with preset configuration.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| config | Object | `{}` | Chart configuration object |
+| presetKey | Any | `undefined` | Key for preset selection |
+| src | Any | `undefined` | Data source |
+| title | String | `undefined` | Chart title |
+| subscribeKey | String | `undefined` | WebSocket subscription key for real-time updates |
+| presetMode | String | `undefined` | Preset mode: `'sidebar'` or `'external'` |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| open-preset | - | Emitted when opening preset selector |
+
+## Inject
+| Name | Description |
+|------|-------------|
+| alert | Alert component instance |
+| socket | WebSocket instance for real-time data |
+
+## Samples
+
+### Basic bar chart
+```vue
+<Chart 
+  :config="{ type: 'bar' }"
+  title="Sales Overview"
+  src="/api/charts/sales"
+/>
+```
+
+### Line chart with preset
+```vue
+<Chart 
+  :config="chartConfig"
+  title="Revenue"
+  preset-key="revenue-monthly"
+/>
+```
+
+### Real-time chart
+```vue
+<Chart 
+  :config="config"
+  title="Live Data"
+  subscribe-key="metrics"
+/>
+```
+

package/docs/components/ChartBar.md

@@ -0,0 +1,34 @@
+# ChartBar
+A bar chart component using Chart.js with time-based data support.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| items | Array | `undefined` | Array of data items with `createdAt` timestamp |
+| options | Object | `undefined` | Chart.js configuration options |
+
+## Methods
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| setInitialData | - | Generates initial sample data |
+| play | - | Starts chart animation/updates |
+
+## Samples
+
+### Basic
+```vue
+<ChartBar :items="timeSeriesData" />
+```
+
+### With custom options
+```vue
+<ChartBar 
+  :items="data"
+  :options="{
+    scales: {
+      y: { beginAtZero: true }
+    }
+  }"
+/>
+```
+

package/docs/components/ChatTyping.md

@@ -0,0 +1,21 @@
+# ChatTyping
+An animated typing indicator for chat interfaces showing three bouncing dots.
+
+## Props
+None
+
+## Samples
+
+### Basic
+```vue
+<ChatTyping />
+```
+
+### In chat context
+```vue
+<div class="chat-message">
+  <ChatTyping v-if="isTyping" />
+  <span v-else>{{ message }}</span>
+</div>
+```
+