HerrHase 2 years ago
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:()=>{}}]);

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 66 KiB

7134
package-lock.json generated

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…
Cancel
Save