From 707d8fe3b08a3785442bc5265f0420b4771a2fcd Mon Sep 17 00:00:00 2001
From: Afiq <mdafiqiskandar@gmail.com>
Date: Mon, 4 Aug 2025 15:37:07 +0800
Subject: [PATCH] Enhance Component Preview and Form Builder Functionality

- Updated ComponentPreview.vue to improve handling of readonly states for select, checkbox, and radio components, ensuring proper styling and interaction.
- Modified button component in ComponentPreview.vue to conditionally display button text and icon based on new props for better customization.
- Enhanced FormBuilderComponents.vue by adding new properties for button configuration, including showLabel, showButtonText, buttonText, and icon.
- Introduced new form field settings in FormBuilderFieldSettingsModal.vue to allow users to customize button size, icon, and visibility options for labels and text.
- Improved overall user experience by refining placeholder visibility in builder mode and enhancing the button action script template functionality.
---
 components/ComponentPreview.vue              |  67 +++++--
 components/FormBuilderComponents.vue         |   5 +
 components/FormBuilderFieldSettingsModal.vue | 201 ++++++++++++++++++-
 3 files changed, 244 insertions(+), 29 deletions(-)

diff --git a/components/ComponentPreview.vue b/components/ComponentPreview.vue
index bcbed82..a138c07 100644
--- a/components/ComponentPreview.vue
+++ b/components/ComponentPreview.vue
@@ -27,14 +27,20 @@
       :label="component.props.label" :help="component.props.help" :placeholder="component.props.placeholder"
       :validation="component.props.validation" :validation-visibility="isPreview ? 'live' : 'blur'"
       :readonly="component.props.readonly || isPreview" 
-      :disabled="isPreview" :options="component.props.options || undefined" :value="component.props.value || undefined"
+      :disabled="isPreview || (component.props.readonly && ['select', 'checkbox', 'radio'].includes(component.type))" 
+      :options="component.props.options || undefined" :value="component.props.value || undefined"
       :accept="component.props.accept || undefined" :max="component.props.max || undefined"
       :mask="component.props.mask || undefined" :digits="component.props.digits || undefined"
       :multiple="component.props.multiple || undefined" :maxSize="component.props.maxSize || undefined"
       :maxFiles="component.props.maxFiles || undefined" :classes="component.type === 'checkbox' ? {
         wrapper: 'mb-1',
         options: 'space-y-0.5'
-      } : {}" :class="{ 'canvas-component': isPreview }" />
+      } : {}" :class="{ 
+        'canvas-component': isPreview,
+        'readonly-select': component.props.readonly && component.type === 'select',
+        'readonly-checkbox': component.props.readonly && component.type === 'checkbox',
+        'readonly-radio': component.props.readonly && component.type === 'radio'
+      }" />
 
     <!-- Heading -->
     <div v-else-if="component.type === 'heading'" class="py-2">
@@ -325,14 +331,15 @@
 
     <!-- Button Component -->
     <div v-else-if="component.type === 'button'" class="py-2">
-      <label v-if="component.props.label" class="block text-sm font-medium text-gray-700 mb-2">
+      <label v-if="component.props.label && component.props.showLabel !== false" class="block text-sm font-medium text-gray-700 mb-2">
         {{ component.props.label }}
       </label>
 
       <RsButton :type="component.props.buttonType || 'button'" :variant="component.props.variant || 'primary'"
         :size="component.props.size || 'md'" :disabled="component.props.disabled || false" @click="handleButtonClick"
         class="button-component">
-        {{ component.props.label || 'Button' }}
+        <span v-if="component.props.showButtonText !== false">{{ component.props.buttonText || component.props.label || 'Button' }}</span>
+        <Icon v-if="component.props.icon" :name="component.props.icon" class="w-4 h-4" :class="{'ml-2': component.props.showButtonText !== false}" />
       </RsButton>
 
       <div v-if="component.props.help" class="mt-1 text-xs text-gray-500">
@@ -394,7 +401,7 @@
             'no-header': !component.props.showHeader
           }"
         >
-          <!-- In preview mode, show the nested components or placeholder -->
+          <!-- In preview mode, show only the nested components (no placeholder) -->
           <div v-if="isPreview" class="section-fields">
             <!-- Render nested components if they exist -->
             <div v-if="component.props.children && component.props.children.length > 0" class="space-y-3">
@@ -402,17 +409,7 @@
                 <component-preview :component="childComponent" :is-preview="true" />
               </template>
             </div>
-            
-            <!-- Show placeholder if no nested components -->
-            <div v-else class="section-placeholder">
-              <div class="placeholder-content">
-                <Icon name="material-symbols:dashboard-customize-outline" class="w-8 h-8 text-gray-300 mx-auto mb-2" />
-                <p class="text-sm text-gray-500 text-center mb-2">Form Section Container</p>
-                <p class="text-xs text-gray-400 text-center">
-                  This section will contain the form fields grouped here
-                </p>
-              </div>
-            </div>
+            <!-- No placeholder in preview mode when empty -->
           </div>
           
           <!-- In form builder mode, show drop zone -->
@@ -477,14 +474,15 @@
               class="section-drop-placeholder"
               :class="{
                 'drop-active': sectionDropStates[component.id]?.isDraggingOver,
-                'empty': !component.props.children || component.props.children.length === 0
+                'empty': !component.props.children || component.props.children.length === 0,
+                'hidden-placeholder': component.props.showPlaceholder === false
               }"
               @dragover.prevent="handleSectionDragOver($event, component.id)"
               @dragleave="handleSectionDragLeave($event, component.id)"
               @drop="handleSectionDrop($event, component.id)"
               @dragenter.prevent="handleSectionDragEnter($event, component.id)"
             >
-              <div class="placeholder-content">
+              <div v-if="component.props.showPlaceholder !== false" class="placeholder-content">
                 <Icon name="material-symbols:add-box-outline" class="w-8 h-8 text-gray-300 mx-auto mb-2" />
                 <p class="text-sm text-gray-500 text-center mb-1">Drop Components Here</p>
                 <p class="text-xs text-gray-400 text-center">
@@ -1271,6 +1269,32 @@ const saveNestedComponentSettings = (updatedComponent) => {
   pointer-events: none;
 }
 
+/* Readonly styles for select, checkbox, and radio components */
+:deep(.readonly-select),
+:deep(.readonly-checkbox),
+:deep(.readonly-radio) {
+  cursor: default !important;
+}
+
+:deep(.readonly-select select),
+:deep(.readonly-select .formkit-inner),
+:deep(.readonly-checkbox input[type="checkbox"]),
+:deep(.readonly-radio input[type="radio"]) {
+  pointer-events: none !important;
+  opacity: 0.8 !important;
+  background-color: #f3f4f6 !important;
+}
+
+:deep(.readonly-checkbox) .formkit-options,
+:deep(.readonly-radio) .formkit-options {
+  pointer-events: none !important;
+}
+
+:deep(.readonly-checkbox) .formkit-wrapper,
+:deep(.readonly-radio) .formkit-wrapper {
+  cursor: not-allowed !important;
+}
+
 /* Image Preview Component */
 .image-preview-container {
   display: flex;
@@ -1485,6 +1509,13 @@ const saveNestedComponentSettings = (updatedComponent) => {
   background-color: #f1f5f9;
 }
 
+.section-drop-placeholder.hidden-placeholder {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  min-height: 40px;
+}
+
 /* Ghost styles for dragging */
 .ghost {
   opacity: 0.5;
diff --git a/components/FormBuilderComponents.vue b/components/FormBuilderComponents.vue
index e8805a9..4faca4c 100644
--- a/components/FormBuilderComponents.vue
+++ b/components/FormBuilderComponents.vue
@@ -598,6 +598,10 @@ const availableComponents = [
       variant: 'primary', // primary, secondary, success, warning, danger
       size: 'md', // sm, md, lg
       disabled: false,
+      showLabel: true, // Whether to show the label above the button
+      showButtonText: true, // Whether to show text on the button
+      buttonText: '', // Text to display on button (falls back to label if empty)
+      icon: '', // Optional icon to display on button
       onClick: '' // Custom JavaScript code to execute
     }
   },
@@ -623,6 +627,7 @@ const availableComponents = [
       spacing: 'normal', // compact, normal, relaxed
       width: '100%',
       gridColumn: 'span 12',
+      showPlaceholder: true, // Whether to show the placeholder in builder mode
       children: [], // Array to hold nested components
       // Conditional Logic Properties
       conditionalLogic: {
diff --git a/components/FormBuilderFieldSettingsModal.vue b/components/FormBuilderFieldSettingsModal.vue
index 6399c15..9958b9b 100644
--- a/components/FormBuilderFieldSettingsModal.vue
+++ b/components/FormBuilderFieldSettingsModal.vue
@@ -497,19 +497,113 @@
                     />
                   </div>
                   
+                  <div class="grid grid-cols-2 gap-4">
+                    <FormKit
+                      type="select"
+                      label="Button Size"
+                      name="size"
+                      v-model="configModel.size"
+                      :options="[
+                        { label: 'Small', value: 'sm' },
+                        { label: 'Medium', value: 'md' },
+                        { label: 'Large', value: 'lg' }
+                      ]"
+                      help="Size of the button"
+                      :classes="{ outer: 'field-wrapper' }"
+                    />
+                    
+                    <FormKit
+                      type="text"
+                      label="Icon (Optional)"
+                      name="icon"
+                      v-model="configModel.icon"
+                      help="Icon name (e.g., 'material-symbols:add')"
+                      :classes="{ outer: 'field-wrapper' }"
+                      placeholder="material-symbols:add"
+                    />
+                  </div>
+
+                  <div class="grid grid-cols-2 gap-4">
+                    <FormKit
+                      type="switch"
+                      label="Show Label Above Button"
+                      name="showLabel"
+                      v-model="configModel.showLabel"
+                      help="Display the label text above the button"
+                      :classes="{ outer: 'field-wrapper' }"
+                    />
+                    
+                    <FormKit
+                      type="switch"
+                      label="Show Text on Button"
+                      name="showButtonText"
+                      v-model="configModel.showButtonText"
+                      help="Display text on the button (icon-only if disabled)"
+                      :classes="{ outer: 'field-wrapper' }"
+                    />
+                  </div>
+                  
                   <FormKit
-                    type="select"
-                    label="Button Size"
-                    name="size"
-                    v-model="configModel.size"
-                    :options="[
-                      { label: 'Small', value: 'sm' },
-                      { label: 'Medium', value: 'md' },
-                      { label: 'Large', value: 'lg' }
-                    ]"
-                    help="Size of the button"
+                    v-if="configModel.showButtonText !== false"
+                    type="text"
+                    label="Button Text"
+                    name="buttonText"
+                    v-model="configModel.buttonText"
+                    help="Text displayed on the button (uses label if empty)"
                     :classes="{ outer: 'field-wrapper' }"
+                    placeholder="e.g., Submit, Save, Continue"
                   />
+                  
+                  <!-- Button Action Script -->
+                  <div class="mt-6 space-y-3">
+                    <h5 class="text-sm font-medium text-gray-700 border-b pb-2">Button Click Action</h5>
+                    <p class="text-xs text-gray-600">
+                      Write JavaScript code to execute when this button is clicked. You can access form data and perform actions.
+                    </p>
+                    
+                    <div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
+                      <div class="mb-2 text-xs text-gray-600">
+                        <strong>Available functions:</strong> getField(), setField(), showField(), hideField(), enableField(), disableField(), showSuccess(), showError(), showInfo()
+                      </div>
+                      <textarea
+                        v-model="configModel.onClick"
+                        class="w-full h-32 font-mono text-sm p-2 border border-gray-300 rounded"
+                        placeholder="// Example:
+// Get values from other fields
+const name = getField('name');
+const email = getField('email');
+
+// Show a message
+if (name && email) {
+  showSuccess('Form data is valid!');
+} else {
+  showError('Please fill in all required fields');
+}"
+                      ></textarea>
+                    </div>
+                    
+                    <!-- Quick Templates -->
+                    <div class="flex flex-wrap gap-2">
+                      <button
+                        @click="insertButtonScriptTemplate('validation')"
+                        class="text-xs px-2 py-1 bg-blue-50 text-blue-700 border border-blue-200 rounded hover:bg-blue-100"
+                      >
+                        Insert Validation Example
+                      </button>
+                      <button
+                        @click="insertButtonScriptTemplate('calculation')"
+                        class="text-xs px-2 py-1 bg-blue-50 text-blue-700 border border-blue-200 rounded hover:bg-blue-100"
+                      >
+                        Insert Calculation Example
+                      </button>
+                      <button
+                        @click="insertButtonScriptTemplate('toggle')"
+                        class="text-xs px-2 py-1 bg-blue-50 text-blue-700 border border-blue-200 rounded hover:bg-blue-100"
+                      >
+                        Insert Toggle Fields Example
+                      </button>
+                    </div>
+                  </div>
                 </template>
 
                 <!-- Dynamic List Configuration -->
@@ -902,6 +996,7 @@
                         />
 
                         <FormKit
+                          v-if="configModel.showHeader"
                           type="select"
                           label="Header Size"
                           name="headerSize"
@@ -916,6 +1011,7 @@
                         />
 
                         <FormKit
+                          v-if="configModel.showHeader"
                           type="switch"
                           label="Collapsible"
                           name="collapsible"
@@ -925,13 +1021,22 @@
                         />
 
                         <FormKit
+                          v-if="configModel.showHeader && configModel.collapsible"
                           type="switch"
                           label="Start Collapsed"
                           name="collapsed"
                           v-model="configModel.collapsed"
                           help="Start with this section collapsed"
                           :classes="{ outer: 'field-wrapper' }"
-                          :disabled="!configModel.collapsible"
+                        />
+                        
+                        <FormKit
+                          type="switch"
+                          label="Show Placeholder"
+                          name="showPlaceholder"
+                          v-model="configModel.showPlaceholder"
+                          help="Show placeholder when empty in builder mode"
+                          :classes="{ outer: 'field-wrapper' }"
                         />
                       </div>
                     </div>
@@ -2162,6 +2267,80 @@ const handleReset = () => {
   }
 }
 
+// Button script template helper
+const insertButtonScriptTemplate = (templateType) => {
+  let template = '';
+  
+  switch (templateType) {
+    case 'validation':
+      template = `// Form validation example
+const name = getField('name');
+const email = getField('email');
+const phone = getField('phone');
+
+// Validate required fields
+if (!name || !email) {
+  showError('Please fill in all required fields');
+  return;
+}
+
+// Validate email format
+if (email && !email.includes('@')) {
+  showError('Please enter a valid email address');
+  return;
+}
+
+// Success message
+showSuccess('Form validation passed!');
+`;
+      break;
+    case 'calculation':
+      template = `// Calculation example
+const quantity = Number(getField('quantity') || 0);
+const price = Number(getField('price') || 0);
+const taxRate = 0.08; // 8% tax
+
+// Calculate subtotal
+const subtotal = quantity * price;
+setField('subtotal', subtotal.toFixed(2));
+
+// Calculate tax
+const tax = subtotal * taxRate;
+setField('tax', tax.toFixed(2));
+
+// Calculate total
+const total = subtotal + tax;
+setField('total', total.toFixed(2));
+
+showInfo('Calculation completed');
+`;
+      break;
+    case 'toggle':
+      template = `// Toggle fields visibility example
+const selectedOption = getField('options');
+
+// Hide all detail fields first
+hideField('details_option_1');
+hideField('details_option_2');
+hideField('details_option_3');
+
+// Show only the relevant detail field
+if (selectedOption === 'option_1') {
+  showField('details_option_1');
+} else if (selectedOption === 'option_2') {
+  showField('details_option_2');
+} else if (selectedOption === 'option_3') {
+  showField('details_option_3');
+}
+`;
+      break;
+    default:
+      return;
+  }
+  
+  configModel.value.onClick = template;
+};
+
 const handleClose = () => {
   isOpen.value = false
   emit('close')