comand-component-library 4.0.14 → 4.0.16

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>
@@ -130,6 +188,36 @@ 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;
+                    }
+                }
+            }
+
+            &.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);
+                            height: 5rem;
+                        }
+                    }
+                }
+            }
+        }
     }
 
     header, .cmd-main-navigation nav, .cmd-list-of-links {
@@ -150,12 +238,12 @@ export default {
         }
     }
 
-    #main-navigation-wrapper {
+    .main-navigation-wrapper {
         grid-column: span var(--grid-columns);
         border-bottom: 0;
     }
 
-    & + #main-navigation-wrapper {
+    & + .main-navigation-wrapper {
         nav {
             border-left: 0;
             border-right: 0;
@@ -163,7 +251,7 @@ export default {
     }
 
     /* use id to ensure high specificity */
-    > .cmd-main-navigation#main-navigation-wrapper:last-child {
+    > .cmd-main-navigation.main-navigation-wrapper:last-child {
         border-bottom: 0;
     }
 
@@ -211,7 +299,7 @@ export default {
                 grid-column: span var(--grid-small-span);
             }
 
-            #main-navigation-wrapper {
+            .main-navigation-wrapper {
                 grid-area: main-navigation;
                 display: flex;
                 align-items: center;
@@ -245,26 +333,28 @@ export default {
         header {
             grid-auto-rows: auto; /* items should be as large as their content */
 
-            .cmd-main-navigation#main-navigation-wrapper {
+            .cmd-main-navigation.main-navigation-wrapper {
                 &:not(.persist-on-mobile) {
                     padding: 0;
                 }
             }
 
-            & + .cmd-main-navigation#main-navigation-wrapper {
+            /* main-navigation below logo */
+            & + .cmd-main-navigation.main-navigation-wrapper {
                 padding-bottom: var(--default-padding);
             }
         }
 
+        /* main-navigation inline with logo */
         &.navigation-inline {
-            .cmd-main-navigation#main-navigation-wrapper {
+            .cmd-main-navigation.main-navigation-wrapper {
                 &:not(.persist-on-mobile) {
                     padding-left: var(--default-padding);
                 }
             }
 
             &.off-canvas-right {
-                .cmd-main-navigation#main-navigation-wrapper {
+                .cmd-main-navigation.main-navigation-wrapper {
                     &:not(.persist-on-mobile) {
                         padding: 0;
                     }
@@ -290,7 +380,7 @@ export default {
 
         &.navigation-inline {
             header {
-                .cmd-company-logo, #main-navigation-wrapper {
+                .cmd-company-logo, .main-navigation-wrapper {
                     grid-column: span calc(var(--grid-small-span) / 2);
                 }
             }

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/pages/BasicForm.vue

@@ -1,13 +1,12 @@
 <template>
     <div class="cmd-pages-basic-form">
         <!-- being CmdForm -->
-        <CmdForm :action="formAction"
-                 @submit="onSubmit"
+        <CmdForm @submit="onSubmit"
                  novalidate="novalidate"
                  :textLegend="getMessage('basic_form.legend')"
                  :submitButton="submitButton"
         >
-            <div class="flex-container no-flex">
+            <div v-if="configuration.salutation" class="flex-container no-flex">
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
                     element="input"
@@ -39,7 +38,7 @@
             <slot name="top"></slot>
             <!-- end slot (top) -->
 
-            <div class="flex-container">
+            <div v-if="configuration.lastName || configuration.firstName" class="flex-container">
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
                     v-if="configuration.lastName"
@@ -47,7 +46,6 @@
                     :type="configuration.lastName?.type || 'text'"
                     iconClass="icon-user-profile"
                     :labelText="getMessage('basic_form.labeltext.last_name')"
-                    :tooltipText="formData.lastName.error ? formData.lastName.errorMessage :  'Type your surname!'"
                     :required="configuration.lastName?.required"
                     :name="configuration.lastName?.name || 'last-name'"
                     :placeholder="getMessage('basic_form.placeholder.last_name')"
@@ -64,7 +62,6 @@
                     :type="configuration.firstName?.type || 'text'"
                     iconClass="icon-user-profile"
                     :labelText="getMessage('basic_form.labeltext.first_name')"
-                    :tooltipText="formData.firstName.error ? formData.firstName.errorMessage :  'Type your first name!'"
                     :placeholder="getMessage('basic_form.placeholder.first_name')"
                     :required="configuration.firstName?.required"
                     :name="configuration.firstName?.name || 'first-name'"
@@ -87,7 +84,6 @@
                     :name="configuration.email?.name || 'email'"
                     v-model="formData.email.value"
                     :status="formData.email.error ? 'error' : ''"
-                    :tooltipText="formData.email.error ? formData.email.errorMessage :  'Type your email!'"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -104,15 +100,15 @@
                     :required="configuration.phone?.required"
                     :name="configuration.phone?.name || 'phone'"
                     :status="formData.phone.error ? 'error' : ''"
-                    :tooltipText="formData.phone.error ? formData.phone.errorMessage :  'Type your phone number!'"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
             </div>
 
-            <div class="flex-container">
+            <div v-if="configuration.streetNo || configuration.zip || configuration.city" class="flex-container">
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
+                    v-if="configuration.streetNo"
                     element="input"
                     :type="configuration.streetNo?.type || 'text'"
                     :labelText="getMessage('basic_form.labeltext.street_no')"
@@ -121,7 +117,6 @@
                     :name="configuration.streetNo?.name || 'street-no'"
                     v-model="formData.streetNo.value"
                     :status="formData.streetNo.error ? 'error' : ''"
-                    :tooltipText="formData.streetNo.error ? formData.streetNo.errorMessage :  'Type your street and number!'"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -129,6 +124,7 @@
                 <div class="input-wrapper">
                     <!-- begin cmd-form-element -->
                     <CmdFormElement
+                        v-if="configuration.zip"
                         element="input"
                         :type="configuration.zip?.type || 'number'"
                         :labelText="getMessage('basic_form.labeltext.zip')"
@@ -137,12 +133,13 @@
                         :name="configuration.zip?.name || 'zip'"
                         v-model="formData.zip.value"
                         :status="formData.zip.error ? 'error' : ''"
-                        :tooltipText="formData.zip.error ? formData.zip.errorMessage :  'Type your zip/postal code!'"
                         @validate="onValidate"
                     />
                     <!-- end cmd-form-element -->
+
                     <!-- begin cmd-form-element -->
                     <CmdFormElement
+                        v-if="configuration.city"
                         element="input"
                         :type="configuration.city?.type || 'text'"
                         :labelText="getMessage('basic_form.labeltext.city')"
@@ -151,7 +148,6 @@
                         :name="configuration.city?.name || 'zip'"
                         v-model="formData.city.value"
                         :status="formData.city.error ? 'error' : ''"
-                        :tooltipText="formData.city.error ? formData.city.errorMessage :  'Type your city!'"
                         @validate="onValidate"
                     />
                     <!-- end cmd-form-element -->
@@ -159,6 +155,7 @@
 
                 <!-- begin cmd-form-element -->
                 <CmdFormElement
+                    v-if="configuration.additionalAddressInfo"
                     element="input"
                     :type="configuration.additionalAddressInfo?.type || 'text'"
                     :labelText="getMessage('basic_form.labeltext.additional_address_info')"
@@ -167,7 +164,6 @@
                     :name="configuration.additionalAddressInfo?.name || 'additional-address-info'"
                     v-model="formData.additionalAddressInfo.value"
                     :status="formData.additionalAddressInfo.error ? 'error' : ''"
-                    :tooltipText="formData.additionalAddressInfo.error ? formData.additionalAddressInfo.errorMessage :  'Type additional address information!'"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -175,7 +171,8 @@
 
             <!-- begin cmd-form-element -->
             <CmdFormElement
-                :type="configuration.additionalText?.type || 'textarea'"
+                v-if="configuration.additionalText"
+                :element="configuration.additionalText?.element || 'textarea'"
                 :labelText="getMessage('basic_form.labeltext.additional_text')"
                 :placeholder="getMessage('basic_form.placeholder.additional_text')"
                 :required="configuration.additionalText?.required"
@@ -192,6 +189,7 @@
 
             <!-- begin cmd-form-element -->
             <CmdFormElement
+                v-if="configuration.acceptPrivacy"
                 element="input"
                 type="checkbox"
                 :required="configuration.acceptPrivacy?.required"
@@ -254,6 +252,9 @@ export default {
         }
     },
     props: {
+        /**
+         * configuration for form-elements used in form
+         */
         configuration: {
             type: Object,
             default() {
@@ -298,7 +299,7 @@ export default {
                     },
                     additionalText: {
                         required: false,
-                        type: "textarea"
+                        element: "textarea"
                     },
                     acceptPrivacy: {
                         required: true,
@@ -307,14 +308,16 @@ export default {
                 }
             }
         },
+        /**
+         * receiver e-mail-address the form is sent to
+         */
         receiverEmailAddress: {
             type: String,
             default: ""
         },
-        formAction: {
-            type: String,
-            required: true
-        },
+        /**
+         * submit-button to submit all form-data
+         */
         submitButton: {
             type: Object,
             default() {
@@ -322,6 +325,7 @@ export default {
                     iconClass: "icon-message-send",
                     text: "Send mail",
                     type: "submit",
+                    position: "belowFieldset",
                     primary: true
                 }
             }
@@ -333,7 +337,6 @@ export default {
             openFancyBox({url: event.target.getAttribute('href')})
         })
     },
-
     methods: {
         onSubmit(event) {
             this.onValidate();

package/src/pages/ContactInformation.vue

@@ -1,12 +1,12 @@
 <template>
-    <!-- begin CmdBasicForm -->
+    <!-- begin basicForm -->
     <BasicForm v-if="contactFormOnly" v-bind="basicForm" />
-    <!-- end CmdBasicForm -->
+    <!-- end basicForm -->
 
     <div v-else class="flex-container">
-        <!-- begin CmdBasicForm -->
+        <!-- begin basicForm -->
         <BasicForm v-bind="basicForm" />
-        <!-- end CmdBasicForm -->
+        <!-- end basicForm -->
 
         <!-- begin additional-columns -->
         <div class="flex-container vertical">
@@ -30,14 +30,23 @@
 export default {
     name: "ContactInformation",
     props: {
+        /**
+         * properties for basicForm-component
+         */
         basicForm: {
             type: Object,
             default: null
         },
+        /**
+         * properties for CmdAddressData-component
+         */
         cmdAddressData: {
             type: Object,
             default: null
         },
+        /**
+         * properties for CmdGoogleMaps-component
+         */
         cmdGoogleMaps: {
             type: Object,
             default: null

package/src/pages/PageOverview.vue

@@ -14,7 +14,7 @@
             <span>Contact Information</span>
         </h2>
         <ContactInformation
-            :cmdBasicForm="{}"
+            :basicForm="basicForm"
             :cmdAddressData="{}"
             :cmdGoogleMaps="{}">
             <template v-slot:additional-info>
@@ -68,7 +68,38 @@ export default {
             listOfDownloadsData,
             listOfSiteLinksData,
             basicForm: {
-                formAction: "POST"
+                configuration: {
+                    salutation: {
+                        name: "salutation",
+                        default: "m",
+                        replaceInputType: true
+                    },
+                    lastName: {
+                        name: "surname",
+                        required: true,
+                        type: "text"
+                    },
+                    firstName: {
+                        required: false,
+                        type: "text"
+                    },
+                    email: {
+                        required: true,
+                        type: "email"
+                    },
+                    phone: {
+                        required: false,
+                        type: "phone"
+                    },
+                    additionalText: {
+                        required: false,
+                        element: "textarea"
+                    },
+                    acceptPrivacy: {
+                        required: true,
+                        replaceInputType: true
+                    }
+                }
             }
         }
     }