comand-component-library 4.0.16 → 4.0.17

package/src/components/CmdSiteHeader.vue

@@ -178,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;
@@ -199,6 +201,7 @@ export default {
                         transform-origin: top left;
                         transition: var(--header-scroll-animation);
                         margin: 0;
+                        width: 100%;
                     }
                 }
             }
@@ -212,7 +215,7 @@ export default {
                     figure {
                         img {
                             transition: var(--header-scroll-animation);
-                            height: 5rem;
+                            width: var(--logo-width-on-scroll);
                         }
                     }
                 }
@@ -223,12 +226,12 @@ export default {
     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/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>