wpusermanager / wp-optionskit Goto Github PK

Thanks for making wp-optionskit! It has saved me a lot of work and makes my WordPress plugin settings page look very professional.

I'm not able to build wp-optionskit on an M1 based Mac because Python 2.7 isn't easily available for M1 Macs. Node 12 requires Python 2.7 to build, so that means I have to use Node 14 or later. wp-optionskit then currently uses node-sass 4.7.2, which in turn requires node-gyp 3.8.0, and that version of node-gyp requires Python 2.7 in order to build. node-gyp adds for Python 3 in node-gyp 7, which then requires updating node-sass from 4.7.2 to 5.0.0, which then requires updating sass-loader from 6.0.6 to 10.0.5, which then requires webpack to be updated to 4.36.0. extract-text-webpack-plugin then won't work with webpack 4, and has been deprecated and replaced with mini-css-extract-plugin, requiring changes to the wp-optionskit build scripts. And all that is just the start.

I could get around all this by getting Python 2.7 to work on my M1 Mac, or by working with wp-optionskit in a VM, but neither of those would help wp-optionskit in the long term. So I wanted to ask,

• Do you have any plans for updating the wp-optionskit dependencies to newer versions?
• If not, are you willing to accept a pull request for that?

No documentation?

I couldn't find a way to setup options value / label of select field.

With multicheckbox i get the following console error when checking items, clicking save sends an empty selection:

TypeError: this.checkedItems.push is not a function
    at a.onChange (multicheckbox.vue:39:1)
    at qt (vue.esm.js:1872:1)
    at HTMLInputElement.n (vue.esm.js:2197:1)
    at HTMLInputElement.o._wrapper (vue.esm.js:7609:1)

With multiselect i get the following console error on page load and no input is rendered:

vue.esm.js:1906 TypeError: this.options.concat is not a function
    at a.filteredOptions (vue-multiselect.min.js:1:9528)
    at mn.get (vue.esm.js:4504:1)
    at mn.evaluate (vue.esm.js:4606:1)
    at a.filteredOptions (vue.esm.js:4860:1)
    at a.<anonymous> (vue.esm.js:512:1)
    at mn.get (vue.esm.js:4504:1)
    at new mn (vue.esm.js:4493:1)
    at a.t.$watch (vue.esm.js:4970:1)
    at Sn (vue.esm.js:4930:1)
    at vue.esm.js:4909:1

My question are in title.

Currently we can add a submenu option page.

Desired Outcome

I'm trying to add the plugin page with no parent.
I tried with the settings but realized the Class is not implemented to do this.
I tried to extend the Class but I can't seem to manage to have both the menu where I want and the content in it...

namespace TDP;
require_once( 'vendor/autoload.php' );
$prefix = 'aaa';

    Class MyOptionKit extends OptionsKit
    {   

    // I tried with and without __construct()

    // public function __construct( $slug = false ) {
    //     parent::__construct();
    // }

    // I tried with and without hooks()

    // private function hooks() {
    //     add_action( 'admin_menu', array( $this, 'add_settings_page' ), apply_filters( $this->func . '_admin_menu_priority', 10 ) );
    //     add_filter( 'admin_body_class', array( $this, 'admin_body_class' ) );
    //     add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ), 100 );
    //     add_action( 'rest_api_init', array( $this, 'register_rest_controller' ) );
    // }

    public function add_settings_page() {

        add_menu_page(
            'AAA', // page <title>Title</title>
            'AAA', // link text
            'manage_options', // user capabilities
            'aaa-settings', // I used a string slug because with the original $this->slug . '-settings', the menu did not show up at all
            array( $this, 'render_settings_page' ),
            'dashicons-superhero', // icon (from Dashicons for example)
            55.4 // menu position
        );

    }

    // I tried loading functions from Class when using hooks()

    // public function enqueue_scripts(){
    //     parent::enqueue_scripts();
    // }

    // public function admin_body_class(){
    //     parent::admin_body_class();
    // }

    // public function register_rest_controller() {
    //     parent::register_rest_controller();
    // }

Is there a demo available/provided on Github showing its full potential of wp-optionskit like sections and subsections in action?

I've built an options page with multiple settings tabs and on one of the tabs have a file upload field.

I want to update tabs subsections based on the uploaded file.

How can one get the Vue component of OptionsKitSubSections and change the props?

I'm struggling to find a way to access the options or dig through the source to find out how the options are named.