vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-10 01:12:37 +00:00
Code Issues Projects Releases Packages Wiki Activity

Components added. Build issues fixed

Browse source
This commit is contained in:
Bahadir Sofuoglu 2022-09-14 14:26:01 +03:00
parent 5b66ed1093
commit 18c3721848
344 changed files with 12446 additions and 8758 deletions
Download patch file Download diff file Expand all files Collapse all files

68
components/checkbox/Checkbox.vue
View file

@ -1,17 +1,34 @@
<template>
<div :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<input :id="inputId" ref="input" type="checkbox" :value="value" :class="inputClass" :style="inputStyle" :name="name" :checked="checked" :tabindex="tabindex" :disabled="disabled" :readonly="readonly" :required="required" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
@focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
<input
ref="input"
:id="inputId"
type="checkbox"
:value="value"
:class="inputClass"
:style="inputStyle"
:name="name"
:checked="checked"
:tabindex="tabindex"
:disabled="disabled"
:readonly="readonly"
:required="required"
:aria-labelledby="ariaLabelledby"
:aria-label="ariaLabel"
@focus="onFocus($event)"
@blur="onBlur($event)"
v-bind="inputProps"
/>
</div>
<div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
<span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>
<div ref="box" :class="['p-checkbox-box', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]">
<span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
</div>
</div>
</template>
<script>
import {ObjectUtils} from 'primevue/utils';
import { ObjectUtils } from 'primevue/utils';
export default {
name: 'Checkbox',
@ -48,13 +65,25 @@ export default {
type: Number,
default: null
},
inputId: null,
inputClass: null,
inputStyle: null,
inputProps: null,
inputId: {
type: String,
default: null
},
inputClass: {
type: String,
default: null
},
inputStyle: {
type: null,
default: null
},
inputProps: {
type: null,
default: null
},
'aria-labelledby': {
type: String,
default: null
default: null
},
'aria-label': {
type: String,
@ -64,7 +93,7 @@ export default {
data() {
return {
focused: false
}
};
},
methods: {
onClick(event) {
@ -73,12 +102,9 @@ export default {
if (this.binary) {
newModelValue = this.checked ? this.falseValue : this.trueValue;
}
else {
if (this.checked)
newModelValue = this.modelValue.filter(val => !ObjectUtils.equals(val, this.value));
else
newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
} else {
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);
@ -103,12 +129,14 @@ export default {
},
containerClass() {
return [
'p-checkbox p-component', {
'p-checkbox p-component',
{
'p-checkbox-checked': this.checked,
'p-checkbox-disabled': this.disabled,
'p-checkbox-focused': this.focused
}];
}
];
}
}
}
};
</script>