Compare commits

..

No commits in common. 'main' and 'v1.0.0' have entirely different histories.
main ... v1.0.0

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

@ -1,6 +1,6 @@
MIT License
Copyright (c) 2023 Björn Hase, me@herr-hase.wtf
Copyright (c) <year> <copyright holders>
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:

@ -1,6 +0,0 @@
{
"/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.

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

File diff suppressed because one or more lines are too long

@ -1 +0,0 @@
(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?")}}]);

@ -0,0 +1,14 @@
{
"/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"
}

@ -0,0 +1 @@
(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: 66 KiB

After

Width:  |  Height:  |  Size: 69 KiB

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

4119
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,14 +1,10 @@
{
"name": "@tiny-components/sidebar-form",
"version": "1.2.1",
"version": "1.0.0",
"description": "sidebar to handle forms",
"repository": {
"type": "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"
"url": "git@github.com:node001-net/tiny-components-sidebar-form.git"
},
"author": "Björn Hase",
"license": "MIT",
@ -16,11 +12,14 @@
"@riotjs/observable": "^4.1.1",
"@tiny-components/loading": "^0.1.0",
"@tiny-components/plain-ui": "^0.6.0",
"riot": "^9.4.3"
"riot": "^7.0.6"
},
"devDependencies": {
"@riotjs/compiler": "^9.2.0",
"@riotjs/webpack-loader": "^9.0.1",
"@tiny-components/webpack": "^0.5.2"
"@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"
}
}

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

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

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

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

After

Width:  |  Height:  |  Size: 2.5 KiB

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

After

Width:  |  Height:  |  Size: 967 B

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

@ -1,9 +0,0 @@
<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,12 +1,9 @@
// 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://git.node001.net/tiny-components/sidebar-form.git
* @link https://gitea.node001.net/tiny-components/sidebar-form
*
*/
@ -17,8 +14,7 @@ export default {
isLoading: false, // if loading is shown
current: { // current data of form
},
name: undefined
}
},
/**
@ -58,35 +54,9 @@ export default {
*/
onBeforeMount() {
if (!this.hasOwnProperty('reset')) {
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')
throw new Error('reset-Function in Form is missing')
}
// 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()
}
}
}

@ -1,31 +0,0 @@
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,23 +26,13 @@
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;
}
}
}

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

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