@burh/nuxt-core 1.0.337 → 1.0.339
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.
- package/components/burh-ds/Cards/BaseCard.vue +1 -0
- package/components/burh-ds/Filters/FilterWithDropdown.vue +170 -0
- package/components/burh-ds/Headings/AppHeader.vue +45 -9
- package/components/burh-ds/Modals/SendCourse.vue +8 -2
- package/nuxt.config.js +2 -1
- package/package.json +2 -1
- package/plugins/vClickOutside.js +4 -0
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
v-click-outside="dropDownOutsideClick"
|
|
4
|
+
class="filter__container"
|
|
5
|
+
>
|
|
6
|
+
<button
|
|
7
|
+
class="filter__item"
|
|
8
|
+
:class="{'filter__item--active': (shouldOpenDropdown) ? isDropdownOpen : isActive}"
|
|
9
|
+
@click="handleFilterClick()"
|
|
10
|
+
>
|
|
11
|
+
<div
|
|
12
|
+
v-if="status != ''"
|
|
13
|
+
class="status"
|
|
14
|
+
:class="`status--${status}`"
|
|
15
|
+
></div>
|
|
16
|
+
<p>{{ text }}</p>
|
|
17
|
+
</button>
|
|
18
|
+
|
|
19
|
+
<div
|
|
20
|
+
v-if="isDropdownOpen"
|
|
21
|
+
class="filter__dropdown"
|
|
22
|
+
>
|
|
23
|
+
<div class="filter__dropdown__content">
|
|
24
|
+
<slot name="dropdown-content" />
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<script>
|
|
31
|
+
export default {
|
|
32
|
+
name: 'filter-with-dropdown',
|
|
33
|
+
props: {
|
|
34
|
+
text: {
|
|
35
|
+
type: String,
|
|
36
|
+
default: ''
|
|
37
|
+
},
|
|
38
|
+
isActive: {
|
|
39
|
+
type: Boolean,
|
|
40
|
+
default: false
|
|
41
|
+
},
|
|
42
|
+
shouldOpenDropdown: {
|
|
43
|
+
type: Boolean,
|
|
44
|
+
default: false
|
|
45
|
+
},
|
|
46
|
+
status: {
|
|
47
|
+
type: String,
|
|
48
|
+
default: ''
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
data() {
|
|
52
|
+
return {
|
|
53
|
+
isDropdownOpen: false
|
|
54
|
+
};
|
|
55
|
+
},
|
|
56
|
+
methods: {
|
|
57
|
+
handleFilterClick() {
|
|
58
|
+
if (this.shouldOpenDropdown === true) {
|
|
59
|
+
this.toggleDropdown();
|
|
60
|
+
} else {
|
|
61
|
+
this.$emit('filter-click');
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
toggleDropdown() {
|
|
65
|
+
this.isDropdownOpen = !this.isDropdownOpen;
|
|
66
|
+
},
|
|
67
|
+
dropDownOutsideClick() {
|
|
68
|
+
if (this.isDropdownOpen) {
|
|
69
|
+
this.isDropdownOpen = false;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
};
|
|
74
|
+
</script>
|
|
75
|
+
|
|
76
|
+
<style lang="scss" scoped>
|
|
77
|
+
@keyframes dropdownAnimation {
|
|
78
|
+
from {
|
|
79
|
+
margin-top: -5px;
|
|
80
|
+
opacity: 0;
|
|
81
|
+
}
|
|
82
|
+
to {
|
|
83
|
+
margin-top: 5px;
|
|
84
|
+
opacity: 1;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.filter__container {
|
|
89
|
+
position: relative;
|
|
90
|
+
z-index: 200;
|
|
91
|
+
.filter__dropdown {
|
|
92
|
+
position: absolute;
|
|
93
|
+
width: 98%;
|
|
94
|
+
max-width: 350px;
|
|
95
|
+
min-width: 350px;
|
|
96
|
+
min-height: 200px;
|
|
97
|
+
left: calc(50% + (10px / 2));
|
|
98
|
+
transform: translateX(-50%);
|
|
99
|
+
margin-top: 10px;
|
|
100
|
+
box-shadow: 0 0 20px rgba(0,0,0,0.08);
|
|
101
|
+
border-radius: 4px;
|
|
102
|
+
background: #fff;
|
|
103
|
+
animation: 0.75s dropdownAnimation cubic-bezier(1,0,.09,1.01);
|
|
104
|
+
border: 1px solid #e9ecef;
|
|
105
|
+
&__content {
|
|
106
|
+
padding: 20px;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.filter__item {
|
|
111
|
+
cursor: pointer;
|
|
112
|
+
user-select: none;
|
|
113
|
+
padding: 5px 20px;
|
|
114
|
+
border-radius: 100px;
|
|
115
|
+
margin-right: 10px;
|
|
116
|
+
border: 1px solid #E9ECEF;
|
|
117
|
+
transition: background 0.5s;
|
|
118
|
+
display: flex;
|
|
119
|
+
align-items: center;
|
|
120
|
+
background: transparent;
|
|
121
|
+
&:focus {
|
|
122
|
+
outline: none;
|
|
123
|
+
background: rgba(31, 140, 235, 0.2);
|
|
124
|
+
border-color: transparent;
|
|
125
|
+
p {
|
|
126
|
+
color: #5865F2;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
&:not(.filter__item--active):hover {
|
|
130
|
+
background: rgba(174, 182, 190, 0.2);
|
|
131
|
+
p {
|
|
132
|
+
color: #1D364B;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
p {
|
|
136
|
+
margin: 0;
|
|
137
|
+
font-weight: 400;
|
|
138
|
+
color: #AEB6BE;
|
|
139
|
+
transition: color 0.5s;
|
|
140
|
+
}
|
|
141
|
+
&--active {
|
|
142
|
+
background: rgba(31, 140, 235, 0.2);
|
|
143
|
+
border-color: transparent;
|
|
144
|
+
p {
|
|
145
|
+
color: #5865F2;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
.status {
|
|
149
|
+
width: 10px;
|
|
150
|
+
height: 10px;
|
|
151
|
+
background: #AEB6BE;
|
|
152
|
+
display: block;
|
|
153
|
+
border-radius: 100px;
|
|
154
|
+
margin-right: 10px;
|
|
155
|
+
&--open {
|
|
156
|
+
background: #3AC089;
|
|
157
|
+
}
|
|
158
|
+
&--awaiting {
|
|
159
|
+
background: #FFCF02;
|
|
160
|
+
}
|
|
161
|
+
&--paused {
|
|
162
|
+
background: #FF539D;
|
|
163
|
+
}
|
|
164
|
+
&--ended {
|
|
165
|
+
background: #0C95FC;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
</style>
|
|
@@ -1,14 +1,19 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<base-header class="app-header" :type="'white'">
|
|
3
|
-
<div class="row justify-content-
|
|
3
|
+
<div class="row justify-content-between">
|
|
4
4
|
<div
|
|
5
5
|
:class="{ 'images__container': users.length }"
|
|
6
|
-
class="col-
|
|
6
|
+
class="col-8 my-auto header__container"
|
|
7
7
|
>
|
|
8
8
|
<slot name="header-top" />
|
|
9
9
|
|
|
10
10
|
<div class="header__content">
|
|
11
|
-
<
|
|
11
|
+
<div class="d-flex align-items-center flex-row">
|
|
12
|
+
<button class="back__button" v-if="hasBackButton" @click="backToMainPage()">
|
|
13
|
+
<i class="fas fa-arrow-left"></i>
|
|
14
|
+
</button>
|
|
15
|
+
<h2 class="font-weight-bold display-3">{{name}}</h2>
|
|
16
|
+
</div>
|
|
12
17
|
<div class="images" v-if="users.length">
|
|
13
18
|
<el-tooltip
|
|
14
19
|
v-for="user in users"
|
|
@@ -34,7 +39,7 @@
|
|
|
34
39
|
<slot name="header-bottom" />
|
|
35
40
|
</div>
|
|
36
41
|
|
|
37
|
-
<div class="col-
|
|
42
|
+
<div class="col-4 d-flex justify-content-end align-items-start">
|
|
38
43
|
<el-tooltip v-for="(item, index) in icons" :key="index"
|
|
39
44
|
v-show="!item.disabled"
|
|
40
45
|
class="item" effect="dark" :content="item.title" placement="top">
|
|
@@ -75,9 +80,16 @@ export default {
|
|
|
75
80
|
users: {
|
|
76
81
|
type: Array,
|
|
77
82
|
default: () => []
|
|
83
|
+
},
|
|
84
|
+
hasBackButton: {
|
|
85
|
+
type: Boolean,
|
|
86
|
+
default: false
|
|
78
87
|
}
|
|
79
88
|
},
|
|
80
89
|
methods: {
|
|
90
|
+
backToMainPage() {
|
|
91
|
+
return this.$router.push('/recrutamento');
|
|
92
|
+
},
|
|
81
93
|
getNameInitials(name, last_name) {
|
|
82
94
|
const avatarUrl = process.env.routes.avatar;
|
|
83
95
|
|
|
@@ -123,9 +135,30 @@ export default {
|
|
|
123
135
|
<style lang="scss">
|
|
124
136
|
|
|
125
137
|
.app-header {
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
138
|
+
width: 100%;
|
|
139
|
+
padding-top: 1.25rem;
|
|
140
|
+
box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.back__button {
|
|
144
|
+
cursor: pointer;
|
|
145
|
+
width: 42px;
|
|
146
|
+
height: 42px;
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
justify-content: center;
|
|
150
|
+
margin-right: 10px;
|
|
151
|
+
border-radius: 100px;
|
|
152
|
+
transition: background 0.5s;
|
|
153
|
+
margin-left: -15px;
|
|
154
|
+
border: 0;
|
|
155
|
+
background: transparent;
|
|
156
|
+
&:focus {
|
|
157
|
+
outline: none;
|
|
158
|
+
}
|
|
159
|
+
&:not(:disabled):hover, &:focus:not(:disabled):hover {
|
|
160
|
+
background: rgba(0, 0, 0, 0.08);
|
|
161
|
+
}
|
|
129
162
|
}
|
|
130
163
|
|
|
131
164
|
.header__container {
|
|
@@ -141,7 +174,9 @@ export default {
|
|
|
141
174
|
justify-content: center;
|
|
142
175
|
.header__content {
|
|
143
176
|
display: flex;
|
|
177
|
+
align-items: center;
|
|
144
178
|
flex-direction: row;
|
|
179
|
+
padding: 10px 0;
|
|
145
180
|
h2 {
|
|
146
181
|
margin-bottom: 0;
|
|
147
182
|
}
|
|
@@ -154,19 +189,20 @@ export default {
|
|
|
154
189
|
cursor: pointer;
|
|
155
190
|
border: 2px solid transparent;
|
|
156
191
|
transition: border-color 0.5s;
|
|
192
|
+
border: 2px solid #fff;
|
|
193
|
+
background: #fff;
|
|
157
194
|
&--active {
|
|
158
195
|
border-color: #5865F2;
|
|
159
196
|
z-index: 10;
|
|
160
197
|
}
|
|
161
198
|
}
|
|
162
199
|
img {
|
|
163
|
-
$size:
|
|
200
|
+
$size: 42px;
|
|
164
201
|
display: block;
|
|
165
202
|
width: $size;
|
|
166
203
|
height: $size;
|
|
167
204
|
object-fit: cover;
|
|
168
205
|
border-radius: 100px;
|
|
169
|
-
border: 2px solid #fff;
|
|
170
206
|
&:not(:first-child) {
|
|
171
207
|
margin-left: -10px;
|
|
172
208
|
}
|
|
@@ -64,6 +64,9 @@
|
|
|
64
64
|
|
|
65
65
|
<div tag="div" class="col-3" name="role">
|
|
66
66
|
<el-select
|
|
67
|
+
filterable
|
|
68
|
+
no-match-text="Nenhum cargo encontrado"
|
|
69
|
+
no-data-text="Nenhum cargo encontrado"
|
|
67
70
|
class="select-danger"
|
|
68
71
|
v-model="slot.access_level_id"
|
|
69
72
|
style="height: 50px"
|
|
@@ -95,12 +98,15 @@
|
|
|
95
98
|
<!-- envio em massa -->
|
|
96
99
|
<div v-else style="height:100px">
|
|
97
100
|
<div class="px-4">
|
|
98
|
-
<label for="email">Cargo</label>
|
|
101
|
+
<label for="email">Cargo</label>
|
|
99
102
|
</div>
|
|
100
103
|
<validation-observer ref="sendCourse">
|
|
101
104
|
<div class="row px-4" v-for="(slot, idx) in payload.users" :key="idx">
|
|
102
105
|
<div tag="div" class="col-12" name="role">
|
|
103
106
|
<el-select
|
|
107
|
+
filterable
|
|
108
|
+
no-match-text="Nenhum cargo encontrado"
|
|
109
|
+
no-data-text="Nenhum cargo encontrado"
|
|
104
110
|
class="select-danger"
|
|
105
111
|
multiple
|
|
106
112
|
style="width: 100%;"
|
|
@@ -110,7 +116,7 @@
|
|
|
110
116
|
<el-option
|
|
111
117
|
v-for="role in corporativeRole"
|
|
112
118
|
:key="role.id"
|
|
113
|
-
:label="role.level"
|
|
119
|
+
:label="role.level"
|
|
114
120
|
:value="role.id"
|
|
115
121
|
>
|
|
116
122
|
</el-option>
|
package/nuxt.config.js
CHANGED
|
@@ -104,7 +104,8 @@ module.exports = {
|
|
|
104
104
|
{ src: '~/plugins/auth/auth', mode: 'client' },
|
|
105
105
|
{ src: '~/plugins/qrcode/qrcode', mode: 'client' },
|
|
106
106
|
{ src: '~/plugins/crop/crop', mode: 'client' },
|
|
107
|
-
{ src: '~/plugins/dom/loader', mode: 'client' }
|
|
107
|
+
{ src: '~/plugins/dom/loader', mode: 'client' },
|
|
108
|
+
{ src: '~/plugins/vClickOutside', mode: 'client' }
|
|
108
109
|
//{ src: '~plugins/analytics/ga.js', mode: 'client' }
|
|
109
110
|
],
|
|
110
111
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@burh/nuxt-core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.339",
|
|
4
4
|
"description": "Design System and Components.",
|
|
5
5
|
"author": "Burh",
|
|
6
6
|
"scripts": {
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
"read-env": "^1.3.0",
|
|
66
66
|
"sticky-js": "^1.2.0",
|
|
67
67
|
"sweetalert2": "^8.11.6",
|
|
68
|
+
"v-click-outside": "^3.1.2",
|
|
68
69
|
"v-owl-carousel": "^1.0.8",
|
|
69
70
|
"v-resize": "^0.1.1",
|
|
70
71
|
"vee-validate": "^2.2.8",
|