@sodacore/ui/dist/elements/base.js

Sodacore UI is a powerful JSON-based DSL for describing web pages that can be rendered by a frontend JavaScript framework.

export default class BaseElement {
    constructor(label) {
        this.label = label;
        this.component = 'text';
        this.key = null;
        this.area = null;
        this.classes = [];
        this.styles = {};
        this.attributes = {};
        this.value = null;
    }
    setKey(key) {
        this.key = key;
        return this;
    }
    getKey() {
        return this.key;
    }
    setLabel(label) {
        this.label = label;
        return this;
    }
    getLabel() {
        return this.label;
    }
    setArea(area) {
        this.area = area;
        return this;
    }
    getArea() {
        return this.area;
    }
    addClass(className) {
        this.classes.push(className);
        return this;
    }
    removeClass(className) {
        this.classes = this.classes.filter(c => c !== className);
        return this;
    }
    hasClass(className) {
        return this.classes.includes(className);
    }
    setClasses(classes) {
        this.classes = classes;
        return this;
    }
    getClasses() {
        return this.classes;
    }
    addStyle(key, value) {
        this.styles[key] = value;
        return this;
    }
    removeStyle(key) {
        delete this.styles[key];
        return this;
    }
    hasStyle(key) {
        return key in this.styles;
    }
    setStyles(styles) {
        this.styles = styles;
        return this;
    }
    getStyles() {
        return this.styles;
    }
    addAttribute(key, value) {
        this.attributes[key] = value;
        return this;
    }
    removeAttribute(key) {
        delete this.attributes[key];
        return this;
    }
    hasAttribute(key) {
        return key in this.attributes;
    }
    setAttributes(attributes) {
        this.attributes = attributes;
        return this;
    }
    getAttributes() {
        return this.attributes;
    }
    setValue(value) {
        this.value = value;
        return this;
    }
    getValue() {
        return this.value;
    }
    toJSON() {
        return {
            component: this.component,
            key: this.key ?? '',
            area: this.area ?? null,
            label: this.label ?? '',
            classes: this.classes,
            styles: this.styles,
            attributes: this.attributes,
            value: this.value ?? null,
        };
    }
}