Add checks for checkbox component

Author: mcraeteisha

src/mixins/extensions/DataManager.js

@@ -8,6 +8,10 @@ export default {
         const { component } = v.element;
         const dataFormat = v.config.dataFormat || null;
         const safeDotName = this.safeDotName(v.name);
+        // For checkboxes, use explicit undefined checks to preserve false values
+        const isCheckbox = component === "FormCheckbox";
+        const vdataCheck = isCheckbox ? "vdataVal !== undefined" : "vdataVal";
+        const dataCheck = isCheckbox ? "dataVal !== undefined" : "dataVal";
         this.addData(
           screen,
           safeDotName,
@@ -16,9 +20,9 @@ export default {
               const vdataVal = this.getValue(${JSON.stringify(
                 v.name
               )}, this.vdata);
-              if (vdataVal !== undefined) return vdataVal;
+              if (${vdataCheck}) return vdataVal;
               const dataVal = this.getValue(${JSON.stringify(v.name)}, data);
-              if (dataVal !== undefined) return dataVal;
+              if (${dataCheck}) return dataVal;
               return this.initialValue('${component}', '${dataFormat}', ${JSON.stringify(
             v.config
           )});

src/mixins/extensions/DefaultValues.js

@@ -1,62 +1,103 @@
-
 export default {
   methods: {
     /**
      * Prepare `data` configuration for the Vue Screen Component
      *
      */
     defaultValues(screen, definition) {
-      this.variables.forEach(({name, config}) => {
+      this.variables.forEach((v) => {
+        const { name, config } = v;
+        const { component } = v.element;
         if (this.isComputedVariable(name, definition)) return;
+        const isCheckbox = component === "FormCheckbox";
         if (config.defaultValue) {
-          if (config.defaultValue.mode === 'basic') {
-            this.setupDefaultValue(screen, name, `this.mustache(${JSON.stringify(config.defaultValue.value)})`);
-          } else if (config.defaultValue.mode === 'js') {
-            this.setupDefaultValue(screen, name, `(function() {${config.defaultValue.value}}).bind(this.getDataReference())()`);
+          if (config.defaultValue.mode === "basic") {
+            this.setupDefaultValue(
+              screen,
+              name,
+              `this.mustache(${JSON.stringify(config.defaultValue.value)})`,
+              isCheckbox
+            );
+          } else if (config.defaultValue.mode === "js") {
+            this.setupDefaultValue(
+              screen,
+              name,
+              `(function() {${config.defaultValue.value}}).bind(this.getDataReference())()`,
+              isCheckbox
+            );
           }
         }
-        if ('initiallyChecked' in config) {
-          this.setupDefaultValue(screen, name, config.initiallyChecked ? 'true' : 'false');
+        if ("initiallyChecked" in config) {
+          this.setupDefaultValue(
+            screen,
+            name,
+            config.initiallyChecked ? "true" : "false",
+            isCheckbox
+          );
         }
         // Update vdata
         this.addMounted(screen, `
           this.setValue(${JSON.stringify(name)}, this.getValue(${JSON.stringify(name)}), this.vdata, this);
         `);
       });
     },
-    setupDefaultValue(screen, name, value) {
+    setupDefaultValue(screen, name, value, isCheckbox = false) {
       const safeDotName = this.safeDotName(name);
       const defaultComputedName = `default_${safeDotName}__`;
-      this.addData(screen, `${name}_was_filled__`, `this.getValue(${JSON.stringify(name)}, this.vdata) !== undefined || this.getValue(${JSON.stringify(name)}, data) !== undefined`);
+      // For checkboxes, use explicit undefined checks to preserve false values
+      // For other components, use falsy checks to maintain existing behavior
+      const wasFilledCheck = isCheckbox
+        ? `this.getValue(${JSON.stringify(
+            name
+          )}, this.vdata) !== undefined || this.getValue(${JSON.stringify(
+            name
+          )}, data) !== undefined`
+        : `!!this.getValue(${JSON.stringify(
+            name
+          )}, this.vdata) || !!this.getValue(${JSON.stringify(name)}, data)`;
+      const mountCheck = isCheckbox
+        ? `this.${safeDotName} === undefined`
+        : `!this.${safeDotName}`;
+      this.addData(screen, `${name}_was_filled__`, wasFilledCheck);
       this.addMounted(
         screen,
-        `if (this.${safeDotName} === undefined) {
+        `if (${mountCheck}) {
             this.tryFormField(${JSON.stringify(name)}, () => {
             this.${safeDotName} = ${value};
             this.setValue(${JSON.stringify(name)}, ${value}, this.vdata, this);});
         }`
       );
       screen.computed[defaultComputedName] = {
-        get: new Function(`return this.tryFormField(${JSON.stringify(name)}, () => ${value});`),
-        set() {},
+        get: new Function(
+          `return this.tryFormField(${JSON.stringify(name)}, () => ${value});`
+        ),
+        set() {}
       };
-      this.addWatch(screen, defaultComputedName, `!this.${safeDotName}_was_filled__ && this.setValue(${JSON.stringify(name)}, this.${defaultComputedName}, this.vdata, this);`);
-    },
+      this.addWatch(
+        screen,
+        defaultComputedName,
+        `!this.${safeDotName}_was_filled__ && this.setValue(${JSON.stringify(
+          name
+        )}, this.${defaultComputedName}, this.vdata, this);`
+      );
+    }
   },
   mounted() {
     this.extensions.push({
       onbuild({ screen, definition }) {
         this.defaultValues(screen, definition);
       },
       onloadproperties({ properties, element, definition }) {
-        const name = element.config.name;
+        const { name } = element.config;
         if (this.isComputedVariable(name, definition)) return;
         if (element.config.defaultValue || element.config.initiallyChecked) {
           const safeDotName = this.safeDotName(name);
-          const event = `${safeDotName}_was_filled__ |= !!$event; !${safeDotName}_was_filled__ && (vdata.${this.dot2bracket(name)} = default_${safeDotName}__)`;
-          this.addEvent(properties, 'input', event);
+          const event = `${safeDotName}_was_filled__ |= !!$event; !${safeDotName}_was_filled__ && (vdata.${this.dot2bracket(
+            name
+          )} = default_${safeDotName}__)`;
+          this.addEvent(properties, "input", event);
         }
-      },
+      }
     });
-  },
+  }
 };