https://github.com/kanety/stimulus-dialog

https://github.com/kanety/stimulus-dialog

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/kanety/stimulus-dialog
• Owner: kanety
• License: mit
• Created: 2021-10-02T02:40:17.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-06-27T07:30:00.000Z (7 months ago)
• Last Synced: 2024-09-29T17:06:45.305Z (4 months ago)
• Language: JavaScript
• Size: 53.7 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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:

```javascript

import { Application } from '@hotwired/stimulus';

import DialogController from '@kanety/stimulus-dialog';

const application = Application.start();

application.register('dialog', DialogController);

```

Import css:

```css

@import '@kanety/stimulus-dialog';

```

Build html as follows:

```html



  


    
Title

    
content1

    
content2

    


    OK

    Cancel

  

  Open



```


### Options

#### focus

Set element focused when dialog is opened:

```html

OK

```

#### drag

Make dialog draggable:

```html



  


    
Title

  



```


#### modal

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

```html



  


    


    

  



```


### Callbacks

Run callbacks when dialog is opened or closed:

```javascript

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:

```html





```


```javascript

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](http://opensource.org/licenses/MIT).