change handling with store

main v1.2.0
HerrHase 2 months ago
parent 2e47ea5530
commit 4f2b1af43b

@ -0,0 +1 @@
@tiny-components:registry=https://git.node001.net/api/packages/tiny-components/npm/

@ -1,6 +1,6 @@
MIT License MIT License
Copyright (c) <year> <copyright holders> Copyright (c) 2023 Björn Hase, me@herr-hase.wtf
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

@ -0,0 +1,6 @@
{
"/example/js/spritemap.js": "/example/js/spritemap.js?version=22bf6eef7ae5effb5e483e6c4f01c12b",
"/example/symbol-defs.svg": "/example/symbol-defs.svg?version=286109f83fb513b8a93efe3ce8275708",
"/example/js/example.js": "/example/js/example.js?version=e3d5dbb49383f6e183c2fdca71293467",
"/example/css/styles.css": "/example/css/styles.css?version=4156c7f9ece84034a6422042a7b5ad7a"
}

Binary file not shown.

@ -0,0 +1,2 @@
[install.scopes]
"@tiny-components" = "https://git.node001.net/api/packages/tiny-components/npm/"

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -5,9 +5,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tiny Components | Loading</title> <title>Tiny Components | Loading</title>
<link rel="icon" href="data:,"> <link rel="icon" href="data:,">
<link href="/example.css" rel="stylesheet" type="text/css"> <link href="/css/styles.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
<header class="header"> <header class="header">
@ -17,20 +16,6 @@
@tiny-components/sidebar-form @tiny-components/sidebar-form
</h1> </h1>
</div> </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> </div>
</header> </header>
@ -38,14 +23,13 @@
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<div class="m-top-5"> <div class="m-top-5">
<example-sidebar-form></example-sidebar-form> <example-sidebar-form name="x"></example-sidebar-form>
<example-button></example-button> <example-button name="x"></example-button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script type="text/javascript" src="/example.js"></script> <script type="text/javascript" src="/js/example.js"></script>
</body> </body>
</html>
</html>

File diff suppressed because one or more lines are too long

@ -0,0 +1 @@
(self.webpackChunk_tiny_components_sidebar_form=self.webpackChunk_tiny_components_sidebar_form||[]).push([["spritemap"],{"?4e0c":()=>{eval("\n\n//# sourceURL=webpack://@tiny-components/sidebar-form/spritemap-dummy-module?")}}]);

@ -1,14 +0,0 @@
{
"/spritemap.js": "/spritemap.js",
"/symbol-defs.svg": "/symbol-defs.svg",
"/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"
}

@ -1 +0,0 @@
(self.webpackChunk_tiny_components_sidebar_form=self.webpackChunk_tiny_components_sidebar_form||[]).push([[355],{256:()=>{}}]);

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 66 KiB

@ -0,0 +1,9 @@
import SidebarFormHeader from './src/sidebarFormHeader.riot'
import SidebarFormFooter from './src/sidebarFormFooter.riot'
import SidebarFormMixin from './src/sidebarFormMixin.js'
export {
SidebarFormHeader,
SidebarFormFooter,
SidebarFormMixin
}

4135
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,10 +1,14 @@
{ {
"name": "@tiny-components/sidebar-form", "name": "@tiny-components/sidebar-form",
"version": "1.0.0", "version": "1.2.0",
"description": "sidebar to handle forms", "description": "sidebar to handle forms",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git@github.com:node001-net/tiny-components-sidebar-form.git" "url": "git@git.node001.net:tiny-components/sidebar-form.git"
},
"scripts": {
"build": "webpack --mode development --config webpack.config.js",
"build-production": "webpack --mode production --config webpack.config.js"
}, },
"author": "Björn Hase", "author": "Björn Hase",
"license": "MIT", "license": "MIT",
@ -12,14 +16,11 @@
"@riotjs/observable": "^4.1.1", "@riotjs/observable": "^4.1.1",
"@tiny-components/loading": "^0.1.0", "@tiny-components/loading": "^0.1.0",
"@tiny-components/plain-ui": "^0.6.0", "@tiny-components/plain-ui": "^0.6.0",
"riot": "^7.0.6" "riot": "^9.4.3"
}, },
"devDependencies": { "devDependencies": {
"@riotjs/webpack-loader": "^6.0.0", "@riotjs/compiler": "^9.2.0",
"laravel-mix": "^6.0.43", "@riotjs/webpack-loader": "^9.0.1",
"laravel-mix-purgecss": "^6.0.0", "@tiny-components/webpack": "^0.5.2"
"sass": "^1.54.9",
"sass-loader": "^12.6.0",
"svg-spritemap-webpack-plugin": "^4.5.0"
} }
} }

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

@ -6,7 +6,7 @@
<script> <script>
// store for sidebar // store for sidebar
import sidebarStore from './exampleStore.js' import sidebarStore from './../sidebarFormStore.js'
/** /**
* example to open sidebar form * example to open sidebar form
@ -17,12 +17,10 @@
* *
*/ */
export default { export default {
handleClick() { handleClick() {
sidebarStore.trigger('open') sidebarStore.open(this.props.name)
} }
} }
</script> </script>
</example-button> </example-button>

@ -37,17 +37,14 @@
import TinyLoading from '@tiny-components/loading/src/loading.riot' import TinyLoading from '@tiny-components/loading/src/loading.riot'
riot.register('tiny-loading', TinyLoading) riot.register('tiny-loading', TinyLoading)
import sidebarHeader from './sidebarHeader.riot' import sidebarHeader from './../sidebarFormHeader.riot'
riot.register('tiny-sidebar-form-header', sidebarHeader) riot.register('tiny-sidebar-form-header', sidebarHeader)
import sidebarFooter from './sidebarFooter.riot' import sidebarFooter from './../sidebarFormFooter.riot'
riot.register('tiny-sidebar-form-footer', sidebarFooter) riot.register('tiny-sidebar-form-footer', sidebarFooter)
// store for sidebar
import sidebarStore from './exampleStore.js'
// mixin to extend current component // mixin to extend current component
import sidebarFormMixin from './sidebarFormMixin.js' import sidebarFormMixin from './../sidebarFormMixin.js'
/** /**
* example sidebar-form * example sidebar-form
@ -63,20 +60,6 @@
...sidebarFormMixin, // adding basic funtion for sidebar ...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 * handle submit of form
* *
@ -93,11 +76,7 @@
// stop loading // stop loading
this.state.isLoading = false this.state.isLoading = false
this.handleClose()
// if button has attribute close
if (event.submitter.attributes.close) {
this.handleClose()
}
this.update() this.update()
@ -111,4 +90,4 @@
} }
</script> </script>
</example-sidebar-form> </example-sidebar-form>

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

@ -1,23 +0,0 @@
/**
* 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')
}
})

@ -1,11 +0,0 @@
<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">
<g>
<path id="teabag" style="fill:#FFFFFF" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8 c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4 c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"/>
<g>
<g>
<path style="fill:#609926" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2 c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5 c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5 c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3 c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1 C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4 c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7 S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55 c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8 l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"/>
<path style="fill:#609926" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4 c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1 c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9 c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3 c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3 c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29 c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8 C343.2,346.5,335,363.3,326.8,380.1z"/>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.5 KiB

@ -1,3 +0,0 @@
<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"/>
</svg>

Before

Width:  |  Height:  |  Size: 967 B

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

@ -0,0 +1,9 @@
<tiny-sidebar-form-footer>
<div class="sidebar__footer justify-content-right">
<button class="button m-bottom-0" type="submit" disabled={ props.active }>
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-check"></use>
</svg>
</button>
</div>
</tiny-sidebar-form-footer>

@ -1,9 +1,12 @@
// store for sidebar
import sidebarStore from './sidebarFormStore.js'
/** /**
* mixin extends sidebarForm * mixin extends sidebarForm
* *
* @author Björn Hase <me@herr-hase.wtf> * @author Björn Hase <me@herr-hase.wtf>
* @license http://opensource.org/licenses/MIT The MIT License * @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/sidebar-form * @link https://git.node001.net/tiny-components/sidebar-form.git
* *
*/ */
@ -14,7 +17,8 @@ export default {
isLoading: false, // if loading is shown isLoading: false, // if loading is shown
current: { // current data of form current: { // current data of form
} },
name: undefined
}, },
/** /**
@ -54,9 +58,35 @@ export default {
*/ */
onBeforeMount() { onBeforeMount() {
if (!this.hasOwnProperty('reset')) { if (!this.hasOwnProperty('reset')) {
throw new Error('reset-Function in Form is missing') throw new Error('Sidebar-Form reset-Function is missing')
}
if (!this.props.name) {
throw new Error('Sidebar-Form needs name-attribute for handle open and close-event')
} }
// adding event for open sidebar
sidebarStore.on('open.' + this.props.name, (data) => {
if (data) {
this.state.current = data
}
this.state.isOpen = true
this.update()
})
// adding event for open sidebar
sidebarStore.on('close.' + this.props.name, () => {
this.state.isOpen = false
this.update()
})
// adding event for open sidebar
sidebarStore.on('close.all', () => {
this.state.isOpen = false
this.update()
})
this.reset() this.reset()
} }
} }

@ -0,0 +1,31 @@
import observable from '@riotjs/observable'
/**
* 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
*
*/
export default observable({
/**
*
* @param {object} data
*
*/
open(name, data = undefined) {
this.trigger('open.' + name, data)
},
/**
*
* @param {object} data
*
*/
close(name = 'all') {
this.trigger('close.' + name)
}
})

@ -26,13 +26,23 @@
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
padding-bottom: calc(72px + 1.5em); // 72px is the minium height for footer padding-bottom: calc(72px + 1.5em); // 72px is the minium height for footer
textarea {
resize: vertical;
}
} }
&__footer { &__footer {
justify-content: right;
bottom: -1px; bottom: -1px;
padding: 0.6rem 0.4rem;
} }
.bar { .bar {
border-radius: 0; border-radius: 0;
} }
}
@include media-sm() {
max-width: 600px;
}
}

@ -0,0 +1,20 @@
const tinyComponentsWebpack = require('@tiny-components/webpack')
const riotRules = require('@tiny-components/webpack/rules/riot')
const path = require('path')
module.exports = tinyComponentsWebpack({
example: [ './src/example/example.js' ],
styles: [ './src/example/styles.scss' ],
}, {
publicPath: '/example/',
destination: path.resolve(process.cwd(), 'example'),
rules: [ riotRules ],
svg: {
src: [
'node_modules/@tiny-components/plain-ui/src/icons/mono-icons/svg/*.svg'
]
},
purge: {
src: path.join(__dirname, './**')
}
})
Loading…
Cancel
Save