[Vue3] Fixed some eslint warnings on template part of vue files

src/components/utils/IsoDateInput.vue

@@ -5,13 +5,13 @@
     :label="label"
     :value="getDateTime()"
     :placeholder="placeholder"
-    v-on:input="dateTimeChanged"
+    @input="dateTimeChanged"
     :rules="customRules"
   >
-    <template v-slot:append>
+    <template #append>
       <q-icon name="event" class="cursor-pointer" v-if="type == 'date' || type == 'datetime'">
         <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
-          <q-date :value="getDate()" mask="YYYY-MM-DD" v-on:input="dateChanged">
+          <q-date :value="getDate()" mask="YYYY-MM-DD" @input="dateChanged">
             <div class="row items-center justify-end">
               <q-btn v-close-popup label="Schließen" color="primary" flat />
             </div>
@@ -24,7 +24,7 @@
         v-if="type == 'time' || type == 'datetime'"
       >
         <q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale">
-          <q-time :value="getTime()" mask="HH:mm" v-on:input="timeChanged">
+          <q-time :value="getTime()" mask="HH:mm" @input="timeChanged">
             <div class="row items-center justify-end">
               <q-btn v-close-popup label="Schließen" color="primary" flat />
             </div>

src/pages/Dashboard.vue

@@ -5,7 +5,7 @@
     class="fit row justify-around items-start q-col-gutter-sm"
   >
     <div v-for="(item, index) in widgets" :key="index" class="col-4 full-height col-sm-6 col-xs-12">
-      <component v-bind:is="item" />
+      <component :is="item" />
     </div>
   </q-page>
 </template>

src/plugins/balance/components/BalanceAdd.vue

@@ -2,7 +2,7 @@
   <q-card>
     <BalanceHeader
       @update:user="userUpdated"
-      :showSelector="showSelector"
+      :show-selector="showSelector"
       @open-history="openHistory"
     />
     <q-separator />

src/plugins/balance/components/BalanceTransfer.vue

@@ -2,7 +2,7 @@
   <q-card>
     <BalanceHeader
       @update:user="senderUpdated"
-      :showSelector="showSelector"
+      :show-selector="showSelector"
       @open-history="openHistory"
     />
     <q-separator />

src/plugins/balance/components/Transaction.vue

@@ -1,13 +1,13 @@
 <template>
-  <div>
+<div>
-    <q-card flat square>
+  <q-card flat square>
-      <q-card-section class="row items-center justify-between" horizontal>
+    <q-card-section class="row items-center justify-between" horizontal>
-        <div class="col-5 text-left q-px-sm">
+      <div class="col-5 text-left q-px-sm">
-          <div v-bind:class="{ 'text-negative': isNegative() }" class="text-weight-bold text-h6">
+        <div
-            <span v-if="isNegative()">-</span>{{ transaction.amount.toFixed(2) }}&#8239;€
+          :class="{ 'text-negative': isNegative() }"
-          </div>
+          class="text-weight-bold text-h6"
-          <div class="text-caption">{{ text }}</div>
+        >
-          <div class="text-caption">{{ timeStr }}</div>
+          <span v-if="isNegative()">-</span>{{ transaction.amount.toFixed(2) }}&#8239;€
         </div>
         <div class="col-5 q-px-sm text-center">
           <div class="text-subtitle1" v-if="isReversed">Storniert</div>

src/plugins/balance/pages/MainPage.vue

@@ -32,9 +32,9 @@
         </q-item>
       </q-list>
       <q-list v-if="show">
-        <div v-for="(transaction, index) in transactions" v-bind:key="index" class="col-sm-12">
+        <div v-for="(transaction, index) in transactions" :key="index" class="col-sm-12">
           <!-- TODO: In Vue3 use v-model:transaction="..." -->
-          <Transaction :transaction.sync="transactions[index]" />
+          <Transaction v-model:transaction="transactions[index]" />
         </div>
       </q-list>
     </q-drawer>

src/plugins/balance/pages/Overview.vue

@@ -12,16 +12,16 @@
           :data="data"
           :columns="columns"
           row-key="id"
-          :pagination.sync="pagination"
+          v-model:pagination="pagination"
           :loading="loading"
           @request="onRequest"
           binary-state-sort
         >
-          <template v-slot:top>
+          <template #top>
             <q-toggle v-model="showCancelled" label="Stornierte einblenden" />
           </template>
-          <template v-slot:body-cell="props">
+          <template #body-cell="props">
-            <q-td :props="props" v-bind:class="{ 'bg-grey': props.row.reversal_id != null }">
+            <q-td :props="props" :class="{ 'bg-grey': props.row.reversal_id != null }">
               {{ props.value }}
             </q-td>
           </template>

src/plugins/schedule/components/management/CreateEvent.vue

@@ -40,11 +40,11 @@
           <q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" />
         </q-card-section>
 
-        <q-card-section v-for="(job, index) in event.jobs" v-bind:key="index">
+        <q-card-section v-for="(job, index) in event.jobs" :key="index">
           <q-card class="q-my-auto">
             <job
               :job="job"
-              :jobCanDelete="jobDeleteDisabled"
+              :job-can-delete="jobDeleteDisabled"
               @set-start="setStart"
               @set-required="setRequired"
               @set-end="setEnd"

src/plugins/schedule/components/management/Eventtypes.vue

@@ -19,13 +19,13 @@
       <q-card>
         <q-card-section>
           <q-table title="Veranstaltungstypen" :data="rows" row-key="jobid" :columns="columns">
-            <template v-slot:top-right>
+            <template #top-right>
               <q-input dense v-model="newEventType" placeholder="Neuer Typ" />
 
               <div></div>
               <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />
             </template>
-            <template v-slot:body-cell-actions="props">
+            <template #body-cell-actions="props">
               <!-- <q-btn :label="item"> -->
               <!-- {{ item.row.name }} -->
               <q-td :props="props" align="right" :auto-width="true">

src/plugins/schedule/components/management/Job.vue

@@ -4,7 +4,7 @@
       <IsoDateInput
         class="col-xs-12 col-sm-6 q-pa-sm"
         :value="job.start"
-        v-on:input="setStart"
+        @input="setStart"
         label="Beginn"
         type="datetime"
         :rules="[noValidDate, notEmpty]"
@@ -13,7 +13,7 @@
         ref="bla"
         class="col-xs-12 col-sm-6 q-pa-sm"
         :value="job.end"
-        v-on:input="setEnd"
+        @input="setEnd"
         label="Ende"
         type="datetime"
         :rules="[noValidDate, isAfterDate, notEmpty]"
@@ -29,7 +29,7 @@
         class="col-xs-12 col-sm-6 q-pa-sm"
         :value="job.type"
         :options="jobtypes"
-        v-on:input="setJobType"
+        @input="setJobType"
         option-label="name"
         option-value="name"
         map-options
@@ -52,7 +52,7 @@
         label="Beschreibung"
         type="textarea"
         :value="job.comment"
-        v-on:input="setComment"
+        @input="setComment"
         filled
         :rules="[notEmpty]"
       />

src/plugins/schedule/components/management/JobTypes.vue

@@ -19,13 +19,13 @@
       <q-card>
         <q-card-section>
           <q-table title="Diensttypen" :data="rows" row-key="jobid" :columns="columns">
-            <template v-slot:top-right>
+            <template #top-right>
               <q-input dense v-model="newJob" placeholder="Neuer Typ" />
 
               <div></div>
               <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />
             </template>
-            <template v-slot:body-cell-actions="props">
+            <template #body-cell-actions="props">
               <!-- <q-btn :label="item"> -->
               <!-- {{ item.row.name }} -->
               <q-td :props="props" align="right" :auto-width="true">

src/plugins/schedule/pages/Management.vue

@@ -50,8 +50,6 @@ import { computed, defineComponent, ref } from 'vue';
 import Eventtypes from '../components/management/Eventtypes.vue';
 import JobTypes from '../components/management/JobTypes.vue';
 import CreateEvent from '../components/management/CreateEvent.vue';
-import { Store } from 'vuex';
-import { StateInterface } from 'src/store';
 import { hasPermission } from 'src/utils/permission';
 import { PERMISSIONS } from '../permissions';
 import { Screen } from 'quasar';
@@ -59,10 +57,8 @@ import { Screen } from 'quasar';
 export default defineComponent({
   name: 'EventManagement',
   components: { CreateEvent, Eventtypes, JobTypes },
-  setup(_, { root }) {
+  setup() {
-    const store = <Store<StateInterface>>root.$store;
+    const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT));
-
-    const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT, store));
 
     interface Tab {
       name: string;

src/plugins/user/components/UserSelector.vue

@@ -3,7 +3,7 @@
     filled
     :label="label"
     @input="updated"
-    :value="user"
+    :value="modelValue"
     :options="users"
     option-label="display_name"
     option-value="userid"
@@ -12,13 +12,17 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onBeforeMount } from 'vue';
+import { computed, defineComponent, Prop, onBeforeMount } from 'vue';
 import { useStore } from 'vuex';
 import { UserSessionState } from '../store';
 
 export default defineComponent({
   name: 'UserSelector',
-  props: { user: { required: true, type: Object }, label: { type: String, default: 'Benutzer' } },
+  props: {
+    label: { type: String, default: 'Benutzer' },
+    modelValue: { required: true, type: Object } as Prop<FG.User>,
+  },
+  emits: { 'update:modelValue': (user: FG.User) => !!user },
   setup(_, { emit }) {
     const store = useStore<UserSessionState>();
 
@@ -30,7 +34,7 @@ export default defineComponent({
 
     const users = computed(() => store.state.users.users);
     const updated = (value: FG.User) => {
-      emit('update:user', value);
+      emit('update:modelValue', value);
     };
 
     return {

src/plugins/user/components/Widget.vue

@@ -14,7 +14,7 @@
         <span v-if="hasBirthday">Herzlichen Glückwunsch zum Geburtstag!<br /></span>
         <span v-if="birthday.length > 0"
           >Heute <span v-if="birthday.length === 1">hat </span><span v-else>haben </span
-          ><span v-for="(user, index) in birthday" v-bind:key="index"
+          ><span v-for="(user, index) in birthday" :key="index"
             >{{ user.display_name }}<span v-if="index < birthday.length - 1">, </span></span
           >
           Geburtstag.</span