comand-component-library 4.0.15 → 4.0.17

package/src/components/CmdHeadline.vue

@@ -14,7 +14,7 @@
                     <!-- end pre-headline-text -->
 
                     <span>
-                        <!-- being slot -->
+                        <!-- begin slot -->
                          <slot>{{ headlineText }}</slot>
                          <!-- end slot -->
                     </span>
@@ -27,7 +27,7 @@
             <!-- end CmdIcon -->
 
             <span>
-                <!-- being slot -->
+                <!-- begin slot -->
                 <slot>{{ headlineText }}</slot>
                 <!-- end slot -->
             </span>
@@ -74,13 +74,13 @@
                         <span class="pre-headline-text">{{ preHeadlineText }}</span>
                         <!-- end pre-headline-text -->
 
-                        <!-- being slot -->
+                        <!-- begin slot -->
                         <slot>{{ headlineText }}</slot>
                         <!-- end slot -->
                     </component>
                 </template>
                 <component v-else-if="headlineText" :is="headlineTag">
-                    <!-- being slot -->
+                    <!-- begin slot -->
                     <slot>{{ headlineText }}</slot>
                     <!-- end slot -->
                 </component>

package/src/components/CmdImage.vue

@@ -92,7 +92,7 @@
     <!-- begin default-view -->
     <figure v-else :class="['cmd-image', textAlign]">
         <figcaption v-if="figcaption?.show && figcaption?.position === 'top'">{{ figcaption?.text }}</figcaption>
-        <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip"/>
+        <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded" />
         <figcaption v-if="figcaption?.show && figcaption?.position !== 'top'">{{ figcaption?.text }}</figcaption>
     </figure>
     <!-- end default-view -->
@@ -248,6 +248,9 @@ export default {
         }
     },
     methods: {
+        onImageLoaded(event) {
+            this.$emit("image-loaded", event)
+        },
         itemProvider() {
             const editModeConfig = this.editModeConfig?.itemProviderOverwrite?.()
             return {

package/src/components/CmdLoginForm.vue

@@ -9,7 +9,7 @@
         />
         <!-- end CmdHeadline -->
 
-        <!-- being form elements -->
+        <!-- begin form elements -->
         <div class="flex-container">
             <!-- begin CmdFormElement -->
             <CmdFormElement

package/src/components/CmdMainNavigation.vue

@@ -96,7 +96,7 @@
                             <!-- end type === router -->
 
                             <!-- begin sub-level 2 -->
-                            <ul v-if="navigationSubEntry.subentries" :aria-expanded="openSubentry ? 'true' : 'false'">
+                            <ul v-if="navigationSubEntry.subentries?.length" :aria-expanded="openSubentry ? 'true' : 'false'">
                                 <li v-for="(navigationSubSubEntry, subsubindex) in navigationSubEntry.subentries"
                                     :key="subsubindex">
                                     <!-- begin type === href -->

package/src/components/CmdSiteHeader.vue

@@ -1,6 +1,14 @@
 <template>
     <div
-        :class="['cmd-site-header site-header', {sticky: sticky, 'navigation-inline': navigationInline, 'off-canvas-right': cmdMainNavigation?.offcanvasPosition === 'right'}]"
+        ref="site-header"
+        :class="[
+            'cmd-site-header site-header',
+            {
+                sticky: sticky,
+                'navigation-inline': navigationInline,
+                'off-canvas-right': cmdMainNavigation?.offcanvasPosition === 'right'
+            }
+        ]"
         role="banner">
         <!-- begin slot for elements above header -->
         <div v-if="$slots.topheader" class="top-header">
@@ -8,6 +16,7 @@
         </div>
         <!-- end slot for elements above header -->
 
+        <!-- begin (inner) header -->
         <header
             :class="[
                 useGrid ? 'grid-container-create-columns': 'flex-container',
@@ -27,6 +36,7 @@
                 <CmdCompanyLogo
                     v-if="cmdCompanyLogo"
                     v-bind="cmdCompanyLogo"
+                    @image-loaded="onImageLoaded"
                 />
                 <!-- end CmdCompanyLogo -->
 
@@ -43,6 +53,7 @@
             </template>
             <!-- end content given by data -->
         </header>
+        <!-- end (inner) header -->
 
         <!-- begin CmdMainNavigation -->
         <CmdMainNavigation
@@ -61,6 +72,11 @@
 export default {
     name: "CmdSiteHeader",
     emits: ["offcanvas"],
+    data() {
+        return {
+            defaultLogoHeight: ""
+        }
+    },
     props: {
         /**
          * use only if default-button of inner navigation-component should not be used
@@ -85,6 +101,24 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * set if header (incl. logo) should be resized if user scrolls page
+         *
+         * scrollContainerToResizeHeader-property must be defined
+         */
+        resizeHeaderOnScroll: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * set selector the user scrolls to resize header
+         *
+         * resizeHeaderOnScroll-property must be activated
+         */
+        scrollContainerToResizeHeader: {
+            type: String,
+            default: "#page-wrapper"
+        },
         /**
          * use a grid for positioning of inner-elements (else a flex-container will be used)
          *
@@ -109,10 +143,34 @@ export default {
             required: false
         }
     },
+    mounted() {
+        if (this.resizeHeaderOnScroll) {
+            const scrollContainer = document.querySelector(this.scrollContainerToResizeHeader);
+
+            scrollContainer.addEventListener("scroll", function () {
+                const header = document.querySelector(".cmd-site-header > header");
+
+                if (scrollContainer.scrollTop > 0) {
+                    header.classList.add("resize-on-scroll");
+                } else {
+                    header.classList.remove("resize-on-scroll");
+                }
+            });
+        }
+    },
     methods: {
+        onImageLoaded(event) {
+            this.defaultLogoHeight = (event.target.height / 10) + "rem"
+        },
         emitOffcanvasStatus(event) {
             this.$emit("offcanvas", event)
         }
+    },
+    watch: {
+        defaultLogoHeight() {
+            const logo = this.$refs["site-header"].querySelector(".cmd-company-logo img")
+            logo.style.height = this.defaultLogoHeight
+        }
     }
 }
 </script>
@@ -120,6 +178,8 @@ export default {
 <style>
 /* begin cmd-site-header ---------------------------------------------------------------------------------------- */
 .cmd-site-header {
+    --logo-width-on-scroll: 50%;
+
     grid-area: site-header;
     display: flex;
     flex-direction: column;
@@ -130,17 +190,48 @@ export default {
     &.sticky {
         position: sticky;
         z-index: 300;
+
+        header {
+            --header-scroll-animation: var(--default-transition);
+            transition: var(--header-scroll-animation);
+
+            .cmd-company-logo {
+                figure {
+                    img {
+                        transform-origin: top left;
+                        transition: var(--header-scroll-animation);
+                        margin: 0;
+                        width: 100%;
+                    }
+                }
+            }
+
+            &.resize-on-scroll {
+                padding-top: var(--default-padding);
+                padding-bottom: var(--default-padding);
+                transition: var(--header-scroll-animation);
+
+                .cmd-company-logo {
+                    figure {
+                        img {
+                            transition: var(--header-scroll-animation);
+                            width: var(--logo-width-on-scroll);
+                        }
+                    }
+                }
+            }
+        }
     }
 
     header, .cmd-main-navigation nav, .cmd-list-of-links {
         max-width: var(--max-width);
         width: 100%; /* stretch flex-item */
-        margin: 0 auto;
         padding: 0 var(--default-padding);
     }
 
     .cmd-main-navigation nav {
         width: auto;
+        margin: 0 0 0 auto; /* align nav to right */
     }
 
     .top-header {

package/src/components/CmdSlideButton.vue

@@ -3,7 +3,7 @@
        @click.prevent
        :class="['cmd-slide-button', 'button', 'keep-behavior-on-small-devices', slideButtonType]"
        :title="getDirection.tooltip">
-        <!-- being CmdIcon -->
+        <!-- begin CmdIcon -->
         <CmdIcon :iconClass="getDirection.iconClass || 'next'" />
         <!-- end CmdIcon -->
     </a>

package/src/components/ComponentSettings.vue

@@ -4,7 +4,6 @@
         :collapsible="true"
         :cmdHeadline="{headlineText: readableName(componentName), headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
         :openCollapsedBox="true"
-        :allowContentToScroll="true"
         boxBodyClass="settings-body"
     >
         <template v-slot:body>

package/src/mixins/pages/BasicForm/DefaultMessageProperties.js

@@ -19,9 +19,12 @@ export default {
         "basic_form.placeholder.zip": "Zip:",
         "basic_form.labeltext.city": "City:",
         "basic_form.placeholder.city": "City:",
-        "basic_form.labeltext.additional_address_info": "Additional address information",
+        "basic_form.labeltext.pobox": "PO Box:",
+        "basic_form.placeholder.pobox": "PO Box:",
+        "basic_form.labeltext.country": "Country:",
+        "basic_form.labeltext.additional_address_info": "Additional address information:",
         "basic_form.placeholder.additional_address_info": "Additional address information",
-        "basic_form.labeltext.additional_text": "Additional text",
+        "basic_form.labeltext.additional_text": "Additional text:",
         "basic_form.placeholder.additional_text": "Additional text",
         "basic_form.labeltext.data_privacy": "I accept handling and saving of my personal data a mentioned in the <a href='/content/data-privacy-en.html' class='fancybox'>private policy</a>."
       }

package/src/pages/BasicForm.vue

@@ -1,18 +1,23 @@
 <template>
     <div class="cmd-pages-basic-form">
-        <!-- being CmdForm -->
-        <CmdForm @submit="onSubmit"
-                 novalidate="novalidate"
-                 :textLegend="getMessage('basic_form.legend')"
-                 :submitButton="submitButton"
+        <!-- begin CmdHeadline -->
+        <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
+        <!-- end CmdHeadline -->
+
+        <!-- begin CmdForm -->
+        <CmdForm
+            @submit="onSubmit"
+            novalidate="novalidate"
+            :textLegend="getMessage('basic_form.legend')"
+            :submitButton="submitButton"
         >
-            <div v-if="configuration.salutation" class="flex-container no-flex">
+            <div v-if="configuration.salutation" class="flex-container no-flex order-male-female">
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
                     element="input"
                     type="radio"
                     :labelText="getMessage('basic_form.labeltext.salutation_male')"
-                    :name="configuration.salutation?.name || salutation"
+                    :name="configuration.salutation?.name || 'salutation'"
                     inputValue="m"
                     :replaceInputType="configuration.salutation?.replaceInputType"
                     v-model="formData.salutation"
@@ -25,7 +30,7 @@
                     element="input"
                     type="radio"
                     :labelText="getMessage('basic_form.labeltext.salutation_female')"
-                    :name="configuration.salutation?.name || salutation"
+                    :name="configuration.salutation?.name || 'salutation'"
                     inputValue="f"
                     :replaceInputType="configuration.salutation?.replaceInputType"
                     v-model="formData.salutation"
@@ -38,7 +43,7 @@
             <slot name="top"></slot>
             <!-- end slot (top) -->
 
-            <div v-if="configuration.lastName || configuration.firstName" class="flex-container">
+            <div v-if="configuration.lastName || configuration.firstName" class="flex-container order-lastname-firstname">
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
                     v-if="configuration.lastName"
@@ -71,7 +76,7 @@
                 />
                 <!-- end cmd-form-element -->
             </div>
-            <div v-if="configuration.email || configuration.phone" class="flex-container">
+            <div v-if="configuration.email || configuration.phone" class="flex-container order-phone-email">
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
                     v-if="configuration.email"
@@ -105,7 +110,22 @@
                 <!-- end cmd-form-element -->
             </div>
 
-            <div v-if="configuration.streetNo || configuration.zip || configuration.city" class="flex-container">
+            <div v-if="configuration.streetNo || configuration.streetNo || (configuration.zip && configuration.city)" class="flex-container">
+                <!-- begin cmd-form-element -->
+                <CmdFormElement
+                    v-if="configuration.country"
+                    element="select"
+                    :labelText="getMessage('basic_form.labeltext.country')"
+                    :selectOptions="configuration.country?.selectOptions"
+                    :required="configuration.country?.required"
+                    :name="configuration.country?.name || 'country'"
+                    v-model="formData.country.value"
+                    :status="formData.country.error ? 'error' : ''"
+                    @validate="onValidate"
+                    @change="onCountrySelect"
+                />
+                <!-- end cmd-form-element -->
+
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
                     v-if="configuration.streetNo"
@@ -121,11 +141,27 @@
                 />
                 <!-- end cmd-form-element -->
 
-                <div class="input-wrapper">
+                <!-- begin cmd-form-element -->
+                <CmdFormElement
+                    v-if="configuration.pobox"
+                    element="input"
+                    :type="configuration.pobox?.type || 'text'"
+                    :labelText="getMessage('basic_form.labeltext.pobox')"
+                    :placeholder="getMessage('basic_form.placeholder.pobox')"
+                    :required="configuration.pobox?.required"
+                    :name="configuration.pobox?.name || 'pobox'"
+                    v-model="formData.pobox.value"
+                    :status="formData.pobox.error ? 'error' : ''"
+                    @validate="onValidate"
+                />
+                <!-- end cmd-form-element -->
+
+                <div class="input-wrapper" :class="showCityBeforeZip ? 'order-city-zip' : 'order-zip-city'">
                     <!-- begin cmd-form-element -->
                     <CmdFormElement
                         v-if="configuration.zip"
                         element="input"
+                        class="input-zip"
                         :type="configuration.zip?.type || 'number'"
                         :labelText="getMessage('basic_form.labeltext.zip')"
                         :placeholder="getMessage('basic_form.placeholder.zip')"
@@ -237,18 +273,13 @@ export default {
                 streetNo: {value: ''},
                 zip: {value: ''},
                 city: {value: ''},
+                pobox: {value: ''},
+                country: {value: ''},
                 additionalAddressInfo: {value: ''},
                 additionalText: {value: ''},
                 acceptPrivacy: {value: false}
             },
-            nativeButton: {
-                icon: {
-                    show: true,
-                    iconClass: "icon-message-send",
-                    tooltip: "Send message"
-                },
-                text: "Send"
-            }
+            cityBeforeZip: this.showCityBeforeZip
         }
     },
     props: {
@@ -281,6 +312,24 @@ export default {
                         required: false,
                         type: "phone"
                     },
+                    country: {
+                        required: false,
+                        element: "select",
+                        selectOptions: [
+                            {
+                                text: "Please select...",
+                                value: ""
+                            },
+                            {
+                                text: "United States",
+                                value: "us"
+                            },
+                            {
+                                text: "Germany",
+                                value: "de"
+                            },
+                        ]
+                    },
                     streetNo: {
                         required: false,
                         type: "text"
@@ -308,6 +357,13 @@ export default {
                 }
             }
         },
+        /**
+         * activate to show city first/left then zip next/right
+         */
+        showCityBeforeZip: {
+            type: Boolean,
+            default: false
+        },
         /**
          * receiver e-mail-address the form is sent to
          */
@@ -329,6 +385,18 @@ export default {
                     primary: true
                 }
             }
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            default() {
+                return {
+                    headlineText: "Basic Form",
+                    headlineLevel: 3
+                }
+            }
         }
     },
     mounted() {
@@ -349,6 +417,13 @@ export default {
 
             event.preventDefault();
         },
+        onCountrySelect(event) {
+            alert("Country selected")
+            console.log("country selected", event)
+          if (event === 'us' || event === 'uk') {
+              this.cityBeforeZip = true
+          }
+        },
         onValidate() {
             this.formData = Object.assign({}, this.validator.validate(this.formData));
         },
@@ -361,6 +436,11 @@ export default {
         openDataPrivacy(url) {
             openFancyBox({url})
         }
+    },
+    watch: {
+        cityBeforeZip() {
+            this.cityBeforeZip = this.showCityBeforeZip
+        }
     }
 }
 </script>
@@ -369,6 +449,14 @@ export default {
 .cmd-pages-basic-form {
     fieldset {
         margin: 0;
+
+        .order-city-zip {
+            flex-direction: row-reverse;
+        }
+
+        .input-zip {
+            max-width: 30%;
+        }
     }
 }
 </style>