From 8410ca90c4ddcd1560cf97a50e897ed1fa318709 Mon Sep 17 00:00:00 2001
From: wouter-adriaens <wouter.adriaens@continuum.be>
Date: Wed, 17 Jan 2024 09:23:51 +0100
Subject: [PATCH] #120 Update precommit and apply prettier import order

---
 .pre-commit-config.yaml                       |  8 +++----
 cypress/support/component.ts                  |  2 +-
 src/__tests__/InputPhone.cy.ts                |  2 +-
 src/__tests__/OeZoneerder.cy.ts               |  2 +-
 src/components/dumb/FilterDatepicker.vue      |  7 +++---
 src/components/dumb/OeAutocomplete.vue        |  4 ++--
 src/components/smart/FilterAOEActor.vue       |  2 +-
 .../smart/FilterAanduidingsobject.vue         |  2 +-
 src/components/smart/FilterGemeente.vue       |  2 +-
 src/components/smart/FilterProvincie.vue      |  2 +-
 src/components/smart/OeActorWidget.vue        |  8 +++----
 src/components/smart/OeActorWidgetGrid.vue    |  8 +++----
 src/components/smart/OeAdres.vue              | 14 +++++------
 src/components/smart/OeZoneerder.vue          | 14 +++++------
 .../smart/OeZoneerderLayerswitcher.vue        |  8 +++----
 src/components/smart/OeZoneerderZonePanel.vue | 24 +++++++++----------
 src/models/aanduidingsobject.ts               |  2 +-
 src/services/crab-api.service.ts              |  4 ++--
 src/stories/dumb-components/button.stories.ts |  2 +-
 .../dumb-components/container.stories.ts      |  2 +-
 .../dumb-components/filter-radio.stories.ts   |  2 +-
 src/stories/dumb-components/grid.stories.ts   |  2 +-
 src/stories/dumb-components/header.stories.ts |  2 +-
 .../dumb-components/input-phone.stories.ts    |  2 +-
 src/stories/dumb-components/loader.stories.ts |  2 +-
 .../no-rows-overlay.stories.ts                |  2 +-
 src/stories/dumb-components/select.stories.ts |  2 +-
 .../dumb-components/system-fields.stories.ts  |  2 +-
 .../dumb-components/tiny-mce.stories.ts       |  2 +-
 src/stories/dumb-components/wizard.stories.ts |  2 +-
 src/stories/smart-components/adres.stories.ts |  2 +-
 .../oe-actor-widget.stories.ts                |  2 +-
 .../smart-components/oe-zoneerder.stories.ts  |  2 +-
 src/utils/openlayers/oe-ol-geolocate.ts       |  8 +++----
 34 files changed, 76 insertions(+), 77 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 79f30bd2..df47aa9e 100644
--- a/.pre-commit-config.yaml
+++ b/.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
           - eslint-config-prettier@8.8.0
           - eslint-import-resolver-typescript@3.5.5
           - eslint-plugin-cypress@2.12.1
           - eslint-plugin-import@2.27.5
-          - eslint-plugin-prettier@4.2.1
+          - eslint-plugin-prettier@5.1.3
           - eslint-plugin-vue@9.11.0
           - '@vue/eslint-config-prettier@7.1.0'
           - '@vue/eslint-config-typescript@11.0.2'
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
index 18cb9258..04468b11 100644
--- a/cypress/support/component.ts
+++ b/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';
diff --git a/src/__tests__/InputPhone.cy.ts b/src/__tests__/InputPhone.cy.ts
index f333567e..85337d3f 100644
--- a/src/__tests__/InputPhone.cy.ts
+++ b/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 },
diff --git a/src/__tests__/OeZoneerder.cy.ts b/src/__tests__/OeZoneerder.cy.ts
index fd9ac222..8bdd05a2 100644
--- a/src/__tests__/OeZoneerder.cy.ts
+++ b/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', () => {
diff --git a/src/components/dumb/FilterDatepicker.vue b/src/components/dumb/FilterDatepicker.vue
index bcdf5160..92b48efd 100644
--- a/src/components/dumb/FilterDatepicker.vue
+++ b/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',
diff --git a/src/components/dumb/OeAutocomplete.vue b/src/components/dumb/OeAutocomplete.vue
index 77c99768..f28e3698 100644
--- a/src/components/dumb/OeAutocomplete.vue
+++ b/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)"
diff --git a/src/components/smart/FilterAOEActor.vue b/src/components/smart/FilterAOEActor.vue
index d527c522..b56c18c0 100644
--- a/src/components/smart/FilterAOEActor.vue
+++ b/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: '',
diff --git a/src/components/smart/FilterAanduidingsobject.vue b/src/components/smart/FilterAanduidingsobject.vue
index 20a296cb..94101a71 100644
--- a/src/components/smart/FilterAanduidingsobject.vue
+++ b/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: '',
diff --git a/src/components/smart/FilterGemeente.vue b/src/components/smart/FilterGemeente.vue
index 58e0e127..5c055a1d 100644
--- a/src/components/smart/FilterGemeente.vue
+++ b/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: '',
diff --git a/src/components/smart/FilterProvincie.vue b/src/components/smart/FilterProvincie.vue
index 23c4f1e0..8f87c525 100644
--- a/src/components/smart/FilterProvincie.vue
+++ b/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: '',
diff --git a/src/components/smart/OeActorWidget.vue b/src/components/smart/OeActorWidget.vue
index 2df984aa..0b24e97e 100644
--- a/src/components/smart/OeActorWidget.vue
+++ b/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;
diff --git a/src/components/smart/OeActorWidgetGrid.vue b/src/components/smart/OeActorWidgetGrid.vue
index b74790a6..10ff51f4 100644
--- a/src/components/smart/OeActorWidgetGrid.vue
+++ b/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;
diff --git a/src/components/smart/OeAdres.vue b/src/components/smart/OeAdres.vue
index 6940f5b8..0d5b7476 100644
--- a/src/components/smart/OeAdres.vue
+++ b/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: () => ({
diff --git a/src/components/smart/OeZoneerder.vue b/src/components/smart/OeZoneerder.vue
index 58cbf3ce..2f610a88 100644
--- a/src/components/smart/OeZoneerder.vue
+++ b/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,
diff --git a/src/components/smart/OeZoneerderLayerswitcher.vue b/src/components/smart/OeZoneerderLayerswitcher.vue
index 6e402e9c..556271a2 100644
--- a/src/components/smart/OeZoneerderLayerswitcher.vue
+++ b/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>();
diff --git a/src/components/smart/OeZoneerderZonePanel.vue b/src/components/smart/OeZoneerderZonePanel.vue
index 5c743c14..1b96cfdb 100644
--- a/src/components/smart/OeZoneerderZonePanel.vue
+++ b/src/components/smart/OeZoneerderZonePanel.vue
@@ -2,13 +2,13 @@
   <div ref="zonePanelRef" :class="{ closed: !panelOpen || !props.drawPanelEnabled }" class="panel">
     <div ref="elementRef" class="zone-panel oe-ol-control ol-control ol-unselectable">
       <button data-cy="zonePanelControl" @click="togglePanel">
-        <font-awesome-icon icon="pencil" title="Zone samenstellen" />
+        <font-awesome-icon icon="pencil" title="Zone samenstellen"></font-awesome-icon>
       </button>
     </div>
 
     <vl-title class="panelHeader" tag-name="h4">
       <span v-if="panelOpen" class="titleText">&nbsp;Zone samenstellen</span>
-      <font-awesome-icon class="pointer" :icon="['fas', 'close']" @click="togglePanel" />
+      <font-awesome-icon class="pointer" :icon="['fas', 'close']" @click="togglePanel"></font-awesome-icon>
     </vl-title>
 
     <div v-if="panelOpen" class="panelBody">
@@ -20,7 +20,7 @@
             title="teken polygoon"
             @click="toggleDrawZone(true)"
           >
-            <font-awesome-icon icon="draw-polygon" />
+            <font-awesome-icon icon="draw-polygon"></font-awesome-icon>
           </vl-button>
           <vl-button
             mod-narrow
@@ -28,7 +28,7 @@
             title="teken cirkel"
             @click="toggleDrawZone(true, 'Circle')"
           >
-            <font-awesome-icon :icon="['far', 'circle']" />
+            <font-awesome-icon :icon="['far', 'circle']"></font-awesome-icon>
           </vl-button>
           <vl-button
             vl-button
@@ -37,7 +37,7 @@
             title="selecteer perceel"
             @click="startPerceelSelect()"
           >
-            <font-awesome-icon icon="map-marker-alt" />
+            <font-awesome-icon icon="map-marker-alt"></font-awesome-icon>
           </vl-button>
           <vl-button
             data-cy="showWKTInput"
@@ -59,11 +59,11 @@
             :mod-error="invalidWKT"
             :model-value="WKTString"
             @update:model-value="updateWKTString"
-          />
+          ></vl-input-field>
           <vl-button data-cy="plaatsWKT" vl-button mod-narrow mod-secondary @click="drawWKTZone()">Plaats</vl-button>
         </template>
         <vl-button title="annuleren" vl-button mod-narrow mod-secondary @click="toggleDrawZone(false)">
-          <font-awesome-icon icon="cancel" />
+          <font-awesome-icon icon="cancel"></font-awesome-icon>
         </vl-button>
       </vl-input-group>
 
@@ -71,7 +71,7 @@
       <ul data-cy="geometryObjectList" class="geometryObjectList">
         <li v-for="(item, index) in geometryObjectList" :key="index">
           <span>{{ item }}</span>
-          <vl-link class="iconLink" @click="removeGeometryObject(item)"> <vl-icon icon="trash" /> </vl-link>
+          <vl-link class="iconLink" @click="removeGeometryObject(item)"> <vl-icon icon="trash"></vl-icon> </vl-link>
         </li>
       </ul>
     </div>
@@ -83,6 +83,10 @@ import 'ol/ol.css';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { VlButton, VlIcon, VlInputField, VlInputGroup, VlLink, VlTitle } from '@govflanders/vl-ui-design-system-vue3';
 import { Feature, Map, MapBrowserEvent } from 'ol';
+import type { FeatureLike } from 'ol/Feature';
+import type { ColorLike } from 'ol/colorlike';
+import type { Listener } from 'ol/events';
+import type { Extent } from 'ol/extent';
 import { GeoJSON, WKT } from 'ol/format';
 import { Circle, Geometry, MultiPolygon, Polygon } from 'ol/geom';
 import { fromCircle } from 'ol/geom/Polygon';
@@ -91,10 +95,6 @@ import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import { Fill, Text as OlText, Stroke, Style } from 'ol/style';
 import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
-import type { FeatureLike } from 'ol/Feature';
-import type { ColorLike } from 'ol/colorlike';
-import type { Listener } from 'ol/events';
-import type { Extent } from 'ol/extent';
 import type { CrabApiService } from '@/services';
 import type { Contour, IDrawGeomType } from '@models/oe-openlayers';
 
diff --git a/src/models/aanduidingsobject.ts b/src/models/aanduidingsobject.ts
index 8e4924a1..12457482 100644
--- a/src/models/aanduidingsobject.ts
+++ b/src/models/aanduidingsobject.ts
@@ -1,5 +1,5 @@
-import { Serializable } from './serializable';
 import type { IDataverantwoordelijke } from './dataverantwoordelijke';
+import { Serializable } from './serializable';
 import type { IStatus } from './status';
 import type { ISystemFields } from './system-fields';
 
diff --git a/src/services/crab-api.service.ts b/src/services/crab-api.service.ts
index 842daa4e..ebc563b2 100644
--- a/src/services/crab-api.service.ts
+++ b/src/services/crab-api.service.ts
@@ -1,10 +1,9 @@
 import { HttpService } from './http.service';
 import { sortBy } from 'lodash';
+import type { Coordinate } from 'ol/coordinate';
 import WFS from 'ol/format/WFS';
 import Intersects from 'ol/format/filter/Intersects';
 import Point from 'ol/geom/Point';
-import { Niscode } from '@models/niscode.enum';
-import type { Coordinate } from 'ol/coordinate';
 import type {
   IAdres,
   IGemeente,
@@ -16,6 +15,7 @@ import type {
   IProvincie,
   IStraat,
 } from '@models/locatie';
+import { Niscode } from '@models/niscode.enum';
 
 export class CrabApiService extends HttpService {
   readonly API_URL: string;
diff --git a/src/stories/dumb-components/button.stories.ts b/src/stories/dumb-components/button.stories.ts
index 283a4922..8281794c 100644
--- a/src/stories/dumb-components/button.stories.ts
+++ b/src/stories/dumb-components/button.stories.ts
@@ -1,6 +1,6 @@
 import '@/scss/main.scss';
-import OeButton from '@components/dumb/OeButton.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import OeButton from '@components/dumb/OeButton.vue';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof OeButton> = {
diff --git a/src/stories/dumb-components/container.stories.ts b/src/stories/dumb-components/container.stories.ts
index 81ef37a2..2fb203f0 100644
--- a/src/stories/dumb-components/container.stories.ts
+++ b/src/stories/dumb-components/container.stories.ts
@@ -1,9 +1,9 @@
 import '@/scss/main.scss';
 import { VlButton } from '@govflanders/vl-ui-design-system-vue3';
+import type { Meta, StoryObj } from '@storybook/vue3';
 import { last, remove } from 'lodash';
 import { ref } from 'vue';
 import OeContainer from '@components/dumb/OeContainer.vue';
-import type { Meta, StoryObj } from '@storybook/vue3';
 import type { ITab } from '@models/container';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
diff --git a/src/stories/dumb-components/filter-radio.stories.ts b/src/stories/dumb-components/filter-radio.stories.ts
index 18efa21f..b94b5aba 100644
--- a/src/stories/dumb-components/filter-radio.stories.ts
+++ b/src/stories/dumb-components/filter-radio.stories.ts
@@ -1,7 +1,7 @@
 import '@/scss/main.scss';
 import FilterRadio from '../../components/dumb/FilterRadio.vue';
-import { ref } from 'vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import { ref } from 'vue';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof FilterRadio> = {
diff --git a/src/stories/dumb-components/grid.stories.ts b/src/stories/dumb-components/grid.stories.ts
index a06690f8..44f45b64 100644
--- a/src/stories/dumb-components/grid.stories.ts
+++ b/src/stories/dumb-components/grid.stories.ts
@@ -1,5 +1,4 @@
 import '@/scss/main.scss';
-import OeGrid from '@components/dumb/OeGrid.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 import type {
   FirstDataRenderedEvent,
@@ -8,6 +7,7 @@ import type {
   ICellRendererParams,
   IGetRowsParams,
 } from 'ag-grid-community';
+import OeGrid from '@components/dumb/OeGrid.vue';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof OeGrid> = {
diff --git a/src/stories/dumb-components/header.stories.ts b/src/stories/dumb-components/header.stories.ts
index 1fa1e11c..45e6d90d 100644
--- a/src/stories/dumb-components/header.stories.ts
+++ b/src/stories/dumb-components/header.stories.ts
@@ -1,6 +1,6 @@
 import '@/scss/main.scss';
-import OeHeader from '@components/dumb/OeHeader.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import OeHeader from '@components/dumb/OeHeader.vue';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof OeHeader> = {
diff --git a/src/stories/dumb-components/input-phone.stories.ts b/src/stories/dumb-components/input-phone.stories.ts
index 92312cd4..da2c8d17 100644
--- a/src/stories/dumb-components/input-phone.stories.ts
+++ b/src/stories/dumb-components/input-phone.stories.ts
@@ -1,7 +1,7 @@
 import '@/scss/main.scss';
+import type { Meta, StoryObj } from '@storybook/vue3';
 import { ref } from 'vue';
 import InputPhone from '@components/dumb/InputPhone.vue';
-import type { Meta, StoryObj } from '@storybook/vue3';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof InputPhone> = {
diff --git a/src/stories/dumb-components/loader.stories.ts b/src/stories/dumb-components/loader.stories.ts
index 22406e40..4ac6bb04 100644
--- a/src/stories/dumb-components/loader.stories.ts
+++ b/src/stories/dumb-components/loader.stories.ts
@@ -1,8 +1,8 @@
 import '@/scss/main.scss';
 import OeLoader from '../../components/dumb/OeLoader.vue';
 import { VlButton } from '@govflanders/vl-ui-design-system-vue3';
-import { ref } from 'vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import { ref } from 'vue';
 
 const meta: Meta<typeof OeLoader> = {
   title: 'Dumb components/Loader',
diff --git a/src/stories/dumb-components/no-rows-overlay.stories.ts b/src/stories/dumb-components/no-rows-overlay.stories.ts
index 411231bd..ad263789 100644
--- a/src/stories/dumb-components/no-rows-overlay.stories.ts
+++ b/src/stories/dumb-components/no-rows-overlay.stories.ts
@@ -1,5 +1,5 @@
-import NoRowsOverlay from '@components/dumb/NoRowsOverlay.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import NoRowsOverlay from '@components/dumb/NoRowsOverlay.vue';
 
 const meta: Meta<typeof NoRowsOverlay> = {
   title: 'Dumb components/NoRowsOverlay',
diff --git a/src/stories/dumb-components/select.stories.ts b/src/stories/dumb-components/select.stories.ts
index ef9ff9df..ca65daa7 100644
--- a/src/stories/dumb-components/select.stories.ts
+++ b/src/stories/dumb-components/select.stories.ts
@@ -1,7 +1,7 @@
 import '@/scss/main.scss';
 import OeSelect from '../../components/dumb/OeSelect.vue';
-import { ref } from 'vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import { ref } from 'vue';
 import type { ISelectOption } from '@models/select';
 
 const meta: Meta<typeof OeSelect> = {
diff --git a/src/stories/dumb-components/system-fields.stories.ts b/src/stories/dumb-components/system-fields.stories.ts
index 8d213bd5..ecc9e610 100644
--- a/src/stories/dumb-components/system-fields.stories.ts
+++ b/src/stories/dumb-components/system-fields.stories.ts
@@ -1,5 +1,5 @@
-import SystemFields from '@components/dumb/SystemFields.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import SystemFields from '@components/dumb/SystemFields.vue';
 
 const meta: Meta<typeof SystemFields> = {
   title: 'Dumb components/SystemFields',
diff --git a/src/stories/dumb-components/tiny-mce.stories.ts b/src/stories/dumb-components/tiny-mce.stories.ts
index 38b4b001..d1358079 100644
--- a/src/stories/dumb-components/tiny-mce.stories.ts
+++ b/src/stories/dumb-components/tiny-mce.stories.ts
@@ -1,7 +1,7 @@
 import '@/scss/main.scss';
 import OeTinyMce from '../../components/dumb/OeTinyMCE.vue';
-import { ref } from 'vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import { ref } from 'vue';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof OeTinyMce> = {
diff --git a/src/stories/dumb-components/wizard.stories.ts b/src/stories/dumb-components/wizard.stories.ts
index ed6a32c2..f82b261e 100644
--- a/src/stories/dumb-components/wizard.stories.ts
+++ b/src/stories/dumb-components/wizard.stories.ts
@@ -1,7 +1,7 @@
 import '@/scss/main.scss';
 import OeWizard from '../../components/dumb/OeWizard.vue';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import type { IStep } from '../../models/wizard';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 const meta: Meta<typeof OeWizard> = {
diff --git a/src/stories/smart-components/adres.stories.ts b/src/stories/smart-components/adres.stories.ts
index 8607262f..0dbc8997 100644
--- a/src/stories/smart-components/adres.stories.ts
+++ b/src/stories/smart-components/adres.stories.ts
@@ -1,6 +1,6 @@
 import '@/scss/main.scss';
-import OeAdres from '@components/smart/OeAdres.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import OeAdres from '@components/smart/OeAdres.vue';
 import type { ILocatieAdres } from '@models/locatie';
 
 const meta: Meta<typeof OeAdres> = {
diff --git a/src/stories/smart-components/oe-actor-widget.stories.ts b/src/stories/smart-components/oe-actor-widget.stories.ts
index 0b8097da..729dbadc 100644
--- a/src/stories/smart-components/oe-actor-widget.stories.ts
+++ b/src/stories/smart-components/oe-actor-widget.stories.ts
@@ -1,6 +1,6 @@
 import '@/scss/main.scss';
-import { OeActorWidget } from '@/components';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import { OeActorWidget } from '@/components';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof OeActorWidget> = {
diff --git a/src/stories/smart-components/oe-zoneerder.stories.ts b/src/stories/smart-components/oe-zoneerder.stories.ts
index 3f1f1d27..51140dce 100644
--- a/src/stories/smart-components/oe-zoneerder.stories.ts
+++ b/src/stories/smart-components/oe-zoneerder.stories.ts
@@ -1,6 +1,6 @@
 import '@/scss/main.scss';
-import { OeZoneerder } from '@/components';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import { OeZoneerder } from '@/components';
 
 const api = 'https://test-geo.onroerenderfgoed.be/';
 
diff --git a/src/utils/openlayers/oe-ol-geolocate.ts b/src/utils/openlayers/oe-ol-geolocate.ts
index c7241a03..ee1bedf4 100644
--- a/src/utils/openlayers/oe-ol-geolocate.ts
+++ b/src/utils/openlayers/oe-ol-geolocate.ts
@@ -1,14 +1,14 @@
 import Feature from 'ol/Feature';
+import type Map from 'ol/Map';
+import type View from 'ol/View';
 import { Control } from 'ol/control';
+import type { Options as ControlOptions } from 'ol/control/Control';
 import { Point } from 'ol/geom';
+import type { Geometry } from 'ol/geom';
 import VectorLayer from 'ol/layer/Vector';
 import { transform } from 'ol/proj';
 import VectorSource from 'ol/source/Vector';
 import { Circle, Fill, Stroke, Style } from 'ol/style';
-import type Map from 'ol/Map';
-import type View from 'ol/View';
-import type { Options as ControlOptions } from 'ol/control/Control';
-import type { Geometry } from 'ol/geom';
 
 export interface GeolocateOptions extends ControlOptions {
   tipLabel?: string;