You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
2.0 KiB
79 lines
2.0 KiB
2 years ago
|
<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>
|