comand-component-library 4.0.33 → 4.0.35

package/src/components/CmdContainer.vue

@@ -1,26 +1,49 @@
 <template>
-    <div class="cmd-container" :class="containerClass">
+    <div class="cmd-container">
+        <!-- begin cmd-headline -->
+        <CmdHeadline
+            v-if="cmdHeadline"
+            :pre-headline-text="cmdHeadline.preHeadlineText"
+            :headline-text="cmdHeadline.headlineText"
+            :headline-level="cmdHeadline.headlineLevel"
+        />
+        <!-- end cmd-headline -->
+
+        <!-- begin contentAboveSlot -->
         <div v-if="contentAboveSlot" v-html="contentAboveSlot"></div>
-        <slot></slot>
+        <!-- end contentAboveSlot -->
+
+        <!-- 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="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 -->
+
+        <!-- begin contentBelowSlot -->
         <div v-if="contentBelowSlot" v-html="contentBelowSlot"></div>
+        <!-- end contentBelowSlot -->
     </div>
 </template>
 
 <script>
-import EditMode from "../mixins/EditMode.vue"
 export default {
     name: "CmdContainer",
-    mixins: [EditMode],
     props: {
         /**
-         * define html-content to display above slot-content
+         * define (html-)content to display above slot-content
          */
         contentAboveSlot: {
             type: String,
             required: false
         },
         /**
-         * define html-content to display below slot-content
+         * define (html-)content to display below slot-content
          */
         contentBelowSlot: {
             type: String,
@@ -34,17 +57,46 @@ export default {
         containerType: {
             type: String,
             required: false
+        },
+        /**
+         * define content-orientation
+         *
+         * @allowedValues: "vertical", "horizontal"
+         */
+        contentOrientation: {
+            type: String,
+            default: "vertical",
+            validator(value) {
+                return value === "horizontal" ||
+                    value === "vertical"
+            }
+        },
+        /**
+         * properties for CmdHeadline-component
+         *
+         * @requiredForAccessibilty
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
         }
     },
     methods: {
         addHandlerProvider() {
             return ""
+        },
+        oneSlotItem() {
+            const vnodes = this.$slots.default();
+            if (vnodes.length === 1 && typeof vnodes[0].type === "symbol" && Array.isArray(vnodes[0].children)) {
+                return vnodes[0].children.length === 1
+            }
+            return vnodes.length === 1
         }
     },
     computed: {
         containerClass() {
             let htmlClass = null
-            switch(this.containerType) {
+            switch (this.containerType) {
                 case "grid":
                     htmlClass = "grid-container-create-columns"
                     break
@@ -56,6 +108,20 @@ export default {
                     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 ""
         }
     }
 }
@@ -63,6 +129,6 @@ export default {
 
 <style>
 .cmd-container {
-    min-height: 5rem;
+    min-height: 1rem;
 }
 </style>

package/src/components/CmdCookieDisclaimer.vue

@@ -345,6 +345,7 @@ export default {
 
     > p {
         text-align: center;
+        color: var(--color-scheme-text-color); /* must be assigned again, because content is placed by slot */
     }
 
     #form-cookies {

package/src/components/CmdHeadline.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- begin default-view -->
-    <div v-if="!editModeContext || settingsContext || mainSidebarContext"
+    <div v-if="!editModeContext || settingsContext || mainSidebarContext || headlineText"
          :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
         <template v-if="preHeadlineText">
             <component v-if="headlineText" :is="headlineTag">

package/src/components/CmdLoginForm.vue

@@ -10,7 +10,7 @@
         <!-- end CmdHeadline -->
 
         <!-- begin form elements -->
-        <div class="flex-container">
+        <div :class="['login-fields, flex-container', {'vertical': orientation === 'vertical'}]">
             <!-- begin CmdFormElement -->
             <CmdFormElement
                 element="input"
@@ -44,6 +44,10 @@
         </div>
         <!-- end form elements -->
 
+        <!-- begin slot for login-form -->
+        <slot name="login"></slot>
+        <!-- end slot for login-form -->
+
         <div class="option-wrapper flex-container">
             <template v-if="options.forgotPassword || options.createAccount">
                 <!-- begin link for 'forgot password' -->
@@ -59,30 +63,20 @@
                 </a>
                 <!-- end link for 'forgot password' -->
 
-                <!-- begin link-type 'href' for 'create account' -->
-                <a v-if="options.createAccount && options.createAccount.linkType === 'href'" :href="options.createAccount.path">
-                    <!-- begin CmdIcon -->
-                    <CmdIcon v-if="options.createAccount.icon?.show && options.createAccount.icon?.iconClass"
-                          :iconClass="options.createAccount.icon.iconClass"
-                          :type="options.createAccount.icon.iconType"
-                          :title="options.createAccount.icon.tooltip" />
-                    <!-- end CmdIcon -->
-                    <span v-if="options.createAccount.text">{{ options.createAccount.text }}</span>
-                </a>
-                <!-- end link-type 'href' for 'create account' -->
-
-                <!-- begin link-type 'router' for 'create account' -->
-                <router-link v-else-if="options.createAccount && options.createAccount.linkType === 'router'" :to="options.createAccount.path">
-                    <!-- begin CmdIcon -->
-                    <CmdIcon v-if="options.createAccount.icon && options.createAccount.icon.show && options.createAccount.icon.iconClass"
-                          :class="options.createAccount.icon.iconClass"
-                          :type="options.createAccount.icon.iconType"
-                          :title="options.createAccount.icon.tooltip" />
+                <!-- begin link for 'create account' -->
+                <template v-if="options.createAccount">
+                    <CmdLink
+                        :linkType="options.createAccount.linkType"
+                        :path="options.createAccount.path"
+                        :text="options.createAccount.text"
+                        :icon="{
+                            iconClass: options.createAccount.icon?.iconClass,
+                            tooltip: options.createAccount.icon?.tooltip,
+                            position: options.createAccount.icon?.position
+                        }"
                     />
-                    <!-- end CmdIcon -->
-                    <span v-if="options.createAccount.text">{{ options.createAccount.text }}</span>
-                </router-link>
-                <!-- end link-type 'router' for 'create account' -->
+                </template>
+                <!-- end link for 'create account' -->
             </template>
 
             <!-- begin link-type 'button' -->
@@ -134,8 +128,12 @@
         />
         <!-- end CmdFormElement -->
 
+        <!-- begin slot for send-login-form -->
+        <slot name="send-login"></slot>
+        <!-- end slot for send-login-form -->
+
         <div class="option-wrapper flex-container">
-            <a href="#" @click.prevent="toggleSendLoginView">
+            <a v-if="options.backToLoginForm" href="#" @click.prevent="toggleSendLoginView">
                 <!-- begin CmdIcon -->
                 <CmdIcon
                     v-if="options.backToLoginForm && options.backToLoginForm.icon && options.backToLoginForm.icon.show && options.backToLoginForm.icon.iconClass"
@@ -151,19 +149,19 @@
 
             <!-- begin link-type 'button' -->
             <button
-                v-if="buttons.sendLogin.linkType === 'button'"
-                :type="buttons.sendLogin.type === 'submit' ? 'submit' : 'button'"
-                :class="['button', { primary: buttons.sendLogin.primary }]"
+                v-if="buttons.sendLogin?.linkType === 'button'"
+                :type="buttons.sendLogin?.type === 'submit' ? 'submit' : 'button'"
+                :class="['button', { primary: buttons.sendLogin?.primary }]"
                 :disabled="buttonSendLoginDisabled"
             >
                 <!-- begin CmdIcon -->
                 <CmdIcon
-                    v-if="buttons.sendLogin.icon?.iconClass"
-                    :iconClass="buttons.sendLogin.icon?.iconClass"
-                    :title="buttons.sendLogin.icon?.tooltip"
+                    v-if="buttons.sendLogin?.icon?.iconClass"
+                    :iconClass="buttons.sendLogin?.icon?.iconClass"
+                    :title="buttons.sendLogin?.icon?.tooltip"
                 />
                 <!-- end CmdIcon -->
-                <span v-if="buttons.sendLogin.text">{{ buttons.sendLogin.text }}</span>
+                <span v-if="buttons.sendLogin?.text">{{ buttons.sendLogin?.text }}</span>
             </button>
             <!-- end link-type 'button' -->
         </div>
@@ -199,6 +197,18 @@ export default {
                 }
             }
         },
+        /**
+         * orientation for inputfields
+         *
+         * @allowedValues 'vertical', 'horizontal'
+         */
+        orientation: {
+            type: String,
+            default: null,
+            validator(event) {
+                return event === "vertical" || event === "horizontal"
+            }
+        },
         /**
          * text used as legend for login-fieldset
          *
@@ -441,6 +451,14 @@ export default {
 <style>
 /* begin cmd-login-form ---------------------------------------------------------------------------------------- */
 .cmd-login-form {
+    .login-fields {
+        &.vertical {
+           .cmd-form-element {
+               width: 100%;
+           }
+        }
+    }
+
     .option-wrapper {
         align-items: center;
 

package/src/components/CmdWidthLimitationWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
+    <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}" ref="width-limitation-wrapper">
         <!-- begin slot-content in section -->
         <section v-if="useInnerSection" :class="setSectionClass" :id="anchorId">
             <!-- begin cmd-headline -->
@@ -12,7 +12,7 @@
             <!-- end cmd-headline -->
 
             <!-- begin slot-content (one column/slot-item only) -->
-            <slot v-if="oneSlotItem"></slot>
+            <slot v-if="oneSlotItem()"></slot>
             <!-- end slot-content (one column/slot-item only) -->
 
             <!-- begin grid-/flex-container to wrap multiple columns/items -->
@@ -40,7 +40,12 @@
 export default {
     name: "CmdWidthLimitationWrapper",
     props: {
-        contentType: {
+        /**
+         * define container-type
+         *
+         * @allowedValues: "grid", "flex"
+         */
+        containerType: {
             type: String,
             default: "flex"
         },
@@ -93,9 +98,18 @@ export default {
             type: String,
             required: false
         },
-        contentTypeOrientation: {
+        /**
+         * define content-orientation
+         *
+         * @allowedValues: "vertical", "horizontal"
+         */
+        contentOrientation: {
             type: String,
-            default: "vertical"
+            default: "vertical",
+            validator(value) {
+                return value === "horizontal" ||
+                    value === "vertical"
+            }
         },
         /**
          * properties for CmdHeadline-component
@@ -105,15 +119,9 @@ export default {
         cmdHeadline: {
             type: Object,
             required: false
-        },
-    },
-    mounted() {
-        console.log("slot-length", this.$slots.default().length)
+        }
     },
     computed: {
-        oneSlotItem() {
-            return this.$slots.default().length === 1
-        },
         setSectionClass() {
             if (this.sectionClass) {
                 return this.sectionClass
@@ -127,14 +135,14 @@ export default {
             return ""
         },
         setInnerClass() {
-            if(this.contentType === "grid") {
+            if(this.containerType === "grid") {
                 return "grid-container-create-columns"
             }
 
-            if(this.contentType === "flex") {
-                if(this.contentTypeOrientation === "horizontal") {
+            if(this.containerType === "flex") {
+                if(this.contentOrientation === "horizontal") {
                     return "flex-container"
-                } else if(this.contentTypeOrientation === "vertical") {
+                } else if(this.contentOrientation === "vertical") {
                     return "flex-container vertical"
                 }
             }
@@ -149,6 +157,15 @@ export default {
             }
             return ""
         }
+    },
+    methods: {
+        oneSlotItem() {
+            const vnodes = this.$slots.default();
+            if (vnodes.length === 1 && typeof vnodes[0].type === "symbol" && Array.isArray(vnodes[0].children)) {
+                return vnodes[0].children.length === 1
+            }
+            return vnodes.length === 1
+        }
     }
 }
 </script>