@kanety/stimulus-static-actions

    1.0.1 • Public • Published

    stimulus-static-actions

    A stimulus extension to define actions in controller.

    Dependencies

    • @hotwired/stimulus 3.0

    Installation

    Install from npm:

    $ npm install @kanety/stimulus-static-actions --save
    

    Usage

    Import @kanety/stimulus-static-actions:

    import '@kanety/stimulus-static-actions';

    Then define actions as static class properties in a controller:

    import { Controller } from '@hotwired/stimulus';
    
    class TestController extends Controller {
      static actions = [
        ['element', 'click->show']
      ];
    
      show(e) {
        // some codes here...
      }
    }

    Actions are attached when the controller is connected. They are also attached when target elements are added in the controller.

    Action definition

    Action definition takes 3 arguments:

    1. target element to attach actions
    2. action description like data-action of stimulus
    3. options

    Target element

    Following kind of target elements could be specified:

    • name of stimulus target
    • element that is an element of stimulus controller

    For example:

    class TestController extends Controller {
      static targets = ['button'];
      static actions = [
        ['button', 'click->show'],  // specify name of stimulus target
        ['element', 'click->show']  // specify element of stimulus controller
      ];

    Action description

    Action description is almost same as data-action of stimulus, but identifier of controller is automatically recognized.

    For example:

    class TestController extends Controller {
      static targets = ['button'];
      static actions = [
        ['button', 'show'],  // equal to test#show
        ['button', 'click->show'],  // equal to click->test#show
        ['button', ':custom->show']  // equal to test:custom->test#show
      ];

    This controller attaches data-action attribute as follows:

    <div data-controller="test">
      <button data-action="click->test#show test:custom->test#show"></button>
    </div>

    Options

    You can use if option for checking some conditions to attach actions. This option takes a method or a getter of the controller. For example:

    class TestController extends Controller {
      static actions = [
        ['element', 'click->show', { if: 'isSpecificBrowser'}]
      ];
    
      get isSpecificBrowser() {
        return navigator.userAgent.match(/SpecificBrowser/);
      }
    }

    In this example, the action is attached only if userAgent includes SpecificBrowser.

    License

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

    Install

    npm i @kanety/stimulus-static-actions

    DownloadsWeekly Downloads

    10

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    58.8 kB

    Total Files

    32

    Last publish

    Collaborators

    • kanety