frontend: cleanup

* dummy commit

* cleanup workflows

* setup and run eslint

* add linter to CI

* use eslint for formatting

* reorder rules

* drop editor config

frontend/components/Base/ActionsDivider.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="divider">
     <div class="btn-group min-w-[180px] flex-nowrap">
-      <button @click="$emit('edit')" name="options" class="btn btn-sm btn-primary">
+      <button name="options" class="btn btn-sm btn-primary" @click="$emit('edit')">
         <Icon name="heroicons-pencil" class="h-5 w-5 mr-1" aria-hidden="true" />
         <span> Edit </span>
       </button>
-      <button @click="$emit('delete')" name="options" class="btn btn-sm btn-primary">
+      <button name="options" class="btn btn-sm btn-primary" @click="$emit('delete')">
         <Icon name="heroicons-trash" class="h-5 w-5 mr-1" aria-hidden="true" />
         <span> Delete </span>
       </button>

frontend/components/Base/Button.vue

@@ -1,10 +1,10 @@
 <template>
   <NuxtLink
     v-if="to"
-    :to="to"
     v-bind="attributes"
-    class="btn"
     ref="submitBtn"
+    :to="to"
+    class="btn"
     :class="{
       loading: loading,
       'btn-sm': size === 'sm',
@@ -19,8 +19,8 @@
   <button
     v-else
     v-bind="attributes"
-    class="btn"
     ref="submitBtn"
+    class="btn"
     :class="{
       loading: loading,
       'btn-sm': size === 'sm',
@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-  type Sizes = 'sm' | 'md' | 'lg';
+  type Sizes = "sm" | "md" | "lg";
 
   const props = defineProps({
     loading: {
@@ -48,7 +48,7 @@
     },
     size: {
       type: String as () => Sizes,
-      default: 'md',
+      default: "md",
     },
     to: {
       type: String as () => string | null,
@@ -67,13 +67,6 @@
     };
   });
 
-  const is = computed(() => {
-    if (props.to) {
-      return 'a';
-    }
-    return 'button';
-  });
-
   const submitBtn = ref(null);
   const isHover = useElementHover(submitBtn);
 </script>

frontend/components/Base/Container.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
   defineProps({
-    is: {
+    cmp: {
       type: String,
-      default: 'div',
+      default: "div",
     },
   });
 </script>
 
 <template>
-  <component :is="is" class="container max-w-6xl mx-auto px-4">
+  <component :is="cmp" class="container max-w-6xl mx-auto px-4">
     <slot />
   </component>
 </template>

frontend/components/Base/Details.vue

@@ -10,7 +10,7 @@
     </div>
     <div class="border-t border-gray-300 px-4 py-5 sm:p-0">
       <dl class="sm:divide-y sm:divide-gray-300">
-        <div v-for="(dValue, dKey) in details" class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <div v-for="(dValue, dKey) in details" :key="dKey" class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
           <dt class="text-sm font-medium text-gray-500">
             {{ dKey }}
           </dt>

frontend/components/Base/Modal.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="z-[999]">
-    <input type="checkbox" :id="modalId" class="modal-toggle" v-model="modal" />
+    <input :id="modalId" v-model="modal" type="checkbox" class="modal-toggle" />
     <div class="modal modal-bottom sm:modal-middle overflow-visible">
       <div class="modal-box overflow-visible relative">
-        <button @click="close" :for="modalId" class="btn btn-sm btn-circle absolute right-2 top-2">✕</button>
+        <button :for="modalId" class="btn btn-sm btn-circle absolute right-2 top-2" @click="close">✕</button>
 
         <h3 class="font-bold text-lg">
           <slot name="title"></slot>
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-  const emit = defineEmits(['cancel', 'update:modelValue']);
+  const emit = defineEmits(["cancel", "update:modelValue"]);
   const props = defineProps({
     modelValue: {
       type: Boolean,
@@ -34,12 +34,12 @@
 
   function close() {
     if (props.readonly) {
-      emit('cancel');
+      emit("cancel");
       return;
     }
     modal.value = false;
   }
 
   const modalId = useId();
-  const modal = useVModel(props, 'modelValue', emit);
+  const modal = useVModel(props, "modelValue", emit);
 </script>