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/App/Header.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { useAuthStore } from '~~/stores/auth';
+  import { useAuthStore } from "~~/stores/auth";
 
   const authStore = useAuthStore();
   const api = useUserApi();
@@ -10,16 +10,16 @@
       return;
     }
 
-    navigateTo('/');
+    navigateTo("/");
   }
 
   const links = [
     {
-      name: 'Home',
-      href: '/home',
+      name: "Home",
+      href: "/home",
     },
     {
-      name: 'Logout',
+      name: "Logout",
       action: logout,
       last: true,
     },
@@ -33,19 +33,19 @@
 
   const dropdown = [
     {
-      name: 'Item / Asset',
+      name: "Item / Asset",
       action: () => {
         modals.item = true;
       },
     },
     {
-      name: 'Location',
+      name: "Location",
       action: () => {
         modals.location = true;
       },
     },
     {
-      name: 'Label',
+      name: "Label",
       action: () => {
         modals.label = true;
       },
@@ -66,7 +66,7 @@
 
   <div class="bg-neutral absolute shadow-xl top-0 h-[50vh] max-h-96 sm:h-[28vh] -z-10 w-full"></div>
 
-  <BaseContainer is="header" class="py-6 max-w-none">
+  <BaseContainer cmp="header" class="py-6 max-w-none">
     <BaseContainer>
       <h2 class="mt-1 text-4xl font-bold tracking-tight text-neutral-content sm:text-5xl lg:text-6xl flex">
         HomeB
@@ -77,20 +77,22 @@
         <template v-for="link in links">
           <NuxtLink
             v-if="!link.action"
+            :key="link.name"
             class="hover:text-base-content transition-color duration-200 italic"
             :to="link.href"
           >
             {{ link.name }}
           </NuxtLink>
           <button
-            for="location-form-modal"
             v-else
-            @click="link.action"
+            :key="link.name + 'link'"
+            for="location-form-modal"
             class="hover:text-base-content transition-color duration-200 italic"
+            @click="link.action"
           >
             {{ link.name }}
           </button>
-          <span v-if="!link.last"> / </span>
+          <span v-if="!link.last" :key="link.name"> / </span>
         </template>
       </div>
       <div class="flex mt-6">
@@ -102,7 +104,7 @@
             Create
           </label>
           <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
-            <li v-for="btn in dropdown">
+            <li v-for="btn in dropdown" :key="btn.name">
               <button @click="btn.action">
                 {{ btn.name }}
               </button>

frontend/components/App/Toast.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script setup lang="ts">
-  import { useNotifications } from '@/composables/use-notifier';
+  import { useNotifications } from "@/composables/use-notifier";
 
   const { notifications, dropNotification } = useNotifications();
 </script>

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>

frontend/components/Form/DatePicker.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="dropdown dropdown-end w-full" ref="label">
-    <FormTextField tabindex="0" label="Date" v-model="dateText" :inline="inline" readonly />
-    <div @blur="resetTime" tabindex="0" class="mt-1 card compact dropdown-content shadow bg-base-100 rounded-box w-64">
+  <div ref="label" class="dropdown dropdown-end w-full">
+    <FormTextField v-model="dateText" tabindex="0" label="Date" :inline="inline" readonly />
+    <div tabindex="0" class="mt-1 card compact dropdown-content shadow bg-base-100 rounded-box w-64" @blur="resetTime">
       <div class="card-body">
         <div class="flex justify-between items-center">
           <button class="btn btn-xs" @click="prevMonth">
@@ -13,7 +13,7 @@
           </button>
         </div>
         <div class="grid grid-cols-7 gap-2">
-          <div v-for="d in daysIdx">
+          <div v-for="d in daysIdx" :key="d">
             <p class="text-center">
               {{ d }}
             </p>
@@ -21,12 +21,13 @@
           <template v-for="day in days">
             <button
               v-if="day.number != ''"
+              :key="day.number"
               class="text-center btn-xs btn btn-outline"
               @click="select($event, day.date)"
             >
               {{ day.number }}
             </button>
-            <div v-else></div>
+            <div v-else :key="`${day.number}-empty`"></div>
           </template>
         </div>
       </div>
@@ -35,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-  const emit = defineEmits(['update:modelValue', 'update:text']);
+  const emit = defineEmits(["update:modelValue", "update:text"]);
 
   const props = defineProps({
     modelValue: {
@@ -49,12 +50,12 @@
     },
   });
 
-  const selected = useVModel(props, 'modelValue', emit);
+  const selected = useVModel(props, "modelValue", emit);
   const dateText = computed(() => {
     if (selected.value) {
       return selected.value.toLocaleDateString();
     }
-    return '';
+    return "";
   });
 
   const time = ref(new Date());
@@ -68,7 +69,7 @@
   });
 
   const month = computed(() => {
-    return time.value.toLocaleString('default', { month: 'long' });
+    return time.value.toLocaleString("default", { month: "long" });
   });
 
   const year = computed(() => {
@@ -86,14 +87,14 @@
   }
 
   const daysIdx = computed(() => {
-    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    return ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   });
 
   function select(e: MouseEvent, day: Date) {
     console.log(day);
     selected.value = day;
     console.log(selected.value);
-    // @ts-ignore
+    // @ts-ignore - this is a vue3 bug
     e.target.blur();
     resetTime();
   }
@@ -116,7 +117,7 @@
 
     for (let i = 0; i < firstDay; i++) {
       days.push({
-        number: '',
+        number: "",
         date: new Date(),
       });
     }

frontend/components/Form/Multiselect.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="form-control w-full" ref="menu">
+  <div ref="menu" class="form-control w-full">
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
     <div class="dropdown dropdown-top sm:dropdown-end">
       <div tabindex="0" class="w-full min-h-[48px] flex gap-2 p-4 flex-wrap border border-gray-400 rounded-lg">
-        <span class="badge" v-for="itm in value"> {{ name != '' ? itm[name] : itm }} </span>
+        <span v-for="itm in value" :key="name != '' ? itm[name] : itm" class="badge">
+          {{ name != "" ? itm[name] : itm }}
+        </span>
       </div>
       <ul
         tabindex="0"
@@ -13,12 +15,13 @@
       >
         <li
           v-for="(obj, idx) in items"
+          :key="idx"
           :class="{
             bordered: selectedIndexes[idx],
           }"
         >
           <button type="button" @click="toggle(idx)">
-            {{ name != '' ? obj[name] : obj }}
+            {{ name != "" ? obj[name] : obj }}
           </button>
         </li>
       </ul>
@@ -27,11 +30,11 @@
 </template>
 
 <script lang="ts" setup>
-  const emit = defineEmits(['update:modelValue']);
+  const emit = defineEmits(["update:modelValue"]);
   const props = defineProps({
     label: {
       type: String,
-      default: '',
+      default: "",
     },
     modelValue: {
       type: Array as () => any[],
@@ -43,7 +46,7 @@
     },
     name: {
       type: String,
-      default: 'name',
+      default: "name",
     },
     selectFirst: {
       type: Boolean,
@@ -74,5 +77,5 @@
     }
   );
 
-  const value = useVModel(props, 'modelValue', emit);
+  const value = useVModel(props, "modelValue", emit);
 </script>

frontend/components/Form/Select.vue

@@ -3,10 +3,10 @@
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <select class="select select-bordered" v-model="value">
+    <select v-model="value" class="select select-bordered">
       <option disabled selected>Pick one</option>
-      <option v-for="obj in items" :value="obj">
-        {{ name != '' ? obj[name] : obj }}
+      <option v-for="obj in items" :key="name != '' ? obj[name] : obj" :value="obj">
+        {{ name != "" ? obj[name] : obj }}
       </option>
     </select>
     <!-- <label class="label">
@@ -17,11 +17,11 @@
 </template>
 
 <script lang="ts" setup>
-  const emit = defineEmits(['update:modelValue']);
+  const emit = defineEmits(["update:modelValue"]);
   const props = defineProps({
     label: {
       type: String,
-      default: '',
+      default: "",
     },
     modelValue: {
       type: Object as any,
@@ -33,7 +33,7 @@
     },
     name: {
       type: String,
-      default: 'name',
+      default: "name",
     },
     selectFirst: {
       type: Boolean,
@@ -50,5 +50,5 @@
     }
   );
 
-  const value = useVModel(props, 'modelValue', emit);
+  const value = useVModel(props, "modelValue", emit);
 </script>

frontend/components/Form/TextArea.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="form-control" v-if="!inline">
+  <div v-if="!inline" class="form-control">
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <textarea class="textarea textarea-bordered h-24" v-model="value" :placeholder="placeholder" />
+    <textarea v-model="value" class="textarea textarea-bordered h-24" :placeholder="placeholder" />
     <label v-if="limit" class="label">
       <span class="label-text-alt"></span>
       <span class="label-text-alt"> {{ valueLen }}/{{ limit }}</span>
@@ -13,12 +13,17 @@
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <textarea class="textarea textarea-bordered col-span-3 mt-3 h-24" auto-grow v-model="value" :placeholder="placeholder" />
+    <textarea
+      v-model="value"
+      class="textarea textarea-bordered col-span-3 mt-3 h-24"
+      auto-grow
+      :placeholder="placeholder"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-  const emit = defineEmits(['update:modelValue']);
+  const emit = defineEmits(["update:modelValue"]);
   const props = defineProps({
     modelValue: {
       type: [String],
@@ -30,7 +35,7 @@
     },
     type: {
       type: String,
-      default: 'text',
+      default: "text",
     },
     limit: {
       type: [Number, String],
@@ -38,7 +43,7 @@
     },
     placeholder: {
       type: String,
-      default: '',
+      default: "",
     },
     inline: {
       type: Boolean,
@@ -46,7 +51,7 @@
     },
   });
 
-  const value = useVModel(props, 'modelValue', emit);
+  const value = useVModel(props, "modelValue", emit);
   const valueLen = computed(() => {
     return value.value ? value.value.length : 0;
   });

frontend/components/Form/TextField.vue

@@ -3,13 +3,13 @@
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <input ref="input" :type="type" v-model="value" class="input input-bordered w-full" />
+    <input ref="input" v-model="value" :type="type" class="input input-bordered w-full" />
   </div>
   <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <input class="input input-bordered col-span-3 w-full mt-2" v-model="value" />
+    <input v-model="value" class="input input-bordered col-span-3 w-full mt-2" />
   </div>
 </template>
 
@@ -17,7 +17,7 @@
   const props = defineProps({
     label: {
       type: String,
-      default: '',
+      default: "",
     },
     modelValue: {
       type: [String, Number],
@@ -25,7 +25,7 @@
     },
     type: {
       type: String,
-      default: 'text',
+      default: "text",
     },
     triggerFocus: {
       type: Boolean,
@@ -48,5 +48,5 @@
     }
   );
 
-  const value = useVModel(props, 'modelValue');
+  const value = useVModel(props, "modelValue");
 </script>

frontend/components/Icon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-  import type { Ref } from 'vue';
-  import type { IconifyIcon } from '@iconify/vue';
-  import { Icon as Iconify, loadIcon } from '@iconify/vue';
+  import type { Ref } from "vue";
+  import type { IconifyIcon } from "@iconify/vue";
+  import { Icon as Iconify, loadIcon } from "@iconify/vue";
 
   const nuxtApp = useNuxtApp();
   const props = defineProps({
@@ -14,12 +14,12 @@
   const icon: Ref<IconifyIcon | null> = ref(null);
   const component = computed(() => nuxtApp.vueApp.component(props.name));
 
-  icon.value = await loadIcon(props.name).catch(_ => null);
+  icon.value = await loadIcon(props.name).catch(() => null);
 
   watch(
     () => props.name,
     async () => {
-      icon.value = await loadIcon(props.name).catch(_ => null);
+      icon.value = await loadIcon(props.name).catch(() => null);
     }
   );
 </script>

frontend/components/Item/Card.vue

@@ -10,14 +10,19 @@
       </h2>
       <p>{{ description }}</p>
       <div class="flex gap-2 flex-wrap justify-end">
-        <LabelChip v-for="label in item.labels" :label="label" class="badge-primary group-hover:badge-secondary" />
+        <LabelChip
+          v-for="label in item.labels"
+          :key="label.id"
+          :label="label"
+          class="badge-primary group-hover:badge-secondary"
+        />
       </div>
     </div>
   </NuxtLink>
 </template>
 
 <script setup lang="ts">
-  import { Item } from '~~/lib/api/classes/items';
+  import { Item } from "~~/lib/api/classes/items";
 
   const props = defineProps({
     item: {

frontend/components/Item/CreateModal.vue

@@ -2,16 +2,16 @@
   <BaseModal v-model="modal">
     <template #title> Create Item </template>
     <form @submit.prevent="create">
-      <FormSelect label="Location" v-model="form.location" :items="locations ?? []" select-first />
+      <FormSelect v-model="form.location" label="Location" :items="locations ?? []" select-first />
       <FormTextField
-        :trigger-focus="focused"
         ref="locationNameRef"
+        v-model="form.name"
+        :trigger-focus="focused"
         :autofocus="true"
         label="Item Name"
-        v-model="form.name"
       />
-      <FormTextField label="Item Description" v-model="form.description" />
-      <FormMultiselect label="Labels" v-model="form.labels" :items="labels ?? []" />
+      <FormTextField v-model="form.description" label="Item Description" />
+      <FormMultiselect v-model="form.labels" label="Labels" :items="labels ?? []" />
       <div class="modal-action">
         <BaseButton ref="submitBtn" type="submit" :loading="loading">
           <template #icon>
@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-  import { type Location } from '~~/lib/api/classes/locations';
+  import { type Location } from "~~/lib/api/classes/locations";
   const props = defineProps({
     modelValue: {
       type: Boolean,
@@ -36,21 +36,21 @@
 
   const submitBtn = ref(null);
 
-  const modal = useVModel(props, 'modelValue');
+  const modal = useVModel(props, "modelValue");
   const loading = ref(false);
   const focused = ref(false);
   const form = reactive({
     location: {} as Location,
-    name: '',
-    description: '',
-    color: '', // Future!
+    name: "",
+    description: "",
+    color: "", // Future!
     labels: [],
   });
 
   function reset() {
-    form.name = '';
-    form.description = '';
-    form.color = '';
+    form.name = "";
+    form.description = "";
+    form.color = "";
     focused.value = false;
     modal.value = false;
     loading.value = false;
@@ -87,13 +87,13 @@
       labelIds: form.labels.map(l => l.id) as string[],
     };
 
-    const { data, error } = await api.items.create(out);
+    const { error } = await api.items.create(out);
     if (error) {
       toast.error("Couldn't create label");
       return;
     }
 
-    toast.success('Item created');
+    toast.success("Item created");
     reset();
   }
 </script>

frontend/components/Label/Chip.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-  export type sizes = 'sm' | 'md' | 'lg';
+  import { Label } from "~~/lib/api/classes/labels";
 
-  import { Label } from '~~/lib/api/classes/labels';
+  export type sizes = "sm" | "md" | "lg";
   defineProps({
     label: {
       type: Object as () => Label,
@@ -9,7 +9,7 @@
     },
     size: {
       type: String as () => sizes,
-      default: 'md',
+      default: "md",
     },
   });
 
@@ -22,12 +22,12 @@
 
 <template>
   <NuxtLink
+    ref="badge"
     class="badge"
     :class="{
       'p-3': size !== 'sm',
       'p-2 badge-sm': size === 'sm',
     }"
-    ref="badge"
     :to="`/label/${label.id}`"
   >
     <label class="swap swap-rotate" :class="isActive ? 'swap-active' : ''">

frontend/components/Label/CreateModal.vue

@@ -3,13 +3,13 @@
     <template #title> Create Label </template>
     <form @submit.prevent="create">
       <FormTextField
-        :trigger-focus="focused"
         ref="locationNameRef"
+        v-model="form.name"
+        :trigger-focus="focused"
         :autofocus="true"
         label="Label Name"
-        v-model="form.name"
       />
-      <FormTextField label="Label Description" v-model="form.description" />
+      <FormTextField v-model="form.description" label="Label Description" />
       <div class="modal-action">
         <BaseButton type="submit" :loading="loading"> Create </BaseButton>
       </div>
@@ -25,19 +25,19 @@
     },
   });
 
-  const modal = useVModel(props, 'modelValue');
+  const modal = useVModel(props, "modelValue");
   const loading = ref(false);
   const focused = ref(false);
   const form = reactive({
-    name: '',
-    description: '',
-    color: '', // Future!
+    name: "",
+    description: "",
+    color: "", // Future!
   });
 
   function reset() {
-    form.name = '';
-    form.description = '';
-    form.color = '';
+    form.name = "";
+    form.description = "";
+    form.color = "";
     focused.value = false;
     modal.value = false;
     loading.value = false;
@@ -54,13 +54,13 @@
   const toast = useNotifier();
 
   async function create() {
-    const { data, error } = await api.labels.create(form);
+    const { error } = await api.labels.create(form);
     if (error) {
       toast.error("Couldn't create label");
       return;
     }
 
-    toast.success('Label created');
+    toast.success("Label created");
     reset();
   }
 </script>

frontend/components/Location/Card.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { Location } from '~~/lib/api/classes/locations';
+  import { Location } from "~~/lib/api/classes/locations";
 
   defineProps({
     location: {

frontend/components/Location/CreateModal.vue

@@ -3,13 +3,13 @@
     <template #title> Create Location </template>
     <form @submit.prevent="create">
       <FormTextField
-        :trigger-focus="focused"
         ref="locationNameRef"
+        v-model="form.name"
+        :trigger-focus="focused"
         :autofocus="true"
         label="Location Name"
-        v-model="form.name"
       />
-      <FormTextField label="Location Description" v-model="form.description" />
+      <FormTextField v-model="form.description" label="Location Description" />
       <div class="modal-action">
         <BaseButton type="submit" :loading="loading"> Create </BaseButton>
       </div>
@@ -25,12 +25,12 @@
     },
   });
 
-  const modal = useVModel(props, 'modelValue');
+  const modal = useVModel(props, "modelValue");
   const loading = ref(false);
   const focused = ref(false);
   const form = reactive({
-    name: '',
-    description: '',
+    name: "",
+    description: "",
   });
 
   whenever(
@@ -41,8 +41,8 @@
   );
 
   function reset() {
-    form.name = '';
-    form.description = '';
+    form.name = "";
+    form.description = "";
     focused.value = false;
     modal.value = false;
     loading.value = false;
@@ -61,7 +61,7 @@
     }
 
     if (data) {
-      toast.success('Location created');
+      toast.success("Location created");
       navigateTo(`/location/${data.id}`);
     }
 

frontend/components/ModalConfirm.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseModal @cancel="cancel(false)" v-model="isRevealed" readonly>
+  <BaseModal v-model="isRevealed" readonly @cancel="cancel(false)">
     <template #title> Confirm </template>
     <div>
       <p>{{ text }}</p>