enhance: field options sidebar

Gruntfile.js

@@ -1,5 +1,9 @@
 'use strict';
-module.exports = function(grunt) {
+module.exports = function( grunt) {
+    const tailwindFileMap = {
+        'admin/form-builder/views/form-builder-v4.1.php': 'admin/form-builder.css',
+    }
+
     var formBuilderAssets = require('./admin/form-builder/assets/js/form-builder-assets.js');
 
     var pkg = grunt.file.readJSON('package.json');
@@ -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
@@ -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}`;
+                }
             }
         }
     });
@@ -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' ] );
 
@@ -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();
+    });
 };

Lib/Appsero/Client.php

@@ -165,7 +165,7 @@ protected function set_basename_and_slug() {
 
             require_once ABSPATH . 'wp-admin/includes/plugin.php';
 
-            $plugin_data = get_plugin_data( $this->file );
+            $plugin_data = get_plugin_data( $this->file, true, false );
 
             $this->project_version = $plugin_data['Version'];
             $this->type            = 'plugin';

admin/form-builder/assets/js/components/builder-stage-v4-1/index.js

@@ -0,0 +1,184 @@
+Vue.component('builder-stage-v4-1', {
+    template: '#tmpl-wpuf-builder-stage-v4-1',
+
+    mixins: wpuf_form_builder_mixins(wpuf_mixins.builder_stage).concat(wpuf_mixins.add_form_field),
+
+    computed: {
+        form_fields: function () {
+            return this.$store.state.form_fields;
+        },
+
+        field_settings: function () {
+            return this.$store.state.field_settings;
+        },
+
+        hidden_fields: function () {
+            return this.$store.state.form_fields.filter(function (item) {
+                return 'custom_hidden_field' === item.template;
+            });
+        },
+
+        editing_form_id: function () {
+            return this.$store.state.editing_field_id;
+        },
+
+        pro_link: function () {
+            return wpuf_form_builder.pro_link;
+        }
+    },
+
+    mounted: function () {
+        var self = this,
+            in_column_field = false;
+
+        // bind jquery ui sortable
+        $('#form-preview-stage .wpuf-form.sortable-list').sortable({
+            placeholder: 'form-preview-stage-dropzone',
+            items: '.field-items',
+            handle: '.control-buttons .move',
+            scroll: true,
+            over: function() {
+                in_column_field = false;
+
+                // if the field drop in column field, then stop field rendering in the builder stage
+                $(".wpuf-column-inner-fields" ).on( "drop", function(event) {
+                    var targetColumn = event.currentTarget.classList,
+                        isColumnExist = $.inArray(".wpuf-column-inner-fields", targetColumn);
+
+                    if ( isColumnExist ) {
+                        in_column_field = true;
+                    }
+                } );
+            },
+            update: function (e, ui) {
+                var item    = ui.item[0],
+                    data    = item.dataset,
+                    source  = data.source,
+                    toIndex = parseInt($(ui.item).index()),
+                    payload = {
+                        toIndex: toIndex
+                    };
+
+                if ('panel' === source) {
+                    // add new form element
+                    self.$store.state.index_to_insert = parseInt(toIndex);
+
+                    if ( ! in_column_field ) {
+                        var field_template  = ui.item[0].dataset.formField;
+                        self.add_form_field(field_template);
+                    }
+
+                    // remove button from stage
+                    $(this).find('.button.ui-draggable.ui-draggable-handle').remove();
+
+                } else if ('stage' === source) {
+                    payload.fromIndex = parseInt(data.index);
+
+                    self.$store.commit('swap_form_field_elements', payload);
+                }
+
+            }
+        });
+    },
+
+    methods: {
+
+        open_field_settings: function(field_id) {
+            this.$store.commit('open_field_settings', field_id);
+        },
+
+        clone_field: function(field_id, index) {
+            var payload = {
+                field_id: field_id,
+                index: index,
+                new_id: this.get_random_id()
+            };
+
+            // single instance checking
+            var field = _.find(this.$store.state.form_fields, function (item) {
+                return parseInt(item.id) === parseInt(payload.field_id);
+            });
+
+            // check if these are already inserted
+            if ( this.isSingleInstance( field.template ) && this.containsField( field.template ) ) {
+                Swal.fire({
+                    title: "Oops...",
+                    text: "You already have this field in the form"
+                });
+                return;
+            }
+
+            this.$store.commit('clone_form_field_element', payload);
+        },
+
+        delete_field: function(index) {
+            var self = this;
+
+            (Swal.fire({
+                text: self.i18n.delete_field_warn_msg,
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#d54e21',
+                confirmButtonText: self.i18n.yes_delete_it,
+                cancelButtonText: self.i18n.no_cancel_it,
+                customClass: {
+                    confirmButton: 'btn btn-success',
+                    cancelButton: 'btn btn-danger',
+                }
+            })).then((result) => {
+                if (result.isConfirmed) {
+                    self.$store.commit('delete_form_field_element', index);
+                }
+            });
+        },
+
+        delete_hidden_field: function (field_id) {
+            var i = 0;
+
+            for (i = 0; i < this.form_fields.length; i++) {
+                if (parseInt(field_id) === parseInt(this.form_fields[i].id)) {
+                    this.delete_field(i);
+                }
+            }
+        },
+
+        is_pro_feature: function (template) {
+            return (this.field_settings[template] && this.field_settings[template].pro_feature) ? true : false;
+        },
+
+        is_template_available: function (field) {
+            var template = field.template;
+
+            if (this.field_settings[template]) {
+                if (this.is_pro_feature(template)) {
+                    return false;
+                }
+
+                return true;
+            }
+
+            // for example see 'mixin_builder_stage' mixin's 'is_taxonomy_template_available' method
+            if (_.isFunction(this['is_' + template + '_template_available'])) {
+                return this['is_' + template + '_template_available'].call(this, field);
+            }
+
+            return false;
+        },
+
+        is_full_width: function (template) {
+            if (this.field_settings[template] && this.field_settings[template].is_full_width) {
+                return true;
+            }
+
+            return false;
+        },
+
+        is_invisible: function (field) {
+            return ( field.recaptcha_type && 'invisible_recaptcha' === field.recaptcha_type ) ? true : false;
+        },
+
+        get_field_name: function (template) {
+            return this.field_settings[template].title;
+        }
+    }
+});