@processmaker/screen-builder 3.8.17 → 3.8.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.8.17",
+  "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

@@ -43,15 +43,16 @@
         
         <!-- Select All and Search Section -->
         <div class="controls-section">
-          <button
-            type="button"
-            class="select-all-button"
-            @click="selectAll"
-            :disabled="filteredVariables.length === 0 || selectedVariables.length === filteredVariables.length"
+          <b-form-checkbox
+            :checked="allSelected"
+            :indeterminate="someSelected"
+            @change="toggleSelectAll"
+            :disabled="filteredVariables.length === 0"
+            class="select-all-checkbox"
             data-cy="variables-to-submit-select-all"
           >
             {{ $t('Select All') }}
-          </button>
+          </b-form-checkbox>
           <button
             type="button"
             class="search-button"
@@ -164,10 +165,13 @@ export default {
       
       // Extract calculated variables (computed properties)
       Object.assign(variables, this.extractCalculatedVariables());
+
+      // Extract watcher output variables
+      Object.assign(variables, this.extractWatcherVariables());
       
-      // Filter: exclude _parent variables, include all others
+      // Filter: exclude _parent variables and invalid variable names
       return Object.keys(variables)
-        .filter(variable => !variable.startsWith('_parent.'))
+        .filter(variable => this.isValidVariableName(variable))
         .sort();
     },
     
@@ -211,6 +215,36 @@ export default {
       return this.requiredVariables.filter(
         variable => !this.selectedVariables.includes(variable)
       );
+    },
+    
+    /**
+     * Check if all filtered variables are selected
+     */
+    allSelected() {
+      return this.filteredVariables.length > 0 && 
+        this.filteredVariables.every(v => this.selectedVariables.includes(v));
+    },
+    
+    /**
+     * Check if some (but not all) filtered variables are selected
+     */
+    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: {
@@ -231,8 +265,13 @@ export default {
         this.$emit('change', []);
       }
     },
-    isEnabled(newValue) {
-      if (!newValue) {
+    isEnabled(newValue, oldValue) {
+      if (newValue && !oldValue) {
+        // When enabled for the first time, select all variables
+        this.selectedVariables = [...this.availableVariables];
+        this.$emit('input', this.selectedVariables);
+        this.$emit('change', this.selectedVariables);
+      } else if (!newValue) {
         // When disabled, clear selection to submit all variables
         this.selectedVariables = [];
         this.$emit('input', []);
@@ -242,17 +281,49 @@ export default {
     'selectedControl.config.event'(newVal) {
       this.event = newVal;
     },
-    'builder.variablesTree'() {
-      // Force recomputation when variables tree changes
-      this.$forceUpdate();
+    formConfig: {
+      handler() {
+        this.$nextTick(() => {
+          this.cleanupInvalidSelections();
+        });
+      },
+      deep: true,
+      immediate: true
     },
-    // Watch for computed properties changes in App.vue
-    '$root.computed'() {
-      // Force recomputation when computed properties change
-      this.$forceUpdate();
+    // 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)
@@ -289,6 +360,14 @@ export default {
       this.selectedVariables = this.selectedVariables.filter(v => !filteredSet.has(v));
     },
     
+    toggleSelectAll(checked) {
+      if (checked) {
+        this.selectAll();
+      } else {
+        this.deselectAll();
+      }
+    },
+    
     toggleSearch() {
       this.showSearch = !this.showSearch;
       if (!this.showSearch) {
@@ -296,6 +375,23 @@ export default {
       }
     },
     
+    /**
+     * Check if a variable name is valid
+     * Uses same logic as dot_notation validation rule
+     */
+    isValidVariableName(name) {
+      if (!name || typeof name !== 'string') {
+        return false;
+      }
+      if (name.startsWith('_parent.')) {
+        return false;
+      }
+      // Same regex as dot_notation: starts with letter, followed by letters, numbers, or underscores
+      const validPartRegex = /^[a-zA-Z][a-zA-Z0-9_]*$/;
+      const parts = name.split('.');
+      return parts.every(part => validPartRegex.test(part));
+    },
+    
     /**
      * Extract calculated variables (computed properties) from the screen
      * Searches in multiple locations: App.vue, builder, or parent components
@@ -324,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;
@@ -348,6 +449,47 @@ export default {
       
       return [];
     },
+
+    /**
+     * Extract watcher output variables from the screen
+     */
+    extractWatcherVariables() {
+      const watcherVars = {};
+      const watchers = this.getWatchers() || [];
+      
+      watchers.forEach(watcher => {
+        if (watcher.byPass) return;
+        
+        // Output variable (for scripts)
+        if (watcher.output_variable) {
+          watcherVars[watcher.output_variable] = null;
+        }
+        
+        // Data mapping variables (for data sources)
+        try {
+          const config = typeof watcher.script_configuration === 'string'
+            ? JSON.parse(watcher.script_configuration)
+            : watcher.script_configuration;
+          (config?.dataMapping || []).forEach(m => {
+            if (m.key) watcherVars[m.key] = null;
+          });
+        } catch {
+          console.error('Invalid JSON in script_configuration for watcher:', watcher.name);
+        }
+      });
+      
+      return watcherVars;
+    },
+    
+    /**
+     * Get watchers from various sources
+     */
+    getWatchers() {
+      return this.$root?.$data?.watchers 
+        || this.$root?.$children?.[0]?.watchers 
+        || this.$root?.$children?.[0]?.$data?.watchers 
+        || [];
+    },
     
     /**
      * Extract variables from form config
@@ -634,25 +776,16 @@ export default {
   margin-top: 0;
 }
 
-.select-all-button {
-  background: none;
-  border: none;
-  padding: 0;
-  color: #0d6efd;
-  font-size: 15px;
+.select-all-checkbox {
+  margin: 0;
+  font-size: 14px;
   font-weight: 600;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.select-all-button:hover:not(:disabled) {
-  color: #0a58ca;
-  text-decoration: none;
+  color: #495057;
 }
 
-.select-all-button:disabled {
-  color: #adb5bd;
-  cursor: not-allowed;
+.select-all-checkbox >>> .custom-control-label {
+  cursor: pointer;
+  user-select: none;
 }
 
 .search-button {