toggle-components-library 1.37.0-beta.3 → 1.37.0-beta.31
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 +189 -266
- 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 +189 -266
- 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/badges/ToggleLogoBadge.vue +53 -0
- package/src/components/breadcrumb/ToggleBreadCrumb.vue +13 -78
- package/src/components/forms/ToggleInputCurrency.vue +3 -2
- package/src/index.js +2 -2
- package/src/sass/includes/_as_badges.scss +49 -0
- package/src/sass/includes/_as_breadcrumb.scss +0 -42
- package/src/sass/includes/_as_inputs.scss +19 -79
- package/src/components/forms/ToggleInputRadioButtonMini.vue +0 -38
package/package.json
CHANGED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div id="badge-container" :class="'toggle-logo-badge-' + size">
|
|
3
|
+
<img
|
|
4
|
+
:src="logo.src"
|
|
5
|
+
:alt="logo.alt"
|
|
6
|
+
class="toggle-logo-badge-logo"
|
|
7
|
+
>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<script>
|
|
13
|
+
|
|
14
|
+
export default {
|
|
15
|
+
name: 'ToggleLogoBadge',
|
|
16
|
+
props: {
|
|
17
|
+
logo: {
|
|
18
|
+
type: Object,
|
|
19
|
+
required: true,
|
|
20
|
+
},
|
|
21
|
+
colour: {
|
|
22
|
+
type: String,
|
|
23
|
+
required: true
|
|
24
|
+
},
|
|
25
|
+
size: {
|
|
26
|
+
type: String,
|
|
27
|
+
required: true,
|
|
28
|
+
validator: function(value) {
|
|
29
|
+
return ["small", "medium", "large"].indexOf(value) !== -1;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
};
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<style scoped>
|
|
37
|
+
#badge-container {
|
|
38
|
+
background-color: v-bind('colour');
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
#small {
|
|
42
|
+
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
#medium {
|
|
46
|
+
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
#large {
|
|
50
|
+
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
</style>
|
|
@@ -1,27 +1,19 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="toggle-breadcrumb" v-if="breadcrumb_computed">
|
|
3
3
|
<div v-for="(crumb, index) in breadcrumb_computed" :key="index">
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
@input="updateContent($event);"
|
|
9
|
-
@keydown.enter.prevent="handleEnterKey"
|
|
10
|
-
@paste.prevent="handlePaste"
|
|
11
|
-
>{{ crumb.name }}</span>
|
|
12
|
-
</template>
|
|
13
|
-
<template v-else>
|
|
14
|
-
<router-link :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && !isNuxt">{{ crumb.name }}</router-link>
|
|
15
|
-
<NuxtLink :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && isNuxt">{{ crumb.name }}</NuxtLink>
|
|
16
|
-
<i class="toggle-breadcrumb-arrow-right" v-if="crumb.link"></i>
|
|
17
|
-
<h1 class="toggle-breadcrumb-h1" v-if="!crumb.link">{{ crumb.name }}</h1>
|
|
18
|
-
</template>
|
|
4
|
+
<router-link :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && !isNuxt">{{ crumb.name }}</router-link>
|
|
5
|
+
<NuxtLink :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && isNuxt">{{ crumb.name }}</NuxtLink>
|
|
6
|
+
<i class="toggle-breadcrumb-arrow-right" v-if="crumb.link"></i>
|
|
7
|
+
<h1 class="toggle-breadcrumb-h1" v-if="!crumb.link">{{ crumb.name }}</h1>
|
|
19
8
|
</div>
|
|
20
9
|
</div>
|
|
21
10
|
</template>
|
|
22
11
|
|
|
23
12
|
<script>
|
|
13
|
+
|
|
14
|
+
|
|
24
15
|
export default {
|
|
16
|
+
|
|
25
17
|
mixins: [],
|
|
26
18
|
props: {
|
|
27
19
|
isNuxt: {
|
|
@@ -31,78 +23,21 @@ export default {
|
|
|
31
23
|
breadcrumb: {
|
|
32
24
|
type: Array,
|
|
33
25
|
required: false
|
|
34
|
-
},
|
|
35
|
-
editable: {
|
|
36
|
-
type: Boolean,
|
|
37
|
-
default: false,
|
|
38
|
-
required: false
|
|
39
|
-
},
|
|
40
|
-
maxChars: {
|
|
41
|
-
type: Number,
|
|
42
|
-
default: 50,
|
|
43
|
-
required: false
|
|
44
26
|
}
|
|
45
27
|
},
|
|
46
28
|
|
|
47
29
|
data: function () {
|
|
48
|
-
return {
|
|
49
|
-
content: ''
|
|
50
|
-
};
|
|
51
|
-
},
|
|
52
30
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
return this.isNuxt ? this.breadcrumb : this.$route.meta.breadcrumb
|
|
56
|
-
},
|
|
31
|
+
|
|
32
|
+
return {};
|
|
57
33
|
},
|
|
58
34
|
|
|
59
|
-
|
|
60
|
-
handlePaste(event) {
|
|
61
|
-
// Get plain text from clipboard and clean it
|
|
62
|
-
const text = (event.clipboardData || window.clipboardData).getData('text');
|
|
63
|
-
const cleanText = text.replace(/[\r\n\s]+/g, ' ').trim();
|
|
64
|
-
|
|
65
|
-
// Get current selection information
|
|
66
|
-
const selection = window.getSelection();
|
|
67
|
-
const selectionLength = selection.toString().length;
|
|
68
|
-
const currentLength = this.content.length;
|
|
69
|
-
|
|
70
|
-
// Check if adding the pasted text would exceed maxChars
|
|
71
|
-
if (currentLength - selectionLength + cleanText.length <= this.maxChars && selection.rangeCount) {
|
|
72
|
-
const range = selection.getRangeAt(0);
|
|
73
|
-
range.deleteContents();
|
|
74
|
-
range.insertNode(document.createTextNode(cleanText));
|
|
75
|
-
|
|
76
|
-
// Move cursor to end of inserted text
|
|
77
|
-
range.collapse(false);
|
|
78
|
-
selection.removeAllRanges();
|
|
79
|
-
selection.addRange(range);
|
|
80
|
-
|
|
81
|
-
// Update content
|
|
82
|
-
this.content = event.target.innerText;
|
|
83
|
-
this.$emit('update:lastCrumb', this.content);
|
|
84
|
-
}
|
|
85
|
-
},
|
|
35
|
+
computed: {
|
|
86
36
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
event.target.blur();
|
|
37
|
+
breadcrumb_computed() {
|
|
38
|
+
return this.isNuxt ? this.breadcrumb : this.$route.meta.breadcrumb
|
|
90
39
|
},
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
updateContent(event) {
|
|
94
|
-
// Limit the input to 50 characters
|
|
95
|
-
if (event.target.innerText.length >= this.maxChars) {
|
|
96
|
-
event.target.innerText = this.content;
|
|
97
|
-
|
|
98
|
-
// Move the cursor to the end of the input
|
|
99
|
-
document.getSelection().modify("move", "forward", "documentboundary");
|
|
100
|
-
|
|
101
|
-
} else {
|
|
102
|
-
this.content = event.target.innerText;
|
|
103
|
-
this.$emit('update:lastCrumb', this.content);
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
40
|
}
|
|
41
|
+
|
|
107
42
|
}
|
|
108
43
|
</script>
|
|
@@ -21,7 +21,8 @@
|
|
|
21
21
|
v-model="inputVal"
|
|
22
22
|
@blur="isInputActive = false"
|
|
23
23
|
@focus="isInputActive = true"
|
|
24
|
-
|
|
24
|
+
>
|
|
25
|
+
<div v-if="size == 'table'" class="toggle-input-currency-table-hover-pencil"></div>
|
|
25
26
|
<label
|
|
26
27
|
class="toggle-input-label-error"
|
|
27
28
|
v-if="isInvalid"
|
|
@@ -75,7 +76,7 @@ export default {
|
|
|
75
76
|
size: {
|
|
76
77
|
type: String,
|
|
77
78
|
validator: function (value) {
|
|
78
|
-
return ['extra-small', 'small', 'medium', 'large', 'full'].indexOf(value) !== -1
|
|
79
|
+
return ['extra-small', 'small', 'medium', 'large', 'full', 'table'].indexOf(value) !== -1
|
|
79
80
|
}
|
|
80
81
|
},
|
|
81
82
|
required: {
|
package/src/index.js
CHANGED
|
@@ -8,7 +8,6 @@ import ToggleInputSelect from "./components/forms/ToggleInputSelect.vue";
|
|
|
8
8
|
import ToggleInputPercentage from "./components/forms/ToggleInputPercentage.vue";
|
|
9
9
|
import ToggleInputCurrency from "./components/forms/ToggleInputCurrency.vue";
|
|
10
10
|
import ToggleInputRadioButtons from "./components/forms/ToggleInputRadioButtons.vue";
|
|
11
|
-
import ToggleInputRadioButtonMini from "./components/forms/ToggleInputRadioButtonMini.vue";
|
|
12
11
|
import ToggleInputTextArea from "./components/forms/ToggleInputTextArea.vue";
|
|
13
12
|
import ToggleInputCheckboxContainer from "./components/forms/ToggleInputCheckboxContainer.vue";
|
|
14
13
|
import ToggleInternationalPhoneInputSelect from "./components/forms/ToggleInternationalPhoneInputSelect.vue";
|
|
@@ -44,6 +43,7 @@ import ToggleTableColumn from './components/tables/ToggleTableColumn.vue';
|
|
|
44
43
|
import ToggleBadge from './components/badges/ToggleBadge.vue';
|
|
45
44
|
import ToggleCalculateBadge from './components/badges/ToggleCalculateBadge.vue';
|
|
46
45
|
import TogglePodiumBadge from './components/badges/TogglePodiumBadge.vue';
|
|
46
|
+
import ToggleLogoBadge from './components/badges/ToggleLogoBadge.vue';
|
|
47
47
|
|
|
48
48
|
import ToggleBreadCrumb from './components/breadcrumb/ToggleBreadCrumb.vue';
|
|
49
49
|
import ToggleSideNavItem from './components/navs/sidenav/ToggleSideNavItem.vue';
|
|
@@ -104,6 +104,7 @@ const Components = {
|
|
|
104
104
|
ToggleBadge,
|
|
105
105
|
ToggleCalculateBadge,
|
|
106
106
|
TogglePodiumBadge,
|
|
107
|
+
ToggleLogoBadge,
|
|
107
108
|
ToggleTableColumn,
|
|
108
109
|
ToggleInputText,
|
|
109
110
|
ToggleInputEditableText,
|
|
@@ -113,7 +114,6 @@ const Components = {
|
|
|
113
114
|
ToggleInputPercentage,
|
|
114
115
|
ToggleInputCurrency,
|
|
115
116
|
ToggleInputRadioButtons,
|
|
116
|
-
ToggleInputRadioButtonMini,
|
|
117
117
|
ToggleInputTextArea,
|
|
118
118
|
ToggleInputCheckboxContainer,
|
|
119
119
|
ToggleInputCheckbox,
|
|
@@ -228,4 +228,53 @@
|
|
|
228
228
|
width: 22px;
|
|
229
229
|
margin-right: 15px;
|
|
230
230
|
}
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.toggle-logo-badge-small {
|
|
234
|
+
border: 0;
|
|
235
|
+
font-family: $toggle-font-family;
|
|
236
|
+
width: fit-content;
|
|
237
|
+
font-weight: bold;
|
|
238
|
+
display: grid;
|
|
239
|
+
padding: 0.3rem;
|
|
240
|
+
border-radius: 0.6rem;
|
|
241
|
+
align-items: center;
|
|
242
|
+
justify-content: center;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.toggle-logo-badge-medium {
|
|
246
|
+
border: 0;
|
|
247
|
+
font-family: $toggle-font-family;
|
|
248
|
+
width: fit-content;
|
|
249
|
+
font-weight: bold;
|
|
250
|
+
display: grid;
|
|
251
|
+
padding: 0.3rem;
|
|
252
|
+
border-radius: 0.6rem;
|
|
253
|
+
align-items: center;
|
|
254
|
+
justify-content: center;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.toggle-logo-badge-large {
|
|
258
|
+
border: 0;
|
|
259
|
+
font-family: $toggle-font-family;
|
|
260
|
+
width: fit-content;
|
|
261
|
+
font-weight: bold;
|
|
262
|
+
display: grid;
|
|
263
|
+
padding: 0.3rem;
|
|
264
|
+
border-radius: 0.6rem;
|
|
265
|
+
align-items: center;
|
|
266
|
+
justify-content: center;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.toggle-logo-badge-small > img {
|
|
270
|
+
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.toggle-logo-badge-medium > img {
|
|
274
|
+
width: 100%;
|
|
275
|
+
height: 1.1rem;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.toggle-logo-badge-large > img {
|
|
279
|
+
|
|
231
280
|
}
|
|
@@ -10,48 +10,6 @@
|
|
|
10
10
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
.toggle-breadcrumb-editable-input {
|
|
14
|
-
font-size: $toggle-font-size-extra-large;
|
|
15
|
-
font-family: "DIN-2014","Lato",sans-serif;
|
|
16
|
-
color: $toggle-black;
|
|
17
|
-
background-color: transparent;
|
|
18
|
-
display: inline-flex;
|
|
19
|
-
align-items: center;
|
|
20
|
-
min-width: 5rem !important;
|
|
21
|
-
height: 2rem;
|
|
22
|
-
padding-right: 0.5rem;
|
|
23
|
-
padding-left: 10px;
|
|
24
|
-
border: none;
|
|
25
|
-
border-radius: 4px;
|
|
26
|
-
white-space: nowrap;
|
|
27
|
-
line-height: 1;
|
|
28
|
-
border: 1px solid transparent;
|
|
29
|
-
margin: -1px 0 0 -10px;
|
|
30
|
-
white-space: nowrap
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.toggle-breadcrumb-editable-input:hover {
|
|
34
|
-
border: 1px solid #ccc;
|
|
35
|
-
background-color: $toggle-off-white;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.toggle-breadcrumb-editable-input:focus {
|
|
39
|
-
border: 1px solid #ccc;
|
|
40
|
-
background-color: $toggle-off-white;
|
|
41
|
-
outline: none;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.toggle-breadcrumb-editable-input::after {
|
|
45
|
-
content: '';
|
|
46
|
-
background-image: url('../assets/icons/edit-icon.svg');
|
|
47
|
-
background-repeat:no-repeat;
|
|
48
|
-
background-size:contain;
|
|
49
|
-
height: 22px;
|
|
50
|
-
width: 22px;
|
|
51
|
-
margin: 0 0 0 10px;
|
|
52
|
-
cursor: text;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
13
|
a {
|
|
56
14
|
|
|
57
15
|
font-size: $toggle-font-size-extra-large;
|
|
@@ -51,8 +51,27 @@
|
|
|
51
51
|
&.height-extra-large {
|
|
52
52
|
height: 15rem;
|
|
53
53
|
}
|
|
54
|
+
&.table {
|
|
55
|
+
margin-top: 0 !important;
|
|
56
|
+
}
|
|
57
|
+
&.table:focus + .toggle-input-currency-table-hover-pencil {
|
|
58
|
+
display:none;
|
|
59
|
+
}
|
|
54
60
|
|
|
55
61
|
}
|
|
62
|
+
.toggle-input-currency-table-hover-pencil{
|
|
63
|
+
display: block;
|
|
64
|
+
background: url('../assets/icons/edit-icon.svg') no-repeat;
|
|
65
|
+
background-size: 1.25rem;
|
|
66
|
+
background-position: center;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
width: 1.25rem;
|
|
69
|
+
height: 1.25rem;
|
|
70
|
+
position: absolute;
|
|
71
|
+
right: 1rem;
|
|
72
|
+
top: 50%;
|
|
73
|
+
transform: translateY(-50%);
|
|
74
|
+
}
|
|
56
75
|
|
|
57
76
|
.toggle-input-search-options-container{
|
|
58
77
|
position:relative;
|
|
@@ -1218,83 +1237,4 @@ $iconWidth:20px;
|
|
|
1218
1237
|
.drop-down-leave-to {
|
|
1219
1238
|
overflow: hidden;
|
|
1220
1239
|
max-height: 0;
|
|
1221
|
-
}
|
|
1222
|
-
|
|
1223
|
-
// Radio button mini
|
|
1224
|
-
|
|
1225
|
-
.toggle-input-radio-button-mini-switch {
|
|
1226
|
-
position: relative;
|
|
1227
|
-
display: inline-block;
|
|
1228
|
-
width: 52px;
|
|
1229
|
-
height: 28px;
|
|
1230
|
-
}
|
|
1231
|
-
|
|
1232
|
-
.toggle-input-radio-button-mini-switch input {
|
|
1233
|
-
opacity: 0;
|
|
1234
|
-
width: 0;
|
|
1235
|
-
height: 0;
|
|
1236
|
-
}
|
|
1237
|
-
|
|
1238
|
-
.toggle-input-radio-button-mini-slider {
|
|
1239
|
-
position: absolute;
|
|
1240
|
-
cursor: pointer;
|
|
1241
|
-
top: 0;
|
|
1242
|
-
left: 0;
|
|
1243
|
-
right: 0;
|
|
1244
|
-
bottom: 0;
|
|
1245
|
-
background-color: #ccc;
|
|
1246
|
-
-webkit-transition: .4s;
|
|
1247
|
-
transition: .4s;
|
|
1248
|
-
display: flex;
|
|
1249
|
-
align-items: center;
|
|
1250
|
-
border-radius: 34px;
|
|
1251
|
-
}
|
|
1252
|
-
|
|
1253
|
-
.toggle-input-radio-button-mini-slider:before {
|
|
1254
|
-
position: absolute;
|
|
1255
|
-
content: "";
|
|
1256
|
-
height: 22px;
|
|
1257
|
-
width: 22px;
|
|
1258
|
-
left: 4px;
|
|
1259
|
-
bottom: 3px;
|
|
1260
|
-
background-color: white;
|
|
1261
|
-
-webkit-transition: .4s;
|
|
1262
|
-
transition: .4s;
|
|
1263
|
-
border-radius: 50%;
|
|
1264
|
-
}
|
|
1265
|
-
|
|
1266
|
-
input:checked + .toggle-input-radio-button-mini-slider {
|
|
1267
|
-
background-color: #2196F3;
|
|
1268
|
-
}
|
|
1269
|
-
|
|
1270
|
-
input:focus + .toggle-input-radio-button-mini-slider {
|
|
1271
|
-
box-shadow: 0 0 1px #2196F3;
|
|
1272
|
-
}
|
|
1273
|
-
|
|
1274
|
-
input:checked + .toggle-input-radio-button-mini-slider:before {
|
|
1275
|
-
-webkit-transform: translateX(22px);
|
|
1276
|
-
-ms-transform: translateX(22px);
|
|
1277
|
-
transform: translateX(22px);
|
|
1278
|
-
}
|
|
1279
|
-
|
|
1280
|
-
.toggle-input-radio-button-mini-text-on {
|
|
1281
|
-
font-family: $toggle-font-family;
|
|
1282
|
-
font-size: 12px;
|
|
1283
|
-
color: #ffffff;
|
|
1284
|
-
margin-left: 7px;
|
|
1285
|
-
}
|
|
1286
|
-
.toggle-input-radio-button-mini-text-off {
|
|
1287
|
-
font-family: $toggle-font-family;
|
|
1288
|
-
font-size: 12px;
|
|
1289
|
-
color: #3A4A62;
|
|
1290
|
-
margin-left: 6px;
|
|
1291
|
-
}
|
|
1292
|
-
.toggle-input-radio-button-mini-switch-disabled {
|
|
1293
|
-
cursor: default !important;
|
|
1294
|
-
opacity: 0.5;
|
|
1295
|
-
}
|
|
1296
|
-
|
|
1297
|
-
.toggle-input-radio-button-mini-slider-disabled {
|
|
1298
|
-
cursor: default !important;
|
|
1299
|
-
opacity: 0.5;
|
|
1300
1240
|
}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<label :class="['toggle-input-radio-button-mini-switch', {'toggle-input-radio-button-mini-switch-disabled': disabled}]">
|
|
4
|
-
<input type="checkbox" :value="value" v-model="value" :disabled="disabled">
|
|
5
|
-
<span :class="['toggle-input-radio-button-mini-slider', {'toggle-input-radio-button-mini-slider-disabled': disabled}]">
|
|
6
|
-
<span class="toggle-input-radio-button-mini-text-on">On</span>
|
|
7
|
-
<span class="toggle-input-radio-button-mini-text-off">Off</span>
|
|
8
|
-
</span>
|
|
9
|
-
</label>
|
|
10
|
-
</div>
|
|
11
|
-
</template>
|
|
12
|
-
|
|
13
|
-
<script>
|
|
14
|
-
export default {
|
|
15
|
-
name: 'ToggleInputRadioButtonMini',
|
|
16
|
-
props: {
|
|
17
|
-
disabled: {
|
|
18
|
-
type: Boolean,
|
|
19
|
-
default: false
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
computed: {
|
|
23
|
-
value: {
|
|
24
|
-
get() {
|
|
25
|
-
return this.$attrs.value
|
|
26
|
-
},
|
|
27
|
-
set(value) {
|
|
28
|
-
this.$emit('input', value)
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
watch: {
|
|
33
|
-
value: function (val) {
|
|
34
|
-
this.$emit('input', val)
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
</script>
|