@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.

Readme

Keywords

Package Sidebar

Install

npm i @kanety/stimulus-static-actions

Weekly Downloads

537

Version

1.0.1

License

MIT

Unpacked Size

58.8 kB

Total Files

32

Last publish

Collaborators

  • kanety