comand-component-library 4.0.34 → 4.0.36

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/CmdForm.vue

@@ -2,7 +2,7 @@
     <form class="cmd-form" :action="formAction" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}" :novalidate="novalidate">
         <template v-if="useFieldset">
             <fieldset class="flex-container">
-                <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
+                <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
                 <!-- begin default-slot-content -->
                 <slot v-if="useSlot"></slot>
                 <!-- end default-slot-content -->
@@ -80,6 +80,22 @@ export default {
             type: String,
             required: false
         },
+        /**
+         * legend for form
+         *
+         * useFieldset-property must be activated
+         *
+         * @requiredForAccessiblity: true
+         */
+        legend: {
+            default() {
+                return {
+                    show: true,
+                    align: "left",
+                    text: "Legend"
+                }
+            }
+        },
         /**
          * activate if form-elements should be given by slot
          */
@@ -119,26 +135,6 @@ export default {
             type: Boolean,
             default: true
         },
-        /**
-         * toggle visibility for legend-text
-         *
-         * useFieldset must be activated
-         */
-        showLegend: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * text for legend
-         *
-         * useFieldset must be activated
-         *
-         * @requiredForAccessibility: true
-         */
-        textLegend: {
-            type: String,
-            required: false
-        },
         /**
          * submit-button to submit all form-data
          */
@@ -217,12 +213,17 @@ export default {
             color: var(--error-color);
         }
 
-        :where(input, select, textarea):valid:focus[required],
+        :where(input, select, textarea):user-valid:focus[required],
         select:invalid:focus[required] option:not(:first-child) {
             color: var(--success-color);
         }
     }
 
+    legend.align-left {
+        left: 0;
+        right: auto;
+    }
+
     &.error {
         fieldset, *:invalid {
             border-color: var(--error-color);

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

@@ -1,7 +1,7 @@
 <template>
     <!-- begin login-form -->
     <fieldset v-show="!sendLogin" class="cmd-login-form flex-container">
-        <legend :class="{hidden : !showLegend}">{{ textLegendLoginForm }}</legend>
+        <legend :class="{hidden : !legendLoginForm.show, 'align-left': legendLoginForm.align === 'left'}">{{ legendLoginForm.text }}</legend>
         <!-- begin CmdHeadline -->
         <CmdHeadline
             v-if="cmdHeadlineLoginForm"
@@ -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' -->
@@ -110,7 +104,7 @@
 
     <!-- begin send-login-form -->
     <fieldset v-show="sendLogin" class="cmd-login-form flex-container">
-        <legend :class="{'hidden' : !showLegend}">{{ textLegendForgotLoginForm }}</legend>
+        <legend :class="{hidden : !legendForgotLoginForm.show, 'align-left': legendForgotLoginForm.align === 'left'}">{{ legendForgotLoginForm .text }}</legend>
         <!-- begin CmdHeadline -->
         <CmdHeadline
             v-if="cmdHeadlineSendLoginForm"
@@ -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>
@@ -200,13 +198,31 @@ export default {
             }
         },
         /**
-         * text used as legend for login-fieldset
+         * orientation for inputfields
          *
-         * @requiredForAccessibility: true
+         * @allowedValues 'vertical', 'horizontal'
          */
-        textLegendLoginForm: {
+        orientation: {
             type: String,
-            default: "Login form"
+            default: null,
+            validator(event) {
+                return event === "vertical" || event === "horizontal"
+            }
+        },
+        /**
+         * options for legend for login-fieldset
+         *
+         * @requiredForAccessibility: true
+         */
+        legendLoginForm: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    align: "right",
+                    text: "Login form"
+                }
+            }
         },
         /**
          * toggle legend visibility
@@ -220,9 +236,15 @@ export default {
          *
          * @requiredForAccessibility: true
         */
-        textLegendForgotLoginForm: {
-            type: String,
-            default: "Forgot login form"
+        legendForgotLoginForm: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    align: 'right"',
+                    text: 'Forgot login form'
+                }
+            }
         },
         /**
          * properties for CmdHeadline-component for login-form
@@ -441,7 +463,26 @@ export default {
 <style>
 /* begin cmd-login-form ---------------------------------------------------------------------------------------- */
 .cmd-login-form {
+    .cmd-headline {
+        flex: none;
+        margin: 0;
+    }
+
+    legend.align-left {
+        left: 0;
+        right: auto;
+    }
+
+    .login-fields {
+        &.vertical {
+           .cmd-form-element {
+               width: 100%;
+           }
+        }
+    }
+
     .option-wrapper {
+        flex: none;
         align-items: center;
 
         > a:not(.button) {

package/src/components/CmdSiteSearch.vue

@@ -1,7 +1,7 @@
 <template>
     <fieldset class="cmd-box-site-search flex-container">
         <!-- begin legend -->
-        <legend :class="{'hidden' : !showLegend}">{{ textLegend }}</legend>
+        <legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
         <!-- end legend -->
 
         <!-- begin CmdHeadline -->
@@ -160,22 +160,20 @@ export default {
             default: true
         },
         /**
-         * toggle legend visibility
+         * legend for form
          *
-         * textLegend must be set
-         */
-        showLegend: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * text for legend
+         * useFieldset-property must be activated
          *
-         * @requiredForAccessibility: true
+         * @requiredForAccessiblity: true
          */
-        textLegend: {
-            type: String,
-            required: false
+        legend: {
+            default() {
+                return {
+                    show: true,
+                    align: "left",
+                    text: "Legend"
+                }
+            }
         },
         /**
          * send search result from outside to display inside this component

package/src/components/CmdWidthLimitationWrapper.vue

@@ -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,7 +119,7 @@ export default {
         cmdHeadline: {
             type: Object,
             required: false
-        },
+        }
     },
     computed: {
         setSectionClass() {
@@ -121,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"
                 }
             }