comand-component-library 4.0.31 → 4.0.33

package/src/components/CmdContainer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="cmd-container">
+    <div class="cmd-container" :class="containerClass">
         <div v-if="contentAboveSlot" v-html="contentAboveSlot"></div>
         <slot></slot>
         <div v-if="contentBelowSlot" v-html="contentBelowSlot"></div>
@@ -25,12 +25,38 @@ export default {
         contentBelowSlot: {
             type: String,
             required: false
+        },
+        /**
+         * define container-type
+         *
+         * @allowedValues: "grid", "flex"
+         */
+        containerType: {
+            type: String,
+            required: false
         }
     },
     methods: {
         addHandlerProvider() {
             return ""
         }
+    },
+    computed: {
+        containerClass() {
+            let htmlClass = null
+            switch(this.containerType) {
+                case "grid":
+                    htmlClass = "grid-container-create-columns"
+                    break
+                case "flex":
+                    htmlClass = "flex-container vertical"
+                    break
+                default:
+                    htmlClass = null
+                    break
+            }
+            return htmlClass
+        }
     }
 }
 </script>

package/src/components/CmdImage.vue

@@ -97,9 +97,9 @@
 
     <!-- begin default-view -->
     <figure v-else :class="['cmd-image', textAlign]">
-        <figcaption v-if="figcaption?.show && figcaption?.position === 'top'">{{ figcaption?.text }}</figcaption>
+        <figcaption v-if="figcaption?.show && figcaption?.position === 'top'" v-html="figcaption?.text" />
         <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded" />
-        <figcaption v-if="figcaption?.show && figcaption?.position !== 'top'">{{ figcaption?.text }}</figcaption>
+        <figcaption v-if="figcaption?.show && figcaption?.position !== 'top'" v-html="figcaption?.text" />
     </figure>
     <!-- end default-view -->
 </template>

package/src/components/CmdLink.vue

@@ -33,16 +33,22 @@ export default {
     props: {
         /**
          * set type of link
+         *
          * @allowedValues: 'href', 'router', 'button'
          */
         linkType: {
             type: String,
-            default: "href"
+            default: "href",
+            validator(value) {
+                return value === "href" ||
+                    value === "router" ||
+                    value === "button"
+            }
         },
         /**
-         * set path
+         * set a path
          * 
-         * linkType must be 'href', 'router'
+         * linkType-property must be 'href', 'router'
          */
         path: {
             type: String,
@@ -66,7 +72,6 @@ export default {
         },
         /**
          * displayed text
-         *
          */
         text: {
             type: String,

package/src/components/CmdWidthLimitationWrapper.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
         <!-- begin slot-content in section -->
-        <section v-if="useInnerSection" :class="setInnerClass" :id="anchorId">
+        <section v-if="useInnerSection" :class="setSectionClass" :id="anchorId">
             <!-- begin cmd-headline -->
             <CmdHeadline
                 v-if="cmdHeadline"
@@ -11,17 +11,15 @@
             />
             <!-- end cmd-headline -->
 
-            <!-- begin slot-content (one column only) -->
-            <slot v-if="numberOfColumns === 1" ></slot>
-            <!-- end slot-content (one column only) -->
+            <!-- begin slot-content (one column/slot-item only) -->
+            <slot v-if="oneSlotItem"></slot>
+            <!-- end slot-content (one column/slot-item only) -->
 
             <!-- begin grid-/flex-container to wrap multiple columns/items -->
-            <div v-else :class="useGrid ? 'grid-container-create-columns' : 'flex-container'">
-                <div v-for="index in numberOfColumns" :key="`i${index}`" :class="useGrid ? 'grid-item' : 'flex-item'">
-                    <!-- begin slot-content (multiple columns only) -->
-                    <slot></slot>
-                    <!-- end slot-content (multiple columns only) -->
-                </div>
+            <div v-else :class="setInnerClass">
+                <!-- begin slot-content (multiple columns only) -->
+                <slot></slot>
+                <!-- end slot-content (multiple columns only) -->
             </div>
             <!-- end grid-/flex-container to wrap multiple columns/items -->
         </section>
@@ -42,16 +40,9 @@
 export default {
     name: "CmdWidthLimitationWrapper",
     props: {
-        numberOfColumns: {
-            type: Number,
-            default: 1,
-            validator(value) {
-                return value >= 0
-            }
-        },
-        useGrid: {
-            type: Boolean,
-            default: false
+        contentType: {
+            type: String,
+            default: "flex"
         },
         /**
          * set a html-tag as inner tag
@@ -91,7 +82,7 @@ export default {
          *
          * innerWrapper-property must be true
          */
-        innerClass: {
+        sectionClass: {
             type: String,
             required: false
         },
@@ -102,6 +93,10 @@ export default {
             type: String,
             required: false
         },
+        contentTypeOrientation: {
+            type: String,
+            default: "vertical"
+        },
         /**
          * properties for CmdHeadline-component
          *
@@ -112,10 +107,16 @@ export default {
             required: false
         },
     },
+    mounted() {
+        console.log("slot-length", this.$slots.default().length)
+    },
     computed: {
-        setInnerClass() {
-            if (this.innerClass) {
-                return this.innerClass
+        oneSlotItem() {
+            return this.$slots.default().length === 1
+        },
+        setSectionClass() {
+            if (this.sectionClass) {
+                return this.sectionClass
             }
             if (this.innerComponent === "header") {
                 return "grid-container-create-columns"
@@ -125,6 +126,20 @@ export default {
             }
             return ""
         },
+        setInnerClass() {
+            if(this.contentType === "grid") {
+                return "grid-container-create-columns"
+            }
+
+            if(this.contentType === "flex") {
+                if(this.contentTypeOrientation === "horizontal") {
+                    return "flex-container"
+                } else if(this.contentTypeOrientation === "vertical") {
+                    return "flex-container vertical"
+                }
+            }
+            return ""
+        },
         setOuterId() {
             if (this.innerComponent === "header") {
                 return "site-header"