From 84bc9b7759e94867f1082fa8b02f637dd4f8a501 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 25 Dec 2018 00:14:06 +0300
Subject: [PATCH] Implemented Chips Component

---
 src/AppMenu.vue                 |  1 +
 src/assets/styles/primevue.css  |  1 +
 src/components/chips/Chips.css  | 59 +++++++++++++++++++++
 src/components/chips/Chips.vue  | 93 +++++++++++++++++++++++++++++++++
 src/main.js                     |  2 +
 src/router.js                   |  5 ++
 src/views/chips/ChipsDemo.vue   | 42 +++++++++++++++
 src/views/rating/RatingDemo.vue |  2 +-
 8 files changed, 204 insertions(+), 1 deletion(-)
 create mode 100644 src/components/chips/Chips.css
 create mode 100644 src/components/chips/Chips.vue
 create mode 100644 src/views/chips/ChipsDemo.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 0c2dc595b..beee571ae 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -9,6 +9,7 @@
             <div :class="{'submenuhide': activeMenuIndex !== 0, 'submenushow': activeMenuIndex === 0}">
                 <div>
                     <router-link to="/checkbox">&#9679; Checkbox</router-link>
+                    <router-link to="/chips">&#9679; Chips</router-link>
                     <router-link to="/inputswitch">&#9679; InputSwitch</router-link>
                     <router-link to="/inputtext">&#9679; InputText</router-link>
                     <router-link to="/listbox">&#9679; Listbox</router-link>
diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index 8ac9d1d65..c043ccef3 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -3,6 +3,7 @@
 @import '../../components/button/Button.css';
 @import '../../components/card/Card.css';
 @import '../../components/checkbox/Checkbox.css';
+@import '../../components/chips/Chips.css';
 @import '../../components/fieldset/Fieldset.css';
 @import '../../components/inputtext/InputText.css';
 @import '../../components/inputswitch/InputSwitch.css';
diff --git a/src/components/chips/Chips.css b/src/components/chips/Chips.css
new file mode 100644
index 000000000..4d8e94106
--- /dev/null
+++ b/src/components/chips/Chips.css
@@ -0,0 +1,59 @@
+.p-chips > ul.p-inputtext {
+    clear: left;
+    cursor: text;
+    list-style-type: none;
+    margin: 0;
+    overflow: hidden;
+    padding: 0 .25em;
+}
+
+.p-chips-token {
+    cursor: default;
+    display: inline-block;
+    vertical-align: middle;
+    overflow: hidden;
+    padding: .125em .5em;
+    white-space: nowrap;
+    position: relative;
+    margin-right: .125em;
+    border: 0 none;
+    font-size: .9em;
+}
+
+.p-chips-token .p-chips-token-label {
+    display: block;
+    margin-right: 2em;
+}
+
+.p-chips > .p-disabled .p-chips-token-label {
+    margin-right: 0;
+}
+
+.p-chips-token .p-chips-token-icon {
+    margin-top: -.5em;
+    position: absolute;
+    right: 0.2em;
+    top: 50%;
+    cursor: pointer;
+}
+
+.p-chips-input-token {
+    display: inline-block;
+    vertical-align: middle;
+    list-style-type: none;
+    margin: 0 0 0 .125em;
+    padding: .25em .25em .25em 0;
+}
+
+.p-chips-input-token .p-inputtext {
+    border: 0 none;
+    width: 10em;
+    outline: medium none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+}
\ No newline at end of file
diff --git a/src/components/chips/Chips.vue b/src/components/chips/Chips.vue
new file mode 100644
index 000000000..472a9d14a
--- /dev/null
+++ b/src/components/chips/Chips.vue
@@ -0,0 +1,93 @@
+<template>
+    <div class="p-chips p-component">
+        <ul :class="['p-inputtext', {'p-disabled': disabled, 'p-focus': focused}]" @click="onWrapperClick($event)">
+            <li v-for="(val,i) of value" :key="val" class="p-chips-token p-highlight">
+                <slot :value="val">  
+                    <span class="p-chips-token-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
+                    <span class="p-chips-token-label">{{val}}</span>
+                </slot>
+            </li>
+            <li class="p-chips-input-token">
+                <input ref="input" type="text" class="p-inputtext p-component" @focus="onFocus($event)" @blur="onBlur($event)" @keydown="onKeyDown($event)" :disabled="disabled || maxedOut">
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: Array,
+        disabled: Boolean,
+        max: Number
+    },
+    data() {
+        return {
+            focused: false
+        };
+    },
+    methods: {
+        onWrapperClick(event) {
+            this.$refs.input.focus();
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.$emit('focus', event);
+        },
+        onBlur() {
+            this.focused = false;
+            this.$emit('blur', event);
+        },
+        onKeyDown(event) {
+            const inputValue = event.target.value;
+
+            switch(event.which) {
+                //backspace
+                case 8:
+                    if (inputValue.length === 0 && this.value && this.value.length > 0) {
+                        this.removeItem(event, this.value.length - 1);
+                    }
+                break;
+            
+                //enter
+                case 13:
+                    if (inputValue && inputValue.trim().length && (!this.max || this.max > this.value.length)) {
+                        let values = this.value ? [...this.value]: [];
+                        values.push(inputValue);
+                        this.$emit('input', values);
+                        this.$emit('add', {
+                            originalEvent: event,
+                            value: values
+                        });
+                    }
+
+                    this.$refs.input.value = '';
+                    event.preventDefault();
+                break;
+            }
+        },
+        removeItem(event, index) {
+            if (this.disabled) {
+                return;
+            }
+            
+            let values = [...this.value];
+            const removedItem = values.splice(index, 1);
+            this.$emit('input', values);
+            this.$emit('remove', {
+                originalEvent: event,
+                value: removedItem
+            });
+        }
+    },
+    computed: {
+        maxedOut() {
+            return this.max && this.value && this.max === this.value.length;
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/main.js b/src/main.js
index 4290c5471..473d99039 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,7 @@ import AccordionTab from './components/accordion/AccordionTab';
 import Button from './components/button/Button';
 import Card from './components/card/Card';
 import Checkbox from './components/checkbox/Checkbox';
+import Chips from './components/chips/Chips';
 import InputSwitch from './components/inputswitch/InputSwitch';
 import InputText from './components/inputtext/InputText';
 import Fieldset from './components/fieldset/Fieldset';
@@ -32,6 +33,7 @@ Vue.component('p-accordionTab', AccordionTab);
 Vue.component('p-button', Button);
 Vue.component('p-card', Card);
 Vue.component('p-checkbox', Checkbox);
+Vue.component('p-chips', Chips);
 Vue.component('p-inputSwitch', InputSwitch);
 Vue.component('p-inputtext', InputText);
 Vue.component('p-listbox', Listbox);
diff --git a/src/router.js b/src/router.js
index fe0018398..0e8c6d684 100644
--- a/src/router.js
+++ b/src/router.js
@@ -31,6 +31,11 @@ export default new Router({
         name: 'checkbox',
         component: () => import('./views/checkbox/CheckboxDemo.vue')
     },
+    {
+        path: '/chips',
+        name: 'chips',
+        component: () => import('./views/chips/ChipsDemo.vue')
+    },
     {
         path: '/fieldset',
         name: 'fieldset',
diff --git a/src/views/chips/ChipsDemo.vue b/src/views/chips/ChipsDemo.vue
new file mode 100644
index 000000000..a258ff30e
--- /dev/null
+++ b/src/views/chips/ChipsDemo.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Chips</h1>
+                <p>Chips is used to enter multiple values on an input field.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Basic</h3>
+            <p-chips v-model="value1" />
+
+            <h3>Template</h3>
+            <p-chips v-model="value2">
+                <template slot-scope="{value}">
+                    <div>
+                        <span>{{value}} - (active) </span>
+                        <i class="pi pi-user-plus" style="font-size: 14px"></i>
+                    </div>
+                </template>
+            </p-chips>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null
+        }
+    }
+}
+</script>
+
+<style>
+.p-chips .p-inputtext {
+    width: 100%;
+}
+</style>
diff --git a/src/views/rating/RatingDemo.vue b/src/views/rating/RatingDemo.vue
index 7ae093b9f..c11d24e58 100644
--- a/src/views/rating/RatingDemo.vue
+++ b/src/views/rating/RatingDemo.vue
@@ -15,7 +15,7 @@
             <p-rating v-model="val2" :cancel="false" />
 
             <h3>ReadOnly</h3> 
-            <p-rating :value="5" readonly={true} :stars="10" :cancel="false" />
+            <p-rating :value="5" :readonly="true" :stars="10" :cancel="false" />
 
             <h3>Disabled</h3> 
             <p-rating :value="8" :disabled="true" :stars="10" />