@processmaker/screen-builder 3.8.18 → 3.8.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.8.18",
+  "version": "3.8.19",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -61,7 +61,7 @@
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.65.5",
+    "@processmaker/vue-form-elements": "0.65.6",
     "@processmaker/vue-multiselect": "2.3.0",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
@@ -125,7 +125,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.65.5",
+    "@processmaker/vue-form-elements": "0.65.6",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/components/inspector/variables-to-submit.vue

@@ -231,6 +231,20 @@ export default {
     someSelected() {
       const selectedCount = this.filteredVariables.filter(v => this.selectedVariables.includes(v)).length;
       return selectedCount > 0 && selectedCount < this.filteredVariables.length;
+    },
+    
+    /**
+     * Source for computed properties to watch for changes
+     */
+    computedPropertiesSource() {
+      return this.getComputedProperties() || [];
+    },
+    
+    /**
+     * Source for watchers to watch for changes
+     */
+    watchersSource() {
+      return this.getWatchers() || [];
     }
   },
   watch: {
@@ -267,22 +281,49 @@ export default {
     'selectedControl.config.event'(newVal) {
       this.event = newVal;
     },
-    'builder.variablesTree'() {
-      // Force recomputation when variables tree changes
-      this.$forceUpdate();
-    },
-    // Watch for computed properties changes in App.vue
-    '$root.computed'() {
-      // Force recomputation when computed properties change
-      this.$forceUpdate();
-    },
-    // Watch for watchers changes in App.vue
-    '$root.watchers'() {
-      // Force recomputation when watchers change
-      this.$forceUpdate();
+    formConfig: {
+      handler() {
+        this.$nextTick(() => {
+          this.cleanupInvalidSelections();
+        });
+      },
+      deep: true,
+      immediate: true
+    },
+    // Watch for computed properties changes
+    computedPropertiesSource: {
+      handler() {
+        this.$nextTick(() => {
+          this.cleanupInvalidSelections();
+        });
+      },
+      deep: true
+    },
+    // Watch for watchers changes
+    watchersSource: {
+      handler() {
+        this.$nextTick(() => {
+          this.cleanupInvalidSelections();
+        });
+      },
+      deep: true
     }
   },
   methods: {
+    /**
+     * Remove selected variables that no longer exist in availableVariables
+     */
+    cleanupInvalidSelections() {
+      const available = this.availableVariables;
+      const validSelected = this.selectedVariables.filter(v => available.includes(v));
+      if (validSelected.length !== this.selectedVariables.length) {
+        this.selectedVariables = validSelected;
+        // Turn off toggle if no variables remain selected
+        if (validSelected.length === 0) {
+          this.isEnabled = false;
+        }
+      }
+    },
     /**
      * Load variables from the variables tree
      * Only includes root-level variables (no prefix, no dots in name)
@@ -379,6 +420,11 @@ export default {
         return this.$root.$data.computed;
       }
       
+      // Try $root.$children[0] (App.vue pattern)
+      if (this.$root?.$children?.[0]?.computed && Array.isArray(this.$root.$children[0].computed)) {
+        return this.$root.$children[0].computed;
+      }
+      
       // Try builder sources
       if (this.builder?.screen?.computed) {
         return this.builder.screen.computed;