@burh/nuxt-core 1.1.22 → 1.1.24

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 (4) hide show
  1. package/components/burh-ds/Curriculum/UserCurriculum/UserCvLeftSide.vue +621 -624
  2. package/components/burh-ds/Curriculum/UserCurriculum/UserCvMiddle.vue +779 -779
  3. package/components/burh-ds/Headings/AppHeader.vue +403 -390
  4. package/package.json +1 -1
package/components/burh-ds/Headings/AppHeader.vue CHANGED
@@ -1,390 +1,403 @@
1
- <template>
2
- <base-header class="app-header" :type="'white'">
3
- <div :class="headerClass">
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 justify-content-center flex-row header__title" :class="{ hasBackButton }">
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
- <badge
17
- v-if="beta"
18
- rounded
19
- size="md"
20
- class="badge-font ml-2 mb-2"
21
- type="primary"
22
- >
23
- BETA
24
- </badge>
25
- </div>
26
- <div class="images" v-if="users.length">
27
- <el-tooltip
28
- v-for="user in users.slice(0, 5)"
29
- :key="user.id"
30
- placement="top"
31
- :content="user.name"
32
- class="user__avatar"
33
- :class="{ 'user__avatar--active': activeUserId === user.id }"
34
- >
35
- <image-with-fallback
36
- @click.native="setActiveUser(user.id)"
37
- :src="user.avatar"
38
- :alt="user.name"
39
- :fallbackText="user.name"
40
- fallbackSize="200"
41
- :fallbackBackground="avatarColor"
42
- :style=" `--avatar-color: #${avatarColor}`"
43
- />
44
- </el-tooltip>
45
-
46
- <template v-if="users.length > 5">
47
- <el-dropdown trigger="click" class="ml-4">
48
- <span class="app__header__dropdown__title" :class="{ 'app__header__dropdown__title--active': users.map(user => user.id).includes(activeUserId) }" draggable="false">
49
- + {{ users.slice(5).length }}
50
- </span>
51
- <el-dropdown-menu slot="dropdown" class="app__header__imagems__dropdown">
52
- <el-dropdown-item
53
- v-for="user in users.slice(5)"
54
- :key="user.id"
55
- @click.native="setActiveUser(user.id)"
56
- >
57
- <div class="dropdown__user__data" :class="{ 'dropdown__user__data--active': activeUserId === user.id }">
58
- <image-with-fallback
59
- :src="user.avatar"
60
- :alt="user.name"
61
- :fallbackText="user.name"
62
- fallbackSize="200"
63
- :fallbackBackground="avatarColor"
64
- :style=" `--avatar-color: #${avatarColor}`"
65
- />
66
- <span>{{ user.name }} {{ user.last_name }}</span>
67
- </div>
68
- </el-dropdown-item>
69
- </el-dropdown-menu>
70
- </el-dropdown>
71
- </template>
72
- </div>
73
- </div>
74
-
75
- <span id="credits-amount" v-if="subheader !== null">
76
- <template v-if="subheader >= 0">
77
- {{ subheader }} Créditos
78
- </template>
79
-
80
- <template v-else>
81
- Créditos Ilimitados
82
- </template>
83
- </span>
84
-
85
- <slot name="header-bottom" />
86
- </div>
87
-
88
- <div class="col-4 d-flex justify-content-end align-items-start footer__content">
89
- <el-tooltip v-for="(item, index) in icons" :key="index"
90
- v-show="!item.disabled"
91
- class="item" effect="dark" :content="item.title" placement="top">
92
- <base-button size="md" type="link" class="text-primary px-2 w-auto"
93
- @click="$emit(item.event, item)">
94
- <font-awesome-icon :icon="item.icon" class="mr-2" />
95
- </base-button>
96
- </el-tooltip>
97
-
98
- <slot name="buttons" />
99
- </div>
100
-
101
- <slot/>
102
- </div>
103
- </base-header>
104
- </template>
105
- <script>
106
- import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
107
- export default {
108
- components: {
109
- ElDropdown: Dropdown,
110
- ElDropdownMenu: DropdownMenu,
111
- ElDropdownItem: DropdownItem,
112
- },
113
- computed: {
114
- headerClass() {
115
- const baseClass = 'justify-content-between app__header';
116
- const regex = /\/admissao\/\d+\/\d+/;
117
- return regex.test(this.currentPath) ? baseClass : `row ${baseClass}`;
118
- },
119
- },
120
- data(){
121
- return{
122
- default: '',
123
- activeUserId: null,
124
- currentPath: ''
125
- };
126
- },
127
- props:{
128
- icons:{
129
- type: Array,
130
- default: () =>[{ event: 'view', icon: ['fas', 'eye'], disabled: false, title: 'Visualizar' }, { event: 'config', icon: ['fas', 'cog'], disabled: false, title: 'Editar' } ]
131
- },
132
- name: {
133
- type: String,
134
- default: 'Teste de matematica'
135
- },
136
- beta:{
137
- type: Boolean,
138
- default: false
139
- },
140
- subheader: {
141
- type: Number,
142
- default: null
143
- },
144
- users: {
145
- type: Array,
146
- default: () => []
147
- },
148
- hasBackButton: {
149
- type: Boolean,
150
- default: false
151
- },
152
- backClickAction: {
153
- type: Function || null,
154
- default: null
155
- },
156
- avatarColor: {
157
- type: String,
158
- default: '5865f2'
159
- }
160
- },
161
- methods: {
162
- goBack() {
163
- if (this.backClickAction === null) {
164
- this.$router.go(-1);
165
- } else {
166
- this.backClickAction();
167
- }
168
- },
169
- setActiveUser(userId) {
170
- if (this.activeUserId !== userId) {
171
- this.activeUserId = userId;
172
- this.$emit('active-user', userId);
173
- } else {
174
- this.activeUserId = null;
175
- this.$emit('active-user', null);
176
- }
177
- }
178
- },
179
- mounted() {
180
- this.currentPath = window.location.pathname;
181
- }
182
- };
183
- </script>
184
- <style lang="scss">
185
- .app__header__imagems__dropdown {
186
- max-height: 300px;
187
- overflow: hidden;
188
- overflow-y: scroll;
189
- &::-webkit-scrollbar {
190
- width: 8px;
191
- }
192
-
193
- &::-webkit-scrollbar-track {
194
- background: #f5f5f5;
195
- }
196
-
197
- &::-webkit-scrollbar-thumb {
198
- background: #e9e8e8;
199
- border-radius: 10px;
200
- }
201
- .dropdown__user__data {
202
- display: grid;
203
- grid-template-columns: 40px 1fr;
204
- align-items: center;
205
- margin-bottom: 5px;
206
- img {
207
- width: 32px;
208
- height: 32px;
209
- border-radius: 100px;
210
- display: block;
211
- border: 2px solid transparent;
212
- }
213
- span {
214
- font-weight: 500;
215
- }
216
- &--active {
217
- img {
218
- border-color: #5865f2;
219
- }
220
- }
221
- }
222
- }
223
- </style>
224
-
225
- <style lang="scss" scoped>
226
- @media (max-width: 850px) {
227
- .app__header {
228
- .header__container {
229
- width: 100%!important;
230
- max-width: none!important;
231
- }
232
- .hasBackButton {
233
- flex-direction: row!important;
234
- justify-content: flex-start!important;
235
- }
236
- .header__content {
237
- width: 100%!important;
238
- max-width: none!important;
239
- flex-direction: column!important;
240
- text-align: left!important;
241
- align-items: flex-start!important;
242
- justify-content: flex-start!important;
243
- > .images {
244
- margin: 0!important;
245
- margin-top: 10px!important;
246
- }
247
- }
248
- }
249
- }
250
- @media (max-width: 600px) {
251
- .app__header {
252
- display: flex!important;
253
- flex-direction: column!important;
254
- .header__content {
255
- .header__title {
256
- width: 100%!important;
257
- max-width: none!important;
258
- text-align: left!important;
259
- align-items: flex-start!important;
260
- justify-content: flex-start!important;
261
- &:not(:has(.hasBackButton)) {
262
- flex-direction: column!important;
263
- }
264
- }
265
- }
266
- .footer__content {
267
- width: 100%!important;
268
- max-width: none!important;
269
- padding: 0!important;
270
- display: grid!important;
271
- grid-template-columns: repeat(auto-fit, minmax(calc(100% / 2), 1fr));
272
- justify-content: stretch!important;
273
- /deep/ button {
274
- width: 100%!important;
275
- }
276
- }
277
- }
278
- }
279
-
280
- .app__header__dropdown__title {
281
- background: #8DA2B5;
282
- color: #fff;
283
- width: 42px;
284
- height: 42px;
285
- display: grid;
286
- place-items: center;
287
- border-radius: 100px;
288
- border: 2px solid #fff;
289
- margin-left: -34px;
290
- font-size: 0.7rem;
291
- user-select: none;
292
- &--active {
293
- border-color: #5865f2;
294
- }
295
- }
296
-
297
- #credits-amount {
298
- margin: 0!important;
299
- min-width: 8em;
300
- margin: 1rem 1rem 1rem 0;
301
- padding: 0.25em 1em;
302
- font-size: 0.85rem;
303
- line-height: 1.4em;
304
- border-radius: 23rem;
305
- font-weight: 400;
306
- text-align: center;
307
- background-color: rgba(29, 161, 241, 0.1);
308
- color: #5865F2;
309
- }
310
- </style>
311
- <style lang="scss">
312
-
313
- .app-header {
314
- width: 100%;
315
- padding-top: 1.25rem;
316
- box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
317
- }
318
-
319
- .back__button {
320
- cursor: pointer;
321
- width: 42px;
322
- height: 42px;
323
- display: flex;
324
- align-items: center;
325
- justify-content: center;
326
- margin-right: 10px;
327
- border-radius: 100px;
328
- transition: background 0.5s;
329
- margin-left: -15px;
330
- border: 0;
331
- background: transparent;
332
- color: #32325d;
333
- &:focus {
334
- outline: none;
335
- }
336
- &:not(:disabled):hover, &:focus:not(:disabled):hover {
337
- background: rgba(0, 0, 0, 0.08);
338
- }
339
- }
340
-
341
- .header__container {
342
- display: flex;
343
- flex-direction: column;
344
- justify-content: center;
345
- align-items: flex-start;
346
- }
347
-
348
- .images__container {
349
- display: flex;
350
- align-items: flex-start;
351
- justify-content: center;
352
- .header__content {
353
- display: flex;
354
- align-items: center;
355
- flex-direction: row;
356
- padding: 10px 0;
357
- h2 {
358
- margin-bottom: 0;
359
- }
360
- .images {
361
- margin-left: 10px;
362
- display: flex;
363
- align-items: center;
364
- user-select: none;
365
- .user__avatar {
366
- cursor: pointer;
367
- border: 2px solid transparent;
368
- transition: border-color 0.5s;
369
- border: 2px solid #fff;
370
- background: var(--avatar-color);
371
- &--active {
372
- border-color: #5865F2;
373
- z-index: 10;
374
- }
375
- }
376
- img {
377
- $size: 42px;
378
- display: block;
379
- width: $size;
380
- height: $size;
381
- object-fit: cover;
382
- border-radius: 100px;
383
- &:not(:first-child) {
384
- margin-left: -10px;
385
- }
386
- }
387
- }
388
- }
389
- }
390
- </style>
1
+ <template>
2
+ <base-header class="app-header" :type="'white'">
3
+ <div :class="headerClass">
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 justify-content-center flex-row header__title" :class="{ hasBackButton }">
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
+ <badge
17
+ v-if="beta"
18
+ rounded
19
+ size="md"
20
+ class="badge-font ml-2 mb-2"
21
+ type="primary"
22
+ >
23
+ BETA
24
+ </badge>
25
+ </div>
26
+ <div class="images" v-if="users.length">
27
+ <el-tooltip
28
+ v-for="user in users.slice(0, 5)"
29
+ :key="user.id"
30
+ placement="top"
31
+ :content="user.name"
32
+ class="user__avatar"
33
+ :class="{ 'user__avatar--active': activeUserId === user.id }"
34
+ >
35
+ <image-with-fallback
36
+ @click.native="setActiveUser(user.id)"
37
+ :src="user.avatar"
38
+ :alt="user.name"
39
+ :fallbackText="user.name"
40
+ fallbackSize="200"
41
+ :fallbackBackground="avatarColor"
42
+ :style=" `--avatar-color: #${avatarColor}`"
43
+ />
44
+ </el-tooltip>
45
+
46
+ <template v-if="users.length > 5">
47
+ <el-dropdown trigger="click" class="ml-4">
48
+ <span class="app__header__dropdown__title" :class="{ 'app__header__dropdown__title--active': users.map(user => user.id).includes(activeUserId) }" draggable="false">
49
+ + {{ users.slice(5).length }}
50
+ </span>
51
+ <el-dropdown-menu slot="dropdown" class="app__header__imagems__dropdown">
52
+ <el-dropdown-item
53
+ v-for="user in users.slice(5)"
54
+ :key="user.id"
55
+ @click.native="setActiveUser(user.id)"
56
+ >
57
+ <div class="dropdown__user__data" :class="{ 'dropdown__user__data--active': activeUserId === user.id }">
58
+ <image-with-fallback
59
+ :src="user.avatar"
60
+ :alt="user.name"
61
+ :fallbackText="user.name"
62
+ fallbackSize="200"
63
+ :fallbackBackground="avatarColor"
64
+ :style=" `--avatar-color: #${avatarColor}`"
65
+ />
66
+ <span>{{ user.name }} {{ user.last_name }}</span>
67
+ </div>
68
+ </el-dropdown-item>
69
+ </el-dropdown-menu>
70
+ </el-dropdown>
71
+ </template>
72
+ </div>
73
+ </div>
74
+
75
+ <span id="credits-amount" v-if="subheader !== null">
76
+ <template v-if="subheader >= 0">
77
+ {{ subheader }} {{ $t('app_header.credits') }}
78
+ </template>
79
+
80
+ <template v-else>
81
+ {{ $t('app_header.unlimited_credits') }}
82
+ </template>
83
+ </span>
84
+
85
+ <slot name="header-bottom" />
86
+ </div>
87
+
88
+ <div class="col-4 d-flex justify-content-end align-items-start footer__content">
89
+ <el-tooltip v-for="(item, index) in icons" :key="index"
90
+ v-show="!item.disabled"
91
+ class="item" effect="dark" :content="item.title" placement="top">
92
+ <base-button size="md" type="link" class="text-primary px-2 w-auto"
93
+ @click="$emit(item.event, item)">
94
+ <font-awesome-icon :icon="item.icon" class="mr-2" />
95
+ </base-button>
96
+ </el-tooltip>
97
+
98
+ <slot name="buttons" />
99
+ </div>
100
+
101
+ <slot/>
102
+ </div>
103
+ </base-header>
104
+ </template>
105
+ <script>
106
+ import { Dropdown, DropdownMenu, DropdownItem } from 'element-ui';
107
+ export default {
108
+ components: {
109
+ ElDropdown: Dropdown,
110
+ ElDropdownMenu: DropdownMenu,
111
+ ElDropdownItem: DropdownItem,
112
+ },
113
+ computed: {
114
+ headerClass() {
115
+ const baseClass = 'justify-content-between app__header';
116
+ const regex = /\/admissao\/\d+\/\d+/;
117
+ return regex.test(this.currentPath) ? baseClass : `row ${baseClass}`;
118
+ },
119
+ },
120
+ data(){
121
+ return{
122
+ default: '',
123
+ activeUserId: null,
124
+ currentPath: ''
125
+ };
126
+ },
127
+ props:{
128
+ icons:{
129
+ type: Array,
130
+ default: () =>[
131
+ {
132
+ event: 'view',
133
+ icon: ['fas', 'eye'],
134
+ disabled: false,
135
+ title: this.$t('app_header.default_icons.view')
136
+ },
137
+ {
138
+ event: 'config',
139
+ icon: ['fas', 'cog'],
140
+ disabled: false,
141
+ title: this.$t('app_header.default_icons.edit')
142
+ }
143
+ ]
144
+ },
145
+ name: {
146
+ type: String,
147
+ default: () => this.$t('app_header.default_name')
148
+ },
149
+ beta:{
150
+ type: Boolean,
151
+ default: false
152
+ },
153
+ subheader: {
154
+ type: Number,
155
+ default: null
156
+ },
157
+ users: {
158
+ type: Array,
159
+ default: () => []
160
+ },
161
+ hasBackButton: {
162
+ type: Boolean,
163
+ default: false
164
+ },
165
+ backClickAction: {
166
+ type: Function || null,
167
+ default: null
168
+ },
169
+ avatarColor: {
170
+ type: String,
171
+ default: '5865f2'
172
+ }
173
+ },
174
+ methods: {
175
+ goBack() {
176
+ if (this.backClickAction === null) {
177
+ this.$router.go(-1);
178
+ } else {
179
+ this.backClickAction();
180
+ }
181
+ },
182
+ setActiveUser(userId) {
183
+ if (this.activeUserId !== userId) {
184
+ this.activeUserId = userId;
185
+ this.$emit('active-user', userId);
186
+ } else {
187
+ this.activeUserId = null;
188
+ this.$emit('active-user', null);
189
+ }
190
+ }
191
+ },
192
+ mounted() {
193
+ this.currentPath = window.location.pathname;
194
+ }
195
+ };
196
+ </script>
197
+ <style lang="scss">
198
+ .app__header__imagems__dropdown {
199
+ max-height: 300px;
200
+ overflow: hidden;
201
+ overflow-y: scroll;
202
+ &::-webkit-scrollbar {
203
+ width: 8px;
204
+ }
205
+
206
+ &::-webkit-scrollbar-track {
207
+ background: #f5f5f5;
208
+ }
209
+
210
+ &::-webkit-scrollbar-thumb {
211
+ background: #e9e8e8;
212
+ border-radius: 10px;
213
+ }
214
+ .dropdown__user__data {
215
+ display: grid;
216
+ grid-template-columns: 40px 1fr;
217
+ align-items: center;
218
+ margin-bottom: 5px;
219
+ img {
220
+ width: 32px;
221
+ height: 32px;
222
+ border-radius: 100px;
223
+ display: block;
224
+ border: 2px solid transparent;
225
+ }
226
+ span {
227
+ font-weight: 500;
228
+ }
229
+ &--active {
230
+ img {
231
+ border-color: #5865f2;
232
+ }
233
+ }
234
+ }
235
+ }
236
+ </style>
237
+
238
+ <style lang="scss" scoped>
239
+ @media (max-width: 850px) {
240
+ .app__header {
241
+ .header__container {
242
+ width: 100%!important;
243
+ max-width: none!important;
244
+ }
245
+ .hasBackButton {
246
+ flex-direction: row!important;
247
+ justify-content: flex-start!important;
248
+ }
249
+ .header__content {
250
+ width: 100%!important;
251
+ max-width: none!important;
252
+ flex-direction: column!important;
253
+ text-align: left!important;
254
+ align-items: flex-start!important;
255
+ justify-content: flex-start!important;
256
+ > .images {
257
+ margin: 0!important;
258
+ margin-top: 10px!important;
259
+ }
260
+ }
261
+ }
262
+ }
263
+ @media (max-width: 600px) {
264
+ .app__header {
265
+ display: flex!important;
266
+ flex-direction: column!important;
267
+ .header__content {
268
+ .header__title {
269
+ width: 100%!important;
270
+ max-width: none!important;
271
+ text-align: left!important;
272
+ align-items: flex-start!important;
273
+ justify-content: flex-start!important;
274
+ &:not(:has(.hasBackButton)) {
275
+ flex-direction: column!important;
276
+ }
277
+ }
278
+ }
279
+ .footer__content {
280
+ width: 100%!important;
281
+ max-width: none!important;
282
+ padding: 0!important;
283
+ display: grid!important;
284
+ grid-template-columns: repeat(auto-fit, minmax(calc(100% / 2), 1fr));
285
+ justify-content: stretch!important;
286
+ /deep/ button {
287
+ width: 100%!important;
288
+ }
289
+ }
290
+ }
291
+ }
292
+
293
+ .app__header__dropdown__title {
294
+ background: #8DA2B5;
295
+ color: #fff;
296
+ width: 42px;
297
+ height: 42px;
298
+ display: grid;
299
+ place-items: center;
300
+ border-radius: 100px;
301
+ border: 2px solid #fff;
302
+ margin-left: -34px;
303
+ font-size: 0.7rem;
304
+ user-select: none;
305
+ &--active {
306
+ border-color: #5865f2;
307
+ }
308
+ }
309
+
310
+ #credits-amount {
311
+ margin: 0!important;
312
+ min-width: 8em;
313
+ margin: 1rem 1rem 1rem 0;
314
+ padding: 0.25em 1em;
315
+ font-size: 0.85rem;
316
+ line-height: 1.4em;
317
+ border-radius: 23rem;
318
+ font-weight: 400;
319
+ text-align: center;
320
+ background-color: rgba(29, 161, 241, 0.1);
321
+ color: #5865F2;
322
+ }
323
+ </style>
324
+ <style lang="scss">
325
+
326
+ .app-header {
327
+ width: 100%;
328
+ padding-top: 1.25rem;
329
+ box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
330
+ }
331
+
332
+ .back__button {
333
+ cursor: pointer;
334
+ width: 42px;
335
+ height: 42px;
336
+ display: flex;
337
+ align-items: center;
338
+ justify-content: center;
339
+ margin-right: 10px;
340
+ border-radius: 100px;
341
+ transition: background 0.5s;
342
+ margin-left: -15px;
343
+ border: 0;
344
+ background: transparent;
345
+ color: #32325d;
346
+ &:focus {
347
+ outline: none;
348
+ }
349
+ &:not(:disabled):hover, &:focus:not(:disabled):hover {
350
+ background: rgba(0, 0, 0, 0.08);
351
+ }
352
+ }
353
+
354
+ .header__container {
355
+ display: flex;
356
+ flex-direction: column;
357
+ justify-content: center;
358
+ align-items: flex-start;
359
+ }
360
+
361
+ .images__container {
362
+ display: flex;
363
+ align-items: flex-start;
364
+ justify-content: center;
365
+ .header__content {
366
+ display: flex;
367
+ align-items: center;
368
+ flex-direction: row;
369
+ padding: 10px 0;
370
+ h2 {
371
+ margin-bottom: 0;
372
+ }
373
+ .images {
374
+ margin-left: 10px;
375
+ display: flex;
376
+ align-items: center;
377
+ user-select: none;
378
+ .user__avatar {
379
+ cursor: pointer;
380
+ border: 2px solid transparent;
381
+ transition: border-color 0.5s;
382
+ border: 2px solid #fff;
383
+ background: var(--avatar-color);
384
+ &--active {
385
+ border-color: #5865F2;
386
+ z-index: 10;
387
+ }
388
+ }
389
+ img {
390
+ $size: 42px;
391
+ display: block;
392
+ width: $size;
393
+ height: $size;
394
+ object-fit: cover;
395
+ border-radius: 100px;
396
+ &:not(:first-child) {
397
+ margin-left: -10px;
398
+ }
399
+ }
400
+ }
401
+ }
402
+ }
403
+ </style>