@burh/nuxt-core 1.0.406 → 1.0.408

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