Skip to content
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

enhance: add form modal #1504

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

enhance: add form modal #1504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
63151b3
initial header style
sapayth Oct 7, 2024
787c082
preview and save buttons
sapayth Oct 7, 2024
a7c5fe7
dropdown effect enhanced
sapayth Oct 9, 2024
d008e8a
shortcode copy icon enhanced
sapayth Oct 9, 2024
c96afbf
backward compatibility added for old wpuf pro
sapayth Oct 10, 2024
065b1fa
update copy shortcode icon
sapayth Oct 10, 2024
6607241
Merge branch 'develop' into enhance/header_for_form_builder_ui_redesign
sapayth Oct 21, 2024
ab3ce2c
type and image fixing
sapayth Oct 22, 2024
3eba5a0
Merge remote-tracking branch 'upstream/develop' into enhance/header_f…
sapayth Oct 31, 2024
7293f64
updated form builder header design
sapayth Nov 8, 2024
fe34c3b
nav css
sapayth Nov 8, 2024
ab36c5c
Squashed commit of the following:
sapayth Nov 8, 2024
6a93fc4
Merge remote-tracking branch 'upstream/develop' into enhance/new_buil…
sapayth Nov 11, 2024
dbef1af
initial design
sapayth Nov 12, 2024
ab32ffd
hidden fields and other small css
sapayth Nov 13, 2024
ed4b378
column field
sapayth Nov 13, 2024
d02c221
Merge remote-tracking branch 'upstream/develop' into enhance/new_buil…
sapayth Nov 13, 2024
bc50028
Merge remote-tracking branch 'upstream/develop' into enhance/new_buil…
sapayth Nov 14, 2024
3b59cbc
column fields initial rendering
sapayth Nov 15, 2024
4443867
column field initial
sapayth Nov 25, 2024
aa1c0d8
fix action buttons move action
sapayth Nov 25, 2024
aa9f072
icon for featured image
sapayth Nov 25, 2024
21d19c2
icon for image upload button
sapayth Nov 25, 2024
87f577d
Merge remote-tracking branch 'upstream/develop' into enhance/new_buil…
sapayth Nov 26, 2024
ac5db7e
backward compatibility for pro version
sapayth Nov 26, 2024
3df5eeb
compatibility for settings and notification tab
sapayth Nov 26, 2024
bf99c43
initial modal
sapayth Nov 26, 2024
b8db203
dynamic templates and hover effects
sapayth Nov 27, 2024
9b4437f
add test for form modal
sapayth Nov 27, 2024
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
52 changes: 50 additions & 2 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
'use strict';
module.exports = function(grunt) {
module.exports = function( grunt) {
const tailwindFileMap = {
'admin/form-builder/views/form-builder.php': 'admin/form-builder.css',
}

var formBuilderAssets = require('./admin/form-builder/assets/js/form-builder-assets.js');

var pkg = grunt.file.readJSON('package.json');
Expand Down Expand Up @@ -112,7 +116,21 @@ module.exports = function(grunt) {
tasks: [
'shell:npm_build'
]
}
},

tailwind: {
files: [
'src/css/**/*.css',
'admin/form-builder/views/*.php',
'admin/form-builder/assets/js/**/*.php',
'admin/form-builder/assets/js/**/*.js',
'includes/Admin/**/*.php',
],
tasks: ['shell:tailwind'],
options: {
spawn: false
}
},
},

// Clean up build directory
Expand Down Expand Up @@ -224,6 +242,11 @@ module.exports = function(grunt) {
shell: {
npm_build: {
command: 'npm run build',
},
tailwind: {
command: function ( input, output ) {
return `npx tailwindcss -i ${input} -o ${output}`;
}
}
}
});
Expand All @@ -241,6 +264,7 @@ module.exports = function(grunt) {
grunt.loadNpmTasks( 'grunt-notify' );
grunt.loadNpmTasks( 'grunt-wp-readme-to-markdown' );
grunt.loadNpmTasks( 'grunt-shell' );
grunt.loadNpmTasks( 'grunt-postcss' );

grunt.registerTask( 'default', [ 'less', 'concat', 'uglify', 'i18n' ] );

Expand All @@ -251,4 +275,28 @@ module.exports = function(grunt) {
// build stuff
grunt.registerTask( 'release', [ 'less', 'concat', 'uglify', 'i18n', 'readme' ] );
grunt.registerTask( 'zip', [ 'clean', 'copy', 'compress' ] );

grunt.event.on('watch', function(action, filepath, target) {
if (target === 'tailwind') {
grunt.task.run('tailwind');
}
});

grunt.registerTask('tailwind', function() {
const done = this.async();

// Process each file mapping
Object.entries(tailwindFileMap).forEach(([phpFile, cssFile]) => {
const inputFile = `src/css/${cssFile}`;
const outputFile = `assets/css/${cssFile}`;

// Ensure the input file exists
if (grunt.file.exists(inputFile)) {
// Run the tailwind command
grunt.task.run(`shell:tailwind:${inputFile}:${outputFile}`);
}
});

done();
});
};
221 changes: 166 additions & 55 deletions admin/form-builder/assets/js/components/builder-stage/template.php
View file
Open in desktop

Large diffs are not rendered by default.

38 changes: 30 additions & 8 deletions admin/form-builder/assets/js/components/form-checkbox_field/template.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,38 @@
<div class="wpuf-fields">
<ul :class="['wpuf-fields-list', ('yes' === field.inline) ? 'wpuf-list-inline' : '']">
<li v-if="has_options" v-for="(label, val) in field.options">
<label>
<div
v-if="field.inline !== 'yes'"
class="wpuf-space-y-2">
<div
v-if="has_options" v-for="(label, val) in field.options"
class="wpuf-relative wpuf-flex wpuf-items-center">
<div class="wpuf-flex wpuf-items-center">
<input
type="checkbox"
:value="val"
:checked="is_selected(val)"
:class="class_names('checkbox_btns')"
> {{ label }}
</label>
</li>
</ul>
class="wpuf-h-4 wpuf-w-4 wpuf-rounded wpuf-border-gray-300 wpuf-text-indigo-600 focus:wpuf-ring-indigo-600 !wpuf-mt-0.5">
<label class="wpuf-ml-3 wpuf-text-sm wpuf-font-medium wpuf-text-gray-900">{{ label }}</label>
</div>
</div>
</div>

<span v-if="field.help" class="wpuf-help" v-html="field.help" />
<div
v-else
class="wpuf-flex"
>
<div
v-if="has_options" v-for="(label, val) in field.options"
class="wpuf-relative wpuf-flex wpuf-items-center wpuf-mr-4">
<input
type="checkbox"
:value="val"
:checked="is_selected(val)"
:class="class_names('checkbox_btns')"
class="!wpuf-mt-[.5px] wpuf-rounded wpuf-border-gray-300 wpuf-text-indigo-600">
<label class="wpuf-ml-1 wpuf-text-sm wpuf-font-medium wpuf-text-gray-900">{{ label }}</label>
</div>
</div>

<p v-if="field.help" class="wpuf-mt-2 wpuf-text-sm wpuf-text-gray-500" v-html="field.help"></p>
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Add ID to help text for accessibility

The help text needs an ID to properly associate it with the checkboxes via aria-describedby.

Apply this change:

-<p v-if="field.help" class="wpuf-mt-2 wpuf-text-sm wpuf-text-gray-500" v-html="field.help"></p>
+<p v-if="field.help" :id="'help-' + field.name" class="wpuf-mt-2 wpuf-text-sm wpuf-text-gray-500" v-html="field.help"></p>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<p v-if="field.help" class="wpuf-mt-2 wpuf-text-sm wpuf-text-gray-500" v-html="field.help"></p>
<p v-if="field.help" :id="'help-' + field.name" class="wpuf-mt-2 wpuf-text-sm wpuf-text-gray-500" v-html="field.help"></p>

</div>
5 changes: 4 additions & 1 deletion admin/form-builder/assets/js/components/form-column_field/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ Vue.component('form-column_field', {
self.resizeColumns(self.field.columns);
});


columnFieldArea.mouseleave(function() {
columnFields.unbind( "mouseup" );
columnFields.unbind( "mousemove" );
Expand Down Expand Up @@ -120,6 +119,10 @@ Vue.component('form-column_field', {
field_settings: function () {
return this.$store.state.field_settings;
},

action_button_classes: function() {
return 'hover:wpuf-cursor-pointer hover:wpuf-text-white';
}
},

methods: {
Expand Down
155 changes: 114 additions & 41 deletions admin/form-builder/assets/js/components/form-column_field/template.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,120 @@
<div v-bind:class="['wpuf-field-columns', 'has-columns-'+field.columns]">
<div class="wpuf-column-field-inner-columns">
<div class="wpuf-column">
<!-- don't change column class names -->
<div v-for="column in columnClasses" :class="[column, 'items-of-column-'+field.columns, 'wpuf-column-inner-fields']" :style="{ width: field.inner_columns_size[column], paddingRight: field.column_space+'px'}">
<ul class="wpuf-column-fields-sortable-list">
<li
v-for="(field, index) in column_fields[column]"
:key="field.id"
:class="[
'column-field-items', 'wpuf-el', field.name, field.css, 'form-field-' + field.template,
field.width ? 'field-size-' + field.width : '',
parseInt(editing_form_id) === parseInt(field.id) ? 'current-editing' : ''
]"
:column-field-index="index"
:in-column="column"
data-source="column-field-stage"
>
<div v-if="!is_full_width(field.template)" class="wpuf-label wpuf-column-field-label">
<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>
<div :class="['wpuf-field-columns wpuf-flex wpuf-flex-col md:wpuf-flex-row wpuf-gap-4 wpuf-p-4 wpuf-w-full', 'has-columns-'+field.columns]">
<div
v-for="column in columnClasses"
class="wpuf-flex-1 wpuf-min-w-0 wpuf-min-h-full">
<div class="wpuf-column-inner-fields wpuf-border wpuf-border-dashed wpuf-border-green-400 wpuf-bg-green-50 wpuf-shadow-sm wpuf-rounded-md wpuf-p-1">
<ul class="wpuf-column-fields-sortable-list">
<li
v-for="(field, innerIndex) in column_fields[column]"
:key="field.id"
Comment on lines +1 to +8
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Avoid variable shadowing by renaming the inner field variable

The field variable is used in the outer scope (e.g., field.columns on line 1) and is being shadowed by the inner loop variable in the v-for directive on line 8. This can lead to confusion and potential bugs due to variable shadowing. Consider renaming the inner loop variable to avoid this issue.

Apply this diff to rename the inner field variable to columnField and update references accordingly:

-        v-for="(field, innerIndex) in column_fields[column]"
+        v-for="(columnField, innerIndex) in column_fields[column]"

And update all occurrences of field within the inner loop to columnField.

Committable suggestion skipped: line range outside the PR's diff.

:column-field-index="innerIndex"
:in-column="column"
data-source="column-field-stage"
class="!wpuf-m-0 !wpuf-p-0 wpuf-group/column-inner hover:wpuf-bg-green-50 wpuf-transition wpuf-duration-150 wpuf-ease-out column-field-items wpuf-el wpuf-rounded-t-md"
:class="[
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

Verify the syntax of group-hover/column-inner: utility classes

The utility classes starting with group-hover/column-inner: may not conform to standard Tailwind CSS syntax. In Tailwind CSS, variant modifiers use a colon : instead of a slash /. If column-inner is intended to be a custom variant or state, ensure that it's properly configured in your Tailwind CSS configuration. Otherwise, adjust the syntax to match Tailwind conventions.

For example, you might need to change:

group-hover/column-inner:wpuf-border-green-400

to:

group-hover:wpuf-border-green-400

Ensure that any custom variants or prefixes are correctly set up in your Tailwind CSS configuration.

Also applies to: 22-22, 59-59

field.name,
field.css,
'form-field-' + field.template,
field.width ? 'field-size-' + field.width : '',
('custom_hidden_field' === field.template) ? 'hidden-field' : '',
parseInt(editing_form_id) === parseInt(field.id) ? 'current-editing' : ''
]">
<div class="wpuf-flex wpuf-flex-col md:wpuf-flex-row wpuf-gap-2 wpuf-p-4 wpuf-border-transparent group-hover/column-inner:wpuf-border-green-400 wpuf-rounded-t-md wpuf-border-t wpuf-border-r wpuf-border-l wpuf-border-dashed wpuf-border-green-400">
<div
v-if="!(is_full_width(field.template) || is_pro_feature(field.template))"
class="wpuf-w-full md:wpuf-w-1/4 wpuf-shrink-0">
<label v-if="!is_invisible(field)"
:for="'wpuf-' + (field.name ? field.name : 'cls')"
class="wpuf-block wpuf-text-sm">
{{ field.label }}
<span v-if="field.required && 'yes' === field.required"
class="required">*</span>
</label>
</div>

<component v-if="is_template_available(field)" :is="'form-' + field.template" :field="field"></component>

<div v-if="is_pro_feature(field.template)" class="stage-pro-alert">
<label class="wpuf-pro-text-alert">
<a :href="pro_link" target="_blank"><strong>{{ get_field_name(field.template) }}</strong> <?php _e( 'is available in Pro Version', 'wp-user-frontend' ); ?></a>
</label>
<div
:class="[
'wpuf-relative wpuf-min-w-0', // Added wpuf-min-w-0
(is_full_width(field.template) || is_pro_feature(field.template))
? 'wpuf-w-full'
: 'wpuf-w-full md:wpuf-w-3/4'
]">
<div class="wpuf-absolute wpuf-w-full wpuf-h-full wpuf-z-10"></div>
<div class="wpuf-relative">
<component
v-if="is_template_available(field)"
:is="'form-' + field.template"
:field="field">
</component>
<div v-if="is_pro_feature(field.template)" class="stage-pro-alert wpuf-text-center">
<label class="wpuf-pro-text-alert">
<a :href="pro_link" target="_blank"
class="wpuf-text-gray-700 wpuf-text-base"><strong>{{ get_field_name( field.template )
}}</strong> <?php _e( 'is available in Pro Version', 'wp-user-frontend' ); ?></a>
</label>
</div>
</div>
</div>

<div class="wpuf-column-field-control-buttons">
<p>
<i class="fa fa-arrows move"></i>
<i class="fa fa-pencil" @click="open_column_field_settings(field, index, column)"></i>
<i class="fa fa-clone" @click="clone_column_field(field, index, column)"></i>
<i class="fa fa-trash-o" @click="delete_column_field(index, column)"></i>
</p>
</div>
<div
class="wpuf-column-field-control-buttons wpuf-opacity-0 group-hover/column-inner:wpuf-opacity-100 wpuf-rounded-b-lg wpuf-bg-green-600 wpuf-items-center wpuf-transition wpuf-duration-150 wpuf-ease-out">
<div class="wpuf-items-center wpuf-text-green-200 wpuf-flex wpuf-justify-evenly wpuf-p-1">
<template v-if="!is_failed_to_validate(field.template)">
<span :class="action_button_classes">
<i
class="fa fa-arrows move wpuf-pr-2 wpuf-rounded-l-md hover:!wpuf-cursor-move wpuf-border-r wpuf-border-green-200"></i>
</span>
<span :class="action_button_classes"
@click="open_column_field_settings(field, innerIndex, column)">
<i
class="fa fa-pencil"></i>
Edit
</span>
<span :class="action_button_classes"
@click="clone_column_field(field, innerIndex, column)">
<i
class="fa fa-clone"></i>
Copy
</span>
</template>
<template v-else>
<span :class="action_button_classes">
<i class="fa fa-arrows control-button-disabled wpuf--ml-1 wpuf-rounded-l-md"></i>
</span>
<span :class="action_button_classes">
<i class="fa fa-pencil control-button-disabled wpuf--ml-1"></i>
Edit
</span>
<span :class="action_button_classes">
<i
class="fa fa-clone control-button-disabled wpuf--ml-1"></i>
Copy
</span>
</template>
<span :class="action_button_classes" @click="delete_column_field(innerIndex, column)">
<i
class="fa fa-trash-o wpuf--ml-1"></i>
Remove
</span>
<span :class="action_button_classes"
v-if="is_pro_feature(field.template)"
class="hover:wpuf-bg-green-700">
<a
:href="pro_link"
target="_blank"
class="wpuf-rounded-r-md hover:wpuf-bg-slate-500 hover:wpuf-cursor-pointer wpuf-transition wpuf-duration-150 wpuf-ease-out hover:wpuf-transition-all">
<svg
width="15" height="15" viewBox="0 0 20 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M19.2131 4.11564C19.2161 4.16916 19.2121 4.22364 19.1983 4.27775L17.9646 10.5323C17.9024 10.7741 17.6796 10.9441 17.4235 10.9455L10.0216 10.9818H10.0188H2.61682C2.35933 10.9818 2.13495 10.8112 2.07275 10.5681L0.839103 4.29542C0.824897 4.23985 0.820785 4.18385 0.824374 4.12895C0.34714 3.98269 0 3.54829 0 3.03636C0 2.40473 0.528224 1.89091 1.17757 1.89091C1.82692 1.89091 2.35514 2.40473 2.35514 3.03636C2.35514 3.39207 2.18759 3.71033 1.92523 3.92058L3.46976 5.43433C3.86011 5.81695 4.40179 6.03629 4.95596 6.03629C5.61122 6.03629 6.23596 5.7336 6.62938 5.22647L9.1677 1.95491C8.95447 1.74764 8.82243 1.46124 8.82243 1.14545C8.82243 0.513818 9.35065 0 10 0C10.6493 0 11.1776 0.513818 11.1776 1.14545C11.1776 1.45178 11.0526 1.72982 10.8505 1.93556L10.8526 1.93811L13.3726 5.21869C13.7658 5.73069 14.3928 6.03636 15.0499 6.03636C15.6092 6.03636 16.1351 5.82451 16.5305 5.43978L18.0848 3.92793C17.8169 3.71775 17.6449 3.39644 17.6449 3.03636C17.6449 2.40473 18.1731 1.89091 18.8224 1.89091C19.4718 1.89091 20 2.40473 20 3.03636C20 3.53462 19.6707 3.9584 19.2131 4.11564ZM17.8443 12.6909C17.8443 12.3897 17.5932 12.1455 17.2835 12.1455H2.77884C2.46916 12.1455 2.21809 12.3897 2.21809 12.6909V14C2.21809 14.3012 2.46916 14.5455 2.77884 14.5455H17.2835C17.5932 14.5455 17.8443 14.3012 17.8443 14V12.6909Z"
fill="#FB9A28"/>
</svg>
</a>
</span>
</div>
</li>

</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
4 changes: 2 additions & 2 deletions admin/form-builder/assets/js/components/form-custom_hidden_field/template.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<div class="wpuf-fields">
<input
type="text"
:class="class_names('textfield')"
:class="builder_class_names('text_hidden')"
:placeholder="field.placeholder"
:value="field.default"
:size="field.size"
>
<span v-if="field.help" class="wpuf-help" v-html="field.help" />
<p v-if="field.help" class="wpuf-mt-2 wpuf-text-sm wpuf-text-gray-500" v-html="field.help"></p>
</div>
6 changes: 2 additions & 4 deletions admin/form-builder/assets/js/components/form-dropdown_field/template.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
<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">
<option v-if="field.first" value="">{{ field.first }}</option>

<option
v-if="has_options"
v-for="(label, val) in field.options"
:value="label"
:selected="is_selected(label)"
>{{ label }}</option>
Comment on lines 2 to 11
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Enhance accessibility for non-admin users

Given that issue #643 mentions form accessibility for non-admin users, consider adding proper ARIA attributes and labels to the select element.

Apply these accessibility improvements:

     <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"
+        :aria-label="field.label"
+        :aria-required="field.required ? 'true' : 'false'"
+        :aria-describedby="field.help ? 'help_' + field.name : undefined"
+        :id="'field_' + field.name"
     >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<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">
<option v-if="field.first" value="">{{ field.first }}</option>
<option
v-if="has_options"
v-for="(label, val) in field.options"
:value="label"
:selected="is_selected(label)"
>{{ label }}</option>
<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"
:aria-label="field.label"
:aria-required="field.required ? 'true' : 'false'"
:aria-describedby="field.help ? 'help_' + field.name : undefined"
:id="'field_' + field.name"
>
<option v-if="field.first" value="">{{ field.first }}</option>
<option
v-if="has_options"
v-for="(label, val) in field.options"
:value="label"
:selected="is_selected(label)"
>{{ label }}</option>

</select>

<span v-if="field.help" class="wpuf-help" v-html="field.help"> </span>
<p v-if="field.help" class="wpuf-mt-2 wpuf-text-sm wpuf-text-gray-500" v-html="field.help"></p>
</div>
4 changes: 2 additions & 2 deletions admin/form-builder/assets/js/components/form-email_address/template.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<div class="wpuf-fields">
<input
type="email"
:class="class_names('email')"
:class="class_names('email') + builder_class_names('text')"
:placeholder="field.placeholder"
:value="field.default"
:size="field.size"
>
<span v-if="field.help" class="wpuf-help" v-html="field.help" />
<p v-if="field.help" class="wpuf-mt-2 wpuf-text-sm wpuf-text-gray-500" v-html="field.help"></p>
</div>
8 changes: 6 additions & 2 deletions admin/form-builder/assets/js/components/form-featured_image/template.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
<div class="wpuf-fields">
<div :id="'wpuf-img_label-' + field.id + '-upload-container'">
<div class="wpuf-attachment-upload-filelist" data-type="file" data-required="yes">
<a class="button file-selector" href="#">
<a class="wpuf-inline-flex wpuf-items-center wpuf-gap-x-1.5"
:class="builder_class_names('upload_btn')" href="#">
<template v-if="field.button_label === ''">
<?php _e( 'Select Image', 'wp-user-frontend' ); ?>
</template>
<template v-else>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="wpuf-size-5">
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
</svg>
{{ field.button_label }}
</template>
</a>
</div>
</div>

<span v-if="field.help" class="wpuf-help" v-html="field.help" />
<p v-if="field.help" class="wpuf-mt-2 wpuf-text-sm wpuf-text-gray-500" v-html="field.help"></p>
</div>
Loading
Loading