@appsbd/vue3-appsbd-ui 1.0.4 → 1.0.5

package/.ai/ai_ref_AbField.md

@@ -1,88 +1,88 @@
-# AbField — AI Reference
-
-Polymorphic field wrapper — renders text, textarea, select, multiselect, tag, checkbox, radio, toggle, or switch based on the `type` prop.
-
-## Usage
-
-```vue
-<template>
-  <ab-field type="text" v-model="form.name" name="name" label="Name" rules="required" />
-
-  <ab-field
-    type="select"
-    v-model="form.country"
-    name="country"
-    label="Country"
-    :options="countries"
-    label-key="title"
-    value-key="val"
-    searchable
-  />
-
-  <ab-field
-    type="toggle"
-    v-model="form.notifications"
-    name="notifications"
-    title="Enable notifications"
-    description="Receive email updates"
-  />
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `val` | `any` | `null` | Initial value (used when `modelValue` is empty). |
-| `label` | `String` | **required** | Field label. |
-| `name` | `String` | **required** | VeeValidate field name. |
-| `type` | `String` | `"text"` | `text`, `email`, `password`, `number`, `url`, `textarea`, `select`, `multiselect`, `tag`, `checkbox`, `radio`, `toggle`, `switch`. |
-| `prefix` | `String` | `""` | Prefix text/icon. |
-| `postfix` | `String` | `""` | Postfix text/icon. |
-| `modelValue` | `String \| Number \| Boolean \| Array \| Object` | `""` | Two-way-bound value. |
-| `isCodeInput` | `Boolean` | `false` | Applies monospace styling. |
-| `containerClass` | `String` | `""` | Wrapper class. |
-| `maxlength` | `String \| Number` | `""` | Native maxlength. |
-| `minlength` | `String \| Number` | `""` | Native minlength. |
-| `placeholder` | `String` | `""` | Input placeholder. |
-| `hints` | `String \| Array` | `""` | Helper text. |
-| `rules` | `String \| Array` | `""` | VeeValidate rules. |
-| `options` | `Array` | `[]` | Options for select / checkbox / radio. |
-| `labelKey` | `String` | `"title"` | Option label property. |
-| `valueKey` | `String` | `"val"` | Option value property. |
-| `max` | `Number` | `-1` | Max selections (multiselect/tag); `-1` = unlimited. |
-| `size` | `String` | `"md"` | Field size. |
-| `object` | `Boolean` | `false` | Return full objects instead of values (multiselect). |
-| `searchable` | `Boolean` | `false` | Enable search (select). |
-| `description` | `String` | `""` | Secondary description. |
-| `helptext` | `String` | `""` | Help text. |
-| `isInline` | `Boolean` | `false` | Inline layout (checkbox/radio). |
-| `trueValue` | `any` | `"Y"` | Toggle/switch on value. |
-| `falseValue` | `any` | `"N"` | Toggle/switch off value. |
-| `title` | `String \| null` | `null` | Toggle/switch title. |
-| `isLeftIconBorder` | `Boolean` | `false` | Border on left icon. |
-| `isRightIconBorder` | `Boolean` | `false` | Border on right icon. |
-| `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
-| `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot (`"left"`, `"right"`). |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `value` | v-model sync. |
-| `clear` | `event` | Multiselect field cleared. |
-| `change` | `value` | Multiselect value changed. |
-| `select` | `value` | Multiselect option selected. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `label` | Custom label. |
-| `prefix` | Custom prefix. |
-| `icon` | Custom icon. |
-| `postfix` | Custom postfix. |
-| `description` | Custom description. |
-| `helptext` | Custom help text. |
-| `option` | Custom option rendering (select). |
-| `singlelabel` | Custom single-value label (select). |
+# AbField — AI Reference
+
+Polymorphic field wrapper — renders text, textarea, select, multiselect, tag, checkbox, radio, toggle, or switch based on the `type` prop.
+
+## Usage
+
+```vue
+<template>
+  <ab-field type="text" v-model="form.name" name="name" label="Name" rules="required" />
+
+  <ab-field
+    type="select"
+    v-model="form.country"
+    name="country"
+    label="Country"
+    :options="countries"
+    label-key="title"
+    value-key="val"
+    searchable
+  />
+
+  <ab-field
+    type="toggle"
+    v-model="form.notifications"
+    name="notifications"
+    title="Enable notifications"
+    description="Receive email updates"
+  />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `val` | `any` | `null` | Initial value (used when `modelValue` is empty). |
+| `label` | `String` | **required** | Field label. |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `type` | `String` | `"text"` | `text`, `email`, `password`, `number`, `url`, `textarea`, `select`, `multiselect`, `tag`, `checkbox`, `radio`, `toggle`, `switch`. |
+| `prefix` | `String` | `""` | Prefix text/icon. |
+| `postfix` | `String` | `""` | Postfix text/icon. |
+| `modelValue` | `String \| Number \| Boolean \| Array \| Object` | `""` | Two-way-bound value. |
+| `isCodeInput` | `Boolean` | `false` | Applies monospace styling. |
+| `containerClass` | `String` | `""` | Wrapper class. |
+| `maxlength` | `String \| Number` | `""` | Native maxlength. |
+| `minlength` | `String \| Number` | `""` | Native minlength. |
+| `placeholder` | `String` | `""` | Input placeholder. |
+| `hints` | `String \| Array` | `""` | Helper text. |
+| `rules` | `String \| Array` | `""` | VeeValidate rules. |
+| `options` | `Array` | `[]` | Options for select / checkbox / radio. |
+| `labelKey` | `String` | `"title"` | Option label property. |
+| `valueKey` | `String` | `"val"` | Option value property. |
+| `max` | `Number` | `-1` | Max selections (multiselect/tag); `-1` = unlimited. |
+| `size` | `String` | `"md"` | Field size. |
+| `object` | `Boolean` | `false` | Return full objects instead of values (multiselect). |
+| `searchable` | `Boolean` | `false` | Enable search (select). |
+| `description` | `String` | `""` | Secondary description. |
+| `helptext` | `String` | `""` | Help text. |
+| `isInline` | `Boolean` | `false` | Inline layout (checkbox/radio). |
+| `trueValue` | `any` | `"Y"` | Toggle/switch on value. |
+| `falseValue` | `any` | `"N"` | Toggle/switch off value. |
+| `title` | `String \| null` | `null` | Toggle/switch title. |
+| `isLeftIconBorder` | `Boolean` | `false` | Border on left icon. |
+| `isRightIconBorder` | `Boolean` | `false` | Border on right icon. |
+| `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
+| `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot (`"left"`, `"right"`). |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+| `clear` | `event` | Multiselect field cleared. |
+| `change` | `value` | Multiselect value changed. |
+| `select` | `value` | Multiselect option selected. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `label` | Custom label. |
+| `prefix` | Custom prefix. |
+| `icon` | Custom icon. |
+| `postfix` | Custom postfix. |
+| `description` | Custom description. |
+| `helptext` | Custom help text. |
+| `option` | Custom option rendering (select). |
+| `singlelabel` | Custom single-value label (select). |

package/.ai/ai_ref_AbFileUploader.md

@@ -1,47 +1,47 @@
-# AbFileUploader — AI Reference
-
-File upload input with drag-and-drop, size validation, and preview. Can render a default uploader UI or accept a custom one via slots.
-
-## Usage
-
-```vue
-<template>
-  <ab-file-uploader v-model="file" label="Upload avatar" :max-size="1.5" @on-select-files="handleFiles" />
-
-  <ab-file-uploader v-model="file" :max-size="5">
-    <template #dial>
-      <div class="my-drop-zone">Drop files here</div>
-    </template>
-  </ab-file-uploader>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const file = ref(null);
-function handleFiles(files) { console.log('Selected files:', files); }
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `File \| Array \| String` | `null` | Selected file (or URL string / array). |
-| `maxSize` | `Number` | `2.0` | Max file size in MB. |
-| `label` | `String` | `""` | Field label. |
-| `containerClass` | `String` | `""` | Wrapper class. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `file` | v-model sync. |
-| `onSelectFiles` | `files` | All selected files after size validation. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `label` | Custom label. |
-| `dial` | Custom uploader UI (replaces the default design). |
-| `default` | Alternative custom UI slot. |
+# AbFileUploader — AI Reference
+
+File upload input with drag-and-drop, size validation, and preview. Can render a default uploader UI or accept a custom one via slots.
+
+## Usage
+
+```vue
+<template>
+  <ab-file-uploader v-model="file" label="Upload avatar" :max-size="1.5" @on-select-files="handleFiles" />
+
+  <ab-file-uploader v-model="file" :max-size="5">
+    <template #dial>
+      <div class="my-drop-zone">Drop files here</div>
+    </template>
+  </ab-file-uploader>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const file = ref(null);
+function handleFiles(files) { console.log('Selected files:', files); }
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `File \| Array \| String` | `null` | Selected file (or URL string / array). |
+| `maxSize` | `Number` | `2.0` | Max file size in MB. |
+| `label` | `String` | `""` | Field label. |
+| `containerClass` | `String` | `""` | Wrapper class. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `file` | v-model sync. |
+| `onSelectFiles` | `files` | All selected files after size validation. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `label` | Custom label. |
+| `dial` | Custom uploader UI (replaces the default design). |
+| `default` | Alternative custom UI slot. |

package/.ai/ai_ref_AbFilterPanel.md

@@ -1,67 +1,67 @@
-# AbFilterPanel — AI Reference
-
-Advanced filter panel for list and table views. Supports quick/advance modes, single-field search, date ranges, and an optional QR/barcode scan button.
-
-## Usage
-
-```vue
-<template>
-  <ab-filter-panel
-    :filter-options="filterOptions"
-    is-advance
-    is-searchable
-    size="sm"
-    @search-filter="handleSearch"
-    @reset="handleReset"
-  />
-</template>
-
-<script setup>
-const filterOptions = [
-  { propName: 'name', label: 'Name', type: 'text' },
-  { propName: 'status', label: 'Status', type: 'select', options: [...] },
-  { propName: 'createdAt', label: 'Created', type: 'daterange' },
-];
-
-function handleSearch(data) {
-  // data: [{ propName, operators, value }, ...]
-}
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `isAdvance` | `Boolean` | `false` | Show all filters in an expanded layout. |
-| `isQuickAdvance` | `Boolean` | `false` | Quick advance mode. |
-| `isSingle` | `Boolean` | `false` | Single-field search mode. |
-| `isAllowed` | `Boolean` | `false` | Permission flag consumed by the template. |
-| `canScan` | `Boolean` | `false` | Show a QR / barcode scan button. |
-| `filterOptions` | `Array` | `[]` | Filter field definitions. |
-| `scanProps` | `String` | `""` | Property name to apply scan result to. |
-| `showScanFld` | `Boolean` | `false` | Force-show the scan field. |
-| `showDrGroupText` | `Boolean` | `true` | Show date-range group label. |
-| `dateFormat` | `String` | `"MMM DD,YYYY"` | Date display format. |
-| `isSearchable` | `Boolean` | `false` | Allow searching within option lists. |
-| `isMaxDate` | `Boolean` | `true` | Limit date pickers to today as max. |
-| `size` | `String` | `"xs"` | Control size. |
-| `advanceSearchInputContainerClass` | `String` | `"col-6"` | Grid column class for inputs in advance mode. |
-| `isQuickAdvanceAutoSearch` | `Boolean` | `false` | Fire search automatically on field change (quick advance). |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `searchFilter` | `Array<{ propName, operators, value }>` | User triggered a search. |
-| `reset` | — | Filter reset clicked. |
-| `ChangeSearchMode` | `showScan: Boolean` | Toggled between search and scan modes. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `prefix` | Filter prefix. |
-| `postfix` | Filter postfix. |
-| `icon` | Filter icon. |
-| `hints` | Helper text. |
+# AbFilterPanel — AI Reference
+
+Advanced filter panel for list and table views. Supports quick/advance modes, single-field search, date ranges, and an optional QR/barcode scan button.
+
+## Usage
+
+```vue
+<template>
+  <ab-filter-panel
+    :filter-options="filterOptions"
+    is-advance
+    is-searchable
+    size="sm"
+    @search-filter="handleSearch"
+    @reset="handleReset"
+  />
+</template>
+
+<script setup>
+const filterOptions = [
+  { propName: 'name', label: 'Name', type: 'text' },
+  { propName: 'status', label: 'Status', type: 'select', options: [...] },
+  { propName: 'createdAt', label: 'Created', type: 'daterange' },
+];
+
+function handleSearch(data) {
+  // data: [{ propName, operators, value }, ...]
+}
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `isAdvance` | `Boolean` | `false` | Show all filters in an expanded layout. |
+| `isQuickAdvance` | `Boolean` | `false` | Quick advance mode. |
+| `isSingle` | `Boolean` | `false` | Single-field search mode. |
+| `isAllowed` | `Boolean` | `false` | Permission flag consumed by the template. |
+| `canScan` | `Boolean` | `false` | Show a QR / barcode scan button. |
+| `filterOptions` | `Array` | `[]` | Filter field definitions. |
+| `scanProps` | `String` | `""` | Property name to apply scan result to. |
+| `showScanFld` | `Boolean` | `false` | Force-show the scan field. |
+| `showDrGroupText` | `Boolean` | `true` | Show date-range group label. |
+| `dateFormat` | `String` | `"MMM DD,YYYY"` | Date display format. |
+| `isSearchable` | `Boolean` | `false` | Allow searching within option lists. |
+| `isMaxDate` | `Boolean` | `true` | Limit date pickers to today as max. |
+| `size` | `String` | `"xs"` | Control size. |
+| `advanceSearchInputContainerClass` | `String` | `"col-6"` | Grid column class for inputs in advance mode. |
+| `isQuickAdvanceAutoSearch` | `Boolean` | `false` | Fire search automatically on field change (quick advance). |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `searchFilter` | `Array<{ propName, operators, value }>` | User triggered a search. |
+| `reset` | — | Filter reset clicked. |
+| `ChangeSearchMode` | `showScan: Boolean` | Toggled between search and scan modes. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `prefix` | Filter prefix. |
+| `postfix` | Filter postfix. |
+| `icon` | Filter icon. |
+| `hints` | Helper text. |

package/.ai/ai_ref_AbFormCheck.md

@@ -1,58 +1,58 @@
-# AbFormCheck / AbRadioInput — AI Reference
-
-Checkbox or radio group with card, segmented, and pill visual variants. `AbRadioInput` is an alias export of `AbFormCheck`.
-
-## Usage
-
-```vue
-<template>
-  <ab-form-check
-    v-model="selected"
-    name="features"
-    :options="[
-      { val: 'a', title: 'Email reports' },
-      { val: 'b', title: 'Slack notifications' },
-    ]"
-    label="Enable"
-  />
-
-  <ab-form-check v-model="plan" type="radio" name="plan" variant="card" :options="plans" />
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `any` | — | v-model binding (array for checkboxes, single value for radio). |
-| `label` | `String \| null` | `null` | Group label. |
-| `rules` | `String` | `""` | VeeValidate rules. |
-| `val` | `any` | `null` | Initial value. |
-| `type` | `String` | `"checkbox"` | `"checkbox"` or `"radio"`. |
-| `isInline` | `Boolean` | `false` | Render options inline. |
-| `options` | `Array` | `[]` | Each: `{ val, title, description?, icon?, img_src?, iconComponent?, disable? }`. |
-| `name` | `String` | **required** | Field name. |
-| `limit` | `Number` | `0` | Max selections (0 = unlimited). |
-| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
-| `size` | `String` | `"md"` | Control size. |
-| `iconSize` | `String` | `"24px"` | Icon size (when option has an icon). |
-| `iconGap` | `String` | `"10px"` | Gap between icon and label. |
-| `variant` | `String` | `"default"` | `default`, `card`, `segmented`, `pill`. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `value` | v-model sync. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `label` | Group label. |
-| `description` | Group description. |
-| `help-text` | Helper text. |
-| `input-img-{option.title}` | Per-option image slot. |
-| `input-icon-{option.title}` | Per-option icon component slot. |
-| `label-{option.title}` | Per-option label slot. |
-| `description-{option.title}` | Per-option description slot. |
+# AbFormCheck / AbRadioInput — AI Reference
+
+Checkbox or radio group with card, segmented, and pill visual variants. `AbRadioInput` is an alias export of `AbFormCheck`.
+
+## Usage
+
+```vue
+<template>
+  <ab-form-check
+    v-model="selected"
+    name="features"
+    :options="[
+      { val: 'a', title: 'Email reports' },
+      { val: 'b', title: 'Slack notifications' },
+    ]"
+    label="Enable"
+  />
+
+  <ab-form-check v-model="plan" type="radio" name="plan" variant="card" :options="plans" />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `any` | — | v-model binding (array for checkboxes, single value for radio). |
+| `label` | `String \| null` | `null` | Group label. |
+| `rules` | `String` | `""` | VeeValidate rules. |
+| `val` | `any` | `null` | Initial value. |
+| `type` | `String` | `"checkbox"` | `"checkbox"` or `"radio"`. |
+| `isInline` | `Boolean` | `false` | Render options inline. |
+| `options` | `Array` | `[]` | Each: `{ val, title, description?, icon?, img_src?, iconComponent?, disable? }`. |
+| `name` | `String` | **required** | Field name. |
+| `limit` | `Number` | `0` | Max selections (0 = unlimited). |
+| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
+| `size` | `String` | `"md"` | Control size. |
+| `iconSize` | `String` | `"24px"` | Icon size (when option has an icon). |
+| `iconGap` | `String` | `"10px"` | Gap between icon and label. |
+| `variant` | `String` | `"default"` | `default`, `card`, `segmented`, `pill`. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `label` | Group label. |
+| `description` | Group description. |
+| `help-text` | Helper text. |
+| `input-img-{option.title}` | Per-option image slot. |
+| `input-icon-{option.title}` | Per-option icon component slot. |
+| `label-{option.title}` | Per-option label slot. |
+| `description-{option.title}` | Per-option description slot. |

package/.ai/ai_ref_AbImageRadioInput.md

@@ -1,55 +1,55 @@
-# AbImageRadioInput — AI Reference
-
-Radio-group variant that renders visual image/icon tiles for each option. Useful for theme pickers, layout pickers, and other visual-first choices.
-
-## Usage
-
-```vue
-<template>
-  <ab-image-radio-input
-    v-model="theme"
-    :options="[
-      { val: 'light', label: 'Light', img_src: '/theme-light.png' },
-      { val: 'dark', label: 'Dark', img_src: '/theme-dark.png' },
-      { val: 'system', label: 'System', icon: 'bi bi-laptop' },
-    ]"
-  />
-</template>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `any` | — | v-model binding. |
-| `width` | `String` | `"auto"` | Option width. |
-| `height` | `String` | `"auto"` | Option height. |
-| `maxWidth` | `String` | `"inherit"` | Max width. |
-| `maxImgWidth` | `String` | `"50%"` | Image max width. |
-| `borderRadius` | `String` | `"5px"` | Option border radius. |
-| `margin` | `String` | `"0 15px 15px 0"` | Option margin. |
-| `padding` | `String` | `"10px"` | Option padding. |
-| `selectorTop` | `String` | `"5px"` | Position of the checkmark indicator (top). |
-| `selectorLeft` | `String` | `"5px"` | Position of the checkmark indicator (left). |
-| `selectorColor` | `String` | `""` | Checkmark color. |
-| `iconSize` | `String` | `"inherit"` | Option icon size. |
-| `options` | `Array` | `[]` | Option objects — see shape below. |
-| `isInline` | `Boolean` | `false` | Inline (row) layout. |
-| `optionClass` | `String` | `""` | Class for each option wrapper. |
-| `labelBorder` | `String` | `"1px solid transparent"` | Option border. |
-
-**Option shape**: `{ val, label?, img_src?, icon?, iconComponent?, icon_ctnr_class?, class? }`
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `value` | v-model sync. |
-
-## Slots
-
-| Name | Scope | Description |
-| --- | --- | --- |
-| `icon_image` | `option` | Custom image/icon for each option. |
-| `label` | `option` | Custom label rendering. |
-| `label-{val}` | — | Custom label for a specific option by `val`. |
+# AbImageRadioInput — AI Reference
+
+Radio-group variant that renders visual image/icon tiles for each option. Useful for theme pickers, layout pickers, and other visual-first choices.
+
+## Usage
+
+```vue
+<template>
+  <ab-image-radio-input
+    v-model="theme"
+    :options="[
+      { val: 'light', label: 'Light', img_src: '/theme-light.png' },
+      { val: 'dark', label: 'Dark', img_src: '/theme-dark.png' },
+      { val: 'system', label: 'System', icon: 'bi bi-laptop' },
+    ]"
+  />
+</template>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `any` | — | v-model binding. |
+| `width` | `String` | `"auto"` | Option width. |
+| `height` | `String` | `"auto"` | Option height. |
+| `maxWidth` | `String` | `"inherit"` | Max width. |
+| `maxImgWidth` | `String` | `"50%"` | Image max width. |
+| `borderRadius` | `String` | `"5px"` | Option border radius. |
+| `margin` | `String` | `"0 15px 15px 0"` | Option margin. |
+| `padding` | `String` | `"10px"` | Option padding. |
+| `selectorTop` | `String` | `"5px"` | Position of the checkmark indicator (top). |
+| `selectorLeft` | `String` | `"5px"` | Position of the checkmark indicator (left). |
+| `selectorColor` | `String` | `""` | Checkmark color. |
+| `iconSize` | `String` | `"inherit"` | Option icon size. |
+| `options` | `Array` | `[]` | Option objects — see shape below. |
+| `isInline` | `Boolean` | `false` | Inline (row) layout. |
+| `optionClass` | `String` | `""` | Class for each option wrapper. |
+| `labelBorder` | `String` | `"1px solid transparent"` | Option border. |
+
+**Option shape**: `{ val, label?, img_src?, icon?, iconComponent?, icon_ctnr_class?, class? }`
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `value` | v-model sync. |
+
+## Slots
+
+| Name | Scope | Description |
+| --- | --- | --- |
+| `icon_image` | `option` | Custom image/icon for each option. |
+| `label` | `option` | Custom label rendering. |
+| `label-{val}` | — | Custom label for a specific option by `val`. |