Support multiple plugins for same root classname

[apecell]

Is your feature request related to a problem? Please describe.
Current plugin loading calls only first registered plugin by same root class name.
I try to create [file drag and drop plugin] using .file class name but it has not called from core.js::traverseDOM() when using file.js together.

Describe the solution you'd like
Return target plugins array from core.js::findCompatiblePlugin().

Describe alternatives you've considered
How about this?
master...apecell:feature/multi-plugins

Thanks 👍

[VizuaaLOG]

Hmm that's a great idea. Never considered more than one plugin
attaching to the same element.

How do you think it could handle potential conflicts though? For example your drag and drop plugin would it also want to update the file name label or would you leave that to the current file plugin to detect the change event, as it currently does?

Your example doesn't seem to exist.

I would appreciate a pull request, would help see what the changes are you propose.

[apecell]

Bulma .file style not support browser default style upload (drag and drop into upload input).
This example support it but can't use along with BulmaJS file plugin.

If attach multi plugins to same class name and same event, it are called in order.

Example:

class FileDragDrop {
    /**
     * Plugin constructor
     * @param  {Object} options The options object for this plugin
     * @return {this} The newly created plugin instance
     */
    constructor(options) {
        if(!options.element) {
            throw new Error('[BulmaJS] The file component requires an element to function.');
        }

        /**
         * The root file element.
         * @type {HTMLElement}
         */
        this.root = options.element;

        /**
         * The element to file input.
         * @type {HTMLELement}
         */
        this.input = this.root.querySelector('input');

        this.registerEvents();
    }

    /**
     * Register all the events this module needs.
     * @return {undefined}
     */
    registerEvents() {
        // add hovered class name
        this.root.addEventListener('dragover', (e) => {
            e.preventDefault();
            this.root.classList.add('is-hovered');
        });

        // remove hovered class name
        this.root.addEventListener('dragleave', (e) => {
            e.preventDefault();
            this.root.classList.remove('is-hovered');
        });

        // remove hovered class name and set dragged file
        this.root.addEventListener('drop', (e) => {
            e.preventDefault();
            this.root.classList.remove('is-hovered');
            this.input.files = e.dataTransfer.files;
        });
    }

    /**
     * Handle parsing the DOMs data attribute API.
     * @param {HTMLElement} element The root element for this plugin
     * @return {undefined}
     */
    static handleDomParsing(element) {
        new FileDragDrop({
            element: element
        });
    }

    static getRootClass() {
        return 'file';
    }
}

Bulma.registerPlugin('file-drag-drop', FileDragDrop);

export default FileDragDrop;

[VizuaaLOG]

Looking at your code all I see is the hover class being applied to the file element when dragging and the files property being set to the event dragged files. Is this correct or am I missing something?

If this is correct then I actually think this could be implemented into the core file plugin, rather than being it's own plugin. I'm assuming this doesn't reply on any third party library.

If you would like to create a PR adding this to the core file plugin I'll be more than happy to merge it in.

[apecell]

You are right. I think so too.
I will send PR 👐