comand-component-library 3.1.74 → 3.1.75

package/src/components/CmdBox.vue

@@ -3,17 +3,12 @@
     <div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible, 'stretch-vertically': stretchVertically}]">
         <template v-if="useSlots?.includes('header')">
             <!-- begin collapsible header with slot -->
-            <div v-if="collapsible" class="box-header">
+            <a v-if="collapsible" href="#" class="box-header" @click.prevent="toggleContentVisibility" :title="open ? iconOpen.tooltip : iconClosed.tooltip">
                 <!-- begin slot 'header' -->
                 <slot name="header"></slot>
                 <!-- end slot 'header' -->
-                <a href="#"
-                   class="toggle-icon"
-                   :title="open ? iconOpen.tooltip : iconClosed.tooltip"
-                   @click.prevent="toggleContentVisibility">
-                    <span :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
-                </a>
-            </div>
+                <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
+            </a>
             <!-- end collapsible header with slot -->
 
             <!-- begin default header with slot -->
@@ -27,20 +22,19 @@
         <template v-else>
             <!-- begin header for collapsible -->
             <a v-if="collapsible" class="box-header" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
-                <!-- begin CmdCustomHeadline -->
-                <CmdCustomHeadline v-if="cmdCustomHeadline?.headlineText"
-                                   v-bind="cmdCustomHeadline"/>
-                <!-- end CmdCustomHeadline -->
+                <!-- begin CmdHeadline -->
+                <CmdHeadline v-if="CmdHeadline?.headlineText" v-bind="CmdHeadline"/>
+                <!-- end CmdHeadline -->
                 <span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
             </a>
             <!-- end header for collapsible -->
 
-            <!-- begin CmdCustomHeadline -->
-            <CmdCustomHeadline v-else-if="!collapsible && cmdCustomHeadline?.headlineText"
+            <!-- begin CmdHeadline -->
+            <CmdHeadline v-else-if="!collapsible && CmdHeadline?.headlineText"
                                class="box-header"
-                               v-bind="cmdCustomHeadline"
+                               v-bind="CmdHeadline"
             />
-            <!-- end CmdCustomHeadline -->
+            <!-- end CmdHeadline -->
         </template>
 
         <!-- begin box-body -->
@@ -73,11 +67,11 @@
             <div v-if="product.discount" class="ribbon-discount">
                 <span>{{ product.discount }}</span>
             </div>
-            <!-- begin CmdCustomHeadline -->
-            <CmdCustomHeadline v-if="cmdCustomHeadline?.headlineText || product.name"
-                               v-bind="cmdCustomHeadline || {}"
-                               :headlineText="cmdCustomHeadline?.headlineText ? cmdCustomHeadline?.headlineText : product.name"/>
-            <!-- end CmdCustomHeadline -->
+            <!-- begin CmdHeadline -->
+            <CmdHeadline v-if="CmdHeadline?.headlineText || product.name"
+                               v-bind="CmdHeadline || {}"
+                               :headlineText="CmdHeadline?.headlineText ? CmdHeadline?.headlineText : product.name"/>
+            <!-- end CmdHeadline -->
         </div>
         <div class="box-body">
             <p v-if="product.articleNumber">{{ getMessage("cmdbox.productbox.article_no") }} {{ product.articleNumber }}</p>
@@ -94,11 +88,11 @@
         <div class="box-header">
             <img v-if="user.image" :src="user.image.src" :alt="user.image.alt"/>
             <div v-else :class="defaultProfileIconClass" :title="user.name"></div>
-            <!-- begin CmdCustomHeadline -->
-            <CmdCustomHeadline v-if="cmdCustomHeadline?.headlineText || user.name"
-                               v-bind="cmdCustomHeadline || {}"
-                               :headlineText="cmdCustomHeadline?.headlineText ? cmdCustomHeadline?.headlineText : user.name"/>
-            <!-- end CmdCustomHeadline -->
+            <!-- begin CmdHeadline -->
+            <CmdHeadline v-if="CmdHeadline?.headlineText || user.name"
+                               v-bind="CmdHeadline || {}"
+                               :headlineText="CmdHeadline?.headlineText ? CmdHeadline?.headlineText : user.name"/>
+            <!-- end CmdHeadline -->
         </div>
         <div class="box-body">
             <p v-if="user.profession">{{ user.profession }}</p>
@@ -119,13 +113,13 @@ import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
 import GlobalCurrency from "../mixins/GlobalCurrency"
 
 // import components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 import CmdListOfLinks from "./CmdListOfLinks"
 
 export default {
     name: "CmdBox",
     components: {
-        CmdCustomHeadline,
+        CmdHeadline,
         CmdListOfLinks,
     },
     mixins: [
@@ -250,9 +244,9 @@ export default {
             default: true
         },
         /**
-         * properties for CmdCustomHeadline-component
+         * properties for CmdHeadline-component
          */
-        cmdCustomHeadline: {
+        CmdHeadline: {
             type: Object,
             required: false
         }

package/src/components/CmdBoxSiteSearch.vue

@@ -4,12 +4,12 @@
         <legend v-if="showLegend">{{ textLegend }}</legend>
         <!-- begin legend -->
 
-        <!-- begin CmdCustomHeadline -->
-        <CmdCustomHeadline
-            v-if="cmdCustomHeadline"
-            v-bind="cmdCustomHeadline"
+        <!-- begin CmdHeadline -->
+        <CmdHeadline
+            v-if="CmdHeadline"
+            v-bind="CmdHeadline"
         />
-        <!-- end CmdCustomHeadline -->
+        <!-- end CmdHeadline -->
 
         <!-- begin form-elements -->
         <div class="flex-container">
@@ -95,7 +95,7 @@ import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdSiteSearch/DefaultMessageProperties"
 
 // import files for components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 import CmdFakeSelect from "./CmdFakeSelect"
 import CmdFormElement from "./CmdFormElement"
 import CmdFormFilters from "./CmdFormFilters"
@@ -111,7 +111,7 @@ export default {
     name: "CmdBoxSiteSearch",
     mixins: [I18n, DefaultMessageProperties],
     components: {
-        CmdCustomHeadline,
+        CmdHeadline,
         CmdFakeSelect,
         CmdFormElement,
         CmdFormFilters
@@ -183,9 +183,9 @@ export default {
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component
+         * properties for CmdHeadline-component
          */
-        cmdCustomHeadline: {
+        CmdHeadline: {
             type: Object,
             required: false
         },

package/src/components/CmdCookieDisclaimer.vue

@@ -1,22 +1,22 @@
 <template>
     <transition name="fade">
         <div class="cmd-cookie-disclaimer flex-container vertical">
-            <!-- begin CmdCustomHeadline -->
-            <CmdCustomHeadline
-                v-if="cmdCustomHeadlineCookieDisclaimer?.show && cmdCustomHeadlineCookieDisclaimer?.headlineText && cmdCustomHeadlineCookieDisclaimer?.headlineLevel"
-                v-bind="cmdCustomHeadlineCookieDisclaimer"
-                :headlineText="cmdCustomHeadlineCookieDisclaimer.headlineText"
-                :headlineLevel="cmdCustomHeadlineCookieDisclaimer.headlineLevel"
+            <!-- begin CmdHeadline -->
+            <CmdHeadline
+                v-if="CmdHeadlineCookieDisclaimer?.show && CmdHeadlineCookieDisclaimer?.headlineText && CmdHeadlineCookieDisclaimer?.headlineLevel"
+                v-bind="CmdHeadlineCookieDisclaimer"
+                :headlineText="CmdHeadlineCookieDisclaimer.headlineText"
+                :headlineLevel="CmdHeadlineCookieDisclaimer.headlineLevel"
             />
-            <!-- end CmdCustomHeadline -->
+            <!-- end CmdHeadline -->
 
             <!-- begin slot for cookie-options -->
             <slot name="cookie-options">
                 <!-- begin required cookies -->
-                <div v-if="cookieOptions.required" class="flex-container vertical">
-                    <CmdCustomHeadline v-if="cmdBoxRequiredCookies?.showHeadline" :headline-text="cmdBoxRequiredCookies?.headlineText" :headline-level="cmdBoxRequiredCookies?.headlineLevel "/>
+                <div v-if="cookieOptions?.required" class="flex-container vertical">
+                    <CmdHeadline v-if="cmdBoxRequiredCookies?.showHeadline" :headline-text="cmdBoxRequiredCookies?.headlineText" :headline-level="cmdBoxRequiredCookies?.headlineLevel "/>
                     <!-- begin CmdBox -->
-                    <CmdBox v-for="(cookie, index) in cookieOptions.required.cookies"
+                    <CmdBox v-for="(cookie, index) in cookieOptions.required.cookies || []"
                             :useSlots="['header', 'body']"
                             v-bind="cmdBoxRequiredCookies"
                             :key="index"
@@ -56,10 +56,10 @@
                 <hr/>
 
                 <!-- begin optional cookies -->
-                <div v-if="cookieOptions.optional" class="flex-container vertical">
-                    <CmdCustomHeadline v-if="cmdBoxOptionalCookies?.showHeadline" :headline-text="cmdBoxOptionalCookies?.headlineText" :headline-level="cmdBoxOptionalCookies?.headlineLevel "/>
+                <div v-if="cookieOptions?.optional" class="flex-container vertical">
+                    <CmdHeadline v-if="cmdBoxOptionalCookies?.showHeadline" :headline-text="cmdBoxOptionalCookies?.headlineText" :headline-level="cmdBoxOptionalCookies?.headlineLevel "/>
                     <!-- begin CmdBox -->
-                    <CmdBox v-for="(cookie, index) in cookieOptions.optional.cookies"
+                    <CmdBox v-for="(cookie, index) in cookieOptions.optional.cookies || []"
                             :useSlots="['header', 'body']"
                             v-bind="cmdBoxOptionalCookies"
                             :key="index"
@@ -123,7 +123,7 @@ import DefaultMessageProperties from "../mixins/CmdCookieDisclaimer/DefaultMessa
 
 // import components
 import CmdBox from "./CmdBox"
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 import CmdFormElement from "./CmdFormElement"
 
 export default {
@@ -131,7 +131,7 @@ export default {
     mixins: [I18n, DefaultMessageProperties],
     components: {
         CmdBox,
-        CmdCustomHeadline,
+        CmdHeadline,
         CmdFormElement
     },
     data() {
@@ -149,9 +149,9 @@ export default {
             required: false
         },
         /**
-         * properties for CmdCustomHeadline-component at top of cookie disclaimer
+         * properties for CmdHeadline-component at top of cookie disclaimer
          */
-        cmdCustomHeadlineCookieDisclaimer: {
+        CmdHeadlineCookieDisclaimer: {
             type: Object,
             default() {
                 return {

package/src/components/CmdFakeSelect.vue

@@ -9,6 +9,7 @@
                 disabled: $attrs.disabled
             }
         ]"
+        :title="$attrs.title"
         :aria-labelledby="labelId"
         :aria-required="$attrs.required !== undefined"
         ref="fakeselect"
@@ -18,28 +19,21 @@
             <span class="label-text" :id="labelId">
                 <span>{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup></span>
 
-                <!-- begin CmdTooltip -->
-                <CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
-                    <!-- begin CmdSystemMessage -->
-                    <CmdSystemMessage
-                        v-if="getValidationMessage"
-                        :message="getValidationMessage"
-                        :validation-status="validationStatus"
-                        :iconClose="{show: false}"
-                    />
-                    <!-- end CmdSystemMessage -->
-
-                    <!-- begin CmdListOfRequirements -->
-                    <CmdListOfRequirements
-                        v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')"
-                        :inputRequirements="inputRequirements"
-                        :inputModelValue="modelValue"
-                        :inputAttributes="$attrs"
-                        :helplink="helplink"
-                    />
-                    <!-- end CmdListOfRequirements -->
-                </CmdTooltip>
-                <!-- end CmdTooltip -->
+                <!-- begin CmdTooltipForInputElements -->
+                <CmdTooltipForInputElements
+                    v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
+                    ref="tooltip"
+                    :showRequirements="showRequirements"
+                    :inputRequirements="inputRequirements"
+                    :validationStatus="validationStatus"
+                    :validationMessage="getValidationMessage"
+                    :validationTooltip="validationTooltip"
+                    :inputAttributes="$attrs"
+                    :inputModelValue="modelValue"
+                    :helplink="helplink"
+                    :relatedId="tooltipId"
+                />
+                <!-- end CmdTooltipForInputElements -->
 
                 <a v-if="$attrs.required || inputRequirements.length"
                    href="#"
@@ -139,9 +133,7 @@ import FieldValidation from "../mixins/FieldValidation.js"
 import Tooltip from "../mixins/Tooltip.js"
 
 // import components
-import CmdListOfRequirements from "./CmdListOfRequirements"
-import CmdSystemMessage from "./CmdSystemMessage"
-import CmdTooltip from "./CmdTooltip"
+import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
 
 export default {
     name: 'CmdFakeSelect',
@@ -153,9 +145,7 @@ export default {
         Tooltip
     ],
     components: {
-        CmdListOfRequirements,
-        CmdSystemMessage,
-        CmdTooltip
+        CmdTooltipForInputElements
     },
     data() {
         return {
@@ -258,6 +248,19 @@ export default {
         }
     },
     computed: {
+        validationTooltip() {
+            if (!this.useCustomTooltip) {
+                return this.getValidationMessage
+            }
+
+            // set default-tooltip if customTooltip is not set
+            if (this.validationStatus === 'error') {
+                return this.getMessage("cmdformelement.validationTooltip.an_error_occurred")
+            } else if (this.validationStatus === 'success') {
+                return this.getMessage("cmdformelement.validationTooltip.information_is_filled_correctly")
+            }
+            return this.getMessage("cmdformelement.validationTooltip.open_field_requirements")
+        },
         // get the displayed option name
         optionName() {
             // fake a native selectbox
@@ -558,7 +561,7 @@ export default {
             margin: 0;
             border-bottom-right-radius: var(--border-radius);
             border-bottom-left-radius: var(--border-radius);
-            background: var(--pure-white);
+            background: var(--color-scheme-background-color);
             border: var(--primary-border);
 
             li {

package/src/components/CmdFormElement.vue

@@ -13,7 +13,8 @@
                 on: colored && isChecked,
                 off: colored && !isChecked,
                 'has-state': validationStatus
-               }]"
+               }
+           ]"
            :for="labelId"
            :title="$attrs.title"
            ref="label">
@@ -23,29 +24,21 @@
               :class="['label-text', !showLabel ? 'hidden' : undefined]">
             <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
 
-            <!-- begin CmdTooltip -->
-            <CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
-                <!-- begin CmdSystemMessage -->
-                <CmdSystemMessage
-                    v-if="getValidationMessage"
-                    :message="getValidationMessage"
-                    :validation-status="validationStatus"
-                    :iconClose="{show: false}"
-                />
-                <!-- end CmdSystemMessage -->
-
-                <!-- begin CmdListOfRequirements -->
-                <CmdListOfRequirements
-                    v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')"
-                    :inputRequirements="inputRequirements"
-                    :helplink="helplink"
-                    :inputModelValue="modelValue"
-                    :inputAttributes="$attrs"
-                    :validationTooltip="validationTooltip"
-                />
-                <!-- end CmdListOfRequirements -->
-            </CmdTooltip>
-            <!-- end CmdTooltip -->
+            <!-- begin CmdTooltipForInputElements -->
+            <CmdTooltipForInputElements
+                v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
+                ref="tooltip"
+                :showRequirements="showRequirements"
+                :inputRequirements="inputRequirements"
+                :validationStatus="validationStatus"
+                :validationMessage="getValidationMessage"
+                :validationTooltip="validationTooltip"
+                :inputAttributes="$attrs"
+                :inputModelValue="modelValue"
+                :helplink="helplink"
+                :relatedId="tooltipId"
+            />
+            <!-- end CmdTooltipForInputElements -->
 
             <a v-if="$attrs.required || inputRequirements.length"
                 href="#"
@@ -212,17 +205,13 @@ import FieldValidation from "../mixins/FieldValidation.js"
 import Tooltip from "../mixins/Tooltip.js"
 
 // import components
-import CmdListOfRequirements from "./CmdListOfRequirements"
-import CmdSystemMessage from "./CmdSystemMessage"
-import CmdTooltip from "./CmdTooltip"
+import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
 
 export default {
     inheritAttrs: false,
     name: "FormElement",
     components: {
-        CmdListOfRequirements,
-        CmdSystemMessage,
-        CmdTooltip
+        CmdTooltipForInputElements
     },
     mixins: [
         I18n,
@@ -269,6 +258,8 @@ export default {
         },
         /**
          * text for label
+         *
+         * @requiredForAccessibility: true
          */
         labelText: {
             type: String,
@@ -703,12 +694,11 @@ export default {
             }
             return null
         },
-        onBlur(event) {
+        validateInput(event) {
             // check if surrounding form with data-use-validation exists
             const useValidation = event.target.closest("form")?.dataset.useValidation === "true"
 
             if (useValidation) {
-                this.tooltip = false
                 this.validationStatus = ""
 
                 // if input is filled, set status to success (expect for checkboxes and radiobuttons)
@@ -733,6 +723,14 @@ export default {
                 }
             }
         },
+        onBlur(event) {
+            this.validateInput(event)
+            this.closeTooltipOnBlur()
+        },
+        onInput(event) {
+            this.validateInput(event)
+            this.$emit('update:modelValue', event.target.value)
+        },
         onChange(event) {
             if (typeof this.modelValue === "boolean") {
                 this.$emit("update:modelValue", event.target.checked)
@@ -754,9 +752,6 @@ export default {
                 this.$refs.label.focus()
             }
         },
-        onInput(event) {
-            this.$emit('update:modelValue', event.target.value)
-        },
         showPassword() {
             // get password-field
             const passwordField = this.$refs.input
@@ -777,6 +772,10 @@ export default {
         },
         executeSearch() {
             this.$emit("search", this.value)
+        },
+        closeTooltipOnBlur() {
+            // close tooltip by calling function from CmdTooltipForInputElements using $refs
+            this.$refs.tooltip.hideTooltip()
         }
     },
     watch: {

package/src/components/{CmdCustomHeadline.vue → CmdHeadline.vue}

@@ -15,7 +15,7 @@
 
 <script>
 export default {
-    name: "CmdCustomHeadline",
+    name: "CmdHeadline",
     props: {
         /**
          * text for headline

package/src/components/CmdInputGroup.vue

@@ -12,28 +12,21 @@
         <span :class="['label-text', { hidden: !showLabel}]" :id="labelId" :aria-labelledby="labelId">
              <span>{{ labelText }}<sup v-if="required">*</sup></span>
 
-            <!-- begin CmdTooltip -->
-            <CmdTooltip v-if="useCustomTooltip" class="box" :class="validationStatus" :relatedId="tooltipId" :toggle-visibility-by-click="true">
-                <!-- begin CmdSystemMessage -->
-                <CmdSystemMessage
-                    v-if="getValidationMessage"
-                    :message="getValidationMessage"
-                    :validation-status="validationStatus"
-                    :iconClose="{show: false}"
-                />
-                <!-- end CmdSystemMessage -->
-
-                <!-- begin CmdListOfRequirements -->
-                <CmdListOfRequirements
-                    v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')"
-                    :inputRequirements="inputRequirements"
-                    :helplink="helplink"
-                    :inputModelValue="modelValue"
-                    :inputAttributes="$attrs"
-                />
-                <!-- end CmdListOfRequirements -->
-            </CmdTooltip>
-            <!-- end CmdTooltip -->
+            <!-- begin CmdTooltipForInputElements -->
+            <CmdTooltipForInputElements
+                v-if="useCustomTooltip && (validationStatus === '' || validationStatus === 'error')"
+                ref="tooltip"
+                :showRequirements="showRequirements"
+                :inputRequirements="inputRequirements"
+                :validationStatus="validationStatus"
+                :validationMessage="getValidationMessage"
+                :validationTooltip="validationTooltip"
+                :inputAttributes="$attrs"
+                :inputModelValue="modelValue"
+                :helplink="helplink"
+                :relatedId="tooltipId"
+            />
+            <!-- end CmdTooltipForInputElements -->
 
             <a v-if="required || inputRequirements.length"
                href="#"
@@ -80,15 +73,11 @@ import FieldValidation from "../mixins/FieldValidation.js"
 import Tooltip from "../mixins/Tooltip.js"
 
 // import components
-import CmdListOfRequirements from "./CmdListOfRequirements"
-import CmdSystemMessage from "./CmdSystemMessage"
-import CmdTooltip from "./CmdTooltip"
+import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
 
 export default {
     components: {
-        CmdListOfRequirements,
-        CmdSystemMessage,
-        CmdTooltip
+        CmdTooltipForInputElements
     },
     mixins: [
         FieldValidation,
@@ -96,8 +85,7 @@ export default {
     ],
     data() {
         return {
-            value: "",
-            validationStatus: ""
+            value: ""
         }
     },
     props: {
@@ -115,13 +103,6 @@ export default {
             type: Boolean,
             default: false
         },
-        /**
-         * tooltip for validation
-         */
-        validationTooltip: {
-            type: String,
-            default: ""
-        },
         /**
          * list of input-elements inside group
          *
@@ -231,7 +212,33 @@ export default {
             default: false
         }
     },
+    methods: {
+        updateStatus() {
+            if (this.required) {
+                if(this.inputValue?.length) {
+                    this.validationStatus = ""
+                    return
+                }
+                this.validationStatus =  "error"
+                return
+            }
+            this.validationStatus = this.status
+        }
+    },
     computed: {
+        validationTooltip() {
+            if (!this.useCustomTooltip) {
+                return this.getValidationMessage
+            }
+
+            // set default-tooltip if customTooltip is not set
+            if (this.validationStatus === 'error') {
+                return this.getMessage("cmdformelement.validationTooltip.an_error_occurred")
+            } else if (this.validationStatus === 'success') {
+                return this.getMessage("cmdformelement.validationTooltip.information_is_filled_correctly")
+            }
+            return this.getMessage("cmdformelement.validationTooltip.open_field_requirements")
+        },
         // get ID for accessibility
         labelId() {
             if (this.$attrs.id !== undefined) {
@@ -250,25 +257,16 @@ export default {
             }
         }
     },
-    methods: {
-        onChange(e) {
-            if (typeof this.value === "string") {
-                this.$emit("update:value", e.target.value)
-            } else if (this.value !== undefined) {
-                let values = [...this.value]
-                if (e.target.checked) {
-                    values.push(e.target.value)
-                } else {
-                    values = values.filter(value => value !== e.target.value)
-                }
-                this.$emit("update:modelValue", values)
-            }
-        }
-    },
     watch: {
         status: {
             handler() {
-                this.validationStatus = this.status
+                this.updateStatus()
+            },
+            immediate: true
+        },
+        modelValue: {
+            handler() {
+                this.updateStatus()
             },
             immediate: true
         }