Compare commits

...

4 Commits

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

@ -1,6 +1,6 @@
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:

@ -6,8 +6,8 @@ Handle Form in a Sidebar. Styles for Sidebar based on [Plain-UI](https://plain-u
## Changelog
0.1.0 Init
1.0.0 Remove "SidebarForm" and build a more basic Solution, that is also easier to adept
0.1.0 Init
1.0.0 Remove "SidebarForm" and build a more basic Solution, that is also easier to adept
## Install
@ -17,7 +17,7 @@ npm install @tiny-components\sidebar-form --save
## How to use
Create your own Component and add tiny
Create your own Component and add sidebarHeader & sidebarFooter,
```js
<div class={ getCssClasses() }>

@ -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">
<title>Tiny Components | Loading</title>
<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>
<body>
<header class="header">
@ -17,20 +16,6 @@
@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>
@ -38,14 +23,13 @@
<div class="grid">
<div class="col-12">
<div class="m-top-5">
<example-sidebar-form></example-sidebar-form>
<example-button></example-button>
<example-sidebar-form name="x"></example-sidebar-form>
<example-button name="x"></example-button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/example.js"></script>
<script type="text/javascript" src="/js/example.js"></script>
</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,11 @@
import sidebarFormHeader from './src/sidebarFormHeader.riot'
import sidebarFormFooter from './src/sidebarFormFooter.riot'
import sidebarFormMixin from './src/sidebarFormMixin.js'
import sidebarFormStore from './src/sidebarFormStore.js'
export {
sidebarFormHeader,
sidebarFormFooter,
sidebarFormMixin,
sidebarFormStore
}

4135
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,10 +1,14 @@
{
"name": "@tiny-components/sidebar-form",
"version": "1.0.0",
"version": "1.2.1",
"description": "sidebar to handle forms",
"repository": {
"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",
"license": "MIT",
@ -12,14 +16,11 @@
"@riotjs/observable": "^4.1.1",
"@tiny-components/loading": "^0.1.0",
"@tiny-components/plain-ui": "^0.6.0",
"riot": "^7.0.6"
"riot": "^9.4.3"
},
"devDependencies": {
"@riotjs/webpack-loader": "^6.0.0",
"laravel-mix": "^6.0.43",
"laravel-mix-purgecss": "^6.0.0",
"sass": "^1.54.9",
"sass-loader": "^12.6.0",
"svg-spritemap-webpack-plugin": "^4.5.0"
"@riotjs/compiler": "^9.2.0",
"@riotjs/webpack-loader": "^9.0.1",
"@tiny-components/webpack": "^0.5.2"
}
}

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

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

@ -37,17 +37,14 @@
import TinyLoading from '@tiny-components/loading/src/loading.riot'
riot.register('tiny-loading', TinyLoading)
import sidebarHeader from './sidebarHeader.riot'
import sidebarHeader from './../sidebarFormHeader.riot'
riot.register('tiny-sidebar-form-header', sidebarHeader)
import sidebarFooter from './sidebarFooter.riot'
import sidebarFooter from './../sidebarFormFooter.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'
import sidebarFormMixin from './../sidebarFormMixin.js'
/**
* example sidebar-form
@ -63,20 +60,6 @@
...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
*
@ -93,11 +76,7 @@
// stop loading
this.state.isLoading = false
// if button has attribute close
if (event.submitter.attributes.close) {
this.handleClose()
}
this.handleClose()
this.update()
@ -111,4 +90,4 @@
}
</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
*
* @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
* @link https://git.node001.net/tiny-components/sidebar-form.git
*
*/
@ -14,7 +17,8 @@ export default {
isLoading: false, // if loading is shown
current: { // current data of form
}
},
name: undefined
},
/**
@ -54,9 +58,35 @@ export default {
*/
onBeforeMount() {
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()
}
}
}

@ -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%;
overflow-y: scroll;
padding-bottom: calc(72px + 1.5em); // 72px is the minium height for footer
textarea {
resize: vertical;
}
}
&__footer {
justify-content: right;
bottom: -1px;
padding: 0.6rem 0.4rem;
}
.bar {
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, './**')
}
})

@ -1,86 +0,0 @@
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: {
safelist: [
/sidebar/
],
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…
Cancel
Save