@appsbd/vue3-appsbd-ui 1.0.0 → 1.0.2

package/.ai/ai_ref_AbFormCheck.md

@@ -1,75 +1,75 @@
-# AbFormCheck / AbRadioInput — AI Reference
-
-Checkbox or radio group with card, segmented, and pill visual variants. `AbRadioInput` is an alias export of `AbFormCheck` — both register to the same component.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<template>
-  <!-- Checkbox group -->
-  <ab-form-check
-    v-model="selected"
-    name="features"
-    :options="[
-      { val: 'a', title: 'Email reports' },
-      { val: 'b', title: 'Slack notifications' },
-      { val: 'c', title: 'SMS alerts' },
-    ]"
-    label="Enable"
-  />
-
-  <!-- Radio group — card variant -->
-  <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. |
-
-## v-model
-
-Yes.
+# AbFormCheck / AbRadioInput — AI Reference
+
+Checkbox or radio group with card, segmented, and pill visual variants. `AbRadioInput` is an alias export of `AbFormCheck` — both register to the same component.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <!-- Checkbox group -->
+  <ab-form-check
+    v-model="selected"
+    name="features"
+    :options="[
+      { val: 'a', title: 'Email reports' },
+      { val: 'b', title: 'Slack notifications' },
+      { val: 'c', title: 'SMS alerts' },
+    ]"
+    label="Enable"
+  />
+
+  <!-- Radio group — card variant -->
+  <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. |
+
+## v-model
+
+Yes.

package/.ai/ai_ref_AbImageRadioInput.md

@@ -1,63 +1,63 @@
-# 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.
-
-## Installation
-
-Globally registered by the plugin.
-
-## 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`. |
-
-## v-model
-
-Yes.
+# 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.
+
+## Installation
+
+Globally registered by the plugin.
+
+## 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`. |
+
+## v-model
+
+Yes.

package/.ai/ai_ref_AbInputField.md

@@ -1,71 +1,74 @@
-# AbInputField — AI Reference
-
-Core text input with built-in VeeValidate integration, localized feedback, and prefix/postfix/hint slots. Use this for single-line text inputs; use `AbField` if you want a polymorphic field that can render selects, toggles, etc.
-
-## Installation
-
-Globally registered by the plugin. Peer dependencies: `vee-validate`, `@vee-validate/rules`.
-
-## Usage
-
-```vue
-<template>
-  <ab-input-field
-    v-model="form.email"
-    name="email"
-    label="Email"
-    placeholder="you@example.com"
-    rules="required|email"
-    hints="We'll never share your email."
-  >
-    <template #prefix><i class="bi bi-envelope"></i></template>
-  </ab-input-field>
-</template>
-
-<script setup>
-import { reactive } from 'vue';
-const form = reactive({ email: '' });
-</script>
-```
-
-## Props
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `modelValue` | `any` | `null` | Two-way-bound value. |
-| `label` | `String` | `""` | Field label. |
-| `placeholder` | `String` | `""` | Input placeholder. |
-| `type` | `String` | `"text"` | Native input type (`text`, `email`, `password`, `number`, `tel`, …). |
-| `name` | `String` | **required** | VeeValidate field name. |
-| `isCodeInput` | `Boolean` | `false` | Applies monospace / code-input styling. |
-| `rules` | `String \| Object` | `""` | VeeValidate rules. |
-| `containerClass` | `String` | `"mb-3"` | Class on the wrapper `<div>`. |
-| `hints` | `String` | `""` | Helper text beneath the input. |
-| `prefix` | `String` | `""` | Prefix text/icon (shortcut for `#prefix` slot). |
-| `postfix` | `String` | `""` | Postfix text/icon. |
-| `maxlength` | `any` | `null` | Native `maxlength`. |
-| `isLeftIconBorder` | `Boolean` | `false` | Renders border between the prefix icon and the input. |
-| `isRightIconBorder` | `Boolean` | `false` | Renders border between the postfix icon and the input. |
-
-## Events
-
-| Event | Payload | Description |
-| --- | --- | --- |
-| `update:modelValue` | `value` | v-model sync. |
-| `input` | `value` | Fired on input. |
-| `keyup` | `KeyboardEvent` | Forwarded native event. |
-| `keydown` | `KeyboardEvent` | Forwarded native event. |
-| `paste` | `ClipboardEvent` | Forwarded native event. |
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `label` | Custom label content. |
-| `prefix` | Prefix icon / text. |
-| `postfix` | Postfix icon / text. |
-| `hints` | Helper text (overrides `hints` prop). |
-
-## v-model
-
-Yes — `modelValue` + `update:modelValue`.
+# AbInputField — AI Reference
+
+Core text input with built-in VeeValidate integration, localized feedback, and prefix/postfix/hint slots. Use this for single-line text inputs; use `AbField` if you want a polymorphic field that can render selects, toggles, etc.
+
+## Installation
+
+Globally registered by the plugin. Peer dependencies: `vee-validate`, `@vee-validate/rules`.
+
+## Usage
+
+```vue
+<template>
+  <ab-input-field
+    v-model="form.email"
+    name="email"
+    label="Email"
+    placeholder="you@example.com"
+    rules="required|email"
+    hints="We'll never share your email."
+  >
+    <template #prefix><i class="bi bi-envelope"></i></template>
+  </ab-input-field>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+const form = reactive({ email: '' });
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `any` | `null` | Two-way-bound value. |
+| `label` | `String` | `""` | Field label. |
+| `placeholder` | `String` | `""` | Input placeholder. |
+| `type` | `String` | `"text"` | Native input type (`text`, `email`, `password`, `number`, `tel`, …). |
+| `name` | `String` | **required** | VeeValidate field name. |
+| `isCodeInput` | `Boolean` | `false` | Applies monospace / code-input styling. |
+| `rules` | `String \| Object` | `""` | VeeValidate rules. |
+| `containerClass` | `String` | `"mb-3"` | Class on the wrapper `<div>`. |
+| `hints` | `String` | `""` | Helper text beneath the input. |
+| `prefix` | `String` | `""` | Prefix text/icon (shortcut for `#prefix` slot). |
+| `postfix` | `String` | `""` | Postfix text/icon. |
+| `maxlength` | `any` | `null` | Native `maxlength`. |
+| `isLeftIconBorder` | `Boolean` | `false` | Renders border between the prefix icon and the input. |
+| `isRightIconBorder` | `Boolean` | `false` | Renders border between the postfix icon and the input. |
+| `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. |
+| `input` | `value` | Fired on input. |
+| `keyup` | `KeyboardEvent` | Forwarded native event. |
+| `keydown` | `KeyboardEvent` | Forwarded native event. |
+| `paste` | `ClipboardEvent` | Forwarded native event. |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `label` | Custom label content. |
+| `prefix` | Prefix icon / text. |
+| `icon` | Custom icon inside the input field. |
+| `postfix` | Postfix icon / text. |
+| `hints` | Helper text (overrides `hints` prop). |
+
+## v-model
+
+Yes — `modelValue` + `update:modelValue`.

package/.ai/ai_ref_AbInputTag.md

@@ -52,6 +52,8 @@ const skills = ref([]);
 | `max` | `Number` | `0` | Max number of tags (0 = unlimited). |
 | `isLeftIconBorder` | `Boolean` | `false` | Border on prefix icon. |
 | `isRightIconBorder` | `Boolean` | `false` | Border on postfix icon. |
+| `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
+| `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot (`"left"`, `"right"`). |
 
 ## Events
 
@@ -65,6 +67,7 @@ const skills = ref([]);
 | --- | --- |
 | `label` | Custom label. |
 | `prefix` | Prefix icon/text. |
+| `icon` | Custom icon inside the input. |
 | `postfix` | Postfix icon/text. |
 | `hints` | Custom hints. |
 

package/.ai/ai_ref_AbKbd.md

@@ -1,35 +1,35 @@
-# AbKbd — AI Reference
-
-Styled `<kbd>`-like keyboard key chip. Compose multiple into a chord using `AbKbdGroup`.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<template>
-  Press <ab-kbd>Esc</ab-kbd> to close.
-
-  <ab-kbd-group>
-    <ab-kbd>⌘</ab-kbd>
-    <ab-kbd>Shift</ab-kbd>
-    <ab-kbd>P</ab-kbd>
-  </ab-kbd-group>
-</template>
-```
-
-## Props
-
-No declared props.
-
-## Events
-
-None.
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `default` | Key label (typically a single character or short word). |
+# AbKbd — AI Reference
+
+Styled `<kbd>`-like keyboard key chip. Compose multiple into a chord using `AbKbdGroup`.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  Press <ab-kbd>Esc</ab-kbd> to close.
+
+  <ab-kbd-group>
+    <ab-kbd>⌘</ab-kbd>
+    <ab-kbd>Shift</ab-kbd>
+    <ab-kbd>P</ab-kbd>
+  </ab-kbd-group>
+</template>
+```
+
+## Props
+
+No declared props.
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | Key label (typically a single character or short word). |

package/.ai/ai_ref_AbKbdGroup.md

@@ -1,33 +1,33 @@
-# AbKbdGroup — AI Reference
-
-Visual grouping container for multiple `AbKbd` chips — typically used to render keyboard chords / shortcuts.
-
-## Installation
-
-Globally registered by the plugin.
-
-## Usage
-
-```vue
-<template>
-  <ab-kbd-group>
-    <ab-kbd>Ctrl</ab-kbd>
-    <ab-kbd>Alt</ab-kbd>
-    <ab-kbd>Del</ab-kbd>
-  </ab-kbd-group>
-</template>
-```
-
-## Props
-
-No declared props.
-
-## Events
-
-None.
-
-## Slots
-
-| Name | Description |
-| --- | --- |
-| `default` | One or more `AbKbd` children. |
+# AbKbdGroup — AI Reference
+
+Visual grouping container for multiple `AbKbd` chips — typically used to render keyboard chords / shortcuts.
+
+## Installation
+
+Globally registered by the plugin.
+
+## Usage
+
+```vue
+<template>
+  <ab-kbd-group>
+    <ab-kbd>Ctrl</ab-kbd>
+    <ab-kbd>Alt</ab-kbd>
+    <ab-kbd>Del</ab-kbd>
+  </ab-kbd-group>
+</template>
+```
+
+## Props
+
+No declared props.
+
+## Events
+
+None.
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `default` | One or more `AbKbd` children. |