style(eslint): apply stylistic rules

See: https://eslint.style/rules
See: BIDS-128

frontend/app.vue

@@ -8,9 +8,9 @@ useHead({
     {
       key: 'revive',
       src: '../js/revive.min.js',
-      async: false
-    }
-  ]
+      async: false,
+    },
+  ],
 }, { mode: 'client' })
 useWindowSizeProvider()
 useBcToastProvider()

frontend/app/router.options.ts

@@ -1,5 +1,5 @@
 export default {
-  scrollBehavior (_to: any, _from: any, savedPosition: { left: number, top: number } | null) {
+  scrollBehavior(_to: any, _from: any, savedPosition: { left: number, top: number } | null) {
     return { _to, ...savedPosition }
-  }
+  },
 }

frontend/components/bc/BcBlurOverlay.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="gradient-blur" />
 </template>
+
 <style lang="scss" scoped>
 .gradient-blur {
   background: linear-gradient(rgba(233, 233, 233, 0), rgba(233, 233, 233, 1));

frontend/components/bc/BcButton.vue

@@ -1,23 +1,22 @@
 <script lang="ts" setup>
-
-const props =defineProps<{
+const props = defineProps<{
   /**
    * ℹ️ should only be used rarely, e.g. in cases where the action should not be triggerd twice
    */
-  isDisabled?: boolean,
+  isDisabled?: boolean
   /**
    * ♿️ buttons that are aria-disabled are still perceivable by screen readers
-   * as they can still be focused on 
+   * as they can still be focused on
    */
-  isAriaDisabled?: boolean,
+  isAriaDisabled?: boolean
   variant?: 'secondary' // | 'red'
 }>()
 
 const shouldAppearDisabled = computed(() => props.isDisabled || props.isAriaDisabled)
 </script>
 
-<template> 
-  <Button 
+<template>
+  <Button
     type="button"
     :disabled="isDisabled"
     :aria-disabled="isAriaDisabled"
@@ -27,16 +26,15 @@ const shouldAppearDisabled = computed(() => props.isDisabled || props.isAriaDisa
       // 'bc-button--red': variant === 'red'
     }"
   >
-    <slot/>
+    <slot />
     <span
       v-if="$slots.icon"
       class="bc-button__icon"
     >
-      <slot name="icon"/>
+      <slot name="icon" />
     </span>
   </Button>
-
- </template>
+</template>
 
 <style lang="scss" scoped>
   .bc-button--secondary {
@@ -65,4 +63,4 @@ const shouldAppearDisabled = computed(() => props.isDisabled || props.isAriaDisa
   .bc-button__icon {
     margin-left: var(--padding-small);
   }
-</style>
+</style>

frontend/components/bc/BcCurrencySelection.vue

@@ -6,7 +6,6 @@ defineProps<{
 }>()
 
 const { currency, withLabel, setCurrency } = useCurrency()
-
 </script>
 
 <template>
@@ -20,8 +19,14 @@ const { currency, withLabel, setCurrency } = useCurrency()
   >
     <template #value>
       <span class="item in-header ">
-        <span v-if="showCurrencyIcon" class="icon">
-          <IconCurrency v-if="currency" :currency="currency" />
+        <span
+          v-if="showCurrencyIcon"
+          class="icon"
+        >
+          <IconCurrency
+            v-if="currency"
+            :currency="currency"
+          />
         </span>{{ currency }}
       </span>
     </template>

frontend/components/bc/BcDialog.vue

@@ -5,11 +5,11 @@ const { width } = useWindowSize()
 const { setTouchableElement } = useSwipe()
 
 interface Props {
-  header?: string,
+  header?: string
 }
 const props = defineProps<Props>()
 
-const dialog = ref<{container: HTMLElement} | undefined>()
+const dialog = ref<{ container: HTMLElement } | undefined>()
 
 const visible = defineModel<boolean>() // requires two way binding as both the parent (only the parent can open the modal) and the component itself (clicking outside the modal closes it) need to update the visibility
 
@@ -35,7 +35,7 @@ const onShow = () => {
     :draggable="false"
     :position="position"
     class="modal_container"
-    :class="{'p-dialog-header-hidden':!props.header && !$slots.header}"
+    :class="{ 'p-dialog-header-hidden': !props.header && !$slots.header }"
     @show="onShow"
   >
     <template #header>

frontend/components/bc/BcDropdown.vue

@@ -1,20 +1,28 @@
 <script setup lang="ts">
-
 interface Props {
-  variant?: 'default' | 'table' | 'header',
+  variant?: 'default' | 'table' | 'header'
   panelClass?: string
 }
 
 defineProps<Props>()
 </script>
 
 <template>
-  <Dropdown :class="variant" :panel-class="[variant, panelClass]">
+  <Dropdown
+    :class="variant"
+    :panel-class="[variant, panelClass]"
+  >
     <template #value="slotProps">
-      <slot name="value" v-bind="slotProps" />
+      <slot
+        name="value"
+        v-bind="slotProps"
+      />
     </template>
     <template #option="slotProps">
-      <slot name="option" v-bind="slotProps.option" />
+      <slot
+        name="option"
+        v-bind="slotProps.option"
+      />
     </template>
   </Dropdown>
 </template>

frontend/components/bc/BcFaq.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
-  faCaretRight
+  faCaretRight,
 } from '@fortawesome/pro-solid-svg-icons'
+
 interface Props {
   translationPath?: string
 }
@@ -17,35 +18,52 @@ const questions = computed(() => {
     const question = tD($t, `${path}.question`)
     if (!question) {
       break
-    } else {
+    }
+    else {
       list.push({
         path,
         question,
         answers: tAll($t, `${path}.answer`),
         linkPath: tD($t, `${path}.link.path`),
-        linkLabel: tD($t, `${path}.link.label`)
+        linkLabel: tD($t, `${path}.link.label`),
       })
     }
   }
   return list
 })
-
 </script>
 
 <template>
-  <div v-if="questions.length" class="faq-container">
+  <div
+    v-if="questions.length"
+    class="faq-container"
+  >
     <h1>FAQ</h1>
     <Accordion class="accordion">
-      <AccordionTab v-for="quest in questions" :key="quest.path" :header="quest.question">
+      <AccordionTab
+        v-for="quest in questions"
+        :key="quest.path"
+        :header="quest.question"
+      >
         <template #headericon>
           <FontAwesomeIcon :icon="faCaretRight" />
         </template>
         <div class="answer">
-          <p v-for="(answer, index) in quest.answers" :key="index">
+          <p
+            v-for="(answer, index) in quest.answers"
+            :key="index"
+          >
             {{ answer }}
           </p>
-          <div v-if="quest.linkPath" class="footer">
-            <BcLink :to="quest.linkPath" target="_blank" class="link">
+          <div
+            v-if="quest.linkPath"
+            class="footer"
+          >
+            <BcLink
+              :to="quest.linkPath"
+              target="_blank"
+              class="link"
+            >
               {{ quest.linkLabel }}
             </BcLink>
           </div>

frontend/components/bc/BcIconToggle.vue

@@ -3,8 +3,8 @@ import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 interface Props {
-  trueIcon?: IconDefinition,
-  falseIcon?: IconDefinition,
+  trueIcon?: IconDefinition
+  falseIcon?: IconDefinition
   disabled?: boolean
 }
 
@@ -21,19 +21,29 @@ const toggle = () => {
   }
   selected.value = !selected.value
 }
-
 </script>
 
 <template>
-  <div class="bc-toggle" :class="{ selected }" :disabled="disabled || null" @click="toggle">
+  <div
+    class="bc-toggle"
+    :class="{ selected }"
+    :disabled="disabled || null"
+    @click="toggle"
+  >
     <div class="icon true-icon">
       <slot name="trueIcon">
-        <FontAwesomeIcon v-if="trueIcon" :icon="trueIcon" />
+        <FontAwesomeIcon
+          v-if="trueIcon"
+          :icon="trueIcon"
+        />
       </slot>
     </div>
     <div class="icon false-icon">
       <slot name="falseIcon">
-        <FontAwesomeIcon v-if="falseIcon" :icon="falseIcon" />
+        <FontAwesomeIcon
+          v-if="falseIcon"
+          :icon="falseIcon"
+        />
       </slot>
     </div>
     <span class="slider" />