@processmaker/screen-builder 3.8.8 → 3.8.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.8.8",
+  "version": "3.8.10",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",

package/src/components/inspector/dynamic-panel.vue

@@ -22,22 +22,34 @@
         data-test="i1177-inspector-index-name"
       />
     </div>
+
+    <div class="form-group border-bottom">
+      <FormTextArea
+        v-model="settings.emptyStateMessage"
+        :label="$t('Empty State Message')"
+        :name="$t('Empty State Message')"
+        :helper="$t('Custom message to display when the panel has no data. Supports HTML and Mustache placeholders')"
+        :rows="3"
+        data-test="i1177-inspector-empty-state-message"
+      />
+    </div>
   </div>
 </template>
 
 <script>
-import { FormInput } from '@processmaker/vue-form-elements';
+import { FormInput, FormTextArea } from '@processmaker/vue-form-elements';
 
 export default {
   props: ['value', 'screenType'],
   inheritAttrs: false,
-  components: { FormInput },
+  components: { FormInput, FormTextArea },
   data() {
     return {
       settings: {
         type: 'new',
         varname: '',
         indexName: '',
+        emptyStateMessage: this.$t('No data available for this dynamic panel'),
       },
     };
   },

package/src/components/renderer/form-dynamic-panel.vue

@@ -4,12 +4,13 @@
       <slot></slot>
     </div>
     <div v-else class="dynamic-panel-empty">
-      <p class="text-muted">No data available for this dynamic panel</p>
+      <div v-html="renderedEmptyMessage" class="text-muted"></div>
     </div>
   </div>
 </template>
 
 <script>
+import Mustache from 'mustache';
 
 export default {
   name: "FormDynamicPanel",
@@ -19,10 +20,34 @@ export default {
       required: false,
       default: null
     },
+    emptyStateMessage: {
+      type: String,
+      required: false,
+      default: 'No data available for this dynamic panel'
+    },
+    validationData: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
   },
   computed: {
     hasData() {
       return this.itemData !== null && this.itemData !== undefined;
+    },
+    renderedEmptyMessage() {
+      if (!this.emptyStateMessage) {
+        return this.$t('No data available for this dynamic panel');
+      }
+
+      try {
+        // Process Mustache placeholders
+        const processedMessage = Mustache.render(this.emptyStateMessage, this.validationData);
+        return processedMessage;
+      } catch (error) {
+        // If Mustache processing fails, return the original message
+        return this.emptyStateMessage;
+      }
     }
   }
 };

package/src/components/renderer/link-button.vue

@@ -22,10 +22,10 @@ export default {
   ],
   computed: {
     classColor() {
-      if (this.variantStyle === "link") {
-        return `text-${this.variant}`;
+      if (this.variantStyle === "button") {
+        return `btn btn-${this.variant}`;
       }
-      return `btn btn-${this.variant}`;
+      return `text-${this.variant}`;
     }
   }
 };

package/src/form-builder-controls.js

@@ -489,6 +489,7 @@ export default [
           varname: 'dynamic_panel',
           indexName: '',
           add: false,
+          emptyStateMessage:  'No data available for this dynamic panel',
         },
       },
       inspector: [

package/src/mixins/extensions/FormDynamicPanel.js

@@ -14,6 +14,15 @@ export default {
 
       // Add itemData to the properties of FormDynamicPanel
       properties[':itemData'] = `${variableName} && ${variableName}[${index}]`;
+      
+      // Add emptyStateMessage property if configured
+      if (element.config.settings.emptyStateMessage) {
+        properties[':emptyStateMessage'] = this.byRef(element.config.settings.emptyStateMessage);
+      }
+      
+      // Add validationData for Mustache processing
+      properties[':validationData'] = 'getValidationData()';
+      
       this.registerVariable(element.config.settings.varname, element);
     },
     loadFormDynamicPanelItems({ element, node, definition }) {