Bump Vue ESLint config

frontend/package.json

@@ -63,7 +63,7 @@
     "@vercel/node": "^2.6.3",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.0.2",
     "@vue/tsconfig": "^0.4.0",
     "cypress": "^13.6.4",

frontend/src/components/design-system/containers/ElectionCardComponent.vue

@@ -37,14 +37,14 @@
 
 export interface Props {
   candidates?: Candidate[];
   candidatesCount?: number | null;
   electionName?: string | null;
   electionDateFrom?: string | null;
   electionDateTo?: string | null;
   updated?: string | null;
   district?: string | null;
   election?: string | null;
   uuid?: string | null;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -135,7 +135,7 @@
     <StackComponent spacing="medium">
       <StackComponent spacing="extra-small">
         <TitleText tag="h4" size="small">{{ electionName }}</TitleText>
-        <BodyText size="small" v-if="electionDateFrom && electionDateTo">
+        <BodyText v-if="electionDateFrom && electionDateTo" size="small">
           {{ getDurationDate(electionDateFrom, electionDateTo) }}
         </BodyText>
       </StackComponent>
@@ -151,8 +151,8 @@
             class="full-width"
           >
             <AvatarComponent
-              :backgroundImage="candidate.image"
-              :backgroundColor="
+              :background-image="candidate.image"
+              :background-color="
                 idx == 0
                   ? 'rgb(var(--color-primary-bg-strong))'
                   : 'rgb(var(--color-primary-bg))'
@@ -248,7 +248,7 @@
             padding="medium"
             border
             corner="bottom-left"
-            borderRadius="medium"
+            border-radius="medium"
             class="full-width"
           >
             <StackComponent horizontal spacing="medium" centered>
@@ -313,7 +313,7 @@
           padding="medium"
           border
           corner="bottom-left"
-          borderRadius="medium"
+          border-radius="medium"
           class="full-width"
         >
           <StackComponent horizontal spacing="medium" centered>

frontend/src/routes/comparison/ComparisonGrid.vue

@@ -317,7 +317,7 @@ export interface Source {
                       answer.candidate_id === candidateId &&
                       answer.question_id === question.id,
                   )[0]?.sources as Source[]"
-                  v-bind:key="source.url"
+                  :key="source.url"
                 >
                   <li>
                     <a :href="source.url">{{

frontend/src/routes/profile/AuthPageVue.vue

@@ -111,7 +111,7 @@ const { t } = useI18n();
                 $t('routes.profile.AuthPageVue.log-in')
               }}</template>
             </TitleText>
-            <BodyText strong size="small" v-if="type === 'registration'">
+            <BodyText v-if="type === 'registration'" strong size="small">
               {{ $t('routes.profile.AuthPageVue.opinion') }}
             </BodyText>
           </StackComponent>

frontend/src/routes/profile/EmailAuthPageVue.vue

@@ -130,21 +130,21 @@ const handleSubmit = async () => {
             >
               <StackComponent spacing="medium" centered stretched>
                 <TextInputComponent
+                  v-model="emailAddress"
                   required
                   label="E-mail"
                   type="email"
                   placeholder="E-mail"
                   :value="emailAddress"
-                  v-model="emailAddress"
                   :icon="mdiEmailOutline"
                   :disabled="posting"
                 />
 
                 <ButtonComponent
                   kind="filled"
                   color="primary"
-                  @click.prevent="handleSubmit"
                   :loading="posting"
+                  @click.prevent="handleSubmit"
                 >
                   {{ $t('routes.profile.EmailAuthPageVue.confirmation') }}
                   <template #iconAfter>

frontend/src/routes/profile/EmailFormPageVue.vue

@@ -151,7 +151,7 @@ const handleSubmit = async () => {
           </ResponsiveWrapper>
         </template>
 
-        <NavigationBar transparent :with-logo="false" v-if="step === 1">
+        <NavigationBar v-if="step === 1" transparent :with-logo="false">
           <template #right>
             <IconButton kind="link" @click="handleClose">
               <IconComponent
@@ -164,7 +164,7 @@ const handleSubmit = async () => {
       </template>
       <StaticContentLayout size="small">
         <StackComponent spacing="medium" centered>
-          <TitleText tag="p" size="medium" v-if="step === 0">
+          <TitleText v-if="step === 0" tag="p" size="medium">
             {{ texts[step][type].title }}
           </TitleText>
 
@@ -176,31 +176,31 @@ const handleSubmit = async () => {
             </TitleText>
           </template>
 
-          <BodyText strong size="medium" v-if="step === 0">
+          <BodyText v-if="step === 0" strong size="medium">
             {{ $t('routes.profile.EmailFormPageVue.notification') }}
           </BodyText>
 
-          <BodyText size="medium" centered v-if="step === 1">
+          <BodyText v-if="step === 1" size="medium" centered>
             {{ texts[step][type].info }}
             <BodyText strong size="medium"> {{ emailAddress }} </BodyText>
           </BodyText>
 
-          <BodyText tag="p" size="medium" centered v-if="step === 0">
+          <BodyText v-if="step === 0" tag="p" size="medium" centered>
             {{ texts[step][type].info }}
           </BodyText>
 
-          <BodyText tag="p" size="medium" centered v-if="step === 1">
+          <BodyText v-if="step === 1" tag="p" size="medium" centered>
             {{ $t('routes.profile.EmailFormPageVue.about-spam') }}
           </BodyText>
 
-          <FormComponent @submit.prevent="handleSubmit" v-if="step === 0">
+          <FormComponent v-if="step === 0" @submit.prevent="handleSubmit">
             <TextInputComponent
+              v-model="emailAddress"
               required
               label="E-mail"
               type="email"
               placeholder="E-mail"
               :value="emailAddress"
-              v-model="emailAddress"
               :icon="mdiEmailOutline"
               :disabled="posting"
               :error="emailAddressError"
@@ -209,8 +209,8 @@ const handleSubmit = async () => {
             <ButtonComponent
               kind="filled"
               color="primary"
-              @click.prevent="handleSubmit"
               :loading="posting"
+              @click.prevent="handleSubmit"
             >
               {{ $t('routes.profile.EmailFormPageVue.send-confirm') }}
               <template #iconAfter>

frontend/src/routes/profile/ProfilePage.vue

@@ -65,10 +65,7 @@ if (!userStore.user) router.push(appRoutes.login);
       </ResponsiveWrapper>
 
       <TimelineComponent style="margin-top: 2rem">
-        <TimelineItemComponent
-          v-for="(answer, idx) in answers"
-          v-bind:key="idx"
-        >
+        <TimelineItemComponent v-for="(answer, idx) in answers" :key="idx">
           <ElectionCardWrapperComponent :answer="answer" />
         </TimelineItemComponent>
 

frontend/src/routes/profile/ProfileSettingsPage.vue

@@ -122,22 +122,22 @@ const handleLogout = async () => {
         <StackComponent spacing="large" centered>
           <FormComponent
             class="w-full"
-            @submit.prevent="onSubmit"
             :success="formSavedSuccess"
+            @submit.prevent="onSubmit"
           >
             <TextInputComponent
               label="Celé jméno"
               type="text"
               placeholder="Jan Novák"
               class="w-full"
-              :modelValue="user?.displayName"
+              :model-value="user?.displayName"
               :icon="mdiAccountOutline"
-              @update:modelValue="
+              :error="validateInput(user?.displayName)"
+              @update:model-value="
                 (newVal) => {
                   if (user) user.displayName = newVal;
                 }
               "
-              :error="validateInput(user?.displayName)"
             />
 
             <TextInputComponent
@@ -147,9 +147,9 @@ const handleLogout = async () => {
               type="email"
               placeholder="E-mail"
               class="w-full"
-              :modelValue="user?.email"
+              :model-value="user?.email"
               :icon="mdiEmailOutline"
-              @update:modelValue="
+              @update:model-value="
                 (newVal) => {
                   if (user) user.email = newVal;
                 }
@@ -245,8 +245,8 @@ const handleLogout = async () => {
               kind="filled"
               size="medium"
               color="primary"
-              @click.prevent="handleDeleteUserClick"
               center
+              @click.prevent="handleDeleteUserClick"
             >
               {{
                 $t('routes.profile.ProfileSettingsPage.button-delete-profile')

frontend/src/routes/result/ResultCandidateCard.vue

@@ -148,7 +148,7 @@ const toggleClick = () => {
             ? candidate?.parties?.[0].name
             : candidate?.name
         }}</BodyText>
-        <BodyText size="medium" v-if="expert">
+        <BodyText v-if="expert" size="medium">
           postoje z verejných zdrojov
         </BodyText>
         <!--