tentakelfabrik
/
tiny-tags
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

adding

master
Björn 4 years ago
parent
c074f5711f
commit
da4c1abeae
40 changed files with 14546 additions and 1 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -0
      .gitignore
  2. +3
    -1
      README.md
  3. +5
    -0
      demo-386.js
  4. +171
    -0
      demo-386.scss
  5. +1
    -0
      dist/css/demo-386.css
  6. BIN
      dist/fonts/PxPlus_IBM_VGA8.eot
  7. +1625
    -0
      dist/fonts/PxPlus_IBM_VGA8.svg
  8. BIN
      dist/fonts/PxPlus_IBM_VGA8.ttf
  9. BIN
      dist/fonts/PxPlus_IBM_VGA8.woff
  10. BIN
      dist/fonts/PxPlus_IBM_VGA8.woff2
  11. +11
    -0
      dist/fonts/stylesheet.css
  12. +76
    -0
      dist/index.html
  13. +1
    -0
      dist/js/demo-386.js
  14. +4
    -0
      mix-manifest.json
  15. +10073
    -0
      package-lock.json
  16. +35
    -0
      package.json
  17. BIN
      src/assets/fonts/PxPlus_IBM_VGA8.eot
  18. +1625
    -0
      src/assets/fonts/PxPlus_IBM_VGA8.svg
  19. BIN
      src/assets/fonts/PxPlus_IBM_VGA8.ttf
  20. BIN
      src/assets/fonts/PxPlus_IBM_VGA8.woff
  21. BIN
      src/assets/fonts/PxPlus_IBM_VGA8.woff2
  22. +11
    -0
      src/assets/fonts/stylesheet.css
  23. +60
    -0
      src/assets/html/index.html.ejs
  24. BIN
      src/assets/icomoon/PNG/add.png
  25. BIN
      src/assets/icomoon/PNG/github.png
  26. BIN
      src/assets/icomoon/PNG/remove.png
  27. +15
    -0
      src/assets/icomoon/Read Me.txt
  28. +5
    -0
      src/assets/icomoon/SVG/add.svg
  29. +5
    -0
      src/assets/icomoon/SVG/github.svg
  30. +5
    -0
      src/assets/icomoon/SVG/remove.svg
  31. +39
    -0
      src/assets/icomoon/demo-external-svg.html
  32. +150
    -0
      src/assets/icomoon/demo-files/demo.css
  33. +56
    -0
      src/assets/icomoon/demo.html
  34. +108
    -0
      src/assets/icomoon/selection.json
  35. +16
    -0
      src/assets/icomoon/style.css
  36. +230
    -0
      src/assets/icomoon/svgxuse.js
  37. +16
    -0
      src/assets/icomoon/symbol-defs.svg
  38. +17
    -0
      src/raw.riot
  39. +139
    -0
      src/tiny-tags.riot
  40. +42
    -0
      webpack.mix.js

+ 2
- 0
.gitignore View File

@ -0,0 +1,2 @@
node_modules
fonts

+ 3
- 1
README.md View File

@ -1,2 +1,4 @@
# Tiny Tag
# Tiny Tags
* Add Tags to a List
* Can be used as a Form-Field

+ 5
- 0
demo-386.js View File

@ -0,0 +1,5 @@
import * as riot from 'riot';
import TinyTags from './src/tiny-tags.riot';
riot.register('tiny-tags', TinyTags);
riot.mount('tiny-tags');

+ 171
- 0
demo-386.scss View File

@ -0,0 +1,171 @@
@import 'src/assets/fonts/stylesheet.css';
@import 'src/assets/icomoon/style.css';
/**
* variables
*
*/
$text-color: #fff;
$link-color: #fefe5b;
$link-background-color: #008106;
$background-color: #000084;
$background-contrast-color: #bbbbbb;
$color__text: #bbbbbb;
$color__secondary: #00aaaa;
/**
* default elements
*
*/
body {
color: $text-color;
background-color: black;
font-family: 'PxPlus IBM VGA8', sans-serif;
font-style: normal;
font-size: 1.2rem;
line-height: 1.3;
}
a {
text-decoration: none;
&:focus {
outline: none;
}
}
h1, h2, h3, h4, h5, h6 {
font-size: 18px;
font-weight: normal;
text-transform: uppercase;
}
.site-header {
padding: 20px 20px;
margin: 20px 0 20px;
color: #000;
background: $color__secondary;
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
}
.icon {
width: 0.7em;
height: 0.7em;
color: white;
}
.vertical-align-sub {
vertical-align: sub;
}
main {
padding: 50px 0;
background: $background-color;
}
blockquote {
padding: 0 0 0 15px;
margin: 0 0 20px;
border-left: 5px solid #bbbbbb;
}
/**
* footer
*
*
*/
footer {
text-align: center;
font-size: 1.4rem;
width: 100%;
height: 100%;
padding: 0.8em 0;
.icon {
width: 1.2em;
height: 1.2em;
}
}
/**
*
*
*
*/
.hero {
padding: 16px 20.8px;
margin-bottom: 20px;
font-size: 18px;
line-height: 20px;
color: #ffffff;
background-color: #00aaaa;
border: 4px double #ffffff;
border-radius: 0;
box-shadow: 0 0 0 4px #00aaaa;
margin: 0 4px 20px;
.icon {
width: 1em;
height: 1em;
}
}
/**
* tiny-tags
*
*
*/
.tiny-tags {
&__list {
margin: 0;
padding: 0;
list-style: none;
}
&__item {
display: inline-block;
border: 1px solid #ddd;
background: #bbbbbb;
margin: 0 0.3em 0.3em 0;
}
&__label, &__input {
padding: 0.2em 0.4em;
}
&__input {
border: 0;
width: 100px;
background: transparent;
color: white;
}
&__label {
display: inline-block;
}
&__button {
appearance: none;
border: 0;
padding: 0.3em 0.4em;
background: none;
}
.icon {
&:hover {
cursor: pointer;
}
}
}

+ 1
- 0
dist/css/demo-386.css View File

@ -0,0 +1 @@
@font-face{font-family:PxPlus IBM VGA8;src:url(/fonts/PxPlus_IBM_VGA8.eot?6487324f1ac4377e882c9af6ce96da0f);src:url(/fonts/PxPlus_IBM_VGA8.eot?6487324f1ac4377e882c9af6ce96da0f?#iefix) format("embedded-opentype"),url(/fonts/PxPlus_IBM_VGA8.woff2?28087632ed5e0851a1ec27def2b1e73f) format("woff2"),url(/fonts/PxPlus_IBM_VGA8.woff?5f9b12f2cef3f405002438fafa0e41a6) format("woff"),url(/fonts/PxPlus_IBM_VGA8.ttf?8fa23fdc4e2cff030f42999bc1ede4b2) format("truetype"),url(/fonts/PxPlus_IBM_VGA8.svg?3000c157212c66cf53ad18f0d7b7a12f#PxPlus_IBM_VGA8) format("svg");font-weight:400;font-style:normal}.icon{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor}body{color:#fff;background-color:#000;font-family:PxPlus IBM VGA8,sans-serif;font-style:normal;font-size:1.2rem;line-height:1.3}a{text-decoration:none}a:focus{outline:none}h1,h2,h3,h4,h5,h6{font-size:18px;font-weight:400;text-transform:uppercase}.site-header{padding:20px;margin:20px 0;color:#000;background:#0aa}.site-header h1,.site-header h2,.site-header h3,.site-header h4,.site-header h5,.site-header h6{margin:0}.icon{width:.7em;height:.7em;color:#fff}.vertical-align-sub{vertical-align:sub}main{padding:50px 0;background:#000084}blockquote{padding:0 0 0 15px;margin:0 0 20px;border-left:5px solid #bbb}footer{text-align:center;font-size:1.4rem;width:100%;height:100%;padding:.8em 0}footer .icon{width:1.2em;height:1.2em}.hero{padding:16px 20.8px;font-size:18px;line-height:20px;color:#fff;background-color:#0aa;border:4px double #fff;border-radius:0;box-shadow:0 0 0 4px #0aa;margin:0 4px 20px}.hero .icon{width:1em;height:1em}.tiny-tags__list{margin:0;padding:0;list-style:none}.tiny-tags__item{display:inline-block;border:1px solid #ddd;background:#bbb;margin:0 .3em .3em 0}.tiny-tags__input,.tiny-tags__label{padding:.2em .4em}.tiny-tags__input{border:0;width:100px;background:transparent;color:#fff}.tiny-tags__label{display:inline-block}.tiny-tags__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:.3em .4em;background:none}.tiny-tags .icon:hover{cursor:pointer}

BIN
dist/fonts/PxPlus_IBM_VGA8.eot View File


+ 1625
- 0
dist/fonts/PxPlus_IBM_VGA8.svg
File diff suppressed because it is too large
View File


BIN
dist/fonts/PxPlus_IBM_VGA8.ttf View File


BIN
dist/fonts/PxPlus_IBM_VGA8.woff View File


BIN
dist/fonts/PxPlus_IBM_VGA8.woff2 View File


+ 11
- 0
dist/fonts/stylesheet.css View File

@ -0,0 +1,11 @@
@font-face {
font-family: 'PxPlus IBM VGA8';
src: url('PxPlus_IBM_VGA8.eot');
src: url('PxPlus_IBM_VGA8.eot?#iefix') format('embedded-opentype'),
url('PxPlus_IBM_VGA8.woff2') format('woff2'),
url('PxPlus_IBM_VGA8.woff') format('woff'),
url('PxPlus_IBM_VGA8.ttf') format('truetype'),
url('PxPlus_IBM_VGA8.svg#PxPlus_IBM_VGA8') format('svg');
font-weight: normal;
font-style: normal;
}

+ 76
- 0
dist/index.html View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Tiny Tags | i386 Demo</title>
<link rel="shortcut icon" href="#" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/reflex-grid@2.0.4/css/reflex.min.css" type="text/css" rel="stylesheet" />
<link href="css/demo-386.css" type="text/css" rel="stylesheet" />
</head>
<body>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-github" viewBox="0 0 32 32">
<title>github</title>
<path d="M16 0.396c-8.84 0-16 7.164-16 16 0 7.071 4.584 13.067 10.94 15.18 0.8 0.151 1.093-0.344 1.093-0.769 0-0.38-0.013-1.387-0.020-2.72-4.451 0.965-5.389-2.147-5.389-2.147-0.728-1.847-1.78-2.34-1.78-2.34-1.449-0.992 0.112-0.972 0.112-0.972 1.607 0.112 2.451 1.648 2.451 1.648 1.427 2.447 3.745 1.74 4.66 1.331 0.144-1.035 0.556-1.74 1.013-2.14-3.553-0.4-7.288-1.776-7.288-7.907 0-1.747 0.62-3.173 1.647-4.293-0.18-0.404-0.72-2.031 0.14-4.235 0 0 1.34-0.429 4.4 1.64 1.28-0.356 2.64-0.532 4-0.54 1.36 0.008 2.72 0.184 4 0.54 3.040-2.069 4.38-1.64 4.38-1.64 0.86 2.204 0.32 3.831 0.16 4.235 1.020 1.12 1.64 2.547 1.64 4.293 0 6.147-3.74 7.5-7.3 7.893 0.56 0.48 1.080 1.461 1.080 2.96 0 2.141-0.020 3.861-0.020 4.381 0 0.42 0.28 0.92 1.1 0.76 6.401-2.099 10.981-8.099 10.981-15.159 0-8.836-7.164-16-16-16z"></path>
</symbol>
<symbol id="icon-add" viewBox="0 0 24 24">
<title>add</title>
<path d="M22 6v-2h-4v2h-2v2h-2v2h-2v2h-2v2h-2v-2h-2v-2h-4v2h-2v2h2v2h2v2h2v2h2v2h2v-2h2v-2h2v-2h2v-2h2v-2h2v-2h2v-2h2v-2z"></path>
</symbol>
<symbol id="icon-remove" viewBox="0 0 24 24">
<title>remove</title>
<path d="M18 12v-2h2v-2h2v-4h-2v-2h-2v2h-2v2h-2v2h-4v-2h-2v-2h-2v-2h-2v2h-2v4h2v2h2v2h2v2h-2v2h-2v2h-2v4h2v2h2v-2h2v-2h2v-2h4v2h2v2h2v2h2v-2h2v-4h-2v-2h-2v-2h-2v-2z"></path>
</symbol>
</defs>
</svg>
<main>
<div class="container">
<div class="grid justify-center">
<div class="col-12 col-md-8">
<div class="hero">
<header>
<h1>Tiny Tags</h1>
</header>
<p>
Created with <a href="https://riot.js.org" target="_blank">Riot.js</a>!
</p>
<p>
Form Field Component to add Tags to a List. Will be handled as a Select-Element
with Multiple Options that are selected.
</p>
<p>
<blockquote>
npm install tiny-tags --save
</blockquote>
</p>
<p>
<a href="https://github.com/tentakelfabrik/tiny-tags" target="_blank">
<svg class="icon vertical-align-sub"><use xlink:href="#icon-github" /></svg>
</a>
</p>
</div>
<h2>Try me:</h2>
<tiny-tags></tiny-tags>
</div>
</div>
</div>
</main>
<footer>
<p>
Crafted with enthusiasm by <a target="_blank" href="https://tentakelfabrik.de">Tentakelfabrik</a>
</p>
<p>
<a target="_blank" href="https://github.com/tentakelfabrik/tiny-tags">
<svg class="icon"><use xlink:href="#icon-github" /></svg>
</a>
</p>
</footer>
<script src="js/demo-386.js"></script>
</body>
</html>

+ 1
- 0
dist/js/demo-386.js
File diff suppressed because it is too large
View File


+ 4
- 0
mix-manifest.json View File

@ -0,0 +1,4 @@
{
"/dist/js/demo-386.js": "/dist/js/demo-386.js",
"/dist/css/demo-386.css": "/dist/css/demo-386.css"
}

+ 10073
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 35
- 0
package.json View File

@ -0,0 +1,35 @@
{
"name": "tiny-tags",
"version": "1.0.0",
"description": "Form Field, add Tags to a List",
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"repository": {
"type": "git",
"url": "git@gitlab.tentakelfabrik.de:tentakelfabrik/tiny-components/tiny-tags.git"
},
"author": "Björn Hase",
"license": "MIT",
"dependencies": {
"riot": "^4.8.5"
},
"devDependencies": {
"@riotjs/compiler": "^4.2.0",
"@riotjs/webpack-loader": "^4.0.0",
"cross-env": "^5.2.0",
"html-webpack-plugin": "^3.2.0",
"laravel-mix": "^4.1.4",
"replace-in-file-webpack-plugin": "^1.0.6",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.3",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
}
}

BIN
src/assets/fonts/PxPlus_IBM_VGA8.eot View File


+ 1625
- 0
src/assets/fonts/PxPlus_IBM_VGA8.svg
File diff suppressed because it is too large
View File


BIN
src/assets/fonts/PxPlus_IBM_VGA8.ttf View File


BIN
src/assets/fonts/PxPlus_IBM_VGA8.woff View File


BIN
src/assets/fonts/PxPlus_IBM_VGA8.woff2 View File


+ 11
- 0
src/assets/fonts/stylesheet.css View File

@ -0,0 +1,11 @@
@font-face {
font-family: 'PxPlus IBM VGA8';
src: url('PxPlus_IBM_VGA8.eot');
src: url('PxPlus_IBM_VGA8.eot?#iefix') format('embedded-opentype'),
url('PxPlus_IBM_VGA8.woff2') format('woff2'),
url('PxPlus_IBM_VGA8.woff') format('woff'),
url('PxPlus_IBM_VGA8.ttf') format('truetype'),
url('PxPlus_IBM_VGA8.svg#PxPlus_IBM_VGA8') format('svg');
font-weight: normal;
font-style: normal;
}

+ 60
- 0
src/assets/html/index.html.ejs View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Tiny Tags | i386 Demo</title>
<link rel="shortcut icon" href="#" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/reflex-grid@2.0.4/css/reflex.min.css" type="text/css" rel="stylesheet" />
<link href="css/demo-386.css" type="text/css" rel="stylesheet" />
</head>
<body>
<%= htmlWebpackPlugin.options.svg %>
<main>
<div class="container">
<div class="grid justify-center">
<div class="col-12 col-md-8">
<div class="hero">
<header>
<h1>Tiny Tags</h1>
</header>
<p>
Created with <a href="https://riot.js.org" target="_blank">Riot.js</a>!
</p>
<p>
Form Field Component to add Tags to a List. Will be handled as a Select-Element
with Multiple Options that are selected.
</p>
<p>
<blockquote>
npm install tiny-tags --save
</blockquote>
</p>
<p>
<a href="https://github.com/tentakelfabrik/tiny-tags" target="_blank">
<svg class="icon vertical-align-sub"><use xlink:href="#icon-github" /></svg>
</a>
</p>
</div>
<h2>Try me:</h2>
<tiny-tags></tiny-tags>
</div>
</div>
</div>
</main>
<footer>
<p>
Crafted with enthusiasm by <a target="_blank" href="https://tentakelfabrik.de">Tentakelfabrik</a>
</p>
<p>
<a target="_blank" href="https://github.com/tentakelfabrik/tiny-tags">
<svg class="icon"><use xlink:href="#icon-github" /></svg>
</a>
</p>
</footer>
<script src="js/demo-386.js"></script>
</body>
</html>

BIN
src/assets/icomoon/PNG/add.png View File

Before After
Width: 24  |  Height: 24  |  Size: 133 B

BIN
src/assets/icomoon/PNG/github.png View File

Before After
Width: 32  |  Height: 32  |  Size: 455 B

BIN
src/assets/icomoon/PNG/remove.png View File

Before After
Width: 24  |  Height: 24  |  Size: 143 B

+ 15
- 0
src/assets/icomoon/Read Me.txt View File

@ -0,0 +1,15 @@
The *SVG* folder contains the icons you selected as separate SVG files.
If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel of the IcoMoon app before downloading your zip pack.
*demo.html* lists the icons that you selected. To insert your icons as inline SVGs (with the <use> element), copy the <svg> element (that contains symbol definitions) from the source of the demo.html file, below your own HTML's <body> tag. After copying this SVG, you can reference your glyphs like the following:
<svg class="icon icon-github"><use xlink:href="#icon-github"></use></svg>
You can get this code from the SVG tab of the IcoMoon app, or by referring to the source of the demo.html file. To see how you can change the color/size of your icons using CSS, refer to the example provided in the *style.css* file.
If you prefer to reference an external SVG (containing <defs>) instead of embedding it in HTML, you will need to use *svgxuse.js* in order to support IE 9+. In browsers that don't support referencing external SVGs (such as IE 9), this polyfill sends one HTTP request to fetch and cache all symbol definitions. See *demo-external-svg.html* for this approach. This demo references the *symbol-defs.svg* file and uses the aforementioned polyfill. Note that it must be hosted on a web server to work
properly. Learn more about this polyfill here: https://github.com/Keyamoon/svgxuse
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

+ 5
- 0
src/assets/icomoon/SVG/add.svg View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>add</title>
<path d="M22 6v-2h-4v2h-2v2h-2v2h-2v2h-2v2h-2v-2h-2v-2h-4v2h-2v2h2v2h2v2h2v2h2v2h2v-2h2v-2h2v-2h2v-2h2v-2h2v-2h2v-2h2v-2z"></path>
</svg>

+ 5
- 0
src/assets/icomoon/SVG/github.svg View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>github</title>
<path d="M16 0.396c-8.84 0-16 7.164-16 16 0 7.071 4.584 13.067 10.94 15.18 0.8 0.151 1.093-0.344 1.093-0.769 0-0.38-0.013-1.387-0.020-2.72-4.451 0.965-5.389-2.147-5.389-2.147-0.728-1.847-1.78-2.34-1.78-2.34-1.449-0.992 0.112-0.972 0.112-0.972 1.607 0.112 2.451 1.648 2.451 1.648 1.427 2.447 3.745 1.74 4.66 1.331 0.144-1.035 0.556-1.74 1.013-2.14-3.553-0.4-7.288-1.776-7.288-7.907 0-1.747 0.62-3.173 1.647-4.293-0.18-0.404-0.72-2.031 0.14-4.235 0 0 1.34-0.429 4.4 1.64 1.28-0.356 2.64-0.532 4-0.54 1.36 0.008 2.72 0.184 4 0.54 3.040-2.069 4.38-1.64 4.38-1.64 0.86 2.204 0.32 3.831 0.16 4.235 1.020 1.12 1.64 2.547 1.64 4.293 0 6.147-3.74 7.5-7.3 7.893 0.56 0.48 1.080 1.461 1.080 2.96 0 2.141-0.020 3.861-0.020 4.381 0 0.42 0.28 0.92 1.1 0.76 6.401-2.099 10.981-8.099 10.981-15.159 0-8.836-7.164-16-16-16z"></path>
</svg>

+ 5
- 0
src/assets/icomoon/SVG/remove.svg View File

@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<title>remove</title>
<path d="M18 12v-2h2v-2h2v-4h-2v-2h-2v2h-2v2h-2v2h-4v-2h-2v-2h-2v-2h-2v2h-2v4h2v2h2v2h2v2h-2v2h-2v2h-2v4h2v2h2v-2h2v-2h2v-2h4v2h2v2h2v2h2v-2h2v-4h-2v-2h-2v-2h-2v-2z"></path>
</svg>

+ 39
- 0
src/assets/icomoon/demo-external-svg.html View File

@ -0,0 +1,39 @@
<!doctype html>
<html>
<head>
<title>IcoMoon - SVG Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="demo-files/demo.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="bgc1 clearfix">
<div class="mhl">
<p>SVG Icons - Generated by <a href="https://icomoon.io/app">IcoMoon</a></p><p><strong>Notice</strong>: This demo (along with "symbol-defs.svg" and "svgxuse.js" files) should be <b>hosted on a web server</b> to work properly.</p>
</div>
</header>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 0</h1>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-github"><use xlink:href="symbol-defs.svg#icon-github"></use></svg><span class="name"> icon-github</span>
</div>
</div>
</div>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 12</h1>
<div class="glyph fs2">
<div class="clearfix pbs">
<svg class="icon icon-add"><use xlink:href="symbol-defs.svg#icon-add"></use></svg><span class="name"> icon-add</span>
</div>
</div>
<div class="glyph fs2">
<div class="clearfix pbs">
<svg class="icon icon-remove"><use xlink:href="symbol-defs.svg#icon-remove"></use></svg><span class="name"> icon-remove</span>
</div>
</div>
</div>
<script defer src="svgxuse.js"></script>
</body>
</html>

+ 150
- 0
src/assets/icomoon/demo-files/demo.css View File

@ -0,0 +1,150 @@
body {
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 1em;
line-height: 1.5;
color: #555;
background: #fff;
}
h1 {
font-size: 1.5em;
font-weight: normal;
box-shadow: 0 1px #ddd, 0 2px #fff, 0 3px #ddd;
}
small {
font-size: .66666667em;
}
a {
color: #e74c3c;
text-decoration: none;
}
a:hover, a:focus {
box-shadow: 0 1px #e74c3c;
}
.bshadow0, input {
box-shadow: inset 0 -2px #e7e7e7;
}
input:hover {
box-shadow: inset 0 -2px #ccc;
}
input, fieldset {
font-size: 1em;
margin: 0;
padding: 0;
border: 0;
}
input {
color: inherit;
line-height: 1.5;
height: 1.5em;
padding: .25em 0;
}
input:focus {
outline: none;
box-shadow: inset 0 -2px #449fdb;
}
.glyph {
font-size: 16px;
margin-right: 1.5em;
float: left;
width: 17em;
}
svg {
color: #000;
}
.liga {
width: 80%;
width: calc(100% - 2.5em);
}
.talign-right {
text-align: right;
}
.talign-center {
text-align: center;
}
.bgc1 {
background: #f1f1f1;
}
.fgc0 {
color: #000;
}
.fgc1 {
color: #999;
}
p {
margin-top: 1em;
margin-bottom: 1em;
}
.mvm {
margin-top: .75em;
margin-bottom: .75em;
}
.mtn {
margin-top: 0;
}
.mtl, .mal {
margin-top: 1.5em;
}
.mbl, .mal {
margin-bottom: 1.5em;
}
.mal, .mhl {
margin-left: 1.5em;
margin-right: 1.5em;
}
.mhmm {
margin-left: 1em;
margin-right: 1em;
}
.ptl {
padding-top: 1.5em;
}
.pbs, .pvs {
padding-bottom: .25em;
}
.pvs, .pts {
padding-top: .25em;
}
.unit {
float: left;
}
.unitRight {
float: right;
}
.size1of2 {
width: 50%;
}
.size1of1 {
width: 100%;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.hidden-true {
display: none;
}
.textbox0 {
width: 3em;
background: #f1f1f1;
padding: .25em .5em;
line-height: 1.5;
height: 1.5em;
}
.fs0 {
font-size: 16px;
}
.fs1 {
font-size: 32px;
}
.fs2 {
font-size: 24px;
}
.name {
margin-left: .25em;
}

+ 56
- 0
src/assets/icomoon/demo.html View File

@ -0,0 +1,56 @@
<!doctype html>
<html>
<head>
<title>IcoMoon - SVG Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="demo-files/demo.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-github" viewBox="0 0 32 32">
<title>github</title>
<path d="M16 0.396c-8.84 0-16 7.164-16 16 0 7.071 4.584 13.067 10.94 15.18 0.8 0.151 1.093-0.344 1.093-0.769 0-0.38-0.013-1.387-0.020-2.72-4.451 0.965-5.389-2.147-5.389-2.147-0.728-1.847-1.78-2.34-1.78-2.34-1.449-0.992 0.112-0.972 0.112-0.972 1.607 0.112 2.451 1.648 2.451 1.648 1.427 2.447 3.745 1.74 4.66 1.331 0.144-1.035 0.556-1.74 1.013-2.14-3.553-0.4-7.288-1.776-7.288-7.907 0-1.747 0.62-3.173 1.647-4.293-0.18-0.404-0.72-2.031 0.14-4.235 0 0 1.34-0.429 4.4 1.64 1.28-0.356 2.64-0.532 4-0.54 1.36 0.008 2.72 0.184 4 0.54 3.040-2.069 4.38-1.64 4.38-1.64 0.86 2.204 0.32 3.831 0.16 4.235 1.020 1.12 1.64 2.547 1.64 4.293 0 6.147-3.74 7.5-7.3 7.893 0.56 0.48 1.080 1.461 1.080 2.96 0 2.141-0.020 3.861-0.020 4.381 0 0.42 0.28 0.92 1.1 0.76 6.401-2.099 10.981-8.099 10.981-15.159 0-8.836-7.164-16-16-16z"></path>
</symbol>
<symbol id="icon-add" viewBox="0 0 24 24">
<title>add</title>
<path d="M22 6v-2h-4v2h-2v2h-2v2h-2v2h-2v2h-2v-2h-2v-2h-4v2h-2v2h2v2h2v2h2v2h2v2h2v-2h2v-2h2v-2h2v-2h2v-2h2v-2h2v-2h2v-2z"></path>
</symbol>
<symbol id="icon-remove" viewBox="0 0 24 24">
<title>remove</title>
<path d="M18 12v-2h2v-2h2v-4h-2v-2h-2v2h-2v2h-2v2h-4v-2h-2v-2h-2v-2h-2v2h-2v4h2v2h2v2h2v2h-2v2h-2v2h-2v4h2v2h2v-2h2v-2h2v-2h4v2h2v2h2v2h2v-2h2v-4h-2v-2h-2v-2h-2v-2z"></path>
</symbol>
</defs>
</svg>
<header class="bgc1 clearfix">
<div class="mhl">
<p>SVG Icons - Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
</div>
</header>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 0</h1>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-github"><use xlink:href="#icon-github"></use></svg><span class="name"> icon-github</span>
</div>
</div>
</div>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 12</h1>
<div class="glyph fs2">
<div class="clearfix pbs">
<svg class="icon icon-add"><use xlink:href="#icon-add"></use></svg><span class="name"> icon-add</span>
</div>
</div>
<div class="glyph fs2">
<div class="clearfix pbs">
<svg class="icon icon-remove"><use xlink:href="#icon-remove"></use></svg><span class="name"> icon-remove</span>
</div>
</div>
</div>
<script defer src="svgxuse.js"></script>
</body>
</html>

+ 108
- 0
src/assets/icomoon/selection.json View File

@ -0,0 +1,108 @@
{
"IcoMoonType": "selection",
"icons": [
{
"icon": {
"paths": [
"M512 12.672c-282.88 0-512 229.248-512 512 0 226.261 146.688 418.133 350.080 485.76 25.6 4.821 34.987-11.008 34.987-24.619 0-12.16-0.427-44.373-0.64-87.040-142.421 30.891-172.459-68.693-172.459-68.693-23.296-59.093-56.96-74.88-56.96-74.88-46.379-31.744 3.584-31.104 3.584-31.104 51.413 3.584 78.421 52.736 78.421 52.736 45.653 78.293 119.851 55.68 149.12 42.581 4.608-33.109 17.792-55.68 32.427-68.48-113.707-12.8-233.216-56.832-233.216-253.013 0-55.893 19.84-101.547 52.693-137.387-5.76-12.928-23.040-64.981 4.48-135.509 0 0 42.88-13.739 140.8 52.48 40.96-11.392 84.48-17.024 128-17.28 43.52 0.256 87.040 5.888 128 17.28 97.28-66.219 140.16-52.48 140.16-52.48 27.52 70.528 10.24 122.581 5.12 135.509 32.64 35.84 52.48 81.493 52.48 137.387 0 196.693-119.68 240-233.6 252.587 17.92 15.36 34.56 46.763 34.56 94.72 0 68.523-0.64 123.563-0.64 140.203 0 13.44 8.96 29.44 35.2 24.32 204.843-67.157 351.403-259.157 351.403-485.077 0-282.752-229.248-512-512-512z"
],
"attrs": [],
"isMulticolor": false,
"isMulticolor2": false,
"tags": [
"github"
],
"grid": 0
},
"attrs": [],
"properties": {
"id": 294,
"order": 4,
"prevSize": 32,
"name": "github"
},
"setIdx": 0,
"setId": 1,
"iconIdx": 293
},
{
"icon": {
"paths": [
"M938.667 256v-85.333h-170.667v85.333h-85.333v85.333h-85.333v85.333h-85.333v85.333h-85.333v85.333h-85.333v-85.333h-85.333v-85.333h-170.667v85.333h-85.333v85.333h85.333v85.333h85.333v85.333h85.333v85.333h85.333v85.333h85.333v-85.333h85.333v-85.333h85.333v-85.333h85.333v-85.333h85.333v-85.333h85.333v-85.333h85.333v-85.333h85.333v-85.333z"
],
"attrs": [],
"isMulticolor": false,
"isMulticolor2": false,
"tags": [
"checkmark"
],
"defaultCode": 59928,
"grid": 12
},
"attrs": [],
"properties": {
"order": 3,
"prevSize": 24,
"name": "add",
"ligatures": "checkmark",
"id": 280
},
"setIdx": 1,
"setId": 0,
"iconIdx": 280
},
{
"icon": {
"paths": [
"M768 512v-85.333h85.333v-85.333h85.333v-170.667h-85.333v-85.333h-85.333v85.333h-85.333v85.333h-85.333v85.333h-170.667v-85.333h-85.333v-85.333h-85.333v-85.333h-85.333v85.333h-85.333v170.667h85.333v85.333h85.333v85.333h85.333v85.333h-85.333v85.333h-85.333v85.333h-85.333v170.667h85.333v85.333h85.333v-85.333h85.333v-85.333h85.333v-85.333h170.667v85.333h85.333v85.333h85.333v85.333h85.333v-85.333h85.333v-170.667h-85.333v-85.333h-85.333v-85.333h-85.333v-85.333z"
],
"attrs": [],
"isMulticolor": false,
"isMulticolor2": false,
"tags": [
"cross"
],
"defaultCode": 59929,
"grid": 12
},
"attrs": [],
"properties": {
"order": 2,
"prevSize": 24,
"name": "remove",
"ligatures": "cross",
"id": 281
},
"setIdx": 1,
"setId": 0,
"iconIdx": 281
}
],
"height": 1024,
"preferences": {
"showGlyphs": true,
"showCodes": true,
"showQuickUse": true,
"showQuickUse2": true,
"showSVGs": true,
"fontPref": {
"prefix": "icon-",
"metadata": {},
"metrics": {
"emSize": 1024,
"baseline": 6.25,
"whitespace": 50
}
},
"imagePref": {
"prefix": "icon-",
"png": true,
"useClassSelector": true,
"color": 0,
"bgColor": 16777215,
"name": "icomoon",
"classSelector": ".icon"
},
"historySize": 50
}
}

+ 16
- 0
src/assets/icomoon/style.css View File

@ -0,0 +1,16 @@
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
font-size: 32px;
color: red;
}
========================================== */

+ 230
- 0
src/assets/icomoon/svgxuse.js View File

@ -0,0 +1,230 @@
/*!
* @copyright Copyright (c) 2017 IcoMoon.io
* @license Licensed under MIT license
* See https://github.com/Keyamoon/svgxuse
* @version 1.2.6
*/
/*jslint browser: true */
/*global XDomainRequest, MutationObserver, window */
(function () {
"use strict";
if (typeof window !== "undefined" && window.addEventListener) {
var cache = Object.create(null); // holds xhr objects to prevent multiple requests
var checkUseElems;
var tid; // timeout id
var debouncedCheck = function () {
clearTimeout(tid);
tid = setTimeout(checkUseElems, 100);
};
var unobserveChanges = function () {
return;
};
var observeChanges = function () {
var observer;
window.addEventListener("resize", debouncedCheck, false);
window.addEventListener("orientationchange", debouncedCheck, false);
if (window.MutationObserver) {
observer = new MutationObserver(debouncedCheck);
observer.observe(document.documentElement, {
childList: true,
subtree: true,
attributes: true
});
unobserveChanges = function () {
try {
observer.disconnect();
window.removeEventListener("resize", debouncedCheck, false);
window.removeEventListener("orientationchange", debouncedCheck, false);
} catch (ignore) {}
};
} else {
document.documentElement.addEventListener("DOMSubtreeModified", debouncedCheck, false);
unobserveChanges = function () {
document.documentElement.removeEventListener("DOMSubtreeModified", debouncedCheck, false);
window.removeEventListener("resize", debouncedCheck, false);
window.removeEventListener("orientationchange", debouncedCheck, false);
};
}
};
var createRequest = function (url) {
// In IE 9, cross origin requests can only be sent using XDomainRequest.
// XDomainRequest would fail if CORS headers are not set.
// Therefore, XDomainRequest should only be used with cross origin requests.
function getOrigin(loc) {
var a;
if (loc.protocol !== undefined) {
a = loc;
} else {
a = document.createElement("a");
a.href = loc;
}
return a.protocol.replace(/:/g, "") + a.host;
}
var Request;
var origin;
var origin2;
if (window.XMLHttpRequest) {
Request = new XMLHttpRequest();
origin = getOrigin(location);
origin2 = getOrigin(url);
if (Request.withCredentials === undefined && origin2 !== "" && origin2 !== origin) {
Request = XDomainRequest || undefined;
} else {
Request = XMLHttpRequest;
}
}
return Request;
};
var xlinkNS = "http://www.w3.org/1999/xlink";
checkUseElems = function () {
var base;
var bcr;
var fallback = ""; // optional fallback URL in case no base path to SVG file was given and no symbol definition was found.
var hash;
var href;
var i;
var inProgressCount = 0;
var isHidden;
var Request;
var url;
var uses;
var xhr;
function observeIfDone() {
// If done with making changes, start watching for chagnes in DOM again
inProgressCount -= 1;
if (inProgressCount === 0) { // if all xhrs were resolved
unobserveChanges(); // make sure to remove old handlers
observeChanges(); // watch for changes to DOM
}
}
function attrUpdateFunc(spec) {
return function () {
if (cache[spec.base] !== true) {
spec.useEl.setAttributeNS(xlinkNS, "xlink:href", "#" + spec.hash);
if (spec.useEl.hasAttribute("href")) {
spec.useEl.setAttribute("href", "#" + spec.hash);
}
}
};
}
function onloadFunc(xhr) {
return function () {
var body = document.body;
var x = document.createElement("x");
var svg;
xhr.onload = null;
x.innerHTML = xhr.responseText;
svg = x.getElementsByTagName("svg")[0];
if (svg) {
svg.setAttribute("aria-hidden", "true");
svg.style.position = "absolute";
svg.style.width = 0;
svg.style.height = 0;
svg.style.overflow = "hidden";
body.insertBefore(svg, body.firstChild);
}
observeIfDone();
};
}
function onErrorTimeout(xhr) {
return function () {
xhr.onerror = null;
xhr.ontimeout = null;
observeIfDone();
};
}
unobserveChanges(); // stop watching for changes to DOM
// find all use elements
uses = document.getElementsByTagName("use");
for (i = 0; i < uses.length; i += 1) {
try {
bcr = uses[i].getBoundingClientRect();
} catch (ignore) {
// failed to get bounding rectangle of the use element
bcr = false;
}
href = uses[i].getAttribute("href")
|| uses[i].getAttributeNS(xlinkNS, "href")
|| uses[i].getAttribute("xlink:href");
if (href && href.split) {
url = href.split("#");
} else {
url = ["", ""];
}
base = url[0];
hash = url[1];
isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0;
if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) {
// the use element is empty
// if there is a reference to an external SVG, try to fetch it
// use the optional fallback URL if there is no reference to an external SVG
if (fallback && !base.length && hash && !document.getElementById(hash)) {
base = fallback;
}
if (uses[i].hasAttribute("href")) {
uses[i].setAttributeNS(xlinkNS, "xlink:href", href);
}
if (base.length) {
// schedule updating xlink:href
xhr = cache[base];
if (xhr !== true) {
// true signifies that prepending the SVG was not required
setTimeout(attrUpdateFunc({
useEl: uses[i],
base: base,
hash: hash
}), 0);
}
if (xhr === undefined) {
Request = createRequest(base);
if (Request !== undefined) {
xhr = new Request();
cache[base] = xhr;
xhr.onload = onloadFunc(xhr);
xhr.onerror = onErrorTimeout(xhr);
xhr.ontimeout = onErrorTimeout(xhr);
xhr.open("GET", base);
xhr.send();
inProgressCount += 1;
}
}
}
} else {
if (!isHidden) {
if (cache[base] === undefined) {
// remember this URL if the use element was not empty and no request was sent
cache[base] = true;
} else if (cache[base].onload) {
// if it turns out that prepending the SVG is not necessary,
// abort the in-progress xhr.
cache[base].abort();
delete cache[base].onload;
cache[base] = true;
}
} else if (base.length && cache[base]) {
setTimeout(attrUpdateFunc({
useEl: uses[i],
base: base,
hash: hash
}), 0);
}
}
}
uses = "";
inProgressCount += 1;
observeIfDone();
};
var winLoad;
winLoad = function () {
window.removeEventListener("load", winLoad, false); // to prevent memory leaks
tid = setTimeout(checkUseElems, 0);
};
if (document.readyState !== "complete") {
// The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty.
window.addEventListener("load", winLoad, false);
} else {
// No need to add a listener if the document is already loaded, initialize immediately.
winLoad();
}
}
}());

+ 16
- 0
src/assets/icomoon/symbol-defs.svg View File

@ -0,0 +1,16 @@
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-github" viewBox="0 0 32 32">
<title>github</title>
<path d="M16 0.396c-8.84 0-16 7.164-16 16 0 7.071 4.584 13.067 10.94 15.18 0.8 0.151 1.093-0.344 1.093-0.769 0-0.38-0.013-1.387-0.020-2.72-4.451 0.965-5.389-2.147-5.389-2.147-0.728-1.847-1.78-2.34-1.78-2.34-1.449-0.992 0.112-0.972 0.112-0.972 1.607 0.112 2.451 1.648 2.451 1.648 1.427 2.447 3.745 1.74 4.66 1.331 0.144-1.035 0.556-1.74 1.013-2.14-3.553-0.4-7.288-1.776-7.288-7.907 0-1.747 0.62-3.173 1.647-4.293-0.18-0.404-0.72-2.031 0.14-4.235 0 0 1.34-0.429 4.4 1.64 1.28-0.356 2.64-0.532 4-0.54 1.36 0.008 2.72 0.184 4 0.54 3.040-2.069 4.38-1.64 4.38-1.64 0.86 2.204 0.32 3.831 0.16 4.235 1.020 1.12 1.64 2.547 1.64 4.293 0 6.147-3.74 7.5-7.3 7.893 0.56 0.48 1.080 1.461 1.080 2.96 0 2.141-0.020 3.861-0.020 4.381 0 0.42 0.28 0.92 1.1 0.76 6.401-2.099 10.981-8.099 10.981-15.159 0-8.836-7.164-16-16-16z"></path>
</symbol>
<symbol id="icon-add" viewBox="0 0 24 24">
<title>add</title>
<path d="M22 6v-2h-4v2h-2v2h-2v2h-2v2h-2v2h-2v-2h-2v-2h-4v2h-2v2h2v2h2v2h2v2h2v2h2v-2h2v-2h2v-2h2v-2h2v-2h2v-2h2v-2h2v-2z"></path>
</symbol>
<symbol id="icon-remove" viewBox="0 0 24 24">
<title>remove</title>
<path d="M18 12v-2h2v-2h2v-4h-2v-2h-2v2h-2v2h-2v2h-4v-2h-2v-2h-2v-2h-2v2h-2v4h2v2h2v2h2v2h-2v2h-2v2h-2v4h2v2h2v-2h2v-2h2v-2h4v2h2v2h2v2h2v-2h2v-4h-2v-2h-2v-2h-2v-2z"></path>
</symbol>
</defs>
</svg>

+ 17
- 0
src/raw.riot View File

@ -0,0 +1,17 @@
<raw>
<script>
export default {
setInnerHTML() {
this.root.innerHTML = this.props.html
},
onMounted() {
this.setInnerHTML()
},
onUpdated() {
this.setInnerHTML()
}
}
</script>
</raw>

+ 139
- 0
src/tiny-tags.riot View File

@ -0,0 +1,139 @@
<tiny-tags>
<div class="tiny-tags">
<select name="{ state.options.name }[]" multiple style="display: none;">
<option each={ tag in state.tags } value={ tag }></option>
</select>
<ul class="tiny-tags__list">
<li class="tiny-tags__item" each={ tag in state.tags }>
<span class="tiny-tags__label">{ tag }</span>
<button class="tiny-tags__button tiny-tags__button--remove" type="button" onclick={ () => { handleRemove(tag) } }>
<raw html={ state.options.svg.remove } />
</button>
</li>
<li class="tiny-tags__item tiny-tags__item--add">
<input class="tiny-tags__input" type="text" onkeypress={ handleKeyup } />
<button class="tiny-tags__button tiny-tags__button--add" type="button" onclick={ handleAdd }>
<raw html={ state.options.svg.add } />
</button>
</li>
</ul>
</div>
<script>
import * as riot from 'riot';
import Raw from './raw.riot';
riot.register('raw', Raw);
export default {
state: {
options: {
name: 'tags',
svg: {
add: '<svg class="icon"><use xlink:href="#icon-add" /></svg>',
remove: '<svg class="icon"><use xlink:href="#icon-remove" /></svg>'
},
separator: ','
},
tags: [ ]
},
/**
*
*
*/
onBeforeMount() {
// if props.tags is set and it is not a array, split it with a
// separator and add to tags
if (this.props.tags) {
let tags = this.props.tags;
if (!Array.isArray(tags)) {
tags = tags.split(this.state.options.separator);
}
this.state.tags = tags;
}
if (this.props.options) {
this.state.options = Object.assign(this.state.options, this.props.options);
}
},
/**
* check if "return" has pressed,
* if trigger click event for button
*
* @param Object event
*
*/
handleKeyup(event) {
if (event.keyCode === 13) {
event.preventDefault();
// trigger to add tag
this.$('.tiny-tags__button--add').click();
}
},
/**
* remove tag
*
*
* @param String tag
*
*/
handleRemove(tag) {
for (let i = 0; i < this.state.tags.length; i++) {
if (this.state.tags[i] === tag) {
this.state.tags.splice(i, 1);
this.update();
break;
}
}
this.$('input').focus();
},
/**
* adding tag, check if string already exists
*
*
* @param Object event
*
*/
handleAdd(event) {
let inArray = false;
// delete whitespace
let value = this.$('input').value.trim();
// check if value already in data
for (let i = 0; i < this.state.tags.length; i++) {
if (value === this.state.tags[i]) {
inArray = true;
break;
}
}
// if value is not already in data and longer than zero chars
if (inArray === false && value.length > 0) {
this.state.tags.push(value)
this.update();
// select new option
this.$('select option[value="' + value + '"]').selected = true;
this.$('input').value = '';
}
// adding focus to input
this.$('input').focus();
}
}
</script>
</tiny-tags>

+ 42
- 0
webpack.mix.js View File

@ -0,0 +1,42 @@
const mix = require('laravel-mix');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.webpackConfig({
plugins: [
new HtmlWebpackPlugin({
filename: 'dist/index.html',
template: 'src/assets/html/index.html.ejs',
inject: false,
svg: fs.readFileSync(__dirname + '/src/assets/icomoon/symbol-defs.svg')
})
],
module: {
rules: [{
test: /\.riot$/,
exclude: /node_modules/,
use: [{
loader: '@riotjs/webpack-loader',
query: {
hot: false
}
}]
}
]}
});
mix.js('demo-386.js', 'dist/js');
mix.sass('demo-386.scss', 'dist/css');
mix.copy('src/assets/fonts', 'dist/fonts');

Write Preview
Loading…
Cancel
Save