Skip to content

Commit 94a3606

Browse files
guerganaguergana
authored
Update linting rules to Vue3 (#836)
This PR adds vue/vue3-strongly-recommended to check for vue linting violations in vue3 Bug: T351644
1 parent f3e0159 commit 94a3606

21 files changed

+743
-597
lines changed

‎.eslintrc.js‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,12 @@ module.exports = {
66
extends: [
77
'eslint:recommended',
88
'@vue/typescript/recommended',
9-
'plugin:vue/essential',
9+
'plugin:vue/vue3-strongly-recommended',
1010
],
1111
parser: 'vue-eslint-parser',
1212
rules: {
1313
'max-len': [ 'error', 120 ],
1414
'no-multiple-empty-lines' : ['error', { 'max': 1 }],
15-
'vue/multi-word-component-names' : [ 'off' ],
16-
// Migration changes
17-
'vue/no-deprecated-v-bind-sync': 'off',
18-
'vue/no-deprecated-slot-attribute': 'off',
19-
'vue/require-explicit-emits': 'off',
20-
'vue/no-deprecated-v-on-native-modifier': 'off',
21-
'vue/no-deprecated-slot-scope-attribute': 'off',
22-
'vue/no-v-for-template-key-on-child': 'off',
23-
'vue/no-deprecated-destroyed-lifecycle': 'off',
24-
'vue/no-v-model-argument': 'off',
25-
'vue/no-multiple-template-root': 'off' // TODO: remove this rule in T351644
15+
'vue/multi-word-component-names' : [ 'off' ]
2616
},
2717
};

‎app/Http/Controllers/ResultsController.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,10 @@ public function index(MismatchGetRequest $request, WikibaseAPIClient $wikidata):
6565
$props = array_merge(
6666
[
6767
'user' => $user,
68-
'item_ids' => $requestedItemIds,
68+
'itemIds' => $requestedItemIds,
6969
// Use wikidata to fetch labels for found entity ids
7070
'labels' => $wikidata->getLabels($entityIds, $lang),
71-
'formatted_values' => $formattedTimeValues,
71+
'formattedValues' => $formattedTimeValues,
7272
],
7373
// only add 'results' prop if mismatches have been found
7474
$mismatches->isNotEmpty() ? [ 'results' => $mismatches->groupBy('item_id') ] : []

‎resources/js/Components/AuthWidget.vue‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
<template>
2-
<div class="auth-widget_wrapper">
3-
<div class="auth-widget" v-if="user">
4-
<a :href="`https://www.wikidata.org/wiki/User:${user.name}`">
5-
<img src="images/user.svg" class="icon-user" /><span class="username">{{ user.name }}</span>
6-
</a>
7-
<a href="/auth/logout">{{ $i18n('log-out') }}</a>
8-
</div>
9-
<a v-else href="/auth/login">{{ $i18n('log-in') }}</a>
2+
<div class="auth-widget_wrapper">
3+
<div
4+
class="auth-widget"
5+
v-if="user"
6+
>
7+
<a :href="`https://www.wikidata.org/wiki/User:${user.name}`">
8+
<img
9+
src="images/user.svg"
10+
class="icon-user"
11+
><span class="username">{{ user.name }}</span>
12+
</a>
13+
<a href="/auth/logout">{{ $i18n('log-out') }}</a>
1014
</div>
11-
15+
<a
16+
v-else
17+
href="/auth/login"
18+
>{{ $i18n('log-in') }}</a>
19+
</div>
1220
</template>
1321

1422
<script setup lang="ts">

‎resources/js/Components/ItemIdSearchTextarea.vue‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
<template>
22
<cdx-field
3-
:status="validationError ? validationError.type : 'default'"
4-
:messages="validationError ? validationError.message : null"
3+
:status="validationError ? validationError.type : 'default'"
4+
:messages="validationError ? validationError.message : null"
55
>
6-
<div class="progress-bar-wrapper">
7-
<cdx-progress-bar v-if="loading" :aria-label="$i18n('item-form-progress-bar-aria-label')" />
8-
</div>
9-
<cdx-text-area
10-
:label="$i18n('item-form-id-input-label')"
11-
:placeholder="$i18n('item-form-id-input-placeholder')"
12-
:rows="8"
13-
:status="validationError ? validationError.type : 'default'"
14-
v-model="textareaInputValue"
6+
<div class="progress-bar-wrapper">
7+
<cdx-progress-bar
8+
v-if="loading"
9+
:aria-label="$i18n('item-form-progress-bar-aria-label')"
1510
/>
16-
<template #label>
17-
{{$i18n('item-form-id-input-label')}}
18-
</template>
11+
</div>
12+
<template #label>
13+
{{ $i18n('item-form-id-input-label') }}
14+
</template>
15+
<cdx-text-area
16+
:label="$i18n('item-form-id-input-label')"
17+
:placeholder="$i18n('item-form-id-input-placeholder')"
18+
:rows="8"
19+
:status="validationError ? validationError.type : 'default'"
20+
v-model="textareaInputValue"
21+
/>
1922
</cdx-field>
2023
</template>
2124

‎resources/js/Components/LanguageSelector.vue‎

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,37 @@
11
<template>
2-
<div class="mismatchfinder__language-selector">
3-
<div class="languageSelector__mobile-header">
4-
<span>{{ $i18n('language-selector-mobile-header') }}</span>
5-
<button @click="onCloseMenu">
6-
<img :src="closeUrl" :alt="$i18n( 'language-selector-close-button-label' )">
7-
</button>
8-
</div>
9-
<LanguageSelectorInput
10-
ref="input"
11-
:value="searchInput"
12-
:placeholder="$i18n( 'language-selector-input-placeholder' )"
13-
@input="onInput"
14-
@clear="onClearInputValue"
15-
@tab="onCloseMenu"
16-
@arrowDown="onArrowDown"
17-
@arrowUp="onArrowUp"
18-
@enter="onEnter"
19-
@escape="onCloseMenu"
20-
/>
21-
<LanguageSelectorOptionsMenu
22-
tabindex="-1"
23-
:languages="shownLanguages"
24-
:highlighted-index="highlightedIndex"
25-
@select="onSelect"
26-
>
27-
<template #no-results>
28-
<slot name="no-results"/>
29-
</template>
30-
</LanguageSelectorOptionsMenu>
31-
</div>
2+
<div class="mismatchfinder__language-selector">
3+
<div class="languageSelector__mobile-header">
4+
<span>{{ $i18n('language-selector-mobile-header') }}</span>
5+
<button @click="onCloseMenu">
6+
<img
7+
:src="closeUrl"
8+
:alt="$i18n( 'language-selector-close-button-label' )"
9+
>
10+
</button>
11+
</div>
12+
<LanguageSelectorInput
13+
ref="input"
14+
:value="searchInput"
15+
:placeholder="$i18n( 'language-selector-input-placeholder' )"
16+
@input="onInput"
17+
@clear="onClearInputValue"
18+
@tab="onCloseMenu"
19+
@arrow-down="onArrowDown"
20+
@arrow-up="onArrowUp"
21+
@enter="onEnter"
22+
@escape="onCloseMenu"
23+
/>
24+
<LanguageSelectorOptionsMenu
25+
tabindex="-1"
26+
:languages="shownLanguages"
27+
:highlighted-index="highlightedIndex"
28+
@select="onSelect"
29+
>
30+
<template #no-results>
31+
<slot name="no-results" />
32+
</template>
33+
</LanguageSelectorOptionsMenu>
34+
</div>
3235
</template>
3336

3437
<script setup lang="ts">

‎resources/js/Components/LanguageSelectorInput.vue‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,37 @@
11
<template>
2-
<div class="languageSelector__input__wrapper">
3-
<div class="languageSelector__input-left-side">
4-
<div class="languageSelector__input__search-icon">
5-
<img :src="searchUrl" alt="">
6-
</div>
7-
<input
8-
ref="input"
9-
type="text"
10-
class="languageSelector__input"
11-
:value="value"
12-
:placeholder="placeholder"
13-
@input="onInput"
14-
@keydown.tab="$emit('tab')"
15-
@keydown.down.prevent="$emit('arrowDown')"
16-
@keydown.up.prevent="$emit('arrowUp')"
17-
@keydown.enter="$emit('enter')"
18-
@keydown.esc.prevent="$emit('escape')"
19-
>
20-
</div>
21-
<button
22-
class="languageSelector__input__clear-button"
23-
:class="clearBtnVisible ? 'languageSelector__input__clear-button--visible' : ''"
24-
@click="onClearInputValue"
25-
>
26-
<img :src="clearUrl" :alt="$i18n( 'language-selector-clear-button-label' )">
27-
</button>
28-
</div>
2+
<div class="languageSelector__input__wrapper">
3+
<div class="languageSelector__input-left-side">
4+
<div class="languageSelector__input__search-icon">
5+
<img
6+
:src="searchUrl"
7+
alt=""
8+
>
9+
</div>
10+
<input
11+
ref="input"
12+
type="text"
13+
class="languageSelector__input"
14+
:value="value"
15+
:placeholder="placeholder"
16+
@input="onInput"
17+
@keydown.tab="$emit('tab')"
18+
@keydown.down.prevent="$emit('arrowDown')"
19+
@keydown.up.prevent="$emit('arrowUp')"
20+
@keydown.enter="$emit('enter')"
21+
@keydown.esc.prevent="$emit('escape')"
22+
>
23+
</div>
24+
<button
25+
class="languageSelector__input__clear-button"
26+
:class="clearBtnVisible ? 'languageSelector__input__clear-button--visible' : ''"
27+
@click="onClearInputValue"
28+
>
29+
<img
30+
:src="clearUrl"
31+
:alt="$i18n( 'language-selector-clear-button-label' )"
32+
>
33+
</button>
34+
</div>
2935
</template>
3036

3137
<script setup lang="ts">

‎resources/js/Components/LanguageSelectorOptionsMenu.vue‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,38 @@
11
<template>
2-
<div
3-
ref="container"
4-
class="languageSelector__options-menu"
5-
role="listbox"
6-
:aria-label="$i18n( 'language-selector-options-menu-aria-label' )"
7-
>
8-
<div
9-
ref="languagesList"
10-
class="languageSelector__options-menu__languages-list"
11-
tabindex="-1">
12-
<div
13-
v-for="( language, index ) in languages"
14-
:key="language.code"
15-
:aria-selected="language.code === selectedLanguageCode || null"
16-
class="languageSelector__options-menu__languages-list__item"
17-
:class="{
18-
'language--selected': language.code === selectedLanguageCode,
19-
highlight: highlightedIndex === index
20-
}"
21-
role="option"
22-
@click="onSelect( language.code )"
23-
>
24-
{{ language.autonym }}
25-
</div>
26-
</div>
27-
<div
28-
v-if="languages.length === 0"
29-
class="languageSelector__options-menu__no-results"
30-
role="option">
31-
<slot name="no-results"/>
32-
</div>
33-
</div>
2+
<div
3+
ref="container"
4+
class="languageSelector__options-menu"
5+
role="listbox"
6+
:aria-label="$i18n( 'language-selector-options-menu-aria-label' )"
7+
>
8+
<div
9+
ref="languagesList"
10+
class="languageSelector__options-menu__languages-list"
11+
tabindex="-1"
12+
>
13+
<div
14+
v-for="( language, index ) in languages"
15+
:key="language.code"
16+
:aria-selected="language.code === selectedLanguageCode || null"
17+
class="languageSelector__options-menu__languages-list__item"
18+
:class="{
19+
'language--selected': language.code === selectedLanguageCode,
20+
highlight: highlightedIndex === index
21+
}"
22+
role="option"
23+
@click="onSelect( language.code )"
24+
>
25+
{{ language.autonym }}
26+
</div>
27+
</div>
28+
<div
29+
v-if="languages.length === 0"
30+
class="languageSelector__options-menu__no-results"
31+
role="option"
32+
>
33+
<slot name="no-results" />
34+
</div>
35+
</div>
3436
</template>
3537

3638
<script setup lang="ts">

‎resources/js/Components/LoadingOverlay.vue‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
<template>
2-
<div class="loading-indicator" v-if="shown">
3-
<div class="overlay" >
4-
<cdx-progress-bar aria-label="Indeterminate progress bar"/>
5-
</div>
2+
<div
3+
class="loading-indicator"
4+
v-if="shown"
5+
>
6+
<div class="overlay">
7+
<cdx-progress-bar aria-label="Indeterminate progress bar" />
68
</div>
9+
</div>
710
</template>
811

912
<script setup lang="ts">

0 commit comments

Comments
 (0)