@burh/nuxt-core 1.0.184 → 1.0.186
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.
|
@@ -300,4 +300,16 @@ $loader-base-size: 4rem;
|
|
|
300
300
|
40% {
|
|
301
301
|
box-shadow: 0 #{$loader-base-size / 4} 0 0;
|
|
302
302
|
}
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
//Modal Preview
|
|
306
|
+
|
|
307
|
+
.v-modal {
|
|
308
|
+
position: fixed;
|
|
309
|
+
left: 0;
|
|
310
|
+
top: 0;
|
|
311
|
+
width: 100%;
|
|
312
|
+
height: 100%;
|
|
313
|
+
opacity: 0.7 !important;
|
|
314
|
+
background: #172b4d !important;
|
|
303
315
|
}
|
|
@@ -1,95 +1,109 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
2
|
+
<component
|
|
3
|
+
:is="tag"
|
|
4
|
+
:class="[{ show: isOpen }, `drop${direction}`]"
|
|
5
|
+
@click="toggleDropDown"
|
|
6
|
+
v-click-outside="closeDropDown"
|
|
7
|
+
>
|
|
8
|
+
<slot name="title-container" :is-open="isOpen">
|
|
9
|
+
<component
|
|
10
|
+
:is="titleTag"
|
|
11
|
+
class="btn-rotate"
|
|
12
|
+
:class="[{'dropdown-toggle': hasToggle}, titleClasses]"
|
|
13
|
+
:aria-expanded="isOpen"
|
|
14
|
+
data-toggle="dropdown"
|
|
15
|
+
>
|
|
16
|
+
<slot name="title" :is-open="isOpen">
|
|
17
|
+
<i :class="icon"></i> {{ title }}
|
|
18
|
+
</slot>
|
|
19
|
+
</component>
|
|
20
|
+
</slot>
|
|
21
|
+
<ul
|
|
22
|
+
class="dropdown-menu"
|
|
23
|
+
:class="[
|
|
24
|
+
{ show: isOpen },
|
|
25
|
+
{ 'dropdown-menu-right': menuOnRight },
|
|
26
|
+
menuClasses
|
|
27
|
+
]"
|
|
28
|
+
>
|
|
29
|
+
<slot></slot>
|
|
30
|
+
</ul>
|
|
31
|
+
</component>
|
|
32
32
|
</template>
|
|
33
33
|
<script>
|
|
34
34
|
export default {
|
|
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
|
-
|
|
92
|
-
|
|
35
|
+
name: 'base-dropdown',
|
|
36
|
+
props: {
|
|
37
|
+
tag: {
|
|
38
|
+
type: String,
|
|
39
|
+
default: 'div',
|
|
40
|
+
description: 'Dropdown html tag (e.g div, ul etc)'
|
|
41
|
+
},
|
|
42
|
+
titleTag: {
|
|
43
|
+
type: String,
|
|
44
|
+
default: 'button',
|
|
45
|
+
description: 'Dropdown title (toggle) html tag'
|
|
46
|
+
},
|
|
47
|
+
title: {
|
|
48
|
+
type: String,
|
|
49
|
+
description: 'Dropdown title'
|
|
50
|
+
},
|
|
51
|
+
direction: {
|
|
52
|
+
type: String,
|
|
53
|
+
default: 'down', // up | down
|
|
54
|
+
description: 'Dropdown menu direction (up|down)'
|
|
55
|
+
},
|
|
56
|
+
icon: {
|
|
57
|
+
type: String,
|
|
58
|
+
description: 'Dropdown icon'
|
|
59
|
+
},
|
|
60
|
+
titleClasses: {
|
|
61
|
+
type: [String, Object, Array],
|
|
62
|
+
description: 'Title css classes'
|
|
63
|
+
},
|
|
64
|
+
menuClasses: {
|
|
65
|
+
type: [String, Object],
|
|
66
|
+
description: 'Menu css classes'
|
|
67
|
+
},
|
|
68
|
+
menuOnRight: {
|
|
69
|
+
type: Boolean,
|
|
70
|
+
description: 'Whether menu should appear on the right'
|
|
71
|
+
},
|
|
72
|
+
hasToggle: {
|
|
73
|
+
type: Boolean,
|
|
74
|
+
description: 'Whether dropdown has arrow icon shown',
|
|
75
|
+
default: true
|
|
76
|
+
},
|
|
77
|
+
isDropdownOpen: {
|
|
78
|
+
type: Boolean,
|
|
79
|
+
default: false
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
data() {
|
|
83
|
+
return {
|
|
84
|
+
isOpen: false
|
|
85
|
+
};
|
|
86
|
+
},
|
|
87
|
+
watch: {
|
|
88
|
+
isOpen() {
|
|
89
|
+
if (this.isOpen === false) {
|
|
90
|
+
this.$emit('close');
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
isDropdownOpen() {
|
|
94
|
+
this.isOpen = this.isDropdownOpen;
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
methods: {
|
|
98
|
+
toggleDropDown() {
|
|
99
|
+
this.isOpen = !this.isOpen;
|
|
100
|
+
this.$emit('change', this.isOpen);
|
|
101
|
+
},
|
|
102
|
+
closeDropDown() {
|
|
103
|
+
this.isOpen = false;
|
|
104
|
+
this.$emit('change', false);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
93
107
|
};
|
|
94
108
|
</script>
|
|
95
109
|
<style lang="scss" scoped>
|