Run lint 🚨

Author: Dominik Grenz

personalization-webcomponents/package-lock.json

@@ -5,7 +5,7 @@
   "private": true,
   "license": "MIT",
   "engines": {
-    "node": ">=22.2 <23"
+    "node": ">=22.14 <=22"
   },
   "scripts": {
     "dev": "vite",

personalization-webcomponents/package.json

@@ -5,52 +5,54 @@
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div v-html="customIconsSprite" />
 
-      <div v-if="loading">
-        <skeleton-loader/>
-      </div>
-      <div v-else>
-        <checklist-header v-if="checklist"
-            :checklist="checklist"
-        >
-        </checklist-header>
-      </div>
+    <div v-if="loading">
+      <skeleton-loader />
+    </div>
+    <div v-else>
+      <checklist-header
+        v-if="checklist"
+        :checklist="checklist"
+      >
+      </checklist-header>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import type DummyChecklist from "@/api/dummyservice/DummyChecklist.ts";
+
 import customIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/custom-icons.svg?raw";
 import mucIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/muc-icons.svg?raw";
-import {onMounted, ref} from "vue";
+import { onMounted, ref } from "vue";
 
-
-import ChecklistHeader from "@/components/ChecklistHeader.vue";
-import type DummyChecklist from "@/api/dummyservice/DummyChecklist.ts";
 import DummyChecklistService from "@/api/dummyservice/DummyChecklistService.ts";
+import ChecklistHeader from "@/components/ChecklistHeader.vue";
 import SkeletonLoader from "@/components/common/skeleton-loader.vue";
-import {QUERY_PARAM_CHECKLIST_ID} from "@/util/constants.ts";
+import { QUERY_PARAM_CHECKLIST_ID } from "@/util/constants.ts";
 
-const checklist = ref<DummyChecklist >();
+const checklist = ref<DummyChecklist>();
 const loading = ref(true);
 
-
 onMounted(() => {
   loading.value = true;
   const dcl = new DummyChecklistService();
-  dcl.getChecklists()
-      .then((checklists) => {
-        const urlParams = new URLSearchParams(window.location.search)
-        const checklistId = urlParams.get(QUERY_PARAM_CHECKLIST_ID)
-        const foundChecklist = checklists.find(checklist => checklist.id === checklistId)
-
-        if (foundChecklist) {
-          checklist.value = foundChecklist;
-        } else {
-          throw new Error("Checkliste wurde nicht gefunden")
-        }
-      })
-      .finally(() => (loading.value = false));
+  dcl
+    .getChecklists()
+    .then((checklists) => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const checklistId = urlParams.get(QUERY_PARAM_CHECKLIST_ID);
+      const foundChecklist = checklists.find(
+        (checklist) => checklist.id === checklistId
+      );
+
+      if (foundChecklist) {
+        checklist.value = foundChecklist;
+      } else {
+        throw new Error("Checkliste wurde nicht gefunden");
+      }
+    })
+    .finally(() => (loading.value = false));
 });
-
 </script>
 
 <style>

personalization-webcomponents/src/checklist-detail.ce.vue

@@ -1,33 +1,39 @@
 <template>
-  <muc-intro tagline="Checkliste" :title="checklist.title" :img="getChecklistIconByTitle(checklist.title)" :imgAlt="checklist.title">
+  <muc-intro
+    tagline="Checkliste"
+    :title="checklist.title"
+    :img="getChecklistIconByTitle(checklist.title)"
+    :imgAlt="checklist.title"
+  >
     <p style="padding-bottom: 18px">
-      <b>Erstellungsdatum: </b>{{ props.checklist.lastUpdated.toLocaleString() }}
+      <b>Erstellungsdatum: </b
+      >{{ props.checklist.lastUpdated.toLocaleString() }}
     </p>
     <p>
       <b>Aufgaben: </b>
       <muc-chip
-          v-if="todoCount"
-          style="margin-right: 16px"
-          background-color="#FDD1AC"
+        v-if="todoCount"
+        style="margin-right: 16px"
+        background-color="#FDD1AC"
       >
         {{ todoCount }} offen
         <svg
-            style="margin-left: 8px; width: 20px; height: 20px"
-            aria-hidden="true"
-            class="m-button__icon"
+          style="margin-left: 8px; width: 20px; height: 20px"
+          aria-hidden="true"
+          class="m-button__icon"
         >
-          <use href="#icon-pencil"/>
+          <use href="#icon-pencil" />
         </svg>
       </muc-chip>
       <muc-chip
-          v-if="doneCount"
-          background-color="#B7D2B7"
+        v-if="doneCount"
+        background-color="#B7D2B7"
       >
         {{ doneCount }} erledigt
         <svg
-            style="margin-left: 8px; width: 20px; height: 20px"
-            aria-hidden="true"
-            class="m-button__icon"
+          style="margin-left: 8px; width: 20px; height: 20px"
+          aria-hidden="true"
+          class="m-button__icon"
         >
           <use href="#icon-check" />
         </svg>
@@ -37,24 +43,23 @@
 </template>
 
 <script setup lang="ts">
-
 import type DummyChecklist from "@/api/dummyservice/DummyChecklist.ts";
-import {computed} from "vue";
-import MucChip from "@/components/common/muc-chip.vue";
-import {getChecklistIconByTitle} from "@/util/constants.ts";
-import {MucIntro} from "@muenchen/muc-patternlab-vue";
 
+import { MucIntro } from "@muenchen/muc-patternlab-vue";
+import { computed } from "vue";
+
+import MucChip from "@/components/common/muc-chip.vue";
+import { getChecklistIconByTitle } from "@/util/constants.ts";
 
 const props = defineProps<{
-  checklist: DummyChecklist
+  checklist: DummyChecklist;
 }>();
 
 const todoCount = computed(() => {
-  return props.checklist.items.filter(value => !value.checked).length;
+  return props.checklist.items.filter((value) => !value.checked).length;
 });
 
 const doneCount = computed(() => {
   return props.checklist.items.filter((value) => value.checked).length;
 });
-
-</script>
+</script>