comand-component-library 4.0.16 → 4.0.18

package/src/{pages/BasicForm.vue → components/CmdBasicForm.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"
+                    @update:modelValue="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="cityBeforeZip ? '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')"
@@ -210,9 +246,9 @@
 
 <script>
 // import mixins
-import I18n from "../mixins/I18n"
-import DefaultMessageProperties from "../mixins/pages/BasicForm/DefaultMessageProperties"
-import FieldValidation from "../mixins/FieldValidation"
+import I18n from "../mixins/I18n.js"
+import DefaultMessageProperties from "../mixins/CmdBasicForm/DefaultMessageProperties.js"
+import FieldValidation from "../mixins/FieldValidation.js"
 
 export default {
     mixins: [
@@ -227,7 +263,6 @@ export default {
     },
     data() {
         return {
-            //validator: new ContactFormValidator(name => this.label(name)),
             formData: {
                 salutation: this.configuration.salutation.default,
                 lastName: {value: ''},
@@ -237,18 +272,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 +311,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 +356,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,12 +384,24 @@ export default {
                     primary: true
                 }
             }
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            default() {
+                return {
+                    headlineText: "Basic Form",
+                    headlineLevel: 3
+                }
+            }
         }
     },
     mounted() {
-        this.$refs.dataPrivacy?.querySelector('.fancybox')?.addEventListener('click', event => {
+        this.$refs.dataPrivacy?.querySelector(".fancybox")?.addEventListener("click", event => {
             event.preventDefault()
-            openFancyBox({url: event.target.getAttribute('href')})
+            openFancyBox({url: event.target.getAttribute("href")})
         })
     },
     methods: {
@@ -349,6 +416,9 @@ export default {
 
             event.preventDefault();
         },
+        onCountrySelect(event) {
+          this.cityBeforeZip = event === 'us' || event === 'uk';
+        },
         onValidate() {
             this.formData = Object.assign({}, this.validator.validate(this.formData));
         },
@@ -361,6 +431,11 @@ export default {
         openDataPrivacy(url) {
             openFancyBox({url})
         }
+    },
+    watch: {
+        showCityBeforeZip() {
+            this.cityBeforeZip = this.showCityBeforeZip
+        }
     }
 }
 </script>
@@ -369,6 +444,14 @@ export default {
 .cmd-pages-basic-form {
     fieldset {
         margin: 0;
+
+        .order-city-zip {
+            flex-direction: row-reverse;
+        }
+
+        .input-zip {
+            max-width: 30%;
+        }
     }
 }
 </style>

package/src/components/CmdBreadcrumbs.vue

@@ -1,6 +1,6 @@
 <template>
     <ul class="cmd-breadcrumbs">
-        <li v-if="breadcrumbLabel">{{ breadcrumbLabel }}</li>
+        <li v-if="breadcrumbLabel" class="breadcrumb-label">{{ breadcrumbLabel }}</li>
         <li v-for="(link, index) in breadcrumbLinks || []" :key="index">
             <!-- begin type 'href' -->
             <a  v-if="link.type === 'href'" :href="link.path">
@@ -84,7 +84,7 @@ export default {
             padding: 0 calc(var(--default-padding) / 2);
         }
 
-        &:first-child {
+        &.breadcrumb-label {
             margin-right: calc(var(--default-margin) / 2);
         }
 

package/src/components/CmdFancyBox.vue

@@ -73,7 +73,7 @@
                     <!-- end CmdImage -->
                 </div>
                 <div v-else-if="fancyBoxContent" class="content" v-html="fancyBoxContent"></div>
-                <div v-else-if="fancyBoxElements" class="content"></div>
+                <div v-else-if="fancyBoxElements" class="content" ref="elements"></div>
                 <div v-else-if="fancyBoxGallery" class="content">
                     <!-- begin CmdSlideButton -->
                     <CmdSlideButton @click.prevent="showPrevItem" slideButtonType="prev"/>
@@ -259,7 +259,7 @@ const FancyBox = defineComponent({
             required: false
         },
         /**
-         * list of show elements (not images)
+         * list of shown elements (not images)
          */
         elements: {
             type: Array,
@@ -382,7 +382,7 @@ const FancyBox = defineComponent({
             } else if (this.elements) {
                 this.fancyBoxElements = this.elements.map(el => el.cloneNode(true))
                 this.$nextTick(() => {
-                    this.$el.querySelector(".content").append(...this.fancyBoxElements)
+                    this.$refs.elements.append(...this.fancyBoxElements)
                 })
             }
         },

package/src/components/CmdFormElement.vue

@@ -874,7 +874,6 @@ export default {
     }
 
     &.has-state, & + .cmd-tooltip {
-
         &.error {
             * {
                 --status-color: var(--error-color);
@@ -902,6 +901,12 @@ export default {
         ~ .label-text span {
             color: var(--hyperlink-color);
         }
+
+        &:hover, &:active, &:focus {
+            ~ .label-text span {
+                color: var(--hyperlink-color-highlighted);
+            }
+        }
     }
 
     &.inline {

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

@@ -16,6 +16,7 @@
                 v-if="buttonPrintView.show"
                 :class="['button', {'primary': buttonPrintView.primary}]"
                 :title="buttonPrintView.text ? buttonPrintView.icon?.tooltip : null"
+                @click="showFancyBox"
             >
                 <span v-if="buttonPrintView.icon?.show" :class="buttonPrintView.icon?.iconClass"></span>
                 <span v-if="buttonPrintView.text">{{buttonPrintView.text}}</span>
@@ -26,6 +27,8 @@
 </template>
 
 <script>
+import { openFancyBox } from "./CmdFancyBox.vue"
+
 export default {
     name: "CmdPageFooter",
     props: {
@@ -60,6 +63,38 @@ export default {
         cmdSocialNetworks: {
             type: Array,
             required: false
+        },
+        /**
+         * properties for CmdFancyBox-component
+         */
+        cmdFancyBox: {
+            type: Object,
+            default() {
+                return {
+                    showPrintButtons: true,
+                    defaultAriaLabelText: "print-preview"
+                }
+            }
+        }
+    },
+    methods: {
+        showFancyBox() {
+            let elements = []
+            if(typeof this.cmdFancyBox.elements === "function") {
+                elements = this.cmdFancyBox.elements()
+            } else {
+                elements = [document.querySelector("main")]
+            }
+
+            openFancyBox({
+                elements: elements,
+                showPrintButtons: this.cmdFancyBox.showPrintButtons,
+                defaultAriaLabelText: this.cmdFancyBox.defaultAriaLabelText,
+                cmdHeadline: this.cmdFancyBox.cmdHeadline,
+                showOverlay: this.cmdFancyBox.showOverlay,
+                showSubmitButtons: this.cmdFancyBox.showSubmitButtons,
+                allowEscapeKey: this.cmdFancyBox.allowEscapeKey
+            })
         }
     }
 }
@@ -90,6 +125,7 @@ export default {
         justify-content: flex-end;
         margin-left: auto;
         gap: calc(var(--default-gap) / 2);
+        flex: none;
     }
 }
 /* end cmd-page-footer -------------------------------------------------------------------------------------------- */

package/src/components/CmdPageHeader.vue

@@ -1,5 +1,5 @@
 <template>
-    <header class="cmd-page-header flex-container">
+    <header v-if="cmdBreadcrumbs || cmdHeadline || $slots.default" class="cmd-page-header flex-container">
         <div v-if="cmdBreadcrumbs || cmdHeadline" class="headline-wrapper flex-container vertical">
             <!-- begin CmdBreadcrumbs -->
             <CmdBreadcrumbs v-if="cmdBreadcrumbs" v-bind="cmdBreadcrumbs" />
@@ -11,7 +11,7 @@
         </div>
 
         <!-- begin slot -->
-        <slot></slot>
+        <slot v-if="$slots.default"></slot>
         <!-- end slot -->
     </header>
 </template>

package/src/components/CmdSiteFooter.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="cmd-site-footer">
+    <div class="cmd-site-footer site-footer">
         <footer :class="['flex-container', {vertical: orientation === 'vertical'}]">
             <slot></slot>
         </footer>
@@ -31,8 +31,6 @@ export default {
 /* begin cmd-site-footer ---------------------------------------------------------------------------------------- */
 .cmd-site-footer {
     padding: var(--grid-gap) 0;
-    border-top: var(--default-border);
-    background: var(--default-background);
     margin-top: auto;
     flex: none;
 

package/src/components/CmdSiteHeader.vue

@@ -178,12 +178,12 @@ export default {
 <style>
 /* begin cmd-site-header ---------------------------------------------------------------------------------------- */
 .cmd-site-header {
+    --logo-width-on-scroll: 50%;
+
     grid-area: site-header;
     display: flex;
     flex-direction: column;
     flex: none;
-    border-bottom: var(--default-border);
-    background: var(--color-scheme-background);
 
     &.sticky {
         position: sticky;
@@ -199,6 +199,7 @@ export default {
                         transform-origin: top left;
                         transition: var(--header-scroll-animation);
                         margin: 0;
+                        width: 100%;
                     }
                 }
             }
@@ -212,7 +213,7 @@ export default {
                     figure {
                         img {
                             transition: var(--header-scroll-animation);
-                            height: 5rem;
+                            width: var(--logo-width-on-scroll);
                         }
                     }
                 }
@@ -223,12 +224,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/components/CmdSwitchLanguage.vue

@@ -95,7 +95,7 @@ export default {
             a:not([class*="active"]) {
                 filter: contrast(.5);
 
-                &:hover, &:focus-visible, &:active, &.active {
+                &:hover, &:focus-visible, &:active, &.active, &.router-link-active {
                     filter: none;
                     padding: 0; /* overwrite default settings from frontend-framework for .active */
                     background: none; /* overwrite default settings from frontend-framework for .active */

package/src/index.js

@@ -51,7 +51,7 @@ export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimit
 export { default as EditComponentWrapper } from '@/components/EditComponentWrapper.vue'
 
 // export page-components
-export { default as BasicForm } from '@/pages/BasicForm.vue'
+export { default as BasicForm } from '@/components/CmdBasicForm.vue'
 export { default as ContactInformation } from '@/pages/ContactInformation.vue'
 export { default as MultipleBoxWrapper } from '@/pages/MultipleBoxWrapper.vue'
 export { default as MultipleListsOfLinks } from '@/pages/MultipleListsOfLinks.vue'

package/src/mixins/{pages/BasicForm → CmdBasicForm}/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/PageOverview.vue

@@ -1,12 +1,4 @@
 <template>
-    <!-- begin basic-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
-    <CmdWidthLimitationWrapper>
-        <h2 class="headline-demopage" id="section-basic-form">
-            <span>Basic Form</span>
-        </h2>
-        <BasicForm :formAction="basicForm.formAction" />
-    </CmdWidthLimitationWrapper>
-    <!-- end basic-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
 
     <!-- begin basic-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
     <CmdWidthLimitationWrapper>
@@ -66,41 +58,7 @@ export default {
             faqsData,
             boxesTeamOverviewData,
             listOfDownloadsData,
-            listOfSiteLinksData,
-            basicForm: {
-                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
-                    }
-                }
-            }
+            listOfSiteLinksData
         }
     }
 }