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

Refactor #3965 - For TriStateCheckbox

pull/3997/head
Tuğçe Küçükoğlu 2023-05-24 17:39:47 +03:00
parent d7c9a3937a
commit f46d5e3154
3 changed files with 110 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
components/lib/tristatecheckbox/BaseTriStateCheckbox.vue Normal file
View File

@ -0,0 +1,75 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = ``;
const classes = {
root: ({ instance, props }) => [
'p-checkbox p-component',
{
'p-checkbox-checked': props.modelValue === true,
'p-checkbox-disabled': props.disabled,
'p-checkbox-focused': instance.focused
}
],
hiddenInputWrapper: 'p-hidden-accessible',
srOnlyAria: 'p-sr-only',
checkbox: ({ instance, props }) => [
'p-checkbox-box',
{
'p-highlight': props.modelValue != null,
'p-disabled': props.disabled,
'p-focus': instance.focused
}
],
checkIcon: 'p-checkbox-icon',
uncheckIcon: 'p-checkbox-icon',
nullableIcon: 'p-checkbox-icon'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_tristatecheckbox_style', manual: true });
export default {
name: 'BaseTriStateCheckbox',
extends: BaseComponent,
props: {
modelValue: null,
inputId: {
type: String,
default: null
},
inputProps: {
type: null,
default: null
},
disabled: {
type: Boolean,
default: false
},
tabindex: {
type: Number,
default: 0
},
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
css: {
classes
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
}
};
</script>

26
components/lib/tristatecheckbox/TriStateCheckbox.d.ts vendored
View File

@ -138,6 +138,11 @@ export interface TriStateCheckboxProps {
* @type {TriStateCheckboxPassThroughOptions}
*/
pt?: TriStateCheckboxPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
@ -147,15 +152,30 @@ export interface TriStateCheckboxSlots {
/**
* Custom check icon template.
*/
checkicon(): VNode[];
checkicon(scope: {
/**
* Style class of the icon.
*/
class: string;
}): VNode[];
/**
* Custom uncheck icon template.
*/
uncheckicon(): VNode[];
uncheckicon(scope: {
/**
* Style class of the icon.
*/
class: string;
}): VNode[];
/**
* Custom nullable icon template.
*/
nullableicon(): VNode[];
nullableicon(scope: {
/**
* Style class of the icon.
*/
class: string;
}): VNode[];
}
/**

61
components/lib/tristatecheckbox/TriStateCheckbox.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="containerClass" @click="onClick($event)" v-bind="ptm('root')">
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
<div :class="cx('root')" @click="onClick($event)" v-bind="ptm('root')">
<div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input
ref="input"
:id="inputId"
@ -16,57 +16,30 @@
v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
/>
</div>
<span class="p-sr-only" aria-live="polite" v-bind="ptm('srOnlyAria')">{{ ariaValueLabel }}</span>
<div ref="box" :class="['p-checkbox-box', { 'p-highlight': modelValue != null, 'p-disabled': disabled, 'p-focus': focused }]" v-bind="getPTOptions('checkbox')">
<slot v-if="modelValue === true" name="checkicon">
<component :is="'CheckIcon'" class="p-checkbox-icon" v-bind="ptm('checkIcon')" />
<span :class="cx('srOnlyAria')" aria-live="polite" v-bind="ptm('srOnlyAria')">{{ ariaValueLabel }}</span>
<div ref="box" :class="cx('checkbox')" v-bind="getPTOptions('checkbox')" :data-p-highlight="modelValue != null" :data-p-disabled="disabled" :data-p-focused="focused">
<slot v-if="modelValue === true" name="checkicon" :class="cx('checkIcon')">
<component :is="'CheckIcon'" :class="cx('checkIcon')" v-bind="ptm('checkIcon')" />
</slot>
<slot v-else-if="modelValue === false" name="uncheckicon">
<component :is="'TimesIcon'" class="p-checkbox-icon" v-bind="ptm('uncheckIcon')" />
<slot v-else-if="modelValue === false" name="uncheckicon" :class="cx('uncheckIcon')">
<component :is="'TimesIcon'" :class="cx('uncheckIcon')" v-bind="ptm('uncheckIcon')" />
</slot>
<slot v-else name="nullableicon">
<span class="p-checkbox-icon" v-bind="ptm('nullableIcon')"></span>
<slot v-else name="nullableicon" :class="cx('nullableIcon')">
<span :class="cx('nullableIcon')" v-bind="ptm('nullableIcon')"></span>
</slot>
</div>
</div>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import CheckIcon from 'primevue/icons/check';
import TimesIcon from 'primevue/icons/times';
import BaseTriStateCheckbox from './BaseTriStateCheckbox.vue';
export default {
name: 'TriStateCheckbox',
extends: BaseComponent,
extends: BaseTriStateCheckbox,
emits: ['click', 'update:modelValue', 'change', 'keydown', 'focus', 'blur'],
props: {
modelValue: null,
inputId: {
type: String,
default: null
},
inputProps: {
type: null,
default: null
},
disabled: {
type: Boolean,
default: false
},
tabindex: {
type: Number,
default: 0
},
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
data() {
return {
focused: false
@ -126,16 +99,6 @@ export default {
}
},
computed: {
containerClass() {
return [
'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;
}