parent
91ccf6b665
commit
ef6a902252
@ -1,2 +1,12 @@
|
|||||||
# loading
|
# Tiny Components - Loading
|
||||||
|
|
||||||
|
Created with [Riot.js](https://riot.js.org)
|
||||||
|
|
||||||
|
Loading as Riot-Component from [Plain-UI](https://plain-ui.com)
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install @tiny-components\loading --save
|
||||||
|
```
|
||||||
|
|
||||||
|
|||||||
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,50 @@
|
|||||||
|
<!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/loading
|
||||||
|
</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-loading></example-loading>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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"
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
(self.webpackChunk_tiny_components_loading=self.webpackChunk_tiny_components_loading||[]).push([[355],{256:()=>{}}]);
|
||||||
|
After Width: | Height: | Size: 66 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"name": "@tiny-components/loading",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "loading",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git@github.com:node001-net/tiny-components-loading.git"
|
||||||
|
},
|
||||||
|
"author": "Björn Hase",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@tiny-components/plain-ui": "^0.6.0",
|
||||||
|
"riot": "^6.1.2"
|
||||||
|
},
|
||||||
|
"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,10 @@
|
|||||||
|
import * as riot from 'riot'
|
||||||
|
|
||||||
|
import TinyLoading from './loading.riot'
|
||||||
|
import ExampleLoading from './exampleLoading.riot'
|
||||||
|
|
||||||
|
riot.register('tiny-loading', TinyLoading)
|
||||||
|
riot.register('example-loading', ExampleLoading)
|
||||||
|
|
||||||
|
riot.mount('tiny-loading')
|
||||||
|
riot.mount('example-loading')
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@import
|
||||||
|
'../node_modules/@tiny-components/plain-ui/src/scss/plain-ui';
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
<example-loading>
|
||||||
|
<div class="example m-top-5">
|
||||||
|
<label class="field-label">
|
||||||
|
<input class="field-choice" type="checkbox" name="radio" value="true" onchange={ () => { handleSwitch() } }>
|
||||||
|
<span class="field-switch"></span>
|
||||||
|
</label>
|
||||||
|
<div class="panel" if={ state.active }>
|
||||||
|
<div class="panel__body">
|
||||||
|
<tiny-loading active={ state.active }></tiny-loading>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
|
||||||
|
state: {
|
||||||
|
active: false
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* toggle active to show panel and tiny-loading
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
handleSwitch()
|
||||||
|
{
|
||||||
|
if (this.state.active === true) {
|
||||||
|
this.state.active = false
|
||||||
|
} else {
|
||||||
|
this.state.active = true
|
||||||
|
}
|
||||||
|
|
||||||
|
this.update()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</example-loading>
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<tiny-loading>
|
||||||
|
<div class="loading-wrapper" if={ props.active }>
|
||||||
|
<div class="loading">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</tiny-loading>
|
||||||
@ -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