From 3cf7dee6541e9d9c5b596653900751bd705f2901 Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Mon, 18 Mar 2024 22:29:05 +0100
Subject: [PATCH 1/2] fix(#281): linting

---
 .../elements/Login/SignupComponent.vue        | 25 ++++++++++++++-----
 src/views/CardCreatorPage.vue                 | 23 ++++++++++++++---
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/components/elements/Login/SignupComponent.vue b/src/components/elements/Login/SignupComponent.vue
index ee709c54..d5fe66e2 100644
--- a/src/components/elements/Login/SignupComponent.vue
+++ b/src/components/elements/Login/SignupComponent.vue
@@ -1,11 +1,19 @@
 <template>
   <div>
-    <BaseCCButton v-if="!isSignUpRequired" @click="login">
+    <BaseCCButton
+      v-if="!isSignUpRequired"
+      @click="login"
+    >
       Login with keplr
     </BaseCCButton>
     <div v-else>
-      <div v-if="isKeplrAvailable" class="flex flex-col justify-center">
-        <p class="p-7">You have to sign up first</p>
+      <div
+        v-if="isKeplrAvailable"
+        class="flex flex-col justify-center"
+      >
+        <p class="p-7">
+          You have to sign up first
+        </p>
         <vue-hcaptcha
           :sitekey="state.siteKey"
           class="mx-auto"
@@ -15,10 +23,16 @@
       <div v-else>
         <p class="p-7">
           To log in you first need download and install the
-          <a href="https://www.keplr.app" class="underline">keplr wallet</a>
+          <a
+            href="https://www.keplr.app"
+            class="underline"
+          >keplr wallet</a>
           browser extension
         </p>
-        <a href="https://www.keplr.app/download" class="mx-auto">
+        <a
+          href="https://www.keplr.app/download"
+          class="mx-auto"
+        >
           <BaseCCButton :type="ButtonType.TEAL"> Download Keplr</BaseCCButton>
         </a>
       </div>
@@ -33,7 +47,6 @@ import { ButtonType } from "@/components/elements/CCButton/ButtonType";
 import { useLogin } from "@/def-composables/useLogin";
 import { onMounted, reactive } from "vue";
 import { env } from "@/env";
-import SignupComponent from "@/components/elements/Login/SignupComponent.vue";
 
 const { isKeplrAvailable } = useKeplr();
 const { checkSignUpRequired, login, isSignUpRequired, onVerify } = useLogin();
diff --git a/src/views/CardCreatorPage.vue b/src/views/CardCreatorPage.vue
index 132f3ccc..fcc4a1b8 100644
--- a/src/views/CardCreatorPage.vue
+++ b/src/views/CardCreatorPage.vue
@@ -230,17 +230,32 @@
             class="flex-row pl-8 pr-[4.5rem] py-5 justify-center"
           >
             <!-- Onboard Preview -->
-            <svg v-if="cropImage!=='' && !designateArtist"
+            <svg
+              v-if="cropImage!=='' && !designateArtist"
               class="pl-8"
               width="260" 
               height="168" 
               xmlns="http://www.w3.org/2000/svg"
             >
               <mask id="maskImage">
-                <image :xlink:href="getOBMask()"  width="260" height="168" />
+                <image
+                  :xlink:href="getOBMask()"
+                  width="260"
+                  height="168"
+                />
               </mask>
-              <image :xlink:href="model.image" width="260" y="-15" height="160" mask="url(#maskImage)" />
-              <image :xlink:href="getOBFrame()" width="260" height="168" />
+              <image
+                :xlink:href="model.image"
+                width="260"
+                y="-15"
+                height="160"
+                mask="url(#maskImage)"
+              />
+              <image
+                :xlink:href="getOBFrame()"
+                width="260"
+                height="168"
+              />
             </svg>
 
             <div class="p-3 font-bold text-left">

From 93ffa8766c807a161f4c660172b786b591def0cb Mon Sep 17 00:00:00 2001
From: lxgr-linux <lxgr@protonmail.com>
Date: Mon, 18 Mar 2024 22:42:40 +0100
Subject: [PATCH 2/2] fix(#281): Made Dropdowns always close

---
 src/components/elements/Dropdown/Dropdown.vue | 17 +++++++++++++++--
 src/def-composables/useDropdown.ts            | 13 +++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 src/def-composables/useDropdown.ts

diff --git a/src/components/elements/Dropdown/Dropdown.vue b/src/components/elements/Dropdown/Dropdown.vue
index 3ca8f0ba..066193bb 100644
--- a/src/components/elements/Dropdown/Dropdown.vue
+++ b/src/components/elements/Dropdown/Dropdown.vue
@@ -34,15 +34,18 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import {
   ButtonType,
   getButtonColor,
   getTextColor,
 } from "@/components/elements/CCButton/ButtonType";
+import { useDropdown } from "@/def-composables/useDropdown";
 
 const model = defineModel<T>();
 const isOpen = ref(false);
+const thisCounter = ref(0);
+const { openCounter, incCounter } = useDropdown();
 
 const props = withDefaults(
   defineProps<{
@@ -56,7 +59,7 @@ const props = withDefaults(
     initial: "?",
     displayFn: (v: T): string => "" + v,
     type: ButtonType.PUSSYRED,
-  }
+  },
 );
 
 const displayButton = () => {
@@ -67,8 +70,18 @@ const displayButton = () => {
 
 const toggleDropdown = () => {
   isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    incCounter();
+    thisCounter.value = openCounter.value;
+  }
 };
 
+watch(openCounter, (cur) => {
+  if (cur != thisCounter.value) {
+    isOpen.value = false;
+  }
+});
+
 const selectOption = (option: T) => {
   model.value = option;
 };
diff --git a/src/def-composables/useDropdown.ts b/src/def-composables/useDropdown.ts
new file mode 100644
index 00000000..7d038c47
--- /dev/null
+++ b/src/def-composables/useDropdown.ts
@@ -0,0 +1,13 @@
+import {ref, type Ref} from "vue";
+
+const openCounter: Ref<number> = ref(0)
+
+const incCounter = () => {
+  openCounter.value++
+}
+
+export const useDropdown = () => {
+  return {
+    openCounter, incCounter
+  }
+}