@adyen/eslint-plugin-bento 2.6.4 → 2.7.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 2.7.1 (2026-03-04)
+
+This was a version bump only for eslint to align it with other projects, there were no code changes.
+
+
+## 2.7.0 (2026-02-25)
+
+### Miscellaneous Chores
+
+- added deprecation rules to migrate from `value` to `model-value` ([05241680e](https://github.com/Adyen/bento/commit/05241680e))
+
+### ❤️ Thank You
+
+- mafalda
+
+
 ## 2.6.4 (2026-02-19)
 
 This was a version bump only for eslint to align it with other projects, there were no code changes.

package/configs/vue-recommended.js

@@ -11,6 +11,8 @@ module.exports = [
             },
         },
         rules: {
+            '@adyen/bento/deprecation-components-input-emit': 'warn',
+            '@adyen/bento/deprecation-components-value-prop': 'warn',
             '@adyen/bento/deprecation-currency-default-slot': 'warn',
             '@adyen/bento/deprecation-tag-default-slot': 'warn',
             '@adyen/bento/vue-old-spacer-tokens': 'warn',

package/configs/vue-strict.js

@@ -11,6 +11,8 @@ module.exports = [
             },
         },
         rules: {
+            '@adyen/bento/deprecation-components-input-emit': 'error',
+            '@adyen/bento/deprecation-components-value-prop': 'error',
             '@adyen/bento/deprecation-currency-default-slot': 'error',
             '@adyen/bento/deprecation-tag-default-slot': 'error',
             '@adyen/bento/vue-old-spacer-tokens': 'error',

package/index.js

@@ -11,6 +11,8 @@ const plugin = {
         'vue-strict': require('./configs/vue-strict'),
     },
     rules: {
+        'deprecation-components-input-emit': require('./rules/deprecation-components-input-emit/deprecation-components-input-emit'),
+        'deprecation-components-value-prop': require('./rules/deprecation-components-value-prop/deprecation-components-value-prop'),
         'deprecation-currency-default-slot': require('./rules/deprecation-currency-default-slot/deprecation-currency-default-slot'),
         'deprecation-tag-default-slot': require('./rules/deprecation-tag-default-slot/deprecation-tag-default-slot'),
         'vue-old-spacer-tokens': require('./rules/vue-old-spacer-tokens/vue-old-spacer-tokens'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/eslint-plugin-bento",
-  "version": "2.6.4",
+  "version": "2.7.1",
   "description": "Adyen Bento ESLint rules",
   "main": "index.js",
   "files": [

package/rules/deprecation-components-input-emit/README.md

@@ -0,0 +1,160 @@
+# deprecation-components-input-emit
+
+## Description
+
+The `input` emit in the following components is deprecated:
+
+- `bento-date-picker`
+- `bento-date-range-picker`
+- `bento-dropdown`
+- `bento-dropdown-avatar`
+- `bento-dropdown-country`
+- `bento-dropdown-currency`
+- `bento-dropdown-payment-method`
+- `bento-dropdown-tag`
+- `bento-file-uploader`
+- `bento-input-field`
+- `bento-input-field-password`
+- `bento-input-field-phone-number`
+- `bento-checkbox-group`
+- `bento-radio-group`
+- `bento-selection-card-group`
+- `bento-textarea`
+
+Please use `update:model-value` instead.
+
+## Rule Details
+
+This rule reports usages of the deprecated item.
+
+### ❌ Incorrect
+
+```html
+<bento-date-picker @input="handler" />
+```
+
+```html
+<bento-date-range-picker @input="handler" />
+```
+
+```html
+<bento-dropdown @input="handler" />
+```
+
+```html
+<bento-dropdown-avatar @input="handler" />
+```
+
+```html
+<bento-dropdown-country @input="handler" />
+```
+
+```html
+<bento-dropdown-currency @input="handler" />
+```
+
+```html
+<bento-dropdown-payment-method @input="handler" />
+```
+
+```html
+<bento-dropdown-tag @input="handler" />
+```
+
+```html
+<bento-file-uploader @input="handler" />
+```
+
+```html
+<bento-input-field @input="handler" />
+```
+
+```html
+<bento-input-field-password @input="handler" />
+```
+
+```html
+<bento-input-field-phone-number @input="handler" />
+```
+
+```html
+<bento-checkbox-group @input="handler" />
+```
+
+```html
+<bento-radio-group @input="handler" />
+```
+
+```html
+<bento-selection-card-group @input="handler" />
+```
+
+```html
+<bento-textarea @input="handler" />
+```
+
+### ✅ Correct
+
+```html
+<bento-date-picker @update:model-value="handler" />
+```
+
+```html
+<bento-date-range-picker @update:model-value="handler" />
+```
+
+```html
+<bento-dropdown @update:model-value="handler" />
+```
+
+```html
+<bento-dropdown-avatar @update:model-value="handler" />
+```
+
+```html
+<bento-dropdown-country @update:model-value="handler" />
+```
+
+```html
+<bento-dropdown-currency @update:model-value="handler" />
+```
+
+```html
+<bento-dropdown-payment-method @update:model-value="handler" />
+```
+
+```html
+<bento-dropdown-tag @update:model-value="handler" />
+```
+
+```html
+<bento-file-uploader @update:model-value="handler" />
+```
+
+```html
+<bento-input-field @update:model-value="handler" />
+```
+
+```html
+<bento-input-field-password @update:model-value="handler" />
+```
+
+```html
+<bento-input-field-phone-number @update:model-value="handler" />
+```
+
+```html
+<bento-checkbox-group @update:model-value="handler" />
+```
+
+```html
+<bento-radio-group @update:model-value="handler" />
+```
+
+```html
+<bento-selection-card-group @update:model-value="handler" />
+```
+
+```html
+<bento-textarea @update:model-value="handler" />
+```

package/rules/deprecation-components-input-emit/__tests__/deprecation-components-input-emit.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <bento-date-picker @input="handler" />
+        <bento-date-range-picker @input="handler" />
+        <bento-dropdown @input="handler" />
+        <bento-dropdown-avatar @input="handler" />
+        <bento-dropdown-country @input="handler" />
+        <bento-dropdown-currency @input="handler" />
+        <bento-dropdown-payment-method @input="handler" />
+        <bento-dropdown-tag @input="handler" />
+        <bento-file-uploader @input="handler" />
+        <bento-input-field @input="handler" />
+        <bento-input-field-password @input="handler" />
+        <bento-input-field-phone-number @input="handler" />
+        <bento-checkbox-group @input="handler" />
+        <bento-radio-group @input="handler" />
+        <bento-selection-card-group @input="handler" />
+        <bento-textarea @input="handler" />
+    </div>
+</template>
+
+<script setup></script>

package/rules/deprecation-components-input-emit/__tests__/eslint.config.js

@@ -0,0 +1,25 @@
+const { defineConfig } = require('eslint/config');
+const vueParser = require('vue-eslint-parser');
+const tsParser = require('@typescript-eslint/parser');
+const adyenBento = require('@adyen/eslint-plugin-bento');
+
+module.exports = defineConfig([
+    {
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            parser: vueParser,
+            parserOptions: {
+                parser: tsParser,
+            },
+        },
+        plugins: {
+            '@adyen/bento': adyenBento,
+        },
+        rules: {
+            // Register the specific rule we are testing
+            '@adyen/bento/deprecation-components-input-emit': 'warn',
+        },
+        files: ['**/*.vue'],
+    },
+]);

package/rules/deprecation-components-input-emit/deprecation-components-input-emit.integration.test.ts

@@ -0,0 +1,35 @@
+import path from 'node:path';
+import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
+
+describe('@adyen/bento/deprecation-components-input-emit', () => {
+    it('should lint with warning', () => {
+        // Load .eslintrc
+        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
+        // Load the test file generated alongside this one
+        const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-components-input-emit.vue');
+
+        // Execute the linter
+        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+
+        /* ------------------------------------------------ */
+        /* CASE 2: SINGLE REPLACEMENT                       */
+        /* ------------------------------------------------ */
+
+        // For emits/slots, we generate 1 example FOR EACH component.
+        expect(result[0].warningCount).toBe(16);
+
+        // Verify the message structure on the first error found.
+        // Since the rule is the same for all components, checking the first one confirms the message is correct.
+        expect(result[0].messages[0]).toMatchObject({
+            ruleId: '@adyen/bento/deprecation-components-input-emit',
+            severity: 1,
+
+            messageId: 'deprecation',
+            message: `The "input" emit is deprecated. Please use "update:model-value" instead.`,
+
+            fix: expect.objectContaining({
+                text: expect.stringContaining('update:model-value'),
+            }),
+        });
+    });
+});

package/rules/deprecation-components-input-emit/deprecation-components-input-emit.js

@@ -0,0 +1,48 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description:
+                'Deprecates usage of input emit in bento-date-picker, bento-date-range-picker, bento-dropdown, bento-dropdown-avatar, bento-dropdown-country, bento-dropdown-currency, bento-dropdown-payment-method, bento-dropdown-tag, bento-file-uploader, bento-input-field, bento-input-field-password, bento-input-field-phone-number, bento-checkbox-group, bento-radio-group, bento-selection-card-group, bento-textarea',
+            category: 'Deprecations',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecation-components-input-emit/README.md',
+            recommended: true,
+        },
+        messages: {
+            deprecation: `The "input" emit is deprecated. Please use "update:model-value" instead.`,
+        },
+        fixable: 'code',
+        schema: [],
+    },
+
+    /** @param {RuleContext} context */
+    create(context) {
+        /* ------------------------------------------------ */
+        /* CASE 3: EMIT DEPRECATION (Multiple Components)   */
+        /* ------------------------------------------------ */
+        return VueUtils.defineTemplateBodyVisitor(context, {
+            // @click="foo" or v-on:click="foo"
+            [`VElement:matches([name="bento-date-picker"], [name="BentoDatePicker"], [name="bento-date-range-picker"], [name="BentoDateRangePicker"], [name="bento-dropdown"], [name="BentoDropdown"], [name="bento-dropdown-avatar"], [name="BentoDropdownAvatar"], [name="bento-dropdown-country"], [name="BentoDropdownCountry"], [name="bento-dropdown-currency"], [name="BentoDropdownCurrency"], [name="bento-dropdown-payment-method"], [name="BentoDropdownPaymentMethod"], [name="bento-dropdown-tag"], [name="BentoDropdownTag"], [name="bento-file-uploader"], [name="BentoFileUploader"], [name="bento-input-field"], [name="BentoInputField"], [name="bento-input-field-password"], [name="BentoInputFieldPassword"], [name="bento-input-field-phone-number"], [name="BentoInputFieldPhoneNumber"], [name="bento-checkbox-group"], [name="BentoCheckboxGroup"], [name="bento-radio-group"], [name="BentoRadioGroup"], [name="bento-selection-card-group"], [name="BentoSelectionCardGroup"], [name="bento-textarea"], [name="BentoTextarea"]) > VStartTag > VAttribute[directive=true][key.name.name="on"][key.argument.name="input"]`](
+                node
+            ) {
+                context.report({
+                    node,
+                    messageId: 'deprecation',
+                    fix(fixer) {
+                        return fixer.replaceText(node.key.argument, 'update:model-value');
+                    },
+                });
+            },
+        });
+    },
+};

package/rules/deprecation-components-input-emit/deprecation-components-input-emit.test.ts

@@ -0,0 +1,280 @@
+import { RuleTester } from 'eslint';
+import vueParser from 'vue-eslint-parser';
+import tsParser from '@typescript-eslint/parser';
+import deprecationComponentsInputEmit from './deprecation-components-input-emit';
+
+const ruleTester = new RuleTester({
+    languageOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        parser: vueParser,
+        parserOptions: {
+            parser: tsParser,
+        },
+    },
+});
+
+describe('@adyen/bento/deprecation-components-input-emit', () => {
+    ruleTester.run('deprecation-components-input-emit', deprecationComponentsInputEmit, {
+        valid: [
+            {
+                name: 'Valid usage for bento-date-picker',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-date-picker @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-date-range-picker',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-date-range-picker @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-dropdown',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-dropdown @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-dropdown-avatar',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-dropdown-avatar @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-dropdown-country',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-dropdown-country @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-dropdown-currency',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-dropdown-currency @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-dropdown-payment-method',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-dropdown-payment-method @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-dropdown-tag',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-dropdown-tag @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-file-uploader',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-file-uploader @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-input-field',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-input-field @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-input-field-password',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-input-field-password @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-input-field-phone-number',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-input-field-phone-number @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-checkbox-group',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-checkbox-group @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-radio-group',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-radio-group @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-selection-card-group',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-selection-card-group @update:model-value="val" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid usage for bento-textarea',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-textarea @update:model-value="val" />
+                </template>
+                `,
+            },
+        ],
+        invalid: [
+            {
+                name: 'Invalid: Emit event on bento-date-picker',
+                filename: 'test.vue',
+                code: `<template><bento-date-picker @input="val" /></template>`,
+                output: `<template><bento-date-picker @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-date-range-picker',
+                filename: 'test.vue',
+                code: `<template><bento-date-range-picker @input="val" /></template>`,
+                output: `<template><bento-date-range-picker @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-dropdown',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown @input="val" /></template>`,
+                output: `<template><bento-dropdown @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-dropdown-avatar',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown-avatar @input="val" /></template>`,
+                output: `<template><bento-dropdown-avatar @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-dropdown-country',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown-country @input="val" /></template>`,
+                output: `<template><bento-dropdown-country @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-dropdown-currency',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown-currency @input="val" /></template>`,
+                output: `<template><bento-dropdown-currency @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-dropdown-payment-method',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown-payment-method @input="val" /></template>`,
+                output: `<template><bento-dropdown-payment-method @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-dropdown-tag',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown-tag @input="val" /></template>`,
+                output: `<template><bento-dropdown-tag @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-file-uploader',
+                filename: 'test.vue',
+                code: `<template><bento-file-uploader @input="val" /></template>`,
+                output: `<template><bento-file-uploader @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-input-field',
+                filename: 'test.vue',
+                code: `<template><bento-input-field @input="val" /></template>`,
+                output: `<template><bento-input-field @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-input-field-password',
+                filename: 'test.vue',
+                code: `<template><bento-input-field-password @input="val" /></template>`,
+                output: `<template><bento-input-field-password @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-input-field-phone-number',
+                filename: 'test.vue',
+                code: `<template><bento-input-field-phone-number @input="val" /></template>`,
+                output: `<template><bento-input-field-phone-number @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-checkbox-group',
+                filename: 'test.vue',
+                code: `<template><bento-checkbox-group @input="val" /></template>`,
+                output: `<template><bento-checkbox-group @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-radio-group',
+                filename: 'test.vue',
+                code: `<template><bento-radio-group @input="val" /></template>`,
+                output: `<template><bento-radio-group @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-selection-card-group',
+                filename: 'test.vue',
+                code: `<template><bento-selection-card-group @input="val" /></template>`,
+                output: `<template><bento-selection-card-group @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Invalid: Emit event on bento-textarea',
+                filename: 'test.vue',
+                code: `<template><bento-textarea @input="val" /></template>`,
+                output: `<template><bento-textarea @update:model-value="val" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+        ],
+    });
+});