@adyen/bento-mcp 0.5.4 → 0.7.0

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.
Files changed (53) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +7 -6
  3. package/bin/add-skill.js +12 -1
  4. package/dist/assets/components/anchor-scroller/anchor-scroller.vue +1 -1
  5. package/dist/assets/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.types.ts +1 -1
  6. package/dist/assets/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue +1 -1
  7. package/dist/assets/components/button/button.docs.mdx +24 -0
  8. package/dist/assets/components/button/button.vue +1 -1
  9. package/dist/assets/components/button/components/button-actions/button-actions.docs.mdx +14 -1
  10. package/dist/assets/components/data-grid/data-grid.stories.ts +1 -1
  11. package/dist/assets/components/date-range-picker/date-range-picker.vue +1 -1
  12. package/dist/assets/components/draggable/components/draggable-handle/draggable-handle.vue +1 -1
  13. package/dist/assets/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue +1 -1
  14. package/dist/assets/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue +1 -1
  15. package/dist/assets/components/dropdown/dropdown.docs.mdx +58 -0
  16. package/dist/assets/components/dropdown/dropdown.stories.ts +1 -1
  17. package/dist/assets/components/dropdown/dropdown.vue +1 -1
  18. package/dist/assets/components/filter-bar/components/filter-bar-button/filter-bar-button.vue +1 -1
  19. package/dist/assets/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.vue +1 -1
  20. package/dist/assets/components/filter-bar/components/range-filter/range-filter.types.ts +1 -0
  21. package/dist/assets/components/filter-bar/components/range-filter/range-filter.vue +1 -1
  22. package/dist/assets/components/filter-bar/filter-bar.docs.mdx +74 -1
  23. package/dist/assets/components/filter-bar/filter-bar.stories.ts +1 -1
  24. package/dist/assets/components/filter-bar/filter-bar.types.ts +1 -1
  25. package/dist/assets/components/filter-bar/filter-bar.vue +1 -1
  26. package/dist/assets/components/header/header.docs.mdx +8 -0
  27. package/dist/assets/components/header-with-views/header-with-views.docs.mdx +12 -0
  28. package/dist/assets/components/input-field/input-field.vue +1 -1
  29. package/dist/assets/components/internal/listbox/components/listbox-lazy-load/listbox-lazy-load.types.ts +1 -0
  30. package/dist/assets/components/internal/listbox/components/listbox-lazy-load/listbox-lazy-load.vue +1 -0
  31. package/dist/assets/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/components/listbox-multi-select-category/listbox-multi-select-category.vue +1 -1
  32. package/dist/assets/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/components/listbox-multi-select-nested-lazy-load/listbox-multi-select-nested-lazy-load.types.ts +1 -0
  33. package/dist/assets/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/components/listbox-multi-select-nested-lazy-load/listbox-multi-select-nested-lazy-load.vue +1 -0
  34. package/dist/assets/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/listbox-multi-select-options.vue +1 -1
  35. package/dist/assets/components/internal/listbox/components/listbox-multi-select/listbox-multi-select.vue +1 -1
  36. package/dist/assets/components/internal/listbox/components/listbox-single-select/listbox-single-select.vue +1 -1
  37. package/dist/assets/components/internal/listbox/listbox.vue +1 -1
  38. package/dist/assets/components/table-of-contents/components/table-of-contents-list/table-of-contents-list.types.ts +1 -0
  39. package/dist/assets/components/table-of-contents/components/table-of-contents-list/table-of-contents-list.vue +1 -0
  40. package/dist/assets/components/table-of-contents/table-of-contents.docs.mdx +34 -0
  41. package/dist/assets/components/table-of-contents/table-of-contents.stories.ts +1 -0
  42. package/dist/assets/components/table-of-contents/table-of-contents.types.ts +1 -0
  43. package/dist/assets/components/table-of-contents/table-of-contents.vue +1 -0
  44. package/dist/assets/components/toast/toast.docs.mdx +7 -0
  45. package/dist/assets/components.json +1 -0
  46. package/dist/assets/composables/use-numeric-input/use-numeric-input.types.ts +1 -0
  47. package/dist/assets/composables/use-section-navigation-keyboard/use-section-navigation-keyboard.types.ts +1 -0
  48. package/dist/assets/deprecations.md +1586 -136
  49. package/dist/assets/index.ts +1 -1
  50. package/dist/assets/usage.json +80 -79
  51. package/dist/assets/utils/ts/scroll-to-section/scroll-to-section.types.ts +1 -0
  52. package/dist/main.js +1 -1
  53. package/package.json +1 -1
@@ -6,6 +6,14 @@ This file contains a list of all deprecated components, properties, and features
6
6
 
7
7
  ### Deprecation Found
8
8
 
9
+ - string) {
10
+ - ../vue2/src/utils/ts/deprecate.ts- // If the message is already showing, dont show it again
11
+ - ../vue2/src/utils/ts/deprecate.ts- if (!shownMessages.has(title)) {
12
+ - \x1b[0m ${title}`, DEPRECATION_STYLES);
13
+ - ../vue2/src/utils/ts/deprecate.ts- // Format multi-line descriptions with the backtick
14
+ - ../vue2/src/utils/ts/deprecate.ts- printDevelopmentWarning(`${deprecationMessage.replaceAll( , ).trim()}`);
15
+ ### Deprecation Found
16
+
9
17
  - deprecate(TITLE, MESSAGE, VERSION);
10
18
  - ../vue2/src/utils/ts/deprecate.test.ts-
11
19
  - ../vue2/src/utils/ts/deprecate.test.ts- expect(warnSpy).toHaveBeenCalledTimes(EXPECTED_CALLS.length);
@@ -36,14 +44,6 @@ This file contains a list of all deprecated components, properties, and features
36
44
  - ../vue2/src/utils/ts/deprecate.test.ts- EXPECTED_CALLS[0]
37
45
  ### Deprecation Found
38
46
 
39
- - string) {
40
- - ../vue2/src/utils/ts/deprecate.ts- // If the message is already showing, dont show it again
41
- - ../vue2/src/utils/ts/deprecate.ts- if (!shownMessages.has(title)) {
42
- - \x1b[0m ${title}`, DEPRECATION_STYLES);
43
- - ../vue2/src/utils/ts/deprecate.ts- // Format multi-line descriptions with the backtick
44
- - ../vue2/src/utils/ts/deprecate.ts- printDevelopmentWarning(`${deprecationMessage.replaceAll( , ).trim()}`);
45
- ### Deprecation Found
46
-
47
47
  - deprecate(
48
48
  - ../vue2/src/install.ts- Using default setting withDesignTokensCSSInjection set to true in BentoVue plugin
49
49
  - //adyen-bento.netlify.app/?path=/docs/welcome-getting-started--docs#import-css-variables
@@ -61,83 +61,11 @@ This file contains a list of all deprecated components, properties, and features
61
61
  ### Deprecation Found
62
62
 
63
63
  - deprecate(
64
- - ../vue2/src/components/modal/modal.vue- BentoModal overflow-visible property
65
- - ../vue2/src/components/modal/modal.vue- `overflow-visible property was made redundant. BentoModal can work correctly without the need to pass the propery.
66
- - ../vue2/src/components/modal/modal.vue- Remove the overflow-visible prop from BentoModal to remove this error.`
67
- - ../vue2/src/components/modal/modal.vue- 2.0.0
68
- - ../vue2/src/components/modal/modal.vue- );
69
- ### Deprecation Found
70
-
71
- - deprecate(
72
- - ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue- Boolean filter BentoFilterItemType.BOOLEAN
73
- - ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue- `Use the Radio group filter type BentoFilterItemType.RADIO_GROUP instead.`
74
- - ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue- 2.0.0
75
- - ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue- );
76
- - ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue- });
77
- ### Deprecation Found
78
-
79
- - deprecate(
80
- - ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue- BentoInputFilter options property
81
- - ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue- `BentoInputFilter options no longer supports dropdown, dropdownPosition or variant attributes.
82
- - ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue- Use the BentoFilterItemType.INPUT_DROPDOWN instead of BentoFilterItemType.INPUT
83
- - ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue- <bento-filter-bar
84
- - config=[{
85
- ### Deprecation Found
86
-
87
- - deprecate(
88
- - ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue- BentoFilterBar filter of type BentoFilterItemType.SELECT options message property
89
- - ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue- `Please remove the options.messages property from this filter, it is not required any more for persistent filters.
90
- - ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue- This will be the default behavior in the v2 and options.messages will be removed.`
91
- - ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue- 2.0.0
92
- - ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue- );
93
- ### Deprecation Found
94
-
95
- - deprecate(
96
- - ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue- BentoSelectCountryFilter type with `options.variant===custom`
97
- - ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue- Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels
98
- - ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue- 2.0.0
99
- - ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue- );
100
- - ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue- }
101
- ### Deprecation Found
102
-
103
- - deprecate(
104
- - ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue- BentoInputFieldPhoneNumber value property
105
- - ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue- `The use of value prop in BentoInputFieldPhoneNumber is no longer supported.
106
- - ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue- Use the v-model or model-value property instead.`
107
- - ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue- 2.0.0
108
- - ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue- );
109
- ### Deprecation Found
110
-
111
- - deprecate(
112
- - ../vue2/src/components/input-field-password/input-field-password.vue- BentoInputFieldPassword value property
113
- - ../vue2/src/components/input-field-password/input-field-password.vue- `The use of value prop in BentoInputFieldPassword is no longer supported.
114
- - ../vue2/src/components/input-field-password/input-field-password.vue- Use the v-model or model-value property instead.`
115
- - ../vue2/src/components/input-field-password/input-field-password.vue- 2.0.0
116
- - ../vue2/src/components/input-field-password/input-field-password.vue- );
117
- ### Deprecation Found
118
-
119
- - deprecate(
120
- - ../vue2/src/components/card/card.vue- BentoCard @click property
121
- - ../vue2/src/components/card/card.vue- `Use the BentoCard @click with the clickable property to enable accessible styles.`
122
- - ../vue2/src/components/card/card.vue- 2.0.0
123
- - ../vue2/src/components/card/card.vue- );
124
- - ../vue2/src/components/card/card.vue- }
125
- ### Deprecation Found
126
-
127
- - deprecate(
128
- - ../vue2/src/components/date-picker/date-picker.vue- BentoDatePicker value property
129
- - ../vue2/src/components/date-picker/date-picker.vue- `The use of value prop in BentoDatePicker is no longer supported. Use the v-model or model-value property instead.`
130
- - ../vue2/src/components/date-picker/date-picker.vue- 2.0.0
131
- - ../vue2/src/components/date-picker/date-picker.vue- );
132
- - ../vue2/src/components/date-picker/date-picker.vue- }
133
- ### Deprecation Found
134
-
135
- - deprecate(
136
- - ../vue2/src/components/typography/typography.vue- BentoTypography subtitle variant (BentoTypographyVariant.SUBTITLE)
137
- - ../vue2/src/components/typography/typography.vue- `Use the title or BentoTypographyVariant.TITLE variant and (optionally) combine it with a size property. e.g. medium / large.
138
- - variant=BentoTypographyVariant.TITLE medium>`
139
- - ../vue2/src/components/typography/typography.vue- 2.0.0
140
- - ../vue2/src/components/typography/typography.vue- );
64
+ - ../vue2/src/components/country/country.vue- BentoCountry custom variant and label prop
65
+ - ../vue2/src/components/country/country.vue- Use any of the other BentoCountry variants instead OR BentoTypography component for custom text
66
+ - ../vue2/src/components/country/country.vue- 2.0.0
67
+ - ../vue2/src/components/country/country.vue- );
68
+ - ../vue2/src/components/country/country.vue- }
141
69
  ### Deprecation Found
142
70
 
143
71
  - deprecate(
@@ -162,14 +90,6 @@ This file contains a list of all deprecated components, properties, and features
162
90
  - ../vue2/src/components/dropdown/dropdown.vue- );
163
91
  ### Deprecation Found
164
92
 
165
- - deprecate(
166
- - ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue- BentoDropdownPaymentMethod value property
167
- - ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue- `The use of value prop in BentoDropdownPaymentMethod is no longer supported.
168
- - ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue- Use the v-model or model-value property instead.`
169
- - ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue- 2.0.0
170
- - ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue- );
171
- ### Deprecation Found
172
-
173
93
  - deprecate(
174
94
  - ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue- BentoDropdownAvatar value property
175
95
  - ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue- `The use of value prop in BentoDropdownAvatar is no longer supported.
@@ -178,6 +98,14 @@ This file contains a list of all deprecated components, properties, and features
178
98
  - ../vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue- );
179
99
  ### Deprecation Found
180
100
 
101
+ - deprecate(
102
+ - ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue- BentoDropdownPaymentMethod value property
103
+ - ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue- `The use of value prop in BentoDropdownPaymentMethod is no longer supported.
104
+ - ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue- Use the v-model or model-value property instead.`
105
+ - ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue- 2.0.0
106
+ - ../vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue- );
107
+ ### Deprecation Found
108
+
181
109
  - deprecate(
182
110
  - ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue- BentoDropdownTag value property
183
111
  - ../vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue- `The use of value prop in BentoDropdownTag is no longer supported.
@@ -210,6 +138,38 @@ This file contains a list of all deprecated components, properties, and features
210
138
  - ../vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue- );
211
139
  ### Deprecation Found
212
140
 
141
+ - deprecate(
142
+ - ../vue2/src/components/date-range-picker/date-range-picker.vue- BentoDateRangePicker hasActions property
143
+ - ../vue2/src/components/date-range-picker/date-range-picker.vue- `Set the BentoDateRangePicker hasActions property true which will display the Apply and Cancel buttons.
144
+ - ../vue2/src/components/date-range-picker/date-range-picker.vue- This will be the default behavior in the v2 and hasActions will be removed.`
145
+ - ../vue2/src/components/date-range-picker/date-range-picker.vue- 2.0.0
146
+ - ../vue2/src/components/date-range-picker/date-range-picker.vue- );
147
+ ### Deprecation Found
148
+
149
+ - deprecate(
150
+ - ../vue2/src/components/date-range-picker/date-range-picker.vue- BentoDateRangePicker value property
151
+ - ../vue2/src/components/date-range-picker/date-range-picker.vue- The use of value prop in BentoDateRangePicker is no longer supported. Use the v-model or model-value property instead.
152
+ - ../vue2/src/components/date-range-picker/date-range-picker.vue- 2.0.0
153
+ - ../vue2/src/components/date-range-picker/date-range-picker.vue- );
154
+ - ../vue2/src/components/date-range-picker/date-range-picker.vue- }
155
+ ### Deprecation Found
156
+
157
+ - deprecate(
158
+ - ../vue2/src/components/currency/currency.vue- BentoCurrency default slot
159
+ - ../vue2/src/components/currency/currency.vue- `The use of default slot in BentoCurrency is no longer supported as it causes issues with dynamic content.
160
+ - ../vue2/src/components/currency/currency.vue- Use the value property instead.
161
+ - value=12345.67 currency=USD major-units=false />`
162
+ - ../vue2/src/components/currency/currency.vue- 2.0.0
163
+ ### Deprecation Found
164
+
165
+ - deprecate(
166
+ - ../vue2/src/components/date-picker/date-picker.vue- BentoDatePicker value property
167
+ - ../vue2/src/components/date-picker/date-picker.vue- `The use of value prop in BentoDatePicker is no longer supported. Use the v-model or model-value property instead.`
168
+ - ../vue2/src/components/date-picker/date-picker.vue- 2.0.0
169
+ - ../vue2/src/components/date-picker/date-picker.vue- );
170
+ - ../vue2/src/components/date-picker/date-picker.vue- }
171
+ ### Deprecation Found
172
+
213
173
  - deprecate(
214
174
  - string | Array<string> | File | Array<File>
215
175
  - ../vue2/src/components/file-uploader/file-uploader.vue- Use FileList instead.
@@ -219,11 +179,27 @@ This file contains a list of all deprecated components, properties, and features
219
179
  ### Deprecation Found
220
180
 
221
181
  - deprecate(
222
- - ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue- BentoTimelineItem variant property
223
- - ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue- `Use the BentoTimelineItem status modifier instead to modify the color of the timeline icon.
224
- - ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue- <bento-timeline-item status=red />`
225
- - ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue- 2.0.0
226
- - ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue- );
182
+ - ../vue2/src/components/typography/typography.vue- BentoTypography subtitle variant (BentoTypographyVariant.SUBTITLE)
183
+ - ../vue2/src/components/typography/typography.vue- `Use the title or BentoTypographyVariant.TITLE variant and (optionally) combine it with a size property. e.g. medium / large.
184
+ - variant=BentoTypographyVariant.TITLE medium>`
185
+ - ../vue2/src/components/typography/typography.vue- 2.0.0
186
+ - ../vue2/src/components/typography/typography.vue- );
187
+ ### Deprecation Found
188
+
189
+ - deprecate(
190
+ - ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue- BentoCheckboxGroup hasError property
191
+ - ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue- `Use the BentoCheckboxGroup errorMessage property instead to indicate that there is a modifier error.
192
+ - ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue- Having the field as undefined will hide/remove the error.
193
+ - ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue- <bento-checkbox-group errorMessage=Error message text />`
194
+ - ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue- 2.0.0
195
+ ### Deprecation Found
196
+
197
+ - deprecate(
198
+ - ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue- BentoInputFieldPhoneNumber value property
199
+ - ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue- `The use of value prop in BentoInputFieldPhoneNumber is no longer supported.
200
+ - ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue- Use the v-model or model-value property instead.`
201
+ - ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue- 2.0.0
202
+ - ../vue2/src/components/input-field-phone-number/input-field-phone-number.vue- );
227
203
  ### Deprecation Found
228
204
 
229
205
  - deprecate(
@@ -259,19 +235,27 @@ This file contains a list of all deprecated components, properties, and features
259
235
  ### Deprecation Found
260
236
 
261
237
  - deprecate(
262
- - ../vue2/src/components/textarea/textarea.vue- BentoTextarea value property
263
- - ../vue2/src/components/textarea/textarea.vue- `The use of value prop in BentoTextarea is no longer supported.
264
- - ../vue2/src/components/textarea/textarea.vue- Use the v-model or model-value property instead.`
265
- - ../vue2/src/components/textarea/textarea.vue- 2.0.0
266
- - ../vue2/src/components/textarea/textarea.vue- );
238
+ - ../vue2/src/components/modal/modal.vue- BentoModal overflow-visible property
239
+ - ../vue2/src/components/modal/modal.vue- `overflow-visible property was made redundant. BentoModal can work correctly without the need to pass the propery.
240
+ - ../vue2/src/components/modal/modal.vue- Remove the overflow-visible prop from BentoModal to remove this error.`
241
+ - ../vue2/src/components/modal/modal.vue- 2.0.0
242
+ - ../vue2/src/components/modal/modal.vue- );
267
243
  ### Deprecation Found
268
244
 
269
245
  - deprecate(
270
- - ../vue2/src/components/country/country.vue- BentoCountry custom variant and label prop
271
- - ../vue2/src/components/country/country.vue- Use any of the other BentoCountry variants instead OR BentoTypography component for custom text
272
- - ../vue2/src/components/country/country.vue- 2.0.0
273
- - ../vue2/src/components/country/country.vue- );
274
- - ../vue2/src/components/country/country.vue- }
246
+ - ../vue2/src/components/input-field-password/input-field-password.vue- BentoInputFieldPassword value property
247
+ - ../vue2/src/components/input-field-password/input-field-password.vue- `The use of value prop in BentoInputFieldPassword is no longer supported.
248
+ - ../vue2/src/components/input-field-password/input-field-password.vue- Use the v-model or model-value property instead.`
249
+ - ../vue2/src/components/input-field-password/input-field-password.vue- 2.0.0
250
+ - ../vue2/src/components/input-field-password/input-field-password.vue- );
251
+ ### Deprecation Found
252
+
253
+ - deprecate(
254
+ - ../vue2/src/components/card/card.vue- BentoCard @click property
255
+ - ../vue2/src/components/card/card.vue- `Use the BentoCard @click with the clickable property to enable accessible styles.`
256
+ - ../vue2/src/components/card/card.vue- 2.0.0
257
+ - ../vue2/src/components/card/card.vue- );
258
+ - ../vue2/src/components/card/card.vue- }
275
259
  ### Deprecation Found
276
260
 
277
261
  - deprecate(
@@ -282,14 +266,6 @@ This file contains a list of all deprecated components, properties, and features
282
266
  - ../vue2/src/components/radio-group/radio-group.vue- 2.0.0
283
267
  ### Deprecation Found
284
268
 
285
- - deprecate(
286
- - ../vue2/src/components/currency/currency.vue- BentoCurrency default slot
287
- - ../vue2/src/components/currency/currency.vue- `The use of default slot in BentoCurrency is no longer supported as it causes issues with dynamic content.
288
- - ../vue2/src/components/currency/currency.vue- Use the value property instead.
289
- - value=12345.67 currency=USD major-units=false />`
290
- - ../vue2/src/components/currency/currency.vue- 2.0.0
291
- ### Deprecation Found
292
-
293
269
  - deprecate(
294
270
  - The property \`label\` will always be rendered by default.`
295
271
  - ../vue2/src/components/internal/controls-group/controls-group.vue- `After version 2.0.0, the label will be shown by default.
@@ -299,32 +275,1506 @@ This file contains a list of all deprecated components, properties, and features
299
275
  ### Deprecation Found
300
276
 
301
277
  - deprecate(
302
- - ../vue2/src/components/date-range-picker/date-range-picker.vue- BentoDateRangePicker hasActions property
303
- - ../vue2/src/components/date-range-picker/date-range-picker.vue- `Set the BentoDateRangePicker hasActions property true which will display the Apply and Cancel buttons.
304
- - ../vue2/src/components/date-range-picker/date-range-picker.vue- This will be the default behavior in the v2 and hasActions will be removed.`
305
- - ../vue2/src/components/date-range-picker/date-range-picker.vue- 2.0.0
306
- - ../vue2/src/components/date-range-picker/date-range-picker.vue- );
278
+ - ../vue2/src/components/sidepanel/sidepanel.vue- BentoSidepanel isDismissible property’s behavior
279
+ - ../vue2/src/components/sidepanel/sidepanel.vue- BentoSidepanel isDismissible will no longer hide the close button. Use hideCloseButton=true instead.
280
+ - ../vue2/src/components/sidepanel/sidepanel.vue- 2.0.0
281
+ - ../vue2/src/components/sidepanel/sidepanel.vue- );
282
+ - ../vue2/src/components/sidepanel/sidepanel.vue- }
307
283
  ### Deprecation Found
308
284
 
309
285
  - deprecate(
310
- - ../vue2/src/components/date-range-picker/date-range-picker.vue- BentoDateRangePicker value property
311
- - ../vue2/src/components/date-range-picker/date-range-picker.vue- The use of value prop in BentoDateRangePicker is no longer supported. Use the v-model or model-value property instead.
312
- - ../vue2/src/components/date-range-picker/date-range-picker.vue- 2.0.0
313
- - ../vue2/src/components/date-range-picker/date-range-picker.vue- );
314
- - ../vue2/src/components/date-range-picker/date-range-picker.vue- }
286
+ - ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue- BentoTimelineItem variant property
287
+ - ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue- `Use the BentoTimelineItem status modifier instead to modify the color of the timeline icon.
288
+ - ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue- <bento-timeline-item status=red />`
289
+ - ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue- 2.0.0
290
+ - ../vue2/src/components/timeline/components/timeline-item/timeline-item.vue- );
315
291
  ### Deprecation Found
316
292
 
317
293
  - deprecate(
318
- - ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue- BentoCheckboxGroup hasError property
319
- - ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue- `Use the BentoCheckboxGroup errorMessage property instead to indicate that there is a modifier error.
320
- - ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue- Having the field as undefined will hide/remove the error.
321
- - ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue- <bento-checkbox-group errorMessage=Error message text />`
322
- - ../vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue- 2.0.0
294
+ - ../vue2/src/components/textarea/textarea.vue- BentoTextarea value property
295
+ - ../vue2/src/components/textarea/textarea.vue- `The use of value prop in BentoTextarea is no longer supported.
296
+ - ../vue2/src/components/textarea/textarea.vue- Use the v-model or model-value property instead.`
297
+ - ../vue2/src/components/textarea/textarea.vue- 2.0.0
298
+ - ../vue2/src/components/textarea/textarea.vue- );
323
299
  ### Deprecation Found
324
300
 
325
301
  - deprecate(
326
- - ../vue2/src/components/sidepanel/sidepanel.vue- BentoSidepanel isDismissible property’s behavior
327
- - ../vue2/src/components/sidepanel/sidepanel.vue- BentoSidepanel isDismissible will no longer hide the close button. Use hideCloseButton=true instead.
328
- - ../vue2/src/components/sidepanel/sidepanel.vue- 2.0.0
329
- - ../vue2/src/components/sidepanel/sidepanel.vue- );
330
- - ../vue2/src/components/sidepanel/sidepanel.vue- }
302
+ - ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue- BentoFilterBar filter of type BentoFilterItemType.SELECT options message property
303
+ - ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue- `Please remove the options.messages property from this filter, it is not required any more for persistent filters.
304
+ - ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue- This will be the default behavior in the v2 and options.messages will be removed.`
305
+ - ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue- 2.0.0
306
+ - ../vue2/src/components/filter-bar/components/select-filter/select-filter.vue- );
307
+ ### Deprecation Found
308
+
309
+ - deprecate(
310
+ - ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue- BentoSelectCountryFilter type with `options.variant===custom`
311
+ - ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue- Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels
312
+ - ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue- 2.0.0
313
+ - ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue- );
314
+ - ../vue2/src/components/filter-bar/components/select-filter/variants/select-country-filter/select-country-filter.vue- }
315
+ ### Deprecation Found
316
+
317
+ - deprecate(
318
+ - ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue- Boolean filter BentoFilterItemType.BOOLEAN
319
+ - ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue- `Use the Radio group filter type BentoFilterItemType.RADIO_GROUP instead.`
320
+ - ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue- 2.0.0
321
+ - ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue- );
322
+ - ../vue2/src/components/filter-bar/components/boolean-filter/boolean-filter.vue- });
323
+ ### Deprecation Found
324
+
325
+ - deprecate(
326
+ - ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue- BentoInputFilter options property
327
+ - ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue- `BentoInputFilter options no longer supports dropdown, dropdownPosition or variant attributes.
328
+ - ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue- Use the BentoFilterItemType.INPUT_DROPDOWN instead of BentoFilterItemType.INPUT
329
+ - ../vue2/src/components/filter-bar/components/input-filter/input-filter.vue- <bento-filter-bar
330
+ - config=[{
331
+
332
+ ---
333
+
334
+ # ESLint Deprecation Rules — Migration Guides
335
+
336
+ The following sections are extracted from the ESLint deprecation rule documentation.
337
+ Each rule includes affected components, migration examples, and correct replacements.
338
+
339
+ ---
340
+
341
+ # deprecation-bento-data-grid-cell-action-menu-item-handler
342
+
343
+ ## Description
344
+
345
+ The `handler` property on `BentoColumnCellActionMenuItem` objects (used in `menuData` arrays) is deprecated since
346
+ v2.0.0. Use `event` instead, which receives `(rowDataItem, columnKey)` parameters providing context about which row and
347
+ column triggered the action.
348
+
349
+ ## Options
350
+
351
+ | Option | Type | Default | Description |
352
+ | :------------ | :-------- | :------ | :------------------- |
353
+ | **`autofix`** | `boolean` | `false` | Enables auto-fixing. |
354
+
355
+ ## Rule Details
356
+
357
+ This rule detects `handler` properties on objects inside `menuData` arrays, both in `<template>` expressions and
358
+ `<script>` blocks.
359
+
360
+ ### ❌ Incorrect
361
+
362
+ ```javascript
363
+ const cellActions = [
364
+ {
365
+ menuData: [
366
+ {
367
+ text: 'Cancel payment',
368
+ handler: () => cancelPayment(),
369
+ },
370
+ ],
371
+ },
372
+ ];
373
+ ```
374
+
375
+ ### ✅ Correct
376
+
377
+ ```javascript
378
+ const cellActions = [
379
+ {
380
+ menuData: [
381
+ {
382
+ text: 'Cancel payment',
383
+ event: (rowDataItem, columnKey) => cancelPayment(rowDataItem),
384
+ },
385
+ ],
386
+ },
387
+ ];
388
+ ```
389
+
390
+ ---
391
+
392
+ # deprecation-bento-date-range-picker-has-actions-prop
393
+
394
+ ## Description
395
+
396
+ Manages the **temporary** `has-actions` prop on `bento-date-range-picker`.
397
+
398
+ The `has-actions` prop is a temporary opt-in flag for the new actions behavior. This rule helps teams adopt it during
399
+ the transition period, and later remove it once the behavior becomes the default.
400
+
401
+ ## Options
402
+
403
+ | Option | Type | Default | Description |
404
+ | :------------ | :-------------------- | :------ | :------------------------------------------------------------- |
405
+ | **`action`** | `'add'` \| `'remove'` | `'add'` | `add` reports missing `has-actions`. `remove` reports present. |
406
+ | **`autofix`** | `boolean` | `false` | Enables auto-fixing. |
407
+
408
+ ## Rule Details
409
+
410
+ ### Action: `add` (default)
411
+
412
+ Reports `bento-date-range-picker` instances that are **missing** the `has-actions` prop.
413
+
414
+ #### ❌ Incorrect
415
+
416
+ ```html
417
+ <bento-date-range-picker label="Pick" />
418
+ ```
419
+
420
+ #### ✅ Correct
421
+
422
+ ```html
423
+ <bento-date-range-picker has-actions label="Pick" />
424
+ ```
425
+
426
+ ### Action: `remove`
427
+
428
+ Reports `bento-date-range-picker` instances that **have** the `has-actions` prop, so it can be cleaned up once the
429
+ behavior becomes permanent.
430
+
431
+ #### ❌ Incorrect
432
+
433
+ ```html
434
+ <bento-date-range-picker has-actions label="Pick" />
435
+ ```
436
+
437
+ #### ✅ Correct
438
+
439
+ ```html
440
+ <bento-date-range-picker label="Pick" />
441
+ ```
442
+
443
+ ---
444
+
445
+ # deprecation-bento-dropdown-size-prop
446
+
447
+ ## Description
448
+
449
+ The `size` prop in the following components is deprecated:
450
+
451
+ - `bento-dropdown`
452
+
453
+ Only the `default` size is supported. Remove the `size` prop entirely.
454
+
455
+ ## Rule Details
456
+
457
+ This rule reports usages of the deprecated `size` prop.
458
+
459
+ ### ❌ Incorrect
460
+
461
+ ```html
462
+ <bento-dropdown size="small" /> <bento-dropdown :size="BentoDropdownSize.SMALL" />
463
+ ```
464
+
465
+ ### ✅ Correct
466
+
467
+ ```html
468
+ <bento-dropdown />
469
+ ```
470
+
471
+ ---
472
+
473
+ # deprecation-bento-popover-modifiers-prop
474
+
475
+ ## Description
476
+
477
+ The `modifiers` prop in the following components is deprecated:
478
+
479
+ - `bento-popover`
480
+
481
+ ## Rule Details
482
+
483
+ This rule reports usages of the deprecated item.
484
+
485
+ ### ❌ Incorrect
486
+
487
+ ```html
488
+ <bento-popover modifiers="value" /> <bento-popover :modifiers="value" />
489
+ ```
490
+
491
+ ### ✅ Correct
492
+
493
+ ```html
494
+ <bento-popover />
495
+ ```
496
+
497
+ ---
498
+
499
+ # deprecation-bento-timeline-item-variant-prop
500
+
501
+ ## Description
502
+
503
+ The `variant` prop in `bento-timeline-item` is deprecated. Use `status` instead.
504
+
505
+ The `variant` prop accepted `BentoTimelineItemVariant` enum values (icon names), while `status` accepts color strings.
506
+ The autofix remaps values automatically:
507
+
508
+ | `variant` value | `status` value |
509
+ | ------------------------------- | -------------- |
510
+ | `SquareSmallIcon` / `DEFAULT` | `black` |
511
+ | `CheckedCircleIcon` / `SUCCESS` | `green` |
512
+ | `CrossCircleIcon` / `CRITICAL` | `red` |
513
+
514
+ > **Note:** If the variant value cannot be statically resolved (e.g. a variable reference), the autofix is skipped and
515
+ > only the deprecation warning is reported.
516
+
517
+ ## Rule Details
518
+
519
+ This rule reports usages of the deprecated `variant` prop and autofixes it to `status` with the correct color value.
520
+
521
+ ### ❌ Incorrect
522
+
523
+ ```html
524
+ <bento-timeline-item variant="CheckedCircleIcon" /> <bento-timeline-item :variant="BentoTimelineItemVariant.CRITICAL" />
525
+ ```
526
+
527
+ ### ✅ Correct
528
+
529
+ ```html
530
+ <bento-timeline-item status="green" /> <bento-timeline-item status="red" />
531
+ ```
532
+
533
+ ---
534
+
535
+ # deprecation-components-aria-label-prop
536
+
537
+ ## Description
538
+
539
+ The `ariaLabel` prop in the following components is deprecated:
540
+
541
+ - `bento-dropdown`
542
+ - `bento-input-field`
543
+ - `bento-pagination`
544
+ - `bento-popover`
545
+ - `bento-segmented-control`
546
+
547
+ Please use `aria-label` instead.
548
+
549
+ ## Rule Details
550
+
551
+ This rule reports usages of the deprecated `ariaLabel` prop (camelCase). The replacement `aria-label` is the native HTML
552
+ attribute, which the components already pick up via `attrs['aria-label']`.
553
+
554
+ ### ❌ Incorrect
555
+
556
+ ```html
557
+ <bento-dropdown ariaLabel="value" /> <bento-dropdown :ariaLabel="value" />
558
+ ```
559
+
560
+ ```html
561
+ <bento-input-field ariaLabel="value" /> <bento-input-field :ariaLabel="value" />
562
+ ```
563
+
564
+ ```html
565
+ <bento-pagination ariaLabel="value" /> <bento-pagination :ariaLabel="value" />
566
+ ```
567
+
568
+ ```html
569
+ <bento-popover ariaLabel="value" /> <bento-popover :ariaLabel="value" />
570
+ ```
571
+
572
+ ```html
573
+ <bento-segmented-control ariaLabel="value" /> <bento-segmented-control :ariaLabel="value" />
574
+ ```
575
+
576
+ ### ✅ Correct
577
+
578
+ ```html
579
+ <bento-dropdown aria-label="value" />
580
+ ```
581
+
582
+ ```html
583
+ <bento-input-field aria-label="value" />
584
+ ```
585
+
586
+ ```html
587
+ <bento-pagination aria-label="value" />
588
+ ```
589
+
590
+ ```html
591
+ <bento-popover aria-label="value" />
592
+ ```
593
+
594
+ ```html
595
+ <bento-segmented-control aria-label="value" />
596
+ ```
597
+
598
+ ---
599
+
600
+ # deprecation-components-error-prop
601
+
602
+ ## Description
603
+
604
+ The `error` prop in the following components is deprecated:
605
+
606
+ - `bento-dropdown`
607
+ - `bento-input-field`
608
+ - `bento-input-field-phone-number`
609
+
610
+ Please use `error-message` instead.
611
+
612
+ > **Note:** The `error` prop is a `boolean` that only toggles error styling, while `error-message` is a `string` that
613
+ > both displays a message and applies error styling. A direct rename is not type-safe — you must also update the bound
614
+ > value from a boolean to an error message string.
615
+
616
+ | Deprecated prop | Replacement prop | Type change |
617
+ | --------------- | ---------------- | -------------------- |
618
+ | `error` | `error-message` | `boolean` → `string` |
619
+
620
+ ## Rule Details
621
+
622
+ This rule reports usages of the deprecated `error` prop and provides an IDE suggestion (not an autofix) to rename it.
623
+
624
+ ### ❌ Incorrect
625
+
626
+ ```html
627
+ <!-- Static boolean -->
628
+ <bento-dropdown :error="true" :items="items" label="Country" />
629
+
630
+ <!-- Dynamic binding -->
631
+ <bento-dropdown :error="hasError" :items="items" label="Country" />
632
+ ```
633
+
634
+ ```html
635
+ <bento-input-field :error="true" label="Email" />
636
+
637
+ <bento-input-field :error="hasError" label="Email" />
638
+ ```
639
+
640
+ ```html
641
+ <bento-input-field-phone-number :error="true" label="Phone number" />
642
+
643
+ <bento-input-field-phone-number :error="hasError" label="Phone number" />
644
+ ```
645
+
646
+ ### ✅ Correct
647
+
648
+ ```html
649
+ <!-- Static error message -->
650
+ <bento-dropdown error-message="Please select a country" :items="items" label="Country" />
651
+
652
+ <!-- Dynamic error message driven by validation -->
653
+ <bento-dropdown :error-message="errorMessage" :items="items" label="Country" />
654
+ ```
655
+
656
+ ```html
657
+ <bento-input-field error-message="Enter a valid email address" label="Email" />
658
+
659
+ <bento-input-field :error-message="errorMessage" label="Email" />
660
+ ```
661
+
662
+ ```html
663
+ <bento-input-field-phone-number error-message="Enter a valid phone number" label="Phone number" />
664
+
665
+ <bento-input-field-phone-number :error-message="errorMessage" label="Phone number" />
666
+ ```
667
+
668
+ ## Migration Examples
669
+
670
+ ### Before — static boolean on `bento-dropdown`
671
+
672
+ ```html
673
+ <template>
674
+ <bento-dropdown :error="true" :items="items" label="Country" />
675
+ </template>
676
+ ```
677
+
678
+ ### After — static error message on `bento-dropdown`
679
+
680
+ ```html
681
+ <template>
682
+ <bento-dropdown error-message="Please select a country" :items="items" label="Country" />
683
+ </template>
684
+ ```
685
+
686
+ ### Before — dynamic validation on `bento-input-field`
687
+
688
+ ```html
689
+ <template>
690
+ <bento-input-field :error="hasError" v-model="email" label="Email" />
691
+ </template>
692
+
693
+ <script setup lang="ts">
694
+ const email = ref('');
695
+ const hasError = ref(false);
696
+
697
+ const validate = () => {
698
+ hasError.value = !email.value.includes('@');
699
+ };
700
+ </script>
701
+ ```
702
+
703
+ ### After — dynamic validation with error message on `bento-input-field`
704
+
705
+ ```html
706
+ <template>
707
+ <bento-input-field :error-message="errorMessage" v-model="email" label="Email" />
708
+ </template>
709
+
710
+ <script setup lang="ts">
711
+ const email = ref('');
712
+ const errorMessage = ref<string | null>(null);
713
+
714
+ const validate = () => {
715
+ errorMessage.value = !email.value.includes('@') ? 'Enter a valid email address' : null;
716
+ };
717
+ </script>
718
+ ```
719
+
720
+ ### Before — phone number validation
721
+
722
+ ```html
723
+ <template>
724
+ <bento-input-field-phone-number
725
+ :error="hasError"
726
+ v-model="phone"
727
+ :selected-country="country"
728
+ label="Phone number"
729
+ @input:valid="onValid"
730
+ @blur="validate"
731
+ />
732
+ </template>
733
+
734
+ <script setup lang="ts">
735
+ const phone = ref('');
736
+ const country = ref('US');
737
+ const hasError = ref(false);
738
+ const isValid = ref(false);
739
+
740
+ const onValid = (validity: boolean) => {
741
+ isValid.value = validity;
742
+ };
743
+
744
+ const validate = () => {
745
+ hasError.value = !isValid.value && !!phone.value;
746
+ };
747
+ </script>
748
+ ```
749
+
750
+ ### After — phone number validation with error message
751
+
752
+ ```html
753
+ <template>
754
+ <bento-input-field-phone-number
755
+ :error-message="errorMessage"
756
+ v-model="phone"
757
+ :selected-country="country"
758
+ label="Phone number"
759
+ @input:valid="onValid"
760
+ @blur="validate"
761
+ />
762
+ </template>
763
+
764
+ <script setup lang="ts">
765
+ const phone = ref('');
766
+ const country = ref('US');
767
+ const errorMessage = ref<string | null>(null);
768
+ const isValid = ref(false);
769
+
770
+ const onValid = (validity: boolean) => {
771
+ isValid.value = validity;
772
+ };
773
+
774
+ const validate = () => {
775
+ errorMessage.value = !isValid.value && !!phone.value ? 'Enter a valid phone number' : null;
776
+ };
777
+ </script>
778
+ ```
779
+
780
+ ---
781
+
782
+ # deprecation-components-has-error-prop
783
+
784
+ ## Description
785
+
786
+ The `hasError` prop in the following components is deprecated:
787
+
788
+ - `bento-checkbox-group`
789
+ - `bento-radio-group`
790
+
791
+ Please use `error-message` instead.
792
+
793
+ > **Note:** The `has-error` prop is a `boolean` that only toggles error styling, while `error-message` is a `string`
794
+ > that both displays a message and applies error styling. A direct rename is not type-safe — you must also update the
795
+ > bound value from a boolean to an error message string.
796
+
797
+ | Deprecated prop | Replacement prop | Type change |
798
+ | --------------- | ---------------- | -------------------- |
799
+ | `has-error` | `error-message` | `boolean` → `string` |
800
+
801
+ ## Rule Details
802
+
803
+ This rule reports usages of the deprecated `has-error` prop and provides an IDE suggestion (not an autofix) to rename
804
+ it.
805
+
806
+ ### ❌ Incorrect
807
+
808
+ ```html
809
+ <!-- Static boolean -->
810
+ <bento-checkbox-group :has-error="true" :items="items" label="Permissions" />
811
+
812
+ <!-- Dynamic binding -->
813
+ <bento-checkbox-group :has-error="hasError" :items="items" label="Permissions" />
814
+ ```
815
+
816
+ ```html
817
+ <bento-radio-group :has-error="true" :items="items" label="Priority" />
818
+
819
+ <bento-radio-group :has-error="hasError" :items="items" label="Priority" />
820
+ ```
821
+
822
+ ### ✅ Correct
823
+
824
+ ```html
825
+ <!-- Group-level error: pass a string message to error-message -->
826
+ <bento-checkbox-group error-message="Select at least one option" :items="items" label="Permissions" />
827
+
828
+ <!-- Dynamic error message driven by validation -->
829
+ <bento-checkbox-group :error-message="errorMessage" :items="items" label="Permissions" />
830
+ ```
831
+
832
+ ```html
833
+ <bento-radio-group error-message="Please select an option" :items="items" label="Priority" />
834
+
835
+ <bento-radio-group :error-message="errorMessage" :items="items" label="Priority" />
836
+ ```
837
+
838
+ ## Migration Examples
839
+
840
+ ### Before — static boolean
841
+
842
+ ```html
843
+ <template>
844
+ <bento-checkbox-group :has-error="true" :items="items" label="Toppings" />
845
+ </template>
846
+ ```
847
+
848
+ ### After — static error message
849
+
850
+ ```html
851
+ <template>
852
+ <bento-checkbox-group error-message="Select at least one topping" :items="items" label="Toppings" />
853
+ </template>
854
+ ```
855
+
856
+ ### Before — dynamic validation
857
+
858
+ ```html
859
+ <template>
860
+ <bento-checkbox-group :has-error="hasError" :items="items" label="Toppings" />
861
+ </template>
862
+
863
+ <script setup lang="ts">
864
+ const hasError = ref(false);
865
+
866
+ const validate = () => {
867
+ hasError.value = selectedToppings.value.length === 0;
868
+ };
869
+ </script>
870
+ ```
871
+
872
+ ### After — dynamic validation with error message
873
+
874
+ ```html
875
+ <template>
876
+ <bento-checkbox-group :error-message="errorMessage" :items="items" label="Toppings" />
877
+ </template>
878
+
879
+ <script setup lang="ts">
880
+ const errorMessage = ref<string | null>(null);
881
+
882
+ const validate = () => {
883
+ errorMessage.value = selectedToppings.value.length === 0 ? 'Select at least one topping' : null;
884
+ };
885
+ </script>
886
+ ```
887
+
888
+ ### Before — item-level `hasError`
889
+
890
+ ```html
891
+ <template>
892
+ <bento-checkbox-group :items="items" label="Permissions" />
893
+ </template>
894
+
895
+ <script setup lang="ts">
896
+ const items = [
897
+ { value: 'read', label: 'Read', hasError: true },
898
+ { value: 'write', label: 'Write' },
899
+ ];
900
+ </script>
901
+ ```
902
+
903
+ ### After — item-level `errorMessage`
904
+
905
+ ```html
906
+ <template>
907
+ <bento-checkbox-group :items="items" label="Permissions" />
908
+ </template>
909
+
910
+ <script setup lang="ts">
911
+ const items = [
912
+ { value: 'read', label: 'Read', errorMessage: 'Read permission is required' },
913
+ { value: 'write', label: 'Write' },
914
+ ];
915
+ </script>
916
+ ```
917
+
918
+ ---
919
+
920
+ # deprecation-components-input-emit
921
+
922
+ ## Description
923
+
924
+ The `@input` event listener in the following components is deprecated:
925
+
926
+ - `bento-date-picker`
927
+ - `bento-date-range-picker`
928
+ - `bento-dropdown`
929
+ - `bento-dropdown-avatar`
930
+ - `bento-dropdown-country`
931
+ - `bento-dropdown-currency`
932
+ - `bento-dropdown-payment-method`
933
+ - `bento-dropdown-tag`
934
+ - `bento-file-uploader`
935
+ - `bento-input-field`
936
+ - `bento-input-field-password`
937
+ - `bento-input-field-phone-number`
938
+ - `bento-checkbox-group`
939
+ - `bento-radio-group`
940
+ - `bento-selection-card-group`
941
+ - `bento-textarea`
942
+
943
+ Please use `@update:model-value` instead.
944
+
945
+ | Deprecated event | Replacement event | Autofix available |
946
+ | ---------------- | --------------------- | -------------------------- |
947
+ | `@input` | `@update:model-value` | Yes (opt-in via `autofix`) |
948
+
949
+ > **⚠️ Caveat — `v-model` combined with `@input`**
950
+ >
951
+ > Bento Vue 2 components emit **both** `input` (deprecated) and `update:model-value` on every value change for backward
952
+ > compatibility. In Vue 2, `v-model` internally listens to `@input`. If you autofix `@input` to `@update:model-value`
953
+ > while keeping `v-model`, you end up with `v-model` listening to `@input` **and** an explicit `@update:model-value`
954
+ > handler — both of which fire on every change. This causes race conditions because the handler may read the model value
955
+ > before `v-model`'s `@input` listener has propagated the update.
956
+ >
957
+ > In this case, **do not rely on autofix alone**. You must also replace `v-model` with an explicit `:model-value`
958
+ > binding so that a single `@update:model-value` handler controls both the model update and any side effects. See the
959
+ > [Migration Examples](#migration-examples) below.
960
+
961
+ ## Rule Details
962
+
963
+ This rule reports usages of the deprecated `@input` event and can optionally autofix them to `@update:model-value`.
964
+ Autofix is disabled by default and can be enabled with the `autofix` option.
965
+
966
+ ### ❌ Incorrect
967
+
968
+ ```html
969
+ <bento-date-picker @input="handler" />
970
+ ```
971
+
972
+ ```html
973
+ <bento-date-range-picker @input="handler" />
974
+ ```
975
+
976
+ ```html
977
+ <bento-dropdown @input="handler" />
978
+ ```
979
+
980
+ ```html
981
+ <bento-dropdown-avatar @input="handler" />
982
+ ```
983
+
984
+ ```html
985
+ <bento-dropdown-country @input="handler" />
986
+ ```
987
+
988
+ ```html
989
+ <bento-dropdown-currency @input="handler" />
990
+ ```
991
+
992
+ ```html
993
+ <bento-dropdown-payment-method @input="handler" />
994
+ ```
995
+
996
+ ```html
997
+ <bento-dropdown-tag @input="handler" />
998
+ ```
999
+
1000
+ ```html
1001
+ <bento-file-uploader @input="handler" />
1002
+ ```
1003
+
1004
+ ```html
1005
+ <bento-input-field @input="handler" />
1006
+ ```
1007
+
1008
+ ```html
1009
+ <bento-input-field-password @input="handler" />
1010
+ ```
1011
+
1012
+ ```html
1013
+ <bento-input-field-phone-number @input="handler" />
1014
+ ```
1015
+
1016
+ ```html
1017
+ <bento-checkbox-group @input="handler" />
1018
+ ```
1019
+
1020
+ ```html
1021
+ <bento-radio-group @input="handler" />
1022
+ ```
1023
+
1024
+ ```html
1025
+ <bento-selection-card-group @input="handler" />
1026
+ ```
1027
+
1028
+ ```html
1029
+ <bento-textarea @input="handler" />
1030
+ ```
1031
+
1032
+ ```html
1033
+ <!-- v-on:input directive syntax is also reported -->
1034
+ <bento-input-field v-on:input="handler" />
1035
+ ```
1036
+
1037
+ ```html
1038
+ <!-- ⚠️ v-model + @input — autofix alone is NOT safe -->
1039
+ <bento-input-field v-model="email" @input="onEmailChange" />
1040
+
1041
+ <bento-dropdown v-model="country" @input="onCountryChange" :items="items" />
1042
+ ```
1043
+
1044
+ ### ✅ Correct
1045
+
1046
+ ```html
1047
+ <bento-date-picker @update:model-value="handler" />
1048
+ ```
1049
+
1050
+ ```html
1051
+ <bento-date-range-picker @update:model-value="handler" />
1052
+ ```
1053
+
1054
+ ```html
1055
+ <bento-dropdown @update:model-value="handler" />
1056
+ ```
1057
+
1058
+ ```html
1059
+ <bento-dropdown-avatar @update:model-value="handler" />
1060
+ ```
1061
+
1062
+ ```html
1063
+ <bento-dropdown-country @update:model-value="handler" />
1064
+ ```
1065
+
1066
+ ```html
1067
+ <bento-dropdown-currency @update:model-value="handler" />
1068
+ ```
1069
+
1070
+ ```html
1071
+ <bento-dropdown-payment-method @update:model-value="handler" />
1072
+ ```
1073
+
1074
+ ```html
1075
+ <bento-dropdown-tag @update:model-value="handler" />
1076
+ ```
1077
+
1078
+ ```html
1079
+ <bento-file-uploader @update:model-value="handler" />
1080
+ ```
1081
+
1082
+ ```html
1083
+ <bento-input-field @update:model-value="handler" />
1084
+ ```
1085
+
1086
+ ```html
1087
+ <bento-input-field-password @update:model-value="handler" />
1088
+ ```
1089
+
1090
+ ```html
1091
+ <bento-input-field-phone-number @update:model-value="handler" />
1092
+ ```
1093
+
1094
+ ```html
1095
+ <bento-checkbox-group @update:model-value="handler" />
1096
+ ```
1097
+
1098
+ ```html
1099
+ <bento-radio-group @update:model-value="handler" />
1100
+ ```
1101
+
1102
+ ```html
1103
+ <bento-selection-card-group @update:model-value="handler" />
1104
+ ```
1105
+
1106
+ ```html
1107
+ <bento-textarea @update:model-value="handler" />
1108
+ ```
1109
+
1110
+ ```html
1111
+ <!-- v-model without a separate handler — no change needed -->
1112
+ <bento-input-field v-model="email" />
1113
+ ```
1114
+
1115
+ ```html
1116
+ <!-- v-model + @input migrated: split v-model into explicit binding + handler -->
1117
+ <bento-input-field :model-value="email" @update:model-value="onEmailChange" />
1118
+
1119
+ <bento-dropdown :model-value="country" @update:model-value="onCountryChange" :items="items" />
1120
+ ```
1121
+
1122
+ ## Migration Examples
1123
+
1124
+ If `v-model` is used alongside `@input`, you must also replace `v-model` with `:model-value` — see Case 2. Otherwise,
1125
+ renaming `@input` to `@update:model-value` is sufficient — see Cases 1 and 3.
1126
+
1127
+ ### Case 1 — standalone `@input` (safe to autofix)
1128
+
1129
+ The simplest case: `@input` is used without `v-model`. Rename it to `@update:model-value`.
1130
+
1131
+ #### Before
1132
+
1133
+ ```html
1134
+ <template>
1135
+ <bento-dropdown @input="onSelect" :items="countries" label="Country" />
1136
+ </template>
1137
+
1138
+ <script setup lang="ts">
1139
+ const onSelect = (value: string) => {
1140
+ console.log('Selected:', value);
1141
+ };
1142
+ </script>
1143
+ ```
1144
+
1145
+ #### After
1146
+
1147
+ ```html
1148
+ <template>
1149
+ <bento-dropdown @update:model-value="onSelect" :items="countries" label="Country" />
1150
+ </template>
1151
+
1152
+ <script setup lang="ts">
1153
+ const onSelect = (value: string) => {
1154
+ console.log('Selected:', value);
1155
+ };
1156
+ </script>
1157
+ ```
1158
+
1159
+ ### Case 2 — `v-model` + `@input` (autofix NOT safe — requires manual split)
1160
+
1161
+ When `v-model` is used alongside `@input`, autofix alone will cause a dual-emission race condition. You must replace
1162
+ `v-model` with an explicit `:model-value` binding and merge the update logic into a single `@update:model-value`
1163
+ handler.
1164
+
1165
+ #### Before — `v-model` + `@input`
1166
+
1167
+ ```html
1168
+ <template>
1169
+ <bento-dropdown v-model="country" @input="onCountryChange" :items="countries" label="Country" />
1170
+ </template>
1171
+
1172
+ <script setup lang="ts">
1173
+ const country = ref('');
1174
+
1175
+ const onCountryChange = (value: string) => {
1176
+ fetchCities(value);
1177
+ };
1178
+ </script>
1179
+ ```
1180
+
1181
+ #### ❌ Broken — after autofix only (dual-emission race condition)
1182
+
1183
+ ```html
1184
+ <template>
1185
+ <!-- v-model internally listens to @input, while @update:model-value listens to the new event.
1186
+ The component emits BOTH events on every change, causing a race condition:
1187
+ onCountryChange may read `country` before v-model's @input handler has updated it. -->
1188
+ <bento-dropdown v-model="country" @update:model-value="onCountryChange" :items="countries" label="Country" />
1189
+ </template>
1190
+ ```
1191
+
1192
+ #### ✅ Correct — split `v-model` and merge handlers
1193
+
1194
+ Replace `v-model` with `:model-value` and merge the update logic into one handler:
1195
+
1196
+ ```html
1197
+ <template>
1198
+ <bento-dropdown :model-value="country" @update:model-value="onCountryChange" :items="countries" label="Country" />
1199
+ </template>
1200
+
1201
+ <script setup lang="ts">
1202
+ const country = ref('');
1203
+
1204
+ const onCountryChange = (value: string) => {
1205
+ country.value = value;
1206
+ fetchCities(value);
1207
+ };
1208
+ </script>
1209
+ ```
1210
+
1211
+ ### Case 3 — explicit `:model-value` + `@input` (safe to autofix)
1212
+
1213
+ When `:model-value` is already used instead of `v-model`, there is no dual-emission conflict. Rename `@input` to
1214
+ `@update:model-value`.
1215
+
1216
+ #### Before — `:model-value` + `@input`
1217
+
1218
+ ```html
1219
+ <template>
1220
+ <bento-checkbox-group :model-value="selected" @input="onSelect" :items="items" label="Toppings" />
1221
+ </template>
1222
+
1223
+ <script setup lang="ts">
1224
+ const selected = ref([]);
1225
+
1226
+ const onSelect = (value: string[]) => {
1227
+ selected.value = value;
1228
+ };
1229
+ </script>
1230
+ ```
1231
+
1232
+ #### After — rename to `@update:model-value`
1233
+
1234
+ ```html
1235
+ <template>
1236
+ <bento-checkbox-group :model-value="selected" @update:model-value="onSelect" :items="items" label="Toppings" />
1237
+ </template>
1238
+
1239
+ <script setup lang="ts">
1240
+ const selected = ref([]);
1241
+
1242
+ const onSelect = (value: string[]) => {
1243
+ selected.value = value;
1244
+ };
1245
+ </script>
1246
+ ```
1247
+
1248
+ ---
1249
+
1250
+ # deprecation-components-value-prop
1251
+
1252
+ ## Description
1253
+
1254
+ The `value` prop in the following components is deprecated:
1255
+
1256
+ - `bento-date-picker`
1257
+ - `bento-date-range-picker`
1258
+ - `bento-dropdown`
1259
+ - `bento-dropdown-avatar`
1260
+ - `bento-dropdown-country`
1261
+ - `bento-dropdown-currency`
1262
+ - `bento-dropdown-payment-method`
1263
+ - `bento-dropdown-tag`
1264
+ - `bento-file-uploader`
1265
+ - `bento-input-field`
1266
+ - `bento-input-field-password`
1267
+ - `bento-input-field-phone-number`
1268
+ - `bento-checkbox-group`
1269
+ - `bento-radio-group`
1270
+ - `bento-selection-card-group`
1271
+ - `bento-textarea`
1272
+
1273
+ Please use `model-value` instead.
1274
+
1275
+ ## Rule Details
1276
+
1277
+ This rule reports usages of the deprecated item.
1278
+
1279
+ ### ❌ Incorrect
1280
+
1281
+ ```html
1282
+ <bento-date-picker value="value" /> <bento-date-picker :value="value" />
1283
+ ```
1284
+
1285
+ ```html
1286
+ <bento-date-range-picker value="value" /> <bento-date-range-picker :value="value" />
1287
+ ```
1288
+
1289
+ ```html
1290
+ <bento-dropdown value="value" /> <bento-dropdown :value="value" />
1291
+ ```
1292
+
1293
+ ```html
1294
+ <bento-dropdown-avatar value="value" /> <bento-dropdown-avatar :value="value" />
1295
+ ```
1296
+
1297
+ ```html
1298
+ <bento-dropdown-country value="value" /> <bento-dropdown-country :value="value" />
1299
+ ```
1300
+
1301
+ ```html
1302
+ <bento-dropdown-currency value="value" /> <bento-dropdown-currency :value="value" />
1303
+ ```
1304
+
1305
+ ```html
1306
+ <bento-dropdown-payment-method value="value" /> <bento-dropdown-payment-method :value="value" />
1307
+ ```
1308
+
1309
+ ```html
1310
+ <bento-dropdown-tag value="value" /> <bento-dropdown-tag :value="value" />
1311
+ ```
1312
+
1313
+ ```html
1314
+ <bento-file-uploader value="value" /> <bento-file-uploader :value="value" />
1315
+ ```
1316
+
1317
+ ```html
1318
+ <bento-input-field value="value" /> <bento-input-field :value="value" />
1319
+ ```
1320
+
1321
+ ```html
1322
+ <bento-input-field-password value="value" /> <bento-input-field-password :value="value" />
1323
+ ```
1324
+
1325
+ ```html
1326
+ <bento-input-field-phone-number value="value" /> <bento-input-field-phone-number :value="value" />
1327
+ ```
1328
+
1329
+ ```html
1330
+ <bento-checkbox-group value="value" /> <bento-checkbox-group :value="value" />
1331
+ ```
1332
+
1333
+ ```html
1334
+ <bento-radio-group value="value" /> <bento-radio-group :value="value" />
1335
+ ```
1336
+
1337
+ ```html
1338
+ <bento-selection-card-group value="value" /> <bento-selection-card-group :value="value" />
1339
+ ```
1340
+
1341
+ ```html
1342
+ <bento-textarea value="value" /> <bento-textarea :value="value" />
1343
+ ```
1344
+
1345
+ ### ✅ Correct
1346
+
1347
+ ```html
1348
+ <bento-date-picker model-value="value" />
1349
+ ```
1350
+
1351
+ ```html
1352
+ <bento-date-range-picker model-value="value" />
1353
+ ```
1354
+
1355
+ ```html
1356
+ <bento-dropdown model-value="value" />
1357
+ ```
1358
+
1359
+ ```html
1360
+ <bento-dropdown-avatar model-value="value" />
1361
+ ```
1362
+
1363
+ ```html
1364
+ <bento-dropdown-country model-value="value" />
1365
+ ```
1366
+
1367
+ ```html
1368
+ <bento-dropdown-currency model-value="value" />
1369
+ ```
1370
+
1371
+ ```html
1372
+ <bento-dropdown-payment-method model-value="value" />
1373
+ ```
1374
+
1375
+ ```html
1376
+ <bento-dropdown-tag model-value="value" />
1377
+ ```
1378
+
1379
+ ```html
1380
+ <bento-file-uploader model-value="value" />
1381
+ ```
1382
+
1383
+ ```html
1384
+ <bento-input-field model-value="value" />
1385
+ ```
1386
+
1387
+ ```html
1388
+ <bento-input-field-password model-value="value" />
1389
+ ```
1390
+
1391
+ ```html
1392
+ <bento-input-field-phone-number model-value="value" />
1393
+ ```
1394
+
1395
+ ```html
1396
+ <bento-checkbox-group model-value="value" />
1397
+ ```
1398
+
1399
+ ```html
1400
+ <bento-radio-group model-value="value" />
1401
+ ```
1402
+
1403
+ ```html
1404
+ <bento-selection-card-group model-value="value" />
1405
+ ```
1406
+
1407
+ ```html
1408
+ <bento-textarea model-value="value" />
1409
+ ```
1410
+
1411
+ ---
1412
+
1413
+ # deprecation-country-custom-usage
1414
+
1415
+ ## Description
1416
+
1417
+ This rule deprecates the `variant="custom"` prop and custom `label` usage across country-related components.
1418
+ These features are being removed because country components should use built-in variants (`name`, `iso`, `capital`, `phone_code`) rather than custom labels.
1419
+
1420
+ The rule covers three components:
1421
+
1422
+ 1. **`bento-country`** — the `variant="custom"` prop and the `label` prop
1423
+ 2. **`bento-dropdown-country`** — the `variant="custom"` prop and `label` keys in the `:items` array
1424
+ 3. **`BentoFilterItemType.SELECT_COUNTRY`** — the `variant: 'custom'` option and `label` keys in `listboxItems`
1425
+
1426
+ ## Rule Details
1427
+
1428
+ ### `bento-country`
1429
+
1430
+ The `label` prop only takes effect when `variant="custom"` is set. Using either one alone is dead code.
1431
+
1432
+ #### ❌ Incorrect
1433
+
1434
+ ```html
1435
+ <!-- variant="custom" only — variant does nothing without a label -->
1436
+ <bento-country code="NL" variant="custom" />
1437
+
1438
+ <!-- label only — label is ignored without variant="custom" -->
1439
+ <bento-country code="NL" label="Custom label" />
1440
+
1441
+ <!-- both — deprecated, use bento-typography instead -->
1442
+ <bento-country code="NL" variant="custom" label="Custom label" />
1443
+ <bento-country code="NL" :variant="BentoCountryVariant.CUSTOM" :label="customLabel" />
1444
+ ```
1445
+
1446
+ #### ✅ Correct
1447
+
1448
+ ```html
1449
+ <!-- Use a built-in variant -->
1450
+ <bento-country code="NL" variant="name" />
1451
+
1452
+ <!-- Use bento-typography for custom text -->
1453
+ <bento-typography el="span">Custom label</bento-typography>
1454
+ ```
1455
+
1456
+ ### `bento-dropdown-country`
1457
+
1458
+ The `label` key in items is only used when `variant="custom"` is set. Using either one alone is dead code.
1459
+
1460
+ #### ❌ Incorrect
1461
+
1462
+ ```html
1463
+ <!-- label in items only — labels are ignored without variant="custom" -->
1464
+ <bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" />
1465
+
1466
+ <!-- variant="custom" only — variant does nothing without labels in items -->
1467
+ <bento-dropdown-country :items="[{ value: 'NL' }]" variant="custom" />
1468
+
1469
+ <!-- both — deprecated, use bento-dropdown instead -->
1470
+ <bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" variant="custom" />
1471
+ ```
1472
+
1473
+ #### ✅ Correct
1474
+
1475
+ ```html
1476
+ <!-- Use a built-in variant -->
1477
+ <bento-dropdown-country :items="[{ value: 'NL' }]" variant="name" />
1478
+
1479
+ <!-- Use bento-dropdown for custom labels -->
1480
+ <bento-dropdown :items="[{ value: 'NL', label: 'Custom label' }]" />
1481
+ ```
1482
+
1483
+ ### `SELECT_COUNTRY` filter config (`bento-filter-bar` / `bento-data-grid`)
1484
+
1485
+ The `label` key in `listboxItems` is only used when `variant: 'custom'` is set. Using either one alone is dead code.
1486
+
1487
+ #### ❌ Incorrect
1488
+
1489
+ ```html
1490
+ <!-- variant: 'custom' only -->
1491
+ <bento-filter-bar
1492
+ :config="[{
1493
+ field: 'country', label: 'Country',
1494
+ type: BentoFilterItemType.SELECT_COUNTRY,
1495
+ options: { listboxItems: [{ value: 'NL' }], variant: 'custom' }
1496
+ }]"
1497
+ />
1498
+
1499
+ <!-- label in listboxItems only -->
1500
+ <bento-filter-bar
1501
+ :config="[{
1502
+ field: 'country', label: 'Country',
1503
+ type: BentoFilterItemType.SELECT_COUNTRY,
1504
+ options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] }
1505
+ }]"
1506
+ />
1507
+
1508
+ <!-- both -->
1509
+ <bento-filter-bar
1510
+ :config="[{
1511
+ field: 'country', label: 'Country',
1512
+ type: BentoFilterItemType.SELECT_COUNTRY,
1513
+ options: {
1514
+ listboxItems: [{ value: 'NL', label: 'Custom label' }],
1515
+ variant: 'custom'
1516
+ }
1517
+ }]"
1518
+ />
1519
+ ```
1520
+
1521
+ #### ✅ Correct
1522
+
1523
+ ```html
1524
+ <!-- Use a built-in variant -->
1525
+ <bento-filter-bar
1526
+ :config="[{
1527
+ field: 'country', label: 'Country',
1528
+ type: BentoFilterItemType.SELECT_COUNTRY,
1529
+ options: { listboxItems: [{ value: 'NL' }], variant: 'name' }
1530
+ }]"
1531
+ />
1532
+
1533
+ <!-- Use SELECT type for custom labels -->
1534
+ <bento-filter-bar
1535
+ :config="[{
1536
+ field: 'country', label: 'Country',
1537
+ type: BentoFilterItemType.SELECT,
1538
+ options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] }
1539
+ }]"
1540
+ />
1541
+ ```
1542
+
1543
+ ## Autofix
1544
+
1545
+ Enable opt-in autofix via ESLint config:
1546
+
1547
+ ```js
1548
+ '@adyen/bento/deprecation-country-custom-usage': ['warn', { autofix: true }]
1549
+ ```
1550
+
1551
+ The autofix behavior depends on which deprecated props are present:
1552
+
1553
+ | Scenario | Autofix |
1554
+ |---|---|
1555
+ | `variant="custom"` only | Removes the `variant` prop/property |
1556
+ | `label` only | Removes the `label` prop/property |
1557
+ | Both `variant="custom"` + `label` | Full replacement (see below) |
1558
+
1559
+ ### Full replacement (both present)
1560
+
1561
+ - **`bento-country`** — replaces the entire element with `<bento-typography el="span">{{ label }}</bento-typography>`
1562
+ - **`bento-dropdown-country`** — renames the tag to `bento-dropdown` and removes the `variant` attribute
1563
+ - **`SELECT_COUNTRY` filter** — changes `type` to `BentoFilterItemType.SELECT` and removes `variant` from options
1564
+
1565
+ ---
1566
+
1567
+ # @adyen/bento/deprecation-currency-default-slot
1568
+
1569
+ > Disallow the use of the `default` slot in `bento-currency` instances
1570
+
1571
+ - This rule is included in the `plugin:@adyen/bento/recommended` configuration.
1572
+ - 🔧 The `--fix` option can automatically fix the problems reported by this rule.
1573
+
1574
+ This rule prevents using the deprecated `default` slot within the `Currency` component.
1575
+
1576
+ ## ✗ BAD
1577
+
1578
+ <!-- prettier-ignore -->
1579
+ ```html
1580
+ <template>
1581
+ <bento-currency currency="USD">
1582
+ 12345
1583
+ </bento-currency>
1584
+
1585
+ <bento-currency currency="USD">
1586
+ 12345.67
1587
+ </bento-currency>
1588
+
1589
+ <bento-currency>
1590
+ {{ thisIsMyVariableWithCurrencyValue }}
1591
+ </bento-currency>
1592
+ </template>
1593
+ ```
1594
+
1595
+ ## ✓ Good
1596
+
1597
+ <!-- prettier-ignore -->
1598
+ ```html
1599
+ <template>
1600
+ <bento-currency
1601
+ :value="12345"
1602
+ currency="USD"
1603
+ />
1604
+
1605
+ <bento-currency
1606
+ :value="12345.67"
1607
+ currency="USD"
1608
+ />
1609
+
1610
+ <bento-currency
1611
+ :value="thisIsMyVariableWithCurrencyValue"
1612
+ :currency="BentoCurrencyISOCode.USD"
1613
+ major-units
1614
+ />
1615
+ </template>
1616
+ ```
1617
+
1618
+ ---
1619
+
1620
+ # deprecation-filter-bar-deprecated-props
1621
+
1622
+ ## Description
1623
+
1624
+ Deprecates the following props and options in `bento-filter-bar` and `bento-data-grid` filter configs:
1625
+
1626
+ ### Direct prop on `bento-filter-bar`
1627
+
1628
+ | Deprecated | Replacement |
1629
+ | ---------- | ---------------------------- |
1630
+ | `value` | `config` and `filter-values` |
1631
+
1632
+ ### Nested options in filter config items (`BentoSelectFilterOptions`)
1633
+
1634
+ | Deprecated | Replacement |
1635
+ | --------------------------------------------------- | ------------------------------------------------- |
1636
+ | `messages` | None (persistent filter label now uses a counter) |
1637
+ | `messagesPersistentButtonLabelPartiallySelectedKey` | None |
1638
+ | `messagesPersistentButtonLabelAllSelectedKey` | None |
1639
+
1640
+ ### `value` on filter config items (`BentoFilterModel`)
1641
+
1642
+ | Deprecated | Replacement |
1643
+ | ---------- | --------------- |
1644
+ | `value` | `filter-values` |
1645
+
1646
+ ## Rule Details
1647
+
1648
+ ### ❌ Incorrect
1649
+
1650
+ ```html
1651
+ <bento-filter-bar :value="filters" /> <bento-filter-bar v-model="filters" />
1652
+ ```
1653
+
1654
+ ```js
1655
+ const config = [
1656
+ {
1657
+ field: 'status',
1658
+ type: 'BentoSelectFilter',
1659
+ value: 'active',
1660
+ options: {
1661
+ messages: { en: { persistentButtonLabelPartiallySelected: 'x' } },
1662
+ messagesPersistentButtonLabelPartiallySelectedKey: 'customKey',
1663
+ messagesPersistentButtonLabelAllSelectedKey: 'customKey',
1664
+ },
1665
+ },
1666
+ ];
1667
+ ```
1668
+
1669
+ ### ✅ Correct
1670
+
1671
+ ```html
1672
+ <bento-filter-bar :config="config" :filter-values="values" />
1673
+ ```
1674
+
1675
+ ```js
1676
+ const config = [
1677
+ {
1678
+ field: 'status',
1679
+ type: 'BentoSelectFilter',
1680
+ options: { listboxItems: [] },
1681
+ },
1682
+ ];
1683
+ ```
1684
+
1685
+ ---
1686
+
1687
+ # deprecation-input-filter-dropdown-options
1688
+
1689
+ Deprecates usage of `dropdown`, `dropdownPosition`, and `variant` properties inside `BentoInputFilterOptions`.
1690
+
1691
+ These properties were used to configure the input filter as a dropdown variant. They should be replaced by using
1692
+ `BentoFilterItemType.INPUT_DROPDOWN` instead of `BentoFilterItemType.INPUT`.
1693
+
1694
+ ## Examples
1695
+
1696
+ ### Invalid
1697
+
1698
+ ```vue
1699
+ <script setup>
1700
+ const config = [
1701
+ {
1702
+ field: 'name',
1703
+ label: 'Name',
1704
+ type: BentoFilterItemType.INPUT,
1705
+ options: { dropdown: { items: [] }, dropdownPosition: 'end', variant: 'dropdown' },
1706
+ },
1707
+ ];
1708
+ </script>
1709
+ <template>
1710
+ <bento-filter-bar :config="config" />
1711
+ </template>
1712
+ ```
1713
+
1714
+ ### Valid
1715
+
1716
+ ```vue
1717
+ <script setup>
1718
+ const config = [
1719
+ {
1720
+ field: 'name',
1721
+ label: 'Name',
1722
+ type: BentoFilterItemType.INPUT_DROPDOWN,
1723
+ options: { dropdown: { items: [] }, dropdownPosition: 'end' },
1724
+ },
1725
+ ];
1726
+ </script>
1727
+ <template>
1728
+ <bento-filter-bar :config="config" />
1729
+ </template>
1730
+ ```
1731
+
1732
+ ---
1733
+
1734
+ # @adyen/bento/deprecation-tag-default-slot
1735
+
1736
+ > Disallow the use of the slot in `bento-tag` instances
1737
+
1738
+ - This rule is included in the `plugin:@adyen/bento/recommended` configuration.
1739
+ - 🔧 The `--fix` option can automatically fix the problems reported by this rule.
1740
+
1741
+ This rule prevents using the deprecated `default` slot within the `Tag` component.
1742
+
1743
+ ## ✗ BAD
1744
+
1745
+ <!-- prettier-ignore -->
1746
+ ```html
1747
+ <template>
1748
+ <bento-tag variant="blue">
1749
+ Label text
1750
+ </bento-tag>
1751
+
1752
+ <bento-tag>
1753
+ Label text
1754
+ </bento-tag>
1755
+
1756
+ <bento-tag>
1757
+ {{ thisIsMyVariableWithText }}
1758
+ </bento-tag>
1759
+
1760
+ <bento-tag>
1761
+ Value: {{ thisIsAValue }}
1762
+ </bento-tag>
1763
+ </template>
1764
+ ```
1765
+
1766
+ ## ✓ Good
1767
+
1768
+ <!-- prettier-ignore -->
1769
+ ```html
1770
+ <template>
1771
+ <bento-tag label="Label text" variant="blue" />
1772
+
1773
+ <bento-tag label="Label text" variant="blue" />
1774
+
1775
+ <bento-tag :label="thisIsMyVariableWithText" variant="blue" />
1776
+
1777
+ <bento-tag :label="Value: ${thisIsAValue}" />
1778
+ </template>
1779
+ ```
1780
+