@burh/nuxt-core 1.0.155 → 1.0.157
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,106 +1,111 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<el-dialog
|
|
3
3
|
:visible.sync="isActive"
|
|
4
|
-
width="
|
|
4
|
+
width="54%"
|
|
5
5
|
custom-class="position-relative"
|
|
6
6
|
@close="$emit('close')"
|
|
7
7
|
>
|
|
8
8
|
<template>
|
|
9
|
+
<h2 class="display-4 mt-5 ml-5">Compartilhar</h2>
|
|
9
10
|
<div class="d-flex justify-content-center align-items-center">
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<a
|
|
15
|
-
v-if="
|
|
16
|
-
userData.user_complementary_information.facebook_url
|
|
17
|
-
"
|
|
18
|
-
:href="
|
|
19
|
-
userData.user_complementary_information.facebook_url
|
|
20
|
-
"
|
|
21
|
-
target="_blank"
|
|
22
|
-
rel="noopener noreferrer"
|
|
11
|
+
<ul class="col-12 list-inline mb-4 mt-3 ml-5">
|
|
12
|
+
<li
|
|
13
|
+
class="p list-inline-item ml-2 cursor-pointer"
|
|
14
|
+
@click="$emit('whatsapp-modal')"
|
|
23
15
|
>
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
16
|
+
<base-button
|
|
17
|
+
icon
|
|
18
|
+
type="whatsapp"
|
|
19
|
+
class="btn--rounded mr-2"
|
|
20
|
+
>
|
|
21
|
+
<span class="btn-inner--icon"
|
|
22
|
+
><i class="fab fa-whatsapp"></i
|
|
23
|
+
></span>
|
|
24
|
+
</base-button>
|
|
25
|
+
<span class="btn-inner--text">Whatsapp</span>
|
|
26
|
+
</li>
|
|
31
27
|
<a
|
|
32
|
-
|
|
33
|
-
userData.user_complementary_information.twitter_url
|
|
34
|
-
"
|
|
35
|
-
:href="
|
|
36
|
-
userData.user_complementary_information.twitter_url
|
|
37
|
-
"
|
|
28
|
+
href="http://facebook.com"
|
|
38
29
|
target="_blank"
|
|
39
30
|
rel="noopener noreferrer"
|
|
40
|
-
class="
|
|
31
|
+
class="social social-link"
|
|
41
32
|
>
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
33
|
+
<li class="p list-inline-item ml-2 cursor-pointer">
|
|
34
|
+
<base-button
|
|
35
|
+
icon
|
|
36
|
+
class="btn-facebook btn--rounded mr-2"
|
|
37
|
+
>
|
|
38
|
+
<span class="btn-inner--icon"
|
|
39
|
+
><i class="fab fa-facebook-f"></i
|
|
40
|
+
></span>
|
|
41
|
+
</base-button>
|
|
42
|
+
<span class="btn-inner--text">Facebook</span>
|
|
43
|
+
</li>
|
|
48
44
|
</a>
|
|
49
45
|
<a
|
|
50
|
-
|
|
51
|
-
userData.user_complementary_information.linkedin_url
|
|
52
|
-
"
|
|
53
|
-
:href="
|
|
54
|
-
userData.user_complementary_information.linkedin_url
|
|
55
|
-
"
|
|
46
|
+
href="https://twitter.com/compose/tweet"
|
|
56
47
|
target="_blank"
|
|
57
48
|
rel="noopener noreferrer"
|
|
58
|
-
class="
|
|
49
|
+
class="social social-link"
|
|
59
50
|
>
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
51
|
+
<li class="p list-inline-item ml-2 cursor-pointer">
|
|
52
|
+
<base-button
|
|
53
|
+
icon
|
|
54
|
+
class="btn-twitter btn--rounded mr-2"
|
|
55
|
+
>
|
|
56
|
+
<span class="btn-inner--icon"
|
|
57
|
+
><i class="fab fa-twitter"></i
|
|
58
|
+
></span>
|
|
59
|
+
</base-button>
|
|
60
|
+
<span class="btn-inner--text">Twitter</span>
|
|
61
|
+
</li>
|
|
66
62
|
</a>
|
|
67
63
|
<a
|
|
68
|
-
|
|
69
|
-
:href="
|
|
70
|
-
`https://api.whatsapp.com/send?phone=+55${userData.user_contact.cellphone}`
|
|
71
|
-
"
|
|
64
|
+
href="https://linkedin.com"
|
|
72
65
|
target="_blank"
|
|
73
66
|
rel="noopener noreferrer"
|
|
74
|
-
class="
|
|
67
|
+
class="social social-link"
|
|
75
68
|
>
|
|
76
|
-
<
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
69
|
+
<li class="p list-inline-item ml-2 cursor-pointer">
|
|
70
|
+
<base-button
|
|
71
|
+
icon
|
|
72
|
+
class="btn-linkedin btn--rounded mr-2"
|
|
73
|
+
>
|
|
74
|
+
<span class="btn-inner--icon"
|
|
75
|
+
><i class="fab fa-linkedin-in"></i
|
|
76
|
+
></span>
|
|
77
|
+
</base-button>
|
|
78
|
+
<span class="btn-inner--text">Linkedin</span>
|
|
79
|
+
</li>
|
|
82
80
|
</a>
|
|
83
|
-
</
|
|
81
|
+
</ul>
|
|
84
82
|
</div>
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
83
|
+
|
|
84
|
+
<div class="row">
|
|
85
|
+
<div class="col-8" @click="copyToClipboard">
|
|
86
|
+
<label class="ml-5 social social-label" for="linkShareModal"
|
|
87
|
+
>Link compartilhável</label
|
|
88
|
+
>
|
|
89
|
+
<input
|
|
90
|
+
v-if="userData.slug"
|
|
91
|
+
id="linkShareModal"
|
|
92
|
+
:value="`${baseUrl}/${userData.slug.slug}`"
|
|
93
|
+
type="text"
|
|
94
|
+
class="ml-5 form-control social social-input"
|
|
95
|
+
readonly
|
|
96
|
+
/>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<div class="col-4 pt-1">
|
|
100
|
+
<base-button
|
|
100
101
|
id="btnCopyLinkShare"
|
|
102
|
+
size="sm"
|
|
103
|
+
type="outline-primary"
|
|
104
|
+
class="mt-4"
|
|
105
|
+
@click="copyToClipboard"
|
|
101
106
|
>
|
|
102
107
|
Copiar
|
|
103
|
-
</button>
|
|
108
|
+
</base-button>
|
|
104
109
|
</div>
|
|
105
110
|
</div>
|
|
106
111
|
|
|
@@ -126,10 +131,7 @@ export default {
|
|
|
126
131
|
props: {
|
|
127
132
|
isActive: Boolean,
|
|
128
133
|
userData: Object,
|
|
129
|
-
baseUrl:
|
|
130
|
-
},
|
|
131
|
-
mounted() {
|
|
132
|
-
console.log(this.userData);
|
|
134
|
+
baseUrl: String
|
|
133
135
|
},
|
|
134
136
|
methods: {
|
|
135
137
|
copyToClipboard() {
|
|
@@ -138,11 +140,20 @@ export default {
|
|
|
138
140
|
text.select();
|
|
139
141
|
document.execCommand('copy');
|
|
140
142
|
|
|
141
|
-
if (btnCopy.innerText == 'Copiado') return;
|
|
142
|
-
|
|
143
143
|
btnCopy.innerText = 'Copiado';
|
|
144
144
|
btnCopy.classList.remove('btn-outline-primary');
|
|
145
145
|
btnCopy.classList.add('btn-primary');
|
|
146
|
+
|
|
147
|
+
setTimeout(() => {
|
|
148
|
+
btnCopy.innerText = 'Copiar';
|
|
149
|
+
btnCopy.classList.remove('btn-primary');
|
|
150
|
+
btnCopy.classList.add('btn-outline-primary');
|
|
151
|
+
}, 3000);
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
watch: {
|
|
155
|
+
isActive(newValue) {
|
|
156
|
+
!newValue && this.$emit('close-modal');
|
|
146
157
|
}
|
|
147
158
|
}
|
|
148
159
|
};
|
|
@@ -163,27 +174,29 @@ export default {
|
|
|
163
174
|
overflow: hidden;
|
|
164
175
|
border-radius: 10px;
|
|
165
176
|
padding-bottom: 50px;
|
|
166
|
-
max-width:
|
|
167
|
-
min-width:
|
|
177
|
+
max-width: 725px;
|
|
178
|
+
min-width: 725px;
|
|
168
179
|
}
|
|
169
180
|
|
|
170
181
|
.social {
|
|
171
|
-
&-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
&-group {
|
|
176
|
-
margin-top: 3rem;
|
|
182
|
+
&-label {
|
|
183
|
+
color: #8898aa;
|
|
184
|
+
text-transform: uppercase;
|
|
177
185
|
}
|
|
178
186
|
|
|
179
187
|
&-input {
|
|
180
|
-
width:
|
|
188
|
+
width: 400px;
|
|
181
189
|
border: none;
|
|
182
190
|
border-radius: 5px;
|
|
183
191
|
background: #e9ecef;
|
|
184
192
|
color: #32325d;
|
|
185
193
|
padding-left: 15px;
|
|
186
194
|
outline: 0;
|
|
195
|
+
cursor: pointer;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
&-link {
|
|
199
|
+
color: #606266;
|
|
187
200
|
}
|
|
188
201
|
}
|
|
189
202
|
|
|
@@ -212,4 +225,24 @@ export default {
|
|
|
212
225
|
color: #fff;
|
|
213
226
|
}
|
|
214
227
|
}
|
|
228
|
+
|
|
229
|
+
.btn-whatsapp:hover {
|
|
230
|
+
color: white;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.btn-email {
|
|
234
|
+
color: white;
|
|
235
|
+
background-color: $primary !important;
|
|
236
|
+
border-color: $primary !important;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.btn--rounded {
|
|
240
|
+
font-size: 1.5rem;
|
|
241
|
+
margin: 0;
|
|
242
|
+
padding: 0;
|
|
243
|
+
line-height: 0;
|
|
244
|
+
min-width: 0;
|
|
245
|
+
width: 3rem;
|
|
246
|
+
height: 3rem;
|
|
247
|
+
}
|
|
215
248
|
</style>
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<el-dialog
|
|
3
|
+
:visible.sync="isActive"
|
|
4
|
+
width="54%"
|
|
5
|
+
custom-class="position-relative"
|
|
6
|
+
@close="$emit('close')"
|
|
7
|
+
>
|
|
8
|
+
<template>
|
|
9
|
+
<div class="row mt-5">
|
|
10
|
+
<!-- <base-input class="col-12" label="Email" type="text" /> -->
|
|
11
|
+
<div class="col-12 px-3 mb-4">
|
|
12
|
+
<p class="lead mt-0 ml-5">
|
|
13
|
+
Insira aqui o número do telefone.
|
|
14
|
+
</p>
|
|
15
|
+
<base-input
|
|
16
|
+
class="mb-1 ml-5 mr-5"
|
|
17
|
+
v-model="phoneNumber"
|
|
18
|
+
placeholder="Ex: (15) 3342-6237"
|
|
19
|
+
type="text"
|
|
20
|
+
name="NumberCellphone"
|
|
21
|
+
>
|
|
22
|
+
</base-input>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<div class="col-12 d-flex">
|
|
26
|
+
<base-button
|
|
27
|
+
size="md"
|
|
28
|
+
outline
|
|
29
|
+
type="primary"
|
|
30
|
+
role="button"
|
|
31
|
+
class="ml-5"
|
|
32
|
+
@click="$emit('close-modal')"
|
|
33
|
+
>voltar
|
|
34
|
+
</base-button>
|
|
35
|
+
<base-button
|
|
36
|
+
size="md"
|
|
37
|
+
type="primary"
|
|
38
|
+
role="button"
|
|
39
|
+
@click="sendMessage()"
|
|
40
|
+
class="ml-auto mr-5"
|
|
41
|
+
>Enviar
|
|
42
|
+
</base-button>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<span class="tool tool-close" @click="$emit('close-modal')">
|
|
47
|
+
Fechar
|
|
48
|
+
<font-awesome-icon
|
|
49
|
+
:icon="['fas', 'times']"
|
|
50
|
+
class="text-white ml-1"
|
|
51
|
+
/>
|
|
52
|
+
</span>
|
|
53
|
+
</template>
|
|
54
|
+
</el-dialog>
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<script>
|
|
58
|
+
import { Dialog } from 'element-ui';
|
|
59
|
+
|
|
60
|
+
export default {
|
|
61
|
+
name: 'whatsapp-modal',
|
|
62
|
+
components: {
|
|
63
|
+
[Dialog.name]: Dialog
|
|
64
|
+
},
|
|
65
|
+
data() {
|
|
66
|
+
return {
|
|
67
|
+
phoneNumber: ''
|
|
68
|
+
};
|
|
69
|
+
},
|
|
70
|
+
props: {
|
|
71
|
+
isActive: Boolean,
|
|
72
|
+
userData: Object,
|
|
73
|
+
baseUrl: String
|
|
74
|
+
},
|
|
75
|
+
methods: {
|
|
76
|
+
sendMessage() {
|
|
77
|
+
let phoneNumber = this.phoneNumber
|
|
78
|
+
.replace('(', '')
|
|
79
|
+
.replace(')', '')
|
|
80
|
+
.replace(' ', '')
|
|
81
|
+
.replace('-', '');
|
|
82
|
+
window.open(
|
|
83
|
+
'https://api.whatsapp.com/send?phone=' +
|
|
84
|
+
'+55' +
|
|
85
|
+
phoneNumber +
|
|
86
|
+
'&text=' +
|
|
87
|
+
`${this.baseUrl}/${this.userData.slug.slug}`
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
watch: {
|
|
92
|
+
isActive(newValue) {
|
|
93
|
+
!newValue && this.$emit('close-modal');
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
</script>
|
|
98
|
+
|
|
99
|
+
<style lang="scss" scoped>
|
|
100
|
+
@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
|
|
101
|
+
|
|
102
|
+
/deep/ .el-dialog__body {
|
|
103
|
+
padding: 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/deep/ .el-dialog__header {
|
|
107
|
+
display: none;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/deep/ .el-dialog {
|
|
111
|
+
overflow: hidden;
|
|
112
|
+
border-radius: 10px;
|
|
113
|
+
padding-bottom: 50px;
|
|
114
|
+
max-width: 725px;
|
|
115
|
+
min-width: 725px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.tool {
|
|
119
|
+
position: absolute;
|
|
120
|
+
top: 1rem;
|
|
121
|
+
z-index: 10;
|
|
122
|
+
color: $primary;
|
|
123
|
+
cursor: pointer;
|
|
124
|
+
|
|
125
|
+
&-close {
|
|
126
|
+
position: absolute;
|
|
127
|
+
width: 88px;
|
|
128
|
+
height: 27px;
|
|
129
|
+
right: 7px;
|
|
130
|
+
top: 7px;
|
|
131
|
+
display: flex;
|
|
132
|
+
justify-content: center;
|
|
133
|
+
align-items: center;
|
|
134
|
+
|
|
135
|
+
font-size: 11px;
|
|
136
|
+
|
|
137
|
+
font-weight: 500;
|
|
138
|
+
background: rgba(0, 0, 0, 0.2);
|
|
139
|
+
border-radius: 17.5px;
|
|
140
|
+
color: #fff;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
</style>
|