Implemented Chips Component

pull/5/head
cagataycivici 2018-12-25 00:14:06 +03:00
parent 42c3b9d0a5
commit 84bc9b7759
8 changed files with 204 additions and 1 deletions

View File

@ -9,6 +9,7 @@
<div :class="{'submenuhide': activeMenuIndex !== 0, 'submenushow': activeMenuIndex === 0}"> <div :class="{'submenuhide': activeMenuIndex !== 0, 'submenushow': activeMenuIndex === 0}">
<div> <div>
<router-link to="/checkbox">&#9679; Checkbox</router-link> <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="/inputswitch">&#9679; InputSwitch</router-link>
<router-link to="/inputtext">&#9679; InputText</router-link> <router-link to="/inputtext">&#9679; InputText</router-link>
<router-link to="/listbox">&#9679; Listbox</router-link> <router-link to="/listbox">&#9679; Listbox</router-link>

View File

@ -3,6 +3,7 @@
@import '../../components/button/Button.css'; @import '../../components/button/Button.css';
@import '../../components/card/Card.css'; @import '../../components/card/Card.css';
@import '../../components/checkbox/Checkbox.css'; @import '../../components/checkbox/Checkbox.css';
@import '../../components/chips/Chips.css';
@import '../../components/fieldset/Fieldset.css'; @import '../../components/fieldset/Fieldset.css';
@import '../../components/inputtext/InputText.css'; @import '../../components/inputtext/InputText.css';
@import '../../components/inputswitch/InputSwitch.css'; @import '../../components/inputswitch/InputSwitch.css';

View File

@ -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;
}

View File

@ -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>

View File

@ -6,6 +6,7 @@ import AccordionTab from './components/accordion/AccordionTab';
import Button from './components/button/Button'; import Button from './components/button/Button';
import Card from './components/card/Card'; import Card from './components/card/Card';
import Checkbox from './components/checkbox/Checkbox'; import Checkbox from './components/checkbox/Checkbox';
import Chips from './components/chips/Chips';
import InputSwitch from './components/inputswitch/InputSwitch'; import InputSwitch from './components/inputswitch/InputSwitch';
import InputText from './components/inputtext/InputText'; import InputText from './components/inputtext/InputText';
import Fieldset from './components/fieldset/Fieldset'; import Fieldset from './components/fieldset/Fieldset';
@ -32,6 +33,7 @@ Vue.component('p-accordionTab', AccordionTab);
Vue.component('p-button', Button); Vue.component('p-button', Button);
Vue.component('p-card', Card); Vue.component('p-card', Card);
Vue.component('p-checkbox', Checkbox); Vue.component('p-checkbox', Checkbox);
Vue.component('p-chips', Chips);
Vue.component('p-inputSwitch', InputSwitch); Vue.component('p-inputSwitch', InputSwitch);
Vue.component('p-inputtext', InputText); Vue.component('p-inputtext', InputText);
Vue.component('p-listbox', Listbox); Vue.component('p-listbox', Listbox);

View File

@ -31,6 +31,11 @@ export default new Router({
name: 'checkbox', name: 'checkbox',
component: () => import('./views/checkbox/CheckboxDemo.vue') component: () => import('./views/checkbox/CheckboxDemo.vue')
}, },
{
path: '/chips',
name: 'chips',
component: () => import('./views/chips/ChipsDemo.vue')
},
{ {
path: '/fieldset', path: '/fieldset',
name: 'fieldset', name: 'fieldset',

View File

@ -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>

View File

@ -15,7 +15,7 @@
<p-rating v-model="val2" :cancel="false" /> <p-rating v-model="val2" :cancel="false" />
<h3>ReadOnly</h3> <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> <h3>Disabled</h3>
<p-rating :value="8" :disabled="true" :stars="10" /> <p-rating :value="8" :disabled="true" :stars="10" />