sidebar-form/src/sidebarForm.riot

<tiny-sidebar-form>
    <div class={ getCssClasses() }>
        <div class="sidebar__inner">

            <!-- header -->
            <div class="bar">
                <div class="bar__main">
                    <slot name="title" />
                </div>
                <div class="bar__end">
                    <button class="button button--transparent" type="button" onclick={ (event) => { handleClose(event) } }>
                        <svg class="icon fill-danger fill-text-hover" aria-hidden="true">
                            <use xlink:href="/symbol-defs.svg#icon-close"></use>
                        </svg>
                    </button>
                </div>
            </div>

            <!-- body -->
            <div class="sidebar__body">
                <slot name="form" />
                <tiny-loading active={ props.loading }></tiny-loading>
            </div>

            <!-- footer -->
            <div class="sidebar__footer">
                <button class="button m-bottom-0" type="submit" form="{ props.formId }" disabled={ props.loading }>
                    Save
                    <svg class="icon fill-success p-left-3" aria-hidden="true">
                        <use xlink:href="/symbol-defs.svg#icon-check"></use>
                    </svg>
                </button>
                <button class="button m-bottom-0" type="submit" form="{ props.formId }" disabled={ props.loading } close>
                    Save and Close
                    <svg class="icon fill-success p-left-3" aria-hidden="true">
                        <use xlink:href="/symbol-defs.svg#icon-arrow-right"></use>
                    </svg>
                </button>
            </div>

        </div>
    </div>

    <script>

        import * as riot from 'riot'

        // adding TinyLoading
        import TinyLoading from '@tiny-components/loading/src/loading.riot'
        riot.register('tiny-loading', TinyLoading)

        /**
         *  Sidebar Form has slot:title and slot:form
         *
         *  Button need props.formId to trigger submit in slot:form
         *
         *
         *  @author Björn Hase
         *  @license http://opensource.org/licenses/MIT The MIT License
         *  @link https://gitea.node001.net/tiny-components/sidebar-form
         *
         */

        export default {

            /**
             *
             *
             */
            handleClose() {
                this.props.close()
            },

            /**
             *  getting css classes for sidebar
             *
             *
             *  @return {String}
             */
            getCssClasses() {
                const classes = [
                    'sidebar'
                ]

                if (this.props.open === true) {
                    classes.push('sidebar--open')
                }

                return classes.join(' ')
            }

        }

    </script>
</tiny-sidebar-form>