comand-component-library 4.2.62 → 4.2.64

package/dist/comand-component-library.js

@@ -4638,7 +4638,8 @@ const Re = /* @__PURE__ */ P(Pr, [["render", Er]]), Hr = {
         show: !1,
         validationStatus: "",
         message: ""
-      }
+      },
+      formElementsWithError: []
     };
   },
   props: {
@@ -4765,6 +4766,9 @@ const Re = /* @__PURE__ */ P(Pr, [["render", Er]]), Hr = {
     }
   },
   methods: {
+    formElementHasError(e, t) {
+      e === "error" && !this.formElementsWithError.includes(t) ? this.formElementsWithError.push(t) : e === "success" && this.formElementsWithError.includes(t) && (this.formElementsWithError = this.formElementsWithError.filter((n) => n !== t)), this.$emit("validation-status-change", this.formElementsWithError.length ? "error" : "success");
+    },
     createHtmlId: Vi,
     showMessage(e, t) {
       this.systemMessage.show = !0, this.systemMessage.validationStatus = e, this.systemMessage.message = t;
@@ -4783,6 +4787,15 @@ const Re = /* @__PURE__ */ P(Pr, [["render", Er]]), Hr = {
     }
   },
   watch: {
+    formValues: {
+      handler() {
+        if (!this.formElements)
+          return;
+        const e = this.formElements.filter((i) => i.required).length, t = this.formElements.filter((i) => i.required && !this.formValues[i.name]).length, n = e > 0 && e === t, s = e > 0 && t > 0;
+        this.$emit("empty-required-form-elements", { allRequiredFormElementsEmpty: n, emptyRequiredFormElementExists: s });
+      },
+      immediate: !0
+    },
     formElements: {
       handler() {
         var e;
@@ -4847,8 +4860,9 @@ function Qr(e, t, n, s, i, l) {
             autocomplete: f.autocomplete,
             minlength: f.minlength,
             maxlength: f.maxlength,
-            nativeButton: f.nativeButton
-          }, null, 8, ["element", "type", "name", "class", "id", "modelValue", "onUpdate:modelValue", "inputValue", "fieldIconClass", "selectOptions", "labelText", "placeholder", "required", "disabled", "autocomplete", "minlength", "maxlength", "nativeButton"])) : f.component === "CmdInputGroup" ? (a(), v(c, {
+            nativeButton: f.nativeButton,
+            onValidationStatusChange: (g) => l.formElementHasError(g, f.name)
+          }, null, 8, ["element", "type", "name", "class", "id", "modelValue", "onUpdate:modelValue", "inputValue", "fieldIconClass", "selectOptions", "labelText", "placeholder", "required", "disabled", "autocomplete", "minlength", "maxlength", "nativeButton", "onValidationStatusChange"])) : f.component === "CmdInputGroup" ? (a(), v(c, {
             key: 1,
             modelValue: i.formValues[f.name],
             "onUpdate:modelValue": (g) => i.formValues[f.name] = g,
@@ -21417,7 +21431,7 @@ const qx = /* @__PURE__ */ P(Ex, [["render", Hx]]), Rx = [
     text: "Zimbabwe",
     value: "zw"
   }
-], n1 = "comand-component-library", i1 = "4.2.62", l1 = "GPL-3.0-only", o1 = "CoManD-UI", a1 = "module", s1 = {
+], n1 = "comand-component-library", i1 = "4.2.64", l1 = "GPL-3.0-only", o1 = "CoManD-UI", a1 = "module", s1 = {
   prepublishOnly: "npm run build-lib",
   dev: "vite",
   build: "vite build",

package/package.json

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

package/src/components/CmdForm.vue

@@ -35,6 +35,7 @@
                         :minlength="item.minlength"
                         :maxlength="item.maxlength"
                         :nativeButton="item.nativeButton"
+                        @validation-status-change="formElementHasError($event, item.name)"
                     />
                     <CmdInputGroup
                         v-else-if="item.component === 'CmdInputGroup'"
@@ -124,7 +125,8 @@ export default {
                 show: false,
                 validationStatus: "",
                 message: ""
-            }
+            },
+            formElementsWithError: []
         }
     },
     props: {
@@ -251,6 +253,14 @@ export default {
         }
     },
     methods: {
+        formElementHasError(event, itemName) {
+            if (event === "error" && !this.formElementsWithError.includes(itemName)) {
+                this.formElementsWithError.push(itemName)
+            } else if (event === "success" && this.formElementsWithError.includes(itemName)) {
+                this.formElementsWithError = this.formElementsWithError.filter((element) => element !== itemName)
+            }
+            this.$emit("validation-status-change", this.formElementsWithError.length ? "error" : "success")
+        },
         createHtmlId,
         showMessage(validationStatus, message) {
             this.systemMessage.show = true
@@ -289,6 +299,27 @@ export default {
             }
     },
     watch: {
+        formValues: {
+            handler() {
+                if(!this.formElements) {
+                    return
+                }
+
+                const numberRequiredFormElements = this.formElements.filter((element) => {
+                    return element.required     
+                }).length
+
+                const numberEmptyRequiredFormElements = this.formElements.filter((element) => {
+                    return element.required && !this.formValues[element.name]    
+                }).length
+
+                const allRequiredFormElementsEmpty = numberRequiredFormElements > 0 && numberRequiredFormElements === numberEmptyRequiredFormElements
+                const emptyRequiredFormElementExists = numberRequiredFormElements > 0 && numberEmptyRequiredFormElements > 0
+
+                this.$emit("empty-required-form-elements", { allRequiredFormElementsEmpty, emptyRequiredFormElementExists })
+            },
+            immediate: true
+        },  
         formElements: {
             handler() {
                 this.formValues = {}