comand-component-library 4.0.30 → 4.0.32

package/src/components/CmdContainer.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="cmd-container">
-        <div v-html="contentAboveSlot"></div>
+    <div class="cmd-container" :class="containerClass">
+        <div v-if="contentAboveSlot" v-html="contentAboveSlot"></div>
         <slot></slot>
-        <div v-html="contentBelowSlot"></div>
+        <div v-if="contentBelowSlot" v-html="contentBelowSlot"></div>
     </div>
 </template>
 
@@ -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

@@ -16,6 +16,7 @@
             <figure :class="['cmd-image flex-container no-gap vertical', textAlign]">
                 <!-- begin figcaption above image -->
                 <template v-if="figcaption?.show && figcaption?.position === 'top'">
+                    <!-- begin CmdFormElement -->
                     <CmdFormElement
                         v-if="slotProps.editing"
                         element="input"
@@ -25,7 +26,8 @@
                         labelText="Text figcaption"
                         v-model="editableFigcaptionText"
                     />
-                    <figcaption v-else-if="figcaption?.text">{{ figcaption?.text }}</figcaption>
+                    <!-- end CmdFormElement -->
+                    <figcaption v-else-if="figcaption?.text" v-html="figcaption?.text" />
                 </template>
                 <!-- end figcaption above image -->
 
@@ -62,6 +64,7 @@
 
                 <!-- begin figcaption below image -->
                 <template v-if="figcaption?.show && figcaption?.position !== 'top'">
+                    <!-- begin CmdFormElement -->
                     <CmdFormElement
                         v-if="slotProps.editing"
                         element="input"
@@ -73,12 +76,15 @@
                         v-model="editableFigcaptionText"
                         placeholder="figcaption"
                     />
-                    <figcaption v-else-if="figcaption?.text">{{ figcaption?.text }}</figcaption>
+                    <!-- end CmdFormElement -->
+                    <figcaption v-else-if="figcaption?.text" v-html="figcaption?.text" />
                 </template>
                 <!-- end figcaption below image -->
 
                 <!-- begin show placeholder if no image exists (and component is not edited) -->
-                <button v-if="!slotProps.editing && !imageSource" type="button" class="button confirm"
+                <button v-if="!slotProps.editing && !imageSource"
+                        type="button"
+                        class="button confirm"
                         @click="onAddItem">
                     <span class="icon-add"></span>
                     <span>Add new image</span>
@@ -91,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>
@@ -112,7 +118,7 @@ export default {
             mediumMaxWidth: 1023,
             smallMaxWidth: 600,
             currentWindowWidth: window.innerWidth,
-            allowedFileExtensions: ["jpg", "jpeg", "png", "webp"],
+            allowedFileExtensions: ["gif", "jpg", "jpeg", "png", "webp", "svg"],
             uploadInitiated: false,
             allowDrop: false,
             showFigcaption: true,

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"
@@ -12,16 +12,14 @@
             <!-- end cmd-headline -->
 
             <!-- begin slot-content (one column only) -->
-            <slot v-if="numberOfColumns === 1" ></slot>
+            <slot v-if="numberOfColumns === 1"></slot>
             <!-- end slot-content (one column 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>
@@ -49,9 +47,9 @@ export default {
                 return value >= 0
             }
         },
-        useGrid: {
-            type: Boolean,
-            default: false
+        contentType: {
+            type: String,
+            default: "flex"
         },
         /**
          * set a html-tag as inner tag
@@ -91,7 +89,7 @@ export default {
          *
          * innerWrapper-property must be true
          */
-        innerClass: {
+        sectionClass: {
             type: String,
             required: false
         },
@@ -102,6 +100,10 @@ export default {
             type: String,
             required: false
         },
+        contentTypeOrientation: {
+            type: String,
+            default: "horizontal"
+        },
         /**
          * properties for CmdHeadline-component
          *
@@ -113,9 +115,9 @@ export default {
         },
     },
     computed: {
-        setInnerClass() {
-            if (this.innerClass) {
-                return this.innerClass
+        setSectionClass() {
+            if (this.sectionClass) {
+                return this.sectionClass
             }
             if (this.innerComponent === "header") {
                 return "grid-container-create-columns"
@@ -125,6 +127,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"

package/src/index.js

@@ -22,6 +22,7 @@ export { default as CmdImage } from '@/components/CmdImage.vue'
 export { default as CmdImageGallery } from '@/components/CmdImageGallery.vue'
 export { default as CmdImageZoom } from '@/components/CmdImageZoom.vue'
 export { default as CmdInputGroup } from '@/components/CmdInputGroup.vue'
+export { default as CmdLink } from '@/components/CmdLink.vue'
 export { default as CmdListOfLinks } from '@/components/CmdListOfLinks.vue'
 export { default as CmdLoginForm } from '@/components/CmdLoginForm.vue'
 export { default as CmdMainNavigation } from '@/components/CmdMainNavigation.vue'