@burh/nuxt-core 1.0.351 → 1.0.353

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.
Files changed (5) hide show
  1. package/components/burh-ds/Headings/AppHeader.vue +222 -214
  2. package/components/burh-ds/Modals/SharedModal.vue +2 -11
  3. package/components/burh-ds/Modals/UniversalShareModal.vue +250 -0
  4. package/components/layouts/burh-ds/navbar/AppNavbar.vue +7 -1
  5. package/package.json +1 -1
package/components/burh-ds/Headings/AppHeader.vue CHANGED
@@ -1,214 +1,222 @@
1
- <template>
2
- <base-header class="app-header" :type="'white'">
3
- <div class="row justify-content-between">
4
- <div
5
- :class="{ 'images__container': users.length }"
6
- class="col-8 my-auto header__container"
7
- >
8
- <slot name="header-top" />
9
-
10
- <div class="header__content">
11
- <div class="d-flex align-items-center flex-row">
12
- <button class="back__button" v-if="hasBackButton" @click="backToMainPage()">
13
- <i class="fas fa-arrow-left"></i>
14
- </button>
15
- <h2 class="font-weight-bold display-3">{{name}}</h2>
16
- </div>
17
- <div class="images" v-if="users.length">
18
- <el-tooltip
19
- v-for="user in users"
20
- :key="user.id"
21
- placement="top"
22
- :content="user.name"
23
- class="user__avatar"
24
- :class="{ 'user__avatar--active': activeUserId === user.id }"
25
- >
26
- <img
27
- @click="setActiveUser(user.id)"
28
- :src="(user.avatar) ? user.avatar : getNameInitials(user.name, user.last_name)"
29
- :alt="user.name"
30
- >
31
- </el-tooltip>
32
- </div>
33
- </div>
34
-
35
- <span id="credits-amount" v-if="subheader !== null">
36
- {{ subheader }} Créditos
37
- </span>
38
-
39
- <slot name="header-bottom" />
40
- </div>
41
-
42
- <div class="col-4 d-flex justify-content-end align-items-start">
43
- <el-tooltip v-for="(item, index) in icons" :key="index"
44
- v-show="!item.disabled"
45
- class="item" effect="dark" :content="item.title" placement="top">
46
- <base-button size="md" type="link" class="text-primary px-2 w-auto"
47
- @click="$emit(item.event, item)">
48
- <font-awesome-icon :icon="item.icon" class="mr-2" />
49
- </base-button>
50
- </el-tooltip>
51
-
52
- <slot name="buttons" />
53
- </div>
54
-
55
- <slot/>
56
- </div>
57
- </base-header>
58
- </template>
59
- <script>
60
- export default {
61
- data(){
62
- return{
63
- default: '',
64
- activeUserId: null
65
- };
66
- },
67
- props:{
68
- icons:{
69
- type: Array,
70
- default: () =>[{ event: 'view', icon: ['fas', 'eye'], disabled: false, title: 'Visualizar' }, { event: 'config', icon: ['fas', 'cog'], disabled: false, title: 'Editar' } ]
71
- },
72
- name: {
73
- type: String,
74
- default: 'Teste de matematica'
75
- },
76
- subheader: {
77
- type: Number,
78
- default: null
79
- },
80
- users: {
81
- type: Array,
82
- default: () => []
83
- },
84
- hasBackButton: {
85
- type: Boolean,
86
- default: false
87
- }
88
- },
89
- methods: {
90
- backToMainPage() {
91
- return this.$router.push('/recrutamento');
92
- },
93
- getNameInitials(name, last_name) {
94
- const avatarUrl = process.env.routes.avatar;
95
-
96
- let userAvatarName;
97
-
98
- if (name && last_name) {
99
- userAvatarName = `${name.toUpperCase().charAt(0)}${last_name.toUpperCase().charAt(0)}`;
100
- } else if (name && last_name === null) {
101
- userAvatarName = name;
102
- } else {
103
- userAvatarName = 'BURH';
104
- }
105
-
106
- return avatarUrl.replace(':size', '64x64').replace(':initials', userAvatarName);
107
- },
108
- setActiveUser(userId) {
109
- if (this.activeUserId !== userId) {
110
- this.activeUserId = userId;
111
- this.$emit('active-user', userId);
112
- } else {
113
- this.activeUserId = null;
114
- this.$emit('active-user', null);
115
- }
116
- }
117
- }
118
- };
119
- </script>
120
- <style lang="scss" scoped>
121
- #credits-amount {
122
- margin: 0!important;
123
- min-width: 8em;
124
- margin: 1rem 1rem 1rem 0;
125
- padding: 0.25em 1em;
126
- font-size: 0.85rem;
127
- line-height: 1.4em;
128
- border-radius: 23rem;
129
- font-weight: 400;
130
- text-align: center;
131
- background-color: rgba(29, 161, 241, 0.1);
132
- color: #5865F2;
133
- }
134
- </style>
135
- <style lang="scss">
136
-
137
- .app-header {
138
- width: 100%;
139
- padding-top: 1.25rem;
140
- box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
141
- }
142
-
143
- .back__button {
144
- cursor: pointer;
145
- width: 42px;
146
- height: 42px;
147
- display: flex;
148
- align-items: center;
149
- justify-content: center;
150
- margin-right: 10px;
151
- border-radius: 100px;
152
- transition: background 0.5s;
153
- margin-left: -15px;
154
- border: 0;
155
- background: transparent;
156
- color: #32325d;
157
- &:focus {
158
- outline: none;
159
- }
160
- &:not(:disabled):hover, &:focus:not(:disabled):hover {
161
- background: rgba(0, 0, 0, 0.08);
162
- }
163
- }
164
-
165
- .header__container {
166
- display: flex;
167
- flex-direction: column;
168
- justify-content: center;
169
- align-items: flex-start;
170
- }
171
-
172
- .images__container {
173
- display: flex;
174
- align-items: flex-start;
175
- justify-content: center;
176
- .header__content {
177
- display: flex;
178
- align-items: center;
179
- flex-direction: row;
180
- padding: 10px 0;
181
- h2 {
182
- margin-bottom: 0;
183
- }
184
- .images {
185
- margin-left: 10px;
186
- display: flex;
187
- align-items: center;
188
- user-select: none;
189
- .user__avatar {
190
- cursor: pointer;
191
- border: 2px solid transparent;
192
- transition: border-color 0.5s;
193
- border: 2px solid #fff;
194
- background: #fff;
195
- &--active {
196
- border-color: #5865F2;
197
- z-index: 10;
198
- }
199
- }
200
- img {
201
- $size: 42px;
202
- display: block;
203
- width: $size;
204
- height: $size;
205
- object-fit: cover;
206
- border-radius: 100px;
207
- &:not(:first-child) {
208
- margin-left: -10px;
209
- }
210
- }
211
- }
212
- }
213
- }
214
- </style>
1
+ <template>
2
+ <base-header class="app-header" :type="'white'">
3
+ <div class="row justify-content-between">
4
+ <div
5
+ :class="{ 'images__container': users.length }"
6
+ class="col-8 my-auto header__container"
7
+ >
8
+ <slot name="header-top" />
9
+
10
+ <div class="header__content">
11
+ <div class="d-flex align-items-center flex-row">
12
+ <button class="back__button" v-if="hasBackButton" @click="goBack()">
13
+ <i class="fas fa-arrow-left"></i>
14
+ </button>
15
+ <h2 class="font-weight-bold display-3">{{name}}</h2>
16
+ </div>
17
+ <div class="images" v-if="users.length">
18
+ <el-tooltip
19
+ v-for="user in users"
20
+ :key="user.id"
21
+ placement="top"
22
+ :content="user.name"
23
+ class="user__avatar"
24
+ :class="{ 'user__avatar--active': activeUserId === user.id }"
25
+ >
26
+ <img
27
+ @click="setActiveUser(user.id)"
28
+ :src="(user.avatar) ? user.avatar : getNameInitials(user.name, user.last_name)"
29
+ :alt="user.name"
30
+ >
31
+ </el-tooltip>
32
+ </div>
33
+ </div>
34
+
35
+ <span id="credits-amount" v-if="subheader !== null">
36
+ {{ subheader }} Créditos
37
+ </span>
38
+
39
+ <slot name="header-bottom" />
40
+ </div>
41
+
42
+ <div class="col-4 d-flex justify-content-end align-items-start">
43
+ <el-tooltip v-for="(item, index) in icons" :key="index"
44
+ v-show="!item.disabled"
45
+ class="item" effect="dark" :content="item.title" placement="top">
46
+ <base-button size="md" type="link" class="text-primary px-2 w-auto"
47
+ @click="$emit(item.event, item)">
48
+ <font-awesome-icon :icon="item.icon" class="mr-2" />
49
+ </base-button>
50
+ </el-tooltip>
51
+
52
+ <slot name="buttons" />
53
+ </div>
54
+
55
+ <slot/>
56
+ </div>
57
+ </base-header>
58
+ </template>
59
+ <script>
60
+ export default {
61
+ data(){
62
+ return{
63
+ default: '',
64
+ activeUserId: null
65
+ };
66
+ },
67
+ props:{
68
+ icons:{
69
+ type: Array,
70
+ default: () =>[{ event: 'view', icon: ['fas', 'eye'], disabled: false, title: 'Visualizar' }, { event: 'config', icon: ['fas', 'cog'], disabled: false, title: 'Editar' } ]
71
+ },
72
+ name: {
73
+ type: String,
74
+ default: 'Teste de matematica'
75
+ },
76
+ subheader: {
77
+ type: Number,
78
+ default: null
79
+ },
80
+ users: {
81
+ type: Array,
82
+ default: () => []
83
+ },
84
+ hasBackButton: {
85
+ type: Boolean,
86
+ default: false
87
+ },
88
+ backClickAction: {
89
+ type: Function || null,
90
+ default: null
91
+ }
92
+ },
93
+ methods: {
94
+ goBack() {
95
+ if (this.backClickAction === null) {
96
+ this.$router.go(-1);
97
+ } else {
98
+ this.backClickAction();
99
+ }
100
+ },
101
+ getNameInitials(name, last_name) {
102
+ const avatarUrl = process.env.routes.avatar;
103
+
104
+ let userAvatarName;
105
+
106
+ if (name && last_name) {
107
+ userAvatarName = `${name.toUpperCase().charAt(0)}${last_name.toUpperCase().charAt(0)}`;
108
+ } else if (name && last_name === null) {
109
+ userAvatarName = name;
110
+ } else {
111
+ userAvatarName = 'BURH';
112
+ }
113
+
114
+ return avatarUrl.replace(':size', '64x64').replace(':initials', userAvatarName);
115
+ },
116
+ setActiveUser(userId) {
117
+ if (this.activeUserId !== userId) {
118
+ this.activeUserId = userId;
119
+ this.$emit('active-user', userId);
120
+ } else {
121
+ this.activeUserId = null;
122
+ this.$emit('active-user', null);
123
+ }
124
+ }
125
+ }
126
+ };
127
+ </script>
128
+ <style lang="scss" scoped>
129
+ #credits-amount {
130
+ margin: 0!important;
131
+ min-width: 8em;
132
+ margin: 1rem 1rem 1rem 0;
133
+ padding: 0.25em 1em;
134
+ font-size: 0.85rem;
135
+ line-height: 1.4em;
136
+ border-radius: 23rem;
137
+ font-weight: 400;
138
+ text-align: center;
139
+ background-color: rgba(29, 161, 241, 0.1);
140
+ color: #5865F2;
141
+ }
142
+ </style>
143
+ <style lang="scss">
144
+
145
+ .app-header {
146
+ width: 100%;
147
+ padding-top: 1.25rem;
148
+ box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
149
+ }
150
+
151
+ .back__button {
152
+ cursor: pointer;
153
+ width: 42px;
154
+ height: 42px;
155
+ display: flex;
156
+ align-items: center;
157
+ justify-content: center;
158
+ margin-right: 10px;
159
+ border-radius: 100px;
160
+ transition: background 0.5s;
161
+ margin-left: -15px;
162
+ border: 0;
163
+ background: transparent;
164
+ color: #32325d;
165
+ &:focus {
166
+ outline: none;
167
+ }
168
+ &:not(:disabled):hover, &:focus:not(:disabled):hover {
169
+ background: rgba(0, 0, 0, 0.08);
170
+ }
171
+ }
172
+
173
+ .header__container {
174
+ display: flex;
175
+ flex-direction: column;
176
+ justify-content: center;
177
+ align-items: flex-start;
178
+ }
179
+
180
+ .images__container {
181
+ display: flex;
182
+ align-items: flex-start;
183
+ justify-content: center;
184
+ .header__content {
185
+ display: flex;
186
+ align-items: center;
187
+ flex-direction: row;
188
+ padding: 10px 0;
189
+ h2 {
190
+ margin-bottom: 0;
191
+ }
192
+ .images {
193
+ margin-left: 10px;
194
+ display: flex;
195
+ align-items: center;
196
+ user-select: none;
197
+ .user__avatar {
198
+ cursor: pointer;
199
+ border: 2px solid transparent;
200
+ transition: border-color 0.5s;
201
+ border: 2px solid #fff;
202
+ background: #fff;
203
+ &--active {
204
+ border-color: #5865F2;
205
+ z-index: 10;
206
+ }
207
+ }
208
+ img {
209
+ $size: 42px;
210
+ display: block;
211
+ width: $size;
212
+ height: $size;
213
+ object-fit: cover;
214
+ border-radius: 100px;
215
+ &:not(:first-child) {
216
+ margin-left: -10px;
217
+ }
218
+ }
219
+ }
220
+ }
221
+ }
222
+ </style>
package/components/burh-ds/Modals/SharedModal.vue CHANGED
@@ -85,7 +85,7 @@
85
85
  </div>
86
86
 
87
87
  <div class="row">
88
- <div class="col-6" @click="copyToClipboard">
88
+ <div class="col-8" @click="copyToClipboard">
89
89
  <label class="ml-5 social social-label" for="linkShareModal"
90
90
  >Link compartilhável</label
91
91
  >
@@ -99,16 +99,7 @@
99
99
  />
100
100
  </div>
101
101
 
102
- <div class="col-6 text-center pt-1">
103
- <base-button
104
- size="sm"
105
- type="outline-primary"
106
- class="mt-4 ml-3"
107
- @click="$emit('close-modal')"
108
- >
109
- Voltar
110
- </base-button>
111
-
102
+ <div class="col-4 text-center pt-1">
112
103
  <base-button
113
104
  id="btnCopyLinkShare"
114
105
  size="sm"
package/components/burh-ds/Modals/UniversalShareModal.vue ADDED
@@ -0,0 +1,250 @@
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
+ class="p list-inline-item ml-2 cursor-pointer"
14
+ @click="$emit('whatsapp-modal')"
15
+ >
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>
27
+ <a
28
+ v-if="shareUrl"
29
+ :href="`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`"
30
+ target="_blank"
31
+ rel="noopener noreferrer"
32
+ class="social social-link"
33
+ >
34
+ <li class="p list-inline-item ml-2 cursor-pointer">
35
+ <base-button
36
+ icon
37
+ class="btn-facebook btn--rounded mr-2"
38
+ >
39
+ <span class="btn-inner--icon"
40
+ ><i class="fab fa-facebook-f"></i
41
+ ></span>
42
+ </base-button>
43
+ <span class="btn-inner--text">Facebook</span>
44
+ </li>
45
+ </a>
46
+ <a
47
+ v-if="shareUrl"
48
+ :href="`https://twitter.com/intent/tweet?text=${shareUrl}`"
49
+ target="_blank"
50
+ rel="noopener noreferrer"
51
+ class="social social-link"
52
+ >
53
+ <li class="p list-inline-item ml-2 cursor-pointer">
54
+ <base-button
55
+ icon
56
+ class="btn-twitter btn--rounded mr-2"
57
+ >
58
+ <span class="btn-inner--icon"
59
+ ><i class="fab fa-twitter"></i
60
+ ></span>
61
+ </base-button>
62
+ <span class="btn-inner--text">Twitter</span>
63
+ </li>
64
+ </a>
65
+ <a
66
+ v-if="shareUrl"
67
+ :href="`https://www.linkedin.com/sharing/share-offsite/?url=${shareUrl}`"
68
+ target="_blank"
69
+ rel="noopener noreferrer"
70
+ class="social social-link"
71
+ >
72
+ <li class="p list-inline-item ml-2 cursor-pointer">
73
+ <base-button
74
+ icon
75
+ class="btn-linkedin btn--rounded mr-2"
76
+ >
77
+ <span class="btn-inner--icon"
78
+ ><i class="fab fa-linkedin-in"></i
79
+ ></span>
80
+ </base-button>
81
+ <span class="btn-inner--text">Linkedin</span>
82
+ </li>
83
+ </a>
84
+ </ul>
85
+ </div>
86
+
87
+ <div class="row">
88
+ <div class="col-8" @click="copyToClipboard">
89
+ <label class="ml-5 social social-label" for="linkShareModal"
90
+ >Link compartilhável</label
91
+ >
92
+ <input
93
+ v-if="shareUrl"
94
+ id="linkShareModal"
95
+ :value="shareUrl"
96
+ type="text"
97
+ class="ml-5 form-control social social-input"
98
+ readonly
99
+ />
100
+ </div>
101
+
102
+ <div class="col-4 text-center pt-1">
103
+ <base-button
104
+ id="btnCopyLinkShare"
105
+ size="sm"
106
+ type="outline-primary"
107
+ class="mt-4"
108
+ @click="copyToClipboard"
109
+ >
110
+ Copiar
111
+ </base-button>
112
+ </div>
113
+ </div>
114
+
115
+ <span class="tool tool-close" @click="$emit('close-modal')">
116
+ Fechar
117
+ <font-awesome-icon
118
+ :icon="['fas', 'times']"
119
+ class="text-white ml-1"
120
+ />
121
+ </span>
122
+ </template>
123
+ </el-dialog>
124
+ </template>
125
+
126
+ <script>
127
+ import { Dialog } from 'element-ui';
128
+
129
+ export default {
130
+ name: 'shared-modal',
131
+ components: {
132
+ [Dialog.name]: Dialog
133
+ },
134
+ props: {
135
+ isActive: Boolean,
136
+ shareUrl: String
137
+ },
138
+ methods: {
139
+ copyToClipboard() {
140
+ let text = document.getElementById('linkShareModal');
141
+ let btnCopy = document.getElementById('btnCopyLinkShare');
142
+ text.select();
143
+ document.execCommand('copy');
144
+
145
+ btnCopy.innerText = 'Copiado';
146
+ btnCopy.classList.remove('btn-outline-primary');
147
+ btnCopy.classList.add('btn-primary');
148
+
149
+ setTimeout(() => {
150
+ btnCopy.innerText = 'Copiar';
151
+ btnCopy.classList.remove('btn-primary');
152
+ btnCopy.classList.add('btn-outline-primary');
153
+ }, 3000);
154
+ }
155
+ },
156
+ watch: {
157
+ isActive(to) {
158
+ !to && this.$emit('close-modal');
159
+ },
160
+ }
161
+ };
162
+ </script>
163
+
164
+ <style lang="scss" scoped>
165
+ @import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
166
+
167
+ /deep/ .el-dialog__body {
168
+ padding: 0;
169
+ }
170
+
171
+ /deep/ .el-dialog__header {
172
+ display: none;
173
+ }
174
+
175
+ /deep/ .el-dialog {
176
+ overflow: hidden;
177
+ border-radius: 10px;
178
+ padding-bottom: 50px;
179
+ max-width: 725px;
180
+ min-width: 725px;
181
+ }
182
+
183
+ .social {
184
+ &-label {
185
+ color: #8898aa;
186
+ text-transform: uppercase;
187
+ }
188
+
189
+ &-input {
190
+ /* width: 300px; */
191
+ border: none;
192
+ border-radius: 5px;
193
+ background: #e9ecef;
194
+ color: #32325d;
195
+ padding-left: 15px;
196
+ outline: 0;
197
+ cursor: pointer;
198
+ }
199
+
200
+ &-link {
201
+ color: #606266;
202
+ }
203
+ }
204
+
205
+ .tool {
206
+ position: absolute;
207
+ top: 1rem;
208
+ z-index: 10;
209
+ color: $primary;
210
+ cursor: pointer;
211
+
212
+ &-close {
213
+ position: absolute;
214
+ width: 88px;
215
+ height: 27px;
216
+ right: 7px;
217
+ top: 7px;
218
+ display: flex;
219
+ justify-content: center;
220
+ align-items: center;
221
+
222
+ font-size: 11px;
223
+
224
+ font-weight: 500;
225
+ background: rgba(0, 0, 0, 0.2);
226
+ border-radius: 17.5px;
227
+ color: #fff;
228
+ }
229
+ }
230
+
231
+ .btn-whatsapp:hover {
232
+ color: white;
233
+ }
234
+
235
+ .btn-email {
236
+ color: white;
237
+ background-color: $primary !important;
238
+ border-color: $primary !important;
239
+ }
240
+
241
+ .btn--rounded {
242
+ font-size: 1.5rem;
243
+ margin: 0;
244
+ padding: 0;
245
+ line-height: 0;
246
+ min-width: 0;
247
+ width: 3rem;
248
+ height: 3rem;
249
+ }
250
+ </style>
package/components/layouts/burh-ds/navbar/AppNavbar.vue CHANGED
@@ -17,6 +17,7 @@
17
17
 
18
18
  <a
19
19
  v-if="!disabledLinks"
20
+ v-show="!isCompany"
20
21
  @click="$emit('to-home')"
21
22
  class="btn btn-link text-primary cursor-pointer"
22
23
  >
@@ -54,7 +55,12 @@ export default {
54
55
  showableProducts: Object,
55
56
  activeProducts: Array,
56
57
  gridApps: Array,
57
- disabledLinks: Boolean
58
+ disabledLinks: Boolean,
59
+ isCompany: {
60
+ type: Boolean,
61
+ default: false,
62
+ description: 'Verify company for share buffer'
63
+ }
58
64
  },
59
65
  data() {
60
66
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@burh/nuxt-core",
3
- "version": "1.0.351",
3
+ "version": "1.0.353",
4
4
  "description": "Design System and Components.",
5
5
  "author": "Burh",
6
6
  "scripts": {