Address `vue/custom-event-name-casing` offenses
# :exclamation: COMMUNITY CONTRIBUTORS, PLEASE ONLY PICK UP ONE DIRECTORY OF <20 FILES AT A TIME TO KEEP MERGE REQUESTS MANAGEABLE :exclamation:
The [`vue/custom-event-name-casing` ESLint rule](https://eslint.vuejs.org/rules/custom-event-name-casing.html#kebab-case) was enabled in https://gitlab.com/gitlab-org/gitlab/-/merge_requests/214221+ and uncovered many offenses
This epic tracks the progress for addressing existing offenses in the files that are currently ignored in [`.eslint_todo/vue-custom-event-name-casing.mjs`](https://gitlab.com/gitlab-org/gitlab/-/blob/740b73bc9be4a8723b7edfe86cb3d61205698438/.eslint_todo/vue-custom-event-name-casing.mjs).
Example from the [docs](https://eslint.vuejs.org/rules/custom-event-name-casing.html#kebab-case). We are standardizing on `kebab case` and not allowing `camelCase`.
```vue
<template>
<!-- ✓ GOOD -->
<button @click="$emit('my-event')" />
<!-- ✗ BAD -->
<button @click="$emit('myEvent')" />
</template>
<script>
export default {
methods: {
onClick() {
/* ✓ GOOD */
this.$emit('my-event')
/* ✗ BAD */
this.$emit('myEvent')
}
}
}
</script>
```
### Implementation
1. Pick a directory of files from [.eslint_todo/vue-custom-event-name-casing.mjs](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.eslint_todo/vue-custom-event-name-casing.mjs)
2. Change the event names in all the files in the directory to be `kebab-case`
3. Update the event names of all usage of changed event names
4. Create a screen recording of the components working as expected in the application
5. Remove the modified files from [.eslint_todo/vue-custom-event-name-casing.mjs](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.eslint_todo/vue-custom-event-name-casing.mjs) and [.eslint_todo/vue-v-on-event-hyphenation.mjs](https://eslint.vuejs.org/rules/v-on-event-hyphenation.html) (The eslint file `.eslint_todo/vue-custom-event-name-casing.mjs` enforces the rule that components must emit kebab-case custom events. The eslint file `.eslint_todo/vue-v-on-event-hyphenation.mjs` enforces the rule that components must consume kebab-case custom events.)
6. Stage all changes
```bash
git add .
```
5. Run Prettier on all staged files
```bash
yarn run lint:prettier:staged:fix
```
6. Stage all new changes
```bash
git add .
```
7. Run eslint to verify all files were fixed or fix any any issues
```bash
node scripts/frontend/eslint.js --no-warn-ignored --no-error-on-unmatched-pattern --format gitlab .eslint_todo/vue-custom-event-name-casing.mjs ./path/to/directory
```
8. Open a merge request to update any alt text that doesn't follow the guidelines. For details with how to open a merge request, see Contribute to the GitLab documentation.
In the merge request description, include this text:
```md
Related to: https://gitlab.com/gitlab-org/gitlab/-/issues/583558
```
### Support
Support contact: @aturinske
issue