comand-component-library 4.2.79 → 4.2.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.2.79",
+  "version": "4.2.81",
   "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/listOfComponents.json

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

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 -->
@@ -37,7 +48,7 @@
                         :maxlength="item.maxlength"
                         :nativeButton="item.nativeButton"
                         :colored="item.colored"
-                        @validation-status-change="formElementsWithStatus($event, item.name)"
+                        @validation-status-change="formElementHasError($event, item.name)"
                     />
                     <CmdInputGroup
                         v-else-if="item.component === 'CmdInputGroup'"
@@ -73,7 +84,7 @@
                                 :minlength="item.minlength"
                                 :maxlength="item.maxlength"
                                 :nativeButton="item.nativeButton"
-                                @validation-status-change="formElementsWithStatus($event, item.name)"
+                                @validation-status-change="formElementHasError($event, item.name)"
                             />
                             <CmdInputGroup
                                 v-else-if="item.component === 'CmdInputGroup'"
@@ -92,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"
@@ -168,7 +179,7 @@ export default {
                 validationStatus: "",
                 message: ""
             },
-            formElementsValidationStatus: []
+            formElementsWithError: []
         }
     },
     props: {
@@ -256,22 +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
+        // 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)
-        console.log("requiredElementNames", requiredElementNames)
-        /*
-        requiredElementNames.forEach((name) => {
-            this.formElementsValidationStatus.push({name: name})
-        })*/
+        
+        requiredElementNames?.forEach((name) => {
+            this.formElementsWithError.push(name)
+        })
     },
     computed: {
         legendOptions() {
@@ -307,29 +324,15 @@ 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.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)
+            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.formElementsValidationStatus.length ? "error" : "success")
+
+            this.$emit("validation-status-change", this.formElementsWithError.length ? "error" : "success")
         },
-        */
         createHtmlId,
         showMessage(validationStatus, message) {
             this.systemMessage.show = true

package/src/components/CmdFormElement.vue

@@ -190,7 +190,7 @@
                 v-bind="elementAttributes"
                 :id="htmlId"
                 @blur="onBlur"
-                @change="$emit('update:modelValue', $event.target.value)">
+                @change="onChange">
 
             <option v-if="!groupSelectOptionsByInitialLetters"
                     v-for="(option, index) in selectOptions"
@@ -885,6 +885,8 @@ export default {
             this.$emit('update:modelValue', event.target.value)
         },
         onChange(event) {
+            this.validateInput(event)
+            
             if (typeof this.modelValue === "boolean") {
                 this.$emit("update:modelValue", event.target.checked)
             } else if (typeof this.modelValue === "string") {

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>