comand-component-library 4.0.31 → 4.0.33
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/comand-component-library.js +661 -615
- package/dist/comand-component-library.umd.cjs +6 -6
- package/dist/media/images/user-images/fake-user-2.jpg +0 -0
- package/dist/media/images/user-images/fake-user-3.jpg +0 -0
- package/dist/media/images/user-images/fake-user-4.jpg +0 -0
- package/dist/media/images/user-images/fake-user-5.jpg +0 -0
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/ComponentLibrary.vue +35 -1
- package/src/assets/data/listOfComponents.json +3 -1
- package/src/componentSettingsDataAndControls.vue +56 -1
- package/src/components/CmdBox.vue +1 -1
- package/src/components/CmdContainer.vue +27 -1
- package/src/components/CmdImage.vue +2 -2
- package/src/components/CmdLink.vue +9 -4
- package/src/components/CmdWidthLimitationWrapper.vue +39 -24
@@ -1,5 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<div class="cmd-container">
|
2
|
+
<div class="cmd-container" :class="containerClass">
|
3
3
|
<div v-if="contentAboveSlot" v-html="contentAboveSlot"></div>
|
4
4
|
<slot></slot>
|
5
5
|
<div v-if="contentBelowSlot" v-html="contentBelowSlot"></div>
|
@@ -25,12 +25,38 @@ export default {
|
|
25
25
|
contentBelowSlot: {
|
26
26
|
type: String,
|
27
27
|
required: false
|
28
|
+
},
|
29
|
+
/**
|
30
|
+
* define container-type
|
31
|
+
*
|
32
|
+
* @allowedValues: "grid", "flex"
|
33
|
+
*/
|
34
|
+
containerType: {
|
35
|
+
type: String,
|
36
|
+
required: false
|
28
37
|
}
|
29
38
|
},
|
30
39
|
methods: {
|
31
40
|
addHandlerProvider() {
|
32
41
|
return ""
|
33
42
|
}
|
43
|
+
},
|
44
|
+
computed: {
|
45
|
+
containerClass() {
|
46
|
+
let htmlClass = null
|
47
|
+
switch(this.containerType) {
|
48
|
+
case "grid":
|
49
|
+
htmlClass = "grid-container-create-columns"
|
50
|
+
break
|
51
|
+
case "flex":
|
52
|
+
htmlClass = "flex-container vertical"
|
53
|
+
break
|
54
|
+
default:
|
55
|
+
htmlClass = null
|
56
|
+
break
|
57
|
+
}
|
58
|
+
return htmlClass
|
59
|
+
}
|
34
60
|
}
|
35
61
|
}
|
36
62
|
</script>
|
@@ -97,9 +97,9 @@
|
|
97
97
|
|
98
98
|
<!-- begin default-view -->
|
99
99
|
<figure v-else :class="['cmd-image', textAlign]">
|
100
|
-
<figcaption v-if="figcaption?.show && figcaption?.position === 'top'"
|
100
|
+
<figcaption v-if="figcaption?.show && figcaption?.position === 'top'" v-html="figcaption?.text" />
|
101
101
|
<img :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded" />
|
102
|
-
<figcaption v-if="figcaption?.show && figcaption?.position !== 'top'"
|
102
|
+
<figcaption v-if="figcaption?.show && figcaption?.position !== 'top'" v-html="figcaption?.text" />
|
103
103
|
</figure>
|
104
104
|
<!-- end default-view -->
|
105
105
|
</template>
|
@@ -33,16 +33,22 @@ export default {
|
|
33
33
|
props: {
|
34
34
|
/**
|
35
35
|
* set type of link
|
36
|
+
*
|
36
37
|
* @allowedValues: 'href', 'router', 'button'
|
37
38
|
*/
|
38
39
|
linkType: {
|
39
40
|
type: String,
|
40
|
-
default: "href"
|
41
|
+
default: "href",
|
42
|
+
validator(value) {
|
43
|
+
return value === "href" ||
|
44
|
+
value === "router" ||
|
45
|
+
value === "button"
|
46
|
+
}
|
41
47
|
},
|
42
48
|
/**
|
43
|
-
* set path
|
49
|
+
* set a path
|
44
50
|
*
|
45
|
-
* linkType must be 'href', 'router'
|
51
|
+
* linkType-property must be 'href', 'router'
|
46
52
|
*/
|
47
53
|
path: {
|
48
54
|
type: String,
|
@@ -66,7 +72,6 @@ export default {
|
|
66
72
|
},
|
67
73
|
/**
|
68
74
|
* displayed text
|
69
|
-
*
|
70
75
|
*/
|
71
76
|
text: {
|
72
77
|
type: String,
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<template>
|
2
2
|
<div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
|
3
3
|
<!-- begin slot-content in section -->
|
4
|
-
<section v-if="useInnerSection" :class="
|
4
|
+
<section v-if="useInnerSection" :class="setSectionClass" :id="anchorId">
|
5
5
|
<!-- begin cmd-headline -->
|
6
6
|
<CmdHeadline
|
7
7
|
v-if="cmdHeadline"
|
@@ -11,17 +11,15 @@
|
|
11
11
|
/>
|
12
12
|
<!-- end cmd-headline -->
|
13
13
|
|
14
|
-
<!-- begin slot-content (one column only) -->
|
15
|
-
<slot v-if="
|
16
|
-
<!-- end slot-content (one column only) -->
|
14
|
+
<!-- begin slot-content (one column/slot-item only) -->
|
15
|
+
<slot v-if="oneSlotItem"></slot>
|
16
|
+
<!-- end slot-content (one column/slot-item only) -->
|
17
17
|
|
18
18
|
<!-- begin grid-/flex-container to wrap multiple columns/items -->
|
19
|
-
<div v-else :class="
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
<!-- end slot-content (multiple columns only) -->
|
24
|
-
</div>
|
19
|
+
<div v-else :class="setInnerClass">
|
20
|
+
<!-- begin slot-content (multiple columns only) -->
|
21
|
+
<slot></slot>
|
22
|
+
<!-- end slot-content (multiple columns only) -->
|
25
23
|
</div>
|
26
24
|
<!-- end grid-/flex-container to wrap multiple columns/items -->
|
27
25
|
</section>
|
@@ -42,16 +40,9 @@
|
|
42
40
|
export default {
|
43
41
|
name: "CmdWidthLimitationWrapper",
|
44
42
|
props: {
|
45
|
-
|
46
|
-
type:
|
47
|
-
default:
|
48
|
-
validator(value) {
|
49
|
-
return value >= 0
|
50
|
-
}
|
51
|
-
},
|
52
|
-
useGrid: {
|
53
|
-
type: Boolean,
|
54
|
-
default: false
|
43
|
+
contentType: {
|
44
|
+
type: String,
|
45
|
+
default: "flex"
|
55
46
|
},
|
56
47
|
/**
|
57
48
|
* set a html-tag as inner tag
|
@@ -91,7 +82,7 @@ export default {
|
|
91
82
|
*
|
92
83
|
* innerWrapper-property must be true
|
93
84
|
*/
|
94
|
-
|
85
|
+
sectionClass: {
|
95
86
|
type: String,
|
96
87
|
required: false
|
97
88
|
},
|
@@ -102,6 +93,10 @@ export default {
|
|
102
93
|
type: String,
|
103
94
|
required: false
|
104
95
|
},
|
96
|
+
contentTypeOrientation: {
|
97
|
+
type: String,
|
98
|
+
default: "vertical"
|
99
|
+
},
|
105
100
|
/**
|
106
101
|
* properties for CmdHeadline-component
|
107
102
|
*
|
@@ -112,10 +107,16 @@ export default {
|
|
112
107
|
required: false
|
113
108
|
},
|
114
109
|
},
|
110
|
+
mounted() {
|
111
|
+
console.log("slot-length", this.$slots.default().length)
|
112
|
+
},
|
115
113
|
computed: {
|
116
|
-
|
117
|
-
|
118
|
-
|
114
|
+
oneSlotItem() {
|
115
|
+
return this.$slots.default().length === 1
|
116
|
+
},
|
117
|
+
setSectionClass() {
|
118
|
+
if (this.sectionClass) {
|
119
|
+
return this.sectionClass
|
119
120
|
}
|
120
121
|
if (this.innerComponent === "header") {
|
121
122
|
return "grid-container-create-columns"
|
@@ -125,6 +126,20 @@ export default {
|
|
125
126
|
}
|
126
127
|
return ""
|
127
128
|
},
|
129
|
+
setInnerClass() {
|
130
|
+
if(this.contentType === "grid") {
|
131
|
+
return "grid-container-create-columns"
|
132
|
+
}
|
133
|
+
|
134
|
+
if(this.contentType === "flex") {
|
135
|
+
if(this.contentTypeOrientation === "horizontal") {
|
136
|
+
return "flex-container"
|
137
|
+
} else if(this.contentTypeOrientation === "vertical") {
|
138
|
+
return "flex-container vertical"
|
139
|
+
}
|
140
|
+
}
|
141
|
+
return ""
|
142
|
+
},
|
128
143
|
setOuterId() {
|
129
144
|
if (this.innerComponent === "header") {
|
130
145
|
return "site-header"
|