comand-component-library 4.2.70 → 4.2.72

package/src/components/CmdForm.vue

@@ -254,6 +254,11 @@ export default {
             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)
+    },
     computed: {
         legendOptions() {
             return {
@@ -294,6 +299,8 @@ export default {
             } 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/CmdMultistepFormWrapper.vue

@@ -15,10 +15,14 @@
         <!-- begin slot for progress-bar -->
 
         <div v-show="page === currentPage" :class="'multistep-page-' + page" v-for="(page, index) in numberOfPages" :key="index">
-            <CmdSystemMessage v-if="pagesWithError.some(item => item.page === page)" :systemMessage="getSystemMessage(page)" validationStatus="error" />
+            <CmdSystemMessage v-if="statusForPages.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)">
-            </slot>
+            <slot 
+                :name="'page-' + page" 
+                :setErrorOnPage="(message) => setErrorOnPage(page, message)" 
+                :removeErrorOnPage="() => removeErrorOnPage(page)" 
+                :atleastOnePageWithError="atleastOnePageWithError"
+            />
             <!-- end slot for page content -->
         </div>
 
@@ -49,7 +53,8 @@ export default {
     data () {
         return {
             currentPage: 1,
-            pagesWithError: []
+            statusForPages: [],
+            inputMade: false
         }
     },
     props: {
@@ -97,25 +102,27 @@ export default {
             }
         }
     },
-    mounted() {
-        console.log("slots:", this.$slots)
-    },
     methods: {
         getSystemMessage(page) {
-            const pageEntry = this.pagesWithError.find(item => item.page === page);
+            const pageEntry = this.statusForPages.find(item => item.page === page);
             return pageEntry.message
         },
         setErrorOnPage(page, message) {
-            const exists = this.pagesWithError.some(item => item.page === page);
+            const exists = this.statusForPages.some(item => item.page === page);
             
+            this.inputMade = true
+
             if (!exists) {
-                this.pagesWithError.push({ page: page, message: message });
+                this.statusForPages.push({ page: page, message: message });
             }
         },
         removeErrorOnPage(page) {
-            const index = this.pagesWithError.findIndex(item => item.page === page);
+            const index = this.statusForPages.findIndex(item => item.page === page);
+
+            this.inputMade = true
+
             if (index !== -1) {
-                this.pagesWithError.splice(index, 1);
+                this.statusForPages.splice(index, 1);
             }
         },
         setCurrentPage(page) {
@@ -133,14 +140,17 @@ export default {
         }
     },
     computed: {
+        atleastOnePageWithError() {
+            return this.statusForPages.length > 0 || !this.inputMade
+        },
         pageHasError() {
-            return this.pagesWithError.some((item) => {
+            return this.statusForPages.some((item) => {
                 return item.page === this.currentPage
             })
         },
         errorSteps() {
             const steps = []
-            this.pagesWithError.find((item) => {
+            this.statusForPages.find((item) => {
                 steps.push(item.page)
             })
             console.log("steps", steps)

package/src/components/CmdSiteHeader.vue

@@ -177,6 +177,7 @@ export default {
 /* begin cmd-site-header ---------------------------------------------------------------------------------------- */
 .cmd-site-header {
     --logo-width-on-scroll: 50%;
+    --header-scroll-animation: var(--default-transition);
 
     grid-area: site-header;
     display: flex;
@@ -188,15 +189,13 @@ export default {
         z-index: 300;
 
         header {
-            --header-scroll-animation: var(--default-transition);
-            transition: var(--header-scroll-animation);
-
             .cmd-company-logo {
                 figure {
                     img {
                         transform-origin: top left;
                         transition: var(--header-scroll-animation);
                         margin: 0;
+                        width: 100%;
                     }
                 }
             }