Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kanety/stimulus-static-actions
https://github.com/kanety/stimulus-static-actions
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kanety/stimulus-static-actions
- Owner: kanety
- License: mit
- Created: 2021-09-06T08:46:51.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-06-27T03:03:46.000Z (7 months ago)
- Last Synced: 2024-09-28T04:19:42.437Z (4 months ago)
- Language: JavaScript
- Size: 55.7 KB
- Stars: 12
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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`:
```javascript
import '@kanety/stimulus-static-actions';
```
Then define `actions` as static class properties in a controller:
```javascript
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:
```javascript
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:
```javascript
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:
```html
```
### 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:
```javascript
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](http://opensource.org/licenses/MIT).