@burh/nuxt-core 1.0.438 → 1.0.440
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,91 +1,143 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="base__filter">
|
|
3
|
-
<div class="base__filter__content">
|
|
4
|
-
<slot />
|
|
5
|
-
</div>
|
|
6
|
-
|
|
7
|
-
<div v-if="showFooter" class="base__filter__footer">
|
|
8
|
-
<div>
|
|
9
|
-
<button
|
|
10
|
-
@click="$emit('filter-clear')"
|
|
11
|
-
class="base__filter__button clear"
|
|
12
|
-
>
|
|
13
|
-
<span>Limpar</span>
|
|
14
|
-
</button>
|
|
15
|
-
</div>
|
|
16
|
-
<div>
|
|
17
|
-
<button
|
|
18
|
-
@click="$emit('filter-apply')"
|
|
19
|
-
class="base__filter__button apply"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
</
|
|
27
|
-
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
1
|
+
<template>
|
|
2
|
+
<div class="base__filter">
|
|
3
|
+
<div class="base__filter__content">
|
|
4
|
+
<slot />
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div v-if="showFooter" class="base__filter__footer">
|
|
8
|
+
<div>
|
|
9
|
+
<button
|
|
10
|
+
@click="$emit('filter-clear')"
|
|
11
|
+
class="base__filter__button clear"
|
|
12
|
+
>
|
|
13
|
+
<span>Limpar</span>
|
|
14
|
+
</button>
|
|
15
|
+
</div>
|
|
16
|
+
<div>
|
|
17
|
+
<button
|
|
18
|
+
@click="!isLocked ? $emit('filter-apply') : $emit('open-plan-modal')"
|
|
19
|
+
class="base__filter__button apply"
|
|
20
|
+
:class="{ 'disabled': isLocked }"
|
|
21
|
+
>
|
|
22
|
+
<template v-if="isLocked">
|
|
23
|
+
<span class="mr-1 custom__icon">
|
|
24
|
+
<i class="fas fa-lock lock"></i>
|
|
25
|
+
<i class="fas fa-rocket rocket"></i>
|
|
26
|
+
</span>
|
|
27
|
+
</template>
|
|
28
|
+
<span>Filtrar</span>
|
|
29
|
+
</button>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</template>
|
|
34
|
+
|
|
35
|
+
<script>
|
|
36
|
+
export default {
|
|
37
|
+
name: 'base-filter-container',
|
|
38
|
+
props: {
|
|
39
|
+
showFooter: {
|
|
40
|
+
type: Boolean,
|
|
41
|
+
default: true
|
|
42
|
+
},
|
|
43
|
+
isLocked: {
|
|
44
|
+
type: Boolean,
|
|
45
|
+
default: false
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<style lang="scss" scoped>
|
|
52
|
+
@keyframes fadeInDown {
|
|
53
|
+
from {
|
|
54
|
+
opacity: 0;
|
|
55
|
+
transform: translateY(-20px);
|
|
56
|
+
}
|
|
57
|
+
to {
|
|
58
|
+
opacity: 1;
|
|
59
|
+
transform: translateY(0);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.base__filter {
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
justify-content: space-between;
|
|
67
|
+
max-height: 350px;
|
|
68
|
+
&__content {
|
|
69
|
+
max-height: calc(350px - 44px);
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
overflow-y: auto;
|
|
72
|
+
&::-webkit-scrollbar-track {
|
|
73
|
+
border-radius: 10px;
|
|
74
|
+
background-color: #f5f5f5;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&::-webkit-scrollbar {
|
|
78
|
+
width: 4px;
|
|
79
|
+
background-color: #f5f5f5;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&::-webkit-scrollbar-thumb {
|
|
83
|
+
border-radius: 10px;
|
|
84
|
+
background-color: #e9e8e8;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
&__footer {
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
justify-content: space-between;
|
|
91
|
+
margin-top: 20px;
|
|
92
|
+
.base__filter__button {
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
background: transparent;
|
|
95
|
+
border: none;
|
|
96
|
+
color: #32325d;
|
|
97
|
+
padding: 10px 20px;
|
|
98
|
+
border-radius: 4px;
|
|
99
|
+
transition: background 0.5s, color 0.5s;
|
|
100
|
+
&:focus {
|
|
101
|
+
outline: none;
|
|
102
|
+
}
|
|
103
|
+
&.clear:hover {
|
|
104
|
+
background: rgba(222, 33, 75, 0.1);
|
|
105
|
+
color: #de214b;
|
|
106
|
+
}
|
|
107
|
+
&.apply:hover {
|
|
108
|
+
background: rgba(88, 101, 242, 0.1);
|
|
109
|
+
color: #5865F2;
|
|
110
|
+
}
|
|
111
|
+
&.disabled {
|
|
112
|
+
background: #e9e9e9;
|
|
113
|
+
display: flex;
|
|
114
|
+
.custom__icon {
|
|
115
|
+
width: 24px;
|
|
116
|
+
height: 24px;
|
|
117
|
+
overflow: hidden;
|
|
118
|
+
i {
|
|
119
|
+
padding: 5px;
|
|
120
|
+
}
|
|
121
|
+
.lock {
|
|
122
|
+
animation: fadeInDown 0.5s;
|
|
123
|
+
}
|
|
124
|
+
.rocket {
|
|
125
|
+
display: none;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
&:hover {
|
|
129
|
+
.custom__icon {
|
|
130
|
+
.lock {
|
|
131
|
+
display: none;
|
|
132
|
+
}
|
|
133
|
+
.rocket {
|
|
134
|
+
display: block;
|
|
135
|
+
animation: fadeInDown 0.5s;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
</style>
|
|
@@ -227,5 +227,17 @@ export default {
|
|
|
227
227
|
margin: 20px 0;
|
|
228
228
|
border-radius: 4px;
|
|
229
229
|
user-select: none;
|
|
230
|
+
position: relative;
|
|
231
|
+
overflow: hidden;
|
|
232
|
+
|
|
233
|
+
&::before {
|
|
234
|
+
content: '';
|
|
235
|
+
position: absolute;
|
|
236
|
+
bottom: 0;
|
|
237
|
+
left: 0;
|
|
238
|
+
width: 100%;
|
|
239
|
+
height: 40px;
|
|
240
|
+
background: linear-gradient(180deg, rgba(#ffffff, 0.2), rgba(#ffffff, 0.9));
|
|
241
|
+
}
|
|
230
242
|
}
|
|
231
243
|
</style>
|