style(eslint): add plugin perfectionist

frontend/.vscode/settings.json

@@ -8,5 +8,8 @@
     80,
     120
 ],
-
+"editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always"
+},
+"editor.formatOnSave": false
 }

frontend/app.vue

@@ -5,13 +5,11 @@ import { generateUUID } from '~/utils/misc'
 provide('app-uuid', { value: generateUUID() })
 useHead(
   {
-    script: [
-      {
-        key: 'revive',
-        src: '../js/revive.min.js',
-        async: false,
-      },
-    ],
+    script: [ {
+      async: false,
+      key: 'revive',
+      src: '../js/revive.min.js',
+    } ],
   },
   { mode: 'client' },
 )

frontend/app/router.options.ts

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

frontend/components/bc/BcButton.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
 const props = defineProps<{
-  /**
-   * ℹ️ should only be used rarely, e.g. in cases where the action should not be triggerd twice
-   */
-  isDisabled?: boolean
   /**
    * ♿️ buttons that are aria-disabled are still perceivable by screen readers
    * as they can still be focused on
    */
-  isAriaDisabled?: boolean
-  variant?: 'secondary' // | 'red'
+  isAriaDisabled?: boolean,
+  /**
+   * ℹ️ should only be used rarely, e.g. in cases where the action should not be triggerd twice
+   */
+  isDisabled?: boolean,
+  variant?: 'secondary', // | 'red'
 }>()
 
 const shouldAppearDisabled = computed(

frontend/components/bc/BcContentFilter.vue

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-import {
-  faMagnifyingGlass,
-} from '@fortawesome/pro-solid-svg-icons'
+import { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type InputText from 'primevue/inputtext'
 
 interface Props {
-  searchPlaceholder?: string
-  disabledFilter?: boolean
+  disabledFilter?: boolean,
+  searchPlaceholder?: string,
 }
 const props = defineProps<Props>()
 

frontend/components/bc/BcCurrencySelection.vue

@@ -2,10 +2,12 @@
 import type { Currency } from '~/types/currencies'
 
 defineProps<{
-  showCurrencyIcon: boolean
+  showCurrencyIcon: boolean,
 }>()
 
-const { currency, withLabel, setCurrency } = useCurrency()
+const {
+  currency, setCurrency, withLabel,
+} = useCurrency()
 </script>
 
 <template>
@@ -25,7 +27,7 @@ const { currency, withLabel, setCurrency } = useCurrency()
         >
           <IconCurrency
             v-if="currency"
-            :currency="currency"
+            :currency
           /> </span>{{ currency }}
       </span>
     </template>

frontend/components/bc/BcDialog.vue

@@ -5,7 +5,7 @@ const { width } = useWindowSize()
 const { setTouchableElement } = useSwipe()
 
 interface Props {
-  header?: string
+  header?: string,
 }
 const props = defineProps<Props>()
 
@@ -35,7 +35,7 @@ const onShow = () => {
     :header="props.header"
     :dismissable-mask="true"
     :draggable="false"
-    :position="position"
+    :position
     class="modal_container"
     :class="{ 'p-dialog-header-hidden': !props.header && !$slots.header }"
     @show="onShow"

frontend/components/bc/BcDropdown.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 interface Props {
-  variant?: 'default' | 'table' | 'header'
-  panelClass?: string
+  panelClass?: string,
+  variant?: 'default' | 'header' | 'table',
 }
 
 defineProps<Props>()

frontend/components/bc/BcFaq.vue

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faCaretRight } from '@fortawesome/pro-solid-svg-icons'
 
 interface Props {
-  translationPath?: string
+  translationPath?: string,
 }
 const props = defineProps<Props>()
 const { t: $t } = useTranslation()
@@ -19,11 +19,11 @@ const questions = computed(() => {
     }
     else {
       list.push({
-        path,
-        question,
         answers: tAll($t, `${path}.answer`),
-        linkPath: tD($t, `${path}.link.path`),
         linkLabel: tD($t, `${path}.link.label`),
+        linkPath: tD($t, `${path}.link.path`),
+        path,
+        question,
       })
     }
   }

frontend/components/bc/BcIconToggle.vue

@@ -3,9 +3,9 @@ import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 interface Props {
-  trueIcon?: IconDefinition
-  falseIcon?: IconDefinition
-  disabled?: boolean
+  disabled?: boolean,
+  falseIcon?: IconDefinition,
+  trueIcon?: IconDefinition,
 }
 
 const props = defineProps<Props>()

frontend/components/bc/BcMaintenanceBanner.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { warn } from 'vue'
 
-const {
-  public: { maintenanceTS },
-} = useRuntimeConfig()
+const { public: { maintenanceTS } } = useRuntimeConfig()
 const { tick } = useInterval(60)
 const { t: $t } = useTranslation()
 
@@ -24,9 +22,7 @@ const maintenanceLabel = computed(() => {
   }
   const ts = new Date(parsed * 1000).getTime()
   if (ts > tick.value) {
-    return $t('maintenance.planned', {
-      date: formatTsToAbsolute(ts / 1000, $t('locales.date'), true),
-    })
+    return $t('maintenance.planned', { date: formatTsToAbsolute(ts / 1000, $t('locales.date'), true) })
   }
   else {
     return $t('maintenance.ongoing')

frontend/components/bc/BcToggle.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 interface Props {
-  trueOption?: string
-  falseOption?: string
-  disabled?: boolean
+  disabled?: boolean,
+  falseOption?: string,
+  trueOption?: string,
 }
 defineProps<Props>()
 
@@ -22,7 +22,7 @@ const selected = defineModel<boolean>({ required: true })
     </slot>
     <InputSwitch
       v-model="selected"
-      :disabled="disabled"
+      :disabled
     />
     <slot name="trueOption">
       <div

frontend/components/bc/BcTooltip.vue

@@ -2,19 +2,19 @@
 import { useTooltipStore } from '~/stores/useTooltipStore'
 
 interface Props {
-  text?: string
-  title?: string
-  layout?: 'special' | 'default'
-  position?: 'top' | 'left' | 'right' | 'bottom'
-  hide?: boolean
-  tooltipClass?: string
-  fitContent?: boolean
-  renderTextAsHtml?: boolean
-  scrollContainer?: string // query selector for scrollable parent container
-  dontOpenPermanently?: boolean
-  hoverDelay?: number
-  tooltipWidth?: `${number}px` | `${number}%`
-  tooltipTextAlign?: 'left' | 'center' | 'right'
+  dontOpenPermanently?: boolean,
+  fitContent?: boolean,
+  hide?: boolean,
+  hoverDelay?: number,
+  layout?: 'default' | 'special',
+  position?: 'bottom' | 'left' | 'right' | 'top',
+  renderTextAsHtml?: boolean,
+  scrollContainer?: string, // query selector for scrollable parent container
+  text?: string,
+  title?: string,
+  tooltipClass?: string,
+  tooltipTextAlign?: 'center' | 'left' | 'right',
+  tooltipWidth?: `${number}%` | `${number}px`,
 }
 
 const toolTipTextAlignWithDefault = computed(
@@ -26,8 +26,12 @@ const bcTooltipOwner = ref<HTMLElement | null>(null)
 const bcTooltip = ref<HTMLElement | null>(null)
 let scrollParents: HTMLElement[] = []
 const tooltipAddedTimeout = ref<NodeJS.Timeout | null>(null)
-const { selected, doSelect } = useTooltipStore()
-const { width, height } = useWindowSize()
+const {
+  doSelect, selected,
+} = useTooltipStore()
+const {
+  height, width,
+} = useWindowSize()
 
 // this const will be avaiable on template
 const slots = useSlots()
@@ -36,14 +40,14 @@ const hasContent = computed(() => !!slots.tooltip || !!props.text)
 const canBeOpened = computed(() => !props.hide && hasContent.value)
 
 const {
-  value: hover,
   bounce: bounceHover,
   instant: instantHover,
+  value: hover,
 } = useDebounceValue<boolean>(false, 50)
 const {
-  value: hoverTooltip,
   bounce: bounceHoverTooltip,
   instant: instantHoverTooltip,
+  value: hoverTooltip,
 } = useDebounceValue<boolean>(false, 50)
 const isSelected = computed(
   () => !!bcTooltipOwner.value && selected.value === bcTooltipOwner.value,
@@ -52,7 +56,11 @@ const isOpen = computed(
   () => isSelected.value || hover.value || hoverTooltip.value,
 )
 
-const pos = ref<{ top: string, left: string }>({ top: '0', left: '0' })
+const pos = ref<{ left: string,
+  top: string, }>({
+  left: '0',
+  top: '0',
+})
 
 const classList = computed(() => {
   return [
@@ -102,7 +110,10 @@ const setPosition = () => {
   }
   left = Math.max(0, Math.min(left, width.value - ttWidth))
   top = Math.max(0, Math.min(top, height.value - ttHeight))
-  pos.value = { top: `${top}px`, left: `${left}px` }
+  pos.value = {
+    left: `${left}px`,
+    top: `${top}px`,
+  }
   if (bcTooltip.value) {
     let centerX = -5 + Math.abs(left - rect.left) + rect.width / 2
     if (rect.width > ttWidth) {
@@ -204,7 +215,10 @@ const removeScrollParent = () => {
 }
 
 watch(
-  () => [props.title, props.text],
+  () => [
+    props.title,
+    props.text,
+  ],
   () => {
     if (isOpen.value) {
       requestAnimationFrame(() => {

frontend/components/bc/BcTranslation.vue

@@ -6,9 +6,9 @@ defineProps<{
   /**
    * The path to the key in the translation file (e.g. en.json)
    */
-  keypath: KeyPaths<MessageSchema>
-  linkpath?: KeyPaths<MessageSchema>
-  tag?: keyof HTMLElementTagNameMap
+  keypath: KeyPaths<MessageSchema>,
+  linkpath?: KeyPaths<MessageSchema>,
+  tag?: keyof HTMLElementTagNameMap,
   /**
    * URL to link to
    *
@@ -23,7 +23,7 @@ defineProps<{
    *   "_link": "Click here"
    * }
    */
-  to?: string
+  to?: string,
 }>()
 </script>
 

frontend/components/bc/CookieModal.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { COOKIE_KEY, type CookiesPreference } from '~/types/cookie'
+import {
+  COOKIE_KEY, type CookiesPreference,
+} from '~/types/cookie'
 import { Target } from '~/types/links'
 
 const cookiePreference = useCookie<CookiesPreference>(

frontend/components/bc/CopyLabel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 interface Props {
-  value?: string
-  label?: string // will default to value
+  label?: string, // will default to value
+  value?: string,
 }
 defineProps<Props>()
 </script>
@@ -16,7 +16,7 @@ defineProps<Props>()
       :value="label || value"
     >
     <BcCopyToClipboard
-      :value="value"
+      :value
       class="copy-icon"
     />
   </div>

frontend/components/bc/CopyToClipboard.vue

@@ -5,15 +5,15 @@ import { warn } from 'vue'
 import BcTooltip from './BcTooltip.vue'
 
 interface Props {
-  value?: string
+  value?: string,
 }
 const props = defineProps<Props>()
 
 const { t: $t } = useTranslation()
 const {
-  value: tooltip,
   bounce,
   instant,
+  value: tooltip,
 } = useDebounceValue<string>($t('clipboard.copy'), 2000)
 
 function copyToClipboard(): void {