select: кастомные модификаторы и атрибуты для button

[belozer]

block('select').elem('button')(
    mods()(function() {
        var mods = this.mods;
        return {
            size : mods.size,
            theme : mods.theme,
            view : mods.view,
            focused : mods.focused,
            disabled : mods.disabled,
            checked : mods.mode !== 'radio' && !!this._checkedOptions.length
        }
    }),
    attrs()(function() {
        var mods = this.mods;
        return {
            role : 'listbox',
            'aria-owns' : this._optionIds.join(' '),
            'aria-multiselectable' : mods.mode === 'check'? 'true' : undefined,
            'aria-labelledby' : this._selectTextId
        },
    }),
    replace()(function() {
        var select = this._select,
            mods = this.mods;

        return {
            block : 'button',
            mix : { block : this.block, elem : this.elem },
            mods : apply('mods'),
            attrs : apply('attrs'),
            id : select.id,
            tabIndex : select.tabIndex,
            content : [
                apply('content'),
                { block : 'icon', mix : { block : 'select', elem : 'tick' } }
            ]
        };
    }),
    def()(function() {
        return applyNext({ _selectTextId : this.generateId() });
    })
);

Полезно для переопределения на проекте как-то так.

block('select').mod('prefixed').elem('button')(
    mods()(function() { return this.extend(applyNext(), { prefixed : true })})
);

@veged @tadatuta

[belozer]

Возможно моды mods и attrs не самые удачные и лучше использовать mode('button-attrs'), mode('button-mods')

[belozer]

Возможно стоит даже и базовый код button вынести в моду.

block('select').elem('button')(
    mode('button-mods')(function() {
        var mods = this.mods;
        return {
            size : mods.size,
            theme : mods.theme,
            view : mods.view,
            focused : mods.focused,
            disabled : mods.disabled,
            checked : mods.mode !== 'radio' && !!this._checkedOptions.length
        }
    }),
    mode('button-attrs')(function() {
        var mods = this.mods;
        return {
            role : 'listbox',
            'aria-owns' : this._optionIds.join(' '),
            'aria-multiselectable' : mods.mode === 'check'? 'true' : undefined,
            'aria-labelledby' : this._selectTextId
        },
    }),
    mode('button')(function() {
        var select = this._select,
            mods = this.mods;

        return {
            block : 'button',
            mix : { block : this.block, elem : this.elem },
            mods : apply('button-mods'),
            attrs : apply('button-attrs'),
            id : select.id,
            tabIndex : select.tabIndex,
            content : [
                apply('content'),
                { block : 'icon', mix : { block : 'select', elem : 'tick' } }
            ]
        };
    }),

    replace()(function() {
        return apply('button');
    }),

    def()(function() {
        return applyNext({ _selectTextId : this.generateId() });
    })
);

[belozer]

Пример использования:

block('select').mod('prefixed')(
    def()((node, ctx) => {
        return applyNext({
            _textPrefix : ctx.textPrefix
        });
    }),

    elem('button')(
        mode('button-mods')((node) => {
            return node.extend(applyNext(), { prefixed : true });
        }),

        mode('button')((node) => {
            return node.extend(applyNext(), { textPrefix : node._textPrefix });
        })
    )
);