Migracja projektu na Vite

src/components/PopUpCard.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="bg-dimmer"></div>
+  <div class="popup-card">
+    <div class="card_content">
+      <p>{{ store.alertMessage || store.confirmMessage }}</p>
+    </div>
+
+    <div class="card_actions">
+      <span v-if="store.alertMessage">
+        <button @click="closeCard">OK!</button>
+      </span>
+
+      <span v-else-if="store.confirmMessage">
+        <button @click="confirm">OK!</button>
+        <button @click="closeCard">Anuluj</button>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+
+export default defineComponent({
+  emits: ['confirm'],
+
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  methods: {
+    closeCard() {
+      this.store.alertMessage = '';
+      this.store.confirmMessage = '';
+    },
+
+    confirm() {
+      this.$emit('confirm');
+      this.closeCard();
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.bg-dimmer {
+  position: fixed;
+  z-index: 998;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  background-color: #0000004f;
+}
+.popup-card {
+  position: fixed;
+  z-index: 999;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 80%;
+  max-width: 350px;
+
+  padding: 0.5em 1em;
+  margin-top: 1em;
+
+  font-size: 1.35em;
+
+  background-color: #2a2a2a;
+  box-shadow: 2px 0 10px 2px #1f1f1f;
+}
+
+.card_content {
+  text-align: center;
+}
+
+.card_actions {
+  display: flex;
+  justify-content: center;
+}
+</style>