comand-component-library 4.2.78 → 4.2.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.2.78",
+  "version": "4.2.80",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,

package/src/ComponentLibrary.vue

@@ -1258,6 +1258,26 @@
             </CmdWidthLimitationWrapper>
             <!-- end main-navigation --------------------------------------------------------------------------------------------------->
 
+            <!-- begin multistep-form-progress-bar --------------------------------------------------------------------------------------------------->
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage" id="section-multistep-form-progress-bar">
+                    <span>Multistepform-Progressbar</span>
+                    <a href="#" class="button small icon-cog" title="Open Component Settings"
+                        @click.prevent="openSettingsSidebar('CmdMultistepFormProgressBar')"></a>
+                </h2>
+                <h3>Steps with icons</h3>
+                <CmdMultistepFormProgressBar ref="CmdMultistepFormProgressBar" :multisteps="multistepsData.withIcon"
+                    v-bind="cmdMultistepFormProgressBarSettingsData" @click="showPageMultistep = $event.index + 1" />
+                <h3>Router</h3>
+                <CmdMultistepFormProgressBar ref="CmdMultistepFormProgressBar" :multisteps="multistepsData.router"
+                    v-bind="cmdMultistepFormProgressBarSettingsData" @click="showPageMultistep = $event.index + 1" />
+                <div>
+                    <p>Page {{ showPageMultistep }}</p>
+                </div>
+            </CmdWidthLimitationWrapper>
+            <!-- end multistep-form-progress-bar --------------------------------------------------------------------------------------------------->
+
+            
             <!-- begin multistep-form-wrapper --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-multistep-form-wrapper">
@@ -1269,37 +1289,108 @@
                 <h3>Data provided by property</h3>
                 <CmdMultistepFormWrapper>
                     <template v-slot:page-1="props">
+                        <h3>Page 1 - all fields required</h3>
                         <CmdForm 
-                        :formElements="multistepFormWrapperPage1Data" 
-                        :useSlot="false" @validation-status-change="toggleSystemMessage($event, props)" 
-                        :submitButtonOptions="{show: false}"
-                        :modelValue="props.formDataForPage"
-                        @update:modelValue="props.updateFormDataForPage"
-                    />
+                            :formElements="multistepFormWrapperPage1Data" 
+                            :useSlot="false" 
+                            @validation-status-change="toggleSystemMessage($event, props)" 
+                            :submitButton="{show: false}"
+                            :modelValue="props.formDataForPage"
+                            @update:modelValue="props.updateFormDataForPage"
+                        />
                         <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a><br />
                         <a href="#" @click.prevent="props.removeErrorOnPage">Remove Error</a>
                     </template>
                     <template v-slot:page-2="props">
-                        Content Page 2<br />
-              
-                            <CmdFormElement element="input" type="text" labelText="Test2" v-model="props.formDataForPage.name" />
-
+                        <h3>Page 2 - 2/2 fields required (in slot)</h3>
+                        <CmdForm 
+                            :submitButton="{show: false}"
+                            :cmdHeadline=" { headlineText: 'Form-Elements in Slot', headlineLevel: 3 }"
+                        >   
+                            <CmdFormElement 
+                                element="input" 
+                                type="text" 
+                                labelText="Telephone:"
+                                name="page-2-telephone"
+                                id="page-2-telephone"
+                                placeholder="Enter phone number" 
+                                :required="true"
+                                :modelValue="props.formDataForPage['page-2-telephone']" 
+                                @update:modelValue="setValue($event, 'page-2-telephone', props)" 
+                                @validation-status-change="setValidationStatus($event, 'page-2-telephone', props)"
+                            />
+                            <CmdFormElement 
+                                element="input" 
+                                type="email" 
+                                labelText="E-Mail:"
+                                name="page-2-email"
+                                id="page-2-email"
+                                :required="true"
+                                placeholder="Enter email address" 
+                                :modelValue="props.formDataForPage['page-2-email']" 
+                                @update:modelValue="setValue($event, 'page-2-email', props)" 
+                                @validation-status-change="setValidationStatus($event, 'page-2-email', props)"
+                            />
+                        </CmdForm>
                         <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a>
                     </template>
-                    <template v-slot:page-3>
-                        Content Page 3
+                    <template v-slot:page-3="props">
+                        <h3>Page 3 - no fields required</h3>
+                        <CmdForm 
+                            @validation-status-change="toggleSystemMessage($event, props)" 
+                            :submitButton="{show: false}"
+                            :modelValue="props.formDataForPage"
+                            @update:modelValue="props.updateFormDataForPage"
+                            :cmdHeadline=" { headlineText: 'Form-Elements in Slot', headlineLevel: 3 }"
+                        >
+                            <CmdFormElement 
+                                element="input" 
+                                type="text" 
+                                labelText="Street/No:"
+                                name="street-no"
+                                id="street-no"
+                                placeholder="Enter street and number" 
+                                v-model="props.formDataForPage.streetNo" 
+                            />
+                            <div class="input-wrapper">
+                                <CmdFormElement 
+                                    element="input" 
+                                    type="number" 
+                                    labelText="Zip:"
+                                    name="zip"
+                                    id="zip"
+                                    v-model="props.formDataForPage.zip" 
+                                />
+                                <CmdFormElement 
+                                    element="input" 
+                                    type="text" 
+                                    labelText="City:"
+                                    name="city"
+                                    id="city"
+                                    v-model="props.formDataForPage.city" 
+                                />
+                            </div>
+                        </CmdForm>
                     </template>
                     <template v-slot:page-4>
+                        <h3>Page 4</h3>
                         Content Page 4
                     </template>
                     <template v-slot:page-5="props">
+                        <h3>Page 5</h3>
                         <CmdForm 
-                        :formElements="multistepFormWrapperPage1Data" 
-                        :useSlot="false" 
-                        @validation-status-change="toggleSystemMessage($event, props)" 
-                        :submitButton="{disabled: props.atleastOnePageWithError}" />
+                            :formElements="multistepFormWrapperPage1Data" 
+                            :useSlot="false" 
+                            @validation-status-change="toggleSystemMessage($event, props)" 
+                            :submitButton="{disabled: props.atleastOnePageWithError}" 
+                            :cancelButton="{ show: false}"
+                        />
                         props.atleastOnPageWithError: {{ props.atleastOnePageWithError }}
                     </template>
+                    <twmplate>
+                        <h3>Page 6 - Confirmation</h3>
+                        <p>Thank you for seding your request!</p>
+                    </twmplate>
                 </CmdMultistepFormWrapper>
                 <h3>Data provided by slot</h3>
                 <CmdMultistepFormWrapper>
@@ -1373,25 +1464,6 @@
             </CmdWidthLimitationWrapper>
             <!-- end multistep-form-wrapper --------------------------------------------------------------------------------------------------->
 
-            <!-- begin multistep-form-progress-bar --------------------------------------------------------------------------------------------------->
-            <CmdWidthLimitationWrapper>
-                <h2 class="headline-demopage" id="section-multistep-form-progress-bar">
-                    <span>Multistepform-Progressbar</span>
-                    <a href="#" class="button small icon-cog" title="Open Component Settings"
-                        @click.prevent="openSettingsSidebar('CmdMultistepFormProgressBar')"></a>
-                </h2>
-                <h3>Steps with icons</h3>
-                <CmdMultistepFormProgressBar ref="CmdMultistepFormProgressBar" :multisteps="multistepsData.withIcon"
-                    v-bind="cmdMultistepFormProgressBarSettingsData" @click="showPageMultistep = $event.index + 1" />
-                <h3>Router</h3>
-                <CmdMultistepFormProgressBar ref="CmdMultistepFormProgressBar" :multisteps="multistepsData.router"
-                    v-bind="cmdMultistepFormProgressBarSettingsData" @click="showPageMultistep = $event.index + 1" />
-                <div>
-                    <p>Page {{ showPageMultistep }}</p>
-                </div>
-            </CmdWidthLimitationWrapper>
-            <!-- end multistep-form-progress-bar --------------------------------------------------------------------------------------------------->
-
             <!-- begin newsletter-subscription --------------------------------------------------------------------------------------------------->
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage" id="section-newsletter-subscription">
@@ -2006,6 +2078,7 @@ export default {
             inputPassword: "",
             inputField1: "",
             inputFieldRequired: "",
+            formElementsWithError: ["page-2-telephone", "page-2-email"],
             componentName: "",
             componentProps: {},
             componentSettings: {},
@@ -2118,6 +2191,22 @@ export default {
         }
     },
     methods: {
+        setValue(event, itemName, props) {
+            const data = {
+                ...props.formDataForPage,
+                [itemName]: event
+            }
+           props.updateFormDataForPage(data)
+        },
+        setValidationStatus(event, itemName, props) {
+            if (event === "error" && !this.formElementsWithError.some(entry => entry.name === itemName)) {
+                this.formElementsWithError.push(itemName)
+            } else if (event === "success" && this.formElementsWithError.includes(itemName)) {
+                this.formElementsWithError = this.formElementsWithError.filter((element) => element !== itemName)
+            }
+            const status = this.formElementsWithError.length > 0 ? "error" : "success"
+            this.toggleSystemMessage(status, props)
+        },
         outputFormData(event) {
             console.log("outputFormData", event)  
         },
@@ -2125,7 +2214,6 @@ export default {
             alert(text)
         },
         toggleSystemMessage(event, props) {
-            console.log("event", event)
             if(event === "error") {
                 props.setErrorOnPage("Please fill all required fields!") 
             } else {

package/src/assets/data/form-elements.json

@@ -4,6 +4,7 @@
     "type": "text",
     "name": "form-element-text-name",
     "htmlClass": "form-element-text-class",
+    "id": "form-element-text-id",
     "value": "",
     "fieldIconClass": "icon-lock",
     "labelText": "Text input",
@@ -17,12 +18,13 @@
     {
       "element": "input",
       "type": "text",
-      "name": "form-element-text-name",
+      "name": "form-element-username",
       "htmlClass": "form-element-text-class",
-      "id": "form-element-text-id",
+      "id": "form-element-username",
       "value": "default value",
       "fieldIconClass": "icon-cogs",
       "labelText": "Username input",
+      "placeholder": "Placeholdertext",
       "required": true,
       "disabled": false
     },

package/src/assets/data/listOfComponents.json

@@ -23,8 +23,8 @@
   "LoginForm",
   "MailTool",
   "MainNavigation",
-  "MultistepFormWrapper",
   "MultistepFormProgressBar",
+  "MultistepFormWrapper",
   "NewsletterSubscription",
   "OpeningHours",
   "PageFooter",

package/src/assets/data/mail-tool.json

@@ -3,7 +3,7 @@
     {
       "id": 1,
       "cmdImage": {
-        "src": "/public/media/images/user-images/fake-user-1.jpg",
+        "src": "/media/images/user-images/fake-user-1.jpg",
         "alt": "User image"
       },
       "contactFullName": "Name Sender #1",
@@ -14,7 +14,7 @@
     {
       "id": 2,
       "cmdImage": {
-        "src": "/public/media/images/user-images/fake-user-2.jpg",
+        "src": "/media/images/user-images/fake-user-2.jpg",
         "alt": "User image"
       },
       "contactFullName": "Name Sender #2",
@@ -27,7 +27,7 @@
     {
       "id": 3,
       "cmdImage": {
-        "src": "/public/media/images/user-images/fake-user-2.jpg",
+        "src": "/media/images/user-images/fake-user-2.jpg",
         "alt": "User image"
       },
       "contactFullName": "Name Receiver #1",
@@ -38,7 +38,7 @@
     {
       "id": 4,
       "cmdImage": {
-        "src": "/public/media/images/user-images/fake-user-3.jpg",
+        "src": "/media/images/user-images/fake-user-3.jpg",
         "alt": "User image"
       },
       "contactFullName": "Name Receiver #2",

package/src/components/CmdForm.vue

@@ -8,7 +8,18 @@
                         legendOptions.text
                     }}
                 </legend>
-                <CmdSystemMessage v-if="systemMessage.show && systemMessage.message" :validationStatus="systemMessage.validationStatus" :systemMessage="systemMessage.message"/>
+                
+                <CmdHeadline 
+                    v-if="cmdHeadline?.headlineText"
+                    v-bind="cmdHeadline"
+                />
+
+                <CmdSystemMessage 
+                    v-if="systemMessage.show && systemMessage.message" 
+                    :validationStatus="systemMessage.validationStatus" 
+                    :systemMessage="systemMessage.message"
+                />
+
                 <!-- begin default-slot-content -->
                 <slot v-if="useSlot"></slot>
                 <!-- end default-slot-content -->
@@ -27,6 +38,7 @@
                         :inputValue="item.inputValue"
                         :fieldIconClass="item.innerIconClass"
                         :selectOptions="item.selectOptions"
+                        :toggleSwitch="item.toggleSwitch"
                         :labelText="item.labelText"
                         :placeholder="item.placeholder"
                         :required="item.required"
@@ -35,6 +47,7 @@
                         :minlength="item.minlength"
                         :maxlength="item.maxlength"
                         :nativeButton="item.nativeButton"
+                        :colored="item.colored"
                         @validation-status-change="formElementHasError($event, item.name)"
                     />
                     <CmdInputGroup
@@ -42,6 +55,8 @@
                         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 +73,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"
@@ -75,6 +91,8 @@
                                 v-model="formValues[item.name]"
                                 :labelText="item.labelText" 
                                 :inputElements="item.inputElements"
+                                :toggleSwitches="item.toggleSwitches"
+                                :colored="item.colored"
                             />
                         </template>
                     </div>
@@ -85,7 +103,7 @@
                     <small v-if="mandatoryText" class="mandatory-text"><sup>*</sup>{{ mandatoryText }}</small>
                     <!-- begin cancel-button (below fieldset) -->
                     <button 
-                        v-if="cancelButtonOptions !== undefined"
+                        v-if="cancelButtonOptions.show"
                         :class="['button', {'stretch-on-small-devices': cancelButtonOptions.stretchOnSmallDevices, disabled: cancelButtonOptions.disabled, cancel: cancelButtonOptions.useDefaultStyling}]" 
                         type="button"
                         @click="cancelFormSubmit"
@@ -249,18 +267,28 @@ export default {
             type: Object,
             required: false
         },
-                /**
+        /**
          * submit-button to submit all form-data
          */
          submitButton: {
             type: Object,
             required: false
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
         }
     },
     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)
+        // get the names of all elements that match the phrase and push to data-property to initially collect all required field to set correct validationStatus for form
+        const requiredElementNames = this.formElements?.filter(element => element.required === true).map(element => element.name)
+        
+        requiredElementNames?.forEach((name) => {
+            this.formElementsWithError.push(name)
+        })
     },
     computed: {
         legendOptions() {
@@ -297,13 +325,12 @@ export default {
     },
     methods: {
         formElementHasError(event, itemName) {
-            if (event === "error" && !this.formElementsWithError.includes(itemName)) {
+            if (event === "error" && !this.formElementsWithError.some(entry => entry.name === itemName)) {
                 this.formElementsWithError.push(itemName)
             } else if (event === "success" && this.formElementsWithError.includes(itemName)) {
                 this.formElementsWithError = this.formElementsWithError.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")
         },
         createHtmlId,

package/src/components/CmdHeadline.vue

@@ -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 -->

package/src/components/CmdLink.vue

@@ -211,7 +211,7 @@ export default {
         }
 
         &:hover, &:active, &:focus {
-            border-color: var(--hyperlink-color-highlighted)M
+            border-color: var(--hyperlink-color-highlighted);
         }
     }
 }

package/src/components/CmdMultistepFormProgressBar.vue

@@ -1,11 +1,11 @@
 <template>
     <!-- begin CmdMultistepFormProgressBar ---------------------------------------------------------------------------------------- -->
     <ol :class="['cmd-multistep-form-progress-bar', {'use-gap': useGap, 'full-width': fullWidth}]">
-        <li v-for="(step, index) in multisteps" :key="index" :class="errorLinkClass(index)">
+        <li v-for="(step, index) in multisteps" :key="index" :class="[errorLinkClass(index), successLinkClass(index)]">
             <!-- begin CmdLink -->
             <CmdLink
                 :linkType="step.linkType"
-                :class="['stretch-on-small-devices', activeLinkClass(index), errorLinkClass(index)]"
+                :class="['stretch-on-small-devices', activeLinkClass(index), errorLinkClass(index), successLinkClass(index)]"
                 :styleAsButton="styleAsButtons"
                 :highlightLevel="highlightLevel"
                 :path="step.path"
@@ -103,6 +103,15 @@ export default {
             type: Array,
             required: false
          },
+        /**
+         * provide a list of steps, that should be highlighted as "success"
+         * 
+         * @affectStyling: true
+         */
+         successSteps: {
+            type: Array,
+            required: false
+         },
         /**
          * icon-class for separator shown between multisteps
          */
@@ -125,13 +134,19 @@ export default {
     methods: {
         activeLinkClass(index) {
             if(this.activeLink === index) {
-                    return "active"
+                 return "active"
             }
             return null
         },
         errorLinkClass(index) {
             if(this.errorSteps?.includes(index + 1)) {
-                    return "error"
+                return "error"
+            }
+            return null
+        },
+        successLinkClass(index) {
+            if(this.successSteps?.includes(index + 1)) {
+                return "success"
             }
             return null
         },
@@ -326,6 +341,19 @@ export default {
             }
         }
 
+        &.success {
+            .number {
+                border-color: var(--success-color);
+                color: var(--success-color);
+            }
+
+            .active {
+                .number {
+                    background: var(--success-color) !important;
+                }
+            }
+        }
+
         :is(.active, .router-link-exact-active):not(.disabled) {
             a {
                 background: var(--button-primary-background-highlighted);

package/src/components/CmdMultistepFormWrapper.vue

@@ -9,6 +9,7 @@
                 :multisteps="multisteps"
                 :activeStep="currentPage - 1"
                 :errorSteps="errorSteps"
+                :successSteps="successSteps"
                 @click="setCurrentPage($event.index + 1)"
             />
         </slot>
@@ -56,7 +57,7 @@ export default {
         return {
             currentPage: 1,
             statusForPages: [],
-            inputMade: false,
+            inputMade: [],
             formData: {}
         }
     },
@@ -121,8 +122,10 @@ export default {
         },
         setErrorOnPage(page, message) {
             const exists = this.statusForPages.some(item => item.page === page);
-            
-            this.inputMade = true
+
+            if(!this.inputMade.includes(page)) {
+                this.inputMade.push(page) 
+            }
 
             if (!exists) {
                 this.statusForPages.push({ page: page, message: message });
@@ -130,8 +133,10 @@ export default {
         },
         removeErrorOnPage(page) {
             const index = this.statusForPages.findIndex(item => item.page === page);
-
-            this.inputMade = true
+            
+            if(!this.inputMade.includes(page)) {
+                this.inputMade.push(page) 
+            }
 
             if (index !== -1) {
                 this.statusForPages.splice(index, 1);
@@ -153,19 +158,36 @@ export default {
     },
     computed: {
         atleastOnePageWithError() {
-            return this.statusForPages.length > 0 || !this.inputMade
+            return this.statusForPages.length > 0 || this.inputMade.length === 0
         },
         pageHasError() {
             return this.statusForPages.some((item) => {
                 return item.page === this.currentPage
             })
         },
+        successSteps() {
+            const steps = []
+
+            if(this.inputMade.length) {
+                for(let i = 0; i < this.numberOfPages; i++) {
+                    const success = !this.statusForPages.find((item) => {
+                        return item.page === i + 1
+                    })
+
+                    // if no statusForPages is found (all pages are 'success' ant at least one input was made)
+                    if(success && this.inputMade.includes(i + 1)) {
+                        steps.push(i + 1)
+                    }
+                }
+            }
+
+            return steps
+        },
         errorSteps() {
             const steps = []
-            this.statusForPages.find((item) => {
+            this.statusForPages.forEach((item) => {
                 steps.push(item.page)
             })
-            console.log("steps", steps)
 
             return steps
         },
@@ -211,5 +233,9 @@ export default {
 </script>
 
 <style>
-
+.cmd-multistepform-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--default-gap);
+}
 </style>

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 }, 'text-align-' + textAlign, 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"
         >
@@ -161,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: {
@@ -182,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;
     }