comand-component-library 4.0.17 → 4.0.19

package/src/{pages/BasicForm.vue → components/CmdBasicForm.vue}

@@ -10,6 +10,7 @@
             novalidate="novalidate"
             :textLegend="getMessage('basic_form.legend')"
             :submitButton="submitButton"
+            :formAction="formAction"
         >
             <div v-if="configuration.salutation" class="flex-container no-flex order-male-female">
                 <!-- begin cmd-form-element -->
@@ -20,7 +21,7 @@
                     :name="configuration.salutation?.name || 'salutation'"
                     inputValue="m"
                     :replaceInputType="configuration.salutation?.replaceInputType"
-                    v-model="formData.salutation"
+                    v-model="formData.salutation.value"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -33,7 +34,7 @@
                     :name="configuration.salutation?.name || 'salutation'"
                     inputValue="f"
                     :replaceInputType="configuration.salutation?.replaceInputType"
-                    v-model="formData.salutation"
+                    v-model="formData.salutation.value"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -122,7 +123,7 @@
                     v-model="formData.country.value"
                     :status="formData.country.error ? 'error' : ''"
                     @validate="onValidate"
-                    @change="onCountrySelect"
+                    @update:modelValue="onCountrySelect"
                 />
                 <!-- end cmd-form-element -->
 
@@ -156,7 +157,7 @@
                 />
                 <!-- end cmd-form-element -->
 
-                <div class="input-wrapper" :class="showCityBeforeZip ? 'order-city-zip' : 'order-zip-city'">
+                <div class="input-wrapper" :class="cityBeforeZip ? 'order-city-zip' : 'order-zip-city'">
                     <!-- begin cmd-form-element -->
                     <CmdFormElement
                         v-if="configuration.zip"
@@ -181,7 +182,7 @@
                         :labelText="getMessage('basic_form.labeltext.city')"
                         :placeholder="getMessage('basic_form.placeholder.city')"
                         :required="configuration.city?.required"
-                        :name="configuration.city?.name || 'zip'"
+                        :name="configuration.city?.name || 'city'"
                         v-model="formData.city.value"
                         :status="formData.city.error ? 'error' : ''"
                         @validate="onValidate"
@@ -207,14 +208,14 @@
 
             <!-- begin cmd-form-element -->
             <CmdFormElement
-                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"
-                :name="configuration.additionalText?.name || 'additional-text'"
-                v-model="formData.additionalText.value"
-                :status="formData.additionalText.error ? 'error' : ''"
+                v-if="configuration.userMessage"
+                :element="configuration.userMessage?.element || 'textarea'"
+                :labelText="getMessage('basic_form.labeltext.userMessage')"
+                :placeholder="getMessage('basic_form.placeholder.userMessage')"
+                :required="configuration.userMessage?.required"
+                :name="configuration.userMessage?.name || 'user-message'"
+                v-model="formData.userMessage.value"
+                :status="formData.userMessage.error ? 'error' : ''"
                 @validate="onValidate"
             />
             <!-- end cmd-form-element -->
@@ -246,11 +247,13 @@
 
 <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"
+import {ContactFormValidator} from "@/utils/ContactFormValidation.js";
 
 export default {
+    emits: ["submit"],
     mixins: [
         I18n,
         DefaultMessageProperties,
@@ -263,9 +266,9 @@ export default {
     },
     data() {
         return {
-            //validator: new ContactFormValidator(name => this.label(name)),
+            validator: new ContactFormValidator(label => label),
             formData: {
-                salutation: this.configuration.salutation.default,
+                salutation: {value: this.configuration.salutation.default},
                 lastName: {value: ''},
                 firstName: {value: ''},
                 email: {value: ''},
@@ -276,13 +279,27 @@ export default {
                 pobox: {value: ''},
                 country: {value: ''},
                 additionalAddressInfo: {value: ''},
-                additionalText: {value: ''},
+                userMessage: {value: ''},
                 acceptPrivacy: {value: false}
             },
             cityBeforeZip: this.showCityBeforeZip
         }
     },
     props: {
+        /**
+         * activate if native submit-event should be used
+         */
+        useNativeSubmit: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * set url for form-action
+         */
+        formAction: {
+            type: String,
+            required: false
+        },
         /**
          * configuration for form-elements used in form
          */
@@ -346,7 +363,7 @@ export default {
                         required: false,
                         type: "text"
                     },
-                    additionalText: {
+                    userMessage: {
                         required: false,
                         element: "textarea"
                     },
@@ -400,29 +417,50 @@ export default {
         }
     },
     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: {
         onSubmit(event) {
-            this.onValidate();
+            this.onValidate()
 
             this.formData = Object.assign({}, this.validator.validatePrivacy(this.formData));
-            if (this.formData.error) {
-                event.preventDefault();
-                return;
+
+            if (this.formData.error || this.useNativeSubmit) {
+                if(this.formData.error) {
+                    // prevent original event from CmdForm (to avoid submit and reload)
+                    event.originalEvent.preventDefault()
+                }
+                return
+            }
+
+            // custom submit of form-data
+            const customSubmitFormData = new FormData()
+            // get keys for form-elements from configuration
+            const configurationEntries = Object.keys(this.configuration)
+
+            for(let i = 0; i < configurationEntries.length; i++) {
+                // assign formData values to form-element key
+                customSubmitFormData.set(configurationEntries[i], this.formData[configurationEntries[i]].value)
             }
 
-            event.preventDefault();
+            fetch(this.formAction, {method: "POST", body: customSubmitFormData}).then((response) => {
+                if(response.ok) {
+                    console.log("CmdBasicForm", "ok")
+                } else {
+                    console.log("CmdBasicForm", "fail")
+                }
+            }).catch((error) => {
+                console.error(error)
+            })
+
+            // prevent original levent form CmdForm (to avoid submit and reload)
+            event.originalEvent.preventDefault()
         },
         onCountrySelect(event) {
-            alert("Country selected")
-            console.log("country selected", event)
-          if (event === 'us' || event === 'uk') {
-              this.cityBeforeZip = true
-          }
+          this.cityBeforeZip = event === 'us' || event === 'uk';
         },
         onValidate() {
             this.formData = Object.assign({}, this.validator.validate(this.formData));
@@ -438,7 +476,7 @@ export default {
         }
     },
     watch: {
-        cityBeforeZip() {
+        showCityBeforeZip() {
             this.cityBeforeZip = this.showCityBeforeZip
         }
     }

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

@@ -1,5 +1,5 @@
 <template>
-    <form class="cmd-form" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}" :novalidate="novalidate">
+    <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>
@@ -73,6 +73,13 @@ export default {
         }
     },
     props: {
+        /**
+         * set url for form-action
+         */
+        formAction: {
+            type: String,
+            required: false
+        },
         /**
          * activate if form-elements should be given by slot
          */
@@ -153,10 +160,11 @@ export default {
         submitFormData(event) {
             // fill formdata with names and value
             let formdata = {}
-            this.formElements.forEach((element) => {
-                formdata[element.name] = this.formValues[element.name]
-            })
-
+            if(this.formElements) {
+                this.formElements.forEach((element) => {
+                    formdata[element.name] = this.formValues[element.name]
+                })
+            }
             this.$emit("submit", {originalEvent: event, formdata: formdata})
         },
         onSubmit(event) {

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

@@ -184,8 +184,6 @@ export default {
     display: flex;
     flex-direction: column;
     flex: none;
-    border-bottom: var(--default-border);
-    background: var(--color-scheme-background);
 
     &.sticky {
         position: sticky;

package/src/components/CmdSlideshow.vue

@@ -473,6 +473,10 @@ export default {
             background: var(--pure-white-reduced-opacity);
         }
     }
+
+    .fade-enter-from, .fade-leave-to {
+        position: absolute;
+    }
 }
 
 .edit-mode .cmd-slideshow .image-wrapper.edit-items {

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

@@ -2,6 +2,7 @@
 export { default as CmdAddressData } from '@/components/CmdAddressData.vue'
 export { default as CmdBackToTopButton } from '@/components/CmdBackToTopButton.vue'
 export { default as CmdBankAccountData } from '@/components/CmdBankAccountData.vue'
+export { default as CmdBasicForm } from '@/components/CmdBasicForm.vue'
 export { default as CmdBox } from '@/components/CmdBox.vue'
 export { default as CmdBoxWrapper } from '@/components/CmdBoxWrapper.vue'
 export { default as CmdBreadcrumbs } from '@/components/CmdBreadcrumbs.vue'
@@ -51,7 +52,6 @@ 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 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

@@ -24,8 +24,8 @@ export default {
         "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.placeholder.additional_text": "Additional text",
+        "basic_form.labeltext.user_message": "Your message:",
+        "basic_form.placeholder.user_message": "Your message",
         "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
         }
     }
 }

package/src/utils/ContactFormValidation.js

@@ -0,0 +1,45 @@
+// noinspection CommaExpressionJS
+class ContactFormValidator {
+    static PATTERN_SURNAME = /^[a-züöäßáéíóàèìòêîô '-]+$/i
+    static PATTERN_EMAIL = /^[a-z\d._%+-]+@[a-z\d._%+-]+\.[a-z]{2,}$/i
+    static PATTERN_MESSAGE = /^.{2,500}$/
+
+    label
+
+    constructor(label) {
+        this.label = label
+    }
+
+    validate(formData) {
+        [formData.lastName.error, formData.lastName.errorMessage] = this.validateRequired(
+            formData.lastName.value, ContactFormValidator.PATTERN_SURNAME, this.label('form_error_invalid_surname'))
+            [formData.email.error, formData.email.errorMessage] = this.validateRequired(
+            formData.email.value, ContactFormValidator.PATTERN_EMAIL, this.label('form_error_invalid_email'))
+            [formData.additionalText.error, formData.additionalText.errorMessage] = this.validateRequired(
+            formData.additionalText.value, ContactFormValidator.PATTERN_MESSAGE, this.label('form_error_invalid_message'))
+        formData.acceptPrivacy.error = false
+        formData.error = formData.lastName.error
+            || formData.email.error
+            || formData.additionalText.error
+        return formData
+    }
+
+    validatePrivacy(formData) {
+        formData.acceptPrivacy.error = !formData.acceptPrivacy.value
+        formData.acceptPrivacy.errorMessage = formData.acceptPrivacy.error ? this.label('form_error_missing_privacy_consent') : ''
+        formData.error = formData.error || formData.acceptPrivacy.error
+        return formData
+    }
+
+    validateRequired(value, pattern, errorMessage) {
+        if (!value || value.trim().length === 0) {
+            return [true, this.label('form_error_empty')]
+        }
+        if (pattern && !pattern.test(value)) {
+            return [true, errorMessage || this.label('form_error_invalid')]
+        }
+        return [false, '']
+    }
+}
+
+export { ContactFormValidator }

package/src/assets/fonts/iconfonts/logos-iconfont/images/flags/flag-cn.svg

@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="850.395px" height="566.929px" viewBox="0 0 850.395 566.929" enable-background="new 0 0 850.395 566.929"
-	 xml:space="preserve">
-<symbol  id="Stern" viewBox="-80.297 -76.367 160.595 152.734">
-	<polygon fill="#FFDE08" points="0,76.367 20.678,20.397 80.298,18.027 33.457,-18.934 49.627,-76.367 0,-43.241 -49.626,-76.367 
-		-33.457,-18.934 -80.297,18.027 -20.677,20.397 	"/>
-</symbol>
-<g id="cn">
-	<g>
-		<rect fill="#DF2B14" width="850.395" height="566.929"/>
-		
-			<use xlink:href="#Stern"  width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(1 0 0 -1 141.4941 133.5356)" overflow="visible"/>
-		
-			<use xlink:href="#Stern"  width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(0.318 0.1158 0.1158 -0.318 282.7402 57.1685)" overflow="visible"/>
-		
-			<use xlink:href="#Stern"  width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(0.318 -0.1158 -0.1158 -0.318 341.1777 115.0728)" overflow="visible"/>
-		
-			<use xlink:href="#Stern"  width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(0.318 0.1158 0.1158 -0.318 284.2407 256.6177)" overflow="visible"/>
-		
-			<use xlink:href="#Stern"  width="160.595" height="152.734" x="-80.297" y="-76.367" transform="matrix(0.3384 0 0 -0.3384 340.73 194.541)" overflow="visible"/>
-	</g>
-</g>
-</svg>