Skip to content

enhance: row population option for repeat field #1696

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

enhance: row population option for repeat field #1696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5bcd544
fix radio field templates and update table styles
sapayth Sep 4, 2025
0f83248
Improve repeat field button logic
sapayth Sep 5, 2025
d5a9268
cleanup
sapayth Sep 5, 2025
504a0ac
Merge remote-tracking branch 'upstream/develop' into enhance/row_popu…
sapayth Nov 18, 2025
43976c4
Merge remote-tracking branch 'upstream/develop' into enhance/row_popu…
sapayth Dec 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions admin/form-builder/assets/js/components/field-radio/template.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ class="wpuf-items-center">
class="wpuf-block text-sm/6 wpuf-font-medium wpuf-text-gray-900 !wpuf-mb-0">
<input
type="radio"
:name="'radio_' + editing_form_field.id + '_' + option_field.name"
:value="key"
v-model="value"
:class="builder_class_names('radio')">
Expand All @@ -31,7 +30,6 @@ class="wpuf-flex wpuf-items-center"
<label class="!wpuf-mb-0">
<input
type="radio"
:name="'radio_' + editing_form_field.id + '_' + option_field.name"
:value="key"
v-model="value"
:class="builder_class_names('radio')">
Expand Down
58 changes: 58 additions & 0 deletions assets/css/admin/form-builder.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2073,6 +2073,44 @@ input.wpuf-tab:checked + .wpuf-tab-content,
background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
}

.wpuf-table {
position: relative;
width: 100%;
border-radius: var(--rounded-box, 1rem);
text-align: left;
font-size: 0.875rem;
line-height: 1.25rem;
}

.wpuf-table :where(.wpuf-table-pin-rows thead tr) {
position: sticky;
top: 0px;
z-index: 1;
--tw-bg-opacity: 1;
background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.wpuf-table :where(.wpuf-table-pin-rows tfoot tr) {
position: sticky;
bottom: 0px;
z-index: 1;
--tw-bg-opacity: 1;
background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.wpuf-table :where(.wpuf-table-pin-cols tr th) {
position: sticky;
left: 0px;
right: 0px;
--tw-bg-opacity: 1;
background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
}

.wpuf-table-zebra tbody tr:nth-child(even) :where(.wpuf-table-pin-cols tr th) {
--tw-bg-opacity: 1;
background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
}
Comment on lines +2076 to +2112
Copy link

@coderabbitai coderabbitai bot Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Duplicate CSS rule blocks increase file size and suggest build/merge issue.

Lines 2076–2112 exactly duplicate the .wpuf-table module defined at lines 2038–2074. Similarly, lines 3005–3023 duplicate table border and header styles from lines 2981–2999. These redundant blocks should be removed.

Remove the duplicate blocks at lines 2076–2112 and 3005–3023. If duplication is intentional for build tooling, document the reason with a comment.

Also applies to: 3005-3023

🤖 Prompt for AI Agents 
In assets/css/admin/form-builder.css around lines 2076–2112 (and also lines
3005–3023), there are exact duplicate .wpuf-table and related rule blocks that
increase file size and likely indicate a build/merge issue; remove the redundant
duplicate blocks at 2076–2112 and 3005–3023 so each rule is defined only once,
and if duplication is intentional for tooling reasons add a brief comment above
the retained block explaining why it must be duplicated and reference the build
step.


.wpuf-toast {
position: fixed;
display: flex;
Expand Down Expand Up @@ -2964,6 +3002,26 @@ input.wpuf-tab:checked + .wpuf-tab-content,
animation: toast-pop 0.25s ease-out;
}

.wpuf-table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
}

.wpuf-table :where(thead, tfoot) {
white-space: nowrap;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
color: var(--fallback-bc,oklch(var(--bc)/0.6));
}

.wpuf-table :where(tfoot) {
border-top-width: 1px;
--tw-border-opacity: 1;
border-top-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
}

@keyframes toast-pop {
0% {
transform: scale(0.9);
Expand Down
14 changes: 6 additions & 8 deletions assets/js-templates/form-components.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@
data-source="stage"
>
<div v-if="!is_full_width(field.template)" class="wpuf-label">
<span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'left_label'"
<span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'left_label'"
class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-mr-1">
<i :class="[field.field_icon, 'wpuf-field-icon']"></i>
</span>
<label v-if="!is_invisible(field)" :for="'wpuf-' + field.name ? field.name : 'cls'">
{{ field.label }} <span v-if="field.required && 'yes' === field.required" class="required">*</span>
</label>
<span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'right_label'"
<span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'right_label'"
class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-ml-2">
<i :class="[field.field_icon, 'wpuf-field-icon']"></i>
</span>
Expand Down Expand Up @@ -117,7 +117,7 @@ class="wpuf-group wpuf-rounded-lg hover:!wpuf-bg-green-50 wpuf-transition wpuf-d
:class="parseInt(editing_form_id) === parseInt(field.id) ? 'wpuf-bg-green-50 wpuf-border-green-400' : 'wpuf-border-transparent'"
class="wpuf-flex wpuf-justify-between wpuf-p-6 wpuf-rounded-t-md wpuf-border-t wpuf-border-r wpuf-border-l wpuf-border-dashed group-hover:wpuf-border-green-400 group-hover:wpuf-cursor-pointer !wpuf-pb-3">
<div v-if="!(is_full_width(field.template) || is_pro_preview(field.template))" class="wpuf-w-1/4 wpuf-flex wpuf-items-center">
<span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'left_label'"
<span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'left_label'"
class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-mr-1">
<i :class="[field.field_icon, 'wpuf-field-icon']"></i>
</span>
Expand All @@ -128,7 +128,7 @@ class="wpuf-block wpuf-text-sm wpuf-font-medium wpuf-leading-6 wpuf-text-gray-90
{{ field.label }} <span v-if="field.required && 'yes' === field.required"
class="required">*</span>
</label>
<span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'right_label'"
<span v-if="field.show_icon === 'yes' && field.field_icon && field.icon_position === 'right_label'"
class="wpuf-field-label-icon wpuf-inline-flex wpuf-items-center wpuf-ml-2">
<i :class="[field.field_icon, 'wpuf-field-icon']"></i>
</span>
Expand Down Expand Up @@ -322,9 +322,9 @@ class="wpuf-absolute wpuf-bg-white wpuf-border wpuf-border-gray-300 wpuf-rounded
>
<!-- Search -->
<div class="wpuf-p-3 wpuf-border-b wpuf-border-gray-200">
<input
<input
v-model="searchTerm"
type="text"
type="text"
placeholder="Search icons... (e.g., user, email, home)"
class="wpuf-w-full !wpuf-px-4 !wpuf-py-1.5 wpuf-border wpuf-border-gray-300 wpuf-rounded wpuf-text-sm wpuf-text-gray-900 placeholder:wpuf-text-gray-400 wpuf-shadow focus:!wpuf-shadow-none"
>
Expand Down Expand Up @@ -583,7 +583,6 @@ class="wpuf-items-center">
class="wpuf-block text-sm/6 wpuf-font-medium wpuf-text-gray-900 !wpuf-mb-0">
<input
type="radio"
:name="'radio_' + editing_form_field.id + '_' + option_field.name"
:value="key"
v-model="value"
:class="builder_class_names('radio')">
Expand All @@ -599,7 +598,6 @@ class="wpuf-flex wpuf-items-center"
<label class="!wpuf-mb-0">
<input
type="radio"
:name="'radio_' + editing_form_field.id + '_' + option_field.name"
:value="key"
v-model="value"
:class="builder_class_names('radio')">
Expand Down
131 changes: 116 additions & 15 deletions includes/Admin/Posting.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,23 +145,23 @@ public function enqueue_script() {
] );

// Enqueue field initialization script for admin metabox

// Enqueue Selectize for country fields
wp_enqueue_style( 'wpuf-selectize' );
wp_enqueue_script( 'wpuf-selectize' );

// Enqueue international telephone input for phone fields
wp_enqueue_style( 'wpuf-intlTelInput' );
wp_enqueue_script( 'wpuf-intlTelInput' );

// Try to load the field initialization script using the registered handle
wp_enqueue_script( 'wpuf-field-initialization' );

// Localize script with asset URI
wp_localize_script( 'wpuf-field-initialization', 'wpuf_field_initializer', [
'asset_uri' => defined( 'WPUF_PRO_ASSET_URI' ) ? WPUF_PRO_ASSET_URI : '',
] );


}

Expand Down Expand Up @@ -461,6 +461,7 @@ public function render_form( $form_id, $post_id = null ) {
if ( typeof wpuf_map_items === 'undefined' ) {
wpuf_map_items = [];
}

</script>

<?php
Expand Down Expand Up @@ -560,14 +561,19 @@ public function scripts_styles() {
var fieldName = $container.data('field-name');
var maxRepeats = parseInt($container.data('max-repeats')) || -1;


wpuf.updateRepeatButtons($container);

$container.on('click', '.wpuf-add-repeat', function() {
var $instance = $(this).closest('.wpuf-repeat-instance');
var instanceIndex = $instance.attr('data-instance');
wpuf.addRepeatInstance($container, fieldName, maxRepeats);
});

$container.on('click', '.wpuf-remove-repeat', function() {
wpuf.removeRepeatInstance($(this).closest('.wpuf-repeat-instance'), $container);
var $instance = $(this).closest('.wpuf-repeat-instance');
var instanceIndex = $instance.attr('data-instance');
wpuf.removeRepeatInstance($instance, $container);
});
});
},
Expand All @@ -576,6 +582,7 @@ public function scripts_styles() {
var $instances = $container.find('.wpuf-repeat-instance');
var currentInstances = $instances.length;


if (maxRepeats !== -1 && currentInstances >= maxRepeats) {
return;
}
Expand Down Expand Up @@ -623,14 +630,27 @@ public function scripts_styles() {
wpuf.reindexInstances($container, fieldName);
wpuf.updateRepeatButtons($container);

// Set up MutationObserver for new buttons
if (window.MutationObserver && typeof observer !== 'undefined') {
$newInstance.find('.wpuf-add-repeat, .wpuf-remove-repeat').each(function() {
observer.observe(this, { attributes: true, attributeFilter: ['style', 'class'] });
});
}

// Initialize fields in the new instance
if (typeof WPUF_Field_Initializer !== 'undefined') {
WPUF_Field_Initializer.init();

// Re-apply button visibility after field initializer runs on new instance
setTimeout(function() {
wpuf.updateRepeatButtons($container);
}, 100);
}
},

removeRepeatInstance: function($instance, $container) {
var fieldName = $container.data('field-name');
var instanceIndex = $instance.attr('data-instance');
$instance.remove();
wpuf.reindexInstances($container, fieldName);
wpuf.updateRepeatButtons($container);
Expand All @@ -639,6 +659,7 @@ public function scripts_styles() {
reindexInstances: function($container, fieldName) {
$container.find('.wpuf-repeat-instance').each(function(index) {
var $instance = $(this);
var oldIndex = $instance.attr('data-instance');
$instance.attr('data-instance', index);

$instance.find('[name], [id], [for]').each(function() {
Expand Down Expand Up @@ -669,29 +690,109 @@ public function scripts_styles() {
var $instances = $container.find('.wpuf-repeat-instance');
var count = $instances.length;


// Prevent rapid successive calls
if ($container.data('updating-buttons')) {
return;
}
$container.data('updating-buttons', true);


$instances.each(function(i) {
var $controls = $(this).find('.wpuf-repeat-controls');
var $instance = $(this);
var $controls = $instance.find('.wpuf-repeat-controls');
var isLast = i === count - 1;
var isOnlyOne = count === 1;

// Show add button only on the last instance
$controls.find('.wpuf-add-repeat').toggle(isLast);

// Show remove button on all instances except when there's only one instance
$controls.find('.wpuf-remove-repeat').toggle(!isOnlyOne);
var isOnlyInstance = count === 1;

// Clear existing buttons first
$controls.empty();

// Create and add buttons based on logic
var addButtonHtml = '<button type="button" class="wpuf-add-repeat button" data-instance="' + i + '">+</button>';
var removeButtonHtml = '<button type="button" class="wpuf-remove-repeat button" data-instance="' + i + '">-</button>';

// Add button: show only on last instance
if (isLast) {
$controls.append(addButtonHtml);
}

// Remove button: show on all instances EXCEPT when there's only 1 instance
if (!isOnlyInstance) {
$controls.append(removeButtonHtml);
}
});

// Clear the flag after a short delay
setTimeout(function() {
$container.removeData('updating-buttons');
}, 100);

}
};

wpuf.init();

// Set up MutationObserver to watch for button visibility changes
if (window.MutationObserver) {
var observer = new MutationObserver(function(mutations) {
var shouldUpdate = false;
mutations.forEach(function(mutation) {
if (mutation.type === 'attributes' &&
(mutation.attributeName === 'style' || mutation.attributeName === 'class')) {
var $target = $(mutation.target);
if ($target.hasClass('wpuf-add-repeat') || $target.hasClass('wpuf-remove-repeat')) {
shouldUpdate = true;
}
}
});

if (shouldUpdate) {
setTimeout(function() {
$('.wpuf-repeat-container').each(function() {
var $container = $(this);
wpuf.updateRepeatButtons($container);
});
}, 50);
}
});

// Start observing
$('.wpuf-repeat-container').each(function() {
var $container = $(this);
$container.find('.wpuf-add-repeat, .wpuf-remove-repeat').each(function() {
observer.observe(this, { attributes: true, attributeFilter: ['style', 'class'] });
});
});
}

// Initialize fields after the form is rendered with a delay to ensure DOM is ready
setTimeout(function() {
// First, render all repeat field buttons
$('.wpuf-repeat-container').each(function() {
var $container = $(this);
wpuf.updateRepeatButtons($container);
});

if (typeof WPUF_Field_Initializer !== 'undefined') {
WPUF_Field_Initializer.init();
} else {
// console.log('WPUF_Field_Initializer is not defined');
// Re-apply button visibility after field initializer runs
setTimeout(function() {
$('.wpuf-repeat-container').each(function() {
var $container = $(this);
wpuf.updateRepeatButtons($container);
});
}, 100);

// Also re-apply after a longer delay to catch any async field initialization
setTimeout(function() {
$('.wpuf-repeat-container').each(function() {
var $container = $(this);
wpuf.updateRepeatButtons($container);
});
}, 1000);
}

}, 500);
});

Expand Down
Loading
Loading