@appsbd/vue3-appsbd-ui 1.0.11 → 1.0.12

package/.ai/ai_ref_AbColorPicker.md

@@ -2,6 +2,8 @@
 
 Radio-style color swatch picker. Takes a list of named colors and lets users pick one.
 
+> Also available inside `AbCustomField` via the `CP` field type — see [.ai/ai_ref_AbCustomField.md](./ai_ref_AbCustomField.md).
+
 ## Usage
 
 ```vue
@@ -34,6 +36,8 @@ const themeColor = ref('blue');
 | `align` | `String` | `"left"` | Flex alignment (`left`, `center`, `right`, …). |
 | `borderRadius` | `String` | `"50%"` | Swatch border-radius. |
 | `size` | `String` | `"md"` | Item size (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`). |
+| `label` | `String` | `""` | Optional text label rendered above picker. |
+| `containerClass` | `String` | `undefined` | Additional class for wrapper div. Falls back to globalConfig.inputContainerClass. |
 
 ## Events
 

package/.ai/ai_ref_AbCustomField.md

@@ -26,6 +26,57 @@ const fields = [
 </script>
 ```
 
+### Radio / checkbox with card, segmented or pill variant
+
+`R` (radio) and `C` (checkbox) fields render through `AbFormCheck` internally, so its `variant`, `card_width`, `icon_size` and `icon_gap` options pass straight through:
+
+```vue
+<template>
+  <ab-custom-field :field-inputs="fields" :custom-props="form" />
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+
+const form = reactive({ plan: 'pro', notify: [] });
+
+const fields = [
+  { id: 'plan', type: 'R', label: 'Plan', variant: 'card', card_width: '160px', options: [
+    { val: 'free', title: 'Free' },
+    { val: 'pro', title: 'Pro', description: 'For growing teams' },
+  ] },
+  { id: 'notify', type: 'C', label: 'Notify via', variant: 'segmented', options: [
+    { val: 'email', title: 'Email' },
+    { val: 'sms', title: 'SMS' },
+  ] },
+];
+</script>
+```
+
+### Color picker & file uploader fields
+
+`CP` renders `AbColorPicker` and `FU` renders `AbFileUploader`. Neither integrates with Vee-Validate (`rules` is ignored for these two types):
+
+```vue
+<template>
+  <ab-custom-field :field-inputs="fields" :custom-props="form" />
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+
+const form = reactive({ theme: '', avatar: null });
+
+const fields = [
+  { id: 'theme', type: 'CP', label: 'Theme Color', options: [
+    { name: 'blue', color: '#0d6efd', title: 'Blue' },
+    { name: 'green', color: '#198754', title: 'Green' },
+  ] },
+  { id: 'avatar', type: 'FU', label: 'Avatar', max_size: 2 },
+];
+</script>
+```
+
 ## Props
 
 | Name | Type | Default | Description |
@@ -50,6 +101,8 @@ const fields = [
 | `W` | Dropdown / select |
 | `S` | Switch / toggle |
 | `C` | Checkbox |
+| `CP` | Color picker (`AbColorPicker`) |
+| `FU` | File uploader (`AbFileUploader`) |
 
 ### Field Properties
 
@@ -61,6 +114,14 @@ Each object in `fieldInputs` supports several properties. The `rules` property d
 | `type` | `String` | Component type code (e.g. `T`, `N`). |
 | `label` | `String` | Field label. |
 | `rules` | `String` \| `Array` | Standard Vee-Validate rules (e.g., `"required|url"`). Replaces legacy `is_required`. |
+| `options` | `Array` | Choices for `R` (radio), `C` (checkbox) and `W` (dropdown) fields — item shape `{ val, title, description?, disable?, img_src?, icon?, iconComponent? }`. For `CP` (color picker) it's forwarded as `AbColorPicker`'s `colors` prop — item shape `{ name, color, title? }` instead. |
+| `variant` | `String` | **`R`/`C` only.** Forwarded to `AbFormCheck`'s `variant` prop: `"default"` (plain, initial value), `"card"`, `"segmented"`, or `"pill"`. |
+| `card_width` | `String` | **`R`/`C` only, with `variant`.** Forwarded to `AbFormCheck`'s `card-width` prop, e.g. `"160px"`, `"50%"`. Default `"auto"`. |
+| `icon_size` | `String` | **`R`/`C` only, with `variant`.** Forwarded to `AbFormCheck`'s `icon-size` prop. Default `"24px"`. |
+| `icon_gap` | `String` | **`R`/`C` only, with `variant`.** Forwarded to `AbFormCheck`'s `icon-gap` prop. Default `"10px"`. |
+| `align` | `String` | **`CP` only.** Forwarded to `AbColorPicker`'s `align` prop (`"left"`, `"center"`, `"right"`...). Default `"left"`. |
+| `border_radius` | `String` | **`CP` only.** Forwarded to `AbColorPicker`'s `border-radius` prop, e.g. `"50%"`, `"6px"`. Default `"50%"`. |
+| `max_size` | `Number` | **`FU` only.** Forwarded to `AbFileUploader`'s `max-size` prop — max file size in MB. Default `2.0`. |
 
 ## Slots (scoped by field id)
 

package/.ai/ai_ref_AbFileUploader.md

@@ -2,6 +2,8 @@
 
 File upload input with drag-and-drop, size validation, and preview. Can render a default uploader UI or accept a custom one via slots.
 
+> Also available inside `AbCustomField` via the `FU` field type — see [.ai/ai_ref_AbCustomField.md](./ai_ref_AbCustomField.md).
+
 ## Usage
 
 ```vue
@@ -29,7 +31,7 @@ function handleFiles(files) { console.log('Selected files:', files); }
 | `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. |
+| `containerClass` | `String` | `undefined` | Wrapper class (falls back to globalConfig.inputContainerClass). |
 
 ## Events
 

package/.ai/ai_ref_AbFormCheck.md

@@ -38,6 +38,7 @@ Checkbox or radio group with card, segmented, and pill visual variants. `AbRadio
 | `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`. |
+| `cardWidth` | `String` | `"auto"` | Width of card options (e.g. `"160px"`, `"50%"`, `"12rem"`). |
 
 ## Events