@burh/nuxt-core 1.1.17 → 1.1.18

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