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.
@@ -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'">{{ figcaption?.text }}</figcaption>
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'">{{ figcaption?.text }}</figcaption>
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="setInnerClass" :id="anchorId">
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="numberOfColumns === 1" ></slot>
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="useGrid ? 'grid-container-create-columns' : 'flex-container'">
20
- <div v-for="index in numberOfColumns" :key="`i${index}`" :class="useGrid ? 'grid-item' : 'flex-item'">
21
- <!-- begin slot-content (multiple columns only) -->
22
- <slot></slot>
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
- numberOfColumns: {
46
- type: Number,
47
- default: 1,
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
- innerClass: {
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
- setInnerClass() {
117
- if (this.innerClass) {
118
- return this.innerClass
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"