comand-component-library 3.1.72 → 3.1.75

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"
@@ -17,6 +18,23 @@
             <!-- begin label -->
             <span class="label-text" :id="labelId">
                 <span>{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup></span>
+
+                <!-- 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="#"
                    @click.prevent
@@ -102,51 +120,6 @@
             </li>
         </ul>
     </div>
-    <!-- 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"
-            :validationStatus="validationStatus"
-            :iconClose="{show: false}"
-        />
-        <!-- end CmdSystemMessage -->
-
-        <template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
-            <!-- begin list of requirements -->
-            <h6>{{ getMessage("cmdfakeselect.headline.requirements_for_input") }}<br/>"{{ labelText }}"</h6>
-            <dl class="list-of-requirements">
-                <template v-for="(requirement, index) in inputRequirements" :key="index">
-                    <dt aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">{{ requirement.message }}:</dt>
-                    <dd :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">
-                        <span aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'icon-check-circle' : 'icon-error-circle'"
-                              :title="requirement.valid(modelValue, $attrs) ? 'success' : 'error'"></span>
-                    </dd>
-                </template>
-            </dl>
-            <!-- end list of requirements -->
-
-            <!-- begin helplink -->
-            <template v-if="helplink">
-                <hr v-if="helplink.show"/>
-                <a v-if="helplink.show && helplink.url"
-                   :href="helplink.url"
-                   :target="helplink.target"
-                   @click.prevent>
-                    <span v-if="helplink.icon?.iconClass"
-                          :class="helplink.icon?.iconClass"
-                          :title="helplink.icon?.tooltip">
-                    </span>
-                    <span v-if="helplink.text">
-                        {{ helplink.text }}
-                    </span>
-                </a>
-            </template>
-            <!-- end helplink -->
-        </template>
-    </CmdTooltip>
-    <!-- end CmdTooltip -->
 </template>
 
 <script>
@@ -155,13 +128,12 @@ import {createUuid} from "../utils/common.js"
 
 // import mixins
 import I18n from "../mixins/I18n"
-import DefaultMessageProperties from "../mixins/CmdBox/DefaultMessageProperties"
+import DefaultMessageProperties from "../mixins/CmdFakeSelect/DefaultMessageProperties"
 import FieldValidation from "../mixins/FieldValidation.js"
 import Tooltip from "../mixins/Tooltip.js"
 
 // import components
-import CmdSystemMessage from "./CmdSystemMessage"
-import CmdTooltip from "./CmdTooltip"
+import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
 
 export default {
     name: 'CmdFakeSelect',
@@ -173,8 +145,7 @@ export default {
         Tooltip
     ],
     components: {
-        CmdSystemMessage,
-        CmdTooltip
+        CmdTooltipForInputElements
     },
     data() {
         return {
@@ -277,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
@@ -334,7 +318,7 @@ export default {
         },
         // get ID for accessibility
         labelId() {
-            if(this.$attrs.id !== undefined) {
+            if (this.$attrs.id !== undefined) {
                 return this.$attrs.id
             }
             return "label-" + createUuid()
@@ -577,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,8 +13,10 @@
                 on: colored && isChecked,
                 off: colored && !isChecked,
                 'has-state': validationStatus
-               }]"
+               }
+           ]"
            :for="labelId"
+           :title="$attrs.title"
            ref="label">
 
         <!-- begin label-text (+ required asterisk) -->
@@ -22,44 +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 -->
-
-        <template v-if="showRequirements && (validationStatus === '' || validationStatus === 'error')">
-            <!-- begin list of requirements -->
-            <h6>
-                {{ getMessage("cmdformelement.headline.requirements_for_input") }}<br/>
-                "{{ labelText }}"
-            </h6>
-            <dl class="list-of-requirements">
-                <template v-for="(requirement, index) in inputRequirements" :key="index">
-                    <dt aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">{{ requirement.message }}:</dt>
-                    <dd :class="requirement.valid(modelValue, $attrs) ? 'success' : 'error'">
-                        <span aria-live="assertive" :class="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.iconClass : iconHasStateError.iconClass"
-                              :title="requirement.valid(modelValue, $attrs) ? iconHasStateSuccess.tooltip : iconHasStateError.tooltip"></span>
-                    </dd>
-                </template>
-            </dl>
-            <!-- end list of requirements -->
-
-            <!-- begin helplink -->
-            <hr v-if="helplink?.show"/>
-            <a v-if="helplink?.show && helplink?.url" :href="helplink.url" :target="helplink.target" @click.prevent>
-                <span v-if="helplink.icon?.iconClass" :class="helplink.icon?.iconClass" :title="helplink.icon?.tooltip"></span>
-                <span v-if="helplink.text">{{ helplink.text }}</span>
-            </a>
-            <!-- end helplink -->
-        </template>
-    </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="#"
@@ -226,15 +205,13 @@ import FieldValidation from "../mixins/FieldValidation.js"
 import Tooltip from "../mixins/Tooltip.js"
 
 // import components
-import CmdSystemMessage from "./CmdSystemMessage"
-import CmdTooltip from "./CmdTooltip"
+import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
 
 export default {
     inheritAttrs: false,
     name: "FormElement",
     components: {
-        CmdSystemMessage,
-        CmdTooltip
+        CmdTooltipForInputElements
     },
     mixins: [
         I18n,
@@ -281,6 +258,8 @@ export default {
         },
         /**
          * text for label
+         *
+         * @requiredForAccessibility: true
          */
         labelText: {
             type: String,
@@ -425,7 +404,7 @@ export default {
         /**
          * set status for label and form-element
          *
-         * @allowedValues: error, success
+         * @allowedValues: error, warning, success, info
          *
          * @affectsStyling: true
          */
@@ -715,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)
@@ -745,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)
@@ -766,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
@@ -789,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: {
@@ -810,14 +797,6 @@ export default {
         right: .5rem
     }
 
-    .cmd-tooltip {
-        position: absolute;
-        right: 0;
-        transform: translateY(calc(-100% - calc(var(--default-margin) / 2)));
-        left: auto !important;
-        top: 0 !important;
-    }
-
     &.has-state, & + .cmd-tooltip {
         ::placeholder {
             color: var(--status-color);

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

@@ -1,18 +1,54 @@
 <template>
-    <div :class="['cmd-input-group label', {inline: labelInline, 'multiple-switch': multipleSwitch, disabled: disabled}]">
+    <div :class="[
+        'cmd-input-group label',
+        validationStatus,
+        {inline: labelInline,
+        'multiple-switch': multipleSwitch,
+        disabled: disabled,
+        'toggle-switch': toggleSwitch,
+        'has-state': validationStatus
+        }
+        ]">
         <span :class="['label-text', { hidden: !showLabel}]" :id="labelId" :aria-labelledby="labelId">
-             <span>{{ labelText }}<sup v-if="$attrs.required">*</sup></span>
+             <span>{{ labelText }}<sup v-if="required">*</sup></span>
+
+            <!-- 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="#"
+               @click.prevent
+               :class="getStatusIconClass"
+               :title="validationTooltip"
+               :aria-errormessage="getValidationMessage"
+               aria-live="assertive"
+               :id="tooltipId"
+               :role="validationStatus === 'error' ? 'alert' : 'dialog'">
+            </a>
         </span>
         <span v-if="!useSlot" :class="['flex-container', {'no-flex': !stretchHorizontally, 'no-gap': multipleSwitch}]">
             <label v-for="(inputElement, index) in inputElements" :key="index" :for="inputElement.id">
                 <input
                     :type="inputTypes"
-                   :id="inputElement.id"
-                   :name="inputElement.name"
-                   :value="inputElement.value"
-                   v-model="inputValue"
-                   :disabled="disabled"
-                   :class="{'replace-input-type': replaceInputType}"
+                    :id="inputElement.id"
+                    :name="inputElement.name"
+                    :value="inputElement.value"
+                    v-model="inputValue"
+                    :disabled="disabled"
+                    :class="{'replace-input-type': replaceInputType, 'toggle-switch': toggleSwitch}"
                 />
                 <span v-if="multipleSwitch && inputElement.iconClass" :class="inputElement.iconClass"></span>
                 <span v-if="inputElement.labelText">{{ inputElement.labelText }}</span>
@@ -32,7 +68,21 @@
 <script>
 import {createUuid} from "../utils/common"
 
+// import mixins
+import FieldValidation from "../mixins/FieldValidation.js"
+import Tooltip from "../mixins/Tooltip.js"
+
+// import components
+import CmdTooltipForInputElements from "./CmdTooltipForInputElements"
+
 export default {
+    components: {
+        CmdTooltipForInputElements
+    },
+    mixins: [
+        FieldValidation,
+        Tooltip
+    ],
     data() {
         return {
             value: ""
@@ -46,14 +96,21 @@ export default {
             type: [Array, String],
             required: false
         },
+        /**
+         * set if input-group should be required
+         */
+        required: {
+            type: Boolean,
+            default: false
+        },
         /**
          * list of input-elements inside group
          *
          * useSlot-property must be set to 'false'
          */
         inputElements: {
-          type: Array,
-          required: false
+            type: Array,
+            required: false
         },
         /**
          * set type for inputs in group
@@ -64,15 +121,39 @@ export default {
             type: String,
             default: "radio"
         },
+        /**
+         * set status for label and inner form-elements
+         *
+         * @allowedValues: error, warning, success, info
+         *
+         * @affectsStyling: true
+         */
+        status: {
+            type: String,
+            required: false
+        },
         /**
          * for replacing native checkboxes/radio-buttons by custom ones (based on frontend-framework)
          *
+         * toggleSwitch-property must be set to 'false'
+         *
          * @affectsStyling: true
          */
         replaceInputType: {
             type: Boolean,
             default: false
         },
+        /**
+         * for replacing native checkboxes/radio-buttons by toggle-switches (based on frontend-framework)
+         *
+         * replaceInputType-property must be set to 'false'
+         *
+         * @affectsStyling: true
+         */
+        toggleSwitch: {
+            type: Boolean,
+            default: false
+        },
         /**
          * activate if input-elements should be given by slot
          */
@@ -131,10 +212,36 @@ 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) {
+            if (this.$attrs.id !== undefined) {
                 return this.$attrs.id
             }
             return "label-" + createUuid()
@@ -150,19 +257,18 @@ 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.updateStatus()
+            },
+            immediate: true
+        },
+        modelValue: {
+            handler() {
+                this.updateStatus()
+            },
+            immediate: true
         }
     }
 }
@@ -174,5 +280,31 @@ export default {
         display: flex;
         gap: var(--default-gap);
     }
+
+    /* overwrite default behavior from frontend-framework */
+    &.toggle-switch {
+        display: block;
+    }
+
+    /* overwrite default behavior from frontend-framework */
+    .label-text {
+        display: inline-flex;
+
+        > a[class*="icon"] {
+            margin-left: calc(var(--default-margin) / 2);
+        }
+    }
+
+    &.has-state {
+        label {
+            color: var(--status-color);
+        }
+
+        &.multiple-switch {
+            label {
+                border-color: var(--status-color);
+            }
+        }
+    }
 }
 </style>

package/src/components/CmdListOfLinks.vue

@@ -1,9 +1,9 @@
 <template>
     <div :class="['cmd-list-of-links', 'align-' + align, {box: styleAsBox, horizontal: orientation === 'horizontal', 'section-anchors': sectionAnchors}]">
-        <!-- begin CmdCustomHeadline -->
-        <CmdCustomHeadline v-if="cmdCustomHeadline"
-                           v-bind="cmdCustomHeadline" />
-        <!-- end CmdCustomHeadline -->
+        <!-- begin CmdHeadline -->
+        <CmdHeadline v-if="CmdHeadline"
+                           v-bind="CmdHeadline" />
+        <!-- end CmdHeadline -->
 
         <!-- begin list of links -->
         <ul :class="['flex-container', {'no-gap': !useGap}]">
@@ -39,12 +39,12 @@ import {getRoute} from "../utilities.js"
 import {openFancyBox} from "./CmdFancyBox.vue"
 
 // import components
-import CmdCustomHeadline from "./CmdCustomHeadline"
+import CmdHeadline from "./CmdHeadline"
 
 export default {
     name: "CmdListOfLinks",
     components: {
-        CmdCustomHeadline
+        CmdHeadline
     },
     props: {
         /**
@@ -75,9 +75,9 @@ export default {
             default: "left"
         },
         /**
-         * properties for cmdCustomHeadline-component
+         * properties for CmdHeadline-component
          */
-        cmdCustomHeadline: {
+        CmdHeadline: {
             type: Object,
             required: false
         },