comand-component-library 4.2.81 → 4.2.83

package/package.json

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

package/src/ComponentLibrary.vue

@@ -1378,13 +1378,21 @@
                     </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}"
-                        />
+                        <CmdForm
+                        :cmdHeadline=" { headlineText: 'Confirmation', headlineLevel: 3 }"
+                        >
+                            <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.atleastOnPageWithError: {{ props.atleastOnePageWithError }}
                     </template>
                     <twmplate>
@@ -2014,6 +2022,7 @@ export default {
             inputFieldPattern: "",
             inputSearch: "",
             textarea: "",
+            formElementsWithErrorPageConfirm: ["confirm-data-privacy"],
             inputGroupRadio: "radiobuttonValue1",
             inputGroup: "website",
             inputGroupValueReplaceInputTypeRadio: "phone",
@@ -2207,6 +2216,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/components/CmdFormElement.vue

@@ -134,6 +134,7 @@
                     v-bind="elementAttributes"
                     @change="onChange"
                     @blur="onBlur"
+                    @input="onInput"
                     :checked="isChecked"
                     :value="inputValue"
                     :class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType}]"
@@ -852,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"