💚 linter

Author: FabianWilms

personalization-webcomponents/src/ChecklistDetail.ce.vue

@@ -32,8 +32,10 @@
                 v-else
                 class="banner"
                 type="success"
-                >
-                Herzlichen Glückwunsch, Sie haben alle Aufgaben erledigt! Wir bewahren diese Checkliste noch bis zum {{ deletionDate }} für Sie auf. Danach wird sie automatisch gelöscht.
+              >
+                Herzlichen Glückwunsch, Sie haben alle Aufgaben erledigt! Wir
+                bewahren diese Checkliste noch bis zum {{ deletionDate }} für
+                Sie auf. Danach wird sie automatisch gelöscht.
               </muc-banner>
               <h2 class="headline">
                 Erledigte Aufgaben ({{ closedCheckList.length }})
@@ -49,7 +51,7 @@
                 v-else
                 class="banner"
                 type="info"
-                >
+              >
                 Sie haben noch keine erledigten Aufgaben. Haken Sie Aufgaben in
                 der Checkliste ab, um sie als erledigt zu markieren.
               </muc-banner>

personalization-webcomponents/src/components/ChecklistList.vue

@@ -29,10 +29,14 @@
         >
           <p13n-checkbox
             :id="'cb-' + element.serviceID"
-            :aria-label="!!element.checked ? element.title + ' als nicht erledigt markieren.' : element.title + ' als erledigt markieren.'"
+            :aria-label="
+              !!element.checked
+                ? element.title + ' als nicht erledigt markieren.'
+                : element.title + ' als erledigt markieren.'
+            "
             :checked="!!element.checked"
             :disabled="disabled"
-            style="margin-left: 8px;"
+            style="margin-left: 8px"
             @check="() => onSelectChange(element.serviceID)"
           />
           <span
@@ -42,12 +46,14 @@
               muted: element.checked !== null,
             }"
             @click="(evt) => openDialog(element, evt)"
-            @keydown="(evt) => evt.keyCode == 32 ? openDialog(element, evt) : null"
+            @keydown="
+              (evt) => (evt.keyCode == 32 ? openDialog(element, evt) : null)
+            "
           >
             <b>{{ element.title }}</b>
             <span
-                class="required-label"
-                v-if="element.required"
+              class="required-label"
+              v-if="element.required"
             >
               - verpflichtend
             </span>
@@ -90,6 +96,7 @@ import type ChecklistItem from "@/api/persservice/ChecklistItem.ts";
 import { MucIcon } from "@muenchen/muc-patternlab-vue";
 import { Sortable } from "sortablejs-vue3";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+
 import P13nCheckbox from "@/components/P13nCheckbox.vue";
 
 const props = withDefaults(
@@ -197,8 +204,8 @@ function handleArrowKeyDown(event: KeyboardEvent) {
   list-style: none;
   padding: 0;
   margin: 0;
-  border-top: 1px solid var(--color-neutrals-beau-blue-light, #E5EEF5);
-  border-bottom: 1px solid var(--color-neutrals-beau-blue-light, #E5EEF5);
+  border-top: 1px solid var(--color-neutrals-beau-blue-light, #e5eef5);
+  border-bottom: 1px solid var(--color-neutrals-beau-blue-light, #e5eef5);
 }
 
 .container {
@@ -210,7 +217,7 @@ function handleArrowKeyDown(event: KeyboardEvent) {
 .list-item {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--color-neutrals-beau-blue-light, #E5EEF5);
+  border-bottom: 1px solid var(--color-neutrals-beau-blue-light, #e5eef5);
   user-select: none;
   cursor: grab;
   color: var(--color-brand-main-blue);
@@ -290,7 +297,7 @@ function handleArrowKeyDown(event: KeyboardEvent) {
 }
 
 .required-label {
-  color: var(--neutrals-grey, #3A5368);
+  color: var(--neutrals-grey, #3a5368);
   /* Body/Body 2 */
   font-family: "Open Sans", sans-serif;
   font-size: 16px;

personalization-webcomponents/src/components/P13nCheckbox.vue

@@ -1,37 +1,36 @@
 <template>
-
   <div
-      tabindex="0"
-      class="radio-look"
-      :disabled="disabled"
-      :aria-disabled="disabled"
-      :checked="checked"
-      @click="!disabled ? emit('check') : null"
-      @keydown="(evt) => evt.keyCode == 32 ? emit('check') : null"
+    tabindex="0"
+    class="radio-look"
+    :disabled="disabled"
+    :aria-disabled="disabled"
+    :checked="checked"
+    @click="!disabled ? emit('check') : null"
+    @keydown="(evt) => (evt.keyCode == 32 ? emit('check') : null)"
   >
     <muc-icon
-        class="icon check-icon"
-        icon="check"
-        :color="checked ? 'white' : 'var(--color-neutrals-blue)'"
+      class="icon check-icon"
+      icon="check"
+      :color="checked ? 'white' : 'var(--color-neutrals-blue)'"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import {MucIcon} from "@muenchen/muc-patternlab-vue";
+import { MucIcon } from "@muenchen/muc-patternlab-vue";
 
-const props = withDefaults(
-    defineProps<{
-      checked?: boolean;
-      disabled?: boolean;
-    }>(),
-    {
-      checked: false,
-      disabled: false,
-    }
+withDefaults(
+  defineProps<{
+    checked?: boolean;
+    disabled?: boolean;
+  }>(),
+  {
+    checked: false,
+    disabled: false,
+  }
 );
 
-const emit = defineEmits(["check"])
+const emit = defineEmits(["check"]);
 </script>
 
 <style scoped>
@@ -52,46 +51,51 @@ const emit = defineEmits(["check"])
   position: relative;
   cursor: pointer;
   outline-offset: var(--radio-button-border-width);
-  transition: border-color 0.3s ease,
-  background-color 0.3s ease;
+  transition:
+    border-color 0.3s ease,
+    background-color 0.3s ease;
 }
 
 .check-icon {
   display: block;
   margin: auto;
-  width: calc(var(--radio-button-size) - (2*var(--radio-button-border-width)));
-  height: calc(var(--radio-button-size) - (2*var(--radio-button-border-width)));
+  width: calc(
+    var(--radio-button-size) - (2 * var(--radio-button-border-width))
+  );
+  height: calc(
+    var(--radio-button-size) - (2 * var(--radio-button-border-width))
+  );
   opacity: 0;
   transition: opacity 0.3s ease;
 }
 
-.radio-look[disabled=true] {
+.radio-look[disabled="true"] {
   border-color: var(--color-neutrals-grey);
-  background: var(--gray-x-light, #9CA8B3);
+  background: var(--gray-x-light, #9ca8b3);
 }
 
-.radio-look[checked][disabled=false]:hover, .radio-look[checked][disabled=false]:focus {
+.radio-look[checked][disabled="false"]:hover,
+.radio-look[checked][disabled="false"]:focus {
   border-color: var(--color-brand-main-blue);
   background-color: var(--color-neutrals-blue);
 }
 
-.radio-look[checked=false][disabled=false]:hover .check-icon, .radio-look[checked=false][disabled=false]:focus .check-icon {
+.radio-look[checked="false"][disabled="false"]:hover .check-icon,
+.radio-look[checked="false"][disabled="false"]:focus .check-icon {
   opacity: 1;
 }
-.radio-look[checked=true][disabled=false]:hover .check-icon, .radio-look[checked=true][disabled=false]:focus .check-icon {
+.radio-look[checked="true"][disabled="false"]:hover .check-icon,
+.radio-look[checked="true"][disabled="false"]:focus .check-icon {
   opacity: 0;
 }
 
-.radio-look[checked=true][disabled=false] {
+.radio-look[checked="true"][disabled="false"] {
   border-color: var(--color-brand-main-blue-dark, #004376);
-  background-color: var(--color-brand-main-blue)
+  background-color: var(--color-brand-main-blue);
 }
 
-.radio-look[checked=true] .check-icon {
+.radio-look[checked="true"] .check-icon {
   opacity: 1;
 }
-
-
 </style>
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>