contactstudiocstools 1.0.233 → 1.0.235
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 +1 -1
- package/dist/runtime/components/Atom.ChatContact.vue +26 -1
- package/dist/runtime/components/Atom.ExpertiseBar.vue +43 -0
- package/dist/runtime/components/Molecule.Modal.vue +59 -0
- package/dist/runtime/components/Organism.ChatRoom.vue +35 -26
- package/dist/runtime/components/Organism.FAQ.vue +23 -1
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
|
+
<AtomExpertiseBar
|
|
3
|
+
:expertise="expertise"
|
|
4
|
+
:removeBorder="true"
|
|
5
|
+
/>
|
|
2
6
|
<!-- contact -->
|
|
3
7
|
<li class="item flex items-center max-h-none !px-3 !rounded-none">
|
|
4
8
|
<!-- avatar -->
|
|
@@ -99,6 +103,9 @@ const getStatusClass = computed<string>(() => {
|
|
|
99
103
|
if (props.contact.on) return "avatar-status-success";
|
|
100
104
|
return "avatar-status-error";
|
|
101
105
|
});
|
|
106
|
+
const expertise = computed<string>(() => {
|
|
107
|
+
return props.contact?.primitive?.expertise || ''
|
|
108
|
+
})
|
|
102
109
|
|
|
103
110
|
// data
|
|
104
111
|
const expirated = ref<boolean>(false);
|
|
@@ -125,7 +132,7 @@ async function setTimerContact(): Promise<void> {
|
|
|
125
132
|
setTimerContact()
|
|
126
133
|
</script>
|
|
127
134
|
|
|
128
|
-
<style
|
|
135
|
+
<style>
|
|
129
136
|
.min-w-40px {
|
|
130
137
|
min-width: 40px;
|
|
131
138
|
}
|
|
@@ -133,4 +140,22 @@ setTimerContact()
|
|
|
133
140
|
.text-2xs {
|
|
134
141
|
font-size: 0.7rem;
|
|
135
142
|
}
|
|
143
|
+
|
|
144
|
+
:root {
|
|
145
|
+
--badge-background-color: #fff;
|
|
146
|
+
--badge-text-color: #9333EA;
|
|
147
|
+
--badge-border-color: #e2e8f0;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.badge-expertise {
|
|
151
|
+
background-color: var(--badge-background-color);
|
|
152
|
+
color: var(--badge-text-color);
|
|
153
|
+
border: 1px solid var(--badge-border-color);
|
|
154
|
+
font-weight: 500;
|
|
155
|
+
}
|
|
156
|
+
.dark .badge-expertise {
|
|
157
|
+
background-color: #1e293b!important;
|
|
158
|
+
border: 1px solid #334155!important;
|
|
159
|
+
color: #A855F7;
|
|
160
|
+
}
|
|
136
161
|
</style>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
{{ removeBorder }}
|
|
3
|
+
<div
|
|
4
|
+
v-if="expertise"
|
|
5
|
+
class="border rounded-full expertise"
|
|
6
|
+
:class="{
|
|
7
|
+
' !rounded-none': removeBorder
|
|
8
|
+
}"
|
|
9
|
+
tooltip="Expertise"
|
|
10
|
+
>
|
|
11
|
+
<i class="bi-info-circle mr-2" />
|
|
12
|
+
<span class="text-xs">
|
|
13
|
+
{{ expertise.replace(/_/g, " ") }}
|
|
14
|
+
</span>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script setup lang="ts">
|
|
19
|
+
defineProps<{
|
|
20
|
+
expertise: string,
|
|
21
|
+
removeBorder?: {
|
|
22
|
+
default: false,
|
|
23
|
+
type: Boolean
|
|
24
|
+
}
|
|
25
|
+
}>()
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<style scoped>
|
|
29
|
+
.expertise {
|
|
30
|
+
background-color: hsl(219, 70%, 90%);
|
|
31
|
+
color:#001194 !important;
|
|
32
|
+
font-weight: 500;
|
|
33
|
+
padding: 5px 10px;
|
|
34
|
+
}
|
|
35
|
+
.dark .expertise {
|
|
36
|
+
background-color: #1d2448 !important;
|
|
37
|
+
color: hsl(233, 100%, 63%) !important;
|
|
38
|
+
border-color: #334155 !important;
|
|
39
|
+
}
|
|
40
|
+
.expertise i {
|
|
41
|
+
-webkit-text-stroke: 0.5px;
|
|
42
|
+
}
|
|
43
|
+
</style>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<!-- DIV PARA BORRAR A TELA -->
|
|
4
|
+
<div @click="$emit('close')" v-show="open" class="fixed top-0 left-0 w-full h-full bg-gray-500 opacity-75 z-[50]"></div>
|
|
5
|
+
|
|
6
|
+
<!-- DIV DO MODAL -->
|
|
7
|
+
<div
|
|
8
|
+
v-show="open"
|
|
9
|
+
class="fixed z-50 border rounded-md bg-gray-100 dark:border-slate-800 dark:bg-slate-900 dark:text-white px-4 pt-12 pb-4 sm:px-6 lg:px-8"
|
|
10
|
+
:class="
|
|
11
|
+
modalStyle,
|
|
12
|
+
{
|
|
13
|
+
'top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition': !alignRight,
|
|
14
|
+
'transition top-1/4 right-[-5px] rig h-[60vh]': alignRight
|
|
15
|
+
}"
|
|
16
|
+
aria-modal="true"
|
|
17
|
+
role="dialog"
|
|
18
|
+
tabindex="-1"
|
|
19
|
+
>
|
|
20
|
+
<button
|
|
21
|
+
@click="$emit('close')"
|
|
22
|
+
class="absolute transition end-4 top-4 hover:scale-110"
|
|
23
|
+
>
|
|
24
|
+
<svg
|
|
25
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
26
|
+
fill="none"
|
|
27
|
+
viewBox="0 0 24 24"
|
|
28
|
+
stroke-width="2"
|
|
29
|
+
stroke="currentColor"
|
|
30
|
+
class="h-5 w-5"
|
|
31
|
+
>
|
|
32
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
33
|
+
</svg>
|
|
34
|
+
</button>
|
|
35
|
+
|
|
36
|
+
<!-- TITULO DO MODAL -->
|
|
37
|
+
<div v-if="title" class="relative flex items-center justify-center mb-8">
|
|
38
|
+
<h3 class="absolute text-lg font-bold " >
|
|
39
|
+
{{ title }}
|
|
40
|
+
</h3>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<!-- CONTEUDO DO MODAL -->
|
|
44
|
+
<slot />
|
|
45
|
+
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
|
|
49
|
+
</template>
|
|
50
|
+
<script setup lang="ts">
|
|
51
|
+
defineProps({
|
|
52
|
+
open: Boolean,
|
|
53
|
+
title: String,
|
|
54
|
+
modalStyle: String,
|
|
55
|
+
alignRight: Boolean
|
|
56
|
+
})
|
|
57
|
+
|
|
58
|
+
defineEmits(['close'])
|
|
59
|
+
</script>
|
|
@@ -5,35 +5,44 @@
|
|
|
5
5
|
class="w-full flex flex-col max-h-screen"
|
|
6
6
|
>
|
|
7
7
|
<!-- header -->
|
|
8
|
-
<header class="flex items-center h-12 px-5">
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<img
|
|
15
|
-
v-if="contact.avatar"
|
|
16
|
-
:src="contact.avatar"
|
|
17
|
-
class="rounded-md"
|
|
8
|
+
<header class="flex justify-between w-full items-center h-12 px-5">
|
|
9
|
+
<div class="flex">
|
|
10
|
+
<!-- avatar -->
|
|
11
|
+
<figure
|
|
12
|
+
:class="[getStatusClass]"
|
|
13
|
+
class="w-10 h-10 avatar avatar-soft-secondary"
|
|
18
14
|
>
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
15
|
+
<img
|
|
16
|
+
v-if="contact.avatar"
|
|
17
|
+
:src="contact.avatar"
|
|
18
|
+
class="rounded-md"
|
|
19
|
+
>
|
|
20
|
+
<i
|
|
21
|
+
v-else
|
|
22
|
+
class="bi-person-fill text-xl"
|
|
23
|
+
/>
|
|
24
|
+
</figure>
|
|
25
|
+
|
|
26
|
+
<!-- info -->
|
|
27
|
+
<div class="ml-3">
|
|
28
|
+
<p
|
|
29
|
+
class="text-sm"
|
|
30
|
+
v-text="contact?.label"
|
|
31
|
+
/>
|
|
32
|
+
<p
|
|
33
|
+
v-if="contact.typing"
|
|
34
|
+
class="text-success text-xs"
|
|
35
|
+
>
|
|
36
|
+
Digitando...
|
|
37
|
+
</p>
|
|
38
|
+
</div>
|
|
24
39
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
40
|
+
</div>
|
|
41
|
+
<!-- expertise -->
|
|
42
|
+
<div class="ml-auto">
|
|
43
|
+
<AtomExpertiseBar
|
|
44
|
+
:expertise="'teste'"
|
|
30
45
|
/>
|
|
31
|
-
<p
|
|
32
|
-
v-if="contact.typing"
|
|
33
|
-
class="text-success text-xs"
|
|
34
|
-
>
|
|
35
|
-
Digitando...
|
|
36
|
-
</p>
|
|
37
46
|
</div>
|
|
38
47
|
</header>
|
|
39
48
|
|
|
@@ -10,6 +10,13 @@
|
|
|
10
10
|
>
|
|
11
11
|
<i class="bi-search addon w-10" />
|
|
12
12
|
</label>
|
|
13
|
+
|
|
14
|
+
<div class="markdown">
|
|
15
|
+
<div class="flex justify-between" v-for="({ answer, question, primitive }, i) in getDoubtsBySearch">
|
|
16
|
+
<div v-html="question" />
|
|
17
|
+
<i @click="modalOpen({ answer, question, primitive })" class="bi bi-eye-fill text-slate-500 px-1 text-base leading-3 cursor-pointer" />
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
13
20
|
<!-- accordion -->
|
|
14
21
|
<div class="accordion markdown">
|
|
15
22
|
<details
|
|
@@ -33,6 +40,18 @@
|
|
|
33
40
|
</details>
|
|
34
41
|
</div>
|
|
35
42
|
</aside>
|
|
43
|
+
<!-- <MoleculeModal
|
|
44
|
+
:open="openModal"
|
|
45
|
+
@close="openModal = false"
|
|
46
|
+
:modalStyle="
|
|
47
|
+
`w-screen max-h-[95vh] max-w-xl z-50 !px-5 !pt-10 overflow-auto`
|
|
48
|
+
"
|
|
49
|
+
title="Novo Produto"
|
|
50
|
+
>
|
|
51
|
+
<div>
|
|
52
|
+
etesdawd
|
|
53
|
+
</div>
|
|
54
|
+
</MoleculeModal> -->
|
|
36
55
|
</template>
|
|
37
56
|
|
|
38
57
|
<script setup lang="ts">
|
|
@@ -40,6 +59,7 @@ import { marked } from "marked";
|
|
|
40
59
|
import { ref, onMounted, computed } from "vue";
|
|
41
60
|
import { IDoubts } from "./types";
|
|
42
61
|
import { useNuxtApp } from "#app";
|
|
62
|
+
import MoleculeModal from "./Molecule.Modal.vue";
|
|
43
63
|
|
|
44
64
|
// props
|
|
45
65
|
interface IProps {
|
|
@@ -78,7 +98,9 @@ function init(): void {
|
|
|
78
98
|
async function copy(answer: string): Promise<void> {
|
|
79
99
|
$emit("faq:copy", answer);
|
|
80
100
|
}
|
|
81
|
-
|
|
101
|
+
function modalOpen({ answer, question, primitive }: IDoubts[number]): void {
|
|
102
|
+
$emit("faq:open", { answer, question, primitive });
|
|
103
|
+
}
|
|
82
104
|
// mounted
|
|
83
105
|
onMounted(() => {
|
|
84
106
|
init();
|