comand-component-library 4.2.77 → 4.2.79

package/src/components/CmdForm.vue

@@ -27,6 +27,7 @@
                         :inputValue="item.inputValue"
                         :fieldIconClass="item.innerIconClass"
                         :selectOptions="item.selectOptions"
+                        :toggleSwitch="item.toggleSwitch"
                         :labelText="item.labelText"
                         :placeholder="item.placeholder"
                         :required="item.required"
@@ -35,13 +36,16 @@
                         :minlength="item.minlength"
                         :maxlength="item.maxlength"
                         :nativeButton="item.nativeButton"
-                        @validation-status-change="formElementHasError($event, item.name)"
+                        :colored="item.colored"
+                        @validation-status-change="formElementsWithStatus($event, item.name)"
                     />
                     <CmdInputGroup
                         v-else-if="item.component === 'CmdInputGroup'"
                         v-model="formValues[item.name]"
                         :labelText="item.labelText" 
                         :inputElements="item.inputElements"
+                        :toggleSwitches="item.toggleSwitches"
+                        :colored="item.colored"
                     />
                     <div 
                         v-else-if="item.component === 'flexContainer'"
@@ -58,6 +62,7 @@
                                 :id="item.id || createHtmlId()"
                                 v-model="formValues[item.name]"
                                 :inputValue="item.inputValue"
+                                :toggleSwitch="item.toggleSwitch"
                                 :fieldIconClass="item.innerIconClass"
                                 :selectOptions="item.selectOptions"
                                 :labelText="item.labelText"
@@ -68,13 +73,15 @@
                                 :minlength="item.minlength"
                                 :maxlength="item.maxlength"
                                 :nativeButton="item.nativeButton"
-                                @validation-status-change="formElementHasError($event, item.name)"
+                                @validation-status-change="formElementsWithStatus($event, item.name)"
                             />
                             <CmdInputGroup
                                 v-else-if="item.component === 'CmdInputGroup'"
                                 v-model="formValues[item.name]"
                                 :labelText="item.labelText" 
                                 :inputElements="item.inputElements"
+                                :toggleSwitches="item.toggleSwitches"
+                                :colored="item.colored"
                             />
                         </template>
                     </div>
@@ -161,7 +168,7 @@ export default {
                 validationStatus: "",
                 message: ""
             },
-            formElementsWithError: []
+            formElementsValidationStatus: []
         }
     },
     props: {
@@ -259,8 +266,12 @@ export default {
     },
     mounted() {
         // get the names of all elements that match the phrase and push to data-property
-        const requiredElementNames = this.formElements?.filter(element => element.required === true).map(element => element.name);
-        this.formElementsWithError.push(requiredElementNames)
+        const requiredElementNames = this.formElements?.filter(element => element.required === true).map(element => element.name)
+        console.log("requiredElementNames", requiredElementNames)
+        /*
+        requiredElementNames.forEach((name) => {
+            this.formElementsValidationStatus.push({name: name})
+        })*/
     },
     computed: {
         legendOptions() {
@@ -296,16 +307,29 @@ export default {
         }
     },
     methods: {
+        formElementsWithStatus(event, itemName) {
+            if (!this.formElementsValidationStatus.some(entry => entry.name === itemName)) {
+                this.formElementsValidationStatus.push({name: itemName, status: event})
+            }
+            //const formElement = this.formElementsValidationStatus.find(element => element.name === itemName)
+            console.log("this.formElementsValidationStatus", this.formElementsValidationStatus)
+            // formElement.status = event
+        
+            // this.$emit("validation-status-change", formElement)
+        },
+
+        /*
         formElementHasError(event, itemName) {
-            if (event === "error" && !this.formElementsWithError.includes(itemName)) {
-                this.formElementsWithError.push(itemName)
-            } else if (event === "success" && this.formElementsWithError.includes(itemName)) {
-                this.formElementsWithError = this.formElementsWithError.filter((element) => element !== itemName)
+            if (event === "error" && !this.formElementsValidationStatus.some(entry => entry.name === itemName)) {
+                this.formElementsValidationStatus.push(itemName)
+            } else if (event === "success" && this.formElementsValidationStatus.includes(itemName)) {
+                this.formElementsValidationStatus = this.formElementsValidationStatus.filter((element) => element !== itemName)
             }
             console.log("event in CmdForm", event)
             console.log("itemName in CmdForm", itemName)
-            this.$emit("validation-status-change", this.formElementsWithError.length ? "error" : "success")
+            this.$emit("validation-status-change", this.formElementsValidationStatus.length ? "error" : "success")
         },
+        */
         createHtmlId,
         showMessage(validationStatus, message) {
             this.systemMessage.show = true

package/src/components/CmdHeadline.vue

@@ -2,15 +2,15 @@
     <!-- begin CmdHeadline ---------------------------------------------------------------------------------------- -->
     <!-- begin default-view -->
     <div v-if="!editModeContext || settingsContext || mainSidebarContext || headlineText"
-         :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': cmdIcon?.iconClass}, headlineTextAlign]">
+         :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': cmdIcon?.iconClass}]">
         <!-- begin headline with pre-headline-text -->
         <template v-if="preHeadlineText">
-            <component v-if="headlineText" :is="headlineTag" :class="highlightLevel">
+            <component v-if="headlineText" :is="headlineTag" :class="[highlightLevel, headlineTextAlign]">
                 <!-- begin CmdIcon -->
                 <CmdIcon v-if="cmdIcon" v-bind="cmdIcon"/>
                 <!-- end CmdIcon -->
 
-                <span class="pre-headline-text-wrapper">
+                <span :class="['pre-headline-text-wrapper', 'text-align-' + textAlign]">
                     <!-- begin pre-headline-text -->
                     <span class="pre-headline-text" v-html="preHeadlineText"></span>
                     <!-- end pre-headline-text -->
@@ -32,7 +32,7 @@
         <!-- end headline with pre-headline-text -->
 
         <!-- begin headline without pre-headline-text -->
-        <component v-else :is="headlineTag">
+        <component v-else :is="headlineTag" :class="[highlightLevel, headlineTextAlign]">
             <!-- begin CmdIcon -->
             <CmdIcon v-if="cmdIcon" v-bind="cmdIcon"/>
             <!-- end CmdIcon -->
@@ -178,7 +178,7 @@ export default {
          */
         textAlign: {
             type: String,
-            default: null,
+            default: "left",
             validator(value) {
                 return value === "left" ||
                     value === "center" ||
@@ -208,7 +208,14 @@ export default {
         },
         headlineTextAlign() {
             if (this.textAlign) {
-                return "text-" + this.textAlign
+                switch (this.textAlign) {
+                    case "right":
+                        return "justify-content-flex-end"
+                    case "center":
+                        return "justify-content-center"
+                    default:
+                        return "justify-content-flex-start"
+                }
             }
             return ""
         }

package/src/components/CmdSiteHeader.vue

@@ -106,7 +106,7 @@ export default {
          */
         resizeHeaderOnScroll: {
             type: Boolean,
-            default: true
+            default: false
         },
         /**
          * set selector for element that scrolls content to resize header

package/src/components/CmdSystemMessage.vue

@@ -3,7 +3,7 @@
     <transition :name="transition">
         <div
             v-if="showSystemMessage"
-            :class="['cmd-system-message', 'system-message', 'flex-container', 'vertical', { 'full-width': fullWidth }, validationStatus]"
+            :class="['cmd-system-message', 'system-message', 'flex-container', 'flex-direction-column', { 'full-width': fullWidth }, systemMessageTextAlign, validationStatus]"
             :role="validationStatus === 'error' ? 'alert' : 'dialog'"
             :aria-labelledby="htmlId"
         >
@@ -15,6 +15,7 @@
                     :cmdIcon="headlineIcon"
                     :headlineText="systemMessage"
                     :headlineLevel="messageHeadlineLevel"
+                    :textAlign="textAlign"
                     :id="htmlId"
                 />
                 <!-- end CmdHeadline -->
@@ -48,10 +49,32 @@ export default {
     mixins: [Identifier],
     data() {
         return {
-            showSystemMessage: true
+            showSystemMessage: true,
+            id: this.ariaReferenceId || this.buildHtmlId("system-message") // mixin requires id to be defined
         }
     },
-    props: {
+    props:  {
+        /**
+         * define the text-align for the system message (will be inherited to CmdHeadline in slot)
+         * 
+         * @allowedValues: "left", "center", "right"
+         */
+        textAlign: {
+            type: String,
+            default: "center",
+            validator(value) {
+                return value === "left" ||
+                    value === "center" ||
+                    value === "right"
+            }
+        },
+        /** 
+         * define the aria-reference-id for the system message (will be used as aria-labelledby)
+         */
+        ariaReferenceId: {
+            type: String,
+            required: false
+        },
         /**
          * define the transition when system message disappears
          * 
@@ -78,7 +101,7 @@ export default {
             }
         },
         /**
-         * activate to stretch message-box as wide as parent container (else message-box is as wide as message (+padding))
+         * activate to stretch message-box as wide as parent container (else message-box is as wide as message (+ padding))
          */
         fullWidth: {
             type: Boolean,
@@ -138,6 +161,19 @@ export default {
                 }
             }
             return null
+        },
+        systemMessageTextAlign() {
+            if (this.textAlign) {
+                switch (this.textAlign) {
+                    case "right":
+                        return "align-items-flex-end"
+                    case "center":
+                        return "align-items-center"
+                    default:
+                        return "align-items-flex-start"
+                }
+            }
+            return ""
         }
     },
     methods: {
@@ -159,9 +195,12 @@ export default {
 .cmd-system-message {
     display: inline-flex;
     margin: var(--default-margin) 0;
-    align-items: center;
     align-self: flex-start; /* if used in flex-container component should not be stretched */
 
+    .message-headline {
+        margin: 0; /* overwrite default-settings from frontend-framework */
+    }
+
     > :last-child {
         margin-bottom: 0;
     }