comand-component-library 4.0.60 → 4.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.0.60",
+  "version": "4.0.62",
   "private": false,
   "type": "module",
   "license": "GPL-3.0-only",

package/src/ComponentLibrary.vue

@@ -1273,12 +1273,13 @@
                         <a href="#" class="icon-cog" title="Open Component Settings"
                            @click.prevent="openSettingsSidebar('CmdContainer')"></a>
                     </h2>
+                    <h3>Default Container</h3>
                     <CmdContainer
                         style="border: 1px dotted gray"
                         ref="CmdContainer"
                         v-bind="cmdContainerSettingsData"
                     />
-
+                    <h3>Container with vertical slots</h3>
                     <CmdContainer
                         style="border: 1px dotted gray"
                         ref="CmdContainer"
@@ -1288,6 +1289,16 @@
                         <p>Slot-content</p>
                         <p>Slot-content</p>
                     </CmdContainer>
+                    <h3>Container with horizontal slots</h3>
+                    <CmdContainer
+                        style="border: 1px dotted gray"
+                        ref="CmdContainer"
+                        v-bind="cmdContainerSettingsData"
+                        contentOrientation="horizontal"
+                    >
+                        <div>Slot-Content</div>
+                        <div>Slot-Content</div>
+                    </CmdContainer>
                 </CmdWidthLimitationWrapper>
                 <!-- end container ------------------------------------------------------------------------------------------------------------------------------------------------------->
 

package/src/components/CmdContainer.vue

@@ -63,6 +63,8 @@ export default {
         /**
          * define content-orientation
          *
+         * containerType-property must be set to "flex"
+         *
          * @allowedValues: "vertical", "horizontal"
          */
         contentOrientation: {
@@ -99,33 +101,26 @@ export default {
     },
     computed: {
         containerClass() {
+
+        },
+        setInnerClass() {
             let htmlClass = null
             switch (this.containerType) {
                 case "grid":
                     htmlClass = "grid-container-create-columns"
                     break
                 case "flex":
-                    htmlClass = "flex-container vertical"
+                    if(this.contentOrientation === "horizontal") {
+                        htmlClass = "flex-container"
+                    } else if(this.contentOrientation === "vertical") {
+                        htmlClass = "flex-container vertical"
+                    }
                     break
                 default:
                     htmlClass = null
                     break
             }
             return htmlClass
-        },
-        setInnerClass() {
-            if(this.containerType === "grid") {
-                return "grid-container-create-columns"
-            }
-
-            if(this.containerType === "flex") {
-                if(this.contentOrientation === "horizontal") {
-                    return "flex-container"
-                } else if(this.contentOrientation === "vertical") {
-                    return "flex-container vertical"
-                }
-            }
-            return ""
         }
     }
 }