ojs-components v1.7.1

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'

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:

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:

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:

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:

We also have defined methods for use on our checkbox component like in others:

• disabled
• enabled
• getId