@burh/nuxt-core 1.0.181 → 1.0.183
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.
|
@@ -1,86 +1,120 @@
|
|
|
1
1
|
<template lang="">
|
|
2
2
|
<div v-if='isShowing' class="fullpage-loading">
|
|
3
|
+
|
|
3
4
|
<span class="loader-wrapper">
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
<div class="animetedFadeIn">
|
|
6
|
+
<div v-if='!isLoadingShowing' class="loading-product-icon">
|
|
7
|
+
<div :class="'mb-5 loading product-item--avatar bg-' + color">
|
|
6
8
|
<img :src="productImage" alt="" />
|
|
7
|
-
|
|
9
|
+
</div>
|
|
10
|
+
<div class="d-flex justify-content-center align-items-center">
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
<div v-else class=loading-product>
|
|
14
|
+
<div :class="'mb-5 product-item--avatar bg-' + color">
|
|
15
|
+
<div class="spin">
|
|
16
|
+
<i
|
|
17
|
+
:class="'fas fa-2x products-spin fa-circle-notch fa-spin text-'"></i>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
8
20
|
<div class="d-flex justify-content-center align-items-center">
|
|
9
|
-
<i
|
|
10
|
-
:class="
|
|
11
|
-
'fas fa-3x fa-circle-notch fa-spin text-' + color
|
|
12
|
-
"
|
|
13
|
-
></i>
|
|
14
21
|
</div>
|
|
15
22
|
</div>
|
|
23
|
+
</div>
|
|
16
24
|
</span>
|
|
17
25
|
</div>
|
|
18
26
|
</template>
|
|
19
|
-
|
|
20
27
|
<script>
|
|
28
|
+
import { set } from "d3";
|
|
21
29
|
export default {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
},
|
|
29
|
-
productImage: String,
|
|
30
|
-
color: String
|
|
30
|
+
name: "new-loading",
|
|
31
|
+
props: {
|
|
32
|
+
isLoading: {
|
|
33
|
+
type: Boolean,
|
|
34
|
+
default: false,
|
|
35
|
+
description: "If the parent screen is loading",
|
|
31
36
|
},
|
|
37
|
+
productImage: String,
|
|
38
|
+
color: String,
|
|
39
|
+
},
|
|
32
40
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
41
|
+
data() {
|
|
42
|
+
return {
|
|
43
|
+
isShowing: true,
|
|
44
|
+
isLoadingShowing: false,
|
|
45
|
+
};
|
|
46
|
+
},
|
|
38
47
|
|
|
39
|
-
|
|
48
|
+
mounted() {
|
|
49
|
+
const currentPage = window.location.pathname.split("/")[1];
|
|
50
|
+
if (sessionStorage.getItem("lastPage") != currentPage) {
|
|
51
|
+
sessionStorage.setItem("lastPage", currentPage);
|
|
52
|
+
} else {
|
|
53
|
+
this.isShowing = false;
|
|
54
|
+
}
|
|
55
|
+
setTimeout(() => (this.isLoadingShowing = true), 600);
|
|
56
|
+
},
|
|
40
57
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}else{
|
|
45
|
-
this.isShowing = false;
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
// beforeDestroy() {
|
|
49
|
-
// sessionStorage.removeItem('lastPage');
|
|
50
|
-
// },
|
|
58
|
+
// beforeDestroy() {
|
|
59
|
+
// sessionStorage.removeItem('lastPage');
|
|
60
|
+
// },
|
|
51
61
|
};
|
|
52
62
|
</script>
|
|
53
63
|
|
|
64
|
+
|
|
54
65
|
<style lang="scss" scoped>
|
|
55
66
|
// @import "assets/sass/burh-ds/variables/_colors.scss";
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
67
|
+
|
|
68
|
+
@keyframes fadeIn {
|
|
69
|
+
from {
|
|
70
|
+
opacity: 0;
|
|
71
|
+
}
|
|
72
|
+
to {
|
|
73
|
+
opacity: 1;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.fullpage-loading {
|
|
78
|
+
width: 100vw;
|
|
79
|
+
height: 100vh;
|
|
80
|
+
position: fixed;
|
|
81
|
+
top: 0;
|
|
82
|
+
left: 0;
|
|
83
|
+
z-index: 1000;
|
|
63
84
|
}
|
|
64
85
|
.product-item--avatar {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
86
|
+
width: 60px;
|
|
87
|
+
height: 60px;
|
|
88
|
+
border-radius: 14.0834px;
|
|
68
89
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
90
|
+
display: flex;
|
|
91
|
+
align-items: center;
|
|
92
|
+
justify-content: center;
|
|
72
93
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
94
|
+
img {
|
|
95
|
+
color: #fff;
|
|
96
|
+
}
|
|
76
97
|
}
|
|
77
98
|
|
|
78
99
|
.loader-wrapper {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
100
|
+
background-color: #fff;
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
justify-content: center;
|
|
104
|
+
width: 100vw;
|
|
105
|
+
height: 100vh;
|
|
106
|
+
position: relative;
|
|
85
107
|
}
|
|
108
|
+
|
|
109
|
+
.spin {
|
|
110
|
+
color: #fff;
|
|
111
|
+
-webkit-animation: fa-spin 1s infinite linear;
|
|
112
|
+
animation: fa-spin 1s infinite linear;
|
|
113
|
+
line-height: 1;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.animetedFadeIn {
|
|
117
|
+
animation: fadeIn 0.3s;
|
|
118
|
+
}
|
|
119
|
+
|
|
86
120
|
</style>
|