@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.
- package/CHANGELOG.md +22 -0
- package/README.md +7 -6
- package/bin/add-skill.js +12 -1
- package/dist/assets/components/anchor-scroller/anchor-scroller.vue +1 -1
- package/dist/assets/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.types.ts +1 -1
- package/dist/assets/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue +1 -1
- package/dist/assets/components/button/button.docs.mdx +24 -0
- package/dist/assets/components/button/button.vue +1 -1
- package/dist/assets/components/button/components/button-actions/button-actions.docs.mdx +14 -1
- package/dist/assets/components/data-grid/data-grid.stories.ts +1 -1
- package/dist/assets/components/date-range-picker/date-range-picker.vue +1 -1
- package/dist/assets/components/draggable/components/draggable-handle/draggable-handle.vue +1 -1
- package/dist/assets/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue +1 -1
- package/dist/assets/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue +1 -1
- package/dist/assets/components/dropdown/dropdown.docs.mdx +58 -0
- package/dist/assets/components/dropdown/dropdown.stories.ts +1 -1
- package/dist/assets/components/dropdown/dropdown.vue +1 -1
- package/dist/assets/components/filter-bar/components/filter-bar-button/filter-bar-button.vue +1 -1
- package/dist/assets/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.vue +1 -1
- package/dist/assets/components/filter-bar/components/range-filter/range-filter.types.ts +1 -0
- package/dist/assets/components/filter-bar/components/range-filter/range-filter.vue +1 -1
- package/dist/assets/components/filter-bar/filter-bar.docs.mdx +74 -1
- package/dist/assets/components/filter-bar/filter-bar.stories.ts +1 -1
- package/dist/assets/components/filter-bar/filter-bar.types.ts +1 -1
- package/dist/assets/components/filter-bar/filter-bar.vue +1 -1
- package/dist/assets/components/header/header.docs.mdx +8 -0
- package/dist/assets/components/header-with-views/header-with-views.docs.mdx +12 -0
- package/dist/assets/components/input-field/input-field.vue +1 -1
- package/dist/assets/components/internal/listbox/components/listbox-lazy-load/listbox-lazy-load.types.ts +1 -0
- package/dist/assets/components/internal/listbox/components/listbox-lazy-load/listbox-lazy-load.vue +1 -0
- 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
- 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
- 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
- package/dist/assets/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/listbox-multi-select-options.vue +1 -1
- package/dist/assets/components/internal/listbox/components/listbox-multi-select/listbox-multi-select.vue +1 -1
- package/dist/assets/components/internal/listbox/components/listbox-single-select/listbox-single-select.vue +1 -1
- package/dist/assets/components/internal/listbox/listbox.vue +1 -1
- package/dist/assets/components/table-of-contents/components/table-of-contents-list/table-of-contents-list.types.ts +1 -0
- package/dist/assets/components/table-of-contents/components/table-of-contents-list/table-of-contents-list.vue +1 -0
- package/dist/assets/components/table-of-contents/table-of-contents.docs.mdx +34 -0
- package/dist/assets/components/table-of-contents/table-of-contents.stories.ts +1 -0
- package/dist/assets/components/table-of-contents/table-of-contents.types.ts +1 -0
- package/dist/assets/components/table-of-contents/table-of-contents.vue +1 -0
- package/dist/assets/components/toast/toast.docs.mdx +7 -0
- package/dist/assets/components.json +1 -0
- package/dist/assets/composables/use-numeric-input/use-numeric-input.types.ts +1 -0
- package/dist/assets/composables/use-section-navigation-keyboard/use-section-navigation-keyboard.types.ts +1 -0
- package/dist/assets/deprecations.md +1586 -136
- package/dist/assets/index.ts +1 -1
- package/dist/assets/usage.json +80 -79
- package/dist/assets/utils/ts/scroll-to-section/scroll-to-section.types.ts +1 -0
- package/dist/main.js +1 -1
- 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/
|
|
65
|
-
- ../vue2/src/components/
|
|
66
|
-
- ../vue2/src/components/
|
|
67
|
-
- ../vue2/src/components/
|
|
68
|
-
- ../vue2/src/components/
|
|
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/
|
|
223
|
-
- ../vue2/src/components/
|
|
224
|
-
-
|
|
225
|
-
- ../vue2/src/components/
|
|
226
|
-
- ../vue2/src/components/
|
|
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/
|
|
263
|
-
- ../vue2/src/components/
|
|
264
|
-
- ../vue2/src/components/
|
|
265
|
-
- ../vue2/src/components/
|
|
266
|
-
- ../vue2/src/components/
|
|
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/
|
|
271
|
-
- ../vue2/src/components/
|
|
272
|
-
- ../vue2/src/components/
|
|
273
|
-
- ../vue2/src/components/
|
|
274
|
-
- ../vue2/src/components/
|
|
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/
|
|
303
|
-
- ../vue2/src/components/
|
|
304
|
-
- ../vue2/src/components/
|
|
305
|
-
- ../vue2/src/components/
|
|
306
|
-
- ../vue2/src/components/
|
|
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/
|
|
311
|
-
- ../vue2/src/components/
|
|
312
|
-
- ../vue2/src/components/
|
|
313
|
-
- ../vue2/src/components/
|
|
314
|
-
- ../vue2/src/components/
|
|
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/
|
|
319
|
-
- ../vue2/src/components/
|
|
320
|
-
- ../vue2/src/components/
|
|
321
|
-
- ../vue2/src/components/
|
|
322
|
-
- ../vue2/src/components/
|
|
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/
|
|
327
|
-
- ../vue2/src/components/
|
|
328
|
-
- ../vue2/src/components/
|
|
329
|
-
- ../vue2/src/components/
|
|
330
|
-
- ../vue2/src/components/
|
|
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
|
+
|