@mixd-id/web-scaffold 0.2.250801010 → 0.2.250801012

package/docs/components/Checkbox.md

@@ -0,0 +1,63 @@
+# Checkbox
+A checkbox input component with customizable true/false values and support for array models.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | Any | `undefined` | The bound value. Supports `v-model` |
+| value | Any | `undefined` | The value to use when checkbox is part of an array |
+| default | Any | `undefined` | Default checked state |
+| trueValue | Any | `undefined` | Value to emit when checked |
+| falseValue | Any | `undefined` | Value to emit when unchecked |
+| disabled | Any | `undefined` | Disables the checkbox |
+| showIcon | Any | `true` | Show checkmark icon |
+| itemClass | String | `undefined` | Custom class for the label |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | Any | Emitted on change, enables `v-model` |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| default | Label content next to the checkbox |
+
+## Samples
+
+### Basic boolean
+```vue
+<Checkbox v-model="checked" />
+```
+
+### With label
+```vue
+<Checkbox v-model="agreed">
+  I agree to the terms and conditions
+</Checkbox>
+```
+
+### Custom true/false values
+```vue
+<Checkbox v-model="status" true-value="active" false-value="inactive" />
+```
+
+### Array of values
+```vue
+<Checkbox v-model="selectedColors" value="red">Red</Checkbox>
+<Checkbox v-model="selectedColors" value="blue">Blue</Checkbox>
+<Checkbox v-model="selectedColors" value="green">Green</Checkbox>
+```
+
+### Disabled
+```vue
+<Checkbox v-model="locked" disabled>This option is locked</Checkbox>
+```
+
+### Without icon
+```vue
+<Checkbox v-model="selected" :show-icon="false">
+  Custom styled checkbox
+</Checkbox>
+```
+

package/docs/components/CodeEditor.md

@@ -0,0 +1,25 @@
+# CodeEditor
+A simple code editor component with contenteditable support.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | String | `undefined` | The code content. Supports `v-model` |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | String | Emitted on paste, enables `v-model` |
+
+## Samples
+
+### Basic
+```vue
+<CodeEditor v-model="code" />
+```
+
+### Display code
+```vue
+<CodeEditor v-model="jsonData" />
+```
+

package/docs/components/CollapsiblePanel.md

@@ -0,0 +1,41 @@
+# CollapsiblePanel
+An expandable/collapsible panel component for organizing content.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| text | String | `undefined` | Panel header text |
+| items | Array | `undefined` | Array of component definitions to render when expanded |
+
+## Samples
+
+### Basic
+```vue
+<CollapsiblePanel text="Advanced Options">
+  <template #default>
+    <div>Collapsible content here</div>
+  </template>
+</CollapsiblePanel>
+```
+
+### With dynamic items
+```vue
+<CollapsiblePanel 
+  text="More Settings" 
+  :items="[
+    { type: 'Checkbox', modelValue: true },
+    { type: 'Textbox', placeholder: 'Enter value' }
+  ]"
+/>
+```
+
+### Multiple panels
+```vue
+<CollapsiblePanel text="Section 1">
+  <p>Content 1</p>
+</CollapsiblePanel>
+<CollapsiblePanel text="Section 2">
+  <p>Content 2</p>
+</CollapsiblePanel>
+```
+

package/docs/components/ColorPicker.md

@@ -0,0 +1,52 @@
+# ColorPicker
+A color picker component with preset colors and custom color support.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | String | `undefined` | Selected color value. Supports `v-model` |
+| mode | String | `'class'` | Mode: `'class'` (Tailwind classes) or `'hex'` (hex values) |
+| colors | Array | Tailwind palette | Array of available colors |
+| customColor | Any | `undefined` | Enable custom color picker |
+| prefix | String | `undefined` | Prefix for class mode values |
+| valueType | String | `undefined` | Output type: `'rgb'` for RGB format |
+| itemClass | String | `undefined` | Custom class for color circle |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | String | Emitted on selection, enables `v-model` |
+| change | - | Emitted when color changes |
+
+## Samples
+
+### Basic class mode
+```vue
+<ColorPicker v-model="bgColor" mode="class" prefix="bg-" />
+```
+
+### Hex mode
+```vue
+<ColorPicker v-model="color" mode="hex" />
+```
+
+### With custom color
+```vue
+<ColorPicker v-model="color" mode="hex" custom-color />
+```
+
+### RGB output
+```vue
+<ColorPicker v-model="rgbColor" mode="hex" value-type="rgb" />
+<!-- Output: rgb(255,0,0) -->
+```
+
+### Custom color palette
+```vue
+<ColorPicker 
+  v-model="brandColor"
+  mode="hex"
+  :colors="['#FF0000', '#00FF00', '#0000FF', '#FFFF00']"
+/>
+```
+

package/docs/components/Confirm.md

@@ -0,0 +1,62 @@
+# Confirm
+A confirmation dialog component for user confirmations. Teleports to the overlay container.
+
+## Props
+None (controlled via methods)
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| appear | - | Emitted when dialog has finished appearing |
+
+## Methods
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| open | `{ title?, message, buttonText?, onConfirm?, onDismiss? }` | Opens the confirm dialog |
+| close | - | Closes the confirm dialog |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| icon | Custom icon for the dialog |
+| end | Content after the buttons |
+
+## Samples
+
+### Basic confirmation
+```vue
+<template>
+  <Confirm ref="confirm" />
+  <Button @click="confirmDelete">Delete Item</Button>
+</template>
+
+<script setup>
+const confirm = ref(null)
+
+function confirmDelete() {
+  confirm.value.open({
+    title: 'Delete Item',
+    message: 'Are you sure you want to delete this item?',
+    onConfirm: () => {
+      deleteItem()
+    }
+  })
+}
+</script>
+```
+
+### Custom button text
+```vue
+<script setup>
+function showConfirm() {
+  confirm.value.open({
+    title: 'Unsaved Changes',
+    message: 'You have unsaved changes. Discard them?',
+    buttonText: ['Discard', 'Keep Editing'],
+    onConfirm: () => router.back(),
+    onDismiss: () => console.log('Cancelled')
+  })
+}
+</script>
+```
+

package/docs/components/ContextMenu.md

@@ -0,0 +1,76 @@
+# ContextMenu
+A dropdown context menu component with positioning and teleportation support.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| state | Boolean | `false` | Controlled open state |
+| caller | Object | `undefined` | Reference element for positioning |
+| class | String | `undefined` | Custom CSS class |
+| position | String | `'auto'` | Position: `'bottom-left'`, `'bottom-right'`, `'top-left'`, `'top-right'`, `'bottom-center'`, `'top-center'` |
+| bodyClass | String | `undefined` | Class for menu body |
+| dismiss | String/Boolean | `true` | Auto-dismiss on click |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| dismiss | - | Emitted when menu is dismissed |
+| open | - | Emitted when menu opens |
+
+## Methods
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| open | `callerEl, context?` | Opens the context menu |
+| close | - | Closes the context menu |
+
+## Slots
+| Slot | Props | Description |
+|------|-------|-------------|
+| default | `{ context }` | Menu content |
+
+## Samples
+
+### Basic
+```vue
+<button ref="btn" @click="$refs.menu.open($refs.btn)">Open Menu</button>
+
+<ContextMenu ref="menu">
+  <div class="p-2">
+    <button @click="action1">Action 1</button>
+    <button @click="action2">Action 2</button>
+  </div>
+</ContextMenu>
+```
+
+### With positioning
+```vue
+<ContextMenu ref="menu" position="bottom-right">
+  <ul class="menu-list">
+    <li>Option 1</li>
+    <li>Option 2</li>
+  </ul>
+</ContextMenu>
+```
+
+### Controlled state
+```vue
+<ContextMenu :state="isOpen" :caller="menuCaller" @dismiss="isOpen = false">
+  <div>Menu content</div>
+</ContextMenu>
+```
+
+### With context data
+```vue
+<script setup>
+function openForItem(item, el) {
+  menu.value.open(el, { item })
+}
+</script>
+
+<ContextMenu ref="menu">
+  <template #default="{ context }">
+    <div>Editing: {{ context.item?.name }}</div>
+  </template>
+</ContextMenu>
+```
+

package/docs/components/ContextMenuItem.md

@@ -0,0 +1,29 @@
+# ContextMenuItem
+A styled menu item component for use within context menus or notification lists.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| value | Object | `undefined` | Item data with `title`, `createdAt`, and `status` properties |
+
+## Samples
+
+### Basic
+```vue
+<ContextMenuItem :value="{
+  title: 'New notification',
+  createdAt: '2026-02-07T10:00:00',
+  status: 1
+}" />
+```
+
+### Read status
+```vue
+<ContextMenuItem :value="{
+  title: 'Old notification',
+  createdAt: '2026-02-06T15:30:00',
+  status: 2
+}" />
+<!-- status: 2 shows as read -->
+```
+

package/docs/components/CopyToClipboard.md

@@ -0,0 +1,43 @@
+# CopyToClipboard
+A button component that copies a value to the clipboard when clicked.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| value | Any | **required** | The value to copy to clipboard |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| copied | - | Emitted when copy succeeds |
+| error | - | Emitted when copy fails |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| default | Button content |
+
+## Samples
+
+### Basic
+```vue
+<CopyToClipboard :value="textToCopy" @copied="showSuccess">
+  Copy Text
+</CopyToClipboard>
+```
+
+### With icon
+```vue
+<CopyToClipboard :value="code" @copied="toast.open({ text: 'Copied!' })">
+  <svg><!-- copy icon --></svg>
+  Copy Code
+</CopyToClipboard>
+```
+
+### Copy URL
+```vue
+<CopyToClipboard :value="shareUrl">
+  Share Link
+</CopyToClipboard>
+```
+

package/docs/components/Countdown.md

@@ -0,0 +1,47 @@
+# Countdown
+A countdown timer component displaying days, hours, minutes, and seconds.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| value | String/Number | **required** | Countdown value in seconds |
+| mode | String/Number | `3` | Display mode: `1` (seconds), `2` (min:sec), `3` (hr:min:sec), `4` (day:hr:min:sec) |
+| labelStyle | Object | `undefined` | Style object for separator labels |
+
+## Slots
+| Slot | Props | Description |
+|------|-------|-------------|
+| day | `{ day }` | Custom day display |
+| hour | `{ hour }` | Custom hour display |
+| minute | `{ minute }` | Custom minute display |
+| second | `{ second }` | Custom second display |
+
+## Samples
+
+### Basic
+```vue
+<Countdown :value="3600" />
+<!-- Displays: 01:00:00 -->
+```
+
+### Full display with days
+```vue
+<Countdown :value="172800" :mode="4" />
+<!-- Displays: 02 hari 00:00:00 -->
+```
+
+### Minutes and seconds only
+```vue
+<Countdown :value="300" :mode="2" />
+<!-- Displays: 05:00 -->
+```
+
+### Custom styling
+```vue
+<Countdown :value="countdown" :label-style="{ color: 'red' }">
+  <template #hour="{ hour }">
+    <span class="text-2xl">{{ hour }}</span>
+  </template>
+</Countdown>
+```
+

package/docs/components/Datepicker.md

@@ -0,0 +1,61 @@
+# Datepicker
+A date picker component with multiple modes including dropdowns, popup calendar, and inline calendar.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | String | `''` | Date value in `YYYY-MM-DD` format. Supports `v-model` |
+| readonly | Boolean/String | `undefined` | Disables interaction |
+| disabled | Boolean/String | `undefined` | Disables the picker |
+| mode | String | `''` | Display mode: `''` (dropdowns), `'popup'` (popup calendar), `'calendar'` (inline calendar) |
+| allowedDates | Array | `undefined` | Array of allowed date strings |
+| onlyTodayAndFuture | Boolean | `false` | Only allow today and future dates |
+| pastOnly | Boolean | `false` | Only allow past dates |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | String | Emitted on change, enables `v-model` |
+| change | String | Emitted when date changes |
+
+## Samples
+
+### Basic dropdown mode
+```vue
+<Datepicker v-model="date" />
+```
+
+### Popup calendar mode
+```vue
+<Datepicker v-model="date" mode="popup" />
+```
+
+### Inline calendar
+```vue
+<Datepicker v-model="date" mode="calendar" />
+```
+
+### Future dates only
+```vue
+<Datepicker v-model="date" mode="popup" only-today-and-future />
+```
+
+### Past dates only
+```vue
+<Datepicker v-model="date" mode="popup" past-only />
+```
+
+### With allowed dates
+```vue
+<Datepicker 
+  v-model="date" 
+  mode="popup"
+  :allowed-dates="['2026-02-07', '2026-02-14', '2026-02-21']"
+/>
+```
+
+### Readonly
+```vue
+<Datepicker v-model="date" mode="popup" readonly />
+```
+

package/docs/components/Datetimepicker.md

@@ -0,0 +1,57 @@
+# Datetimepicker
+Date and time picker with a popup calendar and time dropdowns. Accepts `v-model` in `YYYY-MM-DD HH:mm:ss` format.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | String | `''` | Datetime value in `YYYY-MM-DD HH:mm:ss` format. Supports `v-model` |
+| readonly | Boolean/String | `undefined` | Disables interaction |
+| disabled | Boolean/String | `undefined` | Disables interaction |
+| minuteStep | Number/String | `1` | Minute interval (1-30). E.g. `15` shows `00, 15, 30, 45` |
+| secondStep | Number/String | `1` | Second interval (1-30) |
+| allowedDates | Array | `undefined` | Array of allowed date strings (`YYYY-MM-DD`) |
+| onlyTodayAndFuture | Boolean | `false` | Only allow today and future dates |
+| pastOnly | Boolean | `false` | Only allow past dates |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | String | Emitted on change, enables `v-model` |
+| change | String | Emitted on change with the new datetime value |
+
+## Samples
+
+### Basic
+```vue
+<Datetimepicker v-model="datetime" />
+```
+
+### With minute step
+```vue
+<Datetimepicker v-model="datetime" :minute-step="15" />
+```
+
+### Only future dates
+```vue
+<Datetimepicker v-model="datetime" only-today-and-future />
+```
+
+### Past dates only
+```vue
+<Datetimepicker v-model="datetime" past-only />
+```
+
+### With allowed dates
+```vue
+<Datetimepicker v-model="datetime" :allowed-dates="['2026-02-07', '2026-02-08', '2026-02-09']" />
+```
+
+### Disabled
+```vue
+<Datetimepicker v-model="datetime" disabled />
+```
+
+### Readonly
+```vue
+<Datetimepicker v-model="datetime" readonly />
+```

package/docs/components/DayTimeRange.md

@@ -0,0 +1,20 @@
+# DayTimeRange
+A day and time range picker component for scheduling.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | Object | `undefined` | Object with day and time range values |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | Object | Emitted on change, enables `v-model` |
+
+## Samples
+
+### Basic
+```vue
+<DayTimeRange v-model="schedule" />
+```
+

package/docs/components/Dropdown.md

@@ -0,0 +1,65 @@
+# Dropdown
+A dropdown select component with native select and custom context menu modes.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| modelValue | Any | `undefined` | The selected value. Supports `v-model` |
+| value | Any | `undefined` | Alternative value prop |
+| mode | String/Number | `1` | Dropdown mode: `1` (native select), `2` or `'custom'` (context menu) |
+| disabled | Any | `undefined` | Disables the dropdown |
+| readonly | Any | `undefined` | Makes the dropdown read-only |
+| variant | String | `undefined` | Visual variant |
+| size | String | `undefined` | Size variant |
+| position | String | `undefined` | Position of context menu |
+| width | String | `undefined` | Width of the dropdown |
+| state | Number/String | `1` | State: `1` (normal), `-1` (disabled), `-2` (error) |
+| errors | String/Array | `''` | Validation errors |
+| containerClass | String | `undefined` | Custom class for the container |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | Any | Emitted on change, enables `v-model` |
+| change | Any | Emitted on selection change |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| default | Option elements for the dropdown |
+
+## Samples
+
+### Basic native select
+```vue
+<Dropdown v-model="selected">
+  <option value="">Select an option</option>
+  <option value="1">Option 1</option>
+  <option value="2">Option 2</option>
+  <option value="3">Option 3</option>
+</Dropdown>
+```
+
+### Custom dropdown mode
+```vue
+<Dropdown v-model="selected" mode="custom">
+  <div data-value="option1|Option 1">Option 1</div>
+  <div data-value="option2|Option 2">Option 2</div>
+</Dropdown>
+```
+
+### Disabled
+```vue
+<Dropdown v-model="selected" disabled>
+  <option value="1">Option 1</option>
+</Dropdown>
+```
+
+### With error state
+```vue
+<Dropdown v-model="selected" :state="-2" :errors="['Please select an option']">
+  <option value="">Select...</option>
+  <option value="1">Option 1</option>
+</Dropdown>
+```
+

package/docs/components/ErrorText.md

@@ -0,0 +1,15 @@
+# ErrorText
+A text component for displaying error messages.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| text | String | `undefined` | Error message text |
+
+## Samples
+
+### Basic
+```vue
+<ErrorText text="This field is required" />
+```
+

package/docs/components/FBLogin.md

@@ -0,0 +1,21 @@
+# FBLogin
+A Facebook login button component.
+
+## Props
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| appId | String | `undefined` | Facebook App ID |
+
+## Events
+| Event | Payload | Description |
+|-------|---------|-------------|
+| success | Object | Emitted on successful login |
+| error | Error | Emitted on login failure |
+
+## Samples
+
+### Basic
+```vue
+<FBLogin app-id="YOUR_APP_ID" @success="handleLogin" />
+```
+