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

2021-01-31 17:09:29 +01:00 · 2021-01-31 17:09:29 +01:00 · 152b86fb4f
parent 6be07b1001
commit 152b86fb4f
14 changed files with 43 additions and 43 deletions
--- a/src/components/utils/IsoDateInput.vue
+++ b/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>
--- a/src/pages/Dashboard.vue
+++ b/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>
--- a/src/plugins/balance/components/BalanceAdd.vue
+++ b/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 />
--- a/src/plugins/balance/components/BalanceTransfer.vue
+++ b/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 />
--- a/src/plugins/balance/components/Transaction.vue
+++ b/src/plugins/balance/components/Transaction.vue
@ -1,13 +1,13 @@
 <template>
-  <div>
-    <q-card flat square>
-      <q-card-section class="row items-center justify-between" horizontal>
-        <div class="col-5 text-left q-px-sm">
-          <div v-bind:class="{ 'text-negative': isNegative() }" class="text-weight-bold text-h6">
-            <span v-if="isNegative()">-</span>{{ transaction.amount.toFixed(2) }}&#8239;€
-          </div>
-          <div class="text-caption">{{ text }}</div>
-          <div class="text-caption">{{ timeStr }}</div>
+<div>
+  <q-card flat square>
+    <q-card-section class="row items-center justify-between" horizontal>
+      <div class="col-5 text-left q-px-sm">
+        <div
+          :class="{ 'text-negative': isNegative() }"
+          class="text-weight-bold text-h6"
+        >
+          <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>
--- a/src/plugins/balance/pages/MainPage.vue
+++ b/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>
--- a/src/plugins/balance/pages/Overview.vue
+++ b/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">
-            <q-td :props="props" v-bind:class="{ 'bg-grey': props.row.reversal_id != null }">
+          <template #body-cell="props">
+            <q-td :props="props" :class="{ 'bg-grey': props.row.reversal_id != null }">
              {{ props.value }}
            </q-td>
          </template>
--- a/src/plugins/schedule/components/management/CreateEvent.vue
+++ b/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"
--- a/src/plugins/schedule/components/management/Eventtypes.vue
+++ b/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">
--- a/src/plugins/schedule/components/management/Job.vue
+++ b/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]"
      />
--- a/src/plugins/schedule/components/management/JobTypes.vue
+++ b/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">
--- a/src/plugins/schedule/pages/Management.vue
+++ b/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 }) {
-    const store = <Store<StateInterface>>root.$store;
-
-    const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT, store));
+  setup() {
+    const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT));

    interface Tab {
      name: string;
--- a/src/plugins/user/components/UserSelector.vue
+++ b/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 {
--- a/src/plugins/user/components/Widget.vue
+++ b/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