@appsbd/vue3-appsbd-ui 1.0.11 → 1.0.13

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_AbFilterPanel.md

@@ -2,6 +2,8 @@
 
 Advanced filter panel for list and table views. Supports quick/advance modes, single-field search, date ranges, and an optional QR/barcode scan button.
 
+`isMultiple` is functional in `isQuickAdvance` mode for `dd` fields: selections toggle on/off and render as removable tag chips on the popover trigger (no `AbMultiSelect` involved). The popover's option list is searchable — locally against `options`, or via `isAjaxSearch` + `onSearch` for server-side search.
+
 ## Usage
 
 ```vue

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
 

package/.ai/ai_ref_AbWizard.md

@@ -44,6 +44,9 @@ function onStepChange(newIndex) {}
 | `finishText` | `String` | `"Finish"` | Finish button label. |
 | `disableClose` | `Boolean` | `false` | Disable the close button (modal variants). |
 | `modalClass` | `String` | `"modal-lg"` | Modal size class (modal variants only). |
+| `backgroundColor` | `String` | `null` | Explicit background color for the whole wizard (modal-content or default wrapper). Leave unset to keep the default background. A nested `AbSettingsForm` automatically goes transparent to match it instead of showing its own background on top. |
+
+Any `class` passed to `<AbWizard>` is forwarded (via `$attrs`) onto the root element of the `default`/`circular`/`horizontal`/`vertical` variants — useful for spacing, border-radius, or your own theme classes. The `modal`/`modal-circular` variants render inside a `<Teleport>`, so `class` isn't forwarded there; use `modalClass` for those instead.
 
 ## Events
 

package/CHANGELOG.md

@@ -2,7 +2,23 @@
 
 All notable changes to `@appsbd/vue3-appsbd-ui` are documented here. Format loosely follows [Keep a Changelog](https://keepachangelog.com/).
 
-## [Unreleased] (1.0.11)
+## [Unreleased] (1.0.13)
+
+- **Added**: `AbFilterPanel` `isAjaxSearch` + async `onSearch(query)` support on quick-advance `dd` fields, fetching remote options as the user types in the popover search box.
+- **Added**: `AbFilterPanel` multi-select (`isMultiple`) support for quick-advance `dd` fields, with `operators: "in"` array values.
+- **Added**: `AbWizard` `backgroundColor` prop to set an explicit background on the wizard root/modal-content; a nested `AbSettingsForm` automatically goes transparent to match it.
+- **Fixed**: `AbFilterPanel` range-type (`dr`/`tr`) filter values no longer treated as "no value" when only one of `start`/`end` is set.
+- **Added**: RTL styling for `AbProgressbar` (`_progressbar.scss`).
+- **Changed**: `AbFilterPanel` active-filter badge now uses a border instead of a filled background.
+
+## [1.0.12] - 2026-08-09
+
+- **Changed**: `AbCustomField` now supports `CP` (color picker) and `FU` (file uploader) field types, and forwards `variant`/`card-width`/`icon-size`/`icon-gap` to its radio/checkbox fields.
+- **Added**: `label` option for `AbColorPicker` and `AbFileUploader`; `AbFormCheck` variation cards support a custom width.
+- **Fixed**: `AbToggle` switch icon alignment and per-size (`xs`–`xl`) icon sizing.
+- **Docs**: AI reference files added/updated for `AbColorPicker`, `AbFileUploader`, `AbFormCheck`, and `AbCustomField`.
+
+## [1.0.11] - 2026-07-30
 
 - **Changed**: Migrated the icon peer dependency from `lucide-vue-next` to `@lucide/vue` (`>=1.28.0`).
 - **Added**: `/migrate-lucide-icons` command, shipped to consuming projects, to automate the `lucide-vue-next` → `@lucide/vue` import rename.