@mixd-id/web-scaffold 0.2.250801010 → 0.2.250801012

package/docs/components/Flex.md

@@ -0,0 +1,44 @@
+# Flex
+A flexible container component using CSS flexbox for layout.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| items | Array | `undefined` | Array of component definitions to render |
+| flexColumns | Array | `undefined` | Configuration for flex columns |
+| columnType | Array | `undefined` | Type configuration for columns |
+| data | Object | `undefined` | Data object provided to child components |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| default | Custom content, overrides `items` prop |
+
+## Samples
+
+### Basic with slot
+```vue
+<Flex class="gap-4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Flex>
+```
+
+### With dynamic items
+```vue
+<Flex :items="[
+  { type: 'Text', text: 'Hello' },
+  { type: 'Button', text: 'Click' }
+]" />
+```
+
+### Column layout
+```vue
+<Flex :style="{ flexDirection: 'column' }">
+  <header>Header</header>
+  <main>Content</main>
+  <footer>Footer</footer>
+</Flex>
+```
+

package/docs/components/GHeatMaps.md

@@ -0,0 +1,16 @@
+# GHeatMaps
+A Google Maps heatmap visualization component.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| data | Array | `undefined` | Heatmap data points |
+| config | Object | `undefined` | Map configuration |
+
+## Samples
+
+### Basic
+```vue
+<GHeatMaps :data="heatmapData" :config="mapConfig" />
+```
+

package/docs/components/GSignIn.md

@@ -0,0 +1,21 @@
+# GSignIn
+A Google Sign-In button component.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| clientId | String | `undefined` | Google Client ID |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| success | Object | Emitted on successful sign-in |
+| error | Error | Emitted on sign-in failure |
+
+## Samples
+
+### Basic
+```vue
+<GSignIn client-id="YOUR_CLIENT_ID" @success="handleLogin" />
+```
+

package/docs/components/Gmaps.md

@@ -0,0 +1,16 @@
+# Gmaps
+A Google Maps component for displaying maps with markers and custom data.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| data | Object | `undefined` | Map data including markers |
+| config | Object | `undefined` | Map configuration options |
+
+## Samples
+
+### Basic
+```vue
+<Gmaps :data="mapData" :config="{ zoom: 12, center: { lat: -6.2, lng: 106.8 } }" />
+```
+

package/docs/components/GmapsDirection.md

@@ -0,0 +1,20 @@
+# GmapsDirection
+A Google Maps direction/routing component.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| origin | Object | `undefined` | Starting point coordinates |
+| destination | Object | `undefined` | Ending point coordinates |
+| waypoints | Array | `undefined` | Intermediate waypoints |
+
+## Samples
+
+### Basic
+```vue
+<GmapsDirection 
+  :origin="{ lat: -6.2, lng: 106.8 }"
+  :destination="{ lat: -6.3, lng: 106.9 }"
+/>
+```
+

package/docs/components/Grid.md

@@ -0,0 +1,36 @@
+# Grid
+A CSS grid container component for grid-based layouts.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| items | Array | `undefined` | Array of component definitions to render in the grid |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| default | Custom grid content, overrides `items` prop |
+
+## Samples
+
+### Basic with slot
+```vue
+<Grid :style="{ gridTemplateColumns: 'repeat(3, 1fr)', gap: '1rem' }">
+  <div>Cell 1</div>
+  <div>Cell 2</div>
+  <div>Cell 3</div>
+</Grid>
+```
+
+### With dynamic items
+```vue
+<Grid :items="cards" :style="{ gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))' }" />
+```
+
+### Responsive grid
+```vue
+<Grid class="grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+  <Card v-for="item in items" :key="item.id">{{ item.name }}</Card>
+</Grid>
+```
+

package/docs/components/HTMLEditor.md

@@ -0,0 +1,26 @@
+# HTMLEditor
+A WYSIWYG HTML editor component.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | String | `undefined` | HTML content. Supports `v-model` |
+| placeholder | String | `undefined` | Placeholder text |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | String | Emitted on content change |
+
+## Samples
+
+### Basic
+```vue
+<HTMLEditor v-model="content" />
+```
+
+### With placeholder
+```vue
+<HTMLEditor v-model="articleContent" placeholder="Write your article..." />
+```
+

package/docs/components/IconMenu.md

@@ -0,0 +1,20 @@
+# IconMenu
+An icon-based menu component.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| items | Array | `undefined` | Menu items array |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| click | Object | Emitted when menu item is clicked |
+
+## Samples
+
+### Basic
+```vue
+<IconMenu :items="menuItems" @click="handleMenuClick" />
+```
+

package/docs/components/Image.md

@@ -0,0 +1,78 @@
+# Image
+An image component with lazy loading, multiple states (loading, error), and edit capabilities.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| src | Any | `undefined` | Image source URL, File object, or responsive array |
+| alt | String | `undefined` | Alternative text for the image |
+| eager | Boolean/String | `false` | Load image immediately instead of lazy loading |
+| editable | Boolean/String | `false` | Enable image upload/edit functionality |
+| ratio | Array | `[]` | Aspect ratio [width, height] |
+| target | String | `undefined` | Navigation target when clicked |
+| defaultSrc | String | SVG placeholder | Fallback image when src is empty |
+| spinnerType | String | `'shimmer'` | Loading indicator type: `'shimmer'` or `'spinner'` |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| click | Event | Emitted when image is clicked |
+| change | `(base64, file)` | Emitted when image is changed (editable mode) |
+
+## Methods
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| edit | - | Opens file picker for image selection |
+| reset | - | Resets the image to empty state |
+
+## Slots
+| Slot | Props | Description |
+|------|-------|-------------|
+| empty | `{ instance }` | Content when no image is set |
+| loading | - | Custom loading indicator |
+| error | `{ instance }` | Content when image fails to load |
+
+## Samples
+
+### Basic
+```vue
+<Image src="/path/to/image.jpg" alt="Description" />
+```
+
+### Eager loading
+```vue
+<Image src="/hero.jpg" eager />
+```
+
+### Editable
+```vue
+<Image :src="avatar" editable @change="onImageChange" />
+```
+
+### With aspect ratio
+```vue
+<Image src="/banner.jpg" :ratio="[16, 9]" />
+```
+
+### Responsive sources
+```vue
+<Image :src="[
+  { screen: 'sm', src: '/small.jpg' },
+  { screen: 'lg', src: '/large.jpg' }
+]" />
+```
+
+### Custom empty state
+```vue
+<Image :src="userAvatar">
+  <template #empty>
+    <div class="placeholder">No Image</div>
+  </template>
+</Image>
+```
+
+### Custom loading
+```vue
+<Image src="/large-image.jpg" spinner-type="spinner" />
+```
+

package/docs/components/Link.md

@@ -0,0 +1,33 @@
+# Link
+A versatile link component supporting router navigation, external links, and file downloads.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| text | String | `undefined` | Link text content |
+| items | Array | `undefined` | Array of child components to render inside the link |
+| mode | String | `undefined` | Link mode: `'route'`, `'link'`, or `'download'` |
+| route | Object | `undefined` | Router link configuration `{ path, hash }` |
+| link | Object | `undefined` | External link configuration `{ href, target }` |
+| download | Object | `undefined` | Download configuration `{ url, name, originalName }` |
+
+## Samples
+
+### External link
+```vue
+<Link mode="link" :link="{ href: 'https://example.com', target: '_blank' }" text="Visit Site" />
+```
+
+### Download link
+```vue
+<Link mode="download" :download="{ url: '/files/report.pdf', name: 'report.pdf' }" text="Download Report" />
+```
+
+### With child components
+```vue
+<Link mode="route" :route="{ path: '/profile' }" :items="[
+  { type: 'Image', src: '/avatar.jpg' },
+  { type: 'Text', text: 'View Profile' }
+]" />
+```
+

package/docs/components/MultiDropdown.md

@@ -0,0 +1,46 @@
+# MultiDropdown
+A multi-select dropdown component with search and checkbox selection.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | Array | `undefined` | Array of selected items. Supports `v-model` |
+| items | Array | `undefined` | Array of selectable items |
+| textKey | String | `'text'` | Property key for display text |
+| valueKey | String | `'value'` | Property key for item value |
+| containerClass | String | `undefined` | Custom class for container |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | Array | Emitted on selection change |
+
+## Methods
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| open | - | Opens the dropdown |
+
+## Samples
+
+### Basic
+```vue
+<MultiDropdown 
+  v-model="selectedItems"
+  :items="[
+    { text: 'Option 1', value: 1 },
+    { text: 'Option 2', value: 2 },
+    { text: 'Option 3', value: 3 }
+  ]"
+/>
+```
+
+### Custom keys
+```vue
+<MultiDropdown 
+  v-model="selectedTags"
+  :items="tags"
+  text-key="name"
+  value-key="id"
+/>
+```
+

package/docs/components/Radio.md

@@ -0,0 +1,55 @@
+# Radio
+A radio button component with support for custom styling and grouped selection.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| name | String | `undefined` | Radio group name |
+| modelValue | Any | `undefined` | The selected value in the group. Supports `v-model` |
+| value | Any | `undefined` | The value of this radio option |
+| checked | Any | `undefined` | Override checked state |
+| disabled | Any | `undefined` | Disables the radio button |
+| custom | Any | `undefined` | Use custom styling without default indicator |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | Any | Emitted when selection changes, enables `v-model` |
+| change | - | Emitted when selection changes |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| default | Label content next to the radio |
+| item | Custom entire radio item content |
+
+## Samples
+
+### Basic radio group
+```vue
+<Radio v-model="selected" value="option1">Option 1</Radio>
+<Radio v-model="selected" value="option2">Option 2</Radio>
+<Radio v-model="selected" value="option3">Option 3</Radio>
+```
+
+### With name attribute
+```vue
+<Radio v-model="gender" name="gender" value="male">Male</Radio>
+<Radio v-model="gender" name="gender" value="female">Female</Radio>
+```
+
+### Disabled option
+```vue
+<Radio v-model="plan" value="free">Free</Radio>
+<Radio v-model="plan" value="pro" disabled>Pro (Coming Soon)</Radio>
+```
+
+### Custom radio styling
+```vue
+<Radio v-model="theme" value="light" custom>
+  <template #item>
+    <div class="custom-radio-card">Light Theme</div>
+  </template>
+</Radio>
+```
+

package/docs/components/Slider.md

@@ -0,0 +1,47 @@
+# Slider
+A range slider component supporting single and double (range) modes.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | String/Number | `''` | The value. For double mode, use format `'min-max'`. Supports `v-model` |
+| items | Array | `undefined` | Custom array of values for the slider |
+| min | String/Number | `'0'` | Minimum value |
+| max | String/Number | `'100'` | Maximum value |
+| mode | String | `'single'` | Slider mode: `'single'` or `'double'` |
+| step | String/Number | `'10'` | Step increment between values |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | String/Number | Emitted on change, enables `v-model` |
+| change | String/Number | Emitted when value changes |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| inner | Custom content inside slider handles |
+
+## Samples
+
+### Basic single slider
+```vue
+<Slider v-model="value" :min="0" :max="100" />
+```
+
+### Range slider (double mode)
+```vue
+<Slider v-model="range" mode="double" :min="0" :max="1000" :step="50" />
+```
+
+### With custom items
+```vue
+<Slider v-model="selected" :items="[10, 25, 50, 100, 200, 500]" />
+```
+
+### Price range filter
+```vue
+<Slider v-model="priceRange" mode="double" :min="0" :max="10000" :step="100" />
+<!-- priceRange = "500-2500" -->
+```
+

package/docs/components/Switch.md

@@ -0,0 +1,43 @@
+# Switch
+A toggle switch component for boolean values.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | Any | `undefined` | The bound value. Supports `v-model` |
+| trueValue | Any | `undefined` | Value when switch is on (default: `1`) |
+| falseValue | Any | `undefined` | Value when switch is off (default: `0`) |
+| readonly | Any | `undefined` | Makes the switch read-only |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | Any | Emitted on change, enables `v-model` |
+| change | Any | Emitted when switch state changes |
+
+## Samples
+
+### Basic boolean
+```vue
+<Switch v-model="enabled" />
+```
+
+### With custom values
+```vue
+<Switch v-model="status" true-value="active" false-value="inactive" />
+```
+
+### Readonly
+```vue
+<Switch v-model="locked" readonly />
+```
+
+### With labels
+```vue
+<div class="flex items-center gap-2">
+  <label>Off</label>
+  <Switch v-model="darkMode" />
+  <label>On</label>
+</div>
+```
+

package/docs/components/Table.md

@@ -0,0 +1,31 @@
+# Table
+A simple table component for displaying tabular data with headers and content.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| headers | Array | `undefined` | Array of header objects with `text` and `key` properties |
+| contents | Array | `undefined` | Array of row objects with keys matching header keys |
+
+## Samples
+
+### Basic
+```vue
+<Table 
+  :headers="[
+    { text: 'Name', key: 'name' },
+    { text: 'Email', key: 'email' },
+    { text: 'Status', key: 'status' }
+  ]"
+  :contents="[
+    { name: 'John', email: 'john@example.com', status: 'Active' },
+    { name: 'Jane', email: 'jane@example.com', status: 'Pending' }
+  ]"
+/>
+```
+
+### Dynamic data
+```vue
+<Table :headers="tableHeaders" :contents="tableData" />
+```
+

package/docs/components/Tabs.md

@@ -0,0 +1,65 @@
+# Tabs
+A tab navigation component with multiple visual variants.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | Any | `undefined` | The selected tab value. Supports `v-model` |
+| items | Array | `undefined` | Array of tab items with `text` and `value` properties |
+| bodyClass | String | `undefined` | Custom class for tab body |
+| itemClass | String | `undefined` | Custom class for each tab item |
+| variant | String | `'comp'` | Visual variant: `'comp'`, `'button'`, `'vertical'` |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | Any | Emitted on tab change, enables `v-model` |
+| change | Any | Emitted when selected tab changes |
+
+## Slots
+| Slot | Props | Description |
+|------|-------|-------------|
+| default | `{ item, index }` | Custom content for each tab button |
+
+## Samples
+
+### Basic
+```vue
+<Tabs 
+  v-model="activeTab"
+  :items="[
+    { text: 'Tab 1', value: 'tab1' },
+    { text: 'Tab 2', value: 'tab2' },
+    { text: 'Tab 3', value: 'tab3' }
+  ]"
+/>
+```
+
+### Button variant
+```vue
+<Tabs v-model="view" variant="button" :items="viewOptions" />
+```
+
+### Vertical tabs
+```vue
+<Tabs v-model="section" variant="vertical" :items="sections" />
+```
+
+### With custom content
+```vue
+<Tabs v-model="tab" :items="tabs">
+  <template #default="{ item }">
+    <span>{{ item.icon }}</span>
+    {{ item.text }}
+  </template>
+</Tabs>
+```
+
+### Disabled tab
+```vue
+<Tabs :items="[
+  { text: 'Active', value: 'active' },
+  { text: 'Coming Soon', value: 'soon', disabled: true }
+]" />
+```
+

package/docs/components/Text.md

@@ -0,0 +1,30 @@
+# Text
+A text component that renders dynamic HTML content with responsive support.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| tag | String | `'div'` | HTML tag to render |
+| htmlText2 | Array | `[]` | Array of HTML content for different screen sizes |
+
+## Samples
+
+### Basic
+```vue
+<Text :htmlText2="['<p>Hello World</p>']" />
+```
+
+### With custom tag
+```vue
+<Text tag="span" :htmlText2="['Inline text']" />
+```
+
+### Responsive content
+```vue
+<Text :htmlText2="[
+  '<p>Mobile content</p>',
+  '<p>Tablet content</p>',
+  '<p>Desktop content</p>'
+]" />
+```
+