sidebar-form/src/exampleSidebarForm.riot

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

            <!-- header -->
            <tiny-sidebar-form-header title="{ !state.current.note ? 'New' : 'Edit' }" close={ (event) => { handleClose(event) }}></tiny-sidebar-form-header>

            <div class="sidebar__form">
                <form class="form" novalidate method="post" onsubmit={ (event) => { handleSubmit(event) } }>

                    <!-- body -->
                    <div class="sidebar__body">
                        <div class="field-group">
                            <label class="field-label">
                                Note
                                <textarea class="field-text" name="note"></textarea>
                            </label>
                        </div>

                        <!-- loading -->
                        <tiny-loading active={ state.isLoading }></tiny-loading>
                    </div>

                    <!-- footer -->
                    <tiny-sidebar-form-footer active={ state.isLoading }></tiny-sidebar-form-footer>

                </form>
            </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)

        import sidebarHeader from './sidebarHeader.riot'
        riot.register('tiny-sidebar-form-header', sidebarHeader)

        import sidebarFooter from './sidebarFooter.riot'
        riot.register('tiny-sidebar-form-footer', sidebarFooter)

        // store for sidebar
        import sidebarStore from './exampleStore.js'

        // mixin to extend current component
        import sidebarFormMixin from './sidebarFormMixin.js'

        /**
         *  example sidebar-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 () => {
            return {

                ...sidebarFormMixin,  // adding basic funtion for sidebar

                /**
                 *
                 *
                 */
                onMounted() {

                    // adding event for open sidebar
                    sidebarStore.on('open', () =>  {
                        this.state.isOpen = true
                        this.update()
                    })

                },

                /**
                 *  handle submit of form
                 *
                 *  @param  {object} event
                 *
                 */
                handleSubmit(event) {
                    event.preventDefault()

                    this.state.isLoading = true
                    this.update()

                    setTimeout(() => {

                        // stop loading
                        this.state.isLoading = false

                        // if button has attribute close
                        if (event.submitter.attributes.close) {
                            this.handleClose()
                        }

                        this.update()

                    }, 2500)
                },

                reset() {

                }
            }
        }

    </script>
</example-sidebar-form>