@mirweb/mir-web-components 2.6.0 → 2.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/components/index.ts
CHANGED
|
@@ -17,6 +17,7 @@ export { default as MoleculeAddress } from "./molecules/address/address.vue";
|
|
|
17
17
|
export { default as MoleculeBulletList } from "./molecules/bullet-list/bullet-list.vue";
|
|
18
18
|
export { default as MoleculeCard } from "./molecules/card/card.vue";
|
|
19
19
|
export { default as MoleculeColumnCard } from "./molecules/column-card/column-card.vue";
|
|
20
|
+
export { default as MoleculeCountdown } from "./molecules/countdown/countdown.vue";
|
|
20
21
|
export { default as MoleculeEventCard } from "./molecules/event-card/event-card.vue";
|
|
21
22
|
export { default as MoleculeFlashcard } from "./molecules/flashcard/flashcard.vue";
|
|
22
23
|
export { default as MoleculeModal } from "./molecules/modal/modal.vue";
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
:class="['countdown', props.variant === 'dark' ? 'countdown--dark' : '']"
|
|
4
|
+
>
|
|
5
|
+
<div class="countdown__row" v-if="!countdown.includes('Event started')">
|
|
6
|
+
<div class="countdown__unit">
|
|
7
|
+
<span class="countdown__number">{{ countdownParts.days }}</span>
|
|
8
|
+
<span class="countdown__label">{{ props.days ?? "Days" }}</span>
|
|
9
|
+
</div>
|
|
10
|
+
<div class="countdown__divider"></div>
|
|
11
|
+
<div class="countdown__unit">
|
|
12
|
+
<span class="countdown__number">{{ countdownParts.hours }}</span>
|
|
13
|
+
<span class="countdown__label">{{ props.hours ?? "Hours" }}</span>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="countdown__divider"></div>
|
|
16
|
+
<div class="countdown__unit">
|
|
17
|
+
<span class="countdown__number">{{ countdownParts.minutes }}</span>
|
|
18
|
+
<span class="countdown__label">{{ props.minutes ?? "Min" }}</span>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="countdown__divider"></div>
|
|
21
|
+
<div class="countdown__unit">
|
|
22
|
+
<span class="countdown__number">{{ countdownParts.seconds }}</span>
|
|
23
|
+
<span class="countdown__label">{{ props.seconds ?? "Sec" }}</span>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
<div v-else>{{ countdown }}</div>
|
|
27
|
+
</div>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<script setup lang="ts">
|
|
31
|
+
import { ref, onMounted, onUnmounted, watch } from "vue";
|
|
32
|
+
|
|
33
|
+
const props = defineProps<{
|
|
34
|
+
target: string;
|
|
35
|
+
days?: string;
|
|
36
|
+
hours?: string;
|
|
37
|
+
minutes?: string;
|
|
38
|
+
seconds?: string;
|
|
39
|
+
variant?: "light" | "dark";
|
|
40
|
+
}>();
|
|
41
|
+
|
|
42
|
+
const countdown = ref("");
|
|
43
|
+
const countdownParts = ref({
|
|
44
|
+
days: "0",
|
|
45
|
+
hours: "0",
|
|
46
|
+
minutes: "0",
|
|
47
|
+
seconds: "0",
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
function parseStoryblokUTC(dateStr: string): Date {
|
|
51
|
+
return new Date(dateStr.replace(" ", "T") + ":00Z");
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function updateCountdown() {
|
|
55
|
+
const eventDate = parseStoryblokUTC(props.target);
|
|
56
|
+
const now = new Date();
|
|
57
|
+
const diff = eventDate.getTime() - now.getTime();
|
|
58
|
+
|
|
59
|
+
if (diff <= 0) {
|
|
60
|
+
countdown.value = "Event started";
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
|
65
|
+
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
|
|
66
|
+
const minutes = Math.floor((diff / (1000 * 60)) % 60);
|
|
67
|
+
const seconds = Math.floor((diff / 1000) % 60);
|
|
68
|
+
|
|
69
|
+
countdownParts.value = {
|
|
70
|
+
days: days.toString(),
|
|
71
|
+
hours: hours.toString().padStart(2, "0"),
|
|
72
|
+
minutes: minutes.toString().padStart(2, "0"),
|
|
73
|
+
seconds: seconds.toString().padStart(2, "0"),
|
|
74
|
+
};
|
|
75
|
+
countdown.value = `${days}d ${hours}h ${minutes}m ${seconds}s`;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
onMounted(() => {
|
|
79
|
+
updateCountdown();
|
|
80
|
+
const interval = setInterval(updateCountdown, 1000);
|
|
81
|
+
onUnmounted(() => clearInterval(interval));
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
watch(() => props.target, updateCountdown);
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<style scoped lang="scss">
|
|
88
|
+
@use "../../../assets/scss/variables.scss" as *;
|
|
89
|
+
|
|
90
|
+
.countdown {
|
|
91
|
+
font-family: $font-opensans;
|
|
92
|
+
display: flex;
|
|
93
|
+
flex-direction: column;
|
|
94
|
+
|
|
95
|
+
&--dark {
|
|
96
|
+
color: #fff;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&__row {
|
|
100
|
+
display: flex;
|
|
101
|
+
flex-direction: row;
|
|
102
|
+
align-items: flex-end;
|
|
103
|
+
gap: 10px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&__unit {
|
|
107
|
+
display: flex;
|
|
108
|
+
flex-direction: column;
|
|
109
|
+
align-items: center;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&__number {
|
|
113
|
+
font-family: $font-oscine;
|
|
114
|
+
font-size: $font-size-md;
|
|
115
|
+
font-weight: 300;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&__label {
|
|
119
|
+
font-size: $font-size-xsm;
|
|
120
|
+
margin-top: 5px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&__divider {
|
|
124
|
+
width: 0.5px;
|
|
125
|
+
height: 20px;
|
|
126
|
+
background: $grey-200;
|
|
127
|
+
margin: 0 10px;
|
|
128
|
+
align-self: center;
|
|
129
|
+
display: flex;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
</style>
|