pro field supports

weDevsOfficial · Jan 6, 2025 · 4b65706 · 4b65706
1 parent 579dba6
commit 4b65706
Show file tree

Hide file tree

Showing 22 changed files with 325 additions and 229 deletions.
diff --git a/admin/form-builder/assets/js/components/builder-stage-v4-1/index.js b/admin/form-builder/assets/js/components/builder-stage-v4-1/index.js
@@ -35,7 +35,7 @@ Vue.component('builder-stage-v4-1', {
         $('#form-preview-stage .wpuf-form.sortable-list').sortable({
             placeholder: 'form-preview-stage-dropzone',
             items: '.field-items',
-            handle: '.control-buttons .move',
+            handle: '.field-buttons .move',
             scroll: true,
             over: function() {
                 in_column_field = false;
@@ -142,7 +142,7 @@ Vue.component('builder-stage-v4-1', {
         },
 
         is_pro_feature: function (template) {
-            return (this.field_settings[template] && this.field_settings[template].pro_feature) ? true : false;
+            return ( this.field_settings[template] && this.field_settings[template].pro_feature ) ? true : false;
         },
 
         is_template_available: function (field) {

diff --git a/admin/form-builder/assets/js/components/builder-stage-v4-1/template.php b/admin/form-builder/assets/js/components/builder-stage-v4-1/template.php
@@ -18,7 +18,7 @@ class="wpuf-form sortable-list wpuf-py-8">
                         field.width ? 'field-size-' + field.width : '',
                         ('custom_hidden_field' === field.template) ? 'hidden-field' : ''
                     ]"
-            class="wpuf-group wpuf-rounded-lg hover:wpuf-bg-green-50 wpuf-transition wpuf-duration-150 wpuf-ease-out !wpuf-m-0 !wpuf-p-0">
+            class="wpuf-group wpuf-rounded-lg hover:!wpuf-bg-green-50 wpuf-transition wpuf-duration-150 wpuf-ease-out !wpuf-m-0 !wpuf-p-0">
             <div
                 v-if="field.input_type !== 'column_field'"
                 :class="parseInt(editing_form_id) === parseInt(field.id) ? 'wpuf-bg-green-50 wpuf-border-green-400' : 'wpuf-border-transparent'"
@@ -57,7 +57,7 @@ class="wpuf-text-gray-700 wpuf-text-base"><strong>{{ get_field_name( field.templ
             </component>
             <div
                 :class="parseInt(editing_form_id) === parseInt(field.id) ? 'wpuf-opacity-100' : 'wpuf-opacity-0'"
-                class="control-buttons group-hover:wpuf-opacity-100 wpuf-rounded-b-lg !wpuf-bg-green-600 wpuf-flex wpuf-items-center wpuf-transition wpuf-duration-150 wpuf-ease-out wpuf-flex wpuf-justify-around">
+                class="field-buttons group-hover:wpuf-opacity-100 wpuf-rounded-b-lg !wpuf-bg-green-600 wpuf-flex wpuf-items-center wpuf-transition wpuf-duration-150 wpuf-ease-out wpuf-flex wpuf-justify-around">
                 <div class="wpuf-flex wpuf-justify-around wpuf-text-green-200">
                     <template v-if="!is_failed_to_validate(field.template)">
                             <span :class="action_button_classes">
@@ -127,7 +127,7 @@ class="wpuf-rounded-r-md hover:wpuf-bg-slate-500 hover:wpuf-cursor-pointer wpuf-
         <ul class="wpuf-form">
             <li
                 v-for="(field, index) in hidden_fields"
-                class="field-items wpuf-group hover:wpuf-bg-green-50 !wpuf-m-0 !wpuf-p-0"
+                class="field-items wpuf-group hover:!wpuf-bg-green-50 !wpuf-m-0 !wpuf-p-0"
             >
                 <div
                     :class="parseInt(editing_form_id) === parseInt(field.id) ? 'wpuf-border wpuf-border-dashed wpuf-bg-green-50 wpuf-border-green-400' : 'wpuf-border-transparent'"

diff --git a/admin/form-builder/assets/js/components/builder-stage/index.js b/admin/form-builder/assets/js/components/builder-stage/index.js
@@ -35,7 +35,7 @@ Vue.component('builder-stage', {
         $('#form-preview-stage .wpuf-form.sortable-list').sortable({
             placeholder: 'form-preview-stage-dropzone',
             items: '.field-items',
-            handle: '.control-buttons .move',
+            handle: '.field-buttons .move',
             scroll: true,
             over: function() {
                 in_column_field = false;

diff --git a/admin/form-builder/assets/js/components/form-dropdown_field/template.php b/admin/form-builder/assets/js/components/form-dropdown_field/template.php
@@ -1,7 +1,6 @@
 <div class="wpuf-fields">
     <select
-        :class="class_names('select_lbl')"
-        class="wpuf-block wpuf-w-full wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm   placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300">
+        :class="builder_class_names('dropdown')">
         <option v-if="field.first" value="">{{ field.first }}</option>
         <option
             v-if="has_options"

diff --git a/admin/form-builder/assets/js/components/form-fields-v4-1/index.js b/admin/form-builder/assets/js/components/form-fields-v4-1/index.js
@@ -9,7 +9,7 @@ Vue.component('form-fields-v4-1', {
     data: function () {
         return {
             searched_fields: '',
-            asset_url: wpuf_form_builder.asset_url,
+            is_pro_active: wpuf_form_builder.is_pro_active,
         };
     },
 
@@ -24,7 +24,7 @@ Vue.component('form-fields-v4-1', {
 
         form_fields: function () {
             return this.$store.state.form_fields;
-        }
+        },
     },
 
     mounted: function () {
@@ -98,7 +98,27 @@ Vue.component('form-fields-v4-1', {
 
         set_default_panel_sections: function () {
             this.$store.commit('set_default_panel_sections', this.panel_sections);
-        }
+        },
+
+        get_icon_url: function (field) {
+            if (!this.field_settings[field].icon) {
+                return '';
+            }
+
+            console.log(this.field_settings[field].pro_feature);
+
+            if (this.is_pro_active === '1' && this.field_settings[field].pro_feature) {
+                return wpuf_form_builder.pro_asset_url + '/images/' + this.field_settings[field].icon + '.svg';
+            } else {
+                return wpuf_form_builder.asset_url + '/images/' + this.field_settings[field].icon + '.svg';
+            }
+        },
+
+        is_pro_preview: function (template) {
+            var is_pro_active = wpuf_form_builder.is_pro_active === '1';
+
+            return (!is_pro_active && this.field_settings[template] && this.field_settings[template].pro_feature);
+        },
     },
 
     watch: {

diff --git a/admin/form-builder/assets/js/components/form-fields-v4-1/template.php b/admin/form-builder/assets/js/components/form-fields-v4-1/template.php
@@ -32,7 +32,7 @@ class="wpuf-size-5 hover:wpuf-cursor-pointer wpuf-transition-all">
             </span>
         </div>
     </div>
-    <div class="wpuf-form-builder-form-fields">
+    <div class="wpuf-form-builder-form-fields wpuf-mt-4">
         <template
             v-for="(section, index) in panel_sections">
             <div v-if="section.fields.length" class="panel-form-field-group clearfix">
@@ -50,7 +50,7 @@ class="wpuf-flex wpuf-justify-between hover:wpuf-cursor-pointer wpuf-text-sm wpu
                     class="panel-form-field-buttons wpuf-grid wpuf-grid-cols-1 wpuf-gap-4 sm:wpuf-grid-cols-2">
                     <template v-for="field in section.fields">
                         <div
-                            v-if="is_pro_feature(field)"
+                            v-if="is_pro_preview(field)"
                             :key="field"
                             :data-form-field="field"
                             data-source="panel"
@@ -59,7 +59,7 @@ class="wpuf-relative wpuf-flex wpuf-items-center wpuf-rounded-lg wpuf-border wpu
                             <div
                                 v-if="field_settings[field].icon"
                                 class="wpuf-shrink-0 wpuf-mr-2 wpuf-text-gray-400">
-                                <img :src="asset_url + '/images/' + field_settings[field].icon + '.svg'" alt="">
+                                <img :src="get_icon_url(field)" alt="">
                             </div>
                             <div class="wpuf-min-w-0 wpuf-flex-1">
                                 <a href="#" class="focus:wpuf-outline-none focus:wpuf-shadow-none">
@@ -78,7 +78,7 @@ class="wpuf-relative wpuf-flex wpuf-items-center wpuf-rounded-lg wpuf-border wpu
                             <div
                                 v-if="field_settings[field].icon"
                                 class="wpuf-shrink-0 wpuf-mr-2">
-                                <img :src="asset_url + '/images/' + field_settings[field].icon + '.svg'" alt="">
+                                <img :src="get_icon_url(field)" alt="">
                             </div>
                             <div class="wpuf-min-w-0 wpuf-flex-1">
                                 <a href="#" class="focus:wpuf-outline-none focus:wpuf-shadow-none">
@@ -96,7 +96,7 @@ class="wpuf-field-button wpuf-relative wpuf-flex wpuf-items-center wpuf-rounded-
                             <div
                                 v-if="field_settings[field].icon"
                                 class="wpuf-shrink-0 wpuf-mr-2">
-                                <img :src="asset_url + '/images/' + field_settings[field].icon + '.svg'" alt="">
+                                <img :src="get_icon_url(field)" alt="">
                             </div>
                             <div class="wpuf-min-w-0 wpuf-flex-1">
                                 <a href="#" class="focus:wpuf-outline-none focus:wpuf-shadow-none">

diff --git a/admin/form-builder/assets/js/components/form-section_break/template.php b/admin/form-builder/assets/js/components/form-section_break/template.php
@@ -2,8 +2,8 @@
     <div
         v-if="!field.divider || field.divider === 'regular'"
         class="wpuf-section-wrap">
-        <h2 class="wpuf-section-title">{{ field.label }}</h2>
-        <div class="wpuf-section-details">{{ field.description }}</div>
+        <h2 class="wpuf-section-title wpuf-text-xs">{{ field.label }}</h2>
+        <div class="wpuf-section-details wpuf-text-sm wpuf-text-gray-500">{{ field.description }}</div>
         <div class="wpuf-border wpuf-border-gray-200 wpuf-h-0 wpuf-w-full"></div>
     </div>
     <div

diff --git a/admin/form-builder/assets/js/form-builder.js b/admin/form-builder/assets/js/form-builder.js
@@ -587,6 +587,9 @@
 
             // set current sidebar panel
             set_current_panel: function (panel) {
+                if (panel === 'form-fields-v4-1') {
+                    this.$store.state.panel_sections = wpuf_form_builder.panel_sections;
+                }
                 this.$store.commit('set_current_panel', panel);
             },
 
@@ -972,7 +975,7 @@
     });
 
     // Mobile view menu toggle
-    $('#wpuf-form-builder').on('click', '#wpuf-toggle-field-options, #wpuf-toggle-show-form, .control-buttons .fa-pencil, .ui-draggable-handle', function() {
+    $('#wpuf-form-builder').on('click', '#wpuf-toggle-field-options, #wpuf-toggle-show-form, .field-buttons .fa-pencil, .ui-draggable-handle', function() {
         $('#wpuf-toggle-field-options').toggleClass('hide');
         $('#wpuf-toggle-show-form').toggleClass('show');
         $('#builder-form-fields').toggleClass('show');

diff --git a/admin/form-builder/assets/js/mixins/form-field.js b/admin/form-builder/assets/js/mixins/form-field.js
@@ -37,17 +37,6 @@ wpuf_mixins.form_field_mixin = {
             var commonClasses = '';
 
             switch (type_class) {
-                case 'text':
-                case 'textfield':
-                case 'number':
-                case 'url':
-                case 'email':
-                case 'textarea':
-                case 'textareafield':
-                case 'select':
-                    commonClasses = 'wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full';
-                    break;
-
                 case 'upload_btn':
                     commonClasses = 'file-selector  wpuf-rounded-md wpuf-btn-secondary';
                     break;
@@ -56,9 +45,16 @@ wpuf_mixins.form_field_mixin = {
                     commonClasses = 'wpuf-ml-3 wpuf-block wpuf-text-sm wpuf-font-medium wpuf-leading-6 wpuf-text-gray-900';
                     break;
 
-                    case 'checkbox':
+                case 'checkbox':
                     commonClasses = 'wpuf-h-4 wpuf-w-4 wpuf-rounded wpuf-border-gray-300 !wpuf-mt-0.5 checked:focus:wpuf-bg-primary checked:hover:wpuf-bg-primary checked:wpuf-bg-primary before:!wpuf-content-none';
                     break;
+
+                case 'dropdown':
+                    commonClasses = 'wpuf-block wpuf-w-full wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm   placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300';
+                    break;
+
+                default:
+                    commonClasses = 'wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900 !wpuf-shadow-sm placeholder:wpuf-text-gray-400 sm:wpuf-text-sm sm:wpuf-leading-6 wpuf-border !wpuf-border-gray-300 wpuf-max-w-full';
             }
 
             return [

diff --git a/admin/form-builder/assets/less/form-builder.less b/admin/form-builder/assets/less/form-builder.less
@@ -674,8 +674,8 @@
     }
 
     .form-preview-stage-dropzone {
-        background-color: fade(@wpYellow, 30%) !important;
-        border: 1px solid @wpYellow;
+        background-color: #f0fdf4;
+        border: 1px solid #4ade80;
         height: 50px;
     }
 

diff --git a/admin/form-builder/views/form-builder-v4.1.php b/admin/form-builder/views/form-builder-v4.1.php
@@ -1,5 +1,5 @@
 <form id="wpuf-form-builder"
-    class="wpuf-bg-white wpuf-w-[calc(100%+20px)] wpuf-ml-[-20px] wpuf-form-builder-<?php echo esc_attr( $form_type ); ?>"
+    class="!wpuf-bg-white !wpuf-static !wpuf-w-[calc(100%+20px)] wpuf-ml-[-20px] !wpuf-p-0 wpuf-form-builder-<?php echo esc_attr( $form_type ); ?>"
     method="post"
     action="" @submit.prevent="save_form_builder" v-cloak>
     <div class="wpuf-bg-white wpuf-px-[20px] wpuf-pt-8 wpuf-justify-between wpuf-items-center wpuf-pb-4">

diff --git a/assets/css/admin/form-builder.css b/assets/css/admin/form-builder.css
@@ -2222,6 +2222,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
   pointer-events: none;
 }
 
+.\!wpuf-static {
+  position: static !important;
+}
+
 .wpuf-fixed {
   position: fixed;
 }
@@ -2691,6 +2695,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
   min-height: 100vh;
 }
 
+.\!wpuf-w-\[calc\(100\%\+20px\)\] {
+  width: calc(100% + 20px) !important;
+}
+
 .wpuf-w-1\/2 {
   width: 50%;
 }
@@ -3289,6 +3297,11 @@ input.wpuf-tab:checked + .wpuf-tab-content,
   background-color: rgb(22 163 74 / var(--tw-bg-opacity)) !important;
 }
 
+.\!wpuf-bg-white {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
+}
+
 .wpuf-bg-amber-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(245 158 11 / var(--tw-bg-opacity));
@@ -4301,6 +4314,11 @@ ul.wpuf-form li.field-size-medium .wpuf-fields {
   border-color: rgb(185 28 28 / var(--tw-border-opacity));
 }
 
+.hover\:\!wpuf-bg-green-50:hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity)) !important;
+}
+
 .hover\:wpuf-bg-amber-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(217 119 6 / var(--tw-bg-opacity));

diff --git a/assets/css/wpuf-form-builder.css b/assets/css/wpuf-form-builder.css
@@ -537,8 +537,8 @@
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
 #form-preview-stage .form-preview-stage-dropzone {
-  background-color: rgba(255, 185, 0, 0.3) !important;
-  border: 1px solid #ffb900;
+  background-color: #f0fdf4;
+  border: 1px solid #4ade80;
   height: 50px;
 }
 #form-preview-stage .wpuf-submit + .button + .form-preview-stage-dropzone,

diff --git a/assets/images/minus-circle-green.svg b/assets/images/minus-circle-green.svg
diff --git a/assets/images/plus-circle-green.svg b/assets/images/plus-circle-green.svg