vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Implemented Checkbox Component

pull/5/head
cagataycivici 2018-12-14 18:35:42 +03:00
parent 71820144a8
commit b27739126c
8 changed files with 194 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/AppMenu.vue
View File

@ -8,6 +8,7 @@
</a>
<div :class="{'submenuhide': activeMenuIndex !== 0, 'submenushow': activeMenuIndex === 0}">
<div>
<router-link to="/checkbox">&#9679; Checkbox</router-link>
<router-link to="/inputtext">&#9679; InputText</router-link>
<router-link to="/listbox">&#9679; Listbox</router-link>
<router-link to="/radiobutton">&#9679; RadioButton</router-link>

6
src/assets/styles/primevue.css
View File

@ -1,10 +1,12 @@
@import '../../components/common/Common.css';
@import '../../components/accordion/Accordion.css';
@import '../../components/button/Button.css';
@import '../../components/checkbox/Checkbox.css';
@import '../../components/fieldset/Fieldset.css';
@import '../../components/inputtext/InputText.css';
@import '../../components/listbox/Listbox.css';
@import '../../components/button/Button.css';
@import '../../components/panel/Panel.css';
@import '../../components/fieldset/Fieldset.css';
@import '../../components/radiobutton/RadioButton.css';
@import '../../components/tabview/TabView.css';
@import '../../components/textarea/Textarea.css';
@import '../../components/toolbar/Toolbar.css';

31
src/components/checkbox/Checkbox.css Normal file
View File

@ -0,0 +1,31 @@
.p-checkbox {
display: inline-block;
cursor: pointer;
vertical-align: middle;
margin-right: .25em;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.p-checkbox .p-checkbox-box {
width: 1.125em;
height: 1.125em;
line-height: 1.125em;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
text-align: center;
}
.p-checkbox .p-checkbox-icon {
display: block;
}
.p-checkbox-label {
vertical-align: middle;
}
.p-checkbox + label {
vertical-align: middle;
}

66
src/components/checkbox/Checkbox.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<div class="p-checkbox p-component" @click="onClick($event)">
<div class="p-hidden-accessible">
<input ref="input" :id="inputId" type="checkbox" :name="name" :checked="checked" :disabled="disabled" @focus="onFocus()" @blur="onBlur()"
:autocomplete="autocomplete" :autofocus="autofocus">
</div>
<div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
<span :class="['p-checkbox-icon p-c', {'pi pi-check': checked}]"></span>
</div>
</div>
</template>
<script>
import ObjectUtils from '../utils/ObjectUtils';
export default {
props: {
value: null,
modelValue: null,
name: String,
inputId: String,
autofocus: Boolean,
autocomplete: String,
disabled: Boolean
},
model: {
prop: 'modelValue',
event: 'input'
},
data() {
return {
focused: false
};
},
methods: {
onClick(event) {
if (!this.disabled) {
let newModelValue;
if (this.checked)
newModelValue = this.modelValue.filter(val => !ObjectUtils.equals(val, this.value));
else
newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
this.$emit('click', event);
this.$emit('input', newModelValue);
this.$emit('change', event);
this.$refs.input.focus();
}
},
onFocus(event) {
this.focused = true;
this.$emit('focus', event);
},
onBlur() {
this.focused = false;
this.$emit('blur', event);
}
},
computed: {
checked() {
return this.modelValue != null && ObjectUtils.contains(this.value, this.modelValue);
}
}
}
</script>

11
src/components/utils/ObjectUtils.js
View File

@ -120,6 +120,17 @@ export default class ObjectUtils {
return index;
}
static contains(value, list) {
if (value != null && list && list.length) {
for (let val of list) {
if (this.equals(value, val))
return true;
}
}
return false;
}
static filterConstraints = {
startsWith(value, filter) {

2
src/main.js
View File

@ -4,6 +4,7 @@ import router from './router';
import Accordion from './components/accordion/Accordion';
import AccordionTab from './components/accordion/AccordionTab';
import Button from './components/button/Button';
import Checkbox from './components/checkbox/Checkbox';
import InputText from './components/inputtext/InputText';
import Fieldset from './components/fieldset/Fieldset';
import Listbox from './components/listbox/Listbox';
@ -23,6 +24,7 @@ Vue.config.productionTip = false;
Vue.component('p-accordion', Accordion);
Vue.component('p-accordionTab', AccordionTab);
Vue.component('p-button', Button);
Vue.component('p-checkbox', Checkbox);
Vue.component('p-inputtext', InputText);
Vue.component('p-listbox', Listbox);
Vue.component('p-fieldset', Fieldset);

5
src/router.js
View File

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

74
src/views/checkbox/CheckboxDemo.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Checkbox</h1>
<p>Checkbox is an extension to standard checkbox element with theming.</p>
</div>
</div>
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<div class="p-grid">
<div class="p-col-12">
<p-checkbox inputId="city1" name="city" value="Chicago" v-model="cities" />
<label for="city1" class="p-checkbox-label">Chicago</label>
</div>
<div class="p-col-12">
<p-checkbox inputId="city2" name="city" value="Los Angeles" v-model="cities" />
<label for="city2" class="p-checkbox-label">Los Angeles</label>
</div>
<div class="p-col-12">
<p-checkbox inputId="city3" name="city" value="New York" v-model="cities" />
<label for="city3" class="p-checkbox-label">New York</label>
</div>
<div class="p-col-12">
<p-checkbox inputId="city4" name="city" value="San Francisco" v-model="cities" />
<label for="city4" class="p-checkbox-label">San Francisco</label>
</div>
</div>
Selected Cities : {{cities}}
<h3>Advanced with Preselection, Value Binding and Disabled Option</h3>
<div class="p-grid">
<div class="p-col-12">
<p-checkbox inputId="theme1" name="template" :value="{brand: 'Ultima', key: 'U'}" v-model="themes" />
<label for="theme1" class="p-checkbox-label">Ultima</label>
</div>
<div class="p-col-12">
<p-checkbox inputId="theme2" name="template" :value="{brand: 'Serenity', key: 'S'}" v-model="themes" />
<label for="theme2" class="p-checkbox-label">Serenity</label>
</div>
<div class="p-col-12">
<p-checkbox inputId="theme3" name="template" :value="{brand: 'Apollo', key: 'A'}" v-model="themes" />
<label for="theme3" class="p-checkbox-label">Apollo</label>
</div>
<div class="p-col-12">
<p-checkbox inputId="theme4" name="template" :value="{brand: 'Babylon', key: 'B'}" v-model="themes" :disabled="true"/>
<label for="theme4" class="p-checkbox-label">Babylon</label>
</div>
</div>
Selected Themes : {{this.themes}}
</div>
</div>
</template>
<script>
export default {
data() {
return {
cities: [],
themes: [{brand: 'Serenity', key: 'S'}, {brand: 'Apollo', key: 'A'}]
}
},
methods: {
onChange() {
console.log('change');
}
}
}
</script>
<style>
</style>