toggle-components-library 1.10.4 → 1.11.1
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/dist/toggle-components-library.common.js +107 -41
- package/dist/toggle-components-library.common.js.map +1 -1
- package/dist/toggle-components-library.css +1 -1
- package/dist/toggle-components-library.umd.js +107 -41
- package/dist/toggle-components-library.umd.js.map +1 -1
- package/dist/toggle-components-library.umd.min.js +3 -3
- package/dist/toggle-components-library.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/elements/ToggleSectionCollapse.vue +36 -0
- package/src/index.js +2 -0
- package/src/sass/includes/_as_elements.scss +113 -0
- package/src/sass/includes/_as_table.scss +8 -3
package/package.json
CHANGED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="toggle-section-collapse">
|
|
3
|
+
<div ref="header" class="toggle-section-collapse-header" @click="visible = !visible">
|
|
4
|
+
<h3 ref="title" class="toggle-section-collapse-title">{{ title }}</h3>
|
|
5
|
+
<img class="toggle-section-collapse-arrow"
|
|
6
|
+
:class=" visible ? 'toggle-section-collapse-arrow-up' : updated ? 'toggle-section-collapse-arrow-down' : '' "
|
|
7
|
+
/>
|
|
8
|
+
</div>
|
|
9
|
+
<transition name="slide">
|
|
10
|
+
<div ref="content" class="toggle-section-collapse-slot" v-show="visible">
|
|
11
|
+
<slot></slot>
|
|
12
|
+
</div>
|
|
13
|
+
</transition>
|
|
14
|
+
<hr class="toggle-section-collapse-linebreak"/>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
17
|
+
<script>
|
|
18
|
+
export default {
|
|
19
|
+
name: "SectionCollapse",
|
|
20
|
+
props: {
|
|
21
|
+
title: {
|
|
22
|
+
type: String,
|
|
23
|
+
default: "Expandable",
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
data: function() {
|
|
27
|
+
return {
|
|
28
|
+
visible: false,
|
|
29
|
+
updated: false,
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
beforeUpdate: function() {
|
|
33
|
+
this.updated = true
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
</script>
|
package/src/index.js
CHANGED
|
@@ -40,6 +40,7 @@ import ToggleSideSubNav from './components/navs/sidenav/ToggleSideSubNav.vue';
|
|
|
40
40
|
|
|
41
41
|
import ToggleTextClipboardCopy from './components/text/ToggleTextClipboardCopy';
|
|
42
42
|
import ToggleLineBreak from './components/elements/ToggleLineBreak';
|
|
43
|
+
import ToggleSectionCollapse from './components/elements/ToggleSectionCollapse';
|
|
43
44
|
import ToggleNotifications from './components/notifications/ToggleNotifications';
|
|
44
45
|
|
|
45
46
|
import ToggleFeatureButton from './components/buttons/ToggleFeatureButton';
|
|
@@ -85,6 +86,7 @@ const Components = {
|
|
|
85
86
|
ToggleInputCrudField,
|
|
86
87
|
ToggleInputGrid,
|
|
87
88
|
ToggleLineBreak,
|
|
89
|
+
ToggleSectionCollapse,
|
|
88
90
|
ToggleTextClipboardCopy,
|
|
89
91
|
ToggleNotifications,
|
|
90
92
|
ToggleFeatureButton,
|
|
@@ -1,3 +1,116 @@
|
|
|
1
1
|
.toggle-line-break {
|
|
2
2
|
border-bottom: 1px solid $toggle-blue;
|
|
3
3
|
}
|
|
4
|
+
.toggle-section-collapse {
|
|
5
|
+
.toggle-section-collapse-header {
|
|
6
|
+
width: 100%;
|
|
7
|
+
min-height: 25px;
|
|
8
|
+
padding: 1em 0;
|
|
9
|
+
}
|
|
10
|
+
.toggle-section-collapse-title {
|
|
11
|
+
max-width: 80%;
|
|
12
|
+
float: left;
|
|
13
|
+
display: block;
|
|
14
|
+
font-weight: bold;
|
|
15
|
+
font-family: $toggle-font-family-secondary;
|
|
16
|
+
margin-bottom: .6em;
|
|
17
|
+
}
|
|
18
|
+
.toggle-section-collapse-slot {
|
|
19
|
+
clear: both;
|
|
20
|
+
font-family: $toggle-font-family;
|
|
21
|
+
overflow: auto;
|
|
22
|
+
}
|
|
23
|
+
.toggle-section-collapse-linebreak {
|
|
24
|
+
border-top: 0 solid transparent;
|
|
25
|
+
border-left: 0 solid transparent;
|
|
26
|
+
border-right: 0 solid transparent;
|
|
27
|
+
border-bottom: 1px solid $toggle-inactive-grey;
|
|
28
|
+
clear: both;
|
|
29
|
+
}
|
|
30
|
+
.toggle-section-collapse-arrow {
|
|
31
|
+
border: solid #3180FF;
|
|
32
|
+
border-width: 0 2px 2px 0;
|
|
33
|
+
padding: 3px;
|
|
34
|
+
margin: 27px 19px 12px;
|
|
35
|
+
float: left;
|
|
36
|
+
-moz-transform: rotate(45deg);
|
|
37
|
+
-o-transform: rotate(45deg);
|
|
38
|
+
-ms-transform: rotate(45deg);
|
|
39
|
+
-webkit-transform: rotate(45deg);
|
|
40
|
+
transform: rotate(45deg);
|
|
41
|
+
}
|
|
42
|
+
.toggle-section-collapse-arrow-down {
|
|
43
|
+
animation: turn-down 0.3s ease-out;
|
|
44
|
+
}
|
|
45
|
+
.toggle-section-collapse-arrow-up {
|
|
46
|
+
margin: 31px 19px 12px;
|
|
47
|
+
-moz-transform: rotate(225deg);
|
|
48
|
+
-o-transform: rotate(225deg);
|
|
49
|
+
-ms-transform: rotate(225deg);
|
|
50
|
+
-webkit-transform: rotate(225deg);
|
|
51
|
+
transform: rotate(225deg);
|
|
52
|
+
animation: turn-up 0.3s ease-out;
|
|
53
|
+
}
|
|
54
|
+
// For animating the arrow icon
|
|
55
|
+
@keyframes turn-up {
|
|
56
|
+
0% {
|
|
57
|
+
margin: 27px 19px 12px;
|
|
58
|
+
-moz-transform: rotate(45deg);
|
|
59
|
+
-o-transform: rotate(45deg);
|
|
60
|
+
-ms-transform: rotate(45deg);
|
|
61
|
+
-webkit-transform: rotate(45deg);
|
|
62
|
+
transform: rotate(45deg);
|
|
63
|
+
}
|
|
64
|
+
100% {
|
|
65
|
+
margin: 31px 19px 12px;
|
|
66
|
+
-moz-transform: rotate(-135deg);
|
|
67
|
+
-o-transform: rotate(-135deg);
|
|
68
|
+
-ms-transform: rotate(-135deg);
|
|
69
|
+
-webkit-transform: rotate(-135deg);
|
|
70
|
+
transform: rotate(-135deg);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
@keyframes turn-down {
|
|
74
|
+
0% {
|
|
75
|
+
margin: 31px 19px 12px;
|
|
76
|
+
-moz-transform: rotate(-135deg);
|
|
77
|
+
-o-transform: rotate(-135deg);
|
|
78
|
+
-ms-transform: rotate(-135deg);
|
|
79
|
+
-webkit-transform: rotate(-135deg);
|
|
80
|
+
transform: rotate(-135deg);
|
|
81
|
+
}
|
|
82
|
+
100% {
|
|
83
|
+
margin: 27px 19px 12px;
|
|
84
|
+
-moz-transform: rotate(45deg);
|
|
85
|
+
-o-transform: rotate(45deg);
|
|
86
|
+
-ms-transform: rotate(45deg);
|
|
87
|
+
-webkit-transform: rotate(45deg);
|
|
88
|
+
transform: rotate(45deg);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
.slide-enter-active {
|
|
92
|
+
-moz-transition: all .5s ease;
|
|
93
|
+
-webkit-transition: all .5s ease;
|
|
94
|
+
-o-transition: all .5s ease;
|
|
95
|
+
-ms-transition: all .5s ease;
|
|
96
|
+
transition: all .5s ease;
|
|
97
|
+
}
|
|
98
|
+
.slide-leave-active {
|
|
99
|
+
-moz-transition: all .3s ease;
|
|
100
|
+
-webkit-transition: all .3s ease;
|
|
101
|
+
-o-transition: all .3s ease;
|
|
102
|
+
-ms-transition: all .3s ease;
|
|
103
|
+
transition: all .3s ease;
|
|
104
|
+
}
|
|
105
|
+
.slide-enter-to, .slide-leave {
|
|
106
|
+
max-height: 100px;
|
|
107
|
+
overflow: hidden;
|
|
108
|
+
}
|
|
109
|
+
.slide-enter, .slide-leave-to
|
|
110
|
+
{
|
|
111
|
+
overflow: hidden;
|
|
112
|
+
max-height: 0;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
table.toggle-table {
|
|
4
4
|
|
|
5
5
|
table-layout:fixed;
|
|
6
|
-
|
|
7
6
|
width: 100%;
|
|
8
7
|
margin: 25px 0;
|
|
9
8
|
font-size: 12px;
|
|
@@ -16,6 +15,12 @@ table.toggle-table {
|
|
|
16
15
|
background-color:transparent;
|
|
17
16
|
border-radius:0;
|
|
18
17
|
border:none;
|
|
18
|
+
.toggle-input{
|
|
19
|
+
margin-top:11px;
|
|
20
|
+
padding:1px 3px 1px 3px;
|
|
21
|
+
font-size:14px;
|
|
22
|
+
height:1.5rem;
|
|
23
|
+
}
|
|
19
24
|
.toggle-input-label{
|
|
20
25
|
display: none;
|
|
21
26
|
}
|
|
@@ -23,8 +28,8 @@ table.toggle-table {
|
|
|
23
28
|
.toggle-date-input-calendar-icon{
|
|
24
29
|
.toggle-input{
|
|
25
30
|
background:transparent;
|
|
26
|
-
padding:
|
|
27
|
-
margin-top:
|
|
31
|
+
padding:3px 1rem 3px 0.1rem;
|
|
32
|
+
margin-top: 10px;
|
|
28
33
|
}
|
|
29
34
|
}
|
|
30
35
|
.toggle-clear{
|