field option, column range

weDevsOfficial · Feb 12, 2025 · 4e82c44 · 4e82c44
1 parent eada9c6
commit 4e82c44
Show file tree

Hide file tree

Showing 16 changed files with 174 additions and 73 deletions.
diff --git a/admin/form-builder/assets/js/components/field-option-data/template.php b/admin/form-builder/assets/js/components/field-option-data/template.php
@@ -1,7 +1,7 @@
 <div class="panel-field-opt panel-field-opt-text">
     <div class="wpuf-flex">
         <label
-            class="wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
+            class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
         <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
     </div>
     <div class="wpuf-mt-2 wpuf-flex">

diff --git a/admin/form-builder/assets/js/components/field-radio/template.php b/admin/form-builder/assets/js/components/field-radio/template.php
@@ -1,7 +1,7 @@
 <div v-if="met_dependencies" class="panel-field-opt panel-field-opt-radio">
     <div class="wpuf-flex">
         <label
-            class="wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
+            class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
         <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
     </div>
     <div

diff --git a/admin/form-builder/assets/js/components/field-range/template.php b/admin/form-builder/assets/js/components/field-range/template.php
@@ -2,11 +2,11 @@
     <label>
         {{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
         {{ option_field.min_column }}
-        <input
-            type="range"
-            v-model="value"
-            v-bind:min="minColumn"
-            v-bind:max="maxColumn"
-        >
     </label>
+    <input
+        type="range"
+        v-model="value"
+        v-bind:min="minColumn"
+        v-bind:max="maxColumn"
+    >
 </div>
diff --git a/admin/form-builder/assets/js/components/field-text-meta/template.php b/admin/form-builder/assets/js/components/field-text-meta/template.php
@@ -2,7 +2,7 @@
     <div class="wpuf-flex">
         <label
             :for="option_field.title"
-            class="wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
+            class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
         <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
     </div>
     <div class="wpuf-mt-2">

diff --git a/admin/form-builder/assets/js/components/field-text/template.php b/admin/form-builder/assets/js/components/field-text/template.php
@@ -2,7 +2,7 @@
     <div class="wpuf-flex">
         <label
             :for="option_field.name"
-            class="wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
+            class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
         <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
     </div>
     <div class="wpuf-mt-2">

diff --git a/admin/form-builder/assets/js/components/field-visibility/template.php b/admin/form-builder/assets/js/components/field-visibility/template.php
@@ -2,7 +2,7 @@
     <div class="wpuf-flex">
         <label
             v-if="option_field.title"
-            class="wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
+            class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
         <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
     </div>
 

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
@@ -55,15 +55,15 @@ class="panel-form-field-buttons wpuf-grid wpuf-grid-cols-1 wpuf-gap-4 sm:wpuf-gr
                             :data-form-field="field"
                             data-source="panel"
                             @click="alert_pro_feature(field)"
-                            class="wpuf-relative wpuf-flex wpuf-items-center wpuf-rounded-lg wpuf-border wpuf-border-gray-200 wpuf-bg-white wpuf-shadow-sm wpuf-p-3 hover:wpuf-border-gray-300 hover:wpuf-cursor-pointer">
+                            class="wpuf-opacity-50 wpuf-field-button wpuf-relative wpuf-flex wpuf-items-center wpuf-rounded-lg wpuf-border wpuf-border-gray-200 wpuf-bg-white wpuf-shadow-sm wpuf-p-3 hover:wpuf-border-gray-300 hover:wpuf-cursor-pointer">
                             <div
                                 v-if="field_settings[field].icon"
                                 class="wpuf-shrink-0 wpuf-mr-2 wpuf-text-gray-400">
                                 <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">
-                                    <p class="wpuf-text-sm wpuf-font-medium wpuf-text-gray-400 wpuf-m-0">{{ field_settings[field].title }}</p>
+                                    <p class="wpuf-text-sm wpuf-font-medium wpuf-text-gray-500 wpuf-m-0">{{ field_settings[field].title }}</p>
                                 </a>
                             </div>
                             <img src="<?php esc_attr_e( WPUF_ASSET_URI . '/images/crown.svg' ); ?>" alt="">
@@ -109,7 +109,7 @@ class="wpuf-shrink-0 wpuf-mr-2">
             </div>
         </template>
 
-        <div class="wpuf-mt-12 wpuf-p-6 wpuf-rounded-lg wpuf-shadow-md wpuf-text-center">
+        <div class="wpuf-mt-12 wpuf-p-6 wpuf-rounded-lg wpuf-shadow-md wpuf-text-center wpuf-border wpuf-border-gray-50">
             <h2 class="wpuf-text-slate-600 wpuf-text-xl wpuf-font-bold wpuf-mb-4">
                 <?php esc_html_e( 'Got an idea for a new field?', 'wp-user-frontend' ); ?>
             </h2>

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
@@ -1,8 +1,8 @@
-<div class="wpuf-fields">
+<div class="wpuf-fields wpuf-min-w-full">
     <div
         v-if="!field.divider || field.divider === 'regular'"
         class="wpuf-section-wrap">
-        <h2 class="wpuf-section-title wpuf-text-xs">{{ field.label }}</h2>
+        <h2 class="wpuf-section-title">{{ 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>

diff --git a/admin/form-builder/assets/less/form-builder.less b/admin/form-builder/assets/less/form-builder.less
@@ -796,7 +796,6 @@
         &.panel-field-opt-text {
 
             input[type="text"],
-            input[type="range"],
             input[type="number"] {
                 display: block;
                 width: 100%;

diff --git a/admin/form-builder/views/form-builder-v4.1.php b/admin/form-builder/views/form-builder-v4.1.php
@@ -101,7 +101,7 @@ class="wpuf-inline-flex wpuf-items-center wpuf-gap-x-2 wpuf-rounded-md wpuf-px-3
                         type="button"
                         :disabled="is_form_saving"
                         :class="is_form_saving ? 'wpuf-cursor-wait' : 'wpuf-cursor-pointer'"
-                        class="wpuf-btn-primary"><?php esc_html_e( 'Save Form', 'wp-user-frontend' ); ?></button>
+                        class="wpuf-btn-primary"><?php esc_html_e( 'Save', 'wp-user-frontend' ); ?></button>
                     <button v-else type="button" class="button button-primary button-ajax-working" disabled>
                         <span class="loader"></span> <?php esc_html_e( 'Saving Form Data', 'wp-user-frontend' ); ?>
                     </button>
@@ -135,7 +135,7 @@ class="wpuf-flex wpuf-bg-white wpuf-pb-16 wpuf-w-[calc(100%-30px)]">
         <div class="wpuf-w-2/3 wpuf-min-h-screen wpuf-max-h-screen wpuf-px-[20px] wpuf-pt-4 wpuf-border-t wpuf-border-gray-200 wpuf-overflow-auto">
             <builder-stage-v4-1></builder-stage-v4-1>
         </div>
-        <div class="wpuf-w-1/3 wpuf-max-h-screen wpuf-overflow-auto wpuf-rounded-r-lg wpuf-border wpuf-border-gray-200">
+        <div class="wpuf-w-1/3 wpuf-max-h-screen wpuf-overflow-auto wpuf-rounded-tr-lg wpuf-border wpuf-border-b-0 wpuf-border-gray-200">
             <div class="wpuf-p-6 wpuf-pb-0">
                 <div role="tablist" class="wpuf-tabs wpuf-tabs-boxed wpuf-text-gray-500 wpuf-rounded-xl wpuf-px-3 wpuf-py-2 wpuf-text-sm wpuf-font-medium wpuf-bg-gray-100">
                     <a

diff --git a/assets/css/admin/form-builder.css b/assets/css/admin/form-builder.css
@@ -2292,10 +2292,11 @@ input.wpuf-tab:checked + .wpuf-tab-content,
 }
 
 .panel-field-opt {
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
 }
 
 .panel-field-opt label {
+  margin-bottom: 0.75rem;
   display: flex;
   align-items: center;
 }
@@ -3278,11 +3279,6 @@ input.wpuf-tab:checked + .wpuf-tab-content,
   border-bottom-left-radius: 0.375rem;
 }
 
-.wpuf-rounded-r-lg {
-  border-top-right-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-}
-
 .wpuf-rounded-r-md {
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
@@ -3308,6 +3304,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
   border-top-right-radius: 0.75rem;
 }
 
+.wpuf-rounded-tr-lg {
+  border-top-right-radius: 0.5rem;
+}
+
 .\!wpuf-border {
   border-width: 1px !important;
 }
@@ -3332,6 +3332,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
   border-bottom-width: 1px;
 }
 
+.wpuf-border-b-0 {
+  border-bottom-width: 0px;
+}
+
 .wpuf-border-b-2 {
   border-bottom-width: 2px;
 }
@@ -3413,6 +3417,11 @@ input.wpuf-tab:checked + .wpuf-tab-content,
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
 
+.wpuf-border-gray-50 {
+  --tw-border-opacity: 1;
+  border-color: rgb(249 250 251 / var(--tw-border-opacity));
+}
+
 .wpuf-border-green-200 {
   --tw-border-opacity: 1;
   border-color: rgb(187 247 208 / var(--tw-border-opacity));
@@ -4123,6 +4132,10 @@ input.wpuf-tab:checked + .wpuf-tab-content,
   opacity: 1;
 }
 
+.wpuf-opacity-50 {
+  opacity: 0.5;
+}
+
 .\!wpuf-shadow-none {
   --tw-shadow: 0 0 #0000 !important;
   --tw-shadow-colored: 0 0 #0000 !important;
@@ -4465,6 +4478,46 @@ body ul.wpuf-form li .wpuf-fields {
   display: none;
 }
 
+input[type="range"] {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 5px;
+  background: green;
+  outline: none;
+  transition: background 0.3s;
+  border-radius: 10px
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  background: green;
+  cursor: pointer;
+  border-radius: 10px;
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  background: green;
+  cursor: pointer;
+  border-radius: 10px;
+}
+
+input[type="range"]:hover,
+input[type="range"]:active {
+  background: green;
+}
+
+input[type="range"]::-webkit-slider-thumb:hover,
+input[type="range"]::-webkit-slider-thumb:active,
+input[type="range"]::-moz-range-thumb:hover,
+input[type="range"]::-moz-range-thumb:active {
+  background: green;
+}
+
 .placeholder\:wpuf-text-gray-400::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));

diff --git a/assets/css/wpuf-form-builder.css b/assets/css/wpuf-form-builder.css
@@ -626,7 +626,6 @@
   margin-left: 6px;
 }
 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="text"],
-.wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="range"],
 .wpuf-form-builder-field-options .panel-field-opt.panel-field-opt-text input[type="number"] {
   display: block;
   width: 100%;

diff --git a/assets/js-templates/form-components.php b/assets/js-templates/form-components.php
@@ -297,7 +297,7 @@ class="checked:wpuf-bg-primary"
 <div class="panel-field-opt panel-field-opt-text">
     <div class="wpuf-flex">
         <label
-            class="wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
+            class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
         <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
     </div>
     <div class="wpuf-mt-2 wpuf-flex">
@@ -485,7 +485,7 @@ class="wpuf-flex wpuf-mt-0 wpuf-mb-6 wpuf-justify-between hover:wpuf-cursor-poin
 <div v-if="met_dependencies" class="panel-field-opt panel-field-opt-radio">
     <div class="wpuf-flex">
         <label
-            class="wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
+            class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
         <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
     </div>
     <div
@@ -529,13 +529,13 @@ class="checked:!wpuf-bg-primary checked:before:!wpuf-bg-transparent">
     <label>
         {{ option_field.title }} <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
         {{ option_field.min_column }}
-        <input
-            type="range"
-            v-model="value"
-            v-bind:min="minColumn"
-            v-bind:max="maxColumn"
-        >
     </label>
+    <input
+        type="range"
+        v-model="value"
+        v-bind:min="minColumn"
+        v-bind:max="maxColumn"
+    >
 </div>
 </script>
 
@@ -577,7 +577,7 @@ class="wpuf-text-sm wpuf-color-gray-900 wpuf-py-2 wpuf-px-4 hover:wpuf-cursor-po
     <div class="wpuf-flex">
         <label
             :for="option_field.name"
-            class="wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
+            class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
         <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
     </div>
     <div class="wpuf-mt-2">
@@ -605,7 +605,7 @@ class="wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
     <div class="wpuf-flex">
         <label
             :for="option_field.title"
-            class="wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
+            class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
         <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
     </div>
     <div class="wpuf-mt-2">
@@ -631,7 +631,7 @@ class="wpuf-block wpuf-min-w-full wpuf-rounded-md wpuf-py-1.5 wpuf-text-gray-900
     <div class="wpuf-flex">
         <label
             v-if="option_field.title"
-            class="wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
+            class="wpuf-option-field-title wpuf-font-sm wpuf-text-gray-900">{{ option_field.title }}</label>
         <help-text v-if="option_field.help_text" :text="option_field.help_text"></help-text>
     </div>
 
@@ -1075,15 +1075,15 @@ class="panel-form-field-buttons wpuf-grid wpuf-grid-cols-1 wpuf-gap-4 sm:wpuf-gr
                             :data-form-field="field"
                             data-source="panel"
                             @click="alert_pro_feature(field)"
-                            class="wpuf-relative wpuf-flex wpuf-items-center wpuf-rounded-lg wpuf-border wpuf-border-gray-200 wpuf-bg-white wpuf-shadow-sm wpuf-p-3 hover:wpuf-border-gray-300 hover:wpuf-cursor-pointer">
+                            class="wpuf-opacity-50 wpuf-field-button wpuf-relative wpuf-flex wpuf-items-center wpuf-rounded-lg wpuf-border wpuf-border-gray-200 wpuf-bg-white wpuf-shadow-sm wpuf-p-3 hover:wpuf-border-gray-300 hover:wpuf-cursor-pointer">
                             <div
                                 v-if="field_settings[field].icon"
                                 class="wpuf-shrink-0 wpuf-mr-2 wpuf-text-gray-400">
                                 <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">
-                                    <p class="wpuf-text-sm wpuf-font-medium wpuf-text-gray-400 wpuf-m-0">{{ field_settings[field].title }}</p>
+                                    <p class="wpuf-text-sm wpuf-font-medium wpuf-text-gray-500 wpuf-m-0">{{ field_settings[field].title }}</p>
                                 </a>
                             </div>
                             <img src="<?php esc_attr_e( WPUF_ASSET_URI . '/images/crown.svg' ); ?>" alt="">
@@ -1129,7 +1129,7 @@ class="wpuf-shrink-0 wpuf-mr-2">
             </div>
         </template>
 
-        <div class="wpuf-mt-12 wpuf-p-6 wpuf-rounded-lg wpuf-shadow-md wpuf-text-center">
+        <div class="wpuf-mt-12 wpuf-p-6 wpuf-rounded-lg wpuf-shadow-md wpuf-text-center wpuf-border wpuf-border-gray-50">
             <h2 class="wpuf-text-slate-600 wpuf-text-xl wpuf-font-bold wpuf-mb-4">
                 <?php esc_html_e( 'Got an idea for a new field?', 'wp-user-frontend' ); ?>
             </h2>
@@ -1321,11 +1321,11 @@ class="wpuf-ml-3 wpuf-block wpuf-text-sm wpuf-font-medium wpuf-leading-6 wpuf-te
 </script>
 
 <script type="text/x-template" id="tmpl-wpuf-form-section_break">
-<div class="wpuf-fields">
+<div class="wpuf-fields wpuf-min-w-full">
     <div
         v-if="!field.divider || field.divider === 'regular'"
         class="wpuf-section-wrap">
-        <h2 class="wpuf-section-title wpuf-text-xs">{{ field.label }}</h2>
+        <h2 class="wpuf-section-title">{{ 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>