open-index/open-npm huggingface dataset:
npm package: @neomasterr/component-element
Description: Usage example
Author: neomasterr
Latest version: 1.1.0

Usage example

Checkbox.js
```JS
import ComponentElement from '@neomasterr/component-element';

function Checkbox($element, options = {}) {
    // inheritance
    ComponentElement.call(this, $element, options);

    this.$item = this.$element.querySelector('.js-checkboxItem');
    this.$checkbox = this.$element.querySelector('.js-checkboxInput');
    this.$checkbox.addEventListener('change', this._onChangeEvent.bind(this));

    Object.defineProperty(this, 'checked', {
        get: this.getChecked.bind(this),
        set: this.setChecked.bind(this),
    });
}

// prototype chaining
Checkbox.prototype = Object.create(ComponentElement.prototype)
Object.defineProperty(Checkbox.prototype, 'constructor', {
    value: Checkbox,
    enumerable: false,
    writable: true,
});

Checkbox.prototype.setChecked = function(state) {
    state = !!state;
    this.$checkbox.checked = state;
    this.$item.classList.toggle('is-active', state);
    this.emit('checked', state);
}

Checkbox.prototype.getChecked = function() {
    return this.$checkbox.checked;
}

Checkbox.prototype._onChangeEvent = function(e) {
    this.setChecked(this.$checkbox.checked);
}

export default Checkbox;
```

App.js
```JS
import Checkbox from './Checkbox';

document.querySelectorAll('.js-checkbox').forEach($el => {
    const checkbox = new Checkbox($el, {
        on: {
            change: (checked) => {
                console.log(checked);
            },
        },
    });

    checkbox.checked = true;
    // or
    checkbox.setChecked(true);

    return checkbox;
});
```

index.html
```HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <div class="Checkbox">
        <div class="Checkbox-inner js-checkbox">
            <div class="Kurort-sidebar__custom-checkbox js-checkboxItem">
                <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6898 0.275994C16.0897 0.656955 16.105 1.28994 15.724 1.68979L6.1966 11.6898C6.00787 11.8879 5.74621 12 5.4726 12C5.19898 12 4.93732 11.8879 4.74859 11.6898L0.275994 6.99534C-0.104967 6.59549 -0.0896484 5.96251 0.31021 5.58154C0.710069 5.20058 1.34305 5.2159 1.72401 5.61576L5.4726 9.55029L14.276 0.31021C14.657 -0.0896484 15.2899 -0.104967 15.6898 0.275994Z" fill="white"></path>
                </svg>
            </div>
            <input name="test_checkbox" type="checkbox" class="js-checkboxInput">
            <span>Test checkbox</span>
        </div>
    </div>
</body>
</html>
```
npm package: @neomasterr/event-emitter
Description: Liteweight EventEmitter JavaScript Class
Author: neomasterr
Latest version: 2.0.0

[![npm](https://img.shields.io/npm/v/@neomasterr/event-emitter.svg?style=flat-square)](https://www.npmjs.org/@neomasterr/event-emitter)

# EventEmitter

Simple lightweight inheritable event emitter with minimal footprint and zero dependencies

# Example
```JAVASCRIPT
import EventEmitter from '@neomasterr/event-emitter';

const ev = new EventEmitter();

ev.on('init', (foo, bar) => {
    console.log(foo, bar);
});

ev.emit('init', 'foo', 'bar');
```
npm package: @neomasterr/eventer
Description: Liteweight EventEmitter JavaScript Class
Author: neomasterr
Latest version: 1.0.1

[![npm](https://img.shields.io/npm/v/eventer.svg?style=flat-square)](https://www.npmjs.org/eventer)

# Eventer

Simple lightweight inheritable dependency free event emitter with minimal footprint

# Example
```JAVASCRIPT
import Eventer from '@neomasterr/eventer';

const ev = new Eventer();

ev.on('init', (foo, bar) => {
    console.log(foo, bar);
});

ev.emit('init', 'foo', 'bar');
```

# Inheritance (mixin)
```JAVASCRIPT
///////////////////////////
// my-super-component.js //
///////////////////////////
import {EventerMixin} from '@neomasterr/eventer';

function MySuperComponent(options = {on: {}}) {
    EventerMixin.call(this, options.on);

    // typeof this.eventer == 'Eventer'

    this.emit('init'); // or this.eventer.emit('init');

    setTimeout(() => {
        this.emit('init:after');
    }, 1000);
}

// mixin
Object.assign(MySuperComponent.prototype, EventerMixin.prototype);

// prototype chaining
Object.defineProperty(MySuperComponent.prototype, 'constructor', {
    value: MySuperComponent,
    writable: true,
    enumerable: false,
});

/////////////
// page.js //
/////////////
import MySuperComponent from './my-super-component';

const component = new MySuperComponent({
    on: {
        init: () => {
            console.log('Hello world!');
        },
    },
});

component.on('init:after', () => {
    console.log('After init');
});
```
npm package: @neomasterr/scroll
Description: Scroll component for browser window
Author: neomasterr
Latest version: 1.0.4

[![npm](https://img.shields.io/npm/v/@neomasterr/scroll.svg?style=flat-square)](https://www.npmjs.org/@neomasterr/scroll)

# scroll

## Install
```
npm install @neomasterr/scroll
```

## Usage
### Example 1
default behaviour
```JAVASCRIPT
import Scroll from '@neomasterr/scroll';

Scroll.to(document.getElementById('foo'));
```

### Example 2
custom options
```JAVASCRIPT
import Scroll from '@neomasterr/scroll';

Scroll.to(document.getElementById('foo'), {
    time: 2.0,
    fps: 60,
    offsetY: 500,
    interruptable: false,
});
```

### Example 3
callback (promise)
```JAVASCRIPT
import Scroll from '@neomasterr/scroll';

Scroll.to(document.getElementById('foo')).then(() => {
    // scroll done
}).catch(() => {
    // scroll interrupted    
});
```
npm package: @neome/widget
Description: Neome widget is a JavaScript library that helps you integrate the Neome app into your project.
Author: neomenta
Latest version: 0.0.5

<p align="center">
    <img src="https://web.orgbeat.com/android-chrome-512x512.png" width="256" height="256" alt="neome"> 
</p>

<p align="center">
<a href="https://www.npmjs.com/package/@neome/widget"><img src="https://img.shields.io/npm/v/@neome/widget.svg" alt="version"></a>
<a href="https://www.npmjs.com/package/@neome/widget"><img src="https://img.shields.io/npm/dw/@neome/widget.svg" alt="downloads"></a>
<a href="https://www.jsdelivr.com/package/npm/@neome/widget"><img src="https://data.jsdelivr.com/v1/package/npm/@neome/widget/badge" alt="cdn downloads"></a>
</p>

## Neome widget

Neome widget is a JavaScript library that helps you integrate the Neome app into your project.

To know how to use it, follow this documentation: https://www.neome.ai/reference/widget