Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

polymer 2 #31

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

polymer 2 #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 CONTRIBUTAING.md → CONTRIBUTING.md
View file
Open in desktop
File renamed without changes.
13 changes: 7 additions & 6 deletions bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "paper-tags-input",
"version": "1.2.5",
"version": "2.0.0",
"authors": [
"Tianxiang Zhang <[email protected]>"
],
Expand All @@ -20,12 +20,13 @@
"/demo/"
],
"dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"paper-input": "PolymerElements/paper-input#^1.0.5",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.1.4"
"polymer": "Polymer/polymer#^2.0.0",
"paper-input": "PolymerElements/paper-input#^2.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"web-component-tester": "*"
"iron-component-page": "PolymerElements/iron-component-page#^2.0.0",
"web-component-tester": "^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
}
}
119 changes: 119 additions & 0 deletions demo/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<dom-module id="tags-input-demo">
<template>
<div class="container">
<p>An example of <code>&lt;paper-tags-input&gt;</code>:</p>
<div class="container">
<code>
&lt;paper-tags-input tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Demo label&quot; &gt;&lt;/paper-tags-input&gt;
</code>
</div>
<paper-tags-input tags="{{testtags}}"
placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Demo label" >
</paper-tags-input>
</div>

<div class="container">
<p>A example of <code>&lt;paper-tags-input&gt;</code> that only supports remove tags but not add tags:</p>
<div class="container">
<code>
&lt;paper-tags-input enable-add=&quot;{{enableAdd}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Remove only&quot; &gt; &lt;/paper-tags-input&gt;
</code>
</div>

<paper-tags-input enable-add="{{enableAdd}}" tags="{{testtags}}"
placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Remove only" >
</paper-tags-input>
</div>


<div class="container">
<p>A example of <code>&lt;paper-tags-input&gt;</code> that only supports remove tags but not add tags:</p>
<div class="container">
<code>
&lt;paper-tags-input enable-remove=&quot;{{enableRemove}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Read only&quot; &gt; &lt;/paper-tags-input&gt;
</code>
</div>
<paper-tags-input enable-remove="{{enableRemove}}" tags="{{testtags}}"
placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Read only" >
</paper-tags-input>
</div>

<div class="container">
<p>A example of <code>&lt;paper-tags-input&gt;</code> use medium and small size of tags:</p>
<div class="container">
<code>
&lt;paper-tags-input size=&quot;medium&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Medium&quot; &gt; &lt;/paper-tags-input&gt;
</code>
</div>
<paper-tags-input size="medium" tags="{{testtags}}"
placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Medium" >
</paper-tags-input>
<div class="container">
<code>
&lt;paper-tags-input size=&quot;medium&quot; enable-remove=&quot;{{enableRemove}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Medium&quot; &gt; &lt;/paper-tags-input&gt;
</code>
</div>
<paper-tags-input size="medium" enable-remove="{{enableRemove}}" tags="{{testtags}}"
placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Medium" >
</paper-tags-input>
<div class="container">
<code>
&lt;paper-tags-input size=&quot;small&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Small&quot; &gt; &lt;/paper-tags-input&gt;
</code>
</div>
<paper-tags-input size="small" tags="{{testtags}}"
placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Small" >
</paper-tags-input>
<div class="container">
<code>
&lt;paper-tags-input size=&quot;small&quot; enable-remove=&quot;{{enableRemove}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Small&quot; &gt; &lt;/paper-tags-input&gt;
</code>
</div>
<paper-tags-input size="small" enable-remove="{{enableRemove}}" tags="{{testtags}}"
placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Small" >
</paper-tags-input>
</div>


<div class="container">
<p>A example of <code>&lt;paper-tags-input&gt;</code> use custom tag color and font color of tags:</p>
<div class="container">
<code>
&lt;paper-tags-input tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; tag-color=&quot;red&quot; font-color=&quot;#ffffff&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Custom color&quot; &gt; &lt;/paper-tags-input&gt;
</code>
</div>
<paper-tags-input tags="{{testtags}}"
placeholder="Please enter a test tag for this" tag-color="red" font-color="#ffffff" empty-error-message="Oops. Tag could not be empty" label="Custom color" >
</paper-tags-input>
</div>

<div class="container">
<p>A example of <code>&lt;paper-tags-input&gt;</code> that has unicode language tags:</p>
<div class="container">
<code>
&lt;paper-tags-input tags=&quot;{{unicodes}}&quot; placeholder=&quot;Please enter a test tag for this&quot; label=&quot;Unicode tags&quot; &gt;
</code>
</div>
<paper-tags-input tags="{{unicodes}}"
placeholder="Please enter a test tag for this" label="Unicode tags" >
</paper-tags-input>
</div>
</template>
<script>
Polymer({
is: 'tags-input-demo',
properties: {
enableAdd: Boolean,
enableRemove: Boolean,
testTags: {
type: Array,
value: ['QianBenLulu', 'Taeyeon','Jessica','Tiffany','Sunny','Yuri','Hyeoyeon','Seohyun','Sooyoung','Yoona']
},
unicodes: {
type: Array,
value: ['千本露露', '소녀시대','こまる','君のことがすきです','Mesut Özil','السلام عليكم','สวัสดี','Товарищи, здравствуйте!']
}
}
});
</script>
</dom-module>
141 changes: 13 additions & 128 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
Expand All @@ -15,129 +15,14 @@
<title>paper-tags-input Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../paper-tags-input.html">
<link rel="import" href="../../paper-material/paper-material.html">

<link rel="import" href="./demo.html">
</head>
<style>
.container{
padding:20px;
}
.container{
padding:20px;
}
</style>
<body >
<template is="dom-bind" id="app">
<paper-material class="container">
<p>An example of <code>&lt;paper-tags-input&gt;</code>:</p>
<paper-material class="container">
<code>
&lt;paper-tags-input tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Demo label&quot; &gt;&lt;/paper-tags-input&gt;
</code>
</paper-material>
<paper-tags-input tags="{{testtags}}"
placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Demo label" >
</paper-tags-input>
</paper-material>

<paper-material class="container">
<p>A example of <code>&lt;paper-tags-input&gt;</code> that only supports remove tags but not add tags:</p>
<paper-material class="container">
<code>
&lt;paper-tags-input enable-add=&quot;{{enable_add}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Remove only&quot; &gt; &lt;/paper-tags-input&gt;
</code>
</paper-material>

<paper-tags-input enable-add="{{enable_add}}" tags="{{testtags}}"
placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Remove only" >
</paper-tags-input>
</paper-material>


<paper-material class="container">
<p>A example of <code>&lt;paper-tags-input&gt;</code> that only supports remove tags but not add tags:</p>
<paper-material class="container">
<code>
&lt;paper-tags-input enable-remove=&quot;{{enable_remove}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Read only&quot; &gt; &lt;/paper-tags-input&gt;
</code>
</paper-material>
<paper-tags-input enable-remove="{{enable_remove}}" tags="{{testtags}}"
placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Read only" >
</paper-tags-input>
</paper-material>

<paper-material class="container">
<p>A example of <code>&lt;paper-tags-input&gt;</code> use medium and small size of tags:</p>
<paper-material class="container">
<code>
&lt;paper-tags-input size=&quot;medium&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Medium&quot; &gt; &lt;/paper-tags-input&gt;
</code>
</paper-material>
<paper-tags-input size="medium" tags="{{testtags}}"
placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Medium" >
</paper-tags-input>
<paper-material class="container">
<code>
&lt;paper-tags-input size=&quot;medium&quot; enable-remove=&quot;{{enable_remove}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Medium&quot; &gt; &lt;/paper-tags-input&gt;
</code>
</paper-material>
<paper-tags-input size="medium" enable-remove="{{enable_remove}}" tags="{{testtags}}"
placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Medium" >
</paper-tags-input>
<paper-material class="container">
<code>
&lt;paper-tags-input size=&quot;small&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Small&quot; &gt; &lt;/paper-tags-input&gt;
</code>
</paper-material>
<paper-tags-input size="small" tags="{{testtags}}"
placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Small" >
</paper-tags-input>
<paper-material class="container">
<code>
&lt;paper-tags-input size=&quot;small&quot; enable-remove=&quot;{{enable_remove}}&quot; tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Small&quot; &gt; &lt;/paper-tags-input&gt;
</code>
</paper-material>
<paper-tags-input size="small" enable-remove="{{enable_remove}}" tags="{{testtags}}"
placeholder="Please enter a test tag for this" empty-error-message="Oops. Tag could not be empty" label="Small" >
</paper-tags-input>
</paper-material>


<paper-material class="container">
<p>A example of <code>&lt;paper-tags-input&gt;</code> use custom tag color and font color of tags:</p>
<paper-material class="container">
<code>
&lt;paper-tags-input tags=&quot;{{testtags}}&quot; placeholder=&quot;Please enter a test tag for this&quot; tag-color=&quot;red&quot; font-color=&quot;#ffffff&quot; empty-error-message=&quot;Oops. Tag could not be empty&quot; label=&quot;Custom color&quot; &gt; &lt;/paper-tags-input&gt;
</code>
</paper-material>
<paper-tags-input tags="{{testtags}}"
placeholder="Please enter a test tag for this" tag-color="red" font-color="#ffffff" empty-error-message="Oops. Tag could not be empty" label="Custom color" >
</paper-tags-input>
</paper-material>
</paper-material>

<paper-material class="container">
<p>A example of <code>&lt;paper-tags-input&gt;</code> that has unicode language tags:</p>
<paper-material class="container">
<code>
&lt;paper-tags-input tags=&quot;{{unicodes}}&quot; placeholder=&quot;Please enter a test tag for this&quot; label=&quot;Unicode tags&quot; &gt;
</code>
</paper-material>
<paper-tags-input tags="{{unicodes}}"
placeholder="Please enter a test tag for this" label="Unicode tags" >
</paper-tags-input>
</paper-material>
</paper-material>



<script>
window.addEventListener('WebComponentsReady', function() {
var app = document.querySelector('#app');
app.enable_add = false;
app.enable_remove = false;
app.testtags = ['QianBenLulu', 'Taeyeon','Jessica','Tiffany','Sunny','Yuri','Hyeoyeon','Seohyun','Sooyoung','Yoona']
app.unicodes = ['千本露露', '소녀시대','こまる','君のことがすきです','Mesut Özil','السلام عليكم','สวัสดี','Товарищи, здравствуйте!']
});
</script>

</template>
<body>
<tags-input-demo></tags-input-demo>
</body>
</html>
47 changes: 25 additions & 22 deletions paper-tags-input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,34 +56,37 @@
bower install --save paper-tags-input


@demo
`paper-tags-input`
@customElement
@polymer
@demo demo/index.html
-->
<dom-module id="paper-tags-input">
<style>
:host {
display: block;
box-sizing: border-box;
font-family: 'Roboto', 'Noto', sans-serif;
}
<template>
<style>
:host {
display: block;
box-sizing: border-box;
font-family: 'Roboto', 'Noto', sans-serif;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
content: " ";
display: block;
height: 0;
clear: both;
}
</style>
</style>

<template>
<h3>{{label}}</h3>
<h3>{{label}}</h3>
<div class="clearfix" >
<template is="dom-repeat" items="{{tags}}">
<tag-item font-color="{{fontColor}}" tag-color="{{tagColor}}" size="{{size}}" enable-remove="{{enableRemove}}" index="{{index}}" value="{{item}}"></tag-item>
</div>
</template>
<template is="dom-repeat" items="{{tags}}">
<tag-item font-color="{{fontColor}}" tag-color="{{tagColor}}" size="{{size}}" enable-remove="{{enableRemove}}" index="{{index}}" value="{{item}}"></tag-item>
</div>
<template is="dom-if" if="{{enableAdd}}">
<paper-input on-focusout="_focusOut" error-message="{{emptyErrorMessage}}" label="{{placeholder}}" on-keydown="_keyDown" value="{{input_value}}"></paper-input>
</template>
</template>
</div>
<template is="dom-if" if="{{enableAdd}}">
<paper-input on-focusout="_focusOut" error-message="{{emptyErrorMessage}}" label="{{placeholder}}" on-keydown="_keyDown" value="{{input_value}}"></paper-input>
</template>

</template>

Expand All @@ -103,7 +106,7 @@ <h3>{{label}}</h3>
tags:{
type:Array,
notify: true,
value:function(){return []},
value: [],
},
/**
* the CSS color for the tag, e.g. #e5e5e5
Expand Down
Loading