toggle-components-library 1.10.6 → 1.13.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 +258 -47
- 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 +258 -47
- 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 +3 -2
- package/src/components/elements/ToggleSectionCollapse.vue +36 -0
- package/src/components/forms/ToggleFontPicker.vue +113 -0
- package/src/components/forms/ToggleInputSelect.vue +5 -0
- package/src/index.js +6 -1
- package/src/sass/includes/_as_elements.scss +113 -0
- package/src/sass/includes/_as_inputs.scss +1 -1
- package/src/sass/includes/_as_table.scss +0 -1
- package/package-lock.json +0 -20271
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "toggle-components-library",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.13.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"serve": "vue-cli-service serve",
|
|
@@ -34,7 +34,8 @@
|
|
|
34
34
|
"vue-moment": "^4.1.0",
|
|
35
35
|
"vue-router": "^3.4.3",
|
|
36
36
|
"vue2-dropzone": "^3.6.0",
|
|
37
|
-
"vuedraggable": "^2.24.3"
|
|
37
|
+
"vuedraggable": "^2.24.3",
|
|
38
|
+
"webfontloader": "^1.6.28"
|
|
38
39
|
},
|
|
39
40
|
"devDependencies": {
|
|
40
41
|
"@babel/core": "^7.11.1",
|
|
@@ -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>
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<ToggleInputSelect :options="fontOptions" :label="label" :name="name" :fontFamily="inputVal" v-model="inputVal" size="medium" :style="`font-family: ${inputVal};`"/>
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script>
|
|
6
|
+
import { mixins } from '../mixins/mixins';
|
|
7
|
+
import ToggleInputSelect from './ToggleInputSelect.vue';
|
|
8
|
+
var WebFont = require('webfontloader');
|
|
9
|
+
|
|
10
|
+
export default {
|
|
11
|
+
mixins:[mixins],
|
|
12
|
+
components:{ ToggleInputSelect },
|
|
13
|
+
name: 'FontPicker',
|
|
14
|
+
props: {
|
|
15
|
+
value: {
|
|
16
|
+
type: String
|
|
17
|
+
},
|
|
18
|
+
/**
|
|
19
|
+
* The name of the fontpicker component
|
|
20
|
+
*/
|
|
21
|
+
name: {
|
|
22
|
+
type: String,
|
|
23
|
+
default: "ToggleFontPicker"
|
|
24
|
+
},
|
|
25
|
+
/**
|
|
26
|
+
* The label that will be displayed
|
|
27
|
+
*/
|
|
28
|
+
label: {
|
|
29
|
+
type: String,
|
|
30
|
+
required: false,
|
|
31
|
+
default: "Font picker"
|
|
32
|
+
},
|
|
33
|
+
/**
|
|
34
|
+
* Whether this is a required field or not
|
|
35
|
+
*/
|
|
36
|
+
required: {
|
|
37
|
+
type: Boolean,
|
|
38
|
+
default: false
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
data() {
|
|
42
|
+
return {
|
|
43
|
+
fonts: [
|
|
44
|
+
'Abril Fatface',
|
|
45
|
+
'Alpha Slab One',
|
|
46
|
+
'Anton',
|
|
47
|
+
'Arvo',
|
|
48
|
+
'Bodoni Moda',
|
|
49
|
+
'EB Garamond',
|
|
50
|
+
'Fredoka One',
|
|
51
|
+
'IBM Plex Mono',
|
|
52
|
+
'Lato',
|
|
53
|
+
'Libre Baskerville',
|
|
54
|
+
'Lora',
|
|
55
|
+
'Merriweather',
|
|
56
|
+
'Montserrat',
|
|
57
|
+
'Nunito',
|
|
58
|
+
'Open Sans',
|
|
59
|
+
'Open Sans Condensed',
|
|
60
|
+
'Oswald',
|
|
61
|
+
'Poppins',
|
|
62
|
+
'Prata',
|
|
63
|
+
'PT Serif',
|
|
64
|
+
'Quicksand',
|
|
65
|
+
'Roboto',
|
|
66
|
+
'Roboto Mono',
|
|
67
|
+
'Roboto Slab',
|
|
68
|
+
'Rubik',
|
|
69
|
+
'Sacramento',
|
|
70
|
+
'Source Sans Pro',
|
|
71
|
+
'Source Serif Pro',
|
|
72
|
+
'Volkhov',
|
|
73
|
+
'Work Sans Pro',
|
|
74
|
+
'Space Mono'
|
|
75
|
+
],
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
created() {
|
|
79
|
+
this.getFonts();
|
|
80
|
+
},
|
|
81
|
+
|
|
82
|
+
computed: {
|
|
83
|
+
fontOptions() {
|
|
84
|
+
// Format font list into value/label object for select input
|
|
85
|
+
return this.fonts.map(font => {
|
|
86
|
+
return {
|
|
87
|
+
value: font,
|
|
88
|
+
label: font
|
|
89
|
+
}
|
|
90
|
+
})
|
|
91
|
+
},
|
|
92
|
+
inputVal: {
|
|
93
|
+
get() {
|
|
94
|
+
return this.value;
|
|
95
|
+
},
|
|
96
|
+
|
|
97
|
+
set(value) {
|
|
98
|
+
this.$emit('input', value);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
|
|
103
|
+
methods: {
|
|
104
|
+
getFonts() {
|
|
105
|
+
WebFont.load({
|
|
106
|
+
google: {
|
|
107
|
+
families: this.fonts
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
</script>
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
v-model="inputVal"
|
|
16
16
|
:autocomplete="autocomplete ? 'on' : 'off' "
|
|
17
17
|
:required="required"
|
|
18
|
+
:style="`${fontFamily ? 'font-family: ' + fontFamily : ''}`"
|
|
18
19
|
>
|
|
19
20
|
<option value="">Select an option</option>
|
|
20
21
|
<option :value="option.value" v-for="(option, key) in options" v-bind:key="key">{{option.label}}</option>
|
|
@@ -72,6 +73,10 @@ export default {
|
|
|
72
73
|
errorMessage: {
|
|
73
74
|
type: String,
|
|
74
75
|
required: false
|
|
76
|
+
},
|
|
77
|
+
fontFamily: {
|
|
78
|
+
type: String,
|
|
79
|
+
required: false
|
|
75
80
|
}
|
|
76
81
|
},
|
|
77
82
|
|
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';
|
|
@@ -48,6 +49,8 @@ import ToggleHeaderTextLarge from "./components/text/ToggleHeaderTextLarge.vue";
|
|
|
48
49
|
import ToggleHelperTextSmall from "./components/text/ToggleHelperTextSmall.vue";
|
|
49
50
|
import ToggleInfoText from "./components/text/ToggleInfoText.vue";
|
|
50
51
|
|
|
52
|
+
import ToggleFontPicker from "./components/forms/ToggleFontPicker.vue";
|
|
53
|
+
|
|
51
54
|
import './sass/main.scss';
|
|
52
55
|
|
|
53
56
|
const Components = {
|
|
@@ -85,12 +88,14 @@ const Components = {
|
|
|
85
88
|
ToggleInputCrudField,
|
|
86
89
|
ToggleInputGrid,
|
|
87
90
|
ToggleLineBreak,
|
|
91
|
+
ToggleSectionCollapse,
|
|
88
92
|
ToggleTextClipboardCopy,
|
|
89
93
|
ToggleNotifications,
|
|
90
94
|
ToggleFeatureButton,
|
|
91
95
|
ToggleHelperTextSmall,
|
|
92
96
|
ToggleInfoText,
|
|
93
|
-
ToggleInternationalPhoneInputSelect
|
|
97
|
+
ToggleInternationalPhoneInputSelect,
|
|
98
|
+
ToggleFontPicker
|
|
94
99
|
}
|
|
95
100
|
|
|
96
101
|
Object.keys(Components).forEach(name => {
|
|
@@ -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
|
+
|