Björn
4 years ago
parent
c074f5711f
commit
da4c1abeae
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
fonts
|
||||
@ -1,2 +1,4 @@
|
||||
# Tiny Tag
|
||||
# Tiny Tags
|
||||
|
||||
* Add Tags to a List
|
||||
* Can be used as a Form-Field
|
||||
@ -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');
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,4 @@
|
||||
{
|
||||
"/dist/js/demo-386.js": "/dist/js/demo-386.js",
|
||||
"/dist/css/demo-386.css": "/dist/css/demo-386.css"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
|
After Width: | Height: | Size: 133 B |
|
After Width: | Height: | Size: 455 B |
|
After Width: | Height: | Size: 143 B |
@ -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.
|
||||
|
||||
|
After Width: | Height: | Size: 288 B |
|
After Width: | Height: | Size: 975 B |
|
After Width: | Height: | Size: 334 B |
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
========================================== */
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
}());
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,17 @@
|
||||
<raw>
|
||||
<script>
|
||||
export default {
|
||||
setInnerHTML() {
|
||||
this.root.innerHTML = this.props.html
|
||||
},
|
||||
|
||||
onMounted() {
|
||||
this.setInnerHTML()
|
||||
},
|
||||
|
||||
onUpdated() {
|
||||
this.setInnerHTML()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</raw>
|
||||
@ -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>
|
||||
@ -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');
|
||||
Loading…
Reference in new issue