comand-component-library 4.0.61 → 4.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.0.61",
+  "version": "4.0.63",
   "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,17 @@
                         <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"
+                        innerClass="inner-class"
+                    >
+                        <div>Slot-Content</div>
+                        <div>Slot-Content</div>
+                    </CmdContainer>
                 </CmdWidthLimitationWrapper>
                 <!-- end container ------------------------------------------------------------------------------------------------------------------------------------------------------->
 

package/src/components/CmdContainer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="cmd-container" :class="containerClass">
+    <div class="cmd-container">
         <!-- begin cmd-headline -->
         <CmdHeadline
             v-if="cmdHeadline"
@@ -16,7 +16,7 @@
         <!-- end slot-content (one column/slot-item only) -->
 
         <!-- begin grid-/flex-container to wrap multiple columns/items -->
-        <div v-else :class="setInnerClass">
+        <div v-else :class="[setInnerClass, 'inner-slot-wrapper']">
             <!-- begin slot-content (multiple columns only) -->
             <slot></slot>
             <!-- end slot-content (multiple columns only) -->
@@ -75,6 +75,13 @@ export default {
                     value === "vertical"
             }
         },
+        /**
+         * define a class to set on inner div
+         */
+        innerClass: {
+            type: String,
+            required: false
+        },
         /**
          * properties for CmdHeadline-component
          */
@@ -101,6 +108,9 @@ export default {
     },
     computed: {
         containerClass() {
+
+        },
+        setInnerClass() {
             let htmlClass = null
             switch (this.containerType) {
                 case "grid":
@@ -117,21 +127,7 @@ export 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 ""
+            return htmlClass += " " + this.innerClass
         }
     }
 }