@appsbd/vue3-appsbd-ui 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.ai/ai_ref_AbAvatar.md +41 -51
- package/.ai/ai_ref_AbBadge.md +36 -45
- package/.ai/ai_ref_AbButton.md +52 -70
- package/.ai/ai_ref_AbCard.md +51 -70
- package/.ai/ai_ref_AbCarousel.md +36 -47
- package/.ai/ai_ref_AbChart.md +46 -87
- package/.ai/ai_ref_AbColorPicker.md +42 -55
- package/.ai/ai_ref_AbConfirmPopover.md +54 -59
- package/.ai/ai_ref_AbCustomField.md +66 -74
- package/.ai/ai_ref_AbDarkModeToggler.md +33 -42
- package/.ai/ai_ref_AbDateTimePicker.md +74 -108
- package/.ai/ai_ref_AbEasyModal.md +56 -62
- package/.ai/ai_ref_AbField.md +88 -96
- package/.ai/ai_ref_AbFileUploader.md +47 -63
- package/.ai/ai_ref_AbFilterPanel.md +67 -71
- package/.ai/ai_ref_AbFormCheck.md +58 -75
- package/.ai/ai_ref_AbImageRadioInput.md +55 -63
- package/.ai/ai_ref_AbInputField.md +66 -74
- package/.ai/ai_ref_AbInputTag.md +56 -76
- package/.ai/ai_ref_AbKbd.md +23 -35
- package/.ai/ai_ref_AbKbdGroup.md +21 -33
- package/.ai/ai_ref_AbMainLayout.md +106 -0
- package/.ai/ai_ref_AbModal.md +98 -103
- package/.ai/ai_ref_AbMultiSelect.md +78 -112
- package/.ai/ai_ref_AbNumberField.md +59 -84
- package/.ai/ai_ref_AbPinInput.md +33 -45
- package/.ai/ai_ref_AbPopover.md +54 -64
- package/.ai/ai_ref_AbPricingCard.md +56 -64
- package/.ai/ai_ref_AbPricingContainer.md +41 -49
- package/.ai/ai_ref_AbPricingTable.md +56 -72
- package/.ai/ai_ref_AbProgressbar.md +34 -44
- package/.ai/ai_ref_AbScrollbar.md +38 -48
- package/.ai/ai_ref_AbSettingsForm.md +46 -54
- package/.ai/ai_ref_AbSideMenuItem.md +47 -58
- package/.ai/ai_ref_AbSidebar.md +62 -70
- package/.ai/ai_ref_AbSkeleton.md +23 -41
- package/.ai/ai_ref_AbSlider.md +52 -71
- package/.ai/ai_ref_AbTab.md +30 -38
- package/.ai/ai_ref_AbTable.md +49 -59
- package/.ai/ai_ref_AbTabs.md +37 -47
- package/.ai/ai_ref_AbToggle.md +46 -65
- package/.ai/ai_ref_AbTooltip.md +39 -53
- package/.ai/ai_ref_AbWizard.md +64 -77
- package/.ai/ai_ref_AbWizardStep.md +36 -48
- package/.ai/ai_ref_abEventBus.md +9 -37
- package/.ai/ai_ref_abRequestParam.md +2 -17
- package/.ai/ai_ref_abTranslate.md +30 -15
- package/.ai/ai_ref_abVeeRules.md +2 -11
- package/.ai/ai_ref_global_config.md +57 -66
- package/.ai/ai_ref_useAlert.md +7 -20
- package/.ai/ai_ref_useFileValidator.md +3 -18
- package/.ai/ai_ref_useResponsive.md +6 -20
- package/.ai/ai_ref_useTheme.md +4 -15
- package/.ai/ai_ref_useToast.md +5 -17
- package/AI_REF.md +114 -0
- package/AI_REFERENCE.md +87 -1157
- package/design-system.md +403 -403
- package/dist/skins/black.css +1 -1
- package/dist/skins/black.scss +3 -3
- package/dist/skins/cyan.css +1 -1
- package/dist/skins/cyan.scss +3 -3
- package/dist/skins/default.css +1 -1
- package/dist/skins/default.scss +5 -5
- package/dist/skins/gray.css +1 -1
- package/dist/skins/gray.scss +3 -3
- package/dist/skins/green.css +1 -1
- package/dist/skins/green.scss +5 -5
- package/dist/skins/orange.css +1 -1
- package/dist/skins/orange.scss +3 -3
- package/dist/skins/pink.css +1 -1
- package/dist/skins/pink.scss +3 -3
- package/dist/skins/purple.css +1 -1
- package/dist/skins/purple.scss +3 -3
- package/dist/skins/red.css +1 -1
- package/dist/skins/red.scss +3 -3
- package/dist/skins/themes/_black.scss +18 -6
- package/dist/skins/themes/_blue.scss +18 -43
- package/dist/skins/themes/_common_variable.scss +695 -590
- package/dist/skins/themes/_cyan.scss +18 -6
- package/dist/skins/themes/_gray.scss +18 -6
- package/dist/skins/themes/_green.scss +18 -6
- package/dist/skins/themes/_grid.scss +32 -27
- package/dist/skins/themes/_orange.scss +18 -6
- package/dist/skins/themes/_pink.scss +18 -6
- package/dist/skins/themes/_purple.scss +18 -6
- package/dist/skins/themes/_red.scss +18 -6
- package/dist/skins/themes/_violet.scss +18 -6
- package/dist/skins/violet.css +1 -1
- package/dist/skins/violet.scss +3 -3
- package/dist/style.css +1 -1
- package/dist/vue3-appsbd-ui.cjs.js +145 -125
- package/dist/vue3-appsbd-ui.es.js +27822 -16778
- package/package.json +72 -66
- package/readme.md +194 -136
- package/scripts/postinstall.js +55 -0
- package/scripts/setup.js +16 -0
- package/scripts/skill-groups.js +38 -0
- package/skills/commands/generate-module.md +76 -0
- package/skills/commands/settings-form.md +175 -0
- package/skills/commands/use-appsbd-ui.md +40 -0
|
@@ -1,75 +1,58 @@
|
|
|
1
|
-
# AbFormCheck / AbRadioInput — AI Reference
|
|
2
|
-
|
|
3
|
-
Checkbox or radio group with card, segmented, and pill visual variants. `AbRadioInput` is an alias export of `AbFormCheck
|
|
4
|
-
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
| `
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
|
45
|
-
|
|
|
46
|
-
| `
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
|
51
|
-
|
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
| `update:modelValue` | `value` | v-model sync. |
|
|
60
|
-
|
|
61
|
-
## Slots
|
|
62
|
-
|
|
63
|
-
| Name | Description |
|
|
64
|
-
| --- | --- |
|
|
65
|
-
| `label` | Group label. |
|
|
66
|
-
| `description` | Group description. |
|
|
67
|
-
| `help-text` | Helper text. |
|
|
68
|
-
| `input-img-{option.title}` | Per-option image slot. |
|
|
69
|
-
| `input-icon-{option.title}` | Per-option icon component slot. |
|
|
70
|
-
| `label-{option.title}` | Per-option label slot. |
|
|
71
|
-
| `description-{option.title}` | Per-option description slot. |
|
|
72
|
-
|
|
73
|
-
## v-model
|
|
74
|
-
|
|
75
|
-
Yes.
|
|
1
|
+
# AbFormCheck / AbRadioInput — AI Reference
|
|
2
|
+
|
|
3
|
+
Checkbox or radio group with card, segmented, and pill visual variants. `AbRadioInput` is an alias export of `AbFormCheck`.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```vue
|
|
8
|
+
<template>
|
|
9
|
+
<ab-form-check
|
|
10
|
+
v-model="selected"
|
|
11
|
+
name="features"
|
|
12
|
+
:options="[
|
|
13
|
+
{ val: 'a', title: 'Email reports' },
|
|
14
|
+
{ val: 'b', title: 'Slack notifications' },
|
|
15
|
+
]"
|
|
16
|
+
label="Enable"
|
|
17
|
+
/>
|
|
18
|
+
|
|
19
|
+
<ab-form-check v-model="plan" type="radio" name="plan" variant="card" :options="plans" />
|
|
20
|
+
</template>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Props
|
|
24
|
+
|
|
25
|
+
| Name | Type | Default | Description |
|
|
26
|
+
| --- | --- | --- | --- |
|
|
27
|
+
| `modelValue` | `any` | — | v-model binding (array for checkboxes, single value for radio). |
|
|
28
|
+
| `label` | `String \| null` | `null` | Group label. |
|
|
29
|
+
| `rules` | `String` | `""` | VeeValidate rules. |
|
|
30
|
+
| `val` | `any` | `null` | Initial value. |
|
|
31
|
+
| `type` | `String` | `"checkbox"` | `"checkbox"` or `"radio"`. |
|
|
32
|
+
| `isInline` | `Boolean` | `false` | Render options inline. |
|
|
33
|
+
| `options` | `Array` | `[]` | Each: `{ val, title, description?, icon?, img_src?, iconComponent?, disable? }`. |
|
|
34
|
+
| `name` | `String` | **required** | Field name. |
|
|
35
|
+
| `limit` | `Number` | `0` | Max selections (0 = unlimited). |
|
|
36
|
+
| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
|
|
37
|
+
| `size` | `String` | `"md"` | Control size. |
|
|
38
|
+
| `iconSize` | `String` | `"24px"` | Icon size (when option has an icon). |
|
|
39
|
+
| `iconGap` | `String` | `"10px"` | Gap between icon and label. |
|
|
40
|
+
| `variant` | `String` | `"default"` | `default`, `card`, `segmented`, `pill`. |
|
|
41
|
+
|
|
42
|
+
## Events
|
|
43
|
+
|
|
44
|
+
| Event | Payload | Description |
|
|
45
|
+
| --- | --- | --- |
|
|
46
|
+
| `update:modelValue` | `value` | v-model sync. |
|
|
47
|
+
|
|
48
|
+
## Slots
|
|
49
|
+
|
|
50
|
+
| Name | Description |
|
|
51
|
+
| --- | --- |
|
|
52
|
+
| `label` | Group label. |
|
|
53
|
+
| `description` | Group description. |
|
|
54
|
+
| `help-text` | Helper text. |
|
|
55
|
+
| `input-img-{option.title}` | Per-option image slot. |
|
|
56
|
+
| `input-icon-{option.title}` | Per-option icon component slot. |
|
|
57
|
+
| `label-{option.title}` | Per-option label slot. |
|
|
58
|
+
| `description-{option.title}` | Per-option description slot. |
|
|
@@ -1,63 +1,55 @@
|
|
|
1
|
-
# AbImageRadioInput — AI Reference
|
|
2
|
-
|
|
3
|
-
Radio-group variant that renders visual image
|
|
4
|
-
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
| `
|
|
29
|
-
| `
|
|
30
|
-
| `
|
|
31
|
-
| `
|
|
32
|
-
| `
|
|
33
|
-
| `
|
|
34
|
-
| `
|
|
35
|
-
| `
|
|
36
|
-
| `
|
|
37
|
-
| `
|
|
38
|
-
| `
|
|
39
|
-
| `
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
|
56
|
-
| --- | --- | --- |
|
|
57
|
-
| `icon_image` | `option` | Custom image/icon for each option. |
|
|
58
|
-
| `label` | `option` | Custom label rendering. |
|
|
59
|
-
| `label-{val}` | — | Custom label for a specific option by `val`. |
|
|
60
|
-
|
|
61
|
-
## v-model
|
|
62
|
-
|
|
63
|
-
Yes.
|
|
1
|
+
# AbImageRadioInput — AI Reference
|
|
2
|
+
|
|
3
|
+
Radio-group variant that renders visual image/icon tiles for each option. Useful for theme pickers, layout pickers, and other visual-first choices.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```vue
|
|
8
|
+
<template>
|
|
9
|
+
<ab-image-radio-input
|
|
10
|
+
v-model="theme"
|
|
11
|
+
:options="[
|
|
12
|
+
{ val: 'light', label: 'Light', img_src: '/theme-light.png' },
|
|
13
|
+
{ val: 'dark', label: 'Dark', img_src: '/theme-dark.png' },
|
|
14
|
+
{ val: 'system', label: 'System', icon: 'bi bi-laptop' },
|
|
15
|
+
]"
|
|
16
|
+
/>
|
|
17
|
+
</template>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Props
|
|
21
|
+
|
|
22
|
+
| Name | Type | Default | Description |
|
|
23
|
+
| --- | --- | --- | --- |
|
|
24
|
+
| `modelValue` | `any` | — | v-model binding. |
|
|
25
|
+
| `width` | `String` | `"auto"` | Option width. |
|
|
26
|
+
| `height` | `String` | `"auto"` | Option height. |
|
|
27
|
+
| `maxWidth` | `String` | `"inherit"` | Max width. |
|
|
28
|
+
| `maxImgWidth` | `String` | `"50%"` | Image max width. |
|
|
29
|
+
| `borderRadius` | `String` | `"5px"` | Option border radius. |
|
|
30
|
+
| `margin` | `String` | `"0 15px 15px 0"` | Option margin. |
|
|
31
|
+
| `padding` | `String` | `"10px"` | Option padding. |
|
|
32
|
+
| `selectorTop` | `String` | `"5px"` | Position of the checkmark indicator (top). |
|
|
33
|
+
| `selectorLeft` | `String` | `"5px"` | Position of the checkmark indicator (left). |
|
|
34
|
+
| `selectorColor` | `String` | `""` | Checkmark color. |
|
|
35
|
+
| `iconSize` | `String` | `"inherit"` | Option icon size. |
|
|
36
|
+
| `options` | `Array` | `[]` | Option objects — see shape below. |
|
|
37
|
+
| `isInline` | `Boolean` | `false` | Inline (row) layout. |
|
|
38
|
+
| `optionClass` | `String` | `""` | Class for each option wrapper. |
|
|
39
|
+
| `labelBorder` | `String` | `"1px solid transparent"` | Option border. |
|
|
40
|
+
|
|
41
|
+
**Option shape**: `{ val, label?, img_src?, icon?, iconComponent?, icon_ctnr_class?, class? }`
|
|
42
|
+
|
|
43
|
+
## Events
|
|
44
|
+
|
|
45
|
+
| Event | Payload | Description |
|
|
46
|
+
| --- | --- | --- |
|
|
47
|
+
| `update:modelValue` | `value` | v-model sync. |
|
|
48
|
+
|
|
49
|
+
## Slots
|
|
50
|
+
|
|
51
|
+
| Name | Scope | Description |
|
|
52
|
+
| --- | --- | --- |
|
|
53
|
+
| `icon_image` | `option` | Custom image/icon for each option. |
|
|
54
|
+
| `label` | `option` | Custom label rendering. |
|
|
55
|
+
| `label-{val}` | — | Custom label for a specific option by `val`. |
|
|
@@ -1,74 +1,66 @@
|
|
|
1
|
-
# AbInputField — AI Reference
|
|
2
|
-
|
|
3
|
-
Core text input with
|
|
4
|
-
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
|
34
|
-
|
|
|
35
|
-
| `
|
|
36
|
-
| `
|
|
37
|
-
| `
|
|
38
|
-
| `
|
|
39
|
-
| `
|
|
40
|
-
| `
|
|
41
|
-
| `
|
|
42
|
-
| `
|
|
43
|
-
| `
|
|
44
|
-
| `
|
|
45
|
-
| `
|
|
46
|
-
| `
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
|
55
|
-
|
|
|
56
|
-
| `
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
| `
|
|
67
|
-
| `prefix` | Prefix icon / text. |
|
|
68
|
-
| `icon` | Custom icon inside the input field. |
|
|
69
|
-
| `postfix` | Postfix icon / text. |
|
|
70
|
-
| `hints` | Helper text (overrides `hints` prop). |
|
|
71
|
-
|
|
72
|
-
## v-model
|
|
73
|
-
|
|
74
|
-
Yes — `modelValue` + `update:modelValue`.
|
|
1
|
+
# AbInputField — AI Reference
|
|
2
|
+
|
|
3
|
+
Core text input with VeeValidate integration, localized feedback, and prefix/postfix/hint slots. Use for single-line text inputs; use `AbField` for a polymorphic field that can render selects, toggles, etc.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```vue
|
|
8
|
+
<template>
|
|
9
|
+
<ab-input-field
|
|
10
|
+
v-model="form.email"
|
|
11
|
+
name="email"
|
|
12
|
+
label="Email"
|
|
13
|
+
placeholder="you@example.com"
|
|
14
|
+
rules="required|email"
|
|
15
|
+
hints="We'll never share your email."
|
|
16
|
+
>
|
|
17
|
+
<template #prefix><i class="bi bi-envelope"></i></template>
|
|
18
|
+
</ab-input-field>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<script setup>
|
|
22
|
+
import { reactive } from 'vue';
|
|
23
|
+
const form = reactive({ email: '' });
|
|
24
|
+
</script>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Props
|
|
28
|
+
|
|
29
|
+
| Name | Type | Default | Description |
|
|
30
|
+
| --- | --- | --- | --- |
|
|
31
|
+
| `modelValue` | `any` | `null` | Two-way-bound value. |
|
|
32
|
+
| `label` | `String` | `""` | Field label. |
|
|
33
|
+
| `placeholder` | `String` | `""` | Input placeholder. |
|
|
34
|
+
| `type` | `String` | `"text"` | Native input type (`text`, `email`, `password`, `number`, `tel`, …). |
|
|
35
|
+
| `name` | `String` | **required** | VeeValidate field name. |
|
|
36
|
+
| `isCodeInput` | `Boolean` | `false` | Applies monospace / code-input styling. |
|
|
37
|
+
| `rules` | `String \| Object` | `""` | VeeValidate rules. |
|
|
38
|
+
| `containerClass` | `String` | `"mb-3"` | Class on the wrapper `<div>`. |
|
|
39
|
+
| `hints` | `String` | `""` | Helper text beneath the input. |
|
|
40
|
+
| `prefix` | `String` | `""` | Prefix text/icon (shortcut for `#prefix` slot). |
|
|
41
|
+
| `postfix` | `String` | `""` | Postfix text/icon. |
|
|
42
|
+
| `maxlength` | `any` | `null` | Native `maxlength`. |
|
|
43
|
+
| `isLeftIconBorder` | `Boolean` | `false` | Renders border between the prefix icon and the input. |
|
|
44
|
+
| `isRightIconBorder` | `Boolean` | `false` | Renders border between the postfix icon and the input. |
|
|
45
|
+
| `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
|
|
46
|
+
| `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot (`"left"`, `"right"`). |
|
|
47
|
+
|
|
48
|
+
## Events
|
|
49
|
+
|
|
50
|
+
| Event | Payload | Description |
|
|
51
|
+
| --- | --- | --- |
|
|
52
|
+
| `update:modelValue` | `value` | v-model sync. |
|
|
53
|
+
| `input` | `value` | Fired on input. |
|
|
54
|
+
| `keyup` | `KeyboardEvent` | Forwarded native event. |
|
|
55
|
+
| `keydown` | `KeyboardEvent` | Forwarded native event. |
|
|
56
|
+
| `paste` | `ClipboardEvent` | Forwarded native event. |
|
|
57
|
+
|
|
58
|
+
## Slots
|
|
59
|
+
|
|
60
|
+
| Name | Description |
|
|
61
|
+
| --- | --- |
|
|
62
|
+
| `label` | Custom label content. |
|
|
63
|
+
| `prefix` | Prefix icon / text. |
|
|
64
|
+
| `icon` | Custom icon inside the input field. |
|
|
65
|
+
| `postfix` | Postfix icon / text. |
|
|
66
|
+
| `hints` | Helper text (overrides `hints` prop). |
|
package/.ai/ai_ref_AbInputTag.md
CHANGED
|
@@ -1,76 +1,56 @@
|
|
|
1
|
-
# AbInputTag — AI Reference
|
|
2
|
-
|
|
3
|
-
Multi-tag input — lets users enter and manage a list of tags. Optionally supports an `options` array for autocomplete-style selection.
|
|
4
|
-
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
|
45
|
-
|
|
|
46
|
-
| `
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
|
51
|
-
|
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
|
|
58
|
-
## Events
|
|
59
|
-
|
|
60
|
-
| Event | Payload | Description |
|
|
61
|
-
| --- | --- | --- |
|
|
62
|
-
| `update:modelValue` | `Array` | v-model sync. |
|
|
63
|
-
|
|
64
|
-
## Slots
|
|
65
|
-
|
|
66
|
-
| Name | Description |
|
|
67
|
-
| --- | --- |
|
|
68
|
-
| `label` | Custom label. |
|
|
69
|
-
| `prefix` | Prefix icon/text. |
|
|
70
|
-
| `icon` | Custom icon inside the input. |
|
|
71
|
-
| `postfix` | Postfix icon/text. |
|
|
72
|
-
| `hints` | Custom hints. |
|
|
73
|
-
|
|
74
|
-
## v-model
|
|
75
|
-
|
|
76
|
-
Yes.
|
|
1
|
+
# AbInputTag — AI Reference
|
|
2
|
+
|
|
3
|
+
Multi-tag input — lets users enter and manage a list of tags. Optionally supports an `options` array for autocomplete-style selection.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```vue
|
|
8
|
+
<template>
|
|
9
|
+
<ab-input-tag v-model="tags" name="tags" label="Tags" placeholder="Type and press Enter" :max="10" hints="Up to 10 tags" />
|
|
10
|
+
|
|
11
|
+
<ab-input-tag v-model="skills" name="skills" :options="['Vue', 'React', 'Angular', 'Svelte']" />
|
|
12
|
+
</template>
|
|
13
|
+
|
|
14
|
+
<script setup>
|
|
15
|
+
import { ref } from 'vue';
|
|
16
|
+
const tags = ref([]);
|
|
17
|
+
const skills = ref([]);
|
|
18
|
+
</script>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Props
|
|
22
|
+
|
|
23
|
+
| Name | Type | Default | Description |
|
|
24
|
+
| --- | --- | --- | --- |
|
|
25
|
+
| `modelValue` | `Array` | `[]` | v-model array of selected tags. |
|
|
26
|
+
| `options` | `Array` | `[]` | Each entry: `{ val, title }` or a plain string. |
|
|
27
|
+
| `label` | `String` | `""` | Field label. |
|
|
28
|
+
| `size` | `String` | `"md"` | Adjusts component size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
|
|
29
|
+
| `placeholder` | `String` | `""` | Placeholder text. |
|
|
30
|
+
| `name` | `String` | **required** | VeeValidate field name. |
|
|
31
|
+
| `rules` | `String \| Object` | `""` | VeeValidate rules. |
|
|
32
|
+
| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
|
|
33
|
+
| `hints` | `String` | `""` | Helper text. |
|
|
34
|
+
| `prefix` | `String` | `""` | Prefix icon/text. |
|
|
35
|
+
| `postfix` | `String` | `""` | Postfix icon/text. |
|
|
36
|
+
| `max` | `Number` | `0` | Max number of tags (0 = unlimited). |
|
|
37
|
+
| `isLeftIconBorder` | `Boolean` | `false` | Border on prefix icon. |
|
|
38
|
+
| `isRightIconBorder` | `Boolean` | `false` | Border on postfix icon. |
|
|
39
|
+
| `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
|
|
40
|
+
| `iconPosition` | `String` | `"right"` | Position of the custom `#icon` slot (`"left"`, `"right"`). |
|
|
41
|
+
|
|
42
|
+
## Events
|
|
43
|
+
|
|
44
|
+
| Event | Payload | Description |
|
|
45
|
+
| --- | --- | --- |
|
|
46
|
+
| `update:modelValue` | `Array` | v-model sync. |
|
|
47
|
+
|
|
48
|
+
## Slots
|
|
49
|
+
|
|
50
|
+
| Name | Description |
|
|
51
|
+
| --- | --- |
|
|
52
|
+
| `label` | Custom label. |
|
|
53
|
+
| `prefix` | Prefix icon/text. |
|
|
54
|
+
| `icon` | Custom icon inside the input. |
|
|
55
|
+
| `postfix` | Postfix icon/text. |
|
|
56
|
+
| `hints` | Custom hints. |
|
package/.ai/ai_ref_AbKbd.md
CHANGED
|
@@ -1,35 +1,23 @@
|
|
|
1
|
-
# AbKbd — AI Reference
|
|
2
|
-
|
|
3
|
-
Styled `<kbd>`-like keyboard key chip. Compose multiple into a chord using `AbKbdGroup`.
|
|
4
|
-
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
No declared props.
|
|
26
|
-
|
|
27
|
-
## Events
|
|
28
|
-
|
|
29
|
-
None.
|
|
30
|
-
|
|
31
|
-
## Slots
|
|
32
|
-
|
|
33
|
-
| Name | Description |
|
|
34
|
-
| --- | --- |
|
|
35
|
-
| `default` | Key label (typically a single character or short word). |
|
|
1
|
+
# AbKbd — AI Reference
|
|
2
|
+
|
|
3
|
+
Styled `<kbd>`-like keyboard key chip. Compose multiple into a chord using `AbKbdGroup`.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```vue
|
|
8
|
+
<template>
|
|
9
|
+
Press <ab-kbd>Esc</ab-kbd> to close.
|
|
10
|
+
|
|
11
|
+
<ab-kbd-group>
|
|
12
|
+
<ab-kbd>⌘</ab-kbd>
|
|
13
|
+
<ab-kbd>Shift</ab-kbd>
|
|
14
|
+
<ab-kbd>P</ab-kbd>
|
|
15
|
+
</ab-kbd-group>
|
|
16
|
+
</template>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Slots
|
|
20
|
+
|
|
21
|
+
| Name | Description |
|
|
22
|
+
| --- | --- |
|
|
23
|
+
| `default` | Key label (typically a single character or short word). |
|
package/.ai/ai_ref_AbKbdGroup.md
CHANGED
|
@@ -1,33 +1,21 @@
|
|
|
1
|
-
# AbKbdGroup — AI Reference
|
|
2
|
-
|
|
3
|
-
Visual grouping container for multiple `AbKbd` chips —
|
|
4
|
-
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
No declared props.
|
|
24
|
-
|
|
25
|
-
## Events
|
|
26
|
-
|
|
27
|
-
None.
|
|
28
|
-
|
|
29
|
-
## Slots
|
|
30
|
-
|
|
31
|
-
| Name | Description |
|
|
32
|
-
| --- | --- |
|
|
33
|
-
| `default` | One or more `AbKbd` children. |
|
|
1
|
+
# AbKbdGroup — AI Reference
|
|
2
|
+
|
|
3
|
+
Visual grouping container for multiple `AbKbd` chips — renders keyboard chords / shortcuts.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```vue
|
|
8
|
+
<template>
|
|
9
|
+
<ab-kbd-group>
|
|
10
|
+
<ab-kbd>Ctrl</ab-kbd>
|
|
11
|
+
<ab-kbd>Alt</ab-kbd>
|
|
12
|
+
<ab-kbd>Del</ab-kbd>
|
|
13
|
+
</ab-kbd-group>
|
|
14
|
+
</template>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Slots
|
|
18
|
+
|
|
19
|
+
| Name | Description |
|
|
20
|
+
| --- | --- |
|
|
21
|
+
| `default` | One or more `AbKbd` children. |
|