comand-component-library 4.1.5 → 4.1.7

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 -->
@@ -216,9 +228,10 @@
                 :required="configuration.userMessage?.required"
                 :name="configuration.userMessage?.name || 'user-message'"
                 :textCharactersLeft="getMessage('basic_form.text.characters_left')"
-                :maxLength="configuration.userMessage?.maxLength"
+                :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/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/CmdImage.vue

@@ -98,9 +98,9 @@
     <!-- begin default-view -->
     <!-- begin image with figure/figcaption -->
     <figure v-else-if="useFigureTag" :class="['cmd-image', textAlign]">
-        <figcaption v-if="figcaption?.position === 'top' && figcaption?.text" v-html="figcaption?.text"/>
+        <figcaption v-if="figcaption?.position === 'top' && figcaption?.text && figcaption?.show" v-html="figcaption?.text"/>
         <img :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded"/>
-        <figcaption v-if="figcaption?.position !== 'top' && figcaption?.text" v-html="figcaption?.text"/>
+        <figcaption v-if="figcaption?.position !== 'top' && figcaption?.text && figcaption?.show" v-html="figcaption?.text"/>
     </figure>
     <!-- end image with figure/figcaption -->
 

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"
             >
@@ -150,15 +151,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