#120 Update precommit and apply prettier import order

.pre-commit-config.yaml

@@ -10,19 +10,19 @@ repos:
     hooks:
       - id: prettier
         additional_dependencies:
-          - prettier@2.8.4
+          - prettier@3.2.3
         types_or: [ts, javascript, scss, css, yaml, json, vue]
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.34.0
+    rev: v8.56.0
     hooks:
       - id: eslint
         additional_dependencies:
-          - eslint@8.34.0
+          - eslint@8.56.0
           - [email protected]
           - [email protected]
           - [email protected]
           - [email protected]
-          - eslint-plugin-prettier@4.2.1
+          - eslint-plugin-prettier@5.1.3
           - [email protected]
           - '@vue/[email protected]'
           - '@vue/[email protected]'

cypress/support/component.ts

@@ -13,8 +13,8 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 // Import commands.js using ES2015 syntax:
-import './commands';
 import '@/scss/main.scss';
+import './commands';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';

src/__tests__/InputPhone.cy.ts

@@ -1,6 +1,6 @@
+import type { CountryCode } from 'libphonenumber-js';
 import { defineComponent, ref } from 'vue';
 import InputPhone from '@components/dumb/InputPhone.vue';
-import type { CountryCode } from 'libphonenumber-js';
 
 const TestComponent = defineComponent({
   components: { InputPhone },

src/__tests__/OeZoneerder.cy.ts

@@ -1,8 +1,8 @@
 /* eslint-disable vue/one-component-per-file */
 import { defineComponent } from 'vue';
 import { LayerType } from '@/models';
-import { OeZoneerder } from '@components/smart';
 import type { OeZoneerderProps } from '@/models';
+import { OeZoneerder } from '@components/smart';
 
 describe('OeZoneerder', () => {
   describe('default', () => {

src/components/dumb/FilterDatepicker.vue

@@ -5,16 +5,15 @@
     :value="dateValue"
     visual-format="d-m-Y"
     @input="updateValue"
-  />
+  ></vl-datepicker>
 </template>
 
 <script setup lang="ts">
-import { format, parse } from 'date-fns';
 import { VlDatepicker } from '@govflanders/vl-ui-design-system-vue3';
+import { format, parse } from 'date-fns';
+import { computed } from 'vue';
 import type { IFilterDatepickerProps } from '@models/filter-input';
-import { computed, ref } from 'vue';
 
-const jef = ref(true);
 const props = withDefaults(defineProps<IFilterDatepickerProps>(), {
   value: () => [],
   apiFormat: 'yyyy-MM-dd',

src/components/dumb/OeAutocomplete.vue

@@ -7,7 +7,7 @@
       mod-block
       @update:model-value="handleInput"
     ></vl-input-field>
-    <span v-if="loading" class="vl-loader vl-loader--small" data-cy="loader" />
+    <span v-if="loading" class="vl-loader vl-loader--small" data-cy="loader"></span>
 
     <div v-if="showResults && searchTerm?.length >= minChars" class="vl-autocomplete" data-cy="result">
       <div class="vl-autocomplete__list-wrapper">
@@ -20,7 +20,7 @@
           <li
             v-for="option in options"
             v-else
-            :key="(option.value as string | number)"
+            :key="option.value as string"
             tabindex="0"
             class="vl-autocomplete__cta"
             @keyup.enter="selectResult(option)"

src/components/smart/FilterAOEActor.vue

@@ -11,10 +11,10 @@
 <script setup lang="ts">
 import OeAutocomplete from '../dumb/OeAutocomplete.vue';
 import { computed, ref } from 'vue';
-import { ActorService } from '@services/actor.service';
 import type { IActor } from '@models/actor';
 import type { IAutocompleteOption } from '@models/autocomplete';
 import type { IFilterActorProps } from '@models/index';
+import { ActorService } from '@services/actor.service';
 
 const props = withDefaults(defineProps<IFilterActorProps>(), {
   id: '',

src/components/smart/FilterAanduidingsobject.vue

@@ -13,9 +13,9 @@
 import OeAutocomplete from '../dumb/OeAutocomplete.vue';
 import { toRef } from '@vueuse/core';
 import { ref, watch } from 'vue';
-import { InventarisApiService } from '@services/inventaris-api.service';
 import type { IAutocompleteOption } from '@models/autocomplete';
 import type { IESAanduidingsobject, IFilterAanduidingsobjectProps } from '@models/index';
+import { InventarisApiService } from '@services/inventaris-api.service';
 
 const props = withDefaults(defineProps<IFilterAanduidingsobjectProps>(), {
   id: '',

src/components/smart/FilterGemeente.vue

@@ -22,9 +22,9 @@
 <script setup lang="ts">
 import { VlMultiselect } from '@govflanders/vl-ui-design-system-vue3';
 import { computed, onBeforeMount, ref } from 'vue';
-import { CrabApiService } from '@services/crab-api.service';
 import type { IFilterGemeenteProps } from '@models/index';
 import type { IGemeente } from '@models/locatie';
+import { CrabApiService } from '@services/crab-api.service';
 
 const props = withDefaults(defineProps<IFilterGemeenteProps>(), {
   api: '',

src/components/smart/FilterProvincie.vue

@@ -22,9 +22,9 @@
 <script setup lang="ts">
 import { VlMultiselect } from '@govflanders/vl-ui-design-system-vue3';
 import { computed, onBeforeMount, ref } from 'vue';
-import { CrabApiService } from '@services/crab-api.service';
 import type { IFilterProvincieProps } from '@models/index';
 import type { IProvincie } from '@models/locatie';
+import { CrabApiService } from '@services/crab-api.service';
 
 const props = withDefaults(defineProps<IFilterProvincieProps>(), {
   api: '',

src/components/smart/OeActorWidget.vue

@@ -1,6 +1,6 @@
 <template>
   <vl-modal :id="props.id" mod-large title="Actor toevoegen" class="actor-widget">
-    <oe-loader v-if="loading" />
+    <oe-loader v-if="loading"></oe-loader>
     <template #modal-content>
       <grid
         v-if="state === ActorWidgetState.Grid"
@@ -10,13 +10,13 @@
         @set-state-detail="setStateDetail($event)"
         @select-actor="selectActor"
         @toggle-loader="loading = !loading"
-      />
+      ></grid>
       <detail
         v-if="state === ActorWidgetState.Detail"
         :actor="selectedActor"
         data-cy="actor-widget-detail"
         @set-state-grid="state = ActorWidgetState.Grid"
-      />
+      ></detail>
       <slot name="dropdown"></slot>
     </template>
     <template #modal-footer>
@@ -42,8 +42,8 @@ import { ref } from 'vue';
 import OeLoader from '@components/dumb/OeLoader.vue';
 import Detail from '@components/smart/OeActorWidgetDetail.vue';
 import Grid from '@components/smart/OeActorWidgetGrid.vue';
-import { ActorService } from '@services/actor.service';
 import type { IActor } from '@models/actor';
+import { ActorService } from '@services/actor.service';
 
 interface IOeActorWidgetProps {
   id: string;

src/components/smart/OeActorWidgetGrid.vue

@@ -11,7 +11,7 @@
           @click="handleSearchClick"
           @submit="triggerSearch"
           @input="zoekterm = $event.target.value"
-        />
+        ></vl-search>
       </div>
     </div>
     <div class="vl-grid vl-u-spacer-top--xsmall">
@@ -33,7 +33,7 @@
           @grid-ready="onGridReady"
           @first-data-rendered="firstDataRendered"
           @row-clicked="gridOptions?.onRowClicked"
-        />
+        ></oe-grid>
       </div>
     </div>
   </div>
@@ -43,11 +43,11 @@
 import OeGrid from '../dumb/OeGrid.vue';
 import OeActorWidgetGridActies from './OeActorWidgetGridActies.vue';
 import { VlButton, VlSearch } from '@govflanders/vl-ui-design-system-vue3';
+import type { ColDef, FirstDataRenderedEvent, GridOptions, IGetRowsParams, RowClickedEvent } from 'ag-grid-community';
 import { isEmpty, omitBy } from 'lodash';
 import { computed, getCurrentInstance, ref } from 'vue';
-import { ActorService, type IActorenQuery } from '@services/actor.service';
-import type { ColDef, FirstDataRenderedEvent, GridOptions, IGetRowsParams, RowClickedEvent } from 'ag-grid-community';
 import type { IActor } from '@models/actor';
+import { ActorService, type IActorenQuery } from '@services/actor.service';
 
 interface IOeActorWidgetGridProps {
   api: string;

src/components/smart/OeAdres.vue

@@ -70,7 +70,7 @@
             :mod-error="!!v$.gemeente.naam.$errors.length"
             mod-block
             placeholder="Gemeente"
-          />
+          ></VlInputField>
           <vl-form-message-error
             v-for="error of v$.gemeente.naam.$errors"
             :key="error.$uid"
@@ -119,7 +119,7 @@
             :mod-error="!!v$.postcode.nummer.$errors.length"
             mod-block
             placeholder="Postcode"
-          />
+          ></VlInputField>
 
           <button
             v-if="isBelgium && !isVlaamseGemeenteOrEmpty"
@@ -178,7 +178,7 @@
             :mod-error="!!v$.straat.naam.$errors.length"
             mod-block
             placeholder="Straat"
-          />
+          ></VlInputField>
 
           <button
             v-if="isBelgium && !isVlaamseGemeenteOrEmpty"
@@ -234,7 +234,7 @@
             mod-block
             placeholder="Huisnummer"
             :mod-error="!!v$.adres.huisnummer.$errors.length"
-          />
+          ></VlInputField>
 
           <button
             v-if="isBelgium && !straatFreeText && huisnummers.length > 0"
@@ -294,7 +294,7 @@
             mod-block
             placeholder="Busnummer"
             :mod-error="!!v$.adres.busnummer.$errors.length"
-          />
+          ></VlInputField>
 
           <button
             v-if="isBelgium && !huisnummerFreeText && busnummers.length > 0"
@@ -336,10 +336,10 @@ import { helpers } from '@vuelidate/validators';
 import { AxiosError } from 'axios';
 import { pick, sortBy, uniqBy } from 'lodash';
 import { computed, onMounted, ref, watch } from 'vue';
-import { CrabApiService } from '@services/crab-api.service';
-import { requiredIf } from '@utils/i18n-validators';
 import type { IAdresProps } from '@models/adres';
 import type { IAdres, IGemeente, ILand, ILocatieAdres, IPostinfo, IStraat } from '@models/locatie';
+import { CrabApiService } from '@services/crab-api.service';
+import { requiredIf } from '@utils/i18n-validators';
 
 const props = withDefaults(defineProps<IAdresProps>(), {
   config: () => ({

src/components/smart/OeZoneerder.vue

@@ -11,7 +11,7 @@
     <div ref="leftControlsContainerRef" class="controlsContainer left">
       <div v-if="props.controlConfig.zoomSwitcher" class="zoom-switcher oe-ol-control ol-unselectable ol-control">
         <button class="zoomButton" title="Ga naar het Geoportaal" @click="zoomButtonClick">
-          <font-awesome-icon :icon="['fas', 'fa-globe']" />
+          <font-awesome-icon :icon="['fas', 'fa-globe']"></font-awesome-icon>
         </button>
       </div>
     </div>
@@ -37,28 +37,28 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import Map from 'ol/Map';
 import View from 'ol/View';
 import { Attribution, Control, FullScreen, Rotate, ScaleLine, Zoom, ZoomToExtent } from 'ol/control';
+import type { Coordinate } from 'ol/coordinate';
 import { getCenter, getTopLeft, getWidth } from 'ol/extent';
+import type { Extent } from 'ol/extent';
 import Point from 'ol/geom/Point';
 import { Group, Layer, Tile } from 'ol/layer';
 import { type ProjectionLike, get as getOlProj, transformExtent } from 'ol/proj';
+import type { Projection } from 'ol/proj';
 import { register } from 'ol/proj/proj4';
 import { TileWMS, WMTS } from 'ol/source';
 import WMTSTileGrid from 'ol/tilegrid/WMTS';
 import proj4 from 'proj4';
 import { onMounted, onUnmounted, provide, ref, watch } from 'vue';
+import type { Ref } from 'vue';
 import { LayerType, defaultControlConfig, defaultLayerConfig } from '@/models';
+import type { IBoundingBox, LayerOptions, OeZoneerderProps } from '@/models';
 import { CrabApiService } from '@/services';
 import OeAutocomplete from '@components/dumb/OeAutocomplete.vue';
 import Layerswitcher from '@components/smart/OeZoneerderLayerswitcher.vue';
 import ZonePanel from '@components/smart/OeZoneerderZonePanel.vue';
-import { Geolocate } from '@utils/openlayers/oe-ol-geolocate';
-import type { Coordinate } from 'ol/coordinate';
-import type { Extent } from 'ol/extent';
-import type { Projection } from 'ol/proj';
-import type { Ref } from 'vue';
-import type { IBoundingBox, LayerOptions, OeZoneerderProps } from '@/models';
 import type { IAutocompleteOption } from '@models/autocomplete';
 import type { Contour } from '@models/oe-openlayers';
+import { Geolocate } from '@utils/openlayers/oe-ol-geolocate';
 
 const props = withDefaults(defineProps<OeZoneerderProps>(), {
   controlConfig: () => defaultControlConfig,

src/components/smart/OeZoneerderLayerswitcher.vue

@@ -8,7 +8,7 @@
   >
     <div ref="elementRef" class="layerswitcher oe-ol-control ol-control ol-unselectable">
       <button ref="buttonRef" title="Verander kaartlagen" @click="togglePanel">
-        <font-awesome-icon :icon="['fas', 'layer-group']" style="pointer-events: none" />
+        <font-awesome-icon :icon="['fas', 'layer-group']" style="pointer-events: none"></font-awesome-icon>
       </button>
     </div>
 
@@ -52,14 +52,14 @@
 import 'ol/ol.css';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { VlCheckbox, VlRadio, VlTitle } from '@govflanders/vl-ui-design-system-vue3';
+import type Map from 'ol/Map';
 import { Group } from 'ol/layer';
+import type BaseLayer from 'ol/layer/Base';
 import { v4 as uuidv4 } from 'uuid';
 import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
-import { vClickOutside } from '@directives/click-outside.directive';
-import type Map from 'ol/Map';
-import type BaseLayer from 'ol/layer/Base';
 import type { Ref } from 'vue';
 import type { CrabApiService } from '@/services';
+import { vClickOutside } from '@directives/click-outside.directive';
 
 const buttonRef = ref<HTMLElement>();
 const elementRef = ref<HTMLElement>();