@adyen/eslint-plugin-bento 2.22.0 → 2.24.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 (85) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/README.md +31 -15
  3. package/configs/vue-recommended.js +16 -0
  4. package/configs/vue-strict.js +17 -1
  5. package/index.js +3 -0
  6. package/package.json +3 -3
  7. package/rules/deprecation-bento-tag-variant-enum/README.md +69 -0
  8. package/rules/deprecation-bento-tag-variant-enum/deprecation-bento-tag-variant-enum.js +167 -0
  9. package/rules/deprecation-filter-bar-deprecated-props/README.md +7 -0
  10. package/rules/deprecation-filter-bar-deprecated-props/deprecation-filter-bar-deprecated-props.js +14 -3
  11. package/rules/vue-no-redundant-dialog-v-if/README.md +55 -0
  12. package/rules/vue-no-redundant-dialog-v-if/vue-no-redundant-dialog-v-if.js +150 -0
  13. package/rules/vue-no-use-bento-translation-overrides/README.md +14 -0
  14. package/rules/vue-no-use-bento-translation-overrides/vue-no-use-bento-translation-overrides.js +93 -0
  15. package/utils/component-slot-migration.js +22 -4
  16. package/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/__tests__/deprecation-bento-data-grid-cell-action-menu-item-handler.vue +0 -63
  17. package/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/__tests__/eslint.config.js +0 -26
  18. package/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/deprecation-bento-data-grid-cell-action-menu-item-handler.integration.test.ts +0 -24
  19. package/rules/deprecation-bento-data-grid-cell-action-menu-item-handler/deprecation-bento-data-grid-cell-action-menu-item-handler.test.ts +0 -116
  20. package/rules/deprecation-bento-date-range-picker-has-actions-prop/__tests__/deprecation-bento-date-range-picker-has-actions-prop.vue +0 -10
  21. package/rules/deprecation-bento-date-range-picker-has-actions-prop/__tests__/eslint.config.js +0 -29
  22. package/rules/deprecation-bento-date-range-picker-has-actions-prop/__tests__/remove/deprecation-bento-date-range-picker-has-actions-prop.vue +0 -11
  23. package/rules/deprecation-bento-date-range-picker-has-actions-prop/__tests__/remove/eslint.config.js +0 -29
  24. package/rules/deprecation-bento-date-range-picker-has-actions-prop/deprecation-bento-date-range-picker-has-actions-prop.integration.test.ts +0 -47
  25. package/rules/deprecation-bento-date-range-picker-has-actions-prop/deprecation-bento-date-range-picker-has-actions-prop.test.ts +0 -176
  26. package/rules/deprecation-bento-dropdown-size-prop/__tests__/deprecation-bento-dropdown-size-prop.vue +0 -9
  27. package/rules/deprecation-bento-dropdown-size-prop/__tests__/eslint.config.js +0 -26
  28. package/rules/deprecation-bento-dropdown-size-prop/deprecation-bento-dropdown-size-prop.integration.test.ts +0 -33
  29. package/rules/deprecation-bento-dropdown-size-prop/deprecation-bento-dropdown-size-prop.test.ts +0 -101
  30. package/rules/deprecation-bento-popover-modifiers-prop/__tests__/deprecation-bento-popover-modifiers-prop.vue +0 -9
  31. package/rules/deprecation-bento-popover-modifiers-prop/__tests__/eslint.config.js +0 -26
  32. package/rules/deprecation-bento-popover-modifiers-prop/deprecation-bento-popover-modifiers-prop.integration.test.ts +0 -24
  33. package/rules/deprecation-bento-popover-modifiers-prop/deprecation-bento-popover-modifiers-prop.test.ts +0 -109
  34. package/rules/deprecation-bento-timeline-item-variant-prop/__tests__/deprecation-bento-timeline-item-variant-prop.vue +0 -9
  35. package/rules/deprecation-bento-timeline-item-variant-prop/__tests__/eslint.config.js +0 -26
  36. package/rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop.integration.test.ts +0 -35
  37. package/rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop.test.ts +0 -141
  38. package/rules/deprecation-components-aria-label-prop/__tests__/deprecation-components-aria-label-prop.vue +0 -25
  39. package/rules/deprecation-components-aria-label-prop/__tests__/eslint.config.js +0 -26
  40. package/rules/deprecation-components-aria-label-prop/deprecation-components-aria-label-prop.integration.test.ts +0 -36
  41. package/rules/deprecation-components-aria-label-prop/deprecation-components-aria-label-prop.test.ts +0 -194
  42. package/rules/deprecation-components-error-prop/__tests__/deprecation-components-error-prop.vue +0 -17
  43. package/rules/deprecation-components-error-prop/__tests__/eslint.config.js +0 -26
  44. package/rules/deprecation-components-error-prop/deprecation-components-error-prop.integration.test.ts +0 -41
  45. package/rules/deprecation-components-error-prop/deprecation-components-error-prop.test.ts +0 -153
  46. package/rules/deprecation-components-has-error-prop/__tests__/deprecation-components-has-error-prop.vue +0 -13
  47. package/rules/deprecation-components-has-error-prop/__tests__/eslint.config.js +0 -26
  48. package/rules/deprecation-components-has-error-prop/deprecation-components-has-error-prop.integration.test.ts +0 -37
  49. package/rules/deprecation-components-has-error-prop/deprecation-components-has-error-prop.test.ts +0 -122
  50. package/rules/deprecation-components-input-emit/__tests__/deprecation-components-input-emit.vue +0 -22
  51. package/rules/deprecation-components-input-emit/__tests__/eslint.config.js +0 -25
  52. package/rules/deprecation-components-input-emit/deprecation-components-input-emit.integration.test.ts +0 -43
  53. package/rules/deprecation-components-input-emit/deprecation-components-input-emit.test.ts +0 -320
  54. package/rules/deprecation-components-value-prop/__tests__/deprecation-components-value-prop.vue +0 -69
  55. package/rules/deprecation-components-value-prop/__tests__/eslint.config.js +0 -25
  56. package/rules/deprecation-components-value-prop/deprecation-components-value-prop.integration.test.ts +0 -37
  57. package/rules/deprecation-components-value-prop/deprecation-components-value-prop.test.ts +0 -480
  58. package/rules/deprecation-country-custom-usage/__tests__/deprecation-country-custom-usage.vue +0 -93
  59. package/rules/deprecation-country-custom-usage/__tests__/eslint.config.js +0 -25
  60. package/rules/deprecation-country-custom-usage/deprecation-country-custom-usage.integration.test.ts +0 -22
  61. package/rules/deprecation-country-custom-usage/deprecation-country-custom-usage.test.ts +0 -380
  62. package/rules/deprecation-currency-default-slot/__tests__/deprecation-currency-default-slot.vue +0 -7
  63. package/rules/deprecation-currency-default-slot/__tests__/eslint.config.js +0 -24
  64. package/rules/deprecation-currency-default-slot/deprecation-currency-default-slot.integration.test.ts +0 -29
  65. package/rules/deprecation-currency-default-slot/deprecation-currency-default-slot.test.ts +0 -136
  66. package/rules/deprecation-filter-bar-deprecated-props/__tests__/deprecation-filter-bar-deprecated-props.vue +0 -62
  67. package/rules/deprecation-filter-bar-deprecated-props/__tests__/eslint.config.js +0 -25
  68. package/rules/deprecation-filter-bar-deprecated-props/deprecation-filter-bar-deprecated-props.integration.test.ts +0 -22
  69. package/rules/deprecation-filter-bar-deprecated-props/deprecation-filter-bar-deprecated-props.test.ts +0 -467
  70. package/rules/deprecation-input-filter-dropdown-options/__tests__/deprecation-input-filter-dropdown-options.vue +0 -46
  71. package/rules/deprecation-input-filter-dropdown-options/__tests__/eslint.config.js +0 -26
  72. package/rules/deprecation-input-filter-dropdown-options/deprecation-input-filter-dropdown-options.integration.test.ts +0 -27
  73. package/rules/deprecation-input-filter-dropdown-options/deprecation-input-filter-dropdown-options.test.ts +0 -392
  74. package/rules/deprecation-tag-default-slot/__tests__/deprecation-tag-default-slot.vue +0 -5
  75. package/rules/deprecation-tag-default-slot/__tests__/eslint.config.js +0 -24
  76. package/rules/deprecation-tag-default-slot/deprecation-tag-default-slot.integration.test.ts +0 -29
  77. package/rules/deprecation-tag-default-slot/deprecation-tag-default-slot.test.ts +0 -145
  78. package/rules/tailwind-v3-to-bento/__tests__/eslint.config.js +0 -24
  79. package/rules/tailwind-v3-to-bento/__tests__/tailwind-v3-to-bento.vue +0 -15
  80. package/rules/tailwind-v3-to-bento/tailwind-v3-to-bento.integration.test.ts +0 -29
  81. package/rules/tailwind-v3-to-bento/tailwind-v3-to-bento.test.ts +0 -403
  82. package/rules/vue-old-spacer-tokens/__tests__/eslint.config.js +0 -24
  83. package/rules/vue-old-spacer-tokens/__tests__/vue-old-spacer-tokens.vue +0 -5
  84. package/rules/vue-old-spacer-tokens/vue-old-spacer-tokens.integration.test.ts +0 -29
  85. package/rules/vue-old-spacer-tokens/vue-old-spacer-tokens.test.ts +0 -77
@@ -1,93 +0,0 @@
1
- <template>
2
- <div>
3
- <!-- bento-country: variant="custom" only (warn) -->
4
- <bento-country code="NL" variant="custom" />
5
- <!-- bento-country: label only (warn) -->
6
- <bento-country code="NL" label="Custom label" />
7
- <!-- bento-country: both (warn) -->
8
- <bento-country code="NL" variant="custom" label="Custom label" />
9
-
10
- <!-- bento-dropdown-country: label in items only (warn) -->
11
- <bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" />
12
- <!-- bento-dropdown-country: variant="custom" only (warn) -->
13
- <bento-dropdown-country :items="[{ value: 'NL' }]" variant="custom" />
14
- <!-- bento-dropdown-country: both (warn) -->
15
- <bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" variant="custom" />
16
-
17
- <!-- SELECT_COUNTRY filter-bar: label only (warn) -->
18
- <bento-filter-bar
19
- :config="[
20
- {
21
- field: 'c',
22
- label: 'C',
23
- type: BentoFilterItemType.SELECT_COUNTRY,
24
- options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] },
25
- },
26
- ]"
27
- />
28
- <!-- SELECT_COUNTRY filter-bar: variant="custom" only (warn) -->
29
- <bento-filter-bar
30
- :config="[
31
- {
32
- field: 'c',
33
- label: 'C',
34
- type: BentoFilterItemType.SELECT_COUNTRY,
35
- options: { listboxItems: [{ value: 'NL' }], variant: 'custom' },
36
- },
37
- ]"
38
- />
39
- <!-- SELECT_COUNTRY filter-bar: both (warn x2) -->
40
- <bento-filter-bar
41
- :config="[
42
- {
43
- field: 'c',
44
- label: 'C',
45
- type: BentoFilterItemType.SELECT_COUNTRY,
46
- options: { listboxItems: [{ value: 'NL', label: 'Custom label' }], variant: 'custom' },
47
- },
48
- ]"
49
- />
50
-
51
- <!-- SELECT_COUNTRY data-grid: label only (warn) -->
52
- <bento-data-grid
53
- :filters="[
54
- {
55
- field: 'c',
56
- label: 'C',
57
- type: BentoFilterItemType.SELECT_COUNTRY,
58
- options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] },
59
- },
60
- ]"
61
- />
62
- <!-- SELECT_COUNTRY data-grid: variant="custom" only (warn) -->
63
- <bento-data-grid
64
- :filters="[
65
- {
66
- field: 'c',
67
- label: 'C',
68
- type: BentoFilterItemType.SELECT_COUNTRY,
69
- options: { listboxItems: [{ value: 'NL' }], variant: 'custom' },
70
- },
71
- ]"
72
- />
73
- <!-- SELECT_COUNTRY data-grid: both (warn x2) -->
74
- <bento-data-grid
75
- :filters="[
76
- {
77
- field: 'c',
78
- label: 'C',
79
- type: BentoFilterItemType.SELECT_COUNTRY,
80
- options: { listboxItems: [{ value: 'NL', label: 'Custom label' }], variant: 'custom' },
81
- },
82
- ]"
83
- />
84
-
85
- <!-- Valid: non-custom usage -->
86
- <bento-country code="NL" variant="name" />
87
- <bento-dropdown-country :items="[{ value: 'NL' }]" />
88
- </div>
89
- </template>
90
-
91
- <script setup>
92
- import { BentoFilterItemType } from '@adyen/bento-vue2';
93
- </script>
@@ -1,25 +0,0 @@
1
- // eslint.config.js
2
- const { defineConfig } = require('eslint/config');
3
- const vueParser = require('vue-eslint-parser');
4
- const tsParser = require('@typescript-eslint/parser');
5
- const adyenBento = require('@adyen/eslint-plugin-bento');
6
-
7
- module.exports = defineConfig([
8
- {
9
- languageOptions: {
10
- ecmaVersion: 'latest',
11
- sourceType: 'module',
12
- parser: vueParser,
13
- parserOptions: {
14
- parser: tsParser,
15
- },
16
- },
17
- plugins: {
18
- '@adyen/bento': adyenBento,
19
- },
20
- rules: {
21
- '@adyen/bento/deprecation-country-custom-usage': ['warn', { autofix: true }],
22
- },
23
- files: ['**/*.vue'],
24
- },
25
- ]);
@@ -1,22 +0,0 @@
1
- import path from 'node:path';
2
- import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
3
-
4
- describe('@adyen/bento/deprecation-country-custom-usage', () => {
5
- it('should lint with warning', () => {
6
- const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
7
- const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-country-custom-usage.vue');
8
-
9
- const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
10
-
11
- // bento-country: variant only (1) + label only (1) + both (1) = 3
12
- // bento-dropdown-country: label only (1) + variant only (1) + both (1) = 3
13
- // filter-bar: label only (1) + variant only (1) + both (2) = 4
14
- // data-grid: label only (1) + variant only (1) + both (2) = 4
15
- expect(result[0].warningCount).toBe(14);
16
-
17
- expect(result[0].messages[0]).toMatchObject({
18
- ruleId: '@adyen/bento/deprecation-country-custom-usage',
19
- severity: 1,
20
- });
21
- });
22
- });
@@ -1,380 +0,0 @@
1
- import { RuleTester } from 'eslint';
2
- import vueParser from 'vue-eslint-parser';
3
- import tsParser from '@typescript-eslint/parser';
4
- import rule from './deprecation-country-custom-usage';
5
-
6
- const ruleTester = new RuleTester({
7
- languageOptions: {
8
- ecmaVersion: 'latest',
9
- sourceType: 'module',
10
- parser: vueParser,
11
- parserOptions: {
12
- parser: tsParser,
13
- },
14
- },
15
- });
16
-
17
- describe('@adyen/bento/deprecation-country-custom-usage', () => {
18
- /* ------------------------------------------------ */
19
- /* CASE 1: bento-country */
20
- /* ------------------------------------------------ */
21
- ruleTester.run('bento-country', rule, {
22
- valid: [
23
- {
24
- name: 'Valid: variant="name"',
25
- filename: 'test.vue',
26
- code: `<template><bento-country code="NL" variant="name" /></template>`,
27
- },
28
- {
29
- name: 'Valid: no variant or label',
30
- filename: 'test.vue',
31
- code: `<template><bento-country code="NL" /></template>`,
32
- },
33
- {
34
- name: 'Valid: dynamic non-custom variant',
35
- filename: 'test.vue',
36
- code: `<template><bento-country code="NL" :variant="'name'" /></template>`,
37
- },
38
- ],
39
- invalid: [
40
- {
41
- name: 'Invalid: variant="custom" only',
42
- filename: 'test.vue',
43
- code: `<template><bento-country code="NL" variant="custom" /></template>`,
44
- errors: [{ messageId: 'countryCustomVariant' }],
45
- },
46
- {
47
- name: 'Invalid: label only (no variant="custom")',
48
- filename: 'test.vue',
49
- code: `<template><bento-country code="NL" label="Custom label" /></template>`,
50
- errors: [{ messageId: 'countryUnusedLabel' }],
51
- },
52
- {
53
- name: 'Invalid: dynamic label only',
54
- filename: 'test.vue',
55
- code: `<template><bento-country code="NL" :label="customLabel" /></template>`,
56
- errors: [{ messageId: 'countryUnusedLabel' }],
57
- },
58
- {
59
- name: 'Invalid: variant="custom" + label (both)',
60
- filename: 'test.vue',
61
- code: `<template><bento-country code="NL" variant="custom" label="Custom label" /></template>`,
62
- errors: [{ messageId: 'countryCustomVariant' }],
63
- },
64
- {
65
- name: 'Invalid: dynamic variant + label',
66
- filename: 'test.vue',
67
- code: `<template><bento-country code="NL" :variant="'custom'" label="Custom label" /></template>`,
68
- errors: [{ messageId: 'countryCustomVariant' }],
69
- },
70
- {
71
- name: 'Invalid: BentoCountryVariant.CUSTOM + label',
72
- filename: 'test.vue',
73
- code: `<template><bento-country code="NL" :variant="BentoCountryVariant.CUSTOM" label="Custom label" /></template>`,
74
- errors: [{ messageId: 'countryCustomVariant' }],
75
- },
76
- {
77
- name: 'Invalid: v-bind:variant longhand',
78
- filename: 'test.vue',
79
- code: `<template><bento-country code="NL" v-bind:variant="'custom'" label="Custom label" /></template>`,
80
- errors: [{ messageId: 'countryCustomVariant' }],
81
- },
82
- ],
83
- });
84
-
85
- /* ------------------------------------------------ */
86
- /* CASE 2: bento-dropdown-country */
87
- /* ------------------------------------------------ */
88
- ruleTester.run('bento-dropdown-country', rule, {
89
- valid: [
90
- {
91
- name: 'Valid: items without labels',
92
- filename: 'test.vue',
93
- code: `<template><bento-dropdown-country :items="[{ value: 'NL' }, { value: 'BE' }]" /></template>`,
94
- },
95
- {
96
- name: 'Valid: different component with labels',
97
- filename: 'test.vue',
98
- code: `<template><bento-dropdown :items="[{ value: 'NL', label: 'Custom label' }]" /></template>`,
99
- },
100
- {
101
- name: 'Valid: no items prop',
102
- filename: 'test.vue',
103
- code: `<template><bento-dropdown-country /></template>`,
104
- },
105
- {
106
- name: 'Valid: variable reference',
107
- filename: 'test.vue',
108
- code: `<template><bento-dropdown-country :items="myItems" /></template>`,
109
- },
110
- {
111
- name: 'Valid: spread elements only (no crash)',
112
- filename: 'test.vue',
113
- code: `<template><bento-dropdown-country :items="[{ ...obj, value: 'NL' }]" /></template>`,
114
- },
115
- {
116
- name: 'Valid: computed property key',
117
- filename: 'test.vue',
118
- code: `<template><bento-dropdown-country :items="[{ value: 'NL', [key]: 'val' }]" /></template>`,
119
- },
120
- {
121
- name: 'Valid: non-object elements',
122
- filename: 'test.vue',
123
- code: `<template><bento-dropdown-country :items="['NL', 'BE']" /></template>`,
124
- },
125
- ],
126
- invalid: [
127
- {
128
- name: 'Invalid: label in items only',
129
- filename: 'test.vue',
130
- code: `<template><bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" /></template>`,
131
- errors: [{ messageId: 'dropdownCountryCustomLabel' }],
132
- },
133
- {
134
- name: 'Invalid: label in items (internal name)',
135
- filename: 'test.vue',
136
- code: `<template><b-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" /></template>`,
137
- errors: [{ messageId: 'dropdownCountryCustomLabel' }],
138
- },
139
- {
140
- name: 'Invalid: string literal key',
141
- filename: 'test.vue',
142
- code: `<template><bento-dropdown-country :items="[{ value: 'NL', 'label': 'Custom label' }]" /></template>`,
143
- errors: [{ messageId: 'dropdownCountryCustomLabel' }],
144
- },
145
- {
146
- name: 'Invalid: spread + label',
147
- filename: 'test.vue',
148
- code: `<template><bento-dropdown-country :items="[{ ...obj, label: 'Custom label' }]" /></template>`,
149
- errors: [{ messageId: 'dropdownCountryCustomLabel' }],
150
- },
151
- {
152
- name: 'Invalid: variant="custom" only (no label in items)',
153
- filename: 'test.vue',
154
- code: `<template><bento-dropdown-country :items="[{ value: 'NL' }]" variant="custom" /></template>`,
155
- errors: [{ messageId: 'dropdownCountryCustomVariant' }],
156
- },
157
- {
158
- name: 'Invalid: label + variant="custom" (both)',
159
- filename: 'test.vue',
160
- code: `<template><bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" variant="custom" /></template>`,
161
- errors: [{ messageId: 'dropdownCountryCustomLabel' }],
162
- },
163
- ],
164
- });
165
-
166
- /* ------------------------------------------------ */
167
- /* CASE 3: SELECT_COUNTRY filter config */
168
- /* ------------------------------------------------ */
169
- ruleTester.run('SELECT_COUNTRY filter', rule, {
170
- valid: [
171
- {
172
- name: 'Valid: non-custom variant',
173
- filename: 'test.vue',
174
- code: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT_COUNTRY, options: { listboxItems: [{ value: 'NL' }], variant: 'name' } }]" /></template>`,
175
- },
176
- {
177
- name: 'Valid: SELECT type (not SELECT_COUNTRY)',
178
- filename: 'test.vue',
179
- code: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT, options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] } }]" /></template>`,
180
- },
181
- {
182
- name: 'Valid: without options',
183
- filename: 'test.vue',
184
- code: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT_COUNTRY }]" /></template>`,
185
- },
186
- {
187
- name: 'Valid: no label, non-custom variant',
188
- filename: 'test.vue',
189
- code: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT_COUNTRY, options: { listboxItems: [{ value: 'NL' }], variant: 'capital' } }]" /></template>`,
190
- },
191
- ],
192
- invalid: [
193
- {
194
- name: 'Invalid: variant="custom" only',
195
- filename: 'test.vue',
196
- code: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT_COUNTRY, options: { listboxItems: [{ value: 'NL' }], variant: 'custom' } }]" /></template>`,
197
- errors: [{ messageId: 'selectCountryCustom', data: { key: 'variant' } }],
198
- },
199
- {
200
- name: 'Invalid: label only',
201
- filename: 'test.vue',
202
- code: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT_COUNTRY, options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] } }]" /></template>`,
203
- errors: [{ messageId: 'selectCountryCustom', data: { key: 'listboxItems with label' } }],
204
- },
205
- {
206
- name: 'Invalid: both (2 errors)',
207
- filename: 'test.vue',
208
- code: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT_COUNTRY, options: { listboxItems: [{ value: 'NL', label: 'Custom label' }], variant: 'custom' } }]" /></template>`,
209
- errors: [
210
- { messageId: 'selectCountryCustom', data: { key: 'variant' } },
211
- { messageId: 'selectCountryCustom', data: { key: 'listboxItems with label' } },
212
- ],
213
- },
214
- {
215
- name: 'Invalid: BentoCountryVariant.CUSTOM enum',
216
- filename: 'test.vue',
217
- code: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT_COUNTRY, options: { listboxItems: [{ value: 'NL' }], variant: BentoCountryVariant.CUSTOM } }]" /></template>`,
218
- errors: [{ messageId: 'selectCountryCustom', data: { key: 'variant' } }],
219
- },
220
- {
221
- name: 'Invalid: string literal type',
222
- filename: 'test.vue',
223
- code: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: 'BentoSelectCountryFilter', options: { listboxItems: [{ value: 'NL' }], variant: 'custom' } }]" /></template>`,
224
- errors: [{ messageId: 'selectCountryCustom', data: { key: 'variant' } }],
225
- },
226
- {
227
- name: 'Invalid: script-defined config',
228
- filename: 'test.vue',
229
- code: `
230
- <script setup>
231
- const config = [{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT_COUNTRY, options: { listboxItems: [{ value: 'NL' }], variant: 'custom' } }];
232
- </script>
233
- <template><bento-filter-bar :config="config" /></template>
234
- `,
235
- errors: [{ messageId: 'selectCountryCustom', data: { key: 'variant' } }],
236
- },
237
- ],
238
- });
239
-
240
- /* ------------------------------------------------ */
241
- /* AUTOFIX TESTS */
242
- /* ------------------------------------------------ */
243
- ruleTester.run('autofix', rule, {
244
- valid: [],
245
- invalid: [
246
- // CASE 1: bento-country
247
- {
248
- name: 'Autofix: bento-country both → replace with typography',
249
- filename: 'test.vue',
250
- code: `<template><bento-country code="NL" variant="custom" label="Custom label" /></template>`,
251
- output: `<template><bento-typography el="span">Custom label</bento-typography></template>`,
252
- options: [{ autofix: true }],
253
- errors: [{ messageId: 'countryCustomVariant' }],
254
- },
255
- {
256
- name: 'Autofix: bento-country dynamic label both → replace with typography',
257
- filename: 'test.vue',
258
- code: `<template><bento-country code="NL" :variant="'custom'" :label="customLabel" /></template>`,
259
- output: `<template><bento-typography el="span">{{ customLabel }}</bento-typography></template>`,
260
- options: [{ autofix: true }],
261
- errors: [{ messageId: 'countryCustomVariant' }],
262
- },
263
- {
264
- name: 'Autofix: bento-country variant only → remove variant',
265
- filename: 'test.vue',
266
- code: `<template><bento-country code="NL" variant="custom" /></template>`,
267
- output: `<template><bento-country code="NL" /></template>`,
268
- options: [{ autofix: true }],
269
- errors: [{ messageId: 'countryCustomVariant' }],
270
- },
271
- {
272
- name: 'Autofix: bento-country dynamic variant only → remove variant',
273
- filename: 'test.vue',
274
- code: `<template><bento-country code="NL" :variant="BentoCountryVariant.CUSTOM" /></template>`,
275
- output: `<template><bento-country code="NL" /></template>`,
276
- options: [{ autofix: true }],
277
- errors: [{ messageId: 'countryCustomVariant' }],
278
- },
279
- {
280
- name: 'Autofix: bento-country label only → remove label',
281
- filename: 'test.vue',
282
- code: `<template><bento-country code="NL" label="Custom label" /></template>`,
283
- output: `<template><bento-country code="NL" /></template>`,
284
- options: [{ autofix: true }],
285
- errors: [{ messageId: 'countryUnusedLabel' }],
286
- },
287
- {
288
- name: 'Autofix: bento-country dynamic label only → remove label',
289
- filename: 'test.vue',
290
- code: `<template><bento-country code="NL" :label="customLabel" /></template>`,
291
- output: `<template><bento-country code="NL" /></template>`,
292
- options: [{ autofix: true }],
293
- errors: [{ messageId: 'countryUnusedLabel' }],
294
- },
295
-
296
- // CASE 2: bento-dropdown-country
297
- {
298
- name: 'Autofix: dropdown-country both → replace tag + remove variant',
299
- filename: 'test.vue',
300
- code: `<template><bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" variant="custom" /></template>`,
301
- output: `<template><bento-dropdown :items="[{ value: 'NL', label: 'Custom label' }]" /></template>`,
302
- options: [{ autofix: true }],
303
- errors: [{ messageId: 'dropdownCountryCustomLabel' }],
304
- },
305
- {
306
- name: 'Autofix: dropdown-country both with closing tag → replace tag + remove variant',
307
- filename: 'test.vue',
308
- code: `<template><bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" variant="custom"></bento-dropdown-country></template>`,
309
- output: `<template><bento-dropdown :items="[{ value: 'NL', label: 'Custom label' }]"></bento-dropdown></template>`,
310
- options: [{ autofix: true }],
311
- errors: [{ messageId: 'dropdownCountryCustomLabel' }],
312
- },
313
- {
314
- name: 'Autofix: dropdown-country label only → remove labels from items',
315
- filename: 'test.vue',
316
- code: `<template><bento-dropdown-country :items="[{ value: 'NL', label: 'Custom label' }]" /></template>`,
317
- output: `<template><bento-dropdown-country :items="[{ value: 'NL' }]" /></template>`,
318
- options: [{ autofix: true }],
319
- errors: [{ messageId: 'dropdownCountryCustomLabel' }],
320
- },
321
- {
322
- name: 'Autofix: dropdown-country variant only → remove variant',
323
- filename: 'test.vue',
324
- code: `<template><bento-dropdown-country :items="[{ value: 'NL' }]" variant="custom" /></template>`,
325
- output: `<template><bento-dropdown-country :items="[{ value: 'NL' }]" /></template>`,
326
- options: [{ autofix: true }],
327
- errors: [{ messageId: 'dropdownCountryCustomVariant' }],
328
- },
329
-
330
- // CASE 3: SELECT_COUNTRY
331
- {
332
- name: 'Autofix: SELECT_COUNTRY both → change type + remove variant',
333
- filename: 'test.vue',
334
- code: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT_COUNTRY, options: { listboxItems: [{ value: 'NL', label: 'Custom label' }], variant: 'custom' } }]" /></template>`,
335
- output: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT, options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] } }]" /></template>`,
336
- options: [{ autofix: true }],
337
- errors: [
338
- { messageId: 'selectCountryCustom', data: { key: 'variant' } },
339
- { messageId: 'selectCountryCustom', data: { key: 'listboxItems with label' } },
340
- ],
341
- },
342
- {
343
- name: 'Autofix: SELECT_COUNTRY string literal both → change type + remove variant',
344
- filename: 'test.vue',
345
- code: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: 'BentoSelectCountryFilter', options: { listboxItems: [{ value: 'NL', label: 'Custom label' }], variant: 'custom' } }]" /></template>`,
346
- output: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: 'BentoSelectFilter', options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] } }]" /></template>`,
347
- options: [{ autofix: true }],
348
- errors: [
349
- { messageId: 'selectCountryCustom', data: { key: 'variant' } },
350
- { messageId: 'selectCountryCustom', data: { key: 'listboxItems with label' } },
351
- ],
352
- },
353
- {
354
- name: 'Autofix: SELECT_COUNTRY variant only → remove variant property',
355
- filename: 'test.vue',
356
- code: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT_COUNTRY, options: { listboxItems: [{ value: 'NL' }], variant: 'custom' } }]" /></template>`,
357
- output: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT_COUNTRY, options: { listboxItems: [{ value: 'NL' }] } }]" /></template>`,
358
- options: [{ autofix: true }],
359
- errors: [{ messageId: 'selectCountryCustom', data: { key: 'variant' } }],
360
- },
361
- {
362
- name: 'Autofix: SELECT_COUNTRY label only → remove labels from listboxItems',
363
- filename: 'test.vue',
364
- code: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT_COUNTRY, options: { listboxItems: [{ value: 'NL', label: 'Custom label' }] } }]" /></template>`,
365
- output: `<template><bento-filter-bar :config="[{ field: 'c', label: 'C', type: BentoFilterItemType.SELECT_COUNTRY, options: { listboxItems: [{ value: 'NL' }] } }]" /></template>`,
366
- options: [{ autofix: true }],
367
- errors: [{ messageId: 'selectCountryCustom', data: { key: 'listboxItems with label' } }],
368
- },
369
-
370
- // No autofix when disabled
371
- {
372
- name: 'No autofix when autofix is false',
373
- filename: 'test.vue',
374
- code: `<template><bento-country code="NL" variant="custom" label="Custom label" /></template>`,
375
- options: [{ autofix: false }],
376
- errors: [{ messageId: 'countryCustomVariant' }],
377
- },
378
- ],
379
- });
380
- });
@@ -1,7 +0,0 @@
1
- <template>
2
- <bento-currency>
3
- {{ thisIsMyVariableWithCurrencyValue }}
4
- </bento-currency>
5
- </template>
6
-
7
- <script setup></script>
@@ -1,24 +0,0 @@
1
- const { defineConfig } = require('eslint/config');
2
- const vueParser = require('vue-eslint-parser');
3
- const tsParser = require('@typescript-eslint/parser');
4
- const adyenBento = require('@adyen/eslint-plugin-bento');
5
-
6
- module.exports = defineConfig([
7
- {
8
- languageOptions: {
9
- ecmaVersion: 'latest',
10
- sourceType: 'module',
11
- parser: vueParser,
12
- parserOptions: {
13
- parser: tsParser,
14
- },
15
- },
16
- plugins: {
17
- '@adyen/bento': adyenBento,
18
- },
19
- rules: {
20
- '@adyen/bento/deprecation-currency-default-slot': 'warn',
21
- },
22
- files: ['**/*.vue'],
23
- },
24
- ]);
@@ -1,29 +0,0 @@
1
- import path from 'node:path';
2
- import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
3
-
4
- describe('@adyen/bento/deprecation-currency-default-slot', () => {
5
- it('should lint with warning', () => {
6
- // Load .eslintrc
7
- const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
8
- // Load the test file
9
- const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-currency-default-slot.vue');
10
-
11
- // Execute the linter
12
- const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
13
-
14
- // Expects a warning with a suggestion/fix and an error message
15
- expect(result[0].warningCount).toBe(1);
16
- expect(result[0].messages[0]).toStrictEqual({
17
- ruleId: '@adyen/bento/deprecation-currency-default-slot',
18
- severity: 1,
19
- message: '"default" slot is deprecated in favor of the "value" property',
20
- messageId: 'migrateDefaultSlot',
21
- line: 2,
22
- column: 5,
23
- nodeType: 'VElement',
24
- endLine: 4,
25
- endColumn: 22,
26
- fix: { range: [30, 101], text: ' :value="thisIsMyVariableWithCurrencyValue" />' },
27
- });
28
- });
29
- });