@appsbd/vue3-appsbd-ui 1.0.17 → 1.0.19
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_AbBadge.md +8 -2
- package/.ai/ai_ref_AbButton.md +7 -2
- package/.ai/ai_ref_AbCard.md +28 -12
- package/.ai/ai_ref_AbConfirmPopover.md +16 -1
- package/.ai/ai_ref_AbField.md +27 -2
- package/.ai/ai_ref_AbFilterPanel.md +10 -7
- package/.ai/ai_ref_AbFormCheck.md +1 -1
- package/.ai/ai_ref_AbInputField.md +61 -2
- package/.ai/ai_ref_AbMainLayout.md +1 -1
- package/.ai/ai_ref_AbModal.md +6 -3
- package/.ai/ai_ref_AbNumberField.md +2 -0
- package/.ai/ai_ref_AbTabs.md +12 -2
- package/.ai/ai_ref_EliteGrid.md +212 -0
- package/.ai/ai_ref_migration_guide.md +10 -1
- package/.ai/ai_ref_useAlert.md +2 -0
- package/.ai/ai_ref_useToast.md +2 -0
- package/AI_REFERENCE.md +8 -7
- package/CHANGELOG.md +29 -0
- package/dist/style.css +1 -1
- package/dist/vue3-appsbd-ui.cjs.js +78 -73
- package/dist/vue3-appsbd-ui.es.js +9262 -9154
- package/package.json +1 -1
- package/skills/commands/generate-module.md +1 -1
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
# EliteGrid — AI Reference
|
|
2
|
+
|
|
3
|
+
> **External dependency, not developed in this library.** `EliteGrid` ships from the separate `@appsbd/vue3-elite-grid` package (peer dependency, `>=2.0.4`) — it is only *imported* and demonstrated here (`playground/components/EliteGridTest.vue`), not authored or maintained in this repo's `src/`. Prefer an `Ab*` component when one covers the need (see `AbTable` for a simpler, in-library data grid); reach for `EliteGrid` only for the advanced data-grid features below (grouping, subrows, card view, column chooser) that `AbTable` doesn't have.
|
|
4
|
+
>
|
|
5
|
+
> This file mirrors the package's own docs at <https://apps.inotise.com/projects/elite-grid-docs/> (EliteGrid v2.0) — re-check that site if behavior here seems stale, since this library does not control its release cycle.
|
|
6
|
+
|
|
7
|
+
A feature-rich, CSS-variable-themeable data grid: pagination, column sorting, row grouping, row checkboxes with selection tracking, an actions column, card-view responsive layout, and recursive subrow (tree-grid) expansion.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @appsbd/vue3-elite-grid
|
|
13
|
+
npm install vue3-gettext shvl
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Requires `vue3-gettext` and `shvl` as its own peer dependencies (separate from this library's). Import the CSS once (already done for you if only using it via this library's playground):
|
|
17
|
+
|
|
18
|
+
```js
|
|
19
|
+
import EliteGrid from '@appsbd/vue3-elite-grid';
|
|
20
|
+
import '@appsbd/vue3-elite-grid/dist/elite-grid.css';
|
|
21
|
+
// or, per the package's own docs: '@appsbd/vue3-elite-grid/elite-grid.css'
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
It is **not** globally registered by this library's `install()` — import and use it (or its `EliteColumnModel` helper) directly per-component, as `EliteGridTest.vue` does.
|
|
25
|
+
|
|
26
|
+
## Usage
|
|
27
|
+
|
|
28
|
+
```vue
|
|
29
|
+
<template>
|
|
30
|
+
<elite-grid
|
|
31
|
+
:grid-data="gridData"
|
|
32
|
+
:columns="columns"
|
|
33
|
+
:is-show-row-index-column="true"
|
|
34
|
+
:is-show-row-checkbox="true"
|
|
35
|
+
selected-prop="email"
|
|
36
|
+
:show-action-column="true"
|
|
37
|
+
action-width="100px"
|
|
38
|
+
@loadData="loadData"
|
|
39
|
+
@selectionChange="handleSelection"
|
|
40
|
+
>
|
|
41
|
+
<template #actionProperty="{ rowitem }">
|
|
42
|
+
<ab-button class="btn-xs btn-primary" @click="edit(rowitem)">Edit</ab-button>
|
|
43
|
+
</template>
|
|
44
|
+
</elite-grid>
|
|
45
|
+
</template>
|
|
46
|
+
|
|
47
|
+
<script setup>
|
|
48
|
+
import { ref } from 'vue';
|
|
49
|
+
import EliteGrid, { EliteColumnModel } from '@appsbd/vue3-elite-grid';
|
|
50
|
+
import '@appsbd/vue3-elite-grid/dist/elite-grid.css';
|
|
51
|
+
|
|
52
|
+
const gridData = ref({ page: 1, total: 1, records: 0, limit: 10, rowdata: [] });
|
|
53
|
+
|
|
54
|
+
const columns = [
|
|
55
|
+
EliteColumnModel.getColumn({ name: 'name', title: 'Name' }),
|
|
56
|
+
EliteColumnModel.getColumn({ name: 'email', title: 'Email', align: 'center' }),
|
|
57
|
+
];
|
|
58
|
+
|
|
59
|
+
function loadData({ page, limit }) {
|
|
60
|
+
// fetch page/limit worth of rows, then assign to gridData.value.rowdata (+ total/records)
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function handleSelection(selectedRows) {
|
|
64
|
+
// selectedRows: values of each selected row's `selected-prop` field (or full row objects if unset)
|
|
65
|
+
}
|
|
66
|
+
</script>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Grouping (any column with `is_group_by: true`) and recursive subtrees (`subrow-prop` + `subrow-icon-column`) are opt-in via column config / props — see the three worked variants in `playground/components/EliteGridTest.vue` (Default, Group By, Subtree).
|
|
70
|
+
|
|
71
|
+
## Props
|
|
72
|
+
|
|
73
|
+
| Name | Type | Default | Description |
|
|
74
|
+
| --- | --- | --- | --- |
|
|
75
|
+
| `gridData` | `Object` | `{ page:1, total:1, records:0, limit:0, rowdata:[] }` | Main data object: pagination state + row array. |
|
|
76
|
+
| `columns` | `Array` | `[]` | Column definitions, each built via `EliteColumnModel.getColumn()` (see below). |
|
|
77
|
+
| `showHeader` | `Boolean` | `false` | Show the grid header slot area (`#slot-header`). |
|
|
78
|
+
| `isRounded` | `Boolean` | `true` | Rounded corners on the grid container. |
|
|
79
|
+
| `showLoader` | `Boolean` | `false` | Show a loading overlay (content via `#slot-loader`). |
|
|
80
|
+
| `showActionColumn` | `Boolean` | `false` | Show a rightmost actions column. |
|
|
81
|
+
| `actionTitle` | `String` | `"Action"` | Actions column header text. |
|
|
82
|
+
| `actionWidth` | `String` | `""` | CSS width for the actions column. |
|
|
83
|
+
| `isShowRowIndexColumn` | `Boolean` | `true` | Show the row index column (1, 2, 3…). |
|
|
84
|
+
| `isShowRowCheckbox` | `Boolean` | `false` | Show a checkbox selection column. |
|
|
85
|
+
| `checkboxClass` | `String` | `""` | CSS class applied to every checkbox. |
|
|
86
|
+
| `selectedProp` | `String` | `""` | Row property used as each selected row's value (e.g. `"id"`); omit to get full row objects in `selectionChange`. |
|
|
87
|
+
| `getRowClass` | `Function` | `(row, i) => ""` | Returns a CSS class string per row. |
|
|
88
|
+
| `oddColor` | `String` | `"inherit"` | Odd row background color. |
|
|
89
|
+
| `evenColor` | `String` | `"inherit"` | Even row background color. |
|
|
90
|
+
| `hoverColor` | `String` | `"#fbfbfb"` | Row hover background color. |
|
|
91
|
+
| `hidePagination` | `Boolean` | `false` | Hide the entire pagination bar. |
|
|
92
|
+
| `hidePageList` | `Boolean` | `false` | Hide the page-number buttons. |
|
|
93
|
+
| `hideRecordInfo` | `Boolean` | `false` | Hide the "Viewing X to Y of Z" text. |
|
|
94
|
+
| `hideLimitSelector` | `Boolean` | `false` | Hide the rows-per-page dropdown. |
|
|
95
|
+
| `limitList` | `Array` | `[10,20,50,100,200]` | Rows-per-page options. |
|
|
96
|
+
| `paginationLength` | `Number` | `5` | Max page-number buttons shown at once. |
|
|
97
|
+
| `paginationPosition` | `String` | `"right"` | `"right"` or `"left"` alignment for the pagination bar. |
|
|
98
|
+
| `isGroupSeparateHead` | `Boolean` | `false` | Repeat the header row inside every group (used with `is_group_by`). |
|
|
99
|
+
| `isCardView` | `Boolean` | `false` | Render rows as cards instead of a table. |
|
|
100
|
+
| `cardColumn` | `Number \| Array` | `3` | Card columns; an array is responsive `[xs,sm,md,lg,xl,xxl]`. |
|
|
101
|
+
| `cardItemBorderRadius` | `String` | — | Border radius for card items (card view only; e.g. `"8px"`). |
|
|
102
|
+
| `cardItemGap` | `String` | — | Gap between card items (card view only; e.g. `"20px"`). |
|
|
103
|
+
| `subrowProp` | `String` | `""` | Row property holding a nested children array (enables tree-grid subrows). |
|
|
104
|
+
| `subrowIconColumn` | `String` | `""` | Column name that renders the expand/collapse chevron icon. |
|
|
105
|
+
| `subrowDefaultExpanded` | `Boolean` | `false` | Expand every subrow by default, globally. |
|
|
106
|
+
| `subrowExpandProp` | `String` | — | Row property to read/persist a row's own expanded state (per-row override of the global default). |
|
|
107
|
+
|
|
108
|
+
## Events
|
|
109
|
+
|
|
110
|
+
| Event | Payload | Description |
|
|
111
|
+
| --- | --- | --- |
|
|
112
|
+
| `loadData` | `{ page, limit, sort_prop, sort_ord }` | Fired when new data is needed — pagination change or column sort. Fetch that page/limit (and apply sort) and assign the result into `gridData`. |
|
|
113
|
+
| `columnStatusChange` | `col` (column object) | Fired when a column's visibility is toggled via the built-in column-chooser (⚙ icon in the index header). |
|
|
114
|
+
| `selectionChange` | `selectedRows` (Array) | Fired when checkbox selection changes — array of `selectedProp` values, or full row objects if `selectedProp` is unset. |
|
|
115
|
+
|
|
116
|
+
## Slots
|
|
117
|
+
|
|
118
|
+
| Name | Scope | Description |
|
|
119
|
+
| --- | --- | --- |
|
|
120
|
+
| `#slot{col.name}` (e.g. `#slotEmail`) | `{ rowitem, index, col, val }` | Custom cell renderer for a given column. |
|
|
121
|
+
| `#header-{col.name}` | `{ col }` | Custom header cell for a given column. |
|
|
122
|
+
| `#actionProperty` | `{ rowitem, index }` | Actions column content per row (only with `show-action-column`). |
|
|
123
|
+
| `#slot-header` | — | Grid header/toolbar area (requires `show-header`). |
|
|
124
|
+
| `#slot-loader` | — | Custom loading-overlay content (requires `show-loader`). |
|
|
125
|
+
| `#slot-no-record` | — | Custom "no records" message. |
|
|
126
|
+
| `#subrow-icon` | `{ isExpanded, rowitem }` | Custom expand/collapse icon (with `subrow-prop`). |
|
|
127
|
+
| `#groupTitle` | `{ groupitem }` | Custom group header content (with `is_group_by` columns). |
|
|
128
|
+
| `#eg_pg-status` | `{ startRecord, endRecord, totalRecord }` | Custom pagination status text (replaces "Viewing X to Y of Z"). |
|
|
129
|
+
| `#card-item` | `{ item, itemColumns }` | Override an entire card (card view only). |
|
|
130
|
+
|
|
131
|
+
Column/header slots also receive a deeply-injected **`toggle-subrow()`** method and **`is-subrow-expanded`** prop, letting you build your own manual expand/collapse trigger inside any column slot instead of relying on `subrow-icon-column`.
|
|
132
|
+
|
|
133
|
+
## Column Model — `EliteColumnModel.getColumn(options)`
|
|
134
|
+
|
|
135
|
+
```js
|
|
136
|
+
import { EliteColumnModel } from '@appsbd/vue3-elite-grid';
|
|
137
|
+
|
|
138
|
+
const columns = [
|
|
139
|
+
EliteColumnModel.getColumn({ name: 'id', title: 'ID', width: '50px' }),
|
|
140
|
+
EliteColumnModel.getColumn({ name: 'name', title: 'Name', is_sortable: true }),
|
|
141
|
+
EliteColumnModel.getColumn({ name: 'address.city', title: 'City', is_group_by: true }),
|
|
142
|
+
];
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
| Property | Type | Default | Description |
|
|
146
|
+
| --- | --- | --- | --- |
|
|
147
|
+
| `name` | `String` | `""` | Data key; supports dot notation for nested values (e.g. `"address.city"`). |
|
|
148
|
+
| `title` | `String` | `""` | Column header label. |
|
|
149
|
+
| `align` | `String` | `"left"` | Cell content alignment: `"left"`, `"center"`, `"right"`. |
|
|
150
|
+
| `title_align` | `String` | `"left"` | Header alignment: `"left"`, `"center"`, `"right"`. |
|
|
151
|
+
| `width` | `String` | `null` | CSS width (e.g. `"50px"`, `"20%"`). |
|
|
152
|
+
| `hidden_in` | `Array` | `[]` | Hide this column at these breakpoints: `["xs","sm","md","lg","xl","xxl"]`. |
|
|
153
|
+
| `default_show` | `Boolean` | `true` | Visible by default; toggleable later via the built-in column chooser. |
|
|
154
|
+
| `is_sortable` | `Boolean` | `false` | Enable click-to-sort on this column's header (cycles asc → desc → none, fires `loadData` with `sort_prop`/`sort_ord`). |
|
|
155
|
+
| `sort_order` | `String` | `"asc"` | Initial sort direction: `"asc"` or `"desc"`. |
|
|
156
|
+
| `is_group_by` | `Boolean` | `false` | Use this column as the row-grouping key (pairs with `is-group-separate-head`). |
|
|
157
|
+
| `tooltip` | `String` | `""` | Tooltip text shown next to the column header. |
|
|
158
|
+
|
|
159
|
+
## Exposed methods
|
|
160
|
+
|
|
161
|
+
| Method | Description |
|
|
162
|
+
| --- | --- |
|
|
163
|
+
| `clearSelection()` | Clears the current checkbox selection. Call via a template ref, e.g. `this.$refs.myGrid.clearSelection()`. |
|
|
164
|
+
|
|
165
|
+
## CSS Variables
|
|
166
|
+
|
|
167
|
+
Theme the grid by overriding these on `:root` or a parent wrapper — no `Ab*` design tokens apply here, it's a fully separate `--eg-*` variable set.
|
|
168
|
+
|
|
169
|
+
| Variable | Default | Category |
|
|
170
|
+
| --- | --- | --- |
|
|
171
|
+
| `--eg-font-family` | `Inter, sans-serif, Arial` | Typography |
|
|
172
|
+
| `--eg-font-style` | `normal` | Typography |
|
|
173
|
+
| `--eg-font-weight` | `500` | Typography |
|
|
174
|
+
| `--eg-font-size` | `12px` | Typography |
|
|
175
|
+
| `--eg-margin` | `0px -7px` | Typography |
|
|
176
|
+
| `--eg-bg` | `#fff` | Backgrounds |
|
|
177
|
+
| `--eg-hover-bg` | `#fbfbfb` | Backgrounds |
|
|
178
|
+
| `--eg-loader-bg` | `rgba(0, 0, 0, 0.65)` | Backgrounds |
|
|
179
|
+
| `--eg-row-odd-color` | `inherit` | Backgrounds |
|
|
180
|
+
| `--eg-row-even-color` | `inherit` | Backgrounds |
|
|
181
|
+
| `--eg-primary-color` | `#3b82f6` | Core Colors |
|
|
182
|
+
| `--eg-text-color` | `#374151` | Core Colors |
|
|
183
|
+
| `--eg-no-record-color` | `#cf0c0c` | Core Colors |
|
|
184
|
+
| `--eg-cell-header-color` | `#f9fafc` | Table |
|
|
185
|
+
| `--eg-row-group-title-color` | `#41444b` | Table |
|
|
186
|
+
| `--eg-cell-index-color` | `#7f848d` | Table |
|
|
187
|
+
| `--eg-header-tooltip` | `#9f641b` | Table |
|
|
188
|
+
| `--eg-cell-padding` | `5px` | Table |
|
|
189
|
+
| `--eg-border-radius` | `5px` | Borders |
|
|
190
|
+
| `--eg-table-border-color` | `#e2e8f0` | Borders |
|
|
191
|
+
| `--eg-pg-border-color` | `#ccc` | Pagination |
|
|
192
|
+
| `--eg-pg-btn-bg` | `#3e44cc` | Pagination |
|
|
193
|
+
| `--eg-pg-btn-color` | `#fff` | Pagination |
|
|
194
|
+
| `--eg-pg-shodow-color` | `#ccc` | Pagination |
|
|
195
|
+
| `--eg-pg-btn-action-size` | `40px` | Pagination |
|
|
196
|
+
| `--eg-pg-btn-size` | `30px` | Pagination |
|
|
197
|
+
| `--eg-pg-margin-top` | `10px` | Pagination |
|
|
198
|
+
| `--eg-pg-margin-bottom` | `10px` | Pagination |
|
|
199
|
+
| `--eg-shodow-color` | `#3e3e3e` | Shadows |
|
|
200
|
+
| `--eg-shodow-rule` | `0px 3px 10px -7px var(--eg-shodow-color)` | Shadows |
|
|
201
|
+
| `--eg-dropdown-bg` | `#ffffff` | Popovers |
|
|
202
|
+
| `--eg-tooltip-bg` | `#333333` | Popovers |
|
|
203
|
+
| `--eg-tooltip-color` | `#ffffff` | Popovers |
|
|
204
|
+
| `--eg-card-column` | `3` | Card View |
|
|
205
|
+
| `--eg-card-column-radius` | `5px` | Card View |
|
|
206
|
+
| `--eg-card-column-gap` | `15px` | Card View |
|
|
207
|
+
| `--eg-card-container-margin` | `15px` | Card View |
|
|
208
|
+
|
|
209
|
+
## Notes
|
|
210
|
+
|
|
211
|
+
- Full worked examples (default table, `is_group_by` grouping, recursive `subrow-prop` subtree) live in `playground/components/EliteGridTest.vue`, importing `EliteGrid` and `EliteColumnModel` directly from `@appsbd/vue3-elite-grid`.
|
|
212
|
+
- Since this is an external package, its own version/CHANGELOG governs its API — this library's `CHANGELOG.md` only tracks changes to `Ab*` components and this playground's example usage, not `@appsbd/vue3-elite-grid` itself.
|
|
@@ -12,10 +12,19 @@
|
|
|
12
12
|
|
|
13
13
|
---
|
|
14
14
|
|
|
15
|
-
## [
|
|
15
|
+
## [1.0.19] - 2026-09-14
|
|
16
16
|
|
|
17
17
|
### ⚠️ Action Required — Breaking
|
|
18
18
|
|
|
19
|
+
- **`AbTabs`'s default nav design changed from pills to outline; `navClass` default changed from `"nav-pills"` to `""`.**
|
|
20
|
+
- Find: `<AbTabs ...>` usages with **no** `nav-class`/`navClass` prop at all (relying on the old implicit `"nav-pills"` default).
|
|
21
|
+
- Replace: add `variation="pills"` to keep the previous pill-shaped appearance. No change needed if the outline look is acceptable, or if `nav-class`/`navClass` was already being passed explicitly (that keeps working unchanged, though switching it to the new `variation` prop — e.g. `nav-class="nav-pills nav-xs"` → `variation="pills" nav-class="nav-xs"` — is recommended, see below).
|
|
22
|
+
- See [`.ai/ai_ref_AbTabs.md`](./ai_ref_AbTabs.md) for the full `variation` → class mapping.
|
|
23
|
+
|
|
24
|
+
- **`AbModal`'s `isModalVisible` prop removed.**
|
|
25
|
+
- Find: `isModalVisible` / `is-modal-visible` / `v-model:is-modal-visible` on `<AbModal>`.
|
|
26
|
+
- Replace: nothing to migrate functionally — the prop never actually controlled visibility (it was dead/unwired). Control visibility the way every existing usage in this library already does: wrap `<AbModal>` itself in `v-if="isOpen"` in the parent. Just remove the prop/binding if present.
|
|
27
|
+
|
|
19
28
|
- **`AbFilterPanel`'s standard-search and advance-search field layouts switched from a Bootstrap `.row`/`.col-*` grid to plain flex; `advanceContainerClass` default changed from `"col-6"` to `""`.**
|
|
20
29
|
- Find: `<AbFilterPanel ...>` usages in either default (standard) mode or `is-advance`/`isAdvance` mode that relied on the Bootstrap grid for field widths — either the default 2-columns-per-row layout, or an explicit `advance-container-class`/`advanceContainerClass` Bootstrap grid class (e.g. `"col-12 col-sm-6"`).
|
|
21
30
|
- Replace: nothing required to keep working — fields now lay out via flex (`flex: 1 1 240px`, wraps automatically), which also fixes long field labels getting clipped. A Bootstrap grid class passed to `advance-container-class` no longer has a `.row` ancestor to size against and should be replaced with either a plain width class/CSS, or the new `width` prop on the individual field component (`AbInputField`/`AbMultiSelect`/`AbDateTimePicker`) inside `filterOptions`.
|
package/.ai/ai_ref_useAlert.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Provides a procedural API to trigger modal alerts, notifications, and confirmations using the global `$alert` instance.
|
|
4
4
|
|
|
5
|
+
> This is backed internally by `AbBaseAlert`, a mount-only root the plugin's `install()` mounts once into `document.body` — it is **not** a named export of the package. `import { AbBaseAlert } from "vue3-appsbd-ui"` resolves to `undefined`. Always reach it through `useAlert()` (or the `$alert` global property) as shown below.
|
|
6
|
+
|
|
5
7
|
## Usage
|
|
6
8
|
|
|
7
9
|
```html
|
package/.ai/ai_ref_useToast.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Provides a procedural API to spawn toast notifications using the globally registered `$toast` instance.
|
|
4
4
|
|
|
5
|
+
> This is backed internally by `AbToast`, a mount-only root the plugin's `install()` mounts once into `document.body` — it is **not** a named export of the package. `import { AbToast } from "vue3-appsbd-ui"` resolves to `undefined`. Always reach it through `useToast()` (or the `$toast` global property) as shown below.
|
|
6
|
+
|
|
5
7
|
## Usage
|
|
6
8
|
|
|
7
9
|
```html
|
package/AI_REFERENCE.md
CHANGED
|
@@ -14,13 +14,13 @@
|
|
|
14
14
|
|
|
15
15
|
| Component / API | G | Purpose | Reference |
|
|
16
16
|
| :----------------------------- | :-: | :--------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- |
|
|
17
|
-
| `AbButton` | ✅ | Customizable push button with loader animation.
|
|
18
|
-
| `AbCard` | ✅ | Flexible card container
|
|
17
|
+
| `AbButton` | ✅ | Customizable push button with loader animation. Default `variant` is `"solid"`. | [.ai/ai_ref_AbButton.md](./.ai/ai_ref_AbButton.md) |
|
|
18
|
+
| `AbCard` | ✅ | Flexible card container. Default `variant` is `"default"`; also `"tile"`, `"item"`, `"insight"` layout variants. | [.ai/ai_ref_AbCard.md](./.ai/ai_ref_AbCard.md) |
|
|
19
19
|
| `AbModal` | ✅ | Full-featured dialog with built-in VeeValidate form, loader, and message-only mode. | [.ai/ai_ref_AbModal.md](./.ai/ai_ref_AbModal.md) |
|
|
20
20
|
| `AbProgressbar` | ✅ | Animated Bootstrap progress bar with color and size variants. | [.ai/ai_ref_AbProgressbar.md](./.ai/ai_ref_AbProgressbar.md) |
|
|
21
|
-
| `AbInputField` | ✅ | Core text input with VeeValidate, prefix/postfix/icon slots.
|
|
22
|
-
| `AbNumberField` | ✅ |
|
|
23
|
-
| `AbField` | ✅ | Polymorphic field wrapper - renders any input type via a `type` prop.
|
|
21
|
+
| `AbInputField` | ✅ | Core text input with VeeValidate, prefix/postfix/icon slots. `variant="stepper"` turns it into a numeric stepper (min/max/step, +/- buttons). | [.ai/ai_ref_AbInputField.md](./.ai/ai_ref_AbInputField.md) |
|
|
22
|
+
| `AbNumberField` | ✅ | **Deprecated** — thin wrapper around `AbInputField variant="stepper"`, kept for backward compatibility. Use `AbInputField variant="stepper"` in new code. | [.ai/ai_ref_AbNumberField.md](./.ai/ai_ref_AbNumberField.md) |
|
|
23
|
+
| `AbField` | ✅ | Polymorphic field wrapper - renders any input type via a `type` prop. `type="number"` + `variant="stepper"` renders `AbInputField`'s numeric stepper. | [.ai/ai_ref_AbField.md](./.ai/ai_ref_AbField.md) |
|
|
24
24
|
| `AbCustomField` | ✅ | Dynamic form scaffold driven by a `fieldInputs` array. | [.ai/ai_ref_AbCustomField.md](./.ai/ai_ref_AbCustomField.md) |
|
|
25
25
|
| `AbDateTimePicker` | ✅ | Date / time / range picker. Also import `v-calendar/style.css` in consuming app. | [.ai/ai_ref_AbDateTimePicker.md](./.ai/ai_ref_AbDateTimePicker.md) |
|
|
26
26
|
| `AbFormCheck` / `AbRadioInput` | ✅ | Checkbox / radio group (default, card, icon-card, card-flat-check, image-radio, segmented, pill variants). `AbRadioInput` is an alias of `AbFormCheck`. | [.ai/ai_ref_AbFormCheck.md](./.ai/ai_ref_AbFormCheck.md) |
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
| `AbEasyModal` | — | Lightweight modal wrapper that exposes `openModal` / `closeModal`. | [.ai/ai_ref_AbEasyModal.md](./.ai/ai_ref_AbEasyModal.md) |
|
|
33
33
|
| `AbPinInput` | — | Segmented PIN / OTP entry field. | [.ai/ai_ref_AbPinInput.md](./.ai/ai_ref_AbPinInput.md) |
|
|
34
34
|
| `AbAvatar` | — | Profile image (or file-upload avatar variant). | [.ai/ai_ref_AbAvatar.md](./.ai/ai_ref_AbAvatar.md) |
|
|
35
|
-
| `AbTabs` | — | Tabbed interface container; supports router-link mode.
|
|
35
|
+
| `AbTabs` | — | Tabbed interface container; supports router-link mode. Default `variation` is `"outline"`. | [.ai/ai_ref_AbTabs.md](./.ai/ai_ref_AbTabs.md) |
|
|
36
36
|
| `AbTab` | — | Individual tab pane / link. | [.ai/ai_ref_AbTab.md](./.ai/ai_ref_AbTab.md) |
|
|
37
37
|
| `AbImageRadioInput` | — | Image-based radio group for visual option pickers. | [.ai/ai_ref_AbImageRadioInput.md](./.ai/ai_ref_AbImageRadioInput.md) |
|
|
38
|
-
| `AbBadge` | — | Status / count label (Bootstrap badge utility).
|
|
38
|
+
| `AbBadge` | — | Status / count label (Bootstrap badge utility). Default `variant` is `"solid"`. | [.ai/ai_ref_AbBadge.md](./.ai/ai_ref_AbBadge.md) |
|
|
39
39
|
| `AbSidebar` | — | Collapsible sidebar navigation with optional search. | [.ai/ai_ref_AbSidebar.md](./.ai/ai_ref_AbSidebar.md) |
|
|
40
40
|
| `AbSideMenuItem` | — | Sidebar nav item (router-link, anchor, submenu parent, or section title). | [.ai/ai_ref_AbSideMenuItem.md](./.ai/ai_ref_AbSideMenuItem.md) |
|
|
41
41
|
| `AbMainLayout` | — | Full-page application shell with left/right sidebar drawers, header, body, and footer slots. Mobile-responsive. | [.ai/ai_ref_AbMainLayout.md](./.ai/ai_ref_AbMainLayout.md) |
|
|
@@ -63,6 +63,7 @@
|
|
|
63
63
|
| `AbChatBox` | — | Full chat conversation container (header, message list, empty/typing states) built on `AbChatInput`; every part is slot-overridable. | [.ai/ai_ref_AbChatBox.md](./.ai/ai_ref_AbChatBox.md) |
|
|
64
64
|
| `AbVoiceButton` | — | Standalone Web Speech API voice-to-text mic button (v-model), no composer attached — same engine as `AbChatInput`'s built-in mic. | [.ai/ai_ref_AbVoiceButton.md](./.ai/ai_ref_AbVoiceButton.md) |
|
|
65
65
|
| `AbDarkModeToggler` | — | Light / dark theme toggle (pairs with `useTheme`). | [.ai/ai_ref_AbDarkModeToggler.md](./.ai/ai_ref_AbDarkModeToggler.md) |
|
|
66
|
+
| `EliteGrid` | — | **External** (`@appsbd/vue3-elite-grid` peer dep, not developed in this library) — advanced data grid: sorting, grouping, subrows, card view, column chooser. Prefer `AbTable` unless you need these. | [.ai/ai_ref_EliteGrid.md](./.ai/ai_ref_EliteGrid.md) |
|
|
66
67
|
| `useAlert` | — | Procedural API to trigger SweetAlert-based modal alerts, notifications, and confirmations. | [.ai/ai_ref_useAlert.md](./.ai/ai_ref_useAlert.md) |
|
|
67
68
|
| `abEventBus` / `emitterObj` | — | Lightweight global event bus using `tiny-emitter`. | [.ai/ai_ref_abEventBus.md](./.ai/ai_ref_abEventBus.md) |
|
|
68
69
|
| `useTheme` | — | Composable for light/dark theme toggling with localStorage and system preference sync. | [.ai/ai_ref_useTheme.md](./.ai/ai_ref_useTheme.md) |
|
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,35 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to `@appsbd/vue3-appsbd-ui` are documented here. Format loosely follows [Keep a Changelog](https://keepachangelog.com/).
|
|
4
4
|
|
|
5
|
+
## [1.0.19] - 2026-09-14
|
|
6
|
+
|
|
7
|
+
- **Fixed**: `AbWizard`'s built-in Previous/Next/Finish navigation buttons (both the inline and modal footers) passed a Bootstrap-style single-token string (`variant="outline-secondary"`, `variant="primary"`, `variant="success"`) to `AbButton`, but `AbButton` has always split color and style into two separate props (`color` + `isOutline`/now `variant`) — `variant` wasn't even a real `AbButton` prop until this release, so these values were silently swallowed with zero visual effect and every nav button rendered as the plain default primary color regardless of intent (Previous never showed as outlined/secondary, Finish never showed as success-colored). Adding `AbButton`'s own `variant` prop (see below) would otherwise have turned this into a dev-console prop-validation warning instead of a silent no-op, so it's fixed now: these buttons pass `color`/`variant` correctly and finally render as originally intended (Previous: secondary outline; Next: primary; Finish: success). Same latent mismatch fixed in several playground docs examples (`CardTest.vue`, `CheckboxTest.vue`, `WizardTest.vue`, `TooltipPopoverTest.vue`, `App.vue`, `.ai/ai_ref_AbFormCheck.md`) that had the same `variant="success"`/`variant="danger"`/`variant="soft"` typo on `AbBadge`/`AbButton` usages.
|
|
8
|
+
- **Added**: `AbCard` `variant` prop (`String`, default `"default"`) — the card's alternate layouts (`tile-card`/`item-card`/`insight-card`) were previously reachable through three different half-mechanisms at once (the `isTileCard` boolean for tile, and the generic `containerClass`/`variation` string props for item/insight, which a consumer had to already know the literal class names for). `variant` (`"default"` | `"tile"` | `"item"` | `"insight"`) is now the single, consistent, documented way to pick one, generating the matching class automatically. `isTileCard`, `containerClass`, and `variation` all still work unchanged — no behavior change, and the default (`variant="default"`, i.e. a plain card) matches the existing default look exactly. This is also now the library's documented default: generate `AbCard` with its default (plain) variant unless a different one is requested.
|
|
9
|
+
- **Added**: `AbBadge` `variant` prop (`String`, default `"solid"`) — same generalization as `AbButton`'s new `variant` prop: the badge design was previously picked entirely through the `isOutline` boolean; `variant` (`"solid"` | `"outline"`) is now the consistent, documented way to switch it. `isOutline` still works unchanged (now a deprecated alias for `variant="outline"`) — no behavior change, and the default (`variant="solid"`, i.e. a plain filled badge) matches the existing default look exactly. This is also now the library's documented default: generate `AbBadge` with its solid variant unless a different one is requested.
|
|
10
|
+
- **Added**: `AbButton` `variant` prop (`String`, default `"solid"`) — the button design was previously picked entirely through the `isOutline` boolean; `variant` generalizes that into a design-variant switch (`"solid"` | `"outline"`) in the same style as `AbTabs`' new `variation` prop, so a consumer (or an AI assistant) reaches for one consistent prop name across components instead of a one-off boolean per component. `isOutline` still works unchanged (now a deprecated alias for `variant="outline"`) — no behavior change, and the default (`variant="solid"`, i.e. a plain filled button) matches the existing default look exactly. This is also now the library's documented default: generate `AbButton` with its solid variant unless a different one is requested.
|
|
11
|
+
- **Added** (breaking): `AbTabs` `variation` prop (`String`, default `"outline"`) — the nav design was previously picked entirely through raw `navClass` strings (`nav-pills`, `nav-underline`, `nav-bg-secondary`, `nav-outline`), which required a consumer (or an AI assistant) to already know those class names existed. `variation` now generates the base class automatically (e.g. `variation="pills"` → `nav-pills`), merged with anything still passed via `navClass` for modifiers (`nav-xs`/`nav-fill`/`nav-secondary`/`nav-vertical`, etc.); pass `variation=""` to opt out and drive `navClass` manually as before. **Breaking**: `navClass`'s own default changed from `"nav-pills"` to `""`, and the effective default nav design changed from pills to **outline** — a consumer relying on the old implicit `nav-pills` default with no explicit `navClass` now gets the outline look instead; pass `variation="pills"` to keep the old appearance. This is also now the library's documented default: generate `AbTabs` with its outline variation unless a different one is requested.
|
|
12
|
+
- **Added**: `AbInputField` `copyable` prop — renders a plain, borderless postfix button that copies the field's current value to the clipboard via the Clipboard API. The library previously had no copy-to-clipboard affordance anywhere — consumers needing "show a read-only value with a copy button" (e.g. a one-time download token, a permanent download URL) had to hand-roll it by composing `AbInputField` + `AbButton` + the raw Clipboard API themselves. There is no built-in confirmation UI: success/failure emits `copy-success`/`copy-error` with an already-translated message (`copySuccessMsg`/`copyErrorMsg` props), so a consumer wires up its own feedback (e.g. `useToast()`, shown in the playground's "Copyable" example) rather than the component forcing a toast dependency on everyone. Pair with a native `readonly` attribute (falls through via `$attrs`, no dedicated prop needed) for a display-only copyable field.
|
|
13
|
+
- **Docs**: Added `.ai/ai_ref_EliteGrid.md` — an AI reference for `EliteGrid` (from the external `@appsbd/vue3-elite-grid` peer dependency, only imported/demonstrated in `playground/components/EliteGridTest.vue`, not developed in this library), previously undocumented outside that playground example itself. Covers props, events, slots, the `EliteColumnModel.getColumn()` column config shape, exposed methods, and its `--eg-*` CSS variable theming API, sourced from the package's own docs site.
|
|
14
|
+
- **Docs**: `AbBaseAlert` and `AbToast` are internal mount-only roots (mounted into `document.body` by `install()`, reached only via `useAlert()`/`useToast()`) — neither was ever a named export, but both compile straight into the built bundle (pulled in by the plugins) and are easy to find by grepping the bundle or the source tree, with nothing warning that `import { AbToast } from "vue3-appsbd-ui"` silently resolves to `undefined`. `.ai/ai_ref_useAlert.md` and `.ai/ai_ref_useToast.md` now say so explicitly.
|
|
15
|
+
- **Docs**: `AbModal`'s `showMsgOnly(msg, isHideFooter?)` exposed method was documented as just "Switch to message-only mode", with no explanation of what `isHideFooter` does — easy to misread the boolean as an auto-close/auto-dismiss flag given the method name. Clarified in `.ai/ai_ref_AbModal.md`: it swaps the footer for a static "Close" button instead of the default/slotted one; there is no auto-dismiss, the modal stays open until the user clicks it (or the parent unmounts the modal). No behavior change.
|
|
16
|
+
- **Docs**: `AbInputField`'s `isCodeInput` prop was documented as "monospace / code-input styling" — it actually renders `.mega-input-field`, a small fixed-size (e.g. 64px at `md`) single-character box with huge bold centered text, the exact per-digit style `AbPinInput` uses for OTP/PIN boxes. Anyone reaching for it to display a token, API key, or URL got a box too narrow to show more than its first few characters, with the rest scrolled out of view. `.ai/ai_ref_AbInputField.md` and the playground's Props table now describe it accurately — it's a single-digit PIN box, not a monospace/code-display style, and `maxlength="1"` is not set automatically. No behavior change.
|
|
17
|
+
- **Fixed**: `AbConfirmPopover`'s `onConfirm` prop — an async handler that resolved to nothing (the natural `async (itemData) => { await doWork(); }` shape, with no explicit return) fell through to the terminal "Completed successfully" alert panel instead of just closing, forcing an extra unwanted OK click even though the work had already finished; only an explicit `{ next: 'close' }` return closed it, and that contract was undocumented. Resolving to nothing (or `null`) now closes the popover directly, same as `{ next: 'close' }`. Returning `{ next: 'confirm' | 'confirm-ajax', ... }` (chain a second step) or any other truthy object like `{ status, message }` (show the success/error alert panel deliberately) behave exactly as before — see `.ai/ai_ref_AbConfirmPopover.md`'s new "onConfirm return contract" table.
|
|
18
|
+
- **Removed** (breaking): `AbModal`'s `isModalVisible` prop — it was never wired to anything in the component (no `v-if`/`v-show`/class toggle), so passing it had zero effect; the `.ai/ai_ref_AbModal.md` doc incorrectly documented it as `v-model:is-modal-visible`-capable. Visibility has always actually worked by mounting/unmounting `<AbModal>` itself with `v-if` in the parent (the pattern every existing usage in this library already uses) — that's unchanged.
|
|
19
|
+
|
|
20
|
+
## [1.0.18]
|
|
21
|
+
|
|
22
|
+
- **Fixed**: `AbColorPicker` rendered an empty box with no feedback when used with default props — `colors` defaults to `[]` and the component has no built-in palette (by design, same as `AbMultiSelect`'s `options`), so a first-time use without passing `colors` looked broken. Now warns in dev (`import.meta.env.DEV`, stripped from production builds) when `colors` is empty, pointing at the expected `{ name, color, title? }` shape.
|
|
23
|
+
- **Fixed**: Playground's `DocsToc` (the "On this page" sidebar) — clicking a section link called the target heading's native `scrollIntoView({ block: "start" })`, which walks up *every* scrollable ancestor, including `.apbd-container`/`.apbd-main-content` (`overflow: hidden` — still a valid scroll container by spec even with no visible scrollbar). That silently scrolled those too, shifting the whole app shell (page header, left sidebar) up and clipping it out of view behind their own `overflow: hidden`, while the doc content itself scrolled correctly — most noticeable on longer pages like Color Picker's "Sizes" section. Now scrolls only the actual doc scroll container (`.apbd-app-body`) directly via `scrollTo()`, matching the pattern already used by the TOC's own "Back to top" button.
|
|
24
|
+
- **Fixed**: `AbColorPicker`'s selected-state check mark was hard-coded to `rgba(255, 255, 255, 0.65)`, invisible against a white or light-grey swatch — a text-color palette almost always has one, so selecting it gave no visual feedback at all. The checked swatch now also gets a two-tone outline ring (`box-shadow`, themeable via `--#{$prefix}apbd-cp-checked-color`, falling back to `--bs-primary`) independent of swatch color, and the check mark itself uses `mix-blend-mode: difference` so it inverts against whatever color sits behind it — visible on both light and dark swatches.
|
|
25
|
+
- **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).
|
|
26
|
+
- **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").
|
|
27
|
+
- **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).
|
|
28
|
+
- **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.
|
|
29
|
+
- **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.
|
|
30
|
+
- **Added**: `AbInputField` `variant="stepper"` prop — turns the field into a numeric stepper: forces `type="number"`, renders minus/plus buttons, and adds `min`/`max`/`step`/`showButtons`/`isBorder` props for range clamping and layout, matching what `AbNumberField` did on its own. Lets the numeric-stepper look/behavior live on the same component as every other input variant (password, icon, prefix/postfix) instead of a separate SFC.
|
|
31
|
+
- **Changed**: `AbNumberField` is now a thin deprecated wrapper around `AbInputField` with `variant="stepper"` — its own props/events/slots and rendered output are unchanged, so existing usage keeps working with no code changes needed. Prefer `<AbInputField variant="stepper" />` directly in new code.
|
|
32
|
+
- **Added**: `AbField` `variant`, `min`, `step`, `showButtons`, and `isBorder` props (`type="number"` only) — forwarded straight through to `AbInputField`, so `<AbField type="number" variant="stepper" />` now gets the same numeric-stepper behavior (min/max/step clamping, +/- buttons) as using `AbInputField` directly. `type="number"` without `variant` still renders a plain native number input, unchanged. `AbField`'s existing `max` prop (selection limit for multiselect/tag/checkbox, `-1` = unlimited) is reused as the stepper's numeric ceiling for `type="number"` too — `-1`/unset is treated as "no ceiling" there as well, so no default-value change for existing usage.
|
|
33
|
+
|
|
5
34
|
## [1.0.17]
|
|
6
35
|
|
|
7
36
|
- **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.
|