tiny-components
/
confirm
1
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

init

Browse Source
main
HerrHase 2 years ago
parent 08d80feaee
commit 8078ddeb45
23 changed files with 7720 additions and 1 deletions
Show Stats Download Patch File Download Diff File

53
README.md
Unescape View File

@ -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(() => {
})
},
```

BIN
example/IBMPlexMono-Bold.eot
View File

Binary file not shown.

BIN
example/IBMPlexMono-Bold.ttf
View File

Binary file not shown.

BIN
example/IBMPlexMono-Bold.woff
View File

Binary file not shown.

BIN
example/IBMPlexMono-Bold.woff2
View File

Binary file not shown.

BIN
example/IBMPlexMono.eot
View File

Binary file not shown.

BIN
example/IBMPlexMono.ttf
View File

Binary file not shown.

BIN
example/IBMPlexMono.woff
View File

Binary file not shown.

BIN
example/IBMPlexMono.woff2
View File

Binary file not shown.

1
example/example.css
View File

File diff suppressed because one or more lines are too long

46
example/example.js
View File

File diff suppressed because one or more lines are too long

52
example/index.html
Unescape View File

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

14
example/mix-manifest.json
Unescape View File

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

1
example/spritemap.js
Unescape View File

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

1
example/symbol-defs.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

7179
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

24
package.json
Unescape View File

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

149
src/confirm.riot
Unescape View File

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

79
src/example-confirm.riot
Unescape View File

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

10
src/example.js
Unescape View File

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

9
src/example.scss
Unescape View File

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

23
src/store.js
Unescape View File

@ -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() })
}
})

80
webpack.mix.js
Unescape View File

@ -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')
Write Preview
Loading…
Cancel
Save