@burh/nuxt-core 1.0.466 → 1.0.467
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/argon-core/Modal.vue +183 -183
- package/package.json +1 -1
|
@@ -1,183 +1,183 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<SlideYUpTransition :duration="animationDuration">
|
|
3
|
-
<div
|
|
4
|
-
class="modal fade"
|
|
5
|
-
@mousedown.self="closeModal"
|
|
6
|
-
:class="[
|
|
7
|
-
{ 'show d-block': show },
|
|
8
|
-
{ 'd-none': !show },
|
|
9
|
-
{ 'modal-mini': type === 'mini' }
|
|
10
|
-
]"
|
|
11
|
-
v-show="show"
|
|
12
|
-
tabindex="-1"
|
|
13
|
-
role="dialog"
|
|
14
|
-
:aria-hidden="!show"
|
|
15
|
-
>
|
|
16
|
-
<div
|
|
17
|
-
class="modal-dialog modal-dialog-centered"
|
|
18
|
-
:class="[
|
|
19
|
-
{
|
|
20
|
-
'modal-notice': type === 'notice',
|
|
21
|
-
[`modal-${size}`]: size
|
|
22
|
-
},
|
|
23
|
-
modalClasses
|
|
24
|
-
]"
|
|
25
|
-
>
|
|
26
|
-
<div
|
|
27
|
-
class="modal-content"
|
|
28
|
-
:class="[
|
|
29
|
-
gradient ? `bg-gradient-${gradient}` : '',
|
|
30
|
-
modalContentClasses
|
|
31
|
-
]"
|
|
32
|
-
>
|
|
33
|
-
<div
|
|
34
|
-
class="modal-header"
|
|
35
|
-
:class="[headerClasses]"
|
|
36
|
-
v-if="$slots.header"
|
|
37
|
-
>
|
|
38
|
-
<slot name="header"></slot>
|
|
39
|
-
<slot name="close-button">
|
|
40
|
-
<button
|
|
41
|
-
class="tool tool-close"
|
|
42
|
-
v-if="showClose"
|
|
43
|
-
@click="closeModal"
|
|
44
|
-
data-dismiss="modal"
|
|
45
|
-
aria-label="Close"
|
|
46
|
-
>
|
|
47
|
-
Fechar
|
|
48
|
-
<font-awesome-icon
|
|
49
|
-
:icon="['fas', 'times']"
|
|
50
|
-
class="text-white ml-1"
|
|
51
|
-
/>
|
|
52
|
-
</button>
|
|
53
|
-
</slot>
|
|
54
|
-
</div>
|
|
55
|
-
|
|
56
|
-
<div class="modal-body" :class="bodyClasses">
|
|
57
|
-
<slot></slot>
|
|
58
|
-
</div>
|
|
59
|
-
|
|
60
|
-
<div
|
|
61
|
-
class="modal-footer"
|
|
62
|
-
:class="footerClasses"
|
|
63
|
-
v-if="$slots.footer"
|
|
64
|
-
>
|
|
65
|
-
<slot name="footer"></slot>
|
|
66
|
-
</div>
|
|
67
|
-
</div>
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
</SlideYUpTransition>
|
|
71
|
-
</template>
|
|
72
|
-
<script>
|
|
73
|
-
import { SlideYUpTransition } from 'vue2-transitions';
|
|
74
|
-
|
|
75
|
-
export default {
|
|
76
|
-
name: 'modal',
|
|
77
|
-
components: {
|
|
78
|
-
SlideYUpTransition
|
|
79
|
-
},
|
|
80
|
-
props: {
|
|
81
|
-
show: Boolean,
|
|
82
|
-
showClose: {
|
|
83
|
-
type: Boolean,
|
|
84
|
-
default: true
|
|
85
|
-
},
|
|
86
|
-
type: {
|
|
87
|
-
type: String,
|
|
88
|
-
default: '',
|
|
89
|
-
validator(value) {
|
|
90
|
-
let acceptedValues = ['', 'notice', 'mini'];
|
|
91
|
-
return acceptedValues.indexOf(value) !== -1;
|
|
92
|
-
},
|
|
93
|
-
description: 'Modal type (notice|mini|"") '
|
|
94
|
-
},
|
|
95
|
-
modalClasses: {
|
|
96
|
-
type: [Object, String],
|
|
97
|
-
description: 'Modal dialog css classes'
|
|
98
|
-
},
|
|
99
|
-
size: {
|
|
100
|
-
type: String,
|
|
101
|
-
description: 'Modal size',
|
|
102
|
-
validator(value) {
|
|
103
|
-
let acceptedValues = ['', 'sm', 'lg', 'xl'];
|
|
104
|
-
return acceptedValues.indexOf(value) !== -1;
|
|
105
|
-
}
|
|
106
|
-
},
|
|
107
|
-
modalContentClasses: {
|
|
108
|
-
type: [Object, String],
|
|
109
|
-
description: 'Modal dialog content css classes'
|
|
110
|
-
},
|
|
111
|
-
gradient: {
|
|
112
|
-
type: String,
|
|
113
|
-
description: 'Modal gradient type (danger, primary etc)'
|
|
114
|
-
},
|
|
115
|
-
headerClasses: {
|
|
116
|
-
type: [Object, String],
|
|
117
|
-
description: 'Modal Header css classes'
|
|
118
|
-
},
|
|
119
|
-
bodyClasses: {
|
|
120
|
-
type: [Object, String],
|
|
121
|
-
description: 'Modal Body css classes'
|
|
122
|
-
},
|
|
123
|
-
footerClasses: {
|
|
124
|
-
type: [Object, String],
|
|
125
|
-
description: 'Modal Footer css classes'
|
|
126
|
-
},
|
|
127
|
-
animationDuration: {
|
|
128
|
-
type: Number,
|
|
129
|
-
default: 500,
|
|
130
|
-
description: 'Modal transition duration'
|
|
131
|
-
}
|
|
132
|
-
},
|
|
133
|
-
methods: {
|
|
134
|
-
closeModal() {
|
|
135
|
-
this.$emit('update:show', false);
|
|
136
|
-
this.$emit('close');
|
|
137
|
-
}
|
|
138
|
-
},
|
|
139
|
-
watch: {
|
|
140
|
-
show(val) {
|
|
141
|
-
let documentClasses = document.body.classList;
|
|
142
|
-
if (val) {
|
|
143
|
-
documentClasses.add('modal-open');
|
|
144
|
-
} else {
|
|
145
|
-
documentClasses.remove('modal-open');
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
};
|
|
150
|
-
</script>
|
|
151
|
-
<style lang="scss">
|
|
152
|
-
@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
|
|
153
|
-
.modal.show {
|
|
154
|
-
background-color: rgba(23,43,77, 0.7);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.tool {
|
|
158
|
-
position: absolute;
|
|
159
|
-
top: 1rem;
|
|
160
|
-
z-index: 10;
|
|
161
|
-
color: $primary;
|
|
162
|
-
cursor: pointer;
|
|
163
|
-
border: none;
|
|
164
|
-
|
|
165
|
-
&-close {
|
|
166
|
-
position: absolute;
|
|
167
|
-
width: 88px;
|
|
168
|
-
height: 27px;
|
|
169
|
-
right: 7px;
|
|
170
|
-
top: 7px;
|
|
171
|
-
display: flex;
|
|
172
|
-
justify-content: center;
|
|
173
|
-
align-items: center;
|
|
174
|
-
|
|
175
|
-
font-size: 11px;
|
|
176
|
-
|
|
177
|
-
font-weight: 500;
|
|
178
|
-
background: rgba(0, 0, 0, 0.2);
|
|
179
|
-
border-radius: 17.5px;
|
|
180
|
-
color: #fff;
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<SlideYUpTransition :duration="animationDuration">
|
|
3
|
+
<div
|
|
4
|
+
class="modal fade"
|
|
5
|
+
@mousedown.self="closeModal"
|
|
6
|
+
:class="[
|
|
7
|
+
{ 'show d-block': show },
|
|
8
|
+
{ 'd-none': !show },
|
|
9
|
+
{ 'modal-mini': type === 'mini' }
|
|
10
|
+
]"
|
|
11
|
+
v-show="show"
|
|
12
|
+
tabindex="-1"
|
|
13
|
+
role="dialog"
|
|
14
|
+
:aria-hidden="!show"
|
|
15
|
+
>
|
|
16
|
+
<div
|
|
17
|
+
class="modal-dialog modal-dialog-centered"
|
|
18
|
+
:class="[
|
|
19
|
+
{
|
|
20
|
+
'modal-notice': type === 'notice',
|
|
21
|
+
[`modal-${size}`]: size
|
|
22
|
+
},
|
|
23
|
+
modalClasses
|
|
24
|
+
]"
|
|
25
|
+
>
|
|
26
|
+
<div
|
|
27
|
+
class="modal-content"
|
|
28
|
+
:class="[
|
|
29
|
+
gradient ? `bg-gradient-${gradient}` : '',
|
|
30
|
+
modalContentClasses
|
|
31
|
+
]"
|
|
32
|
+
>
|
|
33
|
+
<div
|
|
34
|
+
class="modal-header"
|
|
35
|
+
:class="[headerClasses]"
|
|
36
|
+
v-if="$slots.header"
|
|
37
|
+
>
|
|
38
|
+
<slot name="header"></slot>
|
|
39
|
+
<slot name="close-button">
|
|
40
|
+
<button
|
|
41
|
+
class="tool tool-close"
|
|
42
|
+
v-if="showClose"
|
|
43
|
+
@click="closeModal"
|
|
44
|
+
data-dismiss="modal"
|
|
45
|
+
aria-label="Close"
|
|
46
|
+
>
|
|
47
|
+
Fechar
|
|
48
|
+
<font-awesome-icon
|
|
49
|
+
:icon="['fas', 'times']"
|
|
50
|
+
class="text-white ml-1"
|
|
51
|
+
/>
|
|
52
|
+
</button>
|
|
53
|
+
</slot>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<div class="modal-body" :class="bodyClasses">
|
|
57
|
+
<slot></slot>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<div
|
|
61
|
+
class="modal-footer"
|
|
62
|
+
:class="footerClasses"
|
|
63
|
+
v-if="$slots.footer"
|
|
64
|
+
>
|
|
65
|
+
<slot name="footer"></slot>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</SlideYUpTransition>
|
|
71
|
+
</template>
|
|
72
|
+
<script>
|
|
73
|
+
import { SlideYUpTransition } from 'vue2-transitions';
|
|
74
|
+
|
|
75
|
+
export default {
|
|
76
|
+
name: 'modal',
|
|
77
|
+
components: {
|
|
78
|
+
SlideYUpTransition
|
|
79
|
+
},
|
|
80
|
+
props: {
|
|
81
|
+
show: Boolean,
|
|
82
|
+
showClose: {
|
|
83
|
+
type: Boolean,
|
|
84
|
+
default: true
|
|
85
|
+
},
|
|
86
|
+
type: {
|
|
87
|
+
type: String,
|
|
88
|
+
default: '',
|
|
89
|
+
validator(value) {
|
|
90
|
+
let acceptedValues = ['', 'notice', 'mini'];
|
|
91
|
+
return acceptedValues.indexOf(value) !== -1;
|
|
92
|
+
},
|
|
93
|
+
description: 'Modal type (notice|mini|"") '
|
|
94
|
+
},
|
|
95
|
+
modalClasses: {
|
|
96
|
+
type: [Object, String],
|
|
97
|
+
description: 'Modal dialog css classes'
|
|
98
|
+
},
|
|
99
|
+
size: {
|
|
100
|
+
type: String,
|
|
101
|
+
description: 'Modal size',
|
|
102
|
+
validator(value) {
|
|
103
|
+
let acceptedValues = ['', 'sm', 'lg', 'xl'];
|
|
104
|
+
return acceptedValues.indexOf(value) !== -1;
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
modalContentClasses: {
|
|
108
|
+
type: [Object, String],
|
|
109
|
+
description: 'Modal dialog content css classes'
|
|
110
|
+
},
|
|
111
|
+
gradient: {
|
|
112
|
+
type: String,
|
|
113
|
+
description: 'Modal gradient type (danger, primary etc)'
|
|
114
|
+
},
|
|
115
|
+
headerClasses: {
|
|
116
|
+
type: [Object, String],
|
|
117
|
+
description: 'Modal Header css classes'
|
|
118
|
+
},
|
|
119
|
+
bodyClasses: {
|
|
120
|
+
type: [Object, String],
|
|
121
|
+
description: 'Modal Body css classes'
|
|
122
|
+
},
|
|
123
|
+
footerClasses: {
|
|
124
|
+
type: [Object, String],
|
|
125
|
+
description: 'Modal Footer css classes'
|
|
126
|
+
},
|
|
127
|
+
animationDuration: {
|
|
128
|
+
type: Number,
|
|
129
|
+
default: 500,
|
|
130
|
+
description: 'Modal transition duration'
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
methods: {
|
|
134
|
+
closeModal() {
|
|
135
|
+
this.$emit('update:show', false);
|
|
136
|
+
this.$emit('close');
|
|
137
|
+
}
|
|
138
|
+
},
|
|
139
|
+
watch: {
|
|
140
|
+
show(val) {
|
|
141
|
+
let documentClasses = document.body.classList;
|
|
142
|
+
if (val) {
|
|
143
|
+
documentClasses.add('modal-open');
|
|
144
|
+
} else {
|
|
145
|
+
documentClasses.remove('modal-open');
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
</script>
|
|
151
|
+
<style lang="scss">
|
|
152
|
+
@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
|
|
153
|
+
.modal.show {
|
|
154
|
+
background-color: rgba(23,43,77, 0.7);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.tool {
|
|
158
|
+
position: absolute;
|
|
159
|
+
top: 1rem;
|
|
160
|
+
z-index: 10;
|
|
161
|
+
color: $primary;
|
|
162
|
+
cursor: pointer;
|
|
163
|
+
border: none;
|
|
164
|
+
|
|
165
|
+
&-close {
|
|
166
|
+
position: absolute;
|
|
167
|
+
width: 88px;
|
|
168
|
+
height: 27px;
|
|
169
|
+
right: 7px;
|
|
170
|
+
top: 7px;
|
|
171
|
+
display: flex;
|
|
172
|
+
justify-content: center;
|
|
173
|
+
align-items: center;
|
|
174
|
+
|
|
175
|
+
font-size: 11px;
|
|
176
|
+
|
|
177
|
+
font-weight: 500;
|
|
178
|
+
background: rgba(0, 0, 0, 0.2);
|
|
179
|
+
border-radius: 17.5px;
|
|
180
|
+
color: #fff;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
</style>
|