Nearsighted Paramecium Multiverse

    @kanety/stimulus-dialog

    1.0.3 • Public • Published

    stimulus-dialog

    A stimulus controller for simple dialog.

    Dependencies

    • @hotwired/stimulus 3.0

    Installation

    Install from npm:

    $ npm install @kanety/stimulus-dialog --save
    

    Usage

    Register controller:

    import { Application } from '@hotwired/stimulus';
    import DialogController from '@kanety/stimulus-dialog';
    
    const application = Application.start();
    application.register('dialog', DialogController);

    Import css:

    @import '@kanety/stimulus-dialog';

    Build html as follows:

    <div data-controller="dialog">
      <div class="st-dialog" data-dialog-target="dialog">
        <h1>Title</h1>
        <p>content1</p>
        <p>content2</p>
        <hr>
        <button type="button" data-action="dialog#close">OK</button>
        <button type="button" data-action="dialog#close">Cancel</button>
      </div>
      <button type="button" data-action="dialog#open">Open</button>
    </div>

    Options

    focus

    Set element focused when dialog is opened:

    <button type="button" data-dialog-target="focus" data-action="dialog#close">OK</button>

    drag

    Make dialog draggable:

    <div data-controller="dialog">
      <div class="st-dialog" data-dialog-target="dialog">
        <h1 data-dialog-target="drag">Title</h1>
      </div>
    </div>

    modal

    You can use modal dialog by wrapping dialog element as follows:

    <div data-controller="dialog">
      <div class="st-dialog-modal" data-dialog-target="modal">
        <div class="st-dialog" data-dialog-target="dialog">
        </div>
      </div>
    </div>

    Callbacks

    Run callbacks when dialog is opened or closed:

    let element = document.querySelector('[data-controller="dialog"]');
    element.addEventListener('dialog:opend', e => {
      console.log("opened by " + e.detail.target);
    });
    element.addEventListener('dialog:closed', e => {
      console.log("closed by " + e.detail.target);
    });

    Event operations

    Open, close or toggle dialog via event:

    <div data-controller="dialog"
         data-action="dialog:open->dialog#open dialog:close->dialog#close dialog:toggle->dialog#toggle">
    </div>
    let element = document.querySelector('[data-controller="dialog"]');
    element.dispatchEvent(new CustomEvent('dialog:open'));
    element.dispatchEvent(new CustomEvent('dialog:close'));
    element.dispatchEvent(new CustomEvent('dialog:toggle'));

    License

    The library is available as open source under the terms of the MIT License.

    Install

    npm i @kanety/stimulus-dialog

    DownloadsWeekly Downloads

    7

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    66.4 kB

    Total Files

    33

    Last publish

    Collaborators

    • kanety