comand-component-library 3.1.91 → 3.1.93

package/src/components/CmdNewsletterSubscription.vue

@@ -1,4 +1,9 @@
 <template>
+    <fieldset class="cmd-newsletter-subscription flex-container">
+        <!-- begin legend -->
+        <legend :class="{'hidden' : !showLegend}">{{ textLegend }}</legend>
+        <!-- end legend -->
+
         <!-- begin cmd-input-group -->
         <CmdInputGroup
             inputTypes="radio"
@@ -34,6 +39,7 @@
             />
             <!-- end cmd-form-element -->
         </div>
+    </fieldset>
 </template>
 
 <script>
@@ -67,8 +73,8 @@ export default {
             }
         },
         buttonType: {
-          type: String,
-          default: "button",
+            type: String,
+            default: "button",
             validator(value) {
                 return value === "submit" || value === "button"
             }

package/src/components/CmdSiteHeader.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['cmd-site-header', { sticky: sticky }]" role="banner">
+    <div :class="['cmd-site-header', { sticky: sticky, 'navigation-inline': navigationInline }]" role="banner">
         <!-- begin slot for elements above header -->
         <div class="top-header">
             <slot name="top-header"></slot>
@@ -13,22 +13,34 @@
         </header>
         <!-- end header-wrapper with slots for logo and other header elements -->
 
-        <!-- begin CmdMainNavigation -->
-        <CmdMainNavigation
-            v-if="cmdMainNavigation?.navigationEntries?.length"
-            v-bind="cmdMainNavigation"
-            :closeOffcanvas="closeOffcanvas"/>
-        <!-- end CmdMainNavigation -->
+        <header v-if="cmdCompanyLogo || cmdMainNavigation?.navigationEntries?.length" :class="useGrid ? 'grid-container-create-columns': 'flex-container'">
+            <!-- begin CmdCompanyLogo -->
+            <CmdCompanyLogo
+                v-if="cmdCompanyLogo"
+                v-bind="cmdCompanyLogo"
+            />
+            <!-- end CmdCompanyLogo -->
+
+            <!-- begin CmdMainNavigation -->
+            <CmdMainNavigation
+                v-if="cmdMainNavigation?.navigationEntries?.length"
+                v-bind="cmdMainNavigation"
+                :closeOffcanvas="closeOffcanvas"
+            />
+            <!-- end CmdMainNavigation -->
+        </header>
     </div>
 </template>
 
 <script>
 // import components
+import CmdCompanyLogo from "./CmdCompanyLogo"
 import CmdMainNavigation from "./CmdMainNavigation"
 
 export default {
     name: "CmdSiteHeader",
     components: {
+        CmdCompanyLogo,
         CmdMainNavigation
     },
     props: {
@@ -46,6 +58,15 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * activate if navigation should be displayed inline to logo (otherwise it will be displayed below)
+         *
+         * @affectsStyling: true
+         */
+        navigationInline: {
+            type: Boolean,
+            default: false
+        },
         /**
          * use a grid for positioning of inner-elements (else a flex-container will be used)
          *
@@ -55,6 +76,13 @@ export default {
             type: Boolean,
             default: true
         },
+        /**
+         * properties for cmdCompanyLogo-component
+         */
+        cmdCompanyLogo: {
+            type: Object,
+            required: true
+        },
         /**
          * properties for CmdMainNavigation-component
          */

package/src/components/{CmdBoxSiteSearch.vue → CmdSiteSearch.vue}

@@ -1,8 +1,8 @@
 <template>
     <fieldset class="cmd-box-site-search flex-container">
         <!-- begin legend -->
-        <legend v-if="showLegend">{{ textLegend }}</legend>
-        <!-- begin legend -->
+        <legend :class="{'hidden' : !showLegend}">{{ textLegend }}</legend>
+        <!-- end legend -->
 
         <!-- begin CmdHeadline -->
         <CmdHeadline
@@ -12,20 +12,21 @@
         <!-- end CmdHeadline -->
 
         <!-- begin form-elements -->
-        <div class="flex-container">
+        <div class="flex-container align-bottom">
             <!-- begin CmdFormElement for first input -->
             <CmdFormElement
-                v-if="cmdFormElementInput1.show"
                 element="input"
                 :type="cmdFormElementInput1.type"
                 :show-label="cmdFormElementInput1.showLabel"
                 :labelText="cmdFormElementInput1.labelText"
                 :placeholder="cmdFormElementInput1.placeholder"
+                :required="cmdFormElementInput1.required"
+                :showSearchButton="cmdFormElementInput1.showSearchButton"
                 v-model="searchValue1"
             />
             <!-- end CmdFormElement for first input -->
 
-            <div class="flex-container no-gap">
+            <div class="flex-container align-bottom no-gap">
                 <!-- begin CmdFormElement for second input -->
                 <CmdFormElement
                     v-if="cmdFormElementInput2.show"
@@ -34,6 +35,7 @@
                     :show-label="cmdFormElementInput2.showLabel"
                     :labelText="cmdFormElementInput2.labelText"
                     :placeholder="cmdFormElementInput2.placeholder"
+                    :required="cmdFormElementInput2.required"
                     v-model="searchValue2"
                 />
                 <!-- end CmdFormElement for second input -->
@@ -47,6 +49,7 @@
                     :show-label="cmdFormElementRadius.showLabel"
                     :labelText="cmdFormElementRadius.labelText"
                     :select-options="cmdFormElementRadius.selectOptions"
+                    :required="cmdFormElementRadius.required"
                 />
                 <!-- end CmdFormElement for radius -->
             </div>
@@ -56,6 +59,7 @@
                 element="button"
                 :nativeButton="cmdFormElementSearchButton"
                 @click="onSearchButtonClick"
+                :disabled="buttonSearchDisabled"
                 aria-live="assertive"
             />
             <!-- end CmdFormElement for search-button -->
@@ -87,7 +91,9 @@
         </template>
         <!-- end filters -->
     </fieldset>
+    <!-- begin CmdFormFilters -->
     <CmdFormFilters v-if="cmdFakeSelect?.show" v-model="searchFilters" :selectedOptionsName="getOptionName"/>
+    <!-- end CmdFormFilters -->
 </template>
 
 <script>
@@ -197,11 +203,12 @@ export default {
             type: Object,
             default() {
                 return {
-                    show: true,
-                    type: "text",
-                    showLabel: true,
+                    type: "search",
+                    showLabel: false,
+                    required: true,
                     labelText: "What do you like to search for?",
-                    placeholder: "Search"
+                    placeholder: "What do you like to search for?",
+                    showSearchButton: false
                 }
             }
         },
@@ -214,9 +221,10 @@ export default {
                 return {
                     show: true,
                     type: "text",
-                    showLabel: true,
+                    showLabel: false,
+                    required: true,
                     labelText: "Where do you like to search?",
-                    placeholder: "City, Zip"
+                    placeholder: "Enter city, zip, country"
                 }
             }
         },
@@ -228,9 +236,14 @@ export default {
             default() {
                 return {
                     show: true,
-                    showLabel: true,
+                    showLabel: false,
+                    required: false,
                     labelText: "Radius",
                     selectOptions: [
+                        {
+                            text: "None",
+                            value: 0
+                        },
                         {
                             text: "5 Km",
                             value: 5
@@ -311,6 +324,13 @@ export default {
             set(value) {
                 this.$emit("update:modelValueSearchFilters", value)
             }
+        },
+        buttonSearchDisabled() {
+            const validInput1 = !this.cmdFormElementInput1.required || this.searchValue1.trim()
+            const validInput2 = !this.cmdFormElementInput2.show || !this.cmdFormElementInput2.required || this.searchValue2.trim()
+            const validInputRadius = !this.cmdFormElementRadius.show || !this.cmdFormElementRadius.required || this.radius
+
+            return !(validInput1 && validInput2 && validInputRadius)
         }
     },
     methods: {

package/src/components/CmdTooltipForInputElements.vue

@@ -7,15 +7,6 @@
         :relatedId="relatedId"
         :toggle-visibility-by-click="true">
 
-        <!-- begin CmdSystemMessage -->
-        <CmdSystemMessage
-            v-if="cmdListOfRequirements?.inputAttributes?.required && validationMessage"
-            :systemMessage="validationMessage"
-            :validation-status="validationStatus"
-            :iconClose="{show: false}"
-        />
-        <!-- end CmdSystemMessage -->
-
         <!-- begin CmdListOfRequirements -->
         <CmdListOfRequirements
             v-if="cmdListOfRequirements.showRequirements"
@@ -35,14 +26,12 @@
 <script>
 // import components
 import CmdListOfRequirements from "./CmdListOfRequirements"
-import CmdSystemMessage from "./CmdSystemMessage"
 import CmdTooltip from "./CmdTooltip"
 
 export default {
     name: "CmdTooltipForInputElements",
     components: {
         CmdListOfRequirements,
-        CmdSystemMessage,
         CmdTooltip
     },
     props: {
@@ -54,19 +43,12 @@ export default {
             default: ""
         },
         /**
-         * validation-status for CmdSystemMessage-component and CmdTooltip-component
+         * validation-status for CmdTooltip-component
          */
         validationStatus: {
             type: String,
             default: ""
         },
-        /**
-         * validation-message for CmdSystemMessage-component
-         */
-        validationMessage: {
-            type: String,
-            default: ""
-        },
         /**
          * properties for CmdListOfRequirements-component
          */

package/src/documentation/generated/CmdLoginFormPropertyDescriptions.json

@@ -4,7 +4,7 @@
             "value for v-model (modelValue is default name in vue 3)"
         ]
     },
-    "textLegend": {
+    "textLegendLoginForm": {
         "comments": [
             "text used as legend for login-fieldset"
         ],
@@ -19,9 +19,9 @@
             "toggle legend visibility"
         ]
     },
-    "legendSendLoginForm": {
+    "textLegendForgotLoginForm": {
         "comments": [
-            "legend for send-login-fieldset"
+            "legend for forgot-login-fieldset"
         ],
         "annotations": {
             "requiredForAccessibility": [

package/src/documentation/generated/CmdSiteHeaderPropertyDescriptions.json

@@ -9,6 +9,16 @@
             "activated sticky-header (stays on top if page is scrolled)"
         ]
     },
+    "navigationInline": {
+        "comments": [
+            "activate if navigation should be displayed inline to logo (otherwise it will be displayed below)"
+        ],
+        "annotations": {
+            "affectsStyling": [
+                "true"
+            ]
+        }
+    },
     "useGrid": {
         "comments": [
             "use a grid for positioning of inner-elements (else a flex-container will be used)"
@@ -19,6 +29,11 @@
             ]
         }
     },
+    "cmdCompanyLogo": {
+        "comments": [
+            "properties for cmdCompanyLogo-component"
+        ]
+    },
     "cmdMainNavigation": {
         "comments": [
             "properties for CmdMainNavigation-component"

package/src/documentation/generated/CmdSiteSearchPropertyDescriptions.json

@@ -0,0 +1,79 @@
+{
+    "modelValueInput1": {
+        "comments": [
+            "custom modelValue for first input-field"
+        ]
+    },
+    "modelValueInput2": {
+        "comments": [
+            "custom modelValue for second input-field"
+        ]
+    },
+    "modelValueRadius": {
+        "comments": [
+            "custom modelValue for radius"
+        ]
+    },
+    "modelValueSearchFilters": {
+        "comments": [
+            "custom modelValue for search-filters"
+        ]
+    },
+    "useFilters": {
+        "comments": [
+            "toggle use of filters (must configured)"
+        ]
+    },
+    "textLegend": {
+        "comments": [
+            "text for legend"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "true"
+            ]
+        }
+    },
+    "showLegend": {
+        "comments": [
+            "toggle legend visibility",
+            "",
+            "textLegend must be set"
+        ]
+    },
+    "results": {
+        "comments": [
+            "send search result from outside to display inside this component"
+        ]
+    },
+    "cmdHeadline": {
+        "comments": [
+            "properties for CmdHeadline-component"
+        ]
+    },
+    "cmdFormElementInput1": {
+        "comments": [
+            "properties for CmdFormElement-component first search-field"
+        ]
+    },
+    "cmdFormElementInput2": {
+        "comments": [
+            "properties for CmdFormElement-component for second search-field"
+        ]
+    },
+    "cmdFormElementRadius": {
+        "comments": [
+            "properties for CmdFormElement-component for radius"
+        ]
+    },
+    "cmdFormElementSearchButton": {
+        "comments": [
+            "properties for CmdFormElement-component for search-button"
+        ]
+    },
+    "cmdFakeSelect": {
+        "comments": [
+            "properties for CmdFakeSelect-component for filters"
+        ]
+    }
+}

package/src/documentation/generated/CmdTooltipForInputElementsPropertyDescriptions.json

@@ -6,12 +6,7 @@
     },
     "validationStatus": {
         "comments": [
-            "validation-status for CmdSystemMessage-component and CmdTooltip-component"
-        ]
-    },
-    "validationMessage": {
-        "comments": [
-            "validation-message for CmdSystemMessage-component"
+            "validation-status for CmdTooltip-component"
         ]
     },
     "cmdListOfRequirements": {

package/src/index.js

@@ -5,7 +5,6 @@ export { default as CmdAddressData } from '@/components/CmdAddressData'
 export { default as CmdBackToTopButton } from '@/components/CmdBackToTopButton'
 export { default as CmdBankAccountData } from '@/components/CmdBankAccountData'
 export { default as CmdBox } from '@/components/CmdBox'
-export { default as CmdBoxSiteSearch } from '@/components/CmdBoxSiteSearch'
 export { default as CmdBoxWrapper } from '@/components/CmdBoxWrapper'
 export { default as CmdBreadcrumbs } from '@/components/CmdBreadcrumbs'
 export { default as CmdCompanyLogo } from '@/components/CmdCompanyLogo'
@@ -31,6 +30,7 @@ export { default as CmdProgressBar } from '@/components/CmdProgressBar'
 export { default as CmdShareButtons } from '@/components/CmdShareButtons'
 export { default as CmdSiteFooter } from '@/components/CmdSiteFooter'
 export { default as CmdSiteHeader } from '@/components/CmdSiteHeader'
+export { default as CmdSiteSearch } from '@/components/CmdSiteSearch'
 export { default as CmdSlideButton } from '@/components/CmdSlideButton'
 export { default as CmdSlideshow } from '@/components/CmdSlideshow'
 export { default as CmdSwitchLanguage } from '@/components/CmdSwitchLanguage'

package/src/mixins/CmdFormElement/DefaultMessageProperties.js

@@ -6,7 +6,8 @@ export default {
         "cmdformelement.validationTooltip.an_error_occurred": "An error occurred!",
         "cmdformelement.validationTooltip.information_is_filled_correctly": "This information is filled correctly!",
         "cmdformelement.validationTooltip.caps_lock_is_activated": "Attention: Caps lock is activated!",
-        "cmdformelement.validationTooltip.open_field_requirements": "Open field requirements!"
+        "cmdformelement.validationTooltip.open_field_requirements": "Open field requirements!",
+        "cmdformelement.validationTooltip.is_valid_email": "Is valid e-mail-address"
       }
     }
   }

package/src/mixins/FieldValidation.js

@@ -219,21 +219,23 @@ export default {
                     }
                 })
             }
+
             // check if field has a minimum length
             if(this.$attrs.minlength) {
                 standardRequirements.push({
-                    message: this.getMessage("cmdfieldvalidation.input_has_minimum_length") + "(" + this.modelValue.length + "/" + this.$attrs.minlength + ")",
+                    message: this.getMessage("cmdfieldvalidation.input_has_minimum_length") + " (" + this.modelValue.length + "/" + this.$attrs.minlength + ")",
                     valid(value, attributes) {
                         return value.length >= attributes.minlength
                     }
                 })
             }
-            // check is field has custom requirements defined
-            if(!this.customRequirements || !this.customRequirements.length) {
-                return standardRequirements
-            }
+
             // duplicate existing requirements into new (combined) array
-            return [...standardRequirements, ...this.customRequirements]
+            return [
+                ...standardRequirements,
+                ...(this.additionalStandardRequirements() || []),
+                ...(this.customRequirements || [])
+            ]
         }
     },
     methods: {
@@ -246,6 +248,9 @@ export default {
                 this.validationStatus = ""
             }
         },
+        additionalStandardRequirements() {
+            return []
+        },
         getRequirementMessage() {
             return this.getMessage("cmdfieldvalidation.required_field_is_filled")
         }