@burh/nuxt-core 1.0.261 → 1.0.263

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 (6) hide show
  1. package/components/burh-ds/Cards/RecruitmentCard.vue +12 -5
  2. package/components/burh-ds/Headings/AppHeader.vue +33 -9
  3. package/components/burh-ds/Modals/SendDisc.vue +159 -153
  4. package/components/burh-ds/Modals/SendTest.vue +3 -3
  5. package/components/burh-ds/Skeleton/RecruitmentCard.vue +194 -0
  6. package/package.json +1 -1
package/components/burh-ds/Cards/RecruitmentCard.vue CHANGED
@@ -31,7 +31,10 @@
31
31
 
32
32
  <section class="recruitment__card__content">
33
33
  <span class="recruitment__card__content__date">Publicada {{fromNow(job.published_at)}}</span>
34
- <h2 class="recruitment__card__content__title">{{ job.title }}</h2>
34
+ <h2 class="recruitment__card__content__title">
35
+ {{ job.title }}
36
+ <i v-if="job.handicapped" class="fas fa-wheelchair pcd"></i>
37
+ </h2>
35
38
  <span class="recruitment__card__content__id">{{ job.id }}</span>
36
39
 
37
40
  <div class="recruitment__card__info">
@@ -45,13 +48,13 @@
45
48
  <p class="recruitment__card__footer__title">EQUIPE RESPONSÁVEL</p>
46
49
  <div class="recruitment__card__footer__images">
47
50
  <el-tooltip
48
- v-for="(user, index) in job.team"
49
- :key="index"
51
+ v-for="user in job.team"
52
+ :key="user.id"
50
53
  placement="top"
51
54
  :content="user.name"
52
55
  >
53
56
  <img
54
- :src="user.image"
57
+ :src="user.avatar"
55
58
  :alt="user.name"
56
59
  >
57
60
  </el-tooltip>
@@ -128,7 +131,7 @@ export default {
128
131
  background: transparent;
129
132
  border: 0;
130
133
  position: relative;
131
- &:hover {
134
+ &:not(:disabled):hover {
132
135
  background: rgba(0, 0, 0, 0.08);
133
136
  }
134
137
  &:focus {
@@ -155,6 +158,10 @@ export default {
155
158
  font-size: 1.275rem;
156
159
  color: #1D364B;
157
160
  margin-bottom: 0;
161
+ .pcd {
162
+ color: #1F8CEB;
163
+ margin-left: 5px;
164
+ }
158
165
  }
159
166
  &__id {
160
167
  font-size: 0.875rem;
package/components/burh-ds/Headings/AppHeader.vue CHANGED
@@ -2,23 +2,26 @@
2
2
  <base-header class="app-header" :type="'white'">
3
3
  <div class="row justify-content-center">
4
4
  <div
5
- :class="{ 'images__container': images.length }"
5
+ :class="{ 'images__container': users.length }"
6
6
  class="col-6 my-auto header__container"
7
7
  >
8
8
  <slot name="header-top" />
9
9
 
10
10
  <div class="header__content">
11
11
  <h2 class="font-weight-bold display-3">{{name}}</h2>
12
- <div class="images" v-if="images.length">
12
+ <div class="images" v-if="users.length">
13
13
  <el-tooltip
14
- v-for="(image, index) in images"
15
- :key="index"
14
+ v-for="user in users"
15
+ :key="user.id"
16
16
  placement="top"
17
- :content="image.name"
17
+ :content="user.name"
18
+ class="user__avatar"
19
+ :class="{ 'user__avatar--active': activeUserId === user.id }"
18
20
  >
19
21
  <img
20
- :src="image.src"
21
- :alt="image.name"
22
+ @click="setActiveUser(user.id)"
23
+ :src="user.avatar"
24
+ :alt="user.name"
22
25
  >
23
26
  </el-tooltip>
24
27
  </div>
@@ -52,7 +55,8 @@
52
55
  export default {
53
56
  data(){
54
57
  return{
55
- default: ''
58
+ default: '',
59
+ activeUserId: null
56
60
  };
57
61
  },
58
62
  props:{
@@ -68,11 +72,22 @@ export default {
68
72
  type: Number,
69
73
  default: null
70
74
  },
71
- images: {
75
+ users: {
72
76
  type: Array,
73
77
  default: () => []
74
78
  }
75
79
  },
80
+ methods: {
81
+ setActiveUser(userId) {
82
+ if (this.activeUserId !== userId) {
83
+ this.activeUserId = userId;
84
+ this.$emit('active-user', userId);
85
+ } else {
86
+ this.activeUserId = null;
87
+ this.$emit('active-user', null);
88
+ }
89
+ }
90
+ }
76
91
  };
77
92
  </script>
78
93
  <style lang="scss" scoped>
@@ -120,6 +135,15 @@ export default {
120
135
  display: flex;
121
136
  align-items: center;
122
137
  user-select: none;
138
+ .user__avatar {
139
+ cursor: pointer;
140
+ border: 2px solid transparent;
141
+ transition: border-color 0.5s;
142
+ &--active {
143
+ border-color: #1da1f1;
144
+ z-index: 10;
145
+ }
146
+ }
123
147
  img {
124
148
  $size: 32px;
125
149
  display: block;
package/components/burh-ds/Modals/SendDisc.vue CHANGED
@@ -1,162 +1,168 @@
1
1
  <template>
2
- <modal
3
- :show.sync="openModal"
4
- v-on:close="closeModal"
5
- size="lg"
6
- class="modal"
7
- >
8
- <template slot="header">
9
- <h2 class="display-4 py-2 px-1">
10
- Enviar Passaporte
11
- </h2>
12
- </template>
13
- <div class="row p-2 px-4">
14
- <div class="col-6">
15
- <label for="name">Nome Completo</label>
16
- </div>
17
- <div class="col-6">
18
- <label for="email">E-mail</label>
19
- </div>
20
- </div>
21
- <validation-observer ref="sendCourse">
22
- <div class="row px-4" v-for="(slot, idx) in slots" :key="idx">
23
- <validation-provider
24
- tag="div"
25
- class="col-6"
26
- :vid="`send-name-${idx}`"
27
- name="Nome"
28
- rules="required|regex:\w+\s+\w+"
29
- v-slot="{ errors }"
30
- >
31
- <base-input
32
- v-model="slot.name"
33
- :error="errors[0]"
34
- :valid="errors.length ? true : false"
35
- />
36
- </validation-provider>
37
-
38
- <validation-provider
39
- tag="div"
40
- class="col-5"
41
- :vid="`send-email-${idx}`"
42
- name="Email"
43
- rules="required|email"
44
- v-slot="{ errors }"
45
- >
46
- <base-input
47
- v-model="slot.email"
48
- :error="errors[0]"
49
- :valid="errors.length ? true : false"
50
- />
51
- </validation-provider>
52
-
53
- <div class="col-1 py-2">
54
- <i
55
- v-if="idx !== slots.length - 1"
56
- class="fa fa-trash pointer"
57
- @click="removeSlot(idx)"
58
- ></i>
59
- <i v-else class="fa fa-plus pointer" @click="addSlot"></i>
60
- </div>
61
- </div>
62
- </validation-observer>
63
-
64
- <base-button class="mr-5 float-right" type="primary" @click="sendTest">
65
- Enviar
66
- </base-button>
67
-
68
- <div id="credits-amount" class="ml-3 float-left">
69
- {{ creditsAmount }} Créditos disponíveis
70
- </div>
71
- </modal>
2
+ <modal
3
+ :show.sync="openModal"
4
+ v-on:close="closeModal"
5
+ size="lg"
6
+ class="modal"
7
+ >
8
+ <basics :isLoading="loading" v-if="loading"/>
9
+ <template slot="header">
10
+ <h2 class="display-4 py-2 px-1">
11
+ Enviar Passaporte
12
+ </h2>
13
+ </template>
14
+ <div class="row p-2 px-4">
15
+ <div class="col-6">
16
+ <label for="name">Nome Completo</label>
17
+ </div>
18
+ <div class="col-6">
19
+ <label for="email">E-mail</label>
20
+ </div>
21
+ </div>
22
+ <validation-observer ref="sendCourse">
23
+ <div class="row px-4" v-for="(slot, idx) in slots" :key="idx">
24
+ <validation-provider
25
+ tag="div"
26
+ class="col-6"
27
+ :vid="`send-name-${idx}`"
28
+ name="Nome"
29
+ rules="required|regex:\w+\s+\w+"
30
+ v-slot="{ errors }"
31
+ >
32
+ <base-input
33
+ v-model="slot.name"
34
+ :error="errors[0]"
35
+ :valid="errors.length ? true : false"
36
+ />
37
+ </validation-provider>
38
+
39
+ <validation-provider
40
+ tag="div"
41
+ class="col-5"
42
+ :vid="`send-email-${idx}`"
43
+ name="Email"
44
+ rules="required|email"
45
+ v-slot="{ errors }"
46
+ >
47
+ <base-input
48
+ v-model="slot.email"
49
+ :error="errors[0]"
50
+ :valid="errors.length ? true : false"
51
+ />
52
+ </validation-provider>
53
+
54
+ <div class="col-1 py-2">
55
+ <i
56
+ v-if="idx !== slots.length - 1"
57
+ class="fa fa-trash pointer"
58
+ @click="removeSlot(idx)"
59
+ ></i>
60
+ <i v-else class="fa fa-plus pointer" @click="addSlot"></i>
61
+ </div>
62
+ </div>
63
+ </validation-observer>
64
+
65
+ <base-button class="mr-5 float-right" type="primary" @click="sendTest">
66
+ Enviar
67
+ </base-button>
68
+
69
+ <div id="credits-amount" class="ml-3 float-left">
70
+ {{ creditsAmount }} Créditos disponíveis
71
+ </div>
72
+ </modal>
72
73
  </template>
73
74
 
74
75
  <script>
75
- import { Select, Option } from "element-ui";
76
+ import { Select, Option } from 'element-ui';
77
+ import Basics from '../Loadings/Basics';
76
78
 
77
79
  export default {
78
- name: "send-course",
79
- components: {
80
- [Select.name]: Select,
81
- [Option.name]: Option
82
- },
83
- props: {
84
- show: {
85
- type: Boolean,
86
- default: false
87
- },
88
- selectedCourse: Number,
89
- corporativeRole: null,
90
- courses: Array,
91
- reportType: null,
92
- creditsAmount: Number
93
- },
94
- model: {
95
- prop: "show"
96
- },
97
- computed: {
98
- openModal: {
99
- get() {
100
- return this.show;
101
- },
102
- set(show) {
103
- this.$emit("input", show);
104
- }
105
- }
106
- },
107
- methods: {
108
- closeModal(e) {
109
- this.$emit("close-modal", e);
110
- },
111
-
112
- removeSlot(idx) {
113
- this.slots = this.slots.filter((slot, index) => index !== idx);
114
- },
115
-
116
- addSlot() {
117
- const newSlot = {
118
- name: "",
119
- email: ""
120
- };
121
-
122
- this.slots = [...this.slots, newSlot];
123
- },
124
-
125
- resetSlots() {
126
- this.slots = [
127
- {
128
- name: "",
129
- email: ""
130
- }
131
- ];
132
- },
133
- sendTest() {
134
- this.$emit("submit", this.slots);
135
-
136
- this.resetSlots();
137
-
138
- requestAnimationFrame(() => {
139
- this.$refs.sendCourse.reset();
140
- });
141
-
142
- this.closeModal();
143
- }
144
- },
145
- watch: {
146
- show(newValue) {
147
- this.show = newValue;
148
- }
149
- },
150
- data() {
151
- return {
152
- slots: [
153
- {
154
- name: "",
155
- email: ""
156
- }
157
- ]
158
- };
159
- }
80
+ name: 'send-course',
81
+ components: {
82
+ [Select.name]: Select,
83
+ [Option.name]: Option,
84
+ Basics,
85
+ },
86
+ props: {
87
+ show: {
88
+ type: Boolean,
89
+ default: false
90
+ },
91
+ selectedCourse: Number,
92
+ corporativeRole: null,
93
+ courses: Array,
94
+ reportType: null,
95
+ creditsAmount: Number
96
+ },
97
+ model: {
98
+ prop: 'show'
99
+ },
100
+ computed: {
101
+ openModal: {
102
+ get() {
103
+ return this.show;
104
+ },
105
+ set(show) {
106
+ this.$emit('input', show);
107
+ }
108
+ }
109
+ },
110
+ methods: {
111
+ closeModal(e) {
112
+ this.$emit('close-modal', e);
113
+ },
114
+
115
+ removeSlot(idx) {
116
+ this.slots = this.slots.filter((slot, index) => index !== idx);
117
+ },
118
+
119
+ addSlot() {
120
+ const newSlot = {
121
+ name: '',
122
+ email: ''
123
+ };
124
+
125
+ this.slots = [...this.slots, newSlot];
126
+ },
127
+
128
+ resetSlots() {
129
+ this.slots = [
130
+ {
131
+ name: '',
132
+ email: ''
133
+ }
134
+ ];
135
+ },
136
+ sendTest() {
137
+ this.loading = true;
138
+ setTimeout(() => {
139
+
140
+ this.$emit('submit', this.slots);
141
+ this.resetSlots();
142
+ requestAnimationFrame(() => {
143
+ this.$refs.sendCourse.reset();
144
+ });
145
+ this.closeModal();
146
+ this.loading = false;
147
+ }, 2000);
148
+ }
149
+ },
150
+ watch: {
151
+ show(newValue) {
152
+ this.show = newValue;
153
+ }
154
+ },
155
+ data() {
156
+ return {
157
+ loading: false,
158
+ slots: [
159
+ {
160
+ name: '',
161
+ email: ''
162
+ }
163
+ ]
164
+ };
165
+ }
160
166
  };
161
167
  </script>
162
168
  <style lang="scss" scoped>
package/components/burh-ds/Modals/SendTest.vue CHANGED
@@ -8,7 +8,7 @@
8
8
  <basics :isLoading="loading" v-if="loading"/>
9
9
  <template>
10
10
  <div class="ml-5 mr-5">
11
- <basics :isLoading="loading" v-if="loading"/>
11
+ <basics :isLoading="loading" v-if="loading"/>
12
12
 
13
13
  <div class="row send send-test mx-0">
14
14
  <h5>Insira o e-mail que deseja enviar o teste</h5>
@@ -214,8 +214,8 @@ export default {
214
214
  setTimeout(() => {
215
215
  this.$emit('send-test', testRequest);
216
216
  this.$emit('closemodal');
217
- this.loading = false
218
- }, 2000 )
217
+ this.loading = false;
218
+ }, 2000 );
219
219
  },
220
220
  categoryIsAllowedToSend(categoryId) {
221
221
  const categoryIsAllowToSend = Object.values(
package/components/burh-ds/Skeleton/RecruitmentCard.vue ADDED
@@ -0,0 +1,194 @@
1
+ <template>
2
+ <div class="recruitment__card">
3
+ <div>
4
+ <div class="recruitment__card__header">
5
+ <div class="recruitment__card__header__status">
6
+ <div class="skeleton--animate select"></div>
7
+ </div>
8
+ </div>
9
+
10
+ <div class="recruitment__card__content">
11
+ <span class="recruitment__card__content__date">
12
+ <div class="skeleton--animate date"></div>
13
+ </span>
14
+ <h2 class="recruitment__card__content__title">
15
+ <div class="skeleton--animate title"></div>
16
+ </h2>
17
+ <span class="recruitment__card__content__id">
18
+ <div class="skeleton--animate id"></div>
19
+ </span>
20
+
21
+ <div class="recruitment__card__info">
22
+ <p class="recruitment__card__info__text">
23
+ <div class="skeleton--animate number"></div>
24
+ </p>
25
+ <p class="recruitment__card__info__text">
26
+ <div class="skeleton--animate number"></div>
27
+ </p>
28
+ <p class="recruitment__card__info__text">
29
+ <div class="skeleton--animate number"></div>
30
+ </p>
31
+ </div>
32
+ </div>
33
+
34
+ <div class="recruitment__card__footer">
35
+ <p class="recruitment__card__footer__title">EQUIPE RESPONSÁVEL</p>
36
+ <div class="recruitment__card__footer__images">
37
+ <div class="skeleton--animate img"></div>
38
+ </div>
39
+ </div>
40
+ </div>
41
+ </div>
42
+ </template>
43
+
44
+ <script>
45
+ export default {
46
+ name: 'recruitment-card-skeleton'
47
+ };
48
+ </script>
49
+
50
+ <style lang="scss" scoped>
51
+ @-webkit-keyframes placeholderSkeleton {
52
+ 0% {
53
+ background-position: -468px 0;
54
+ }
55
+ 100% {
56
+ background-position: 468px 0;
57
+ }
58
+ }
59
+
60
+ @-webkit-keyframes skeletonAnimate {
61
+ from {
62
+ background-position: top left;
63
+ }
64
+ to {
65
+ background-position: top right;
66
+ }
67
+ }
68
+
69
+ .select {
70
+ display: block;
71
+ width: 100px;
72
+ height: 20px;
73
+ margin-top: 10px;
74
+ }
75
+ .date {
76
+ display: block;
77
+ width: 150px;
78
+ height: 10px;
79
+ margin-top: 10px;
80
+ }
81
+ .title {
82
+ display: block;
83
+ width: 250px;
84
+ height: 20px;
85
+ margin-top: 10px;
86
+ }
87
+ .id {
88
+ display: block;
89
+ width: 110px;
90
+ height: 15px;
91
+ margin-top: 10px;
92
+ }
93
+ .number {
94
+ display: block;
95
+ width: 120px;
96
+ height: 15px;
97
+ }
98
+ .img {
99
+ display: block;
100
+ width: 32px;
101
+ height: 32px;
102
+ border-radius: 100px;
103
+ margin-top: 10px;
104
+ }
105
+
106
+ .skeleton--animate {
107
+ -webkit-animation-duration: 1s;
108
+ -webkit-animation-fill-mode: forwards;
109
+ -webkit-animation-iteration-count: infinite;
110
+ -webkit-animation-name: placeholderSkeleton;
111
+ -webkit-animation-timing-function: linear;
112
+ background: #e0e3e6;
113
+ background-image: -webkit-gradient(
114
+ linear,
115
+ left center,
116
+ right center,
117
+ from(#e0e3e6),
118
+ color-stop(0.2, #edeef1),
119
+ color-stop(0.4, #e0e3e6),
120
+ to(#e0e3e6)
121
+ );
122
+ background-image: -webkit-linear-gradient(
123
+ left,
124
+ #e0e3e6 0%,
125
+ #edeef1 20%,
126
+ #e0e3e6 40%,
127
+ #e0e3e6 100%
128
+ );
129
+ background-repeat: no-repeat;
130
+ background-size: 800px 104px;
131
+ }
132
+
133
+ .recruitment__card {
134
+ cursor: pointer;
135
+ background: #fff;
136
+ box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
137
+ padding: 20px;
138
+ border-radius: 4px;
139
+ border: none;
140
+ text-align: initial;
141
+ color: #1D364B;
142
+ transition: transform 0.25s;
143
+
144
+ &__header {
145
+ display: flex;
146
+ align-items: center;
147
+ justify-content: space-between;
148
+ padding: 5px 0;
149
+ }
150
+
151
+ &__content {
152
+ &__date {
153
+ font-size: 0.875rem;
154
+ font-weight: 400;
155
+ color: #AEB6BE;
156
+ }
157
+ &__title {
158
+ font-size: 1.275rem;
159
+ color: #1D364B;
160
+ margin-bottom: 0;
161
+ }
162
+ &__id {
163
+ font-size: 0.875rem;
164
+ font-weight: 600;
165
+ color: #525F7F;
166
+ }
167
+ }
168
+
169
+ &__info {
170
+ padding: 20px 0;
171
+ &__text {
172
+ margin-bottom: 0;
173
+ font-size: 1rem;
174
+ font-weight: 500;
175
+ }
176
+ }
177
+
178
+ &__footer {
179
+ border-top: 1px solid #E9E9E9;
180
+ padding-top: 10px;
181
+ &__title {
182
+ color: #525F7F;
183
+ font-size: 0.875rem;
184
+ font-weight: 600;
185
+ margin-bottom: 0;
186
+ }
187
+ &__images {
188
+ display: flex;
189
+ align-items: center;
190
+ user-select: none;
191
+ }
192
+ }
193
+ }
194
+ </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@burh/nuxt-core",
3
- "version": "1.0.261",
3
+ "version": "1.0.263",
4
4
  "description": "Design System and Components.",
5
5
  "author": "Burh",
6
6
  "scripts": {