HerrHase 2 years ago
parent 08d80feaee
commit 8078ddeb45

@ -1,2 +1,53 @@
# confirm # Tiny Components - confirm
Created with [Riot.js](https://riot.js.org) and using [Plain-UI](https://plain-ui.com) and [Observable](https://github.com/riot/observable)
A small modal to confirm or cancel an Action.
## Install
```
npm install @tiny-components\confirm --save
```
## You can use it like this
Add tiny-confirm globally in an App. Open and Closing will be done by store.js
```
import TinyConfirm from './confirm.riot'
riot.register('tiny-confirm', TinyConfirm)
riot.mount('tiny-confirm')
```
```
<tiny-confirm></tiny-confirm>
```
Use a function to open tiny-confirm and callbacks. "Cancel" is optional.
```
handleOpen() {
// open
store.trigger('open', {
title: 'Question',
content: 'Are you sure?'
})
// handle confirm
store.confirm(() => {
})
// handle cancel
store.cancel(() => {
})
},
```

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,52 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tiny Components | Confirm</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<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/confirm
</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/confirm" 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/confirm" 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-confirm></example-confirm>
</div>
</div>
</div>
</div>
<tiny-confirm></tiny-confirm>
<script type="text/javascript" src="/example.js"></script>
</body>
</html>

@ -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_confirm=self.webpackChunk_tiny_components_confirm||[]).push([[355],{256:()=>{}}]);

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 66 KiB

7179
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,24 @@
{
"name": "@tiny-components/confirm",
"version": "0.1.0",
"description": "confirm or cancel",
"repository": {
"type": "git",
"url": "git@github.com:node001-net/tiny-components-confirm.git"
},
"author": "Björn Hase <me@herr-hase.wtf>",
"license": "MIT",
"dependencies": {
"@riotjs/observable": "^4.1.1",
"@tiny-components/plain-ui": "^0.6.0",
"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-loader": "^12.6.0",
"svg-spritemap-webpack-plugin": "^4.4.0"
}
}

@ -0,0 +1,149 @@
<tiny-confirm>
<div class={ getModalClasses() }>
<div class="modal__inner">
<div class="modal__title center">
<svg class="icon fill-text-contrast">
<use xlink:href="/symbol-defs.svg#icon-circle-warning" />
</svg>
<div if={ state.title }>
{ state.title }
</div>
</div>
<div class="modal__body center" if={ state.content }>
{ state.content }
</div>
<div class="modal__footer">
<button class="button button--outline button--danger" type="button" onclick={ () => { handleCancel() }}>
<svg class="icon fill-danger">
<use xlink:href="/symbol-defs.svg#icon-close" />
</svg>
</button>
<button class="button button--outline button--success" type="button" onclick={ () => { handleConfirm() }}>
<svg class="icon fill-success">
<use xlink:href="/symbol-defs.svg#icon-check" />
</svg>
</button>
</div>
</div>
</div>
<script>
import store from './store.js'
/**
* tiny-confirm
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/confirm
*
*/
export default {
state: {
isOpen: false,
transitionClass: false,
content: null
},
/**
* handle after component is mounted
*
*/
onMounted() {
// if store trigger open
store.on('open', (data) => {
this.open(data)
})
// adding event to remove transitionClass after animation
this.root.addEventListener('transitionend', (event) => {
this.state.transitionClass = false
this.update()
})
},
/**
* open confirm, add title and content
*
*
* @param {object} data
*
*/
open(data) {
this.state.transitionClass = 'modal-wrap--transition-open'
this.state.isOpen = true
if (data.title) {
this.state.title = data.title
}
if (data.content) {
this.state.content = data.content
}
this.update()
},
/**
* close modal and remove data
*
*
*/
close() {
this.state.transitionClass = 'modal-wrap--transition-close'
this.state.isOpen = false
this.state.content = null
this.update()
},
/**
* handle cancel, send cancel
*
*
*/
handleCancel() {
store.trigger('cancel')
this.close()
},
/**
* handle confirm, send confirm
*
* @param {object} event
*
*/
handleConfirm() {
store.trigger('confirm')
this.close()
},
/**
* getting css for modal
*
*
* @return {string}
*
*/
getModalClasses() {
const classes = [
'tiny-modal modal'
]
if (this.state.isOpen) {
classes.push('modal--open')
}
if (this.state.transitionClass) {
classes.push(this.state.transitionClass)
}
return classes.join(' ')
}
}
</script>
</tiny-confirm>

@ -0,0 +1,79 @@
<tiny-confirm>
<div>
<button class="button button--outline button--danger" type="button" onclick={ () => { handleOpen() }}>
<svg class="icon fill-danger m-right-3">
<use xlink:href="/symbol-defs.svg#icon-close" />
</svg>
Click me!
</button>
<div if={ state.hasConfirmed } class="color-success">
Ok!
</div>
<div if={ state.hasCanceled } class="color-danger">
Ok! But why?!
</div>
</div>
<script>
import store from './store.js'
/**
* example-confirm
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/confirm
*
*/
export default {
state: {
hasConfirmed: false,
hasCanceled: false
},
/**
* open confirm, add title and content
*
*
* @param {object} data
*
*/
handleOpen() {
store.trigger('open', {
title: 'Question',
content: 'Are you sure?'
})
// handle confirm from modal
store.confirm(() => {
this.state.hasConfirmed = true
this.update()
setTimeout(() => {
this.state.hasConfirmed = false
this.update()
}, 5000)
})
// handle cancel is optional
store.cancel(() => {
this.state.hasCanceled = true
this.update()
setTimeout(() => {
this.state.hasCanceled = false
this.update()
}, 5000)
})
},
}
</script>
</tiny-confirm>

@ -0,0 +1,10 @@
import * as riot from 'riot'
import TinyConfirm from './confirm.riot'
import ExampleConfirm from './example-confirm.riot'
riot.register('tiny-confirm', TinyConfirm)
riot.register('example-confirm', ExampleConfirm)
riot.mount('tiny-confirm')
riot.mount('example-confirm')

@ -0,0 +1,9 @@
@import
'../node_modules/@tiny-components/plain-ui/src/scss/plain-ui';
.tiny-modal {
.modal__footer {
display: flex;
justify-content: space-between;
}
}

@ -0,0 +1,23 @@
import observable from '@riotjs/observable'
/**
* store for confirm
*
* @author Björn Hase
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/confirm
*
*/
export default observable({
confirm(handleConfirm) {
this.off('confirm')
this.on('confirm', () => { handleConfirm() })
},
cancel(handleConfirm) {
this.off('cancel')
this.on('cancel', () => { handleConfirm() })
}
})

@ -0,0 +1,80 @@
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', {
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…
Cancel
Save