feat: added modal component
mellbacon committed
Jun 14, 2023 at 17:09 UTC
b94785f5fb660e4de8ca637907f27694bff3d48d
1 file changed
+119
src/lib/utility/Popup.svelte
new
+119
@@ -0,0 +1,119 @@
1
+<script lang="ts">
2
+ import { createEventDispatcher } from "svelte";
3
+
4
+ export let title: string;
5
+ export let description = "";
6
+ export let open = false;
7
+
8
+ let popup = null;
9
+ let wrapper = null;
10
+
11
+ const dispatch = createEventDispatcher();
12
+
13
+ function handleClick(e)
14
+ {
15
+ if (e.target === wrapper) {
16
+ open = false;
17
+ }
18
+ }
19
+</script>
20
+
21
+{#if open}
22
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
23
+ <div class="popup-wrapper" bind:this={wrapper} on:click={handleClick}>
24
+ <div class="popup-container" bind:this={popup}>
25
+ <div class="popup-header">
26
+ <span class="title">{title}</span>
27
+ </div>
28
+ <div class="popup-content">
29
+ <p class="description">{description}</p>
30
+ <div class="content">
31
+ <slot></slot>
32
+ </div>
33
+ <div class="button-group">
34
+ <slot name="buttons"></slot>
35
+ </div>
36
+ </div>
37
+ </div>
38
+ </div>
39
+{/if}
40
+
41
+<style lang="scss">
42
+ .popup-wrapper {
43
+ position: fixed;
44
+ top: 0;
45
+ left: 0;
46
+ display: flex;
47
+ justify-content: center;
48
+ align-items: center;
49
+ width: 100vw;
50
+ height: 100vh;
51
+ background-color: rgba(0, 0, 0, 0.521);
52
+ z-index: 3;
53
+ }
54
+ .popup-container {
55
+ position: static;
56
+ min-height: 25%;
57
+ min-width: 45%;
58
+ background-color: #262626;
59
+ border-radius: 2px;
60
+ }
61
+ @media(min-width: 42rem) {
62
+ .popup-container {
63
+ position: static;
64
+ width: 84%;
65
+ height: auto;
66
+ max-height: 90%
67
+ }
68
+ }
69
+ @media(min-width: 66rem) {
70
+ .popup-container {
71
+ width: 60%;
72
+ max-height: 84%
73
+ }
74
+ }
75
+ @media(min-width: 82rem) {
76
+ .popup-container {
77
+ width: 48%
78
+ }
79
+ }
80
+ .popup-header {
81
+ display: flex;
82
+ align-items: center;
83
+ padding: 1.5rem 3rem 0.5rem 1rem;
84
+ font-size: 1.25rem;
85
+ }
86
+ .popup-content {
87
+ display: flex;
88
+ padding: 1rem 3rem 0.5rem 1rem;
89
+ flex-direction: column;
90
+ justify-content: center;
91
+ p {
92
+ margin-top: -5px;
93
+ }
94
+ .content {
95
+ width: 100%;
96
+ }
97
+ .button-group {
98
+ width: 100%;
99
+ display: flex;
100
+ align-items: center;
101
+ justify-content: center;
102
+ margin-top: 40px;
103
+ margin-bottom: 30px;
104
+ :global(button) {
105
+ min-width: 90px;
106
+ height: 35px;
107
+ border-radius: 2px;
108
+ margin: 0 10px;
109
+ display: flex;
110
+ justify-content: center;
111
+ align-items: center;
112
+ background-color: #2276b2;
113
+ color: #f9f9f9;
114
+ cursor: pointer;
115
+ padding: 0 10px;
116
+ }
117
+ }
118
+ }
119
+</style>