vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +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

57
components/tristatecheckbox/TriStateCheckbox.vue
View file

@ -1,11 +1,23 @@
<template>
<div :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<input :id="inputId" ref="input" type="checkbox" :checked="modelValue === true" :tabindex="tabindex" :disabled="disabled" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
@keydown="onKeyDown($event)" @focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps" >
<input
ref="input"
:id="inputId"
type="checkbox"
:checked="modelValue === true"
:tabindex="tabindex"
:disabled="disabled"
:aria-labelledby="ariaLabelledby"
:aria-label="ariaLabel"
@keydown="onKeyDown($event)"
@focus="onFocus($event)"
@blur="onBlur($event)"
v-bind="inputProps"
/>
</div>
<span class="p-sr-only" aria-live="polite">{{ariaValueLabel}}</span>
<div ref="box" :class="['p-checkbox-box', {'p-highlight': (modelValue != null), 'p-disabled': disabled, 'p-focus': focused}]" >
<span class="p-sr-only" aria-live="polite">{{ ariaValueLabel }}</span>
<div ref="box" :class="['p-checkbox-box', { 'p-highlight': modelValue != null, 'p-disabled': disabled, 'p-focus': focused }]">
<span :class="['p-checkbox-icon', icon]"></span>
</div>
</div>
@ -17,11 +29,17 @@ export default {
emits: ['click', 'update:modelValue', 'change', 'keydown', 'focus', 'blur'],
props: {
modelValue: null,
inputId: null,
inputProps: null,
inputId: {
type: String,
default: null
},
inputProps: {
type: null,
default: null
},
disabled: {
type: Boolean,
default: false
type: Boolean,
default: false
},
tabindex: {
type: Number,
@ -49,15 +67,15 @@ export default {
switch (this.modelValue) {
case true:
newValue = false;
break;
break;
case false:
newValue = null;
break;
break;
case null:
newValue = true;
break;
break;
}
this.$emit('update:modelValue', newValue);
@ -88,33 +106,36 @@ export default {
computed: {
icon() {
let icon;
switch (this.modelValue) {
case true:
icon = 'pi pi-check';
break;
break;
case false:
icon = 'pi pi-times';
break;
break;
case null:
icon = null;
break;
break;
}
return icon;
},
containerClass() {
return [
'p-checkbox p-component', {
'p-checkbox p-component',
{
'p-checkbox-checked': this.modelValue === true,
'p-checkbox-disabled': this.disabled,
'p-checkbox-focused': this.focused
}];
}
];
},
ariaValueLabel() {
return this.modelValue ? this.$primevue.config.locale.aria.trueLabel : (this.modelValue === false ? this.$primevue.config.locale.aria.falseLabel : this.$primevue.config.locale.aria.nullLabel);
return this.modelValue ? this.$primevue.config.locale.aria.trueLabel : this.modelValue === false ? this.$primevue.config.locale.aria.falseLabel : this.$primevue.config.locale.aria.nullLabel;
}
}
}
};
</script>