remove sidebarForm, add styles, change logic for handle forms

README.md

@@ -2,7 +2,12 @@
 
 Created with [Riot.js](https://riot.js.org)
 
-Handle Form in a Sidebar. Sidebar is from [Plain-UI](https://plain-ui.com).
+Handle Form in a Sidebar. Styles for Sidebar based on [Plain-UI](https://plain-ui.com).
+
+## Changelog
+
+0.1.0 Init
+1.0.0 Remove "SidebarForm" and build a more basic Solution, that is also easier to adept 
 
 ## Install
 
@@ -12,27 +17,39 @@ npm install @tiny-components\sidebar-form --save
 
 ## How to use
 
-Create your own Component that will include a form. The Tiny Sidebar Form uses Slot.
+Create your own Component and add tiny
 
 ```js
-<tiny-sidebar-form form-id="example-form" open={ state.isOpen } close={ () => { handleClose() }} loading={ state.isLoading }>
+<div class={ getCssClasses() }>
+
+    <div class="sidebar__inner">
 
-    <!-- slot:title -->
+        <!-- header -->
-    <span slot="title">
+        <tiny-sidebar-form-header title="{ !state.current.note ? 'New' : 'Edit' }" close={ (event) => { handleClose(event) }}></tiny-sidebar-form-header>
-        New
-    </span>
 
-    <!-- slot:header -->
+        <div class="sidebar__form">
-    <form id="example-form" class="form" slot="form" onsubmit={ (event) => { handleSubmit(event) }}>
+            <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="name"></textarea>
+                            <textarea class="field-text" name="note"></textarea>
                         </label>
                     </div>
-    </form>
 
-</tiny-sidebar-form>
+                    <!-- 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>
 ```
 
 You have to add the Mixin "sidebarFormMixin.js".

example/mix-manifest.json

@@ -1,5 +1,6 @@
 {
     "/spritemap.js": "/spritemap.js",
+    "/symbol-defs.svg": "/symbol-defs.svg",
     "/example.js": "/example.js",
     "/.css": "/.css",
     "/IBMPlexMono-Bold.eot": "/IBMPlexMono-Bold.eot",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiny-components/sidebar-form",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "sidebar to handle forms",
   "repository": {
     "type": "git",
@@ -12,14 +12,14 @@
     "@riotjs/observable": "^4.1.1",
     "@tiny-components/loading": "^0.1.0",
     "@tiny-components/plain-ui": "^0.6.0",
-    "riot": "^6.1.2"
+    "riot": "^7.0.6"
   },
   "devDependencies": {
     "@riotjs/webpack-loader": "^6.0.0",
     "laravel-mix": "^6.0.43",
     "laravel-mix-purgecss": "^6.0.0",
-    "sass": "^1.51.0",
+    "sass": "^1.54.9",
     "sass-loader": "^12.6.0",
-    "svg-spritemap-webpack-plugin": "^4.4.0"
+    "svg-spritemap-webpack-plugin": "^4.5.0"
   }
 }

src/example.js

@@ -1,9 +1,5 @@
 import * as riot from 'riot'
 
-// tiny sidebar
-import TinySidebarForm from './sidebarForm.riot'
-riot.register('tiny-sidebar-form', TinySidebarForm)
-
 import ExampleSidebarForm from './exampleSidebarForm.riot'
 
 riot.register('example-sidebar-form', ExampleSidebarForm)

src/exampleSidebarForm.riot

@@ -1,45 +1,67 @@
 <example-sidebar-form>
-    <div class="m-top-4 m-bottom-4">
+    <div class={ getCssClasses() }>
-        <tiny-sidebar-form form-id="example-form" open={ state.isOpen } close={ () => { handleClose() }} loading={ state.isLoading }>
+        <div class="sidebar__inner">
 
-            <!-- slot:title -->
+            <!-- header -->
-            <span slot="title">
+            <tiny-sidebar-form-header title="{ !state.current.note ? 'New' : 'Edit' }" close={ (event) => { handleClose(event) }}></tiny-sidebar-form-header>
-                New
-            </span>
 
-            <!-- slot:header -->
+            <div class="sidebar__form">
-            <form id="example-form" class="form" slot="form" onsubmit={ (event) => { handleSubmit(event) }}>
+                <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="name"></textarea>
+                                <textarea class="field-text" name="note"></textarea>
                             </label>
                         </div>
-            </form>
 
-        </tiny-sidebar-form>
+                        <!-- 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>
 
-        // mixins
+        import * as riot from 'riot'
-        import sidebar from './sidebarFormMixin.js'
+
+        // 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 to show tiny-sidebar
+         *  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 {
 
-                ...sidebar,  // adding basic funtion for sidebar
+                ...sidebarFormMixin,  // adding basic funtion for sidebar
 
                 /**
                  *
@@ -56,7 +78,7 @@
                 },
 
                 /**
-                 *
+                 *  handle submit of form
                  *
                  *  @param  {object} event
                  *
@@ -80,6 +102,10 @@
                         this.update()
 
                     }, 2500)
+                },
+
+                reset() {
+
                 }
             }
         }

src/sidebarFooter.riot

@@ -0,0 +1,16 @@
+<tiny-sidebar-form-footer>
+    <div class="sidebar__footer">
+        <button class="button m-bottom-0" type="submit" disabled={ props.active }>
+            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" disabled={ props.active } close>
+            Save and Close
+            <svg class="icon fill-success p-left-3" aria-hidden="true">
+                <use xlink:href="symbol-defs.svg#icon-check"></use>
+            </svg>
+        </button>
+    </div>
+</tiny-sidebar-form-footer>

src/sidebarForm.riot

@@ -1,95 +0,0 @@
-<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>

src/sidebarFormMixin.js

@@ -1,7 +1,7 @@
 /**
- *  Mixin to Extend a Sidebar
+ *  mixin extends sidebarForm
  *
- *  @author Björn Hase
+ *  @author Björn Hase <me@herr-hase.wtf>
  *  @license http://opensource.org/licenses/MIT The MIT License
  *  @link https://gitea.node001.net/tiny-components/sidebar-form
  *
@@ -10,8 +10,11 @@
 export default {
 
     state: {
-        isOpen: false,    // if sidebar is open
+        open: false,       // if sidebar is open
-        isLoading: false  // if loading is shown
+        isLoading: false,  // if loading is shown
+        current: {         // current data of form
+
+        }
     },
 
     /**
@@ -19,26 +22,41 @@ export default {
      *
      */
     handleClose() {
-        this.state.isOpen = false
         this.reset()
 
+        this.state.isOpen = false
         this.update()
     },
 
     /**
+     *  getting css classes for sidebar
      *
      *
+     *  @return {String}
+     *
      */
-    onBeforeMount() {
+    getCssClasses() {
-        this.reset()
+        const classes = [
+            'sidebar'
+        ]
+
+        if (this.state.isOpen === true) {
+            classes.push('sidebar--open')
+        }
+
+        return classes.join(' ')
     },
 
     /**
-     *  function to reset current form data
+     *
-     *  will call before Mount and after close  
+     *
      *
      */
-    reset() {
+    onBeforeMount() {
+        if (!this.hasOwnProperty('reset')) {
+            throw new Error('reset-Function in Form is missing')
+        }
 
+        this.reset()
     }
 }

src/sidebarHeader.riot

@@ -0,0 +1,14 @@
+<tiny-sidebar-form-header>
+    <div class="bar">
+        <div class="bar__main">
+            { props.title }
+        </div>
+        <div class="bar__end">
+            <button class="button button--icon button--hover-icon-contrast m-top-3 m-bottom-3" type="button" onclick={ props.close }>
+                <svg class="icon fill-danger" aria-hidden="true">
+                    <use xlink:href="/symbol-defs.svg#icon-close"></use>
+                </svg>
+            </button>
+        </div>
+    </div>
+</tiny-sidebar-form-header>

src/styles.scss

@@ -21,4 +21,18 @@
             }
         }
     }
+
+    &__form {
+        height: 100%;
+        overflow-y: scroll;
+        padding-bottom: calc(72px + 1.5em); // 72px is the minium height for footer
+    }
+
+    &__footer {
+        bottom: -1px;
+    }
+
+    .bar {
+        border-radius: 0;
+    }
 }

webpack.mix.js

@@ -68,6 +68,9 @@ mix
     .sass('src/example.scss', 'example')
     .purgeCss({
         extend: {
+            safelist: [
+                /sidebar/
+            ],
             content: [
                 path.join(__dirname, 'src/**.riot'),
                 path.join(__dirname, 'example/index.html')