@adyen/eslint-plugin-bento 2.15.0 → 2.17.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 2.17.0 (2026-06-16)
+
+This was a version bump only for eslint to align it with other projects, there were no code changes.
+
+
+## 2.16.0 (2026-06-09)
+
+### Features
+
+- added eslint rule readme to mcp `get-deprecations` tool ([44b9ce380](https://github.com/Adyen/bento/commit/44b9ce380))
+
+### ❤️ Thank You
+
+- erice
+
+
 ## 2.15.0 (2026-06-03)
 
 ### Bug Fixes

package/package.json

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

package/rules/deprecation-components-error-prop/README.md

@@ -14,6 +14,10 @@ Please use `error-message` instead.
 > both displays a message and applies error styling. A direct rename is not type-safe — you must also update the bound
 > value from a boolean to an error message string.
 
+| Deprecated prop | Replacement prop | Type change          |
+| --------------- | ---------------- | -------------------- |
+| `error`         | `error-message`  | `boolean` → `string` |
+
 ## Rule Details
 
 This rule reports usages of the deprecated `error` prop and provides an IDE suggestion (not an autofix) to rename it.
@@ -21,27 +25,155 @@ This rule reports usages of the deprecated `error` prop and provides an IDE sugg
 ### ❌ Incorrect
 
 ```html
-<bento-dropdown error="value" /> <bento-dropdown :error="value" />
+<!-- Static boolean -->
+<bento-dropdown :error="true" :items="items" label="Country" />
+
+<!-- Dynamic binding -->
+<bento-dropdown :error="hasError" :items="items" label="Country" />
 ```
 
 ```html
-<bento-input-field error="value" /> <bento-input-field :error="value" />
+<bento-input-field :error="true" label="Email" />
+
+<bento-input-field :error="hasError" label="Email" />
 ```
 
 ```html
-<bento-input-field-phone-number error="value" /> <bento-input-field-phone-number :error="value" />
+<bento-input-field-phone-number :error="true" label="Phone number" />
+
+<bento-input-field-phone-number :error="hasError" label="Phone number" />
 ```
 
 ### ✅ Correct
 
 ```html
-<bento-dropdown error-message="Error message text" />
+<!-- Static error message -->
+<bento-dropdown error-message="Please select a country" :items="items" label="Country" />
+
+<!-- Dynamic error message driven by validation -->
+<bento-dropdown :error-message="errorMessage" :items="items" label="Country" />
+```
+
+```html
+<bento-input-field error-message="Enter a valid email address" label="Email" />
+
+<bento-input-field :error-message="errorMessage" label="Email" />
+```
+
+```html
+<bento-input-field-phone-number error-message="Enter a valid phone number" label="Phone number" />
+
+<bento-input-field-phone-number :error-message="errorMessage" label="Phone number" />
+```
+
+## Migration Examples
+
+### Before — static boolean on `bento-dropdown`
+
+```html
+<template>
+    <bento-dropdown :error="true" :items="items" label="Country" />
+</template>
+```
+
+### After — static error message on `bento-dropdown`
+
+```html
+<template>
+    <bento-dropdown error-message="Please select a country" :items="items" label="Country" />
+</template>
 ```
 
+### Before — dynamic validation on `bento-input-field`
+
 ```html
-<bento-input-field error-message="Error message text" />
+<template>
+    <bento-input-field :error="hasError" v-model="email" label="Email" />
+</template>
+
+<script setup lang="ts">
+    const email = ref('');
+    const hasError = ref(false);
+
+    const validate = () => {
+        hasError.value = !email.value.includes('@');
+    };
+</script>
 ```
 
+### After — dynamic validation with error message on `bento-input-field`
+
+```html
+<template>
+    <bento-input-field :error-message="errorMessage" v-model="email" label="Email" />
+</template>
+
+<script setup lang="ts">
+    const email = ref('');
+    const errorMessage = ref<string | null>(null);
+
+    const validate = () => {
+        errorMessage.value = !email.value.includes('@') ? 'Enter a valid email address' : null;
+    };
+</script>
+```
+
+### Before — phone number validation
+
 ```html
-<bento-input-field-phone-number error-message="Error message text" />
+<template>
+    <bento-input-field-phone-number
+        :error="hasError"
+        v-model="phone"
+        :selected-country="country"
+        label="Phone number"
+        @input:valid="onValid"
+        @blur="validate"
+    />
+</template>
+
+<script setup lang="ts">
+    const phone = ref('');
+    const country = ref('US');
+    const hasError = ref(false);
+    const isValid = ref(false);
+
+    const onValid = (validity: boolean) => {
+        isValid.value = validity;
+    };
+
+    const validate = () => {
+        hasError.value = !isValid.value && !!phone.value;
+    };
+</script>
+```
+
+### After — phone number validation with error message
+
+```html
+<template>
+    <bento-input-field-phone-number
+        :error-message="errorMessage"
+        v-model="phone"
+        :selected-country="country"
+        label="Phone number"
+        @input:valid="onValid"
+        @blur="validate"
+    />
+</template>
+
+<script setup lang="ts">
+    const phone = ref('');
+    const country = ref('US');
+    const errorMessage = ref<string | null>(null);
+    const isValid = ref(false);
+
+    const onValid = (validity: boolean) => {
+        isValid.value = validity;
+    };
+
+    const validate = () => {
+        errorMessage.value = !isValid.value && !!phone.value ? 'Enter a valid phone number' : null;
+    };
+</script>
 ```

package/rules/deprecation-components-has-error-prop/README.md

@@ -7,32 +7,129 @@ The `hasError` prop in the following components is deprecated:
 - `bento-checkbox-group`
 - `bento-radio-group`
 
-Please use `errorMessage` instead.
+Please use `error-message` instead.
 
-> **Note:** The `hasError` prop is a `boolean` that only toggles error styling, while `errorMessage` is a `string` that
-> both displays a message and applies error styling. A direct rename is not type-safe — you must also update the bound
-> value from a boolean to an error message string.
+> **Note:** The `has-error` prop is a `boolean` that only toggles error styling, while `error-message` is a `string`
+> that both displays a message and applies error styling. A direct rename is not type-safe — you must also update the
+> bound value from a boolean to an error message string.
+
+| Deprecated prop | Replacement prop | Type change          |
+| --------------- | ---------------- | -------------------- |
+| `has-error`     | `error-message`  | `boolean` → `string` |
 
 ## Rule Details
 
-This rule reports usages of the deprecated `hasError` prop and provides an IDE suggestion (not an autofix) to rename it.
+This rule reports usages of the deprecated `has-error` prop and provides an IDE suggestion (not an autofix) to rename
+it.
 
 ### ❌ Incorrect
 
 ```html
-<bento-checkbox-group has-error="value" /> <bento-checkbox-group :has-error="value" />
+<!-- Static boolean -->
+<bento-checkbox-group :has-error="true" :items="items" label="Permissions" />
+
+<!-- Dynamic binding -->
+<bento-checkbox-group :has-error="hasError" :items="items" label="Permissions" />
 ```
 
 ```html
-<bento-radio-group has-error="value" /> <bento-radio-group :has-error="value" />
+<bento-radio-group :has-error="true" :items="items" label="Priority" />
+
+<bento-radio-group :has-error="hasError" :items="items" label="Priority" />
 ```
 
 ### ✅ Correct
 
 ```html
-<bento-checkbox-group errorMessage="Error message text" />
+<!-- Group-level error: pass a string message to error-message -->
+<bento-checkbox-group error-message="Select at least one option" :items="items" label="Permissions" />
+
+<!-- Dynamic error message driven by validation -->
+<bento-checkbox-group :error-message="errorMessage" :items="items" label="Permissions" />
+```
+
+```html
+<bento-radio-group error-message="Please select an option" :items="items" label="Priority" />
+
+<bento-radio-group :error-message="errorMessage" :items="items" label="Priority" />
+```
+
+## Migration Examples
+
+### Before — static boolean
+
+```html
+<template>
+    <bento-checkbox-group :has-error="true" :items="items" label="Toppings" />
+</template>
+```
+
+### After — static error message
+
+```html
+<template>
+    <bento-checkbox-group error-message="Select at least one topping" :items="items" label="Toppings" />
+</template>
+```
+
+### Before — dynamic validation
+
+```html
+<template>
+    <bento-checkbox-group :has-error="hasError" :items="items" label="Toppings" />
+</template>
+
+<script setup lang="ts">
+    const hasError = ref(false);
+
+    const validate = () => {
+        hasError.value = selectedToppings.value.length === 0;
+    };
+</script>
+```
+
+### After — dynamic validation with error message
+
+```html
+<template>
+    <bento-checkbox-group :error-message="errorMessage" :items="items" label="Toppings" />
+</template>
+
+<script setup lang="ts">
+    const errorMessage = ref<string | null>(null);
+
+    const validate = () => {
+        errorMessage.value = selectedToppings.value.length === 0 ? 'Select at least one topping' : null;
+    };
+</script>
 ```
 
+### Before — item-level `hasError`
+
 ```html
-<bento-radio-group errorMessage="Error message text" />
+<template>
+    <bento-checkbox-group :items="items" label="Permissions" />
+</template>
+
+<script setup lang="ts">
+    const items = [
+        { value: 'read', label: 'Read', hasError: true },
+        { value: 'write', label: 'Write' },
+    ];
+</script>
+```
+
+### After — item-level `errorMessage`
+
+```html
+<template>
+    <bento-checkbox-group :items="items" label="Permissions" />
+</template>
+
+<script setup lang="ts">
+    const items = [
+        { value: 'read', label: 'Read', errorMessage: 'Read permission is required' },
+        { value: 'write', label: 'Write' },
+    ];
+</script>
 ```

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

@@ -2,7 +2,7 @@
 
 ## Description
 
-The `input` emit in the following components is deprecated:
+The `@input` event listener in the following components is deprecated:
 
 - `bento-date-picker`
 - `bento-date-range-picker`
@@ -21,11 +21,28 @@ The `input` emit in the following components is deprecated:
 - `bento-selection-card-group`
 - `bento-textarea`
 
-Please use `update:model-value` instead.
+Please use `@update:model-value` instead.
+
+| Deprecated event | Replacement event     | Autofix available          |
+| ---------------- | --------------------- | -------------------------- |
+| `@input`         | `@update:model-value` | Yes (opt-in via `autofix`) |
+
+> **⚠️ Caveat — `v-model` combined with `@input`**
+>
+> Bento Vue 2 components emit **both** `input` (deprecated) and `update:model-value` on every value change for backward
+> compatibility. In Vue 2, `v-model` internally listens to `@input`. If you autofix `@input` to `@update:model-value`
+> while keeping `v-model`, you end up with `v-model` listening to `@input` **and** an explicit `@update:model-value`
+> handler — both of which fire on every change. This causes race conditions because the handler may read the model value
+> before `v-model`'s `@input` listener has propagated the update.
+>
+> In this case, **do not rely on autofix alone**. You must also replace `v-model` with an explicit `:model-value`
+> binding so that a single `@update:model-value` handler controls both the model update and any side effects. See the
+> [Migration Examples](#migration-examples) below.
 
 ## Rule Details
 
-This rule reports usages of the deprecated item.
+This rule reports usages of the deprecated `@input` event and can optionally autofix them to `@update:model-value`.
+Autofix is disabled by default and can be enabled with the `autofix` option.
 
 ### ❌ Incorrect
 
@@ -93,6 +110,18 @@ This rule reports usages of the deprecated item.
 <bento-textarea @input="handler" />
 ```
 
+```html
+<!-- v-on:input directive syntax is also reported -->
+<bento-input-field v-on:input="handler" />
+```
+
+```html
+<!-- ⚠️ v-model + @input — autofix alone is NOT safe -->
+<bento-input-field v-model="email" @input="onEmailChange" />
+
+<bento-dropdown v-model="country" @input="onCountryChange" :items="items" />
+```
+
 ### ✅ Correct
 
 ```html
@@ -158,3 +187,141 @@ This rule reports usages of the deprecated item.
 ```html
 <bento-textarea @update:model-value="handler" />
 ```
+
+```html
+<!-- v-model without a separate handler — no change needed -->
+<bento-input-field v-model="email" />
+```
+
+```html
+<!-- v-model + @input migrated: split v-model into explicit binding + handler -->
+<bento-input-field :model-value="email" @update:model-value="onEmailChange" />
+
+<bento-dropdown :model-value="country" @update:model-value="onCountryChange" :items="items" />
+```
+
+## Migration Examples
+
+If `v-model` is used alongside `@input`, you must also replace `v-model` with `:model-value` — see Case 2. Otherwise,
+renaming `@input` to `@update:model-value` is sufficient — see Cases 1 and 3.
+
+### Case 1 — standalone `@input` (safe to autofix)
+
+The simplest case: `@input` is used without `v-model`. Rename it to `@update:model-value`.
+
+#### Before
+
+```html
+<template>
+    <bento-dropdown @input="onSelect" :items="countries" label="Country" />
+</template>
+
+<script setup lang="ts">
+    const onSelect = (value: string) => {
+        console.log('Selected:', value);
+    };
+</script>
+```
+
+#### After
+
+```html
+<template>
+    <bento-dropdown @update:model-value="onSelect" :items="countries" label="Country" />
+</template>
+
+<script setup lang="ts">
+    const onSelect = (value: string) => {
+        console.log('Selected:', value);
+    };
+</script>
+```
+
+### Case 2 — `v-model` + `@input` (autofix NOT safe — requires manual split)
+
+When `v-model` is used alongside `@input`, autofix alone will cause a dual-emission race condition. You must replace
+`v-model` with an explicit `:model-value` binding and merge the update logic into a single `@update:model-value`
+handler.
+
+#### Before — `v-model` + `@input`
+
+```html
+<template>
+    <bento-dropdown v-model="country" @input="onCountryChange" :items="countries" label="Country" />
+</template>
+
+<script setup lang="ts">
+    const country = ref('');
+
+    const onCountryChange = (value: string) => {
+        fetchCities(value);
+    };
+</script>
+```
+
+#### ❌ Broken — after autofix only (dual-emission race condition)
+
+```html
+<template>
+    <!-- v-model internally listens to @input, while @update:model-value listens to the new event.
+    The component emits BOTH events on every change, causing a race condition:
+    onCountryChange may read `country` before v-model's @input handler has updated it. -->
+    <bento-dropdown v-model="country" @update:model-value="onCountryChange" :items="countries" label="Country" />
+</template>
+```
+
+#### ✅ Correct — split `v-model` and merge handlers
+
+Replace `v-model` with `:model-value` and merge the update logic into one handler:
+
+```html
+<template>
+    <bento-dropdown :model-value="country" @update:model-value="onCountryChange" :items="countries" label="Country" />
+</template>
+
+<script setup lang="ts">
+    const country = ref('');
+
+    const onCountryChange = (value: string) => {
+        country.value = value;
+        fetchCities(value);
+    };
+</script>
+```
+
+### Case 3 — explicit `:model-value` + `@input` (safe to autofix)
+
+When `:model-value` is already used instead of `v-model`, there is no dual-emission conflict. Rename `@input` to
+`@update:model-value`.
+
+#### Before — `:model-value` + `@input`
+
+```html
+<template>
+    <bento-checkbox-group :model-value="selected" @input="onSelect" :items="items" label="Toppings" />
+</template>
+
+<script setup lang="ts">
+    const selected = ref([]);
+
+    const onSelect = (value: string[]) => {
+        selected.value = value;
+    };
+</script>
+```
+
+#### After — rename to `@update:model-value`
+
+```html
+<template>
+    <bento-checkbox-group :model-value="selected" @update:model-value="onSelect" :items="items" label="Toppings" />
+</template>
+
+<script setup lang="ts">
+    const selected = ref([]);
+
+    const onSelect = (value: string[]) => {
+        selected.value = value;
+    };
+</script>
+```