comand-component-library 3.1.71 → 3.1.74

package/src/components/CmdInputGroup.vue

@@ -1,21 +1,67 @@
 <template>
-    <div :class="['cmd-input-group label', {inline: labelInline, 'multiple-switch': multipleSwitch}]">
+    <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"
-                       :class="{'replace-input-type': replaceInputType}"
+                <input
+                    :type="inputTypes"
+                    :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>
             </label>
         </span>
+
         <!-- begin useSlot -->
         <div v-else class="flex-container no-flex">
             <!-- begin slot -->
@@ -29,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: {
@@ -43,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
@@ -61,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
          */
@@ -117,12 +220,21 @@ export default {
         stretchHorizontally: {
             type: Boolean,
             default: false
+        },
+        /**
+         * define disabled-property to set disabled-style
+         *
+         * component cannot handle native disabled-attribute, because it is no native form-element
+         */
+        disabled: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {
         // get ID for accessibility
         labelId() {
-            if(this.$attrs.id !== undefined) {
+            if (this.$attrs.id !== undefined) {
                 return this.$attrs.id
             }
             return "label-" + createUuid()
@@ -152,6 +264,14 @@ export default {
                 this.$emit("update:modelValue", values)
             }
         }
+    },
+    watch: {
+        status: {
+            handler() {
+                this.validationStatus = this.status
+            },
+            immediate: true
+        }
     }
 }
 </script>
@@ -162,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

@@ -6,6 +6,7 @@
             :labelText="labelText"
             :showLabel="showLabel"
             v-model="darkMode"
+            :toggle-switch="true"
         />
     </div>
 </template>
@@ -14,19 +15,17 @@
 import CmdFormElement from "./CmdFormElement"
 
 export default {
-    data() {
-      return {
-          darkMode: false
-      }
-    },
+    name: "ToggleDarkMode",
     components: {
         CmdFormElement
     },
+    data() {
+        return {
+            darkMode: false,
+            labelText: "Light mode activated"
+        }
+    },
     props: {
-        labelText: {
-            type: String,
-            default: "Toggle Darkmode"
-        },
         showLabel: {
             type: Boolean,
             default: false
@@ -56,11 +55,29 @@ export default {
             const htmlTag = document.querySelector('html')
             if(this.darkMode) {
                 htmlTag.classList.replace("light-mode", "dark-mode");
+                this.labelText = "Dark-Mode enabled"
             } else {
                 htmlTag.classList.replace("dark-mode", "light-mode");
+                this.labelText = "Light-Mode enabled"
             }
             htmlTag.dispatchEvent(new CustomEvent('toggle-color-scheme', { detail: this.darkMode ? 'dark-mode' : 'light-mode' }))
         }
     }
 }
-</script>
+</script>
+
+<style lang="scss">
+.cmd-toggle-dark-mode {
+    .cmd-form-element {
+        input {
+            background: blue;
+        }
+    }
+
+    &.dark-mode {
+        input {
+            background: black;
+        }
+    }
+}
+</style>

package/src/components/CmdTooltip.vue

@@ -138,7 +138,7 @@ export default {
     },
     unmounted() {
         if(this.relatedId) {
-            const relatedElement = document.getElementById(this.relatedId)
+            const relatedElement = document.getElementById(this.npm )
 
             if(relatedElement) {
                 relatedElement.removeEventListener("mouseenter", this.showTooltip)

package/src/documentation/generated/CmdAddressDataPropertyDescriptions.json

@@ -0,0 +1,32 @@
+{
+    "showLabelIcons": {
+        "comments": [
+            "show a label-icon (if exists)"
+        ]
+    },
+    "showLabelTexts": {
+        "comments": [
+            "show a label-text"
+        ]
+    },
+    "cmdCustomHeadline": {
+        "comments": [
+            "properties for CmdCustomHeadline-component"
+        ]
+    },
+    "showLabels": {
+        "comments": [
+            "option to toggle labels (i.e. telephone, email etc.) in front/left of data"
+        ]
+    },
+    "addressData": {
+        "comments": [
+            "all address-data (incl. labels) that will be shown"
+        ]
+    },
+    "linkGoogleMaps": {
+        "comments": [
+            "link physical address (street, no, zip and city) with Google Maps"
+        ]
+    }
+}

package/src/documentation/generated/CmdBackToTopButtonPropertyDescriptions.json

@@ -0,0 +1,12 @@
+{
+    "iconBackToTop": {
+        "comments": [
+            "icon-class (and shown tooltip on hover) for back to top button"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ]
+        }
+    }
+}

package/src/documentation/generated/CmdBankAccountDataPropertyDescriptions.json

@@ -0,0 +1,34 @@
+{
+    "accountData": {
+        "comments": [
+            "bank account data",
+            "",
+            "must contain: owner, name of bank, IBAN, SWIFT/BIC"
+        ]
+    },
+    "allowCopyByClick": {
+        "comments": [
+            "enable if data can be copied by click on icon"
+        ]
+    },
+    "additionalInformation": {
+        "comments": [
+            "additional information shown in a paragraph below account data"
+        ]
+    },
+    "iconCopy": {
+        "comments": [
+            "icon 'copy'"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ]
+        }
+    },
+    "cmdCustomHeadline": {
+        "comments": [
+            "properties for CmdCustomHeadline-component"
+        ]
+    }
+}

package/src/documentation/generated/CmdBoxPropertyDescriptions.json

@@ -0,0 +1,96 @@
+{
+    "boxType": {
+        "comments": [
+            "set boyType to show different types of boxes/contents"
+        ],
+        "annotations": {
+            "allowedValues": [
+                "content, product, user"
+            ],
+            "affectsStyling": [
+                "true"
+            ]
+        }
+    },
+    "collapsible": {
+        "comments": [
+            "activate if box should be collapsible"
+        ]
+    },
+    "useTransition": {
+        "comments": [
+            "use transition to expand and collapse box-body",
+            "",
+            "boyType must be 'content' and 'collapsible' must be activated"
+        ]
+    },
+    "defaultProfileIconClass": {
+        "comments": [
+            "set default profile-icon (will eb shown if no user-image exists)"
+        ]
+    },
+    "product": {
+        "comments": [
+            "the shown product (incl. name, price, image, description)"
+        ],
+        "annotations": {
+            "required": [
+                "only available for boxtype===product"
+            ]
+        }
+    },
+    "user": {
+        "comments": [
+            "the shown user-profile (incl. name, image, contact-data)"
+        ],
+        "annotations": {
+            "required": [
+                "only available for boxtype===user"
+            ]
+        }
+    },
+    "useSlots": {
+        "comments": [
+            "activated if all content (incl. headline) is given by slot",
+            "",
+            "if false textBody-property must be set"
+        ]
+    },
+    "textBody": {
+        "comments": [
+            "String used as content (placed in a paragraph-tag) for box-body",
+            "",
+            "should only be used, if no further html-structure is required for box-body"
+        ]
+    },
+    "iconOpen": {
+        "comments": [
+            "icon to expand an accordion"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ]
+        }
+    },
+    "iconClosed": {
+        "comments": [
+            "icon to collapse an accordion"
+        ],
+        "annotations": {
+            "requiredForAccessibility": [
+                "partial"
+            ]
+        }
+    },
+    "stretchVertically": {
+        "comments": [
+            "allow box to be stretched as high as parent-element"
+        ]
+    },
+    "cmdCustomHeadline": {
+        "comments": [
+            "properties for CmdCustomHeadline-component"
+        ]
+    }
+}