comand-component-library 4.2.82 → 4.2.84

package/package.json

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

package/src/ComponentLibrary.vue

@@ -1283,7 +1283,7 @@
                 <h2 class="headline-demopage" id="section-multistep-form-wrapper">
                     <span>Multistepform-Wrapper</span>
                     <a href="#" class="button small icon-cog" title="Open Component Settings"
-                        @click.prevent="openSettingsSidebar('CmdMultistepFormProgressBar')">
+                        @click.prevent="openSettingsSidebar('CmdMultistepFormWrapper')">
                     </a>
                 </h2>
                 <h3>Data provided by property</h3>
@@ -1372,25 +1372,32 @@
                             </div>
                         </CmdForm>
                     </template>
-                    <template v-slot:page-4>
+                    <template v-slot:page-4="props">
                         <h3>Page 4</h3>
-                        Content Page 4
+                        <CmdForm
+                            :cmdHeadline=" { headlineText: 'Confirmation', headlineLevel: 3 }"
+                            :submitButton="{ disabled : props.atleastOneStepWithError }"
+                            :cancelButton="{ show: false }"
+                        >
+                        <p>Please confirm that all data ou provided is legit.</p>
+                            <CmdFormElement 
+                                element="input" 
+                                type="checkbox" 
+                                labelText="Confirm data privacy:"
+                                name="confirm-data-privacy"
+                                id="confirm-data-privac"
+                                :required="true"
+                                :modelValue="props.formDataForPage['confirm-data-privacy']" 
+                                @update:modelValue="setValue($event, 'confirm-data-privacy', props)" 
+                                @validation-status-change="setValidationStatusCheckbox($event, 'confirm-data-privacy', props)"
+                            />
+                        </CmdForm>
+                        props.atleastOneStepWithError: {{ props.atleastOneStepWithError }}
                     </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}" 
-                            :cancelButton="{ show: false}"
-                        />
-                        props.atleastOnPageWithError: {{ props.atleastOnePageWithError }}
+                    <template>
+                        <h3>Page 5 - Confirmation</h3>
+                        <p>Thank you for sending your request!</p>
                     </template>
-                    <twmplate>
-                        <h3>Page 6 - Confirmation</h3>
-                        <p>Thank you for seding your request!</p>
-                    </twmplate>
                 </CmdMultistepFormWrapper>
                 <h3>Data provided by slot</h3>
                 <CmdMultistepFormWrapper>
@@ -2014,6 +2021,7 @@ export default {
             inputFieldPattern: "",
             inputSearch: "",
             textarea: "",
+            formElementsWithErrorPageConfirm: ["confirm-data-privacy"],
             inputGroupRadio: "radiobuttonValue1",
             inputGroup: "website",
             inputGroupValueReplaceInputTypeRadio: "phone",
@@ -2207,6 +2215,16 @@ export default {
             const status = this.formElementsWithError.length > 0 ? "error" : "success"
             this.toggleSystemMessage(status, props)
         },
+        setValidationStatusCheckbox(event, itemName, props) {
+            console.log("event", event)
+            if (event === "error" && !this.formElementsWithErrorPageConfirm.some(entry => entry.name === itemName)) {
+                this.formElementsWithErrorPageConfirm.push(itemName)
+            } else if (event === "success" && this.formElementsWithErrorPageConfirm.includes(itemName)) {
+                this.formElementsWithErrorPageConfirm = this.formElementsWithErrorPageConfirm.filter((element) => element !== itemName)
+            }
+            const status = this.formElementsWithErrorPageConfirm.length > 0 ? "error" : "success"
+            this.toggleSystemMessage(status, props)
+        },
         outputFormData(event) {
             console.log("outputFormData", event)  
         },

package/src/componentSettingsDataAndControls.vue

@@ -574,6 +574,11 @@ export default {
                     }
                 ]
             },
+            cmdMultistepFormWrapperSettingsData: {
+                cmdMultistepFormProgressBar: {
+                    show: true
+                }
+            },
             cmdNewsletterSubscriptionSettingsData: {
                 buttonType: "submit",
                 legend: {

package/src/components/CmdFormElement.vue

@@ -853,9 +853,9 @@ export default {
                 const value = event.target.value
 
                 // if input is filled, set status to success (expect for checkboxes and radiobuttons)
-                if (!["checkbox", "radio"].includes(this.$attrs.type) && value) {
+                //if (!["checkbox", "radio"].includes(this.$attrs.type) && value) {
                     this.validationStatus = "success"
-                }
+                //}
 
                 if (typeof event.target.checkValidity === "function" && !event.target.checkValidity()) {
                     this.validationStatus = "error"

package/src/components/CmdMultistepFormWrapper.vue

@@ -15,19 +15,22 @@
         </slot>
         <!-- begin slot for progress-bar -->
 
+        <!-- begin main cntent for page -->
         <div v-show="page === currentPage" :class="'multistep-page-' + page" v-for="(page, index) in numberOfPages" :key="index">
-            <CmdSystemMessage v-if="statusForPages.some(item => item.page === page)" :systemMessage="getSystemMessage(page)" validationStatus="error" />
+            <CmdSystemMessage v-if="validationStatusForSteps.some(item => item.page === page)" :systemMessage="getSystemMessage(page)" validationStatus="error" />
+
             <!-- begin slot for page content -->
             <slot 
                 :name="'page-' + page" 
                 :setErrorOnPage="(message) => setErrorOnPage(page, message)" 
                 :removeErrorOnPage="() => removeErrorOnPage(page)" 
-                :atleastOnePageWithError="atleastOnePageWithError"
+                :atleastOneStepWithError="atleastOneStepWithError"
                 :formDataForPage="formDataForPage(page)"
                 :updateFormDataForPage="(event) => updateFormDataForPage(page, event)"
             />
             <!-- end slot for page content -->
         </div>
+        <!-- end main cntent for page -->
 
         <!-- begin slot for pagination -->
         <slot name="pagination" 
@@ -56,7 +59,7 @@ export default {
     data () {
         return {
             currentPage: 1,
-            statusForPages: [],
+            validationStatusForSteps: [],
             inputMade: [],
             formData: {}
         }
@@ -72,13 +75,6 @@ export default {
                     show: true
                 }
             }
-        },
-         /**
-         * properties for CmdMultistepFormProgressBar-component
-         */
-        showButtonWrapper: {
-            type: Boolean,
-            default: true
         },
          /**
          * properties for CmdLink-component
@@ -117,29 +113,29 @@ export default {
             this.formData[page] = event
         },
         getSystemMessage(page) {
-            const pageEntry = this.statusForPages.find(item => item.page === page);
+            const pageEntry = this.validationStatusForSteps.find(item => item.page === page);
             return pageEntry.message
         },
         setErrorOnPage(page, message) {
-            const exists = this.statusForPages.some(item => item.page === page);
+            const exists = this.validationStatusForSteps.some(item => item.page === page);
 
             if(!this.inputMade.includes(page)) {
                 this.inputMade.push(page) 
             }
 
             if (!exists) {
-                this.statusForPages.push({ page: page, message: message });
+                this.validationStatusForSteps.push({ page: page, message: message });
             }
         },
         removeErrorOnPage(page) {
-            const index = this.statusForPages.findIndex(item => item.page === page);
+            const index = this.validationStatusForSteps.findIndex(item => item.page === page);
             
             if(!this.inputMade.includes(page)) {
                 this.inputMade.push(page) 
             }
 
             if (index !== -1) {
-                this.statusForPages.splice(index, 1);
+                this.validationStatusForSteps.splice(index, 1);
             }
         },
         setCurrentPage(page) {
@@ -157,24 +153,27 @@ export default {
         }
     },
     computed: {
-        atleastOnePageWithError() {
-            return this.statusForPages.length > 0 || this.inputMade.length === 0
+        // check if at leat one step has status 'error'
+        atleastOneStepWithError() {
+            return this.validationStatusForSteps.length > 0 || this.inputMade.length === 0
         },
+        // check if a page ha
         pageHasError() {
-            return this.statusForPages.some((item) => {
+            return this.validationStatusForSteps.some((item) => {
                 return item.page === this.currentPage
             })
         },
+        // get steps filled correctly (status 'success')
         successSteps() {
             const steps = []
 
             if(this.inputMade.length) {
                 for(let i = 0; i < this.numberOfPages; i++) {
-                    const success = !this.statusForPages.find((item) => {
+                    const success = !this.validationStatusForSteps.find((item) => {
                         return item.page === i + 1
                     })
 
-                    // if no statusForPages is found (all pages are 'success' ant at least one input was made)
+                    // if no validationStatusForSteps is found (all steps are 'success' ant at least one input was made)
                     if(success && this.inputMade.includes(i + 1)) {
                         steps.push(i + 1)
                     }
@@ -183,9 +182,10 @@ export default {
 
             return steps
         },
+        // get steps filled incorrectly (status 'error')
         errorSteps() {
             const steps = []
-            this.statusForPages.forEach((item) => {
+            this.validationStatusForSteps.forEach((item) => {
                 steps.push(item.page)
             })
 
@@ -200,9 +200,11 @@ export default {
 
             return steps
         },
+        // get number of pages
         numberOfPages() {
             return Object.keys(this.$slots).filter(key => key.startsWith("page-")).length
         },
+        // set properties for inner CmdMultistepFormProgressBar
         cmdMultistepFormProgressBarProperties() {
             return {
                 show: true,
@@ -210,6 +212,7 @@ export default {
                 ...this.cmdMultistepFormProgressBar
             }
         },
+        // set properties for inner CmdPagination
         cmdPaginationProperties() {
             return {
                 pages: null,
@@ -233,9 +236,11 @@ export default {
 </script>
 
 <style>
+/* begin cmd-multistepform-wrapper ------------------------------------------------------------------------------------------ */
 .cmd-multistepform-wrapper {
     display: flex;
     flex-direction: column;
     gap: var(--default-gap);
 }
+/* end cmd-multistepform-wrapper ------------------------------------------------------------------------------------------ */
 </style>