@appsbd/vue3-appsbd-ui 1.0.17 → 1.0.18

package/.ai/ai_ref_AbFilterPanel.md

@@ -4,7 +4,7 @@ Advanced filter panel for list and table views. Supports quick/advance modes, si
 
 `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.
 
-`isBuilderFilter` is a Shopify-style filter builder: no field is visible until the user clicks the `+` button. That opens a popover which first lists every not-yet-applied `filterOptions` entry by `name`; picking one swaps the same popover to a value editor matching that field's `type` (`dd`→`AbMultiSelect`, `t`→`AbInputField`, `tr`→min/max inputs, `d`/`dr`→`AbDateTimePicker`) plus Cancel/Apply Filter buttons. Apply pushes it in as a removable chip (e.g. "Email contains gmail") and immediately fires `searchFilter` — there's no global Search button in this mode, only Reset (clears every applied chip and value at once). A field's `operators` is fixed by its schema entry, same as other modes — this mode does not add an is/is-not/contains operator picker, only the value input changes per `type`.
+`isBuilderFilter` is a Shopify-style filter builder: no field is visible until the user clicks the `+` button. That opens a popover which first lists every not-yet-applied `filterOptions` entry by `name`; picking one swaps the same popover to a value editor matching that field's `type` (`dd`→`AbMultiSelect`, `t`→`AbInputField`, `tr`→min/max inputs, `d`/`dr`→`AbDateTimePicker`) plus Cancel/Apply Filter buttons. A `"t"` (plain text/number) field also applies on `Enter` in its input — same no-op-when-empty guard as clicking Apply Filter. Apply pushes it in as a removable chip (e.g. "Email : gmail" — see `builderChipSeparator` slot below). By default (`isBuilderAutoSearch: false`), a global Search button is shown so search fires only on clicking Search, and Reset clears all applied chips. When `isBuilderAutoSearch: true`, every Apply and chip removal immediately fires `searchFilter` without showing a Search button. A field's `operators` is fixed by its schema entry, same as other modes — this mode does not add an is/is-not/contains operator picker, only the value input changes per `type`.
 
 Standard-search, advance-search, and quick-advance field layouts are all plain flex (`d-flex flex-wrap gap-2`) — no Bootstrap grid. Each field grows/shrinks on its own, which means a field left alone on the last row will stretch to fill the remaining row width; give a `filterOptions` entry a `width`, `minWidth`, and/or `maxWidth` key (`String | Number` — a number is px, e.g. `maxWidth: 280`, or a CSS string like `"50%"`) to control that specific field's size. All three are forwarded straight to the underlying `AbInputField`/`AbMultiSelect`/`AbDateTimePicker`'s own same-named props, and also constrain that field's flex-item wrapper directly (`width` sets `flex: 0 0 <width>` so it stops growing/shrinking; `minWidth`/`maxWidth` clamp it while it keeps growing/shrinking with its siblings).
 
@@ -44,6 +44,7 @@ function handleSearch(data) {
 | `isAdvance`                | `Boolean` | `false`         | Show all filters in an expanded layout.                    |
 | `isQuickAdvance`           | `Boolean` | `false`         | Quick advance mode.                                        |
 | `isBuilderFilter`          | `Boolean` | `false`         | Shopify-style "+" add-filter builder — see mode description above. |
+| `isBuilderAutoSearch`      | `Boolean` | `false`         | In `isBuilderFilter` mode, automatically fire `searchFilter` on Apply/Remove chip (no Search button). Default is `false` (shows Search button). |
 | `isSingle`                 | `Boolean` | `false`         | Single-field search mode.                                  |
 | `isAutoSearch`             | `Boolean` | `false`         | Auto search on input change (single mode).                 |
 | `isAllowed`                | `Boolean` | `false`         | Permission flag consumed by the template.                  |
@@ -73,9 +74,11 @@ function handleSearch(data) {
 
 ## Slots
 
-| Name      | Description     |
-| --------- | --------------- |
-| `prefix`  | Filter prefix.  |
-| `postfix` | Filter postfix. |
-| `icon`    | Filter icon.    |
-| `hints`   | Helper text.    |
+| Name                   | Description     |
+| ---------------------- | --------------- |
+| `prefix`               | Filter prefix.  |
+| `postfix`               | Filter postfix. |
+| `icon`                 | Filter icon.    |
+| `hints`                | Helper text.    |
+| `builderChipSeparator` | `isBuilderFilter` mode only. Overrides the connector text rendered between an applied chip's field name and its value (e.g. "Email **:** gmail", "Revenue **:** 12 - 23" for `tr`/`dr` range fields). Receives `{ field }`. Default content is `:`. |
+| `builderAddLabel`      | `isBuilderFilter` mode only. Renders before the static `+` icon inside the "Add filter" button — use it to add a label next to the icon. Not scoped. Empty by default. |

package/.ai/ai_ref_AbMainLayout.md

@@ -83,7 +83,7 @@ On mobile, call `toggleLeftSidebar()` via the template ref to open/close the dra
 | `body` | — | Main scrollable content area. |
 | `bodyFooter` | — | Content rendered below the scrollable body area. |
 | `pageFooter` | — | Bottom footer bar. |
-| `rightSidebar` | — | Right sidebar panel. Only rendered when `isRightSidebarOpen` is `true`. |
+| `rightSidebar` | — | Right sidebar panel. Only rendered when `isRightSidebarOpen` is `true`; has no mobile/overlay treatment, so it's hidden entirely below `1199.98px` (Bootstrap's `xl` breakpoint). |
 
 ## Exposed methods
 

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to `@appsbd/vue3-appsbd-ui` are documented here. Format loosely follows [Keep a Changelog](https://keepachangelog.com/).
 
+## [1.0.18]
+
+- **Fixed**: `AbMainLayout`'s `.apbd-right-sidebar` had no responsive handling at all — unlike `.apbd-left-sidebar` (which becomes an absolute overlay drawer under `575.98px`), the right sidebar just stayed in the flex row at any viewport width, squeezing `.apbd-main-content` on tablet-size screens with no mobile/overlay treatment built for it. Now hidden entirely below `1199.98px` (Bootstrap's `xl` breakpoint).
+- **Added**: `AbFilterPanel` `#builderChipSeparator` slot (`isBuilderFilter` mode, scoped: `{ field }`) — overrides the connector rendered between an applied chip's field name and its value, for every field type. Previously this text auto-generated from the field's `operators` for most types (`"is"`, `"is not"`, `"contains"`, etc., via a hardcoded `BUILDER_OPERATOR_LABELS` map) while range (`tr`/`dr`) chips separately hardcoded "is between X and Y" — both are gone now. Chips default to a plain `:` connector, customizable per-field through this slot; range chips render their value as `start - end` (e.g. "Revenue : 12 - 23").
+- **Added**: `AbFilterPanel` `#builderAddLabel` slot (`isBuilderFilter` mode, not scoped) — renders before the static `+` icon inside the "Add filter" button, letting a consumer add a text label next to it. Empty by default (icon-only, unchanged from before).
+- **Added**: `AbFilterPanel` `isBuilderFilter` mode — a `"t"` (plain text/number) field's popup editor now also applies on `Enter`, not just by clicking Apply Filter. Same guard as the button (a no-op on an empty value); `"tr"`/`"dd"`/`"d"`/`"dr"` fields are unaffected.
+- **Fixed**: `AbFilterPanel`'s `.apbd-filter-tag-remove` (the `×` icon that removes a chip — used by both the quick-advance tag chips and `isBuilderFilter` chips) had no hover feedback at all, `color: inherit` on every state. Now transitions to the theme's danger red (`--#{$prefix}apbd-danger-color`) on hover/focus, signaling the removal action.
+
 ## [1.0.17]
 
 - **Fixed**: `AbFilterPanel`'s `isBuilderFilter` popup editor was too narrow (`max-width: 320px`, no `width`) for longer values like a `"dr"` (date range) field's `"01/09/2026 - 15/09/2026"`-style text, which got clipped inside its input. Raising just `max-width` didn't help on its own — `AbPopover`'s content box is `position: absolute; width: auto`, which sizes to shrink-to-fit, and a shrink-to-fit box ignores a percentage-width child (`AbInputField`'s `.form-control` is `width: 100%`) when computing that fit, so the box never actually grew to use the extra ceiling. Giving it an explicit `width` fixed that, but the first pass (`340px`) was tuned tight enough against one specific date pair that it broke again on a different one — Bengali numeral glyphs (০-৯) aren't uniform-width (e.g. "৪"/"৬" render wider than "১"), so a range using wider digits needed more room than the one used to size it. Now `width: 400px` (`min-width: 280px` / `max-width: 440px` as clamps) with real margin instead of a pixel-exact fit; the popover's own default 400px cap is also raised to 480px so it isn't clipped from outside.