# ojs-components

> Module with ready to use components

Latest version **1.7.1** (published 2021-11-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install ojs-components
pnpm add ojs-components
yarn add ojs-components
bun add ojs-components
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.7.1 |
| Published | 2021-11-11 |
| First published | 2021-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 71.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Maciek Swiechowicz |
| Maintainers | mswiechowicz, kstodolak |
| Keywords | ojs, orangutanjs, oComponents, ojs-components |

## Links

- npm: https://www.npmjs.com/package/ojs-components
- Repository: https://github.com/OrangutanJS/ojs-components
- Homepage: https://github.com/OrangutanJS/ojs-components#readme
- Issues: https://github.com/OrangutanJS/ojs-components/issues
- npm.io page: https://npm.io/package/ojs-components

## Dependencies (1)

- [ojs-core](https://npm.io/package/ojs-core.md) ^1.5.0

## Alternatives

- [localforage](https://npm.io/package/localforage.md) — 6.2M weekly downloads
- [localforage-observable](https://npm.io/package/localforage-observable.md) — 30.8K weekly downloads
- [@y/y](https://npm.io/package/@y/y.md) — 30.1K weekly downloads
- [@metaobjectsdev/render](https://npm.io/package/@metaobjectsdev/render.md) — 3.5K weekly downloads
- [@ledgerhq/coin-algorand](https://npm.io/package/@ledgerhq/coin-algorand.md) — 1.1K weekly downloads

## Recent versions

- 1.7.1 (latest) — 2021-11-11
- 1.7.0 — 2021-11-11
- 1.6.14 — 2021-10-11
- 1.6.13 — 2021-10-10
- 1.6.12 — 2021-10-10
- 1.6.11 — 2021-10-10
- 1.6.10 — 2021-10-10
- 1.6.9 — 2021-10-10
- 1.6.8 — 2021-10-10
- 1.6.7 — 2021-10-10
- 1.6.6 — 2021-10-10
- 1.6.5 — 2021-10-09
- 1.6.4 — 2021-10-09
- 1.6.3 — 2021-10-09
- 1.6.2 — 2021-10-09
- … 7 more at https://npm.io/package/ojs-components/versions

## README

# ojs-components
Module with ready to use components. Like input, button, select and more
#### Quick start
```
npm i ojs-components
```
##### Components:
* OInput

```js
// import 
import { OInput } from 'ojs-components';

// declaration
const store = {
    example: ''
}
const input = new OInput({
    label: 'Example Input',
    type: 'text',
    db: store,
    name: 'example'
    change: () => { /* fired when input value change */ }
})

// use
document.body.appendChild(
    input.init()
);
```
OInput needs only one argument: configObject with properties

Value in the store object will be replaced everytime when input value changes. Attribute value is defined as store['example']. When we type something in input like: 'hello', result will be: store['example'] = 'hello'

| Property   |      description      | Type |
|:------------:|:---------------------:|:------:|
| attributes | custom attributes to input. For example: [ { 'placeholder': 'exampleText' } ] | array
| change / keyup / focus / blur etc. | fire event will run defined function | function
| db         | defined store object | object
| disabled | defined input is disabled or no | boolean
| events | custom events. For example: [ { name: 'change', fn: () => {} } ] | array
| index | When name is array, we can define index of input value | string/number
| inputClass | defined class name of input. "ojsInput__input" by default | string
| inputStyle | defined inline styles of input | string
| label      | defines text above the input - label | string
| labelStyle | defined inline styles of label | string
| labelClass | defined class name of label. "ojsInput__label" by default | string
| name       | defined name that is declared in db | string
| placeholder | defined input placeholder | string
| required | defined input is required or no | boolean
| type       | defined type of input: text, number, password etc. text is declared by default | string

We also have defined methods for use on our input component:
* disabled
* enabled
* getId

```js
// For example: disabled input when we typed something

const input = new OInput({
    label: 'Example Input',
    type: 'text',
    db: store,
    name: 'example'
    change: () => input.disabled(); 
})

// and enable when you want just by use: input.enabled()
```

---
* OButton
```js
// import
import { OButton } from 'ojs-components';

// declaration 
const button = new OButton({
    text: 'Example button',
    type: 'primary',
    click: () => {
        // run this script on click
    },
});

// use
document.body.appendChild(
    button.init()
);
```
OButton like OInput need one argument: configObject. There are list of properties:

| Property     |      description      | Type   |
|:------------:|:---------------------:|:------:|
| attributes   | custrom attributes. For example: [ { 'name': 'hello' } ] | array
| classNames   | your custom classes for button | string
| click and other events | run function while event happen | function
| disabled     | defined if button is disabled  | boolean
| style        | defined inline styles  | string
| submit       | if true, button will be type submit. type is button by default | boolean
| text         | defined button text   | string |
| type         | there are few types: primary, secondary, primary-confirm, primary-cancel, secondary-confirm, secondary-cancel, link, link-confirm, link-cancel. There specified style of button   | string |

We also have defined methods for use on our button component: 
* textToggle
* disabled
* enabled
* getId
```js
// For example, change text from On to Off when we clicking button

const button = new OButton({
    text: 'On',
    type: 'primary',
    click: () => {
        button.textToggle('On', 'Off');
        // we can also disabled this button after click
        button.disabled();
    },
});

// and enable when you want just by use: button.enabled()
```
---
* OSelect
```js
// import
import { OSelect } from 'ojs-components';

// declaration 
const store = {
    fruit: ''
}
const select = new OSelect({
    text: 'Your favourite fruit?',
    type: 'primary',
    name: 'fruit',
    db: store,
    options: [
        { text: 'Apple', value: 'apple'}
        { text: 'Pear', value: 'pear'}
    ]
});

// use
document.body.appendChild(
    select.init()
);
```
OSelect like others need one argument: configObject. There are list of properties:

| Property   |      description      | Type |
|:------------:|:---------------------:|:------:|
| attributes | custom attributes to input. For example: [ { 'placeholder': 'exampleText' } ] | array
| change / click / focus / blur etc. | fire event will run defined function | function
| db         | defined store object | object
| disabled | defined input is disabled or no | boolean
| events | custom events. For example: [ { name: 'change', fn: () => {} } ] | array
| index | When name is array, we can define index of input value | string/number
| label      | defines text above the input - label | string
| labelClass | defined class name of label. "ojsInput__label" by default | string
| labelStyle | defined inline styles of label | string
| name       | defined name that is declared in db | string
| options    | options list for select: [ { text: 'Apple', value: 'apple' } ] | array
| required   | defined select is required or no | boolean
| selectClass | defined class name of select. "ojsSelect" by default | string
| selectStyle | defined inline styles of select | string

We also have defined methods for use on our select component like in button:
* disabled
* enabled
* getId
```js
// example: disable select component after select option
const select = new OSelect({
    text: 'Your favourite fruit?',
    type: 'primary',
    name: 'fruit',
    db: store,
    options: [
        { text: 'Apple', value: 'apple'}
        { text: 'Pear', value: 'pear'}
    ]
    change: () => select.disabled();
    
});
```
---
* OCheckbox

example:
```js
// import
import { OCheckbox } from 'ojs-components';

// declaration 
const store = {
    'likeApples': false,
}
const checkbox = new OCheckbox({
    label: 'I like apples',
    name: 'likeApples',
    db: store,
    change: () => // do something,
});

// use
document.body.appendChild(
    checkbox.init()
);
```
Properties list:

| Property   |      description      | Type | 
|:------------:|:---------------------:|:------:|
| change / click / focus / blur etc. | fire event will run defined function | function
| checkboxClass | defined class name of checkbox. | string |
| checkboxStyle | defined inline styles of checkbox. | string |
| db         | defined store object | object
| disabled | defined input is disabled or no | boolean
| events | custom events. For example: [ { name: 'change', fn: () => {} } ] | array
| label      | defines text next to the checkbox - label | string
| labelClass | defined class name of label. "ojsCheckbox__label" by default | string
| labelStyle | defined inline styles of label | string
| name       | defined name that is declared in db | string
| required   | defined select is required or no | boolean
| spanClass | defined class name of span. "ojsCheckbox__span" by default | string
| spanStyle | defined inline styles of span | string

We also have defined methods for use on our checkbox component like in others:
* disabled
* enabled
* getId
---
* ORadio

```js
// import
import { ORadio } from 'ojs-components';

// declaration 
const store = {
    'favouriteFruit': '',
}

const oRadioFirst = new ORadio({
    label: 'Apple',
    value: 'Apple',
    name: 'favouriteFruit',
    db: store,
    change: () => // change function
});
const oRadioSecond = new ORadio({
    label: 'Pear',
    // if u don't add value property - input will set value = label, so here value will be Pear
    name: 'favouriteFruit',
    db: store,
    change: () => // change function
});

// use
document.body.appendChild(
    oRadioFirst.init()
    oRadioSecond.init()
);
```
Properties list:

| Property   |      description      | Type | 
|:------------:|:---------------------:|:------:|
| change / click / focus / blur etc. | fire event will run defined function | function
| db         | defined store object | object
| disabled | defined input is disabled or no | boolean
| events | custom events. For example: [ { name: 'change', fn: () => {} } ] | array
| label      | defines text next to the checkbox - label | string
| labelClass | defined class name of label. "ojsCheckbox__label" by default | string
| labelStyle | defined inline styles of label | string
| name       | defined name that is declared in db | string
| radioClass | defined class name of radio. | string |
| radioStyle | defined inline styles of checkbox. | string |
| required   | defined select is required or no | boolean
| spanClass | defined class name of span. "ojsCheckbox__span" by default | string
| spanStyle | defined inline styles of span | string
| value | optional, if not defined value = label | string

We also have defined methods for use on our checkbox component like in others:
* disabled
* enabled
* getId

---
_Source: https://npm.io/package/ojs-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._