@burh/nuxt-core 1.0.259 → 1.0.261

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.
@@ -1,207 +1,207 @@
1
- <template>
2
- <nuxt-link :to="`/recrutamento/vaga/${job.id}`" class="recruitment__card">
3
- <article>
4
- <header class="recruitment__card__header">
5
- <div class="recruitment__card__header__status">
6
- <job-status-dropdown
7
- :status="job.status"
8
- @select="handleChangeJobStatus"
9
- />
10
- </div>
11
- <div class="recruitment__card__header__actions">
12
- <el-tooltip placement="top" content="Anotações">
13
- <button
14
- class="action__item"
15
- @click.stop.prevent="$emit('notes-click')"
16
- >
17
- <i class="far fa-comment-alt"></i>
18
- </button>
19
- </el-tooltip>
20
-
21
- <el-tooltip placement="top" content="Compartilhar">
22
- <button
23
- class="action__item"
24
- @click.stop.prevent="$emit('share-click')"
25
- >
26
- <i class="fas fa-share-alt"></i>
27
- </button>
28
- </el-tooltip>
29
- </div>
30
- </header>
31
-
32
- <section class="recruitment__card__content">
33
- <span class="recruitment__card__content__date">Publicada {{fromNow(job.published_at)}}</span>
34
- <h2 class="recruitment__card__content__title">{{ job.title }}</h2>
35
- <span class="recruitment__card__content__id">{{ job.id }}</span>
36
-
37
- <div class="recruitment__card__info">
38
- <p class="recruitment__card__info__text"><span>{{ job.info.applieds }}</span>Inscritos</p>
39
- <p class="recruitment__card__info__text"><span>{{ job.info.positions }}</span>Posição</p>
40
- <p class="recruitment__card__info__text"><span>{{ job.info.hireds }}</span>Contratados</p>
41
- </div>
42
- </section>
43
-
44
- <footer class="recruitment__card__footer">
45
- <p class="recruitment__card__footer__title">EQUIPE RESPONSÁVEL</p>
46
- <div class="recruitment__card__footer__images">
47
- <el-tooltip
48
- v-for="(user, index) in job.team"
49
- :key="index"
50
- placement="top"
51
- :content="user.name"
52
- >
53
- <img
54
- :src="user.image"
55
- :alt="user.name"
56
- >
57
- </el-tooltip>
58
- </div>
59
- </footer>
60
- </article>
61
- </nuxt-link>
62
- </template>
63
-
64
- <script>
65
- import moment from 'moment';
66
- import 'moment/locale/pt-br';
67
-
68
- import JobStatusDropdown from '@burh/nuxt-core/components/burh-ds/Dropdown/JobStatusDropdown.vue';
69
-
70
- export default {
71
- name: 'recruitment-card',
72
- components: {
73
- JobStatusDropdown
74
- },
75
- props: {
76
- job: {
77
- type: Object,
78
- default: () => []
79
- }
80
- },
81
- methods: {
82
- fromNow(date, format = 'YYYYMMDD') {
83
- return moment(date, format).fromNow();
84
- },
85
- handleChangeJobStatus(id) {
86
- this.$emit('select', id);
87
- }
88
- }
89
- };
90
- </script>
91
-
92
- <style lang="scss" scoped>
93
- .recruitment__card {
94
- cursor: pointer;
95
- background: #fff;
96
- box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
97
- padding: 20px;
98
- border-radius: 4px;
99
- border: none;
100
- text-align: initial;
101
- color: #1D364B;
102
- transition: transform 0.25s;
103
- &:focus {
104
- outline: none;
105
- transform: translateY(-5px);
106
- }
107
- &:hover {
108
- transform: translateY(-5px);
109
- }
110
-
111
- &__header {
112
- display: flex;
113
- align-items: center;
114
- justify-content: space-between;
115
- padding: 5px 0;
116
- &__actions {
117
- display: flex;
118
- align-items: center;
119
- .action__item {
120
- cursor: pointer;
121
- width: 42px;
122
- height: 42px;
123
- border-radius: 100px;
124
- transition: background 0.5s;
125
- display: flex;
126
- align-items: center;
127
- justify-content: center;
128
- background: transparent;
129
- border: 0;
130
- position: relative;
131
- &:hover {
132
- background: rgba(0, 0, 0, 0.08);
133
- }
134
- &:focus {
135
- outline: none;
136
- background: rgba(0, 0, 0, 0.08);
137
- }
138
- &:not(:first-child) {
139
- margin-left: 5px;
140
- }
141
- i {
142
- color: #AEB6BE;
143
- }
144
- }
145
- }
146
- }
147
-
148
- &__content {
149
- &__date {
150
- font-size: 0.875rem;
151
- font-weight: 400;
152
- color: #AEB6BE;
153
- }
154
- &__title {
155
- font-size: 1.275rem;
156
- color: #1D364B;
157
- margin-bottom: 0;
158
- }
159
- &__id {
160
- font-size: 0.875rem;
161
- font-weight: 600;
162
- color: #525F7F;
163
- }
164
- }
165
-
166
- &__info {
167
- padding: 20px 0;
168
- &__text {
169
- margin-bottom: 0;
170
- font-size: 1rem;
171
- font-weight: 500;
172
- span {
173
- margin-right: 5px;
174
- color: #1F8CEB;
175
- }
176
- }
177
- }
178
-
179
- &__footer {
180
- border-top: 1px solid #E9E9E9;
181
- padding-top: 10px;
182
- &__title {
183
- color: #525F7F;
184
- font-size: 0.875rem;
185
- font-weight: 600;
186
- margin-bottom: 0;
187
- }
188
- &__images {
189
- display: flex;
190
- align-items: center;
191
- user-select: none;
192
- img {
193
- $size: 32px;
194
- display: block;
195
- width: $size;
196
- height: $size;
197
- object-fit: cover;
198
- border-radius: 100px;
199
- border: 2px solid #fff;
200
- &:not(:first-child) {
201
- margin-left: -10px;
202
- }
203
- }
204
- }
205
- }
206
- }
207
- </style>
1
+ <template>
2
+ <nuxt-link :to="`/recrutamento/vaga/${job.id}`" class="recruitment__card">
3
+ <article>
4
+ <header class="recruitment__card__header">
5
+ <div class="recruitment__card__header__status">
6
+ <job-status-dropdown
7
+ :status="job.status"
8
+ @select="handleChangeJobStatus"
9
+ />
10
+ </div>
11
+ <div class="recruitment__card__header__actions">
12
+ <el-tooltip placement="top" content="Anotações">
13
+ <button
14
+ class="action__item"
15
+ @click.stop.prevent="$emit('notes-click')"
16
+ >
17
+ <i class="far fa-comment-alt"></i>
18
+ </button>
19
+ </el-tooltip>
20
+
21
+ <el-tooltip placement="top" content="Compartilhar">
22
+ <button
23
+ class="action__item"
24
+ @click.stop.prevent="$emit('share-click')"
25
+ >
26
+ <i class="fas fa-share-alt"></i>
27
+ </button>
28
+ </el-tooltip>
29
+ </div>
30
+ </header>
31
+
32
+ <section class="recruitment__card__content">
33
+ <span class="recruitment__card__content__date">Publicada {{fromNow(job.published_at)}}</span>
34
+ <h2 class="recruitment__card__content__title">{{ job.title }}</h2>
35
+ <span class="recruitment__card__content__id">{{ job.id }}</span>
36
+
37
+ <div class="recruitment__card__info">
38
+ <p class="recruitment__card__info__text"><span>{{ job.info.applieds }}</span>Inscritos</p>
39
+ <p class="recruitment__card__info__text"><span>{{ job.info.positions }}</span>Posição</p>
40
+ <p class="recruitment__card__info__text"><span>{{ job.info.hireds }}</span>Contratados</p>
41
+ </div>
42
+ </section>
43
+
44
+ <footer class="recruitment__card__footer">
45
+ <p class="recruitment__card__footer__title">EQUIPE RESPONSÁVEL</p>
46
+ <div class="recruitment__card__footer__images">
47
+ <el-tooltip
48
+ v-for="(user, index) in job.team"
49
+ :key="index"
50
+ placement="top"
51
+ :content="user.name"
52
+ >
53
+ <img
54
+ :src="user.image"
55
+ :alt="user.name"
56
+ >
57
+ </el-tooltip>
58
+ </div>
59
+ </footer>
60
+ </article>
61
+ </nuxt-link>
62
+ </template>
63
+
64
+ <script>
65
+ import moment from 'moment';
66
+ import 'moment/locale/pt-br';
67
+
68
+ import JobStatusDropdown from '@burh/nuxt-core/components/burh-ds/Dropdown/JobStatusDropdown.vue';
69
+
70
+ export default {
71
+ name: 'recruitment-card',
72
+ components: {
73
+ JobStatusDropdown
74
+ },
75
+ props: {
76
+ job: {
77
+ type: Object,
78
+ default: () => []
79
+ }
80
+ },
81
+ methods: {
82
+ fromNow(date, format = 'YYYYMMDD') {
83
+ return moment(date, format).fromNow();
84
+ },
85
+ handleChangeJobStatus(id) {
86
+ this.$emit('select', id);
87
+ }
88
+ }
89
+ };
90
+ </script>
91
+
92
+ <style lang="scss" scoped>
93
+ .recruitment__card {
94
+ cursor: pointer;
95
+ background: #fff;
96
+ box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
97
+ padding: 20px;
98
+ border-radius: 4px;
99
+ border: none;
100
+ text-align: initial;
101
+ color: #1D364B;
102
+ transition: transform 0.25s;
103
+ &:focus {
104
+ outline: none;
105
+ transform: translateY(-5px);
106
+ }
107
+ &:hover {
108
+ transform: translateY(-5px);
109
+ }
110
+
111
+ &__header {
112
+ display: flex;
113
+ align-items: center;
114
+ justify-content: space-between;
115
+ padding: 5px 0;
116
+ &__actions {
117
+ display: flex;
118
+ align-items: center;
119
+ .action__item {
120
+ cursor: pointer;
121
+ width: 42px;
122
+ height: 42px;
123
+ border-radius: 100px;
124
+ transition: background 0.5s;
125
+ display: flex;
126
+ align-items: center;
127
+ justify-content: center;
128
+ background: transparent;
129
+ border: 0;
130
+ position: relative;
131
+ &:hover {
132
+ background: rgba(0, 0, 0, 0.08);
133
+ }
134
+ &:focus {
135
+ outline: none;
136
+ background: rgba(0, 0, 0, 0.08);
137
+ }
138
+ &:not(:first-child) {
139
+ margin-left: 5px;
140
+ }
141
+ i {
142
+ color: #AEB6BE;
143
+ }
144
+ }
145
+ }
146
+ }
147
+
148
+ &__content {
149
+ &__date {
150
+ font-size: 0.875rem;
151
+ font-weight: 400;
152
+ color: #AEB6BE;
153
+ }
154
+ &__title {
155
+ font-size: 1.275rem;
156
+ color: #1D364B;
157
+ margin-bottom: 0;
158
+ }
159
+ &__id {
160
+ font-size: 0.875rem;
161
+ font-weight: 600;
162
+ color: #525F7F;
163
+ }
164
+ }
165
+
166
+ &__info {
167
+ padding: 20px 0;
168
+ &__text {
169
+ margin-bottom: 0;
170
+ font-size: 1rem;
171
+ font-weight: 500;
172
+ span {
173
+ margin-right: 5px;
174
+ color: #1F8CEB;
175
+ }
176
+ }
177
+ }
178
+
179
+ &__footer {
180
+ border-top: 1px solid #E9E9E9;
181
+ padding-top: 10px;
182
+ &__title {
183
+ color: #525F7F;
184
+ font-size: 0.875rem;
185
+ font-weight: 600;
186
+ margin-bottom: 0;
187
+ }
188
+ &__images {
189
+ display: flex;
190
+ align-items: center;
191
+ user-select: none;
192
+ img {
193
+ $size: 32px;
194
+ display: block;
195
+ width: $size;
196
+ height: $size;
197
+ object-fit: cover;
198
+ border-radius: 100px;
199
+ border: 2px solid #fff;
200
+ &:not(:first-child) {
201
+ margin-left: -10px;
202
+ }
203
+ }
204
+ }
205
+ }
206
+ }
207
+ </style>