contactstudiocstools 1.0.261 → 1.0.263
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/module.json
CHANGED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<section
|
|
3
|
+
v-if="!finishSteps"
|
|
4
|
+
class="notification w-full h-screen absolute flex justify-center pt-10 z-30"
|
|
5
|
+
>
|
|
6
|
+
<template v-if="!isAuthorizedNotification">
|
|
7
|
+
<!-- Card para solicitar permissão -->
|
|
8
|
+
<article v-if="permissionStatus === 'default'" class="card w-96">
|
|
9
|
+
<header>
|
|
10
|
+
<h1 class="text-base mb-2 font-bold">
|
|
11
|
+
🔔 Por favor, ative as notificações!
|
|
12
|
+
</h1>
|
|
13
|
+
<p>
|
|
14
|
+
{{ activeMessage }}
|
|
15
|
+
</p>
|
|
16
|
+
</header>
|
|
17
|
+
|
|
18
|
+
<footer class="flex justify-end mt-4 gap-2">
|
|
19
|
+
<button
|
|
20
|
+
@click="isAuthorizedNotification = true"
|
|
21
|
+
class="btn btn-soft-secondary"
|
|
22
|
+
>
|
|
23
|
+
Pular
|
|
24
|
+
</button>
|
|
25
|
+
<button @click="request" class="btn btn-solid-warn">Habilitar</button>
|
|
26
|
+
</footer>
|
|
27
|
+
</article>
|
|
28
|
+
|
|
29
|
+
<!-- Card para quando a permissão foi negada -->
|
|
30
|
+
<article v-if="permissionStatus === 'denied'" class="card w-96">
|
|
31
|
+
<header>
|
|
32
|
+
<h1 class="text-base mb-2 font-bold">🔔 Notificações bloqueadas</h1>
|
|
33
|
+
<p>
|
|
34
|
+
Você bloqueou as notificações. Para reativá-las, siga os passos
|
|
35
|
+
nas configurações do seu navegador:
|
|
36
|
+
</p>
|
|
37
|
+
<ul class="mt-4">
|
|
38
|
+
<li>
|
|
39
|
+
<b>1.</b> Clique no ícone
|
|
40
|
+
<i class="bi-lock badge badge-soft-secondary"></i> à esquerda da
|
|
41
|
+
barra de endereço.
|
|
42
|
+
</li>
|
|
43
|
+
<li><b>2.</b> Encontre a opção <b>Notificações</b> e mude para <b>Permitir</b>.</li>
|
|
44
|
+
<li><b>3.</b> Recarregue a página para aplicar a alteração.</li>
|
|
45
|
+
</ul>
|
|
46
|
+
</header>
|
|
47
|
+
<footer class="flex justify-end mt-4 gap-2">
|
|
48
|
+
<button
|
|
49
|
+
@click="isAuthorizedNotification = true"
|
|
50
|
+
class="btn btn-soft-secondary w-full"
|
|
51
|
+
>
|
|
52
|
+
Pular
|
|
53
|
+
</button>
|
|
54
|
+
</footer>
|
|
55
|
+
</article>
|
|
56
|
+
</template>
|
|
57
|
+
|
|
58
|
+
<article
|
|
59
|
+
v-if="!isAuthorizedSong && isAuthorizedNotification"
|
|
60
|
+
class="card w-96"
|
|
61
|
+
>
|
|
62
|
+
<header>
|
|
63
|
+
<h1 class="text-base mb-2 font-bold">🔈 Ative o som!</h1>
|
|
64
|
+
<p>Para receber alertas sonoros, habilite em:</p>
|
|
65
|
+
<ul class="mt-4">
|
|
66
|
+
<li>
|
|
67
|
+
<b>1.</b> Clique no icone
|
|
68
|
+
<i class="bi-lock badge badge-soft-secondary"></i> à esquerda da
|
|
69
|
+
barra de endereço
|
|
70
|
+
</li>
|
|
71
|
+
<li><b>2.</b> Clique na opção <b>Permissões do Site</b></li>
|
|
72
|
+
<li>
|
|
73
|
+
<b>3.</b> Encontre a opção <b>Som</b> e selecione <b>Permitir</b>
|
|
74
|
+
</li>
|
|
75
|
+
</ul>
|
|
76
|
+
</header>
|
|
77
|
+
|
|
78
|
+
<footer class="flex justify-end mt-4 gap-2">
|
|
79
|
+
<button @click="isAuthorizedSong = true" class="btn btn-solid-warn">
|
|
80
|
+
Próximo
|
|
81
|
+
</button>
|
|
82
|
+
</footer>
|
|
83
|
+
</article>
|
|
84
|
+
|
|
85
|
+
<article
|
|
86
|
+
v-if="isAuthorizedSong && isAuthorizedNotification"
|
|
87
|
+
class="card w-96"
|
|
88
|
+
>
|
|
89
|
+
<header>
|
|
90
|
+
<h1 class="text-base mb-2 font-bold">🌐 Navegadores homologados</h1>
|
|
91
|
+
<p>
|
|
92
|
+
Para melhor funcionamento do sistema, recomendamos que utilize os
|
|
93
|
+
navegadores:
|
|
94
|
+
</p>
|
|
95
|
+
<ul class="mt-4 flex gap-4">
|
|
96
|
+
<li class="flex flex-1 items-center">
|
|
97
|
+
<img
|
|
98
|
+
src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png"
|
|
99
|
+
class="w-5 mr-2"
|
|
100
|
+
/>
|
|
101
|
+
<b>Google Chrome</b>
|
|
102
|
+
</li>
|
|
103
|
+
<li class="flex items-center flex-1">
|
|
104
|
+
<img
|
|
105
|
+
src="https://res.cloudinary.com/imagist/image/fetch/f_auto/q_auto/c_scale,w_2624/https://images.ctfassets.net/dm4oa8qtogq0/4XwXnOrCWYL0qGXMTARBLl/b9367b5dcb2be3381fef45b4378dc6de/Microsoft_Edge_-282019-29.png?_a=BATCtdcY0"
|
|
106
|
+
class="w-5 mr-2"
|
|
107
|
+
/>
|
|
108
|
+
<b>Microsoft Edge</b>
|
|
109
|
+
</li>
|
|
110
|
+
</ul>
|
|
111
|
+
</header>
|
|
112
|
+
|
|
113
|
+
<footer class="flex justify-end mt-4 gap-2">
|
|
114
|
+
<button @click="finish" class="btn btn-solid-warn">
|
|
115
|
+
Fechar
|
|
116
|
+
</button>
|
|
117
|
+
</footer>
|
|
118
|
+
</article>
|
|
119
|
+
</section>
|
|
120
|
+
</template>
|
|
121
|
+
|
|
122
|
+
<script setup lang="ts">
|
|
123
|
+
import { ref, onMounted } from "vue";
|
|
124
|
+
import { useNuxtApp } from "#app";
|
|
125
|
+
|
|
126
|
+
const { $emit } = useNuxtApp();
|
|
127
|
+
|
|
128
|
+
// props
|
|
129
|
+
interface IProps {
|
|
130
|
+
activeMessage: string;
|
|
131
|
+
}
|
|
132
|
+
defineProps<IProps>();
|
|
133
|
+
|
|
134
|
+
// data
|
|
135
|
+
const permissionStatus = ref<NotificationPermission>("default");
|
|
136
|
+
const isAuthorizedNotification = ref<boolean>(false);
|
|
137
|
+
const isAuthorizedSong = ref<boolean>(false);
|
|
138
|
+
const finishSteps = ref<boolean>(!!sessionStorage.getItem("cspermissions"));
|
|
139
|
+
|
|
140
|
+
// methods
|
|
141
|
+
async function request() {
|
|
142
|
+
const permission = await Notification.requestPermission();
|
|
143
|
+
permissionStatus.value = permission;
|
|
144
|
+
|
|
145
|
+
isAuthorizedNotification.value = permission === "granted";
|
|
146
|
+
|
|
147
|
+
if (isAuthorizedNotification.value) $emit("notification:authorized");
|
|
148
|
+
}
|
|
149
|
+
function finish(){
|
|
150
|
+
finishSteps.value = true
|
|
151
|
+
sessionStorage.setItem("cspermissions", "true")
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
// hooks
|
|
155
|
+
onMounted(() => {
|
|
156
|
+
permissionStatus.value = Notification.permission;
|
|
157
|
+
isAuthorizedNotification.value = permissionStatus.value === "granted";
|
|
158
|
+
});
|
|
159
|
+
</script>
|
|
160
|
+
|
|
161
|
+
<style scoped>
|
|
162
|
+
.notification {
|
|
163
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
164
|
+
}
|
|
165
|
+
</style>
|
|
@@ -14,8 +14,18 @@ const props = defineProps<{
|
|
|
14
14
|
userId?: string
|
|
15
15
|
}>();
|
|
16
16
|
|
|
17
|
+
// listen
|
|
18
|
+
const { $emit, $listen }: any = useNuxtApp();
|
|
19
|
+
$listen("snapshot:reload", () => {
|
|
20
|
+
initSnapshot();
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
// hooks
|
|
24
|
+
onMounted(() => {
|
|
25
|
+
initSnapshot();
|
|
26
|
+
});
|
|
27
|
+
|
|
17
28
|
// data
|
|
18
|
-
const { $emit } = useNuxtApp();
|
|
19
29
|
const { BASE_URL } = useRuntimeConfig().public;
|
|
20
30
|
|
|
21
31
|
// methods
|
|
@@ -40,9 +50,6 @@ function initSnapshot(): void {
|
|
|
40
50
|
};
|
|
41
51
|
}
|
|
42
52
|
|
|
43
|
-
onMounted(() => {
|
|
44
|
-
initSnapshot();
|
|
45
|
-
});
|
|
46
53
|
</script>
|
|
47
54
|
|
|
48
55
|
<style scoped></style>
|