comand-component-library 3.1.73 → 3.1.74

package/src/components/CmdFormElement.vue

@@ -15,6 +15,7 @@
                 'has-state': validationStatus
                }]"
            :for="labelId"
+           :title="$attrs.title"
            ref="label">
 
         <!-- begin label-text (+ required asterisk) -->
@@ -23,42 +24,27 @@
             <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>
+            <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 -->
 
             <a v-if="$attrs.required || inputRequirements.length"
@@ -226,6 +212,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"
 
@@ -233,6 +220,7 @@ export default {
     inheritAttrs: false,
     name: "FormElement",
     components: {
+        CmdListOfRequirements,
         CmdSystemMessage,
         CmdTooltip
     },
@@ -425,7 +413,7 @@ export default {
         /**
          * set status for label and form-element
          *
-         * @allowedValues: error, success
+         * @allowedValues: error, warning, success, info
          *
          * @affectsStyling: true
          */
@@ -810,14 +798,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/CmdInputGroup.vue

@@ -1,18 +1,61 @@
 <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 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 -->
+
+            <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,10 +75,29 @@
 <script>
 import {createUuid} from "../utils/common"
 
+// import mixins
+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"
+
 export default {
+    components: {
+        CmdListOfRequirements,
+        CmdSystemMessage,
+        CmdTooltip
+    },
+    mixins: [
+        FieldValidation,
+        Tooltip
+    ],
     data() {
         return {
-            value: ""
+            value: "",
+            validationStatus: ""
         }
     },
     props: {
@@ -46,14 +108,28 @@ export default {
             type: [Array, String],
             required: false
         },
+        /**
+         * set if input-group should be required
+         */
+        required: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * tooltip for validation
+         */
+        validationTooltip: {
+            type: String,
+            default: ""
+        },
         /**
          * 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 +140,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
          */
@@ -134,7 +234,7 @@ export default {
     computed: {
         // get ID for accessibility
         labelId() {
-            if(this.$attrs.id !== undefined) {
+            if (this.$attrs.id !== undefined) {
                 return this.$attrs.id
             }
             return "label-" + createUuid()
@@ -164,6 +264,14 @@ export default {
                 this.$emit("update:modelValue", values)
             }
         }
+    },
+    watch: {
+        status: {
+            handler() {
+                this.validationStatus = this.status
+            },
+            immediate: true
+        }
     }
 }
 </script>
@@ -174,5 +282,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/CmdListOfRequirements.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="cmd-list-of-requirements">
+        <!-- begin cmd-custom-headline -->
+        <CmdCustomHeadline :headline-level="cmdCustomHeadline.headlineLevel">
+            <!--         {{ getMessage("cmdfakeselect.headline.requirements_for_input") }}<br/>"{{ labelText }}"-->
+        </CmdCustomHeadline>
+        <!-- end cmd-custom-headline -->
+
+        <!-- begin list of requirements -->
+        <dl>
+            <template v-for="(requirement, index) in inputRequirements" :key="index">
+                <dt aria-live="assertive" :class="requirement.valid(inputModelValue, inputAttributes) ? 'success' : 'error'">{{ requirement.message }}:</dt>
+                <dd :class="requirement.valid(inputModelValue, inputAttributes) ? 'success' : 'error'">
+                    <span
+                        aria-live="assertive"
+                        :class="requirement.valid(inputModelValue, inputAttributes) ? 'icon-check-circle' : 'icon-error-circle'"
+                        :title="requirement.valid(inputModelValue, inputAttributes) ? '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 -->
+    </div>
+</template>
+
+<script>
+import CmdCustomHeadline from "./CmdCustomHeadline"
+
+export default {
+    name: "CmdListOfRequirements.vue",
+    components: {CmdCustomHeadline},
+    props: {
+        inputModelValue: {
+            type: [String, Boolean, Array, Number],
+            default: ""
+        },
+        inputAttributes: {
+            type: Object,
+            required: true
+        },
+        /**
+         * text for label
+         */
+        labelText: {
+            type: String,
+            required: false
+        },
+        inputRequirements: {
+            type: Array,
+            required: true
+        },
+        helplink: {
+            type: String,
+            required: false
+        },
+        cmdCustomHeadline: {
+            type: Object,
+            default() {
+                return {
+                    headlineLevel: 4
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+/* begin cmd-list-of-requiremnets ------------------------------------------------------------------------------------------ */
+.cmd-list-of-requirements {
+    dl {
+        .error {
+            color: var(--error-color);
+        }
+
+        .warning {
+            color: var(--warning-color);
+        }
+
+        .success {
+            color: var(--success-color);
+        }
+
+        .info {
+            color: var(--info-color);
+        }
+
+        span[class*="icon"] {
+            font-size: 1.2rem;
+            color: var(--status-color);
+        }
+
+        & ~ a {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            text-decoration: none;
+
+            span[class*="icon"] {
+                font-size: 1.2rem;
+            }
+        }
+    }
+}
+/* end cmd-list-of-requirements ------------------------------------------------------------------------------------------ */
+</style>

package/src/components/CmdMainNavigation.vue

@@ -305,7 +305,7 @@ export default {
 
         /* begin offcanvas-navigation */
         &:not(.persist-on-mobile) {
-            transition: (--nav-transition);
+            transition: var(--nav-transition);
 
             #toggle-offcanvas {
                 display: flex;
@@ -433,7 +433,7 @@ export default {
                                 height: auto;
                                 display: block;
                                 opacity: 1;
-                                transition: (--nav-transition);
+                                transition: var(--nav-transition);
 
                                 > li {
                                     > a {

package/src/components/CmdToggleDarkMode.vue

@@ -7,9 +7,6 @@
             :showLabel="showLabel"
             v-model="darkMode"
             :toggle-switch="true"
-            :useIconsForToggleSwitch="true"
-            toggle-switch-checked-icon-class="icon-home"
-            toggle-switch-unchecked-icon-class="icon-globe"
         />
     </div>
 </template>

package/src/documentation/generated/CmdCookieDisclaimerPropertyDescriptions.json

@@ -1,4 +1,9 @@
 {
+    "modelValue": {
+        "comments": [
+            "set default v-model (must be named modelValue in Vue3)"
+        ]
+    },
     "cmdCustomHeadlineCookieDisclaimer": {
         "comments": [
             "properties for CmdCustomHeadline-component at top of cookie disclaimer"

package/src/documentation/generated/CmdFormElementPropertyDescriptions.json

@@ -137,7 +137,7 @@
         ],
         "annotations": {
             "allowedValues": [
-                "error, success",
+                "error, warning, success, info",
                 ""
             ],
             "affectsStyling": [

package/src/documentation/generated/CmdInputGroupPropertyDescriptions.json

@@ -4,6 +4,16 @@
             "set value for v-model (must be named modelValue in vue3 if default v-model should be used)"
         ]
     },
+    "required": {
+        "comments": [
+            "set if input-group should be required"
+        ]
+    },
+    "validationTooltip": {
+        "comments": [
+            "tooltip for validation"
+        ]
+    },
     "inputElements": {
         "comments": [
             "list of input-elements inside group",
@@ -21,9 +31,35 @@
             ]
         }
     },
+    "status": {
+        "comments": [
+            "set status for label and inner form-elements"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "error, warning, success, info",
+                ""
+            ],
+            "affectsStyling": [
+                "true"
+            ]
+        }
+    },
     "replaceInputType": {
         "comments": [
-            "for replacing native checkboxes/radio-buttons by custom ones (based on frontend-framework)"
+            "for replacing native checkboxes/radio-buttons by custom ones (based on frontend-framework)",
+            "toggleSwitch-property must be set to 'false'"
+        ],
+        "annotations": {
+            "affectsStyling": [
+                "true"
+            ]
+        }
+    },
+    "toggleSwitch": {
+        "comments": [
+            "for replacing native checkboxes/radio-buttons by toggle-switches (based on frontend-framework)",
+            "replaceInputType-property must be set to 'false'"
         ],
         "annotations": {
             "affectsStyling": [

package/src/documentation/generated/CmdListOfRequirementsPropertyDescriptions.json

@@ -0,0 +1,22 @@
+{
+    "labelText": {
+        "comments": [
+            "text for label"
+        ]
+    },
+    "inputRequirements": {
+        "comments": [
+            "text for label"
+        ]
+    },
+    "helplink": {
+        "comments": [
+            "text for label"
+        ]
+    },
+    "cmdCustomHeadline": {
+        "comments": [
+            "text for label"
+        ]
+    }
+}

package/src/mixins/CmdCookieDisclaimer/DefaultMessageProperties.js

@@ -0,0 +1,10 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "cmdcookiedisclaimer.title.cookie_cannot_be_disabled": "This cookie cannot be disabled, because it is required for functionality!",
+        "cmdcookiedisclaimer.title.toggle_to_accept_cookie": "Toggle to accept or reject this cookie!"
+      }
+    }
+  }
+}

package/src/mixins/FieldValidation.js

@@ -187,7 +187,7 @@ export default {
                     }
                 })
             }
-            // check if filed has a minimum length
+            // check if field has a minimum length
             if(this.$attrs.minlength) {
                 standardRequirements.push({
                     message: "Input has minimum length (" + this.modelValue.length + "/" + this.$attrs.minlength + ")",