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:()=>{}}]);
|
||||||
|
After Width: | Height: | Size: 66 KiB |
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…
Reference in new issue