parent
41b8f3b24a
commit
83a0383c5b
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tiny Components | Loading</title>
|
||||
<link rel="icon" href="data:,">
|
||||
<link href="/example.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<div class="bar">
|
||||
<div class="bar__start">
|
||||
<h1 class="m-top-4 m-bottom-4 h4">
|
||||
@tiny-components/sidebar-form
|
||||
</h1>
|
||||
</div>
|
||||
<div class="bar__main justify-end">
|
||||
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/sidebar-form" rel="noopener" target="_blank">
|
||||
Gitea
|
||||
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-gitea"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/sidebar-form" rel="noopener" target="_blank">
|
||||
Github
|
||||
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-github"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="m-top-5">
|
||||
<example-sidebar-form></example-sidebar-form>
|
||||
<example-button></example-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="/example.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,13 @@
|
||||
{
|
||||
"/spritemap.js": "/spritemap.js",
|
||||
"/example.js": "/example.js",
|
||||
"/.css": "/.css",
|
||||
"/IBMPlexMono-Bold.eot": "/IBMPlexMono-Bold.eot",
|
||||
"/IBMPlexMono-Bold.ttf": "/IBMPlexMono-Bold.ttf",
|
||||
"/IBMPlexMono-Bold.woff": "/IBMPlexMono-Bold.woff",
|
||||
"/IBMPlexMono-Bold.woff2": "/IBMPlexMono-Bold.woff2",
|
||||
"/IBMPlexMono.eot": "/IBMPlexMono.eot",
|
||||
"/IBMPlexMono.ttf": "/IBMPlexMono.ttf",
|
||||
"/IBMPlexMono.woff": "/IBMPlexMono.woff",
|
||||
"/IBMPlexMono.woff2": "/IBMPlexMono.woff2"
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
(self.webpackChunk_tiny_components_sidebar_form=self.webpackChunk_tiny_components_sidebar_form||[]).push([[355],{256:()=>{}}]);
|
||||
|
After Width: | Height: | Size: 69 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "@tiny-components/sidebar-form",
|
||||
"version": "0.1.0",
|
||||
"description": "sidebar to handle forms",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:node001-net/tiny-components-sidebar-form.git"
|
||||
},
|
||||
"author": "Björn Hase",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@riotjs/observable": "^4.1.1",
|
||||
"@tiny-components/loading": "^0.1.0",
|
||||
"@tiny-components/plain-ui": "^0.6.0",
|
||||
"riot": "^6.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@riotjs/webpack-loader": "^6.0.0",
|
||||
"laravel-mix": "^6.0.43",
|
||||
"laravel-mix-purgecss": "^6.0.0",
|
||||
"sass": "^1.51.0",
|
||||
"sass-loader": "^12.6.0",
|
||||
"svg-spritemap-webpack-plugin": "^4.4.0"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
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)
|
||||
riot.mount('example-sidebar-form')
|
||||
|
||||
import ExampleButton from './exampleButton.riot'
|
||||
|
||||
riot.register('example-button', ExampleButton)
|
||||
riot.mount('example-button')
|
||||
@ -0,0 +1,4 @@
|
||||
@import
|
||||
'../node_modules/@tiny-components/plain-ui/src/scss/plain-ui',
|
||||
|
||||
'styles.scss';
|
||||
@ -0,0 +1,28 @@
|
||||
<example-button>
|
||||
<button class="button" onclick={ (event) => { handleClick(event) } }>
|
||||
Open
|
||||
</button>
|
||||
|
||||
<script>
|
||||
|
||||
// store for sidebar
|
||||
import sidebarStore from './exampleStore.js'
|
||||
|
||||
/**
|
||||
* example to open 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 {
|
||||
|
||||
handleClick() {
|
||||
sidebarStore.trigger('open')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</example-button>
|
||||
@ -0,0 +1,88 @@
|
||||
<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>
|
||||
|
||||
<script>
|
||||
|
||||
// mixins
|
||||
import sidebar from './sidebarFormMixin.js'
|
||||
|
||||
// store for sidebar
|
||||
import sidebarStore from './exampleStore.js'
|
||||
|
||||
/**
|
||||
* example to show tiny-sidebar
|
||||
*
|
||||
* @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
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
onMounted() {
|
||||
|
||||
// adding event for open sidebar
|
||||
sidebarStore.on('open', () => {
|
||||
this.state.isOpen = true
|
||||
this.update()
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</example-sidebar-form>
|
||||
@ -0,0 +1,23 @@
|
||||
/**
|
||||
* example store for trigger open
|
||||
*
|
||||
* @author Björn Hase
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/sidebar-form
|
||||
*
|
||||
*/
|
||||
|
||||
import observable from '@riotjs/observable'
|
||||
|
||||
export default observable({
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {object} data
|
||||
*
|
||||
*/
|
||||
open() {
|
||||
this.trigger('open')
|
||||
}
|
||||
|
||||
})
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 967 B |
@ -0,0 +1,95 @@
|
||||
<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>
|
||||
@ -0,0 +1,44 @@
|
||||
/**
|
||||
* Mixin to Extend a Sidebar
|
||||
*
|
||||
* @author Björn Hase
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/sidebar-form
|
||||
*
|
||||
*/
|
||||
|
||||
export default {
|
||||
|
||||
state: {
|
||||
isOpen: false, // if sidebar is open
|
||||
isLoading: false // if loading is shown
|
||||
},
|
||||
|
||||
/**
|
||||
* close current sidebar
|
||||
*
|
||||
*/
|
||||
handleClose() {
|
||||
this.state.isOpen = false
|
||||
this.reset()
|
||||
|
||||
this.update()
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
onBeforeMount() {
|
||||
this.reset()
|
||||
},
|
||||
|
||||
/**
|
||||
* function to reset current form data
|
||||
* will call before Mount and after close
|
||||
*
|
||||
*/
|
||||
reset() {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
/**
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.sidebar {
|
||||
&__body {
|
||||
.loading-wrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,83 @@
|
||||
const mix = require('laravel-mix')
|
||||
const path = require('path')
|
||||
|
||||
require('laravel-mix-purgecss')
|
||||
|
||||
// plugins
|
||||
const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin')
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Mix Asset Management
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Mix provides a clean, fluent API for defining some Webpack build steps
|
||||
| for your Laravel applications. By default, we are compiling the CSS
|
||||
| file for the application as well as bundling up all the JS files.
|
||||
|
|
||||
*/
|
||||
|
||||
|
||||
mix.webpackConfig({
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.riot$/,
|
||||
use: [{
|
||||
loader: '@riotjs/webpack-loader',
|
||||
options: {
|
||||
hot: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
]},
|
||||
plugins: [
|
||||
new SvgSpritemapPlugin([
|
||||
'node_modules/@tiny-components/plain-ui/src/icons/mono-icons/svg/*.svg',
|
||||
'src/icons/brands/*'
|
||||
], {
|
||||
output: {
|
||||
filename: 'symbol-defs.svg',
|
||||
chunk: {
|
||||
keep: true
|
||||
},
|
||||
svgo: {
|
||||
plugins: [{
|
||||
name: 'convertStyleToAttrs',
|
||||
active: true
|
||||
},{
|
||||
name: 'removeStyleElement',
|
||||
active: true
|
||||
}, {
|
||||
name: 'removeAttrs',
|
||||
params: {
|
||||
attrs: 'fill'
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
sprite: {
|
||||
prefix: 'icon-'
|
||||
}
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
mix
|
||||
.setPublicPath('./example')
|
||||
.js('src/example.js', 'example')
|
||||
.sass('src/example.scss', 'example')
|
||||
.purgeCss({
|
||||
extend: {
|
||||
content: [
|
||||
path.join(__dirname, 'src/**.riot'),
|
||||
path.join(__dirname, 'example/index.html')
|
||||
]
|
||||
}
|
||||
})
|
||||
.options({
|
||||
terser: {
|
||||
extractComments: false,
|
||||
},
|
||||
processCssUrls: false
|
||||
})
|
||||
.copyDirectory('node_modules/@tiny-components/plain-ui/src/fonts/IBM*', 'example')
|
||||
Loading…
Reference in new issue