fix: clear 23 template lint errors in the Vue components

eslint.config.js

@@ -27,6 +27,7 @@ const browserGlobals = {
     URLSearchParams: 'readonly',
     XMLHttpRequest: 'readonly',
     MutationObserver: 'readonly',
+    ResizeObserver: 'readonly',
     getComputedStyle: 'readonly',
     alert: 'readonly',
     confirm: 'readonly',
@@ -95,6 +96,7 @@ export default [
                 beforeAll: 'readonly',
                 afterAll: 'readonly',
                 jest: 'readonly',
+                global: 'readonly',
                 require: 'readonly',
                 module: 'readonly',
             },

resources/js/components/AlertBanner.vue

@@ -1,8 +1,7 @@
-<template xmlns="http://www.w3.org/1999/html">
+<template>
   <div>
     <b-alert v-for="alert in alertsNotDismissed" :key="'alert-' + alert.id"
-             :variant="alert.variant"
-             variant="secondary" dismissible class="information-alert mb-2" @dismissed="dismissed(alert.id)" show>
+             :variant="alert.variant || 'secondary'" dismissible class="information-alert mb-2" @dismissed="dismissed(alert.id)" show>
       <div class="d-sm-flex flex-row justify-content-between align-items-center">
         <div class="action-text-left float-left d-flex flex-row">
           <div class="action-text mb-0">

resources/js/components/DeviceCategorySelect.vue

@@ -16,14 +16,13 @@
       :taggable="false"
       selectLabel=""
       ref="multiselect"
-      @select=""
       :selectedLabel="allowEmpty ? __('partials.remove') : null"
       @open="onOpen"
     >
     </multiselect>
     <div v-if="iconVariant !== 'none'" v-b-popover.html.left="__('devices.tooltip_category')" class="ml-3 mt-2">
       <b-img class="icon clickable" :src="imageUrl('/icons/info_ico_black.svg')" v-if="iconVariant === 'black'" />
-      <b-img class="icon clickable" :src="imageUrl('/icons/info_ico_green.svg')" v-else="iconVariant === 'brand'" />
+      <b-img class="icon clickable" :src="imageUrl('/icons/info_ico_green.svg')" v-else />
     </div>
     <div class="multiselect__content-wrapper d-none" />
   </div>

resources/js/components/DeviceModel.vue

@@ -3,7 +3,7 @@
     <b-input v-model="mValue" :placeholder="placeholder || __('devices.model_if_known')" size="lg" class="marg" :disabled="disabled" />
     <div v-if="iconVariant !== 'none'" v-b-popover.html.left="__('devices.tooltip_model')" class="ml-3 mt-2">
       <b-img class="icon clickable" :src="imageUrl('/icons/info_ico_black.svg')" v-if="iconVariant === 'black'" />
-      <b-img class="icon clickable" :src="imageUrl('/icons/info_ico_green.svg')" v-else="iconVariant === 'brand'" />
+      <b-img class="icon clickable" :src="imageUrl('/icons/info_ico_green.svg')" v-else />
     </div>
   </div>
 </template>

resources/js/components/DeviceNotes.vue

@@ -3,7 +3,7 @@
     <b-textarea rows="6" @change="$emit('update:notes', $event)" :placeholder="__('devices.placeholder_notes')" :value="notes" :disabled="disabled" />
     <div v-if="iconVariant !== 'none'" v-b-popover.html.left="__('devices.tooltip_notes')" class="ml-3 mt-2">
       <b-img class="icon clickable" :src="imageUrl('/icons/info_ico_black.svg')" v-if="iconVariant === 'black'" />
-      <b-img class="icon clickable" :src="imageUrl('/icons/info_ico_green.svg')" v-else="iconVariant === 'brand'" />
+      <b-img class="icon clickable" :src="imageUrl('/icons/info_ico_green.svg')" v-else />
     </div>
   </div>
 </template>

resources/js/components/DeviceProblem.vue

@@ -3,7 +3,7 @@
     <b-textarea rows="6" @change="$emit('update:problem', $event)" :placeholder="__('devices.devices_description')" :value="problem" :disabled="disabled" />
     <div v-if="iconVariant !== 'none'" v-b-popover.html.left="__('devices.tooltip_problem')" class="ml-3 mt-2">
       <b-img class="icon clickable" :src="imageUrl('/icons/info_ico_black.svg')" v-if="iconVariant === 'black'" />
-      <b-img class="icon clickable" :src="imageUrl('/icons/info_ico_green.svg')" v-else="iconVariant === 'brand'" />
+      <b-img class="icon clickable" :src="imageUrl('/icons/info_ico_green.svg')" v-else />
     </div>
   </div>
 </template>

resources/js/components/EventDetails.vue

@@ -43,7 +43,7 @@
           <b-img-lazy :src="imageUrl('/icons/host_ico.svg')" class="icon" />
         </div>
         <div>
-          <div v-for="host in hosts">
+          <div v-for="(host, index) in hosts" :key="index">
             {{ host.volunteer.name }}
           </div>
         </div>

resources/js/components/EventPage.vue

@@ -15,7 +15,7 @@
       <EventImages :images="images" v-if="images && images.length" />
       <div>
         <EventStats :idevents="idevents" />
-        <EventDevices id="devices-section":idevents="idevents" :canedit="canedit || isAttending" :devices="devices" :clusters="clusters" :brands="brands" :barrier-list="barrierList" />
+        <EventDevices id="devices-section" :idevents="idevents" :canedit="canedit || isAttending" :devices="devices" :clusters="clusters" :brands="brands" :barrier-list="barrierList" />
       </div>
     </div>
   </div>

resources/js/components/GroupEventScrollTable.vue

@@ -47,7 +47,7 @@
       <template slot="head(title)">
         <span />
       </template>
-      <template slot="cell(title)" slot-scope="data" v-bind:addGroupName="addGroupName">
+      <template slot="cell(title)" slot-scope="data">
         <b><EventTitle :idevents="data.item.title.idevents" component="a" :href="'/party/view/' + data.item.title.idevents" /></b>
         <div class="hidecell">
           <span v-if="addGroupName && data.item.title.group" class="small">
@@ -77,7 +77,7 @@
       <template slot="head(actions)">
         <span />
       </template>
-      <template slot="cell(actions)" slot-scope="data" v-bind:upcoming="upcoming">
+      <template slot="cell(actions)" slot-scope="data">
         <GroupEventsScrollTableActions :idevents="data.item.actions.idevents" class="actionsHeight" />
       </template>
 
@@ -104,7 +104,7 @@
           <b-img class="icon mt-3" :src="imageUrl('/images/trash.svg')" :title="__('groups.waste_prevented')" />
         </div>
       </template>
-      <template slot="cell(waste)" slot-scope="data" v-bind="stats">
+      <template slot="cell(waste)" slot-scope="data">
         <div v-if="noDevices(data.item.waste)" class="d-none d-md-block">
           {{ __('partials.no_devices_added') }}
           <a :href="'/party/view/' + data.item.waste.idevents">
@@ -119,7 +119,7 @@
           <b-img class="icon mt-3" :src="imageUrl('/images/cloud_empty.svg')" :title="__('groups.co2_emissions_prevented')" />
         </div>
       </template>
-      <template slot="cell(co2)" slot-scope="data" v-bind="stats">
+      <template slot="cell(co2)" slot-scope="data">
         <GroupEventsScrollTableNumber :value="Math.round(stats(data.item.co2).co2_total)" units="kg" />
       </template>
 
@@ -128,7 +128,7 @@
           <b-img class="icon mt-3" :src="imageUrl('/images/fixed.svg')" :title="__('groups.fixed_items')" />
         </div>
       </template>
-      <template slot="cell(fixed_devices)" slot-scope="data" v-bind="stats">
+      <template slot="cell(fixed_devices)" slot-scope="data">
         <GroupEventsScrollTableNumber :value="stats(data.item.fixed_devices).fixed_devices" v-if="stats(data.item.fixed_devices)" />
       </template>
 
@@ -137,7 +137,7 @@
           <b-img class="icon mt-3" :src="imageUrl('/images/repairable_ico.svg')" :title="__('groups.repairable_items')" />
         </div>
       </template>
-      <template slot="cell(repairable_devices)" slot-scope="data" v-bind="stats">
+      <template slot="cell(repairable_devices)" slot-scope="data">
         <GroupEventsScrollTableNumber :value="stats(data.item.repairable_devices).repairable_devices" v-if="stats(data.item.repairable_devices)" />
       </template>
 
@@ -146,7 +146,7 @@
           <b-img class="icon mt-3" :src="imageUrl('/images/dead_ico.svg')" :title="__('groups.end_of_life_items')" />
         </div>
       </template>
-      <template slot="cell(dead_devices)" slot-scope="data" v-bind="stats">
+      <template slot="cell(dead_devices)" slot-scope="data">
         <GroupEventsScrollTableNumber :value="stats(data.item.dead_devices).dead_devices" v-if="stats(data.item.dead_devices)" />
       </template>
 

resources/js/components/GroupEventsScrollTableFilters.vue

@@ -13,7 +13,6 @@
         track-by="country"
         label="country"
         :multiple="false"
-        :allow-empty="false"
         deselect-label=""
         :taggable="false"
         selectLabel=""

resources/js/components/GroupMapAndList.vue

@@ -7,7 +7,7 @@
     </div>
     <div v-else>
       <GroupMap
-          v-model:ready="mapready"
+          @update:ready="mapready = $event"
           :initial-bounds="initialBounds"
           :min-zoom="minZoom"
           :max-zoom="maxZoom"

resources/js/components/GroupsTableFilters.vue

@@ -14,7 +14,6 @@
         track-by="id"
         label="tag_name"
         :multiple="true"
-        :allow-empty="false"
         deselect-label=""
         :taggable="true"
         selectLabel=""