open-index/open-npm huggingface dataset:
npm package: @kanety/stimulus-dialog
Description: A stimulus controller for simple dialog
Author: Yoshikazu Kaneta
Latest version: 1.1.0

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

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

#### drag

Make dialog draggable:

```html
<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:

```html
<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:

```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
<div data-controller="dialog"
     data-action="dialog:open->dialog#open dialog:close->dialog#close dialog:toggle->dialog#toggle">
</div>
```

```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).
npm package: @kanety/stimulus-dropzone
Description: A stimulus controller for simple drop zone
Author: Yoshikazu Kaneta
Latest version: 1.2.0

# stimulus-dropzone

A stimulus controller for simple drop zone.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

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

## Usage

Register controller:

```javascript
import { Application } from '@hotwired/stimulus';
import DropzoneController from '@kanety/stimulus-dropzone';

const application = Application.start();
application.register('dropzone', DropzoneController);
```

Import css:

```css
@import '@kanety/stimulus-dropzone';
```

Build html as follows:

```html
<div data-controller="dropzone">
  <input type="file">
  <p>Drop here</p>
</div>
```

Dropped files will be set in the input tag:

### options

#### grow-width, grow-heigth

Grow drop zone size while dragging:

```html
<div data-controller="dropzone"
     data-dropzone-grow-width-value="200px"
     data-dropzone-grow-height-value="300px">
  <input type="file">
  <p>Drop here</p>
</div>
```

#### allow-dirs

Allow dropping directories:

```html
<div data-controller="dropzone"
     data-allow-dirs-value="true">
  <input type="file" multiple>
  <p>Drop here</p>
</div>
```

### Callbacks

Run callbacks when files are dropped:

```javascript
const element = document.querySelector('[data-controller="dropzone"]');
element.addEventListener('dropzone:dropped', e => {
  // e.detail.files are dropped files
  console.log("dropped " + e.detail.files);
});
```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
npm package: @kanety/stimulus-form-groups
Description: A stimulus controller for toggle of form groups
Author: Yoshikazu Kaneta
Latest version: 1.3.0

# stimulus-form-groups

A stimulus controller for toggle of form groups.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

    $ npm install @kanety/stimulus-form-groups --save

## Usage

Register controller:

```javascript
import { Application } from '@hotwired/stimulus';
import FormGroupsController from '@kanety/stimulus-form-groups';

const application = Application.start();
application.register('form-groups', FormGroupsController);
```

Import css:

```css
@import '@kanety/stimulus-form-groups';
```

Build html as follows:

```html
<div class="st-form-groups" data-controller="form-groups">
  <!-- you can use select, radio or checkbox as trigger element -->
  <select action="form-groups#toggle">
    <option value="group1">group1</option>
    <option value="group2">group2</option>
  </select>
  <div class="st-form-groups__group" data-form-group-id="group1">
    <p>group1 content</p>
  </div>
  <div class="st-form-groups__group" data-form-group-id="group2">
    <p>group2 content</p>
  </div>
</div>
```

You can also toggle multiple groups at once:

```html
<div class="st-form-groups" data-controller="form-groups">
  <select action="form-groups#toggle">
    <option value="group1">group1</option>
    <option value="group2">group2</option>
  </select>
  <div class="st-form-groups__group" data-form-group-id='["group1", "group2"]'>
    <p>group1 content</p>
  </div>
  <div class="st-form-groups__group" data-form-group-id="group2">
    <p>group2 content</p>
  </div>
</div>
```

In this example, `group1 content` will be shown whichever options you select.

You can also use multiple input elements by setting combination of name and value as group id:

```html
<div class="st-form-groups" data-controller="form-groups">
  <input type="checkbox" name="cb1" value="true" action="form-groups#toggle">
  <input type="checkbox" name="cb2" value="true" action="form-groups#toggle">
  <div class="st-form-groups__group" data-form-group-id="cb1:true"><!-- name:value format -->
    <p>group1 content</p>
  </div>
  <div class="st-form-groups__group" data-form-group-id="cb2:true">
    <p>group2 content</p>
  </div>
</div>
```

### Options

#### mode

You can toggle disabled status for input elements:

```html
<div data-controller="form-groups"
     data-form-groups-mode-value="disabled">
</div>
```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
npm package: @kanety/stimulus-iscroll
Description: A stimulus controller for simple infinite scroll
Author: Yoshikazu Kaneta
Latest version: 1.1.0

# stimulus-iscroll

A stimulus controller for simple infinite scroll.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

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

## Usage

Register controller:

```javascript
import { Application } from '@hotwired/stimulus';
import IscrollController from '@kanety/stimulus-iscroll';

const application = Application.start();
application.register('iscroll', IscrollController);
```

Build html as follows:

```html
<div data-controller="iscroll"
     data-action="scroll->iscroll#run"
     data-iscroll-next-link-value="a.next">
  <table>
    <thead>
      <tr>
        <th>header</th>
        <th>header</th>
      </tr>
    </thead>
    <tbody data-iscroll-target="content">
      <tr>
        <td>content</td>
        <td>content</td>
      </tr>
    </tbody>
  </table>
  <div style="display: none;" data-iscroll-target="paging">
    <a class="prev">prev</a>
    <a href="index.1.html">index.1.html</a>
    <a href="index.2.html">index.2.html</a>
    <a href="index.3.html">index.3.html</a>
    <a href="index.2.html" class="next">next</a>
  </div>
</div>
```

### Options

#### loading

Show specific element while loading:

```html
<div data-controller="iscroll">
  <div data-iscroll-target="loading">
    <img src="loading.png">
  </div>
</div>
```

#### next-link

Set selector to get next link in paging target (default is `a.next`):

```html
<div data-controller="iscroll"
     data-iscroll-next-link-value="a.next">
</div>
```

You can set the selector globally:

```javascript
import IscrollController from '@kanety/stimulus-iscroll';
IscrollController.nextLink = 'a.next';
```

#### margin

Set margin height to start loading before reaching at the bottom of scroll bar:

```html
<div data-controller="iscroll"
     data-iscroll-margin-value="20"><!-- 20px -->
</div>
```

### Callbacks

Run callbacks when next page is loaded:

```javascript
let element = document.querySelector('[data-controller="iscroll"]');
element.addEventListener('iscroll:start', e => {
  console.log(e.detail.href);
});
element.addEventListener('iscroll:done', e => {
  console.log(e.detail.href);
  console.log(e.detail.error.content);  // new content element
  console.log(e.detail.error.paging);   // new paging element
});
element.addEventListener('iscroll:fail', e => {
  console.log(e.detail.href);
  console.log(e.detail.error.message);
});
element.addEventListener('iscroll:end', e => {
  console.log(e.detail.href);
});
```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
npm package: @kanety/stimulus-menu
Description: A stimulus controller for simple menu
Author: Yoshikazu Kaneta
Latest version: 1.2.0

# stimulus-menu

A stimulus controller for simple menu.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

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

## Usage

Register controller:

```javascript
import { Application } from '@hotwired/stimulus';
import MenuController from '@kanety/stimulus-menu';

const application = Application.start();
application.register('menu', MenuController);
```

Import css:

```css
@import '@kanety/stimulus-menu';
```

Build html as follows:

```html
<ul class="st-menu st-menu--horizontal" data-controller="menu">
  <li>
    <span class="st-menu__icon"><a href="#">Menu1</a></span>
    <ul class="st-menu--vertical">
      <li><a href="#">Menu1-1</a></li>
      <li><a href="#">Menu1-2</a></li>
      <li><a href="#">Menu1-3</a></li>
    </ul>
  </li>
  <li>
    <span class="st-menu__icon"><a href="#">Menu2</a></span>
    <ul class="st-menu--vertical">
      <li><a href="#">Menu2-1</a></li>
      <li><a href="#">Menu2-2</a></li>
      <li><a href="#">Menu2-3</a></li>
    </ul>
  </li>
</ul>
```

You can also build vertical menu as follows:

```html
<!-- set st-menu--vertial -->
<ul class="st-menu st-menu--vertical" data-controller="menu">
  <li>
    <span class="st-menu__icon"><a href="#">Menu1</a></span>
    <ul class="st-menu--vertical">
      <li><a href="#">Menu1-1</a></li>
      <li><a href="#">Menu1-2</a></li>
      <li><a href="#">Menu1-3</a></li>
    </ul>
  </li>
  <li>
    <span class="st-menu__icon"><a href="#">Menu2</a></span>
    <ul class="st-menu--vertical">
      <li><a href="#">Menu2-1</a></li>
      <li><a href="#">Menu2-2</a></li>
      <li><a href="#">Menu2-3</a></li>
    </ul>
  </li>
</ul>
```

### Options

#### auto-open

Open menu by mouse hovering:

```javascript
<ul data-controller="menu"
    data-menu-auto-open-value="true">
</ul>
```

#### keep-open

Keep menu opened after clicking menu items:

```javascript
<ul data-controller="menu"
    data-menu-keep-open-value="true">
</ul>
```

#### toggle-element

You can change toggle element (default is `a`). For example:

```javascript
<ul data-controller="menu"
    data-menu-toggle-element-value="button">
  <li><button type="button">Button</button></li>
</ul>
```

### Callbacks

Set callbacks fired when a menu item is opened / closed:

```javascript
let element = document.querySelector('[data-controller="menu"]');
element.addEventListener('menu:opened', (e) => {
  console.log('opened: ' + e.detail.item.querySelector('a').href);
});
element.addEventListener('menu:closed', (e) => {
  console.log('closed: ' + e.detail.item.querySelector('a').href);
});
```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
npm package: @kanety/stimulus-multi-select
Description: A stimulus controller for simple multiple select
Author: Yoshikazu Kaneta
Latest version: 1.1.0

# stimulus-multi-select

A stimulus controller for simple multiple select.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

    $ npm install @kanety/stimulus-multi-select --save

## Usage

Register controller:

```javascript
import { Application } from '@hotwired/stimulus';
import MultiSelectController from '@kanety/stimulus-multi-select';

const application = Application.start();
application.register('multi-select', MultiSelectController);
```

Import css:

```css
@import '@kanety/stimulus-multi-select';
```

Build html as follows:

```html
<div class="st-multi-select" data-controller="multi-select">
  <div>
    <select multiple data-multi-select-target="src">
      <option value="option1">option1</option>
      <option value="option2">option2</option>
      <option value="option3">option3</option>
    </select>
  </div>
  <div>
    <div><button type="button" class="st-multi-select__handler" data-action="multi-select#add"></button></div>
    <div><button type="button" class="st-multi-select__handler" data-action="multi-select#remove"></button></div>
  </div>
  <div>
    <select multiple data-multi-select-target="dst"></select>
  </div>
</div>
```

### Options

#### max-options

Set max number of addable options:

```html
<div data-controller="multi-select"
     data-multi-select-max-options-value="2">
</div>
```

#### sort-options

Enable sorting when options moved:

```html
<div data-controller="multi-select"
     data-multi-select-sort-options-value="true">
</div>
```

### Callbacks

```javascript
let element = document.querySelector('[data-controller="multi-select"]')
element.addEventListener('multi-select:added', (e) => {
  console.log(e.detail.option);  // added option
});
element.addEventListener('multi-select:removed', (e) => {
  console.log(e.detail.option);  // removed option
});
```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
npm package: @kanety/stimulus-pastezone
Description: A stimulus controller to paste clipboard data to input tag
Author: Yoshikazu Kaneta
Latest version: 1.4.0

# stimulus-pastezone

A stimulus controller to paste clipboard data to input tag using Ctrl+V.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

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

## Usage

Register controller:

```javascript
import { Application } from '@hotwired/stimulus';
import PastezoneController from '@kanety/stimulus-pastezone';

const application = Application.start();
application.register('pastezone', PastezoneController);
```

Build html as follows:

```html
<div tabindex="-1" data-controller="pastezone">
  <input type="file">
  <p>Paste here</p>
</div>
```

Pasted file will be set in the input tag.

### Options

#### allow-dirs

Allow directory pasting:

```html
<div tabindex="-1" data-controller="pastezone"
                   data-allow-dirs-value="true">
  <input type="file" multiple>
  <p>Drop here</p>
</div>
```

#### text-to-file

If you want to set text data in the clipboard as a file, set filename per content type as follows:

```html
<div tabindex="-1" data-controller="pastezone"
                   data-pastezone-text-to-file-value='{"text/plain":"clipboard.txt","*":"clipboard.dat"}'>
  <input type="file">
  <p>Paste here</p>
</div>
```

### Callbacks

Run callbacks when clipboard data is pasted:

```javascript
let element = document.querySelector('[data-controller="pastezone"]');
element.addEventListener('pastezone:pasted', e => {
  // e.detail.files are pasted data
  console.log("pasted " + e.detail.files);
});
```

### Limitations

Firefox supports only image data in clipboard. 

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
npm package: @kanety/stimulus-splitter
Description: A stimulus controller for simple splitter
Author: Yoshikazu Kaneta
Latest version: 1.1.0

# stimulus-splitter

A stimulus controller for simple splitter.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

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

## Usage

Register controller:

```javascript
import { Application } from '@hotwired/stimulus';
import SplitterController from '@kanety/stimulus-splitter';

const application = Application.start();
application.register('splitter', SplitterController);
```

Import css:

```css
@import '@kanety/stimulus-splitter';
```

Build html as follows for vertical splitter:

```html
<div class="st-splitter-vertical" data-controller="splitter">
  <div>
    <p>content 1</p>
  </div>
  <hr data-splitter-id="splitter1">
  <div>
    <p>content 2</p>
  </div>
  <hr data-splitter-id="splitter2">
  <div>
    <p>content 3</p>
  </div>
</div>
```

You can also specify horizontal splitter:

```html
<div class="st-splitter-horizontal" data-controller="splitter">
  <div>
    <p>content 1</p>
  </div>
  <hr data-splitter-id="splitter1">
  <div>
    <p>content 2</p>
  </div>
  <hr data-splitter-id="splitter2">
  <div>
    <p>content 3</p>
  </div>
</div>
```

You can also use for resizable table headers as the following example:

```html
<table class="st-splitter-table" data-controller="splitter">
  <tr>
    <th>header 1</th>
    <th><hr data-splitter-id="1">header 2</th>
    <th><hr data-splitter-id="2">header 3</th>
    <th><hr data-splitter-id="3">header 4</th>
  </tr>
  <tr>
    <td>data 1</td>
    <td>data 2</td>
    <td>data 3</td>
    <td>data 4</td>
  </tr>
</table>
```

### Options

#### resize-target

By default the previous element adjacent with splitter is resized.
If your container has fixed size, you can resize both elements adjacent with the splitter:

```html
<div data-controller="splitter" style="width: 100vw; height: 100vh;"
     data-splitter-resize-target-value="both">
</div>
```

#### store-key

Save element size to `sessionStorage`:

```html
<div data-controller="splitter"
     data-splitter-store-key-value="YOUR_KEY">
</div>
```

### Callbacks

Run callbacks when elements are resized by splitter:

```javascript
let element = document.querySelector('[data-controller="splitter"]');
element.addEventListener('splitter:resized', e => {
  console.log("resized: " + e.detail.splitter);
});
```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
npm package: @kanety/stimulus-static-actions
Description: A stimulus extension to define actions in controller
Author: Yoshikazu Kaneta
Latest version: 1.1.0

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

```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).
npm package: @kanety/stimulus-tree
Description: A stimulus controller for simple tree ui
Author: Yoshikazu Kaneta
Latest version: 1.2.0

# stimulus-tree

A stimulus controller for simple tree ui.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

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

## Usage

Register controller:

```javascript
import { Application } from '@hotwired/stimulus';
import TreeController from '@kanety/stimulus-tree';

const application = Application.start();
application.register('tree', TreeController);
```

Import css:

```css
@import '@kanety/stimulus-tree';
```

Build html as follows:

```html
<ul class="st-tree" data-controller="tree">
  <li data-node-id="1">
    <a href="#icon" class="st-tree__icon"></a>
    <span>text of 1</span>
    <ul>
      <li data-node-id="1.1">
        <a href="#icon" class="st-tree__icon"></a>
        <span>text of 1.1</span>
        <ul>
          <li data-node-id="1.1.1">
            <a href="#icon" class="st-tree__icon"></a>
            <span>text of 1.1.1</span>
          </li>
          <li data-node-id="1.1.2">
            <a href="#icon" class="st-tree__icon"></a>
            <span>text of 1.1.2</span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
```

### Options

#### store-key

Save node state to `sessionStorage`:

```html
<ul data-controller="tree"
    data-tree-store-key-value="set_your_key">
</ul>
```

### Callbacks

Set callbacks running when a node is opened or closed:

```javascript
let element = document.querySelector('[data-controller="tree"]');
element.addEventListener('tree:opened', (e) => {
  console.log('opened: ' + e.detail.node.getAttribute('data-node-id'));
});
element.addEventListener('tree:closed', (e) => {
  console.log('closed: ' + e.detail.node.getAttribute('data-node-id'));
});
```

### Event operations

Expand or collapse tree nodes:

```html
<ul data-controller="tree"
    data-action="tree:expand->tree#expand tree:collapse->tree#collapse">
</ul>
```

```javascript
let element = document.querySelector('[data-controller="tree"]');
element.dispatchEvent(new CustomEvent('tree:expand'));
element.dispatchEvent(new CustomEvent('tree:collapse'));
```

### Lazy load

Set URL for getting new HTML to each node using `data-node-lazy` attribute:

```html
<ul class="st-tree" data-controller="tree">
  <li class="st-tree__node--closed" data-node-id="1" data-node-lazy="URL">
    <a href="#icon" class="st-tree__icon"></a>
    <span>text of 1</span>
  </li>
</ul>
```

The new HTML should contains exapnded node like following example:

```html
<ul class="st-tree" data-controller="tree">
  <li class="st-tree__node--closed" data-node-id="1" data-node-lazy="URL">
    <a href="#icon" class="st-tree__icon"></a>
    <span>text of 1</span>
    <ul>
      <li data-node-id="1.1">
        <a href="#icon" class="st-tree__icon"></a>
        <span>text of 1.1</span>
      </li>
    </ul>
  </li>
</ul>
```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
npm package: @kanety/stimulus-tree-table
Description: A stimulus controller that attaches tree-like behavior to table
Author: Yoshikazu Kaneta
Latest version: 1.1.0

# stimulus-tree-table

A stimulus controller that attaches tree-like behavior to table.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

    $ npm install @kanety/stimulus-tree-table --save

## Usage

Register controller:

```javascript
import { Application } from '@hotwired/stimulus';
import TreeTableController from '@kanety/stimulus-tree-table';

const application = Application.start();
application.register('tree-table', TreeTableController);
```

Import css:

```css
@import '@kanety/stimulus-tree-table';
```

Build html with `data-node-id` and `data-node-pid` as follows:

```html
<table class="st-tree-table" data-controller="tree-table">
  <tr data-node-id="1">
    <td>
      <a href="#icon" class="st-tree-table__icon"></a>
      <span>1</span>
    </td>
    <td>text of 1</td>
  </tr>
  <tr data-node-id="1.1" data-node-pid="1">
    <td>
      <a href="#icon" class="st-tree-table__icon"></a>
      <span>1.1</span>
    </td>
    <td>text of 1.1</td>
  </tr>
  <tr data-node-id="1.1.1" data-node-pid="1.1">
    <td>
      <a href="#icon" class="st-tree-table__icon"></a>
      <span>1.1.1</span>
    </td>
    <td>text of 1.1.1</td>
  </tr>
  <tr data-node-id="1.1.2" data-node-pid="1.1">
    <td>
      <a href="#icon" class="st-tree-table__icon"></a>
      <span>1.1.2</span>
    </td>
    <td>text of 1.1.2</td>
  </tr>
</table>
```

### Options

#### margin-left

Set base `margin-left` of icon (default: 20).

```html
<table data-controller="tree-table"
       data-tree-table-margin-left-value="10">
</table>
```

#### store-key

Save node state to `sessionStorage`:

```html
<table data-controller="tree-table"
       data-tree-table-store-key-value="YOUR_KEY">
</table>
```

### Callbacks

Run callbacks when a node is opened or closed:

```javascript
let element = document.querySelector('[data-controller="tree-table"]');
element.addEventListener('tree-table:opened', (e) => {
  // e.detail.node: opened node
  console.log('opened: ' + e.detail.node.getAttribute('data-node-id'));
});
element.addEventListener('tree-table:closed', (e) => {
  // e.detail.node: closed node
  console.log('closed: ' + e.detail.node.getAttribute('data-node-id'));
});
```

### Event operations

Expand or collapse tree nodes:

```html
<table data-controller="tree-table"
       data-action="tree-table:expand->tree-table#expand tree-table:collapse->tree-table#collapse">
</table>
```

```javascript
let element = document.querySelector('[data-controller="tree-table"]');
element.dispatchEvent(new CustomEvent('tree-table:expand'));
element.dispatchEvent(new CustomEvent('tree-table:collapse'));
```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
npm package: @kanety/stimulus-zoom-image
Description: A stimulus controller for zooming an image
Author: Yoshikazu Kaneta
Latest version: 1.1.0

# stimulus-zoom-image

A stimulus controller for zooming an image.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

    $ npm install @kanety/stimulus-zoom-image --save

## Usage

Register controller:

```javascript
import { Application } from '@hotwired/stimulus';
import ZoomImageController from '@kanety/stimulus-zoom-image';

const application = Application.start();
application.register('zoom-image', ZoomImageController);
```

Build html as follows:

```html
<div data-controller="zoom-image">
  <img src="large_image.png" style="width: 100%;">
</div>
```

When your mouse is over the container, the image is zoomed in its original size.
If the original size of the image is smaller than the container, the image is not zoomed.

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
npm package: @kang123456/webmonitor
Description: 一款支持H5,vue，react的可以收集用户在浏览器的页面上操作的sdk
Author: kyb
Latest version: 1.0.3


## **简介**：

一款支持 H5,vue，react 可以收集用户在浏览器页面操作的 sdk。

## 实现功能：

● 支持代码运行报错，接口请求 500 等错误收集。

● 支持引用的资源，样式加载错误信息收集。

● 支持用户点击事件的收集。

● 支持用户填写表单数据收集。

● 支持通过 console.error 收集 trycatch 可能出现的错误。

● 支持基于单页面应用的菜单栏下功能页面停留时间统计。

● 支持用户通过接口上报自定义数据。

● 支持用户通过配置请求超时时间自动收集超时请求信息。

● 支持用户自定义是否开启相关配置(debug，是否收集页面停留时间)，自定义函数来处理数据上报前是否进行过滤。


## 配置方式：

1.线上形式：
在 index.html 的 head 里添加


```
<script  src="https://cdn.jsdelivr.net/npm/@kang123456/webmonitor/web.min.js"></script>
```


此方式默认引用最新版的 min 文件，更多方式请见https://www.jsdelivr.com/

## 开启 sdk 启用配置：

同样在 head 里面增加如下配置：


```
<script>
    window.MITO = MITO //方便在全局使用mito变量
    MITO.init({
      // 服务器地址
      dsn: 'http://127.0.0.1:3000/send',
      // 项目对应apikey
      apikey: '123-2223-123-123',
      debug:true,//本地调试时可以开启查看日志
      maxBreadcrumbs:4,//用户行为栈的最大容量，4-50之间
      languageType:'react',//表单收集用到（此配置默认开启），对于react 项目使用的ui 库为antd 4.x版本填写，其他不用（此配置可以默认帮助表单字段的id转为name属性，方便sdk收集）。
      timeOut:1000,//开启表示默认收集超过该时间的请求信息
      colConsoleError:true,//是否开启收集console.error 级别内容，默认关闭(false)
	  colFormValue:true,//是否开启表单内容收集（默认关闭）
      colPageDuration:true,//是否开启页面停留时间计时(单页面项目才适用)
	  beforePushBreadcrumb:function//每条数据上报前处理，可在此函数里自定义过滤逻辑
    });
</script>
```


表单收集注意：

	sdk 默认开启表单收集事件，使用需要指定触发表单收集的标识，需要在某个元素上增加 data-submit="submit"
	属性，以便 sdk 可以识别到收集时机，默认收集只会对 dom 上字段有 name 属性的元素进行收集，没有 name 属性字段会被
	过滤。

	测试发现大部分 ui 库并没有把字段的 name 属性转为 dom 上对应的 name，因此使用需要在标签上额外增加 name 属性。（antd 4.x 版本友好的支持把 name 属性转为 dom 上字段对应的 id，因此使用改类型 ui 库只需增加 languageType:'react'标识即可）

点击事件收集注意：

	考虑到点击类型众多如果每个点击事件都收集那数据量会非常大，因此只收集元素具有 data-function="function"属性的标签。



```
eg：
    <Button type="primary" htmlType="submit" className={styles.login_button} onClick={this.login}
                     loading={loginLoading} data-function="function" data-submit="submit">
                  登录
    </Button>
```

beforePushBreadcrumb 使用示例：

```
beforePushBreadcrumb(data){//标识type为click类型的数据会被过滤
  if(data.type === “Click”)
      return false;
  return true;
}
```

## sdk 接口使用

使用前需要配置在配置项配置： window.MITO = MITO

自定义上报数据，可以在任何地方调用

```
window.MITO.log({
	data //any
})
```

全部上报数据接口(触发一次性全部上报数据)，建议在用户退出登录后调用确保数据完整性。

```
window.MITO.flush()
```

## 数据格式

```
data：{
	type
	category
	data
    level
    time
}
```

接口发送数据格式：

```
{
    authInfo，sdk版本信息
	breadcrumb，用户行为操作数组
	deviceInfo，系统类型，浏览器版本信息
}
```

post 请求类型，application/json 参数格式


	此外sdk内置了针对用户在浏览页面切换或者直接关闭浏览器时的事件监听，可以最大限度的确保在浏览器页面关闭下未发送的数据可以及时上报到服务端。
	
    此sdk不能使用npm方式安装使用，只能通过<script>方式;另外文件夹node-express是简单的服务端接受数据显示，可以直接使用node node-express.js运行测试数据接受情况。
	
	需要下载的可以到 https://www.jsdelivr.com/ 官网搜索 @kang123456/webmonitor 下载压缩包。