@appsbd/vue3-appsbd-ui 1.0.10 → 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_AbFilterPanel.md

@@ -49,6 +49,7 @@ function handleSearch(data) {
 | `size`                     | `String`  | `"xs"`          | Control size.                                              |
 | `advanceContainerClass`    | `String`  | `"col-6"`       | Grid column class for inputs in advance mode.              |
 | `isQuickAdvanceAutoSearch` | `Boolean` | `false`         | Fire search automatically on field change (quick advance). |
+| `defaultFilterId`          | `String` \| `Number` | `""` | Pre-selects a default filter property in standard search mode (when `!isSingle && !isAdvance && !isQuickAdvance`). |
 
 ## 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
 

package/.ai/ai_ref_useFileValidator.md

@@ -28,4 +28,4 @@ function handleFileUpload(event) {
 | Method | Signature | Description |
 |---|---|---|
 | `getFileInfo(file, sizeLimitMb)` | `Function` | Validates a `File` object against allowed MIME types and max size (`sizeLimitMb`, default `1.0`). If invalid, spawns a toast error and returns `null`. If valid, returns the `file` augmented with `isImage` and `fileIcon` properties. |
-| `getFileIconByExt(ext, type)` | `Function` | Returns `{ isImage: boolean, fileIcon: Component\|String }` based on file extension and MIME type. Uses `lucide-vue-next` icons for known formats (pdf, zip, doc, xls, ppt, mp4). |
+| `getFileIconByExt(ext, type)` | `Function` | Returns `{ isImage: boolean, fileIcon: Component\|String }` based on file extension and MIME type. Uses `@lucide/vue` icons for known formats (pdf, zip, doc, xls, ppt, mp4). |

package/AI_REFERENCE.md

@@ -2,7 +2,9 @@
 
 > Always read `.ai/ai_ref_[Name].md` for full props/events/slots before generating code for a component. Prefer `Ab*` components over external libraries.
 
-**Peer deps**: `vue`, `bootstrap`, `bootstrap-icons`, `vee-validate`, `@vee-validate/rules`, `vue-router`, `vue-toastification`, `vue3-gettext`, `lucide-vue-next`, `darkmode-js`, `tiny-emitter`, `@appsbd/vue3-elite-grid`
+**Peer deps**: `vue`, `bootstrap`, `bootstrap-icons`, `vee-validate`, `@vee-validate/rules`, `vue-router`, `vue-toastification`, `vue3-gettext`, `@lucide/vue`, `darkmode-js`, `tiny-emitter`, `@appsbd/vue3-elite-grid`
+
+**Version history**: see [CHANGELOG.md](./CHANGELOG.md) for release-by-release notes.
 
 ## Components & APIs
 

package/CHANGELOG.md

@@ -0,0 +1,73 @@
+# Changelog
+
+All notable changes to `@appsbd/vue3-appsbd-ui` are documented here. Format loosely follows [Keep a Changelog](https://keepachangelog.com/).
+
+## [Unreleased] (1.0.11)
+
+- **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.
+- **Added**: `AbFilterPanel` multi-variant support and documentation.
+
+## [1.0.10] - 2026-07-20
+
+- **Added**: `AbInputField` component with interactive playground documentation.
+
+## [1.0.9] - 2026-07-19
+
+- **Added**: `AbSideMenuItem` component.
+- **Added**: `AbButton` and `AbPopover` components with playground test cases.
+- **Added**: `AbSidebar` component with multiple CSS color skin themes.
+- **Added**: Universal `AbField` component supporting multiple input types, sidebars, and custom themes.
+- **Added**: RTL support for `AbMainLayout` and `AbSidebar`.
+- **Docs**: AI reference documentation for form components.
+
+## [1.0.8] - 2026-06-28
+
+- **Added**: `AbFilterPanel`, `AbInputField`, and `AbCustomField` components with documentation and styling.
+
+## [1.0.7] - 2026-05-18
+
+- **Fixed**: Gradient colors for all theme skins, default loader for the global loader option, response message updates, main layout padding-bottom issue.
+- **Chore**: Tracked `package-lock.json` for Vercel CI compatibility.
+
+## [1.0.6] - 2026-05-17
+
+- **Added**: `AbBaseAlert`, `AbConfirmPopover`, and `AbFileUploader` components.
+- **Added**: `AbModal` component with playground documentation.
+- **Added**: `AbMainLayout` component with sidebar support.
+- **Added**: `AbSettingsForm` form-wrapper component.
+- **Added**: `abVeeRules` localized VeeValidate rule library.
+- **Added**: Themeable CSS skins.
+- **CI**: GitHub Actions workflow for automated npm publishing.
+
+## [1.0.5] - 2026-05-17
+
+- **Added**: `AbToggle`, `AbResponseMsg`, `AbCard`, and `AbButton` components with full documentation.
+- **Added**: Theme-based CSS skin system.
+- **CI**: CI/CD configuration for the playground.
+
+## [1.0.4] - 2026-05-12
+
+- **Added**: Comprehensive AI documentation reference files for all UI components and internal utilities.
+- **Added**: `AbCard` and `AbChart` components.
+- **Added**: Global configuration documentation and test page.
+- **Docs**: Migration guide for legacy Admin Panel components.
+
+## [1.0.3] - 2026-05-03
+
+- **Added**: Library modules exported via `index.js`.
+- **Docs**: Comprehensive AI documentation for components and composables.
+
+## [1.0.1] - 2026-04-30
+
+- **Added**: Core component set — `AbDarkModeToggler`, `AbMultiSelect`, `AbInputTag`, `AbField`, `AbFilterPanel`, `AbSidebar`, `AbPricingCard`, `AbModal`, `AbNumberField`, `AbInputField`, `AbTabs`, `AbWizard`, `AbConfirmPopover`, `AbScrollbar`, `AbToast`, `AbDateTimePicker`, `AbColorPicker`, `AbProgressbar`.
+- **Added**: Modular multi-theme skin system (10 color themes) with runtime switching and dark mode support.
+- **Added**: RTL layout support.
+- **Docs**: `AI_REFERENCE.md` and per-component `.ai/ai_ref_*.md` reference files.
+- **Docs**: Playground documentation site with live examples for every component.
+
+> `1.0.2` was never published.
+
+## [1.0.0] - 2026-02-16
+
+- Initial project setup and foundational component library scaffolding.

package/design-system.md

@@ -265,7 +265,7 @@ Flat by default. Shadows are reserved for cards, dropdowns, popovers, and elevat
 
 ## 7. Iconography
 
-**Library: [Lucide Icons](https://lucide.dev/)** — installed as the `lucide-vue-next` peer dependency. Bootstrap Icons is also a peer dep and may be used for a few legacy components.
+**Library: [Lucide Icons](https://lucide.dev/)** — installed as the `@lucide/vue` peer dependency. Bootstrap Icons is also a peer dep and may be used for a few legacy components.
 
 ### Sizing