toggle-components-library 1.37.0-beta.0 → 1.37.0-beta.2
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/img/edit-icon.9a5af324.svg +1 -0
- package/dist/toggle-components-library.common.js +118 -82
- 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 +118 -82
- package/dist/toggle-components-library.umd.js.map +1 -1
- package/dist/toggle-components-library.umd.min.js +110 -110
- package/dist/toggle-components-library.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/edit-icon.svg +1 -0
- package/src/components/breadcrumb/ToggleBreadCrumb.vue +44 -13
- package/src/sass/includes/_as_breadcrumb.scss +41 -0
package/package.json
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#abb7c5"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg>
|
|
@@ -1,19 +1,25 @@
|
|
|
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
|
-
|
|
4
|
+
<template v-if="index === breadcrumb_computed.length - 1 && editable">
|
|
5
|
+
<span
|
|
6
|
+
contenteditable="true"
|
|
7
|
+
class="toggle-breadcrumb-editable-input"
|
|
8
|
+
@input="updateContent($event);"
|
|
9
|
+
>{{ crumb.name }}</span>
|
|
10
|
+
</template>
|
|
11
|
+
<template v-else>
|
|
12
|
+
<router-link :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && !isNuxt">{{ crumb.name }}</router-link>
|
|
13
|
+
<NuxtLink :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && isNuxt">{{ crumb.name }}</NuxtLink>
|
|
14
|
+
<i class="toggle-breadcrumb-arrow-right" v-if="crumb.link"></i>
|
|
15
|
+
<h1 class="toggle-breadcrumb-h1" v-if="!crumb.link">{{ crumb.name }}</h1>
|
|
16
|
+
</template>
|
|
8
17
|
</div>
|
|
9
18
|
</div>
|
|
10
19
|
</template>
|
|
11
20
|
|
|
12
21
|
<script>
|
|
13
|
-
|
|
14
|
-
|
|
15
22
|
export default {
|
|
16
|
-
|
|
17
23
|
mixins: [],
|
|
18
24
|
props: {
|
|
19
25
|
isNuxt: {
|
|
@@ -23,21 +29,46 @@ export default {
|
|
|
23
29
|
breadcrumb: {
|
|
24
30
|
type: Array,
|
|
25
31
|
required: false
|
|
32
|
+
},
|
|
33
|
+
editable: {
|
|
34
|
+
type: Boolean,
|
|
35
|
+
default: false,
|
|
36
|
+
required: false
|
|
37
|
+
},
|
|
38
|
+
maxChars: {
|
|
39
|
+
type: Number,
|
|
40
|
+
default: 50,
|
|
41
|
+
required: false
|
|
26
42
|
}
|
|
27
43
|
},
|
|
28
44
|
|
|
29
45
|
data: function () {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
46
|
+
return {
|
|
47
|
+
content: ''
|
|
48
|
+
};
|
|
33
49
|
},
|
|
34
50
|
|
|
35
51
|
computed: {
|
|
36
|
-
|
|
37
52
|
breadcrumb_computed() {
|
|
38
|
-
return this.isNuxt ?
|
|
53
|
+
return this.isNuxt ? this.breadcrumb : this.$route.meta.breadcrumb
|
|
39
54
|
},
|
|
40
|
-
}
|
|
55
|
+
},
|
|
56
|
+
|
|
57
|
+
methods: {
|
|
41
58
|
|
|
59
|
+
updateContent(event) {
|
|
60
|
+
// Limit the input to 50 characters
|
|
61
|
+
if (event.target.innerText.length >= this.maxChars) {
|
|
62
|
+
event.target.innerText = this.content;
|
|
63
|
+
|
|
64
|
+
// Move the cursor to the end of the input
|
|
65
|
+
document.getSelection().modify("move", "forward", "documentboundary");
|
|
66
|
+
|
|
67
|
+
} else {
|
|
68
|
+
this.content = event.target.innerText;
|
|
69
|
+
this.$emit('update:lastCrumb', this.content);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
42
73
|
}
|
|
43
74
|
</script>
|
|
@@ -10,6 +10,47 @@
|
|
|
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
|
+
}
|
|
31
|
+
|
|
32
|
+
.toggle-breadcrumb-editable-input:hover {
|
|
33
|
+
border: 1px solid #ccc;
|
|
34
|
+
background-color: $toggle-off-white;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.toggle-breadcrumb-editable-input:focus {
|
|
38
|
+
border: 1px solid #ccc;
|
|
39
|
+
background-color: $toggle-off-white;
|
|
40
|
+
outline: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.toggle-breadcrumb-editable-input::after {
|
|
44
|
+
content: '';
|
|
45
|
+
background-image: url('../assets/icons/edit-icon.svg');
|
|
46
|
+
background-repeat:no-repeat;
|
|
47
|
+
background-size:contain;
|
|
48
|
+
height: 22px;
|
|
49
|
+
width: 22px;
|
|
50
|
+
margin: 0 0 0 10px;
|
|
51
|
+
cursor: text;
|
|
52
|
+
}
|
|
53
|
+
|
|
13
54
|
a {
|
|
14
55
|
|
|
15
56
|
font-size: $toggle-font-size-extra-large;
|