parent
b1a30886b0
commit
3d4a35fffb
@ -1,2 +1,34 @@
|
|||||||
# notification
|
# Tiny Components - Notification
|
||||||
|
|
||||||
|
Created with [Riot.js](https://riot.js.org)
|
||||||
|
|
||||||
|
Handle notification by using [Plain-UI](https://plain-ui.com) and [Observable](https://github.com/riot/observable)
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install @tiny-components\notification --save
|
||||||
|
```
|
||||||
|
|
||||||
|
## You can use it like this
|
||||||
|
|
||||||
|
Add to your App once, don't forget to register and mount,
|
||||||
|
|
||||||
|
```
|
||||||
|
<tiny-notification></tiny-notification>
|
||||||
|
```
|
||||||
|
|
||||||
|
Call function anywhere, to run through the store and display a notification.
|
||||||
|
|
||||||
|
```
|
||||||
|
import notificationStore from './@tiny-components/notification/src/notificationStore.js'
|
||||||
|
notificationStore.danger('Error! Something is wrong')
|
||||||
|
```
|
||||||
|
|
||||||
|
## Options
|
||||||
|
|
||||||
|
| attribute | values |
|
||||||
|
|---|---|
|
||||||
|
| wrapper-class | |
|
||||||
|
| timeout | |
|
||||||
|
|
||||||
|
|||||||
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 | Notification</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/notification
|
||||||
|
</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/notification" 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/notification" 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-action-button></example-action-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<tiny-notification></tiny-notification>
|
||||||
|
<script type="text/javascript" src="/example.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"/spritemap.js": "/spritemap.js",
|
||||||
|
"/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"
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 66 KiB |
@ -0,0 +1 @@
|
|||||||
|
(self.webpackChunk_tiny_components_notification=self.webpackChunk_tiny_components_notification||[]).push([[355],{256:()=>{}}]);
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"/example/spritemap.js": "/example/spritemap.js",
|
||||||
|
"/example/example.js": "/example/example.js",
|
||||||
|
"/example/example.css": "/example/example.css"
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
<example-action-button>
|
||||||
|
<div class="m-top-4 m-bottom-4">
|
||||||
|
<button class="button button--danger m-right-md-3" onclick={ (event) => { handleClickDanger(event) } }>
|
||||||
|
Show Error!
|
||||||
|
</button>
|
||||||
|
<button class="button button--success m-left-md-3" onclick={ (event) => { handleClickSuccess(event) } }>
|
||||||
|
Show Success!
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import notificationStore from './notificationStore.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* @param {Object} event
|
||||||
|
* @param {Object} item
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
handleClickDanger(event) {
|
||||||
|
notificationStore.danger('Error!')
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* @param {Object} event
|
||||||
|
* @param {Object} item
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
handleClickSuccess(event) {
|
||||||
|
notificationStore.success('Success!')
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</example-action-button>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import * as riot from 'riot'
|
||||||
|
|
||||||
|
import TinyNotification from './notification.riot'
|
||||||
|
import ExampleActionButton from './example-action-button.riot'
|
||||||
|
|
||||||
|
riot.register('tiny-notification', TinyNotification)
|
||||||
|
riot.register('example-action-button', ExampleActionButton)
|
||||||
|
|
||||||
|
riot.mount('tiny-notification')
|
||||||
|
riot.mount('example-action-button')
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@import
|
||||||
|
'../node_modules/@tiny-components/plain-ui/src/scss/plain-ui';
|
||||||
@ -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: 'public/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