Możliwość wyjścia z karty po kliknięciu na zewnątrz niej

src/components/Global/ActionButton.vue

@@ -1,6 +1,8 @@
 <template>
   <button class="action-btn">
+    <div class="button_content">
       <slot></slot>
+    </div>
   </button>
 </template>
 
@@ -15,9 +17,6 @@ export default defineComponent({});
 @import "../../styles/responsive";
 
 .action-btn {
-  display: flex;
-  align-items: center;
-
   background: #333;
   border: none;
 
@@ -58,4 +57,9 @@ export default defineComponent({});
     background: #5c5c5c;
   }
 }
+
+.button_content {
+  display: flex;
+  align-items: center;
+}
 </style>

src/components/StationsView/StationFilterCard.vue

@@ -1,9 +1,16 @@
 <template>
-  <section class="card" v-if="showCard">
+  <section class="filter-card" v-click-outside="closeCard">
-    <div class="card_exit" @click="exit">
+    <div class="card_btn">
-      <!-- <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" /> -->
+      <action-button @click="toggleCard">
+        <img class="button_icon" :src="filterIcon" alt="icon-filter" />
+        <p>{{ $t("options.filters") }}</p>
+      </action-button>
     </div>
 
+    <transition name="card-anim">
+      <div class="card_content card" v-if="isVisible">
+        <div class="card_exit" @click="closeCard"></div>
+
         <div class="card_title flex">{{ $t("filters.title") }}</div>
 
         <section class="card_options">
@@ -15,10 +22,6 @@
           />
         </section>
 
-    <!-- <section class="card_modes">
-      <filter-option :option="inputs.modes[0]" @optionChange="invertFilters" />
-    </section> -->
-
         <section class="card_sliders">
           <div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
             <input
@@ -65,10 +68,12 @@
           <action-button class="outlined" @click="resetFilters">
             {{ $t("filters.reset") }}
           </action-button>
-      <action-button class="outlined" @click="exit">{{
+          <action-button class="outlined" @click="closeCard">{{
             $t("filters.close")
           }}</action-button>
         </section>
+      </div>
+    </transition>
   </section>
 </template>
 
@@ -82,13 +87,15 @@ import FilterOption from "./FilterOption.vue";
 
 export default defineComponent({
   components: { ActionButton, FilterOption },
-  props: ["showCard", "exit"],
   emits: ["changeFilterValue", "invertFilters", "resetFilters"],
 
   data: () => ({
+    filterIcon: require("@/assets/icon-filter2.svg"),
+
     inputs: { ...inputData },
     saveOptions: false,
     STORAGE_KEY: "options_saved",
+    isVisible: false,
   }),
 
   mounted() {
@@ -160,7 +167,11 @@ export default defineComponent({
     },
 
     closeCard() {
-      this.exit();
+      this.isVisible = false;
+    },
+
+    toggleCard() {
+      this.isVisible = !this.isVisible;
     },
   },
 });
@@ -170,6 +181,19 @@ export default defineComponent({
 @import "../../styles/responsive";
 @import "../../styles/card";
 
+.card-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translate(-50%, -50%) scale(0.85);
+    opacity: 0;
+  }
+}
+
 .card {
   > section {
     margin-top: 1em;

src/components/TrainsView/TrainStats.vue

@@ -1,11 +1,9 @@
 <template>
-  <div class="train-stats">
+  <div class="train-stats" v-click-outside="closeStats">
-    <div class="stats_button">
+    <action-button class="stats_button" @click="toggleStatsOpen">
-      <action-button @click="toggleStatsOpen">
       <img :src="statsIcon" :alt="$t('trains.stats')" />
       <p>{{ $t("trains.stats") }}</p>
     </action-button>
-    </div>
 
     <transition name="stats-anim" class="stats_wrapper" tag="div">
       <div class="stats-body" v-if="trainStatsOpen">
@@ -104,6 +102,10 @@ export default defineComponent({
     toggleStatsOpen() {
       this.trainStatsOpen = !this.trainStatsOpen;
     },
+
+    closeStats() {
+      this.trainStatsOpen = false;
+    },
   },
 
   setup(props) {
@@ -266,6 +268,9 @@ export default defineComponent({
     max-width: 700px;
     width: 100%;
 
+    top: 100%;
+    left: 0;
+
     background: #222;
     border-radius: 0 1em 1em 1em;
 
@@ -346,8 +351,7 @@ export default defineComponent({
   }
 
   .stats_button {
-    display: flex;
+    margin: 0 auto;
-    justify-content: center;
   }
 }
 </style>

src/main.ts

@@ -20,6 +20,7 @@ const i18n = createI18n({
 
 const clickOutsideDirective: Directive = {
   beforeMount(el, binding) {
+    console.log("before mount");
     
     el.clickOutsideEvent = (event: Event) => {
       if (!(el == event.target || el.contains(event.target))) {

src/views/StationsView.vue

@@ -3,10 +3,13 @@
     <div class="wrapper">
       <div class="body">
         <div class="options-bar">
-          <action-button @click="() => toggleCardsState('filter')">
+          <FilterCard
-            <img class="button_icon" :src="filterIcon" alt="icon-filter" />
+            :showCard="filterCardOpen"
-            <p>{{ $t("options.filters") }}</p>
+            :exit="closeCard"
-          </action-button>
+            @changeFilterValue="changeFilterValue"
+            @invertFilters="invertFilters"
+            @resetFilters="resetFilters"
+          />
 
           <div class="paypal-link">
             <a target="_blank" href="https://paypal.me/spythere">
@@ -27,16 +30,6 @@
         />
       </div>
     </div>
-
-    <transition name="card-anim">
-      <FilterCard
-        :showCard="filterCardOpen"
-        :exit="() => toggleCardsState('filter')"
-        @changeFilterValue="changeFilterValue"
-        @invertFilters="invertFilters"
-        @resetFilters="resetFilters"
-      />
-    </transition>
   </section>
 </template>
 
@@ -68,7 +61,6 @@ export default defineComponent({
     trainIcon: require("@/assets/icon-train.svg"),
     timetableIcon: require("@/assets/icon-timetable.svg"),
     dolarIcon: require("@/assets/icon-dolar.svg"),
-    filterIcon: require("@/assets/icon-filter2.svg"),
     filterCardOpen: false,
     modalHidden: true,
     STORAGE_KEY: "options_saved",
@@ -151,7 +143,7 @@ export default defineComponent({
       this.filterManager.invertFilters();
     },
     closeCard() {
-      this.focusedStationName = "";
+      this.filterCardOpen = false;
     },
     setFocusedStation(name: string) {
       this.focusedStationName = this.focusedStationName == name ? "" : name;
@@ -164,19 +156,6 @@ export default defineComponent({
 @import "../styles/variables.scss";
 @import "../styles/responsive.scss";
 
-.card-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all $animDuration $animType;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: translate(-50%, -50%) scale(0.85);
-    opacity: 0;
-  }
-}
-
 @keyframes blinkAnim {
   0%,
   100% {