oda-framework/components/buttons/checkbox/checkbox.js

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

ODA({is: "oda-checkbox", extends: 'oda-icon',
    imports: ['@oda/icon'],
    attached(){ // todo: временное решение
        this.icon = this.icons[this.state];
    },
    $public: {
        value: {
            $type: Boolean,
            set(n) {
                if (!this.threeStates)
                    this.state = n ? 'checked' : 'unchecked';
            }
        },
        state: {
            $list: ['unchecked', 'checked', 'indeterminate'],
            $def: 'unchecked',
            set(n){
                this.value = n === 'checked';
                this.icon = this.icons[n]; // todo: временное решение
            }
        },
        threeStates: {
            $def: false,
            set(n, o){
                if (o && this.state === 'indeterminate')
                    this.state = 'unchecked';
            }
        },
    },
    get states(){
        return this.props.state.list;
    },
    icons:{
        checked: 'icons:check-box',
        unchecked: 'icons:check-box-outline-blank',
        indeterminate: 'icons:check-box-indeterminate'
    },
     $listeners: {
        tap(e) {
            // e.stopPropagation();
            if (this.threeStates) {
                let newStateIndex = (this.states.indexOf(this.state) + 1) % 3;
                this.state = this.states[newStateIndex];
            } else
                this.value = !this.value;
        }
    }
});