ojs-components

Module with ready to use components. Like input, button, select and more

Quick start

npm i ojs-components

Components:

• OInput

// 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

// 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

// 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

// 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

// 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

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

// 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

// 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