added indices marquee component
Davide Di Modica committed
Aug 16, 2023 at 22:10 UTC
e47c24967a5c801c46cac499256eaf59e36b92cc
1 file changed
+79
src/components/indices/Marquee.vue
new
+79
@@ -0,0 +1,79 @@
1
+<template>
2
+ <div class="indices-marquee" v-loading="loading">
3
+ <Vue3Marquee
4
+ class="marquee-wrap"
5
+ :duration="200"
6
+ :pauseOnHover="true"
7
+ :clone="true"
8
+ :gradient="true"
9
+ :gradient-color="[255, 255, 255]"
10
+ gradient-length="10%"
11
+ >
12
+ <span v-for="item in indices" :key="item.index" class="item" :class="item.health" @click="emit('click', item)">
13
+ <i v-if="item.health === IndexHealth.GREEN" class="mdi mdi-shield-check"></i>
14
+ <i v-else-if="item.health === IndexHealth.YELLOW" class="mdi mdi-alert"></i>
15
+ <i v-else-if="item.health === IndexHealth.RED" class="mdi mdi-alert-decagram"></i>
16
+ {{ item.index }}
17
+ </span>
18
+ </Vue3Marquee>
19
+ </div>
20
+</template>
21
+
22
+<script setup lang="ts">
23
+import { computed, toRefs } from "vue"
24
+import { Index, IndexHealth } from "@/types/indices.d"
25
+import { Vue3Marquee } from "vue3-marquee"
26
+
27
+const emit = defineEmits<{
28
+ (e: "click", value: Index): void
29
+}>()
30
+
31
+const props = defineProps<{
32
+ indices: Index[]
33
+}>()
34
+const { indices } = toRefs(props)
35
+
36
+const loading = computed(() => !indices?.value || indices.value.length === 0)
37
+</script>
38
+
39
+<style lang="scss" scoped>
40
+@import "@/assets/scss/_variables";
41
+
42
+.indices-marquee {
43
+ height: 45px;
44
+ .marquee-wrap {
45
+ transform: translate3d(0, 0, 0);
46
+
47
+ :deep() {
48
+ .marquee {
49
+ transform: translate3d(0, 0, 0);
50
+ }
51
+ .overlay {
52
+ &:after {
53
+ right: -1px;
54
+ }
55
+ }
56
+ }
57
+
58
+ .item {
59
+ padding: 10px 20px;
60
+
61
+ &.green {
62
+ i {
63
+ color: $text-color-success;
64
+ }
65
+ }
66
+ &.yellow {
67
+ i {
68
+ color: $text-color-warning;
69
+ }
70
+ }
71
+ &.red {
72
+ i {
73
+ color: $text-color-danger;
74
+ }
75
+ }
76
+ }
77
+ }
78
+}
79
+</style>