@burh/nuxt-core 1.0.421 → 1.0.423

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.
@@ -113,6 +113,7 @@ $cyan: #2bffc6 !default;
113
113
  // NEW COLORS
114
114
  $search: #5865f2 !default;
115
115
  $recruitment: #0c95fc !default;
116
+ $indicators: #5C65D2 !default;
116
117
  $university: #39e2fd !default;
117
118
  $interviews: #ff539d !default;
118
119
  $workus: #ff7d7e !default;
@@ -145,6 +146,7 @@ $colors: map-merge(
145
146
  "gray-dark": $gray-800,
146
147
  "search": $search,
147
148
  "recruitment": $recruitment,
149
+ "indicators": $indicators,
148
150
  "university": $university,
149
151
  "interviews": $interviews,
150
152
  "workus": $workus,
@@ -8,29 +8,30 @@
8
8
 
9
9
  </h2>
10
10
  </template>
11
- <div class="switch-position">
12
- <el-switch
13
- v-model="switchSingle"
14
- active-color="#5865F2"
15
- inactive-text="Enviar para novos usuários"
16
- active-text="Enviar por setor">
17
- </el-switch>
11
+ <validation-observer ref="sendCourse">
12
+ <div class="switch-position">
13
+ <el-switch
14
+ v-model="switchSingle"
15
+ active-color="#5865F2"
16
+ inactive-text="Enviar para novos usuários"
17
+ active-text="Enviar por setor">
18
+ </el-switch>
18
19
 
19
- </div>
20
- <div class="content-1">
21
- <div v-if="!switchSingle" style="min-height:100px">
22
- <div class="row px-4">
23
- <div class="col-4">
24
- <label for="name">Nome Completo</label>
25
- </div>
26
- <div class="col-4">
27
- <label for="email">E-mail</label>
28
- </div>
29
- <div class="col-4">
30
- <label for="email">Setor</label>
20
+ </div>
21
+
22
+ <div class="content-1">
23
+ <div v-if="!switchSingle" style="min-height:100px">
24
+ <div class="row px-4">
25
+ <div class="col-4">
26
+ <label for="name">Nome Completo</label>
27
+ </div>
28
+ <div class="col-4">
29
+ <label for="email">E-mail</label>
30
+ </div>
31
+ <div class="col-4">
32
+ <label for="setor">Setor</label>
33
+ </div>
31
34
  </div>
32
- </div>
33
- <validation-observer ref="sendCourse">
34
35
  <div class="row px-4" v-for="(slot, idx) in payload.users" :key="idx">
35
36
 
36
37
  <validation-provider
@@ -63,6 +64,7 @@
63
64
  :disabled="payload.all_users ? true : false"
64
65
  >
65
66
  <base-input
67
+ type="email"
66
68
  :disabled="payload.all_users ? true : false"
67
69
  v-model="slot.email"
68
70
  :error="errors[0]"
@@ -71,14 +73,24 @@
71
73
  />
72
74
  </validation-provider>
73
75
 
74
- <div tag="div" class="col-3" name="role">
76
+ <validation-provider
77
+ tag="div"
78
+ class="col-3"
79
+ style="height: 50px"
80
+ name="Setor"
81
+ :vid="`send-role-${idx}`"
82
+ rules="required"
83
+ v-slot="{ errors }"
84
+ >
75
85
  <el-select
76
86
  filterable
77
- no-match-text="Nenhum cargo encontrado"
78
- no-data-text="Nenhum cargo encontrado"
87
+ clearable
88
+ no-match-text="Nenhum setor encontrado"
89
+ no-data-text="Nenhum setor encontrado"
79
90
  class="select-danger"
91
+ required
92
+ :class="{'is-invalid': errors[0]}"
80
93
  v-model="slot.access_level_id"
81
- style="height: 50px"
82
94
  placeholder="Escolha o setor"
83
95
  :disabled="payload.all_users ? true : false"
84
96
  >
@@ -90,7 +102,12 @@
90
102
  >
91
103
  </el-option>
92
104
  </el-select>
93
- </div>
105
+ <div
106
+ class="invalid-feedback"
107
+ style="display: block;">
108
+ {{ errors[0] }}
109
+ </div>
110
+ </validation-provider>
94
111
 
95
112
  <div class="col-1">
96
113
  <i
@@ -103,26 +120,36 @@
103
120
 
104
121
  </div>
105
122
 
106
- </validation-observer>
107
- </div>
108
- <!-- envio em massa -->
109
- <div v-else style="height:100px">
110
- <div class="px-4">
111
- <label for="email">Setor</label>
112
123
  </div>
113
- <validation-observer ref="sendCourse">
124
+ <!-- envio em massa -->
125
+ <div v-else style="height:100px">
126
+ <div class="px-4">
127
+ <label for="setor2">Setor</label>
128
+ </div>
114
129
  <div class="row px-4" v-for="(slot, idx) in payload.users" :key="idx">
115
- <div tag="div" class="col-12" name="role">
130
+ <validation-provider
131
+ tag="div"
132
+ class="col-12"
133
+ style="height: 50px"
134
+ name="Setor"
135
+ :vid="`send-roleall-${idx}`"
136
+ rules="required"
137
+ v-slot="{ errors }"
138
+ :disabled="payload.all_users ? true : false"
139
+ >
116
140
  <el-select
117
141
  filterable
118
- no-match-text="Nenhum cargo encontrado"
119
- no-data-text="Nenhum cargo encontrado"
120
- class="select-danger"
142
+ clearable
143
+ no-match-text="Nenhum setor encontrado"
144
+ no-data-text="Nenhum setor encontrado"
145
+ class="select-danger w-100"
121
146
  multiple
122
- style="width: 100%;"
147
+ required
148
+ :class="{'is-invalid': errors[0]}"
123
149
  v-model="selectedRole"
124
150
  placeholder="Escolha o setor"
125
151
  :disabled="payload.all_users ? true : false"
152
+
126
153
  >
127
154
  <el-option
128
155
  v-for="role in corporativeRole"
@@ -132,55 +159,78 @@
132
159
  >
133
160
  </el-option>
134
161
  </el-select>
135
- </div>
162
+ <div
163
+ class="invalid-feedback"
164
+ style="display: block;">
165
+ {{ errors[0] }}
166
+ </div>
167
+ </validation-provider>
136
168
  </div>
137
- </validation-observer>
169
+ </div>
170
+ <el-checkbox
171
+ v-show="switchSingle"
172
+ class="checkbox-user"
173
+ v-model="payload.all_users"
174
+ > Enviar para todos
175
+ </el-checkbox>
138
176
  </div>
139
- <el-checkbox
140
- v-show="switchSingle"
141
- class="checkbox-user"
142
- v-model="payload.all_users"
143
- > Enviar para todos
144
- </el-checkbox>
145
- </div>
146
- <hr />
147
177
 
148
- <div class="row px-4">
149
- <div class="col-12">
150
- <label for="courses">Acesso aos Treinamentos</label>
178
+ <hr />
179
+
180
+ <div class="row px-4">
181
+ <div class="col-12">
182
+ <label for="courses">Acesso aos Treinamentos</label>
183
+ </div>
151
184
  </div>
152
- </div>
153
- <div class="row px-4">
154
- <div class="col-12">
155
- <el-select
156
- v-model="coursesToSend"
157
- multiple
158
- style="width: 100%;"
159
- placeholder="Treinamentos"
160
- name="courses"
185
+ <div class="row px-4">
186
+ <validation-provider
187
+ tag="div"
188
+ class="col-12"
189
+ style="height: 50px"
190
+ name="Treinamento"
191
+ :vid="`send-training-${idx}`"
192
+ rules="required"
193
+ v-slot="{ errors }"
161
194
  >
162
- <el-option
163
- v-for="item in courses"
164
- :key="item.id"
165
- :label="item.name"
166
- :value="item.id"
195
+ <el-select
196
+ v-model="coursesToSend"
197
+ multiple
198
+ no-match-text="Nenhum Treinamento encontrado"
199
+ no-data-text="Nenhum Treinamento encontrado"
200
+ class="w-100"
201
+ required
202
+ :class="{'is-invalid': errors[0]}"
203
+ placeholder="Treinamentos"
204
+ name="courses"
167
205
  >
168
- </el-option>
169
- </el-select>
206
+ <el-option
207
+ v-for="item in courses"
208
+ :key="item.id"
209
+ :label="item.name"
210
+ :value="item.id"
211
+ >
212
+ </el-option>
213
+ </el-select>
214
+ <div
215
+ class="invalid-feedback"
216
+ style="display: block;">
217
+ {{ errors[0] }}
218
+ </div>
219
+ </validation-provider>
170
220
  </div>
171
- </div>
172
221
 
173
- <div class="row">
174
- <base-button
175
- class="mx-auto"
176
- type="primary"
177
- @click="sendTest"
178
- :disabled="isLoading"
179
- :class="{'is-loading': isLoading}"
180
- >
181
- {{ isLoading ? 'Enviando' : 'Enviar' }}
182
- </base-button>
183
- </div>
222
+ <div class="row">
223
+ <base-button
224
+ class="mx-auto"
225
+ type="primary"
226
+ @click="sendTest"
227
+ :disabled="isLoading"
228
+ :class="{'is-loading': isLoading}"
229
+ >
230
+ {{ isLoading ? 'Enviando' : 'Enviar' }}
231
+ </base-button>
232
+ </div>
233
+ </validation-observer>
184
234
  </modal>
185
235
  </template>
186
236
 
@@ -217,6 +267,11 @@ export default {
217
267
  },
218
268
  switchSingle(){
219
269
  this.resetSlots();
270
+ },
271
+ isModalOpen(to) {
272
+ if (to) {
273
+ this.resetSlots();
274
+ }
220
275
  }
221
276
  },
222
277
  data() {
@@ -301,7 +356,7 @@ export default {
301
356
  } else {
302
357
  let params = {
303
358
  courses: formattedCourses,
304
- access_levels: this.selectedRole.map(id => {
359
+ access_levels: Object.values(this.selectedRole).map(id => {
305
360
  return { id };
306
361
  }),
307
362
  all_users: allUsers
@@ -312,6 +367,7 @@ export default {
312
367
  }
313
368
  },
314
369
  resetSlots() {
370
+ this.$refs.sendCourse.reset();
315
371
  this.payload.users = [
316
372
  {
317
373
  idx: '',
@@ -320,6 +376,8 @@ export default {
320
376
  access_level_id: ''
321
377
  },
322
378
  ];
379
+ this.selectedRole = '';
380
+ this.coursesToSend = [];
323
381
  this.payload.all_users = false;
324
382
  }
325
383
  },
@@ -327,6 +385,11 @@ export default {
327
385
  };
328
386
  </script>
329
387
  <style lang="scss" scoped>
388
+ .is-invalid {
389
+ /deep/ input {
390
+ border-color: #de214b!important;
391
+ }
392
+ }
330
393
  .content-1{
331
394
  min-height: 130px !important;
332
395
  }
@@ -1,27 +1,27 @@
1
1
  <template>
2
2
  <ul class="pagination row" :class="[size && `pagination-${size}`, align && `justify-content-${align}`]">
3
- <li class="page-item prev-page" :class="{disabled: value === 1}" v-if="pagesName.length > 5">
4
- <a class="page-link" aria-label="Previous" @click="prevPage">
5
- <span aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
6
- </a>
7
- </li>
8
- <teste-tab
9
- :key="item"
10
- v-for="item in range(minPage, maxPage)"
11
- @tab-click="changePage(item)"
12
- :title="pagesName[item - 1]"
13
- :active="value === item"
14
- />
15
- <slot />
16
- <li class="page-item next-page" :class="{disabled: value === totalPages}" v-if="pagesName.length > 5">
17
- <a class="page-link" aria-label="Next" @click="nextPage">
18
- <span aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
19
- </a>
20
- </li>
21
- <!-- <li class="btn mx-1" :class="vvalue === item ? 'btn-primary' : 'btn-outline-primary'"
3
+ <li class="page-item prev-page" :class="{disabled: value === 1}" v-if="pagesName.length > 5">
4
+ <a class="page-link" aria-label="Previous" @click="prevPage">
5
+ <span aria-hidden="true"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
6
+ </a>
7
+ </li>
8
+ <teste-tab
9
+ :key="item"
10
+ v-for="item in range(minPage, maxPage)"
11
+ @tab-click="changePage(item)"
12
+ :title="pagesName[item - 1]"
13
+ :active="value === item"
14
+ />
15
+ <slot />
16
+ <li class="page-item next-page" :class="{disabled: value === totalPages}" v-if="pagesName.length > 5">
17
+ <a class="page-link" aria-label="Next" @click="nextPage">
18
+ <span aria-hidden="true"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
19
+ </a>
20
+ </li>
21
+ <!-- <li class="btn mx-1" :class="vvalue === item ? 'btn-primary' : 'btn-outline-primary'"
22
22
  :key="item"
23
23
  v-for="item in range(1, pagesName.length)"> -->
24
- <!-- <a
24
+ <!-- <a
25
25
  @click="changePage(item)">{{pagesName[item - 1]}}
26
26
  </a> -->
27
27
  <!-- </li> -->
@@ -31,9 +31,9 @@
31
31
  import TesteTab from '../Tabs/TesteTab';
32
32
  export default {
33
33
  name: 'base-pagination',
34
- components: {
35
- TesteTab,
36
- },
34
+ components: {
35
+ TesteTab,
36
+ },
37
37
  props: {
38
38
  pagesName: {
39
39
  type: Array,
@@ -90,9 +90,9 @@ export default {
90
90
  },
91
91
  data() {
92
92
  return {
93
- defaultPagesToDisplay: 1,
94
- minPage: 1,
95
- maxPage: this.pagesName.length >= 5 ? 5 : this.pagesName.length,
93
+ defaultPagesToDisplay: 1,
94
+ minPage: 1,
95
+ maxPage: this.pagesName.length >= 5 ? 5 : this.pagesName.length,
96
96
  };
97
97
  },
98
98
  methods: {
@@ -117,22 +117,22 @@ export default {
117
117
  }
118
118
  },
119
119
  display(value) {
120
- const pagesToDisplay = this.pagesName.length >= 5 ? 5 : this.pagesName.length;
120
+ const pagesToDisplay = this.pagesName.length >= 5 ? 5 : this.pagesName.length;
121
121
 
122
122
  if(value < 5) {
123
- this.minPage = 1;
124
- this.maxPage = pagesToDisplay;
125
- }
126
- else {
127
- if(value < this.minPage) {
128
- this.minPage = value;
129
- this.maxPage = this.minPage + 4;
130
- }
131
- if(value > this.maxPage) {
132
- this.maxPage = value;
133
- this.minPage = this.maxPage - 4;
134
- }
135
- }
123
+ this.minPage = 1;
124
+ this.maxPage = pagesToDisplay;
125
+ }
126
+ else {
127
+ if(value < this.minPage) {
128
+ this.minPage = value;
129
+ this.maxPage = this.minPage + 4;
130
+ }
131
+ if(value > this.maxPage) {
132
+ this.maxPage = value;
133
+ this.minPage = this.maxPage - 4;
134
+ }
135
+ }
136
136
  }
137
137
  },
138
138
  watch: {
@@ -142,15 +142,27 @@ export default {
142
142
  total(newValue, old) {
143
143
  this.$emit('input', 1);
144
144
  this.display(this.value);
145
- },
146
- value(newValue, oldValue) {
147
- this.display(newValue)
145
+ },
146
+ value(newValue, oldValue) {
147
+ this.display(newValue);
148
148
  },
149
149
  }
150
150
  };
151
151
  </script>
152
152
  <style lang="scss" scoped>
153
153
 
154
+ @media (max-width: 1195px) {
155
+ .pagination {
156
+ flex-wrap: nowrap;
157
+ }
158
+ }
159
+
160
+ @media (max-width: 1422px) {
161
+ .pagination {
162
+ flex-wrap: nowrap;
163
+ }
164
+ }
165
+
154
166
  .page-item, .page-link {
155
167
  display: flex;
156
168
  width: auto !important;
@@ -167,7 +179,6 @@ export default {
167
179
  padding: 0 1rem !important;
168
180
  }
169
181
 
170
-
171
182
  .teste {
172
183
  .page-link:hover {
173
184
  color: #fff;
@@ -0,0 +1,114 @@
1
+ <template>
2
+ <div class="indicator__card">
3
+ <div>
4
+ <div class="indicator__card__header">
5
+ <div class="indicator__card__header__status">
6
+ <skeleton-animate :width="250" :height="20" />
7
+ </div><br>
8
+ <span class="indicator__card__header__status">
9
+ <skeleton-animate :width="175" :height="10" />
10
+ </span>
11
+ </div>
12
+
13
+ <div class="indicator__card__content">
14
+ <span class="indicator__card__content__date">
15
+ <skeleton-animate :width="100" :percentageWidth="true" :height="255" />
16
+ </span>
17
+ </div>
18
+
19
+ </div>
20
+ </div>
21
+ </template>
22
+
23
+ <script>
24
+ import SkeletonAnimate from './SkeletonAnimate.vue';
25
+ export default {
26
+ name: 'indicator-card-skeleton',
27
+ components: {
28
+ SkeletonAnimate
29
+ }
30
+ };
31
+ </script>
32
+
33
+ <style lang="scss" scoped>
34
+ @keyframes placeholderSkeleton {
35
+ 0% {
36
+ background-position: -468px 0;
37
+ }
38
+ 100% {
39
+ background-position: 468px 0;
40
+ }
41
+ }
42
+
43
+ @keyframes skeletonAnimate {
44
+ from {
45
+ background-position: top left;
46
+ }
47
+ to {
48
+ background-position: top right;
49
+ }
50
+ }
51
+
52
+ @-webkit-keyframes placeholderSkeleton {
53
+ 0% {
54
+ background-position: -468px 0;
55
+ }
56
+ 100% {
57
+ background-position: 468px 0;
58
+ }
59
+ }
60
+
61
+ @-webkit-keyframes skeletonAnimate {
62
+ from {
63
+ background-position: top left;
64
+ }
65
+ to {
66
+ background-position: top right;
67
+ }
68
+ }
69
+
70
+ .skeleton-mt {
71
+ margin-top: 10px;
72
+ }
73
+
74
+ .indicator__card {
75
+ cursor: pointer;
76
+ background: #fff;
77
+ padding: 20px;
78
+ border-radius: 4px;
79
+ border: none;
80
+ text-align: initial;
81
+ color: #1D364B;
82
+ transition: transform 0.25s;
83
+
84
+ &__header {
85
+ display: block;
86
+ align-items: center;
87
+ justify-content: space-between;
88
+ padding: 5px 0;
89
+ }
90
+
91
+ &__content {
92
+ margin-top: 5px;
93
+ &__date {
94
+ font-size: 0.875rem;
95
+ font-weight: 400;
96
+ color: #AEB6BE;
97
+ }
98
+ &__title {
99
+ font-size: 1.275rem;
100
+ color: #1D364B;
101
+ margin-bottom: 0;
102
+ }
103
+ &__id, &__city {
104
+ font-size: 0.875rem;
105
+ font-weight: 600;
106
+ color: #525F7F;
107
+ display: block;
108
+ }
109
+ &__city {
110
+ font-size: 1rem;
111
+ }
112
+ }
113
+ }
114
+ </style>
@@ -50,6 +50,30 @@ export default {
50
50
  <style lang="scss" scoped>
51
51
  @import "@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
52
52
 
53
+ @media (max-width: 1195px) {
54
+ .tab__title {
55
+ white-space: nowrap;
56
+ width: 50px;
57
+ overflow: hidden;
58
+ text-overflow: ellipsis;
59
+ }
60
+ }
61
+
62
+ @media (max-width: 1422px) {
63
+ .tab__title {
64
+ white-space: nowrap;
65
+ width: 50px;
66
+ overflow: hidden;
67
+ text-overflow: ellipsis;
68
+ }
69
+ }
70
+
71
+ @media (max-width: 1215px) {
72
+ .custom__tab {
73
+ padding: .75rem .50rem !important;
74
+ }
75
+ }
76
+
53
77
  .custom__tab {
54
78
  &.tab {
55
79
  position: relative;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@burh/nuxt-core",
3
- "version": "1.0.421",
3
+ "version": "1.0.423",
4
4
  "description": "Design System and Components.",
5
5
  "author": "Burh",
6
6
  "scripts": {