comand-component-library 4.1.6 → 4.1.8

package/src/components/CmdBasicForm.vue

@@ -10,7 +10,7 @@
             novalidate="novalidate"
             v-bind="cmdForm"
             :legend="legend"
-            :submitButton="submitButton"
+            :submitButton="submitButtonProperties"
             :formAction="formAction"
         >
             <div v-if="configuration.salutation" class="flex-container no-flex order-male-female">
@@ -23,6 +23,7 @@
                     inputValue="m"
                     :replaceInputType="configuration.salutation?.replaceInputType"
                     v-model="formData.salutation.value"
+                    :i18n="i18n"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -36,6 +37,7 @@
                     inputValue="f"
                     :replaceInputType="configuration.salutation?.replaceInputType"
                     v-model="formData.salutation.value"
+                    :i18n="i18n"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -58,6 +60,7 @@
                     :placeholder="getMessage('basic_form.placeholder.last_name')"
                     v-model="formData.lastName.value"
                     :status="formData.lastName.error ? 'error' : ''"
+                    :i18n="i18n"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -74,6 +77,7 @@
                     :name="configuration.firstName?.name || 'first-name'"
                     v-model="formData.firstName.value"
                     :status="formData.firstName.error ? 'error' : ''"
+                    :i18n="i18n"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -91,6 +95,7 @@
                     :name="configuration.email?.name || 'email'"
                     v-model="formData.email.value"
                     :status="formData.email.error ? 'error' : ''"
+                    :i18n="i18n"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -107,6 +112,7 @@
                     :required="configuration.phone?.required"
                     :name="configuration.phone?.name || 'phone'"
                     :status="formData.phone.error ? 'error' : ''"
+                    :i18n="i18n"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -123,6 +129,7 @@
                     :name="configuration.country?.name || 'country'"
                     v-model="formData.country.value"
                     :status="formData.country.error ? 'error' : ''"
+                    :i18n="i18n"
                     @validate="onValidate"
                     @update:modelValue="onCountrySelect"
                 />
@@ -139,6 +146,7 @@
                     :name="configuration.streetNo?.name || 'street-no'"
                     v-model="formData.streetNo.value"
                     :status="formData.streetNo.error ? 'error' : ''"
+                    :i18n="i18n"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -154,6 +162,7 @@
                     :name="configuration.pobox?.name || 'pobox'"
                     v-model="formData.pobox.value"
                     :status="formData.pobox.error ? 'error' : ''"
+                    :i18n="i18n"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -171,6 +180,7 @@
                         :name="configuration.zip?.name || 'zip'"
                         v-model="formData.zip.value"
                         :status="formData.zip.error ? 'error' : ''"
+                        :i18n="i18n"
                         @validate="onValidate"
                     />
                     <!-- end cmd-form-element -->
@@ -186,6 +196,7 @@
                         :name="configuration.city?.name || 'city'"
                         v-model="formData.city.value"
                         :status="formData.city.error ? 'error' : ''"
+                        :i18n="i18n"
                         @validate="onValidate"
                     />
                     <!-- end cmd-form-element -->
@@ -202,6 +213,7 @@
                     :name="configuration.additionalAddressInfo?.name || 'additional-address-info'"
                     v-model="formData.additionalAddressInfo.value"
                     :status="formData.additionalAddressInfo.error ? 'error' : ''"
+                    :i18n="i18n"
                     @validate="onValidate"
                 />
                 <!-- end cmd-form-element -->
@@ -219,6 +231,7 @@
                 :maxlength="configuration.userMessage?.maxLength"
                 v-model="formData.userMessage.value"
                 :status="formData.userMessage.error ? 'error' : ''"
+                :i18n="i18n"
                 @validate="onValidate"
             />
             <!-- end cmd-form-element -->
@@ -237,6 +250,7 @@
                 :replaceInputType="configuration.acceptPrivacy?.replaceInputType"
                 v-model="formData.acceptPrivacy.value"
                 :status="formData.acceptPrivacy.error ? 'error' : ''"
+                :i18n="i18n"
                 @validate="onValidate">
                 <template v-slot:labeltext>
                     <span ref="dataPrivacy" v-html="getMessage('basic_form.labeltext.data_privacy')"></span>
@@ -252,7 +266,6 @@
 // import mixins
 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"
 
 import {openFancyBox} from "./CmdFancyBox.vue"
@@ -261,8 +274,7 @@ export default {
     emits: ["submit"],
     mixins: [
         I18n,
-        DefaultMessageProperties,
-        FieldValidation
+        DefaultMessageProperties
     ],
     inject: {
         editModeContext: {
@@ -413,27 +425,14 @@ export default {
          */
         submitButton: {
             type: Object,
-            default() {
-                return {
-                    iconClass: "icon-message-send",
-                    text: "Send mail",
-                    type: "submit",
-                    position: "belowFieldset",
-                    primary: true
-                }
-            }
+            required: false
         },
         /**
          * properties for CmdHeadline-component
          */
         cmdHeadline: {
             type: Object,
-            default() {
-                return {
-                    headlineText: "Basic Form",
-                    headlineLevel: 3
-                }
-            }
+            required: false
         },
         /**
          * properties for CmdForm-component
@@ -449,6 +448,18 @@ export default {
             openFancyBox({url: event.target.getAttribute("href")})
         })
     },
+    computed: {
+        submitButtonProperties() {
+            return {
+                iconClass: "icon-message-send",
+                text: "Send mail",
+                type: "submit",
+                position: "belowFieldset",
+                primary: true,
+                ...this.submitButton
+            }
+        }
+    },
     methods: {
         onSubmit(event) {
             this.onValidate()

package/src/components/CmdFakeSelect.vue

@@ -359,11 +359,11 @@ export default {
 
             // set default-tooltip if customTooltip is not set
             if (this.validationStatus === 'error') {
-                return this.getMessage("cmdformelement.validationTooltip.an_error_occurred")
+                return this.getMessage("cmdformelement.validation_tooltip.an_error_occurred")
             } else if (this.validationStatus === 'success') {
-                return this.getMessage("cmdformelement.validationTooltip.information_is_filled_correctly")
+                return this.getMessage("cmdformelement.validation_tooltip.information_is_filled_correctly")
             }
-            return this.getMessage("cmdformelement.validationTooltip.open_field_requirements")
+            return this.getMessage("cmdformelement.validation_tooltip.open_field_requirements")
         },
         // get the displayed option name
         optionName() {

package/src/components/CmdFancyBox.vue

@@ -10,53 +10,52 @@
             <CmdHeadline
                 v-if="cmdHeadline?.headlineText"
                 v-bind="cmdHeadline"
-                :id="htmlId"
             />
             <!-- end CmdHeadline -->
 
             <!-- begin button-wrapper -->
             <div
-                v-if="(fancyboxOptions.printButtons?.color || fancyboxOptions.printButtons?.grayscale) || fancyboxOptions.closeIcon"
+                v-if="(fancyboxOptionsProperties.printButtons?.color || fancyboxOptionsProperties.printButtons?.grayscale) || fancyboxOptionsProperties.closeIcon"
                 class="button-wrapper no-flex"
             >  <!-- begin print buttons -->
-                <a v-if="showPrintButtons && fancyboxOptions.printButtons?.color"
+                <a v-if="showPrintButtons && fancyboxOptionsProperties.printButtons?.color"
                    href="#"
                    class="button print-color"
-                   :title="fancyboxOptions.printButtons.color?.tooltip"
+                   :title="fancyboxOptionsProperties.printButtons.color?.tooltip"
                    @click.prevent="printInGrayscale = false">
                     <!-- begin CmdIcon -->
                     <CmdIcon
-                        :iconClass="fancyboxOptions.printButtons.color?.iconClass"
-                        :type="fancyboxOptions.printButtons.color?.iconType"
+                        :iconClass="fancyboxOptionsProperties.printButtons.color?.iconClass"
+                        :type="fancyboxOptionsProperties.printButtons.color?.iconType"
                     />
                     <!-- end CmdIcon -->
                 </a>
-                <a v-if="showPrintButtons && fancyboxOptions.printButtons?.grayscale"
+                <a v-if="showPrintButtons && fancyboxOptionsProperties.printButtons?.grayscale"
                    href="#"
                    class="button print-grayscale"
-                   :title="fancyboxOptions.printButtons.grayscale?.tooltip"
+                   :title="fancyboxOptionsProperties.printButtons.grayscale?.tooltip"
                    @click.prevent="printInGrayscale = true">
                     <!-- begin CmdIcon -->
                     <CmdIcon
-                        :iconClass="fancyboxOptions.printButtons.grayscale?.iconClass"
-                        :type="fancyboxOptions.printButtons.grayscale?.iconType"
+                        :iconClass="fancyboxOptionsProperties.printButtons.grayscale?.iconClass"
+                        :type="fancyboxOptionsProperties.printButtons.grayscale?.iconType"
                     />
                     <!-- end CmdIcon -->
                 </a>
                 <!-- end print buttons -->
 
                 <!-- begin close-icon -->
-                <a v-if="fancyboxOptions.closeIcon"
+                <a v-if="fancyboxOptionsProperties.closeIcon"
                    href="#"
                    class="button"
                    id="close-dialog"
-                   :title="fancyboxOptions.closeIcon.tooltip"
+                   :title="fancyboxOptionsProperties.closeIcon.tooltip"
                    ref="close-dialog"
                    @click.prevent="close">
                     <!-- begin CmdIcon -->
                     <CmdIcon
-                        :iconClass="fancyboxOptions.closeIcon.iconClass"
-                        :type="fancyboxOptions.closeIcon.iconType"
+                        :iconClass="fancyboxOptionsProperties.closeIcon.iconClass"
+                        :type="fancyboxOptionsProperties.closeIcon.iconType"
                     />
                     <!-- end CmdIcon -->
                 </a>
@@ -94,34 +93,34 @@
             </div>
         </div>
 
-        <footer v-if="showSubmitButtons && fancyboxOptions.submitButtons" class="flex-container no-flex">
+        <footer v-if="showSubmitButtons && fancyboxOptionsProperties.submitButtons" class="flex-container no-flex">
             <!-- begin cancel-button -->
             <button
-                v-if="fancyboxOptions.submitButtons?.cancel"
+                v-if="fancyboxOptionsProperties.submitButtons?.cancel"
                 @click="cancel"
-                :title="fancyboxOptions.submitButtons.cancel?.tooltip">
+                :title="fancyboxOptionsProperties.submitButtons.cancel?.tooltip">
                 <CmdIcon
-                    v-if="fancyboxOptions.submitButtons.cancel?.iconClass"
-                    :iconClass="fancyboxOptions.submitButtons.cancel?.iconClass"
-                    :type="fancyboxOptions.submitButtons.cancel?.iconType"
+                    v-if="fancyboxOptionsProperties.submitButtons.cancel?.iconClass"
+                    :iconClass="fancyboxOptionsProperties.submitButtons.cancel?.iconClass"
+                    :type="fancyboxOptionsProperties.submitButtons.cancel?.iconType"
                 />
                 <span
-                    v-if="fancyboxOptions.submitButtons.cancel?.buttonText">{{ fancyboxOptions.submitButtons.cancel?.buttonText }}</span>
+                    v-if="fancyboxOptionsProperties.submitButtons.cancel?.buttonText">{{ fancyboxOptionsProperties.submitButtons.cancel?.buttonText }}</span>
             </button>
             <!-- end cancel-button -->
 
             <!-- begin confirm-button -->
             <button
-                v-if="fancyboxOptions.submitButtons?.confirm"
+                v-if="fancyboxOptionsProperties.submitButtons?.confirm"
                 @click="confirm"
-                :title="fancyboxOptions.submitButtons.cancel?.tooltip">
+                :title="fancyboxOptionsProperties.submitButtons.cancel?.tooltip">
                 <CmdIcon
-                    v-if="fancyboxOptions.submitButtons.confirm?.iconClass"
-                    :iconClass="fancyboxOptions.submitButtons.confirm?.iconClass"
-                    :type="fancyboxOptions.submitButtons.confirm?.iconType"
+                    v-if="fancyboxOptionsProperties.submitButtons.confirm?.iconClass"
+                    :iconClass="fancyboxOptionsProperties.submitButtons.confirm?.iconClass"
+                    :type="fancyboxOptionsProperties.submitButtons.confirm?.iconType"
                 />
                 <span
-                    v-if="fancyboxOptions.submitButtons.confirm?.buttonText">{{ fancyboxOptions.submitButtons.confirm?.buttonText }}</span>
+                    v-if="fancyboxOptionsProperties.submitButtons.confirm?.buttonText">{{ fancyboxOptionsProperties.submitButtons.confirm?.buttonText }}</span>
             </button>
             <!-- end confirm-button -->
         </footer>
@@ -141,9 +140,6 @@
 <script>
 import {defineComponent, createApp} from "vue"
 
-// import mixins
-import Identifier from "../mixins/Identifier"
-
 const openFancyBox = (config) => {
     const node = document.createElement("div");
     document.querySelector("body").appendChild(node);
@@ -156,9 +152,6 @@ const openFancyBox = (config) => {
 
 const FancyBox = defineComponent({
     name: "CmdFancyBox",
-    mixins: [
-        Identifier
-    ],
     emits: ['cancel', 'confirm'],
     data() {
         return {
@@ -206,42 +199,7 @@ const FancyBox = defineComponent({
          */
         fancyboxOptions: {
             type: Object,
-            default() {
-                return {
-                    closeIcon: {
-                        iconClass: "icon-cancel",
-                        iconType: "auto",
-                        tooltip: "Close"
-                    },
-                    printButtons: {
-                        color: {
-                            iconClass: "icon-print",
-                            iconType: "auto",
-                            tooltip: "print in color"
-                        },
-                        grayscale: {
-                            iconClass: "icon-print",
-                            iconType: "auto",
-                            tooltip: "print in grayscale"
-                        }
-                    },
-                    submitButtons: {
-                        cancel: {
-                            iconClass: "icon-cancel",
-                            iconType: "auto",
-                            tooltip: "Cancel",
-                            buttonText: "Cancel"
-                        },
-                        confirm: {
-                            iconClass: "icon-check",
-                            iconType: "auto",
-                            buttonText: "Confirm",
-                            tooltip: "Confirm",
-                            buttonType: "primary"
-                        }
-                    }
-                }
-            }
+            required: false
         },
         /**
          * allow closing fancybox by escape-key
@@ -333,6 +291,47 @@ const FancyBox = defineComponent({
         }
     },
     computed: {
+        fancyboxOptionsProperties() {
+            return {
+                closeIcon: {
+                    iconClass: "icon-cancel",
+                    iconType: "auto",
+                    tooltip: "Close",
+                    ...this.fancyboxOptions?.closeIcon
+                },
+                printButtons: {
+                    color: {
+                        iconClass: "icon-print",
+                        iconType: "auto",
+                        tooltip: "print in color",
+                        ...this.fancyboxOptions?.printButtons?.color
+                    },
+                    grayscale: {
+                        iconClass: "icon-print",
+                        iconType: "auto",
+                        tooltip: "print in grayscale",
+                        ...this.fancyboxOptions?.printButtons?.grayscale
+                    }
+                },
+                submitButtons: {
+                    cancel: {
+                        iconClass: "icon-cancel",
+                        iconType: "auto",
+                        tooltip: "Cancel",
+                        buttonText: "Cancel",
+                        ...this.fancyboxOptions?.submitButtons?.cancel
+                    },
+                    confirm: {
+                        iconClass: "icon-check",
+                        iconType: "auto",
+                        buttonText: "Confirm",
+                        tooltip: "Confirm",
+                        buttonType: "primary",
+                        ...this.fancyboxOptions?.submitButtons?.confirm
+                    }
+                }
+            }
+        },
         largeGalleryImage() {
             // change src-key for a single item/image in gallery to fit CmdImage-properties
             const fancyBoxItem = {...this.fancyBoxGallery[this.index].image}

package/src/components/CmdFormElement.vue

@@ -759,7 +759,7 @@ export default {
             // check if field is type "email"
             if (this.$attrs.type === "email") {
                 requirements.push({
-                    message: this.getMessage("cmdformelement.validationTooltip.is_valid_email"),
+                    message: this.getMessage("cmdformelement.validation_tooltip.is_valid_email"),
                     valid: () => this.$refs.input.checkValidity()
                 })
             }

package/src/components/CmdInputGroup.vue

@@ -259,11 +259,11 @@ export default {
 
             // set default-tooltip if customTooltip is not set
             if (this.validationStatus === 'error') {
-                return this.getMessage("cmdformelement.validationTooltip.an_error_occurred")
+                return this.getMessage("cmdformelement.validation_tooltip.an_error_occurred")
             } else if (this.validationStatus === 'success') {
-                return this.getMessage("cmdformelement.validationTooltip.information_is_filled_correctly")
+                return this.getMessage("cmdformelement.validation_tooltip.information_is_filled_correctly")
             }
-            return this.getMessage("cmdformelement.validationTooltip.open_field_requirements")
+            return this.getMessage("cmdformelement.validation_tooltip.open_field_requirements")
         },
         inputValue: {
             // read inputValue

package/src/components/CmdPageFooter.vue

@@ -16,6 +16,7 @@
             <button
                 v-if="buttonPrintViewOptions?.show"
                 :class="['button', {'primary': buttonPrintViewOptions.primary}]"
+                id="print-view-button"
                 :title="buttonPrintViewOptions.text ? buttonPrintViewOptions.icon?.tooltip : null"
                 @click="showFancyBox"
             >
@@ -110,7 +111,8 @@ export default {
                 cmdHeadline: this.cmdFancyBox.cmdHeadline,
                 showOverlay: this.cmdFancyBox.showOverlay,
                 showSubmitButtons: this.cmdFancyBox.showSubmitButtons,
-                allowEscapeKey: this.cmdFancyBox.allowEscapeKey
+                allowEscapeKey: this.cmdFancyBox.allowEscapeKey,
+                id: this.cmdFancyBox.id || "print-preview"
             })
         }
     }
@@ -150,15 +152,21 @@ export default {
 </style>
 
 <style lang="scss">
+/* begin cmd-page-footer -------------------------------------------------------------------------------------------- */
 @import "../assets/styles/variables";
 
-@media only screen and (max-width: $small-max-width) {
+@media only screen and (width <= $small-max-width) {
     .cmd-page-footer {
         align-items: flex-start;
 
         > .button-wrapper {
             margin-left: 0;
+
+            #print-view-button {
+                display: none;
+            }
         }
     }
 }
+/* end cmd-page-footer -------------------------------------------------------------------------------------------- */
 </style>

package/src/components/CmdTooltipForFormElements.vue

@@ -9,8 +9,8 @@
 
         <!-- begin CmdListOfRequirements -->
         <CmdListOfRequirements
-            v-if="cmdListOfRequirements.showRequirements"
-            v-bind="cmdListOfRequirements"
+            v-if="cmdListOfRequirementsProperties.showRequirements"
+            v-bind="cmdListOfRequirementsProperties"
         />
         <!-- end CmdListOfRequirements -->
     </CmdTooltip>
@@ -51,17 +51,21 @@ export default {
          */
         cmdListOfRequirements: {
             type: Object,
-            default() {
-                return {
-                    showRequirements: true,
-                    validationTooltip: "",
-                    inputRequirements: [],
-                    inputAttributes: {},
-                    showHeadline: true,
-                    inputModelValue: "",
-                    helplink: {},
-                    labelText: ""
-                }
+            required: false
+        }
+    },
+    computed: {
+        cmdListOfRequirementsProperties() {
+            return {
+                showRequirements: true,
+                validationTooltip: "",
+                inputRequirements: [],
+                inputAttributes: {},
+                showHeadline: true,
+                inputModelValue: "",
+                helplink: {},
+                labelText: "",
+                ...this.cmdListOfRequirements
             }
         }
     },
@@ -87,5 +91,6 @@ export default {
         }
     }
 }
+
 /* end cmd-tooltip-for-form-elements ---------------------------------------------------------------------------------------- */
 </style>

package/src/mixins/CmdFormElement/DefaultMessageProperties.js

@@ -2,7 +2,6 @@ export default {
   data() {
     return {
       defaultMessageProperties: {
-        "cmdformelement.headline.requirements_for_input": "Requirements for input",
         "cmdformelement.validation_tooltip.an_error_occurred": "An error occurred!",
         "cmdformelement.validation_tooltip.information_is_filled_correctly": "This information is filled correctly!",
         "cmdformelement.validation_tooltip.caps_lock_is_activated": "Attention: Caps lock is activated!",

package/src/mixins/FieldValidation.js

@@ -161,19 +161,15 @@ export default {
     },
     computed: {
         listOfRequirements() {
-            if (this.cmdListOfRequirements == null) {
-                return {
-                    showRequirements: true,
-                    showHeadline: true,
-                    validationTooltip: this.validationTooltip,
-                    inputRequirements: this.inputRequirements,
-                    inputAttributes: this.$attrs,
-                    inputModelValue: this.modelValue,
-                    helplink: {},
-                    labelText: this.labelText
-                }
+            return {
+                validationTooltip: this.validationTooltip,
+                inputRequirements: this.inputRequirements,
+                inputAttributes: this.$attrs,
+                inputModelValue: this.modelValue,
+                labelText: this.labelText,
+                i18n: this.i18n,
+                ...this.cmdListOfRequirements
             }
-            return this.cmdListOfRequirements
         },
         getValidationMessage() {
             // check if all requirements are valid