tiny-components
/
sidebar-form
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

remove sidebarForm, add styles, change logic for handle forms

Browse Source
develop
HerrHase 2 years ago
parent add58b4084
commit 9fe9a263e7
15 changed files with 366 additions and 9736 deletions
Show Stats Download Patch File Download Diff File

55
README.md
Unescape View File

@ -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 }>
<!-- slot:title -->
<span slot="title">
New
</span>
<!-- slot:header -->
<form id="example-form" class="form" slot="form" onsubmit={ (event) => { handleSubmit(event) }}>
<div class="field-group">
<label class="field-label">
Note
<textarea class="field-text" name="name"></textarea>
</label>
</div>
</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>
</tiny-sidebar-form>
<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>
```
You have to add the Mixin "sidebarFormMixin.js".

2
example/example.css
View File

File diff suppressed because one or more lines are too long

43
example/example.js
View File

File diff suppressed because one or more lines are too long

1
example/mix-manifest.json
Unescape View File

@ -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",

9731
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
Unescape View File

@ -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"
}
}

4
src/example.js
Unescape View File

@ -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)

2
src/example.scss
Unescape View File

@ -1,4 +1,4 @@
@import
'../node_modules/@tiny-components/plain-ui/src/scss/plain-ui',
'styles.scss';

74
src/exampleSidebarForm.riot
Unescape View File

@ -1,45 +1,67 @@
<example-sidebar-form>
<div class="m-top-4 m-bottom-4">
<tiny-sidebar-form form-id="example-form" open={ state.isOpen } close={ () => { handleClose() }} loading={ state.isLoading }>
<!-- slot:title -->
<span slot="title">
New
</span>
<!-- slot:header -->
<form id="example-form" class="form" slot="form" onsubmit={ (event) => { handleSubmit(event) }}>
<div class="field-group">
<label class="field-label">
Note
<textarea class="field-text" name="name"></textarea>
</label>
</div>
</form>
</tiny-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>
// mixins
import sidebar from './sidebarFormMixin.js'
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 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() {
}
}
}

16
src/sidebarFooter.riot
Unescape View File

@ -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>

95
src/sidebarForm.riot
Unescape View File

@ -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>

38
src/sidebarFormMixin.js
Unescape View File

@ -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
isLoading: false // if loading is shown
open: false, // if sidebar is open
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() {
this.reset()
getCssClasses() {
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()
}
}

14
src/sidebarHeader.riot
Unescape View File

@ -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>

16
src/styles.scss
Unescape View File

@ -1,7 +1,7 @@
/**
*
*
*
*
*/
.sidebar {
@ -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;
}
}

3
webpack.mix.js
Unescape View File

@ -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')

Write Preview
Loading…
Cancel
Save