comand-component-library 4.2.94 → 4.2.96

package/package.json

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

package/src/ComponentLibrary.vue

@@ -1318,8 +1318,10 @@
                     </a>
                 </h2>
                 <h3>Data provided by property</h3>
-                <CmdMultistepFormWrapper :requiredPages="[1, 2]">
+                <CmdMultistepFormWrapper :requiredPages="[1, 2]" :defaultInputValues="multistepFormDefaultInputValues">
+                   
                     <template v-slot:page-1="props">
+                        multistepFormDefaultInputValues: {{ multistepFormDefaultInputValues }}
                         <h3>Page 1 - all fields required</h3>
                         <CmdForm 
                             :formElements="multistepFormWrapperPage1Data" 
@@ -1340,7 +1342,7 @@
                         >   
                             <CmdFormElement 
                                 element="input" 
-                                type="text" 
+                                type="tel" 
                                 labelText="Telephone:"
                                 name="page-2-telephone"
                                 id="page-2-telephone"
@@ -2160,6 +2162,14 @@ export default {
                     linkType: ""
                 }
             },
+            multistepFormDefaultInputValues: {
+                1: {
+                    "form-element-text-surname": "Biock"
+                },
+                2: {
+                    "page-2-telephone": "12345/67890"
+                }
+            },
 
             // assign data from json files to data-properties
             addressData,

package/src/assets/data/multistep-form-wrapper-page-1.json

@@ -4,7 +4,6 @@
         "type": "text",
         "name": "form-element-text-surname",
         "htmlClass": "form-element-text-class",
-        "value": "",
         "labelText": "Surname",
         "placeholder": "Surname",
         "required": true,
@@ -15,7 +14,7 @@
         "type": "text",
         "name": "form-element-text-first-name",
         "htmlClass": "form-element-text-class",
-        "value": "",
+        "value": "Raphael",
         "labelText": "First Name",
         "placeholder": "First Name",
         "required": true,

package/src/components/CmdForm.vue

@@ -68,6 +68,12 @@
                                 v-model="formValues[item.name]"
                                 @validation-status-change="formElementHasError($event, item.name)"
                             />
+                            <CmdFakeSelect
+                                v-else-if="item.component === 'CmdFakeSelect'"
+                                :class="item.htmlClass"
+                                v-bind="item"
+                                v-model="formValues[item.name]"
+                            />
                             <CmdInputGroup
                                 v-else-if="item.component === 'CmdInputGroup'"
                                 v-model="formValues[item.name]"

package/src/components/CmdMultistepFormWrapper.vue

@@ -37,7 +37,7 @@
 
         <div v-show="currentPage === numberOfPages" class="multistep-page-last">
             <CmdSystemMessage v-if="pagesWithError.length" validationStatus="error">
-                <p>Please fill all required fields on the pages {{  pagesWithError.join(", ") }} correctly!</p>
+                <p>{{ getMessage("multistep_form_wrapper.system_message.please_enter_all_required_data_on_the_pages") }} {{  pagesWithError.join(", ") }}</p>
             </CmdSystemMessage>
 
              <!-- begin slot for last step -->
@@ -73,8 +73,16 @@
 </template>
 
 <script>
+// import mixins
+import I18n from "../mixins/I18n.js"
+import DefaultMessageProperties from "../mixins/CmdMultistepFormWrapper/DefaultMessageProperties.js"
+
 export default {
     name: "CmdMultistepFormWrapper",
+    mixins: [
+        I18n,
+        DefaultMessageProperties
+    ],
     data () {
         return {
             currentPage: 1,
@@ -84,6 +92,10 @@ export default {
         }
     },
     props: {
+        defaultInputValues: {
+            type: Object,
+            required: false
+        },
         requiredPages: {
             type: Array,
             default: []
@@ -193,10 +205,10 @@ export default {
             if(this.validationStatusForSteps.length > 0 || this.inputMade.length === 0) {
                 return true
             }
+
             const requiredPagesSet = new Set(this.requiredPages)
             const inputMadeSet = new Set(this.inputMade)
-            console.log("requiredPagesSet", requiredPagesSet)
-            console.log("inputMadeSet", inputMadeSet)
+
             return !requiredPagesSet.isSubsetOf(inputMadeSet) // check if all requiredPages are included in inputMade
 
         },
@@ -274,6 +286,22 @@ export default {
                 }
             }
         }
+    },
+    watch: {
+        defaultInputValues: {
+            handler() {
+                this.formData = {}
+                if(this.defaultInputValues) {
+                    for (const page in this.defaultInputValues) {
+                        this.formData[page] = {
+                            ...this.defaultInputValues[page]
+                        }
+                    }
+                }
+            },
+            immediate: true,
+            deep: true
+        }
     }
 }
 </script>

package/src/mixins/CmdMultistepFormWrapper/DefaultMessageProperties.js

@@ -0,0 +1,9 @@
+export default {
+  data() {
+    return {
+      defaultMessageProperties: {
+        "multistep_form_wrapper.system_message.please_enter_all_required_data_on_the_pages": "Please enter all required data on the pages:",
+      }
+    }
+  }
+}