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

Fixed #5476 - For TriStateCheckbox

pull/5507/head
tugcekucukoglu 2024-03-27 14:12:51 +03:00
parent 9b20f4baca
commit 5ebefdf258
30 changed files with 9 additions and 1259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
api-generator/components/tristatecheckbox.js
View File

@ -1,92 +0,0 @@
const TriStateCheckboxProps = [
{
name: 'modelValue',
type: 'boolean',
default: 'null',
description: 'Value of the component.'
},
{
name: 'disabled',
type: 'boolean',
default: 'false',
description: 'When present, it specifies that the component should be disabled.'
},
{
name: 'invalid',
type: 'boolean',
default: 'false',
description: 'When present, it specifies that the component should have invalid state style.'
},
{
name: 'variant',
type: 'string',
default: 'null',
description: 'Specifies the input variant of the component.'
},
{
name: 'tabindex',
type: 'string',
default: 'null',
description: 'Index of the element in tabbing order.'
},
{
name: 'inputId',
type: 'string',
default: 'null',
description: 'Identifier of the underlying input element.'
},
{
name: 'inputProps',
type: 'object',
default: 'null',
description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
},
{
name: 'aria-labelledby',
type: 'string',
default: 'null',
description: 'Establishes relationships between the component and label(s) where its value should be one or more element IDs.'
},
{
name: 'aria-label',
type: 'string',
default: 'null',
description: 'Used to define a string that labels the element.'
},
{
name: 'pt',
type: 'any',
default: 'null',
description: 'Used to pass attributes to DOM elements inside the component.'
},
{
name: 'unstyled',
type: 'boolean',
default: 'false',
description: 'When enabled, it removes component related styles in the core.'
}
];
const TriStateCheckboxSlots = [
{
name: 'checkicon',
description: 'Custom check icon template.'
},
{
name: 'uncheckicon',
description: 'Custom uncheck icon template.'
},
{
name: 'nullableicon',
description: 'Custom nullable icon template.'
}
];
module.exports = {
tristatecheckbox: {
name: 'TriStateCheckbox',
description: 'TriStateCheckbox is used to select either "true", "false" or "null" as the value.',
props: TriStateCheckboxProps,
slots: TriStateCheckboxSlots
}
};

4
assets/menu/menu.json
View File

@ -171,10 +171,6 @@
{ {
"name": "TreeSelect", "name": "TreeSelect",
"to": "/treeselect" "to": "/treeselect"
},
{
"name": "TriStateCheckbox",
"to": "/tristatecheckbox"
} }
] ]
}, },

2
components/doc/codeeditor/templates.js
View File

@ -249,7 +249,6 @@ import Tooltip from 'primevue/tooltip';
import Tree from 'primevue/tree'; import Tree from 'primevue/tree';
import TreeSelect from 'primevue/treeselect'; import TreeSelect from 'primevue/treeselect';
import TreeTable from 'primevue/treetable'; import TreeTable from 'primevue/treetable';
import TriStateCheckbox from 'primevue/tristatecheckbox';
import VirtualScroller from 'primevue/virtualscroller'; import VirtualScroller from 'primevue/virtualscroller';
${imports} ${imports}
@ -363,7 +362,6 @@ app.component('ToggleButton', ToggleButton);
app.component('Tree', Tree); app.component('Tree', Tree);
app.component('TreeSelect', TreeSelect); app.component('TreeSelect', TreeSelect);
app.component('TreeTable', TreeTable); app.component('TreeTable', TreeTable);
app.component('TriStateCheckbox', TriStateCheckbox);
app.component('VirtualScroller', VirtualScroller); app.component('VirtualScroller', VirtualScroller);
${element} ${element}

2
components/lib/config/PrimeVue.d.ts vendored
View File

@ -92,7 +92,6 @@ import { TooltipDirectivePassThroughOptions } from '../tooltip';
import { TreePassThroughOptions } from '../tree'; import { TreePassThroughOptions } from '../tree';
import { TreeSelectPassThroughOptions } from '../treeselect'; import { TreeSelectPassThroughOptions } from '../treeselect';
import { TreeTablePassThroughOptions } from '../treetable'; import { TreeTablePassThroughOptions } from '../treetable';
import { TriStateCheckboxPassThroughOptions } from '../tristatecheckbox';
import { DefaultPassThrough, PassThrough } from '../ts-helpers'; import { DefaultPassThrough, PassThrough } from '../ts-helpers';
import { VirtualScrollerPassThroughOptions } from '../virtualscroller'; import { VirtualScrollerPassThroughOptions } from '../virtualscroller';
@ -208,7 +207,6 @@ export interface PrimeVuePTOptions {
toolbar?: DefaultPassThrough<ToolbarPassThroughOptions>; toolbar?: DefaultPassThrough<ToolbarPassThroughOptions>;
tree?: DefaultPassThrough<TreePassThroughOptions>; tree?: DefaultPassThrough<TreePassThroughOptions>;
treeselect?: DefaultPassThrough<TreeSelectPassThroughOptions>; treeselect?: DefaultPassThrough<TreeSelectPassThroughOptions>;
tristatecheckbox?: DefaultPassThrough<TriStateCheckboxPassThroughOptions>;
treetable?: DefaultPassThrough<TreeTablePassThroughOptions>; treetable?: DefaultPassThrough<TreeTablePassThroughOptions>;
virtualscroller?: DefaultPassThrough<VirtualScrollerPassThroughOptions>; virtualscroller?: DefaultPassThrough<VirtualScrollerPassThroughOptions>;
directives?: { directives?: {

58
components/lib/tristatecheckbox/BaseTriStateCheckbox.vue
View File

@ -1,58 +0,0 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import TriStateCheckboxStyle from 'primevue/tristatecheckbox/style';
export default {
name: 'BaseTriStateCheckbox',
extends: BaseComponent,
props: {
modelValue: null,
variant: {
type: String,
default: null
},
invalid: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
tabindex: {
type: Number,
default: null
},
inputId: {
type: String,
default: null
},
inputClass: {
type: [String, Object],
default: null
},
inputStyle: {
type: Object,
default: null
},
ariaLabelledby: {
type: String,
default: null
},
ariaLabel: {
type: String,
default: null
}
},
style: TriStateCheckboxStyle,
provide() {
return {
$parentInstance: this
};
}
};
</script>

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

@ -1,273 +0,0 @@
/**
*
* TriStateCheckbox is used to select either 'true', 'false' or 'null' as the value.
*
* [Live Demo](https://www.primevue.org/tristatecheckbox/)
*
* @module tristatecheckbox
*
*/
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, Nullable, PassThrough } from '../ts-helpers';
export declare type TriStateCheckboxPassThroughOptionType = TriStateCheckboxPassThroughAttributes | ((options: TriStateCheckboxPassThroughMethodOptions) => TriStateCheckboxPassThroughAttributes | string) | string | null | undefined;
/**
* Custom passthrough(pt) option method.
*/
export interface TriStateCheckboxPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: TriStateCheckboxProps;
/**
* Defines current inline state.
*/
state: TriStateCheckboxState;
/**
* Defines current options.
*/
context: TriStateCheckboxContext;
/**
* Defines valid attributes.
*/
attrs: any;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom passthrough(pt) options.
* @see {@link TriStateCheckboxProps.pt}
*/
export interface TriStateCheckboxPassThroughOptions {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: TriStateCheckboxPassThroughOptionType;
/**
* Used to pass attributes to the input's DOM element.
*/
input?: TriStateCheckboxPassThroughOptionType;
/**
* Used to pass attributes to the box's DOM element.
*/
box?: TriStateCheckboxPassThroughOptionType;
/**
* Used to pass attributes to the check icon's DOM element.
*/
checkIcon?: TriStateCheckboxPassThroughOptionType;
/**
* Used to pass attributes to the uncheck icon's DOM element.
*/
uncheckIcon?: TriStateCheckboxPassThroughOptionType;
/**
* Used to pass attributes to the nullable icon's DOM element.
*/
nullableIcon?: TriStateCheckboxPassThroughOptionType;
/**
* Used to pass attributes to the hidden value label's DOM element.
*/
hiddenValueLabel?: TriStateCheckboxPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface TriStateCheckboxPassThroughAttributes {
[key: string]: any;
}
/**
* Defines current inline state in TriStateCheckbox component.
*/
export interface TriStateCheckboxState {
[key: string]: any;
}
/**
* Defines current options in TriStateCheckbox component.
*/
export interface TriStateCheckboxContext {
/**
* Current active state as a boolean.
* @defaultValue false
*/
active: boolean;
/**
* Current disabled state as a boolean.
* @defaultValue false
*/
disabled: boolean;
}
/**
* Defines valid properties in TriStateCheckbox component.
*/
export interface TriStateCheckboxProps {
/**
* Value of the component.
* @defaultValue null
*/
modelValue?: Nullable<boolean>;
/**
* When present, it specifies that the component should have invalid state style.
* @defaultValue false
*/
invalid?: boolean | undefined;
/**
* When present, it specifies that the component should be disabled.
* @defaultValue false
*/
disabled?: boolean | undefined;
/**
* Specifies the input variant of the component.
* @defaultValue outlined
*/
variant?: 'outlined' | 'filled' | undefined;
/**
* When present, it specifies that an input field is read-only.
* @default false
*/
readonly?: boolean | undefined;
/**
* Index of the element in tabbing order.
*/
tabindex?: string | undefined;
/**
* Identifier of the underlying input element.
*/
inputId?: string | undefined;
/**
* Style class of the input field.
*/
inputClass?: object | undefined;
/**
* Inline style of the input field.
*/
inputStyle?: string | object | undefined;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
ariaLabelledby?: string | undefined;
/**
* Establishes a string value that labels the component.
*/
ariaLabel?: string | undefined;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {TriStateCheckboxPassThroughOptions}
*/
pt?: PassThrough<TriStateCheckboxPassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* Defines valid slots in TriStateCheckbox component.
*/
export interface TriStateCheckboxSlots {
/**
* Custom check icon template.
* @param {Object} scope - checkicon slot's params.
*/
checkicon(scope: {
/**
* Style class of the icon.
*/
class: string;
}): VNode[];
/**
* Custom uncheck icon template.
* @param {Object} scope - uncheckicon slot's params.
*/
uncheckicon(scope: {
/**
* Style class of the icon.
*/
class: string;
}): VNode[];
/**
* Custom nullable icon template.
* @param {Object} scope - nullableicon slot's params.
*/
nullableicon(scope: {
/**
* Style class of the icon.
*/
class: string;
}): VNode[];
}
/**
* Defines valid emits in TriStateCheckbox component.
*/
export interface TriStateCheckboxEmits {
/**
* Emitted when the value changes.
* @param {boolean|null|undefined} value - New value.
*/
'update:modelValue'(value: Nullable<boolean>): void;
/**
* Callback to invoke on value change.
* @param {Event} event - Browser event.
*/
change(event: Event): void;
/**
* Callback to invoke when the component receives focus.
* @param {Event} event - Browser event.
*/
focus(event: Event): void;
/**
* Callback to invoke when the component loses focus.
* @param {Event} event - Browser event.
*/
blur(event: Event): void;
}
/**
* **PrimeVue - TriStateCheckbox**
*
* _TriStateCheckbox is used to select either 'true', 'false' or 'null' as the value._
*
* [Live Demo](https://www.primevue.org/tristatecheckbox/)
* --- ---
* ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
*
* @group Component
*
*/
declare class TriStateCheckbox extends ClassComponent<TriStateCheckboxProps, TriStateCheckboxSlots, TriStateCheckboxEmits> {}
declare module 'vue' {
export interface GlobalComponents {
TriStateCheckbox: GlobalComponentConstructor<TriStateCheckbox>;
}
}
export default TriStateCheckbox;

54
components/lib/tristatecheckbox/TriStateCheckbox.spec.js
View File

@ -1,54 +0,0 @@
import { mount } from '@vue/test-utils';
import TriStateCheckbox from './TriStateCheckbox.vue';
let wrapper;
const modelValues = [true, false, null];
const emittedResults = [false, null, true];
describe('TriStateCheckbox.vue', () => {
beforeEach(() => {
wrapper = mount(TriStateCheckbox);
});
it('When onBlur is triggered focused property should be false', async () => {
wrapper.vm.onBlur();
expect(wrapper.vm.focused).toBeFalsy();
expect(wrapper.emitted().blur).toBeTruthy();
});
});
describe('UpdateModel method tests', () => {
beforeEach(() => {
wrapper = mount(TriStateCheckbox);
});
it('When disable props true change emit should not triggered', async () => {
await wrapper.setProps({
disabled: true,
modelValue: null
});
await wrapper.trigger('change');
expect(wrapper.emitted()['change']).toBeFalsy();
});
it('When disable props false updateModal should triggered emit', () => {
wrapper.vm.updateModel();
expect(wrapper.emitted()['update:modelValue']).toBeTruthy();
});
modelValues.forEach((modelValue, index) => {
it('When modelValue changed update model emitted value should be change', async () => {
await wrapper.setProps({
modelValue
});
wrapper.vm.updateModel();
expect(wrapper.emitted()['update:modelValue']).toEqual([[emittedResults[index]]]);
});
});
});

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

@ -1,103 +0,0 @@
<template>
<div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
<input
:id="inputId"
type="checkbox"
:class="[cx('input'), inputClass]"
:style="inputStyle"
:value="modelValue"
:checked="checked"
:tabindex="tabindex"
:disabled="disabled"
:readonly="readonly"
:aria-labelledby="ariaLabelledby"
:aria-label="ariaLabel"
:aria-invalid="invalid || undefined"
@focus="onFocus"
@blur="onBlur"
@change="onChange"
v-bind="getPTOptions('input')"
/>
<span role="status" class="p-hidden-accessible" aria-live="polite" v-bind="getPTOptions('hiddenValueLabel')" :data-p-hidden-accessible="true">{{ ariaValueLabel }}</span>
<div :class="cx('box')" v-bind="getPTOptions('box')">
<slot v-if="modelValue === true" name="checkicon" :class="cx('checkIcon')">
<CheckIcon :class="cx('checkIcon')" v-bind="getPTOptions('checkIcon')" />
</slot>
<slot v-else-if="modelValue === false" name="uncheckicon" :class="cx('uncheckIcon')">
<TimesIcon :class="cx('uncheckIcon')" v-bind="getPTOptions('uncheckIcon')" />
</slot>
<slot v-else name="nullableicon" :class="cx('nullableIcon')" />
</div>
</div>
</template>
<script>
import CheckIcon from 'primevue/icons/check';
import TimesIcon from 'primevue/icons/times';
import BaseTriStateCheckbox from './BaseTriStateCheckbox.vue';
export default {
name: 'TriStateCheckbox',
extends: BaseTriStateCheckbox,
inheritAttrs: false,
emits: ['update:modelValue', 'change', 'focus', 'blur'],
methods: {
getPTOptions(key) {
const _ptm = key === 'root' ? this.ptmi : this.ptm;
return _ptm(key, {
context: {
active: this.active,
disabled: this.disabled
}
});
},
updateModel() {
let newValue;
switch (this.modelValue) {
case true:
newValue = false;
break;
case false:
newValue = null;
break;
default:
newValue = true;
break;
}
this.$emit('update:modelValue', newValue);
},
onChange(event) {
if (!this.disabled && !this.readonly) {
this.updateModel();
this.$emit('change', event);
}
},
onFocus(event) {
this.$emit('focus', event);
},
onBlur(event) {
this.$emit('blur', event);
}
},
computed: {
active() {
return this.modelValue != null;
},
checked() {
return this.modelValue === true;
},
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;
}
},
components: {
CheckIcon,
TimesIcon
}
};
</script>

9
components/lib/tristatecheckbox/package.json
View File

@ -1,9 +0,0 @@
{
"main": "./tristatecheckbox.cjs.js",
"module": "./tristatecheckbox.esm.js",
"unpkg": "./tristatecheckbox.min.js",
"types": "./TriStateCheckbox.d.ts",
"browser": {
"./sfc": "./TriStateCheckbox.vue"
}
}

3
components/lib/tristatecheckbox/style/TriStateCheckboxStyle.d.ts vendored
View File

@ -1,3 +0,0 @@
import { BaseStyle } from '../../base/style';
export interface TriStateCheckboxStyle extends BaseStyle {}

23
components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js
View File

@ -1,23 +0,0 @@
import BaseStyle from 'primevue/base/style';
const classes = {
root: ({ instance, props }) => [
'p-tristatecheckbox p-checkbox p-component',
{
'p-highlight': instance.active,
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'p-variant-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled'
}
],
box: 'p-checkbox-box',
input: 'p-checkbox-input',
checkIcon: 'p-checkbox-icon',
uncheckIcon: 'p-checkbox-icon',
nullableIcon: 'p-checkbox-icon'
};
export default BaseStyle.extend({
name: 'tristatecheckbox',
classes
});

6
components/lib/tristatecheckbox/style/package.json
View File

@ -1,6 +0,0 @@
{
"main": "./tristatecheckboxstyle.cjs.js",
"module": "./tristatecheckboxstyle.esm.js",
"unpkg": "./tristatecheckboxstyle.min.js",
"types": "./TriStateCheckboxStyle.d.ts"
}

8
doc/datatable/filter/AdvancedFilterDoc.vue
View File

@ -110,7 +110,7 @@
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<label for="verified-filter" class="font-bold"> Verified </label> <label for="verified-filter" class="font-bold"> Verified </label>
<TriStateCheckbox v-model="filterModel.value" inputId="verified-filter" /> <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary inputId="verified-filter" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -251,7 +251,7 @@ export default {
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<label for="verified-filter" class="font-bold"> Verified </label> <label for="verified-filter" class="font-bold"> Verified </label>
<TriStateCheckbox v-model="filterModel.value" inputId="verified-filter" /> <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary inputId="verified-filter" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -366,7 +366,7 @@ export default {
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<label for="verified-filter" class="font-bold"> Verified </label> <label for="verified-filter" class="font-bold"> Verified </label>
<TriStateCheckbox v-model="filterModel.value" inputId="verified-filter" /> <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary inputId="verified-filter" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -573,7 +573,7 @@ export default {
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
<label for="verified-filter" class="font-bold"> Verified </label> <label for="verified-filter" class="font-bold"> Verified </label>
<TriStateCheckbox v-model="filterModel.value" inputId="verified-filter" /> <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary inputId="verified-filter" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>

8
doc/datatable/filter/BasicFilterDoc.vue
View File

@ -75,7 +75,7 @@
<i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i> <i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i>
</template> </template>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
<TriStateCheckbox v-model="filterModel.value" @change="filterCallback()" /> <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -184,7 +184,7 @@ export default {
<i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i> <i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i>
</template> </template>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
<TriStateCheckbox v-model="filterModel.value" @change="filterCallback()" /> <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -260,7 +260,7 @@ export default {
<i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i> <i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i>
</template> </template>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
<TriStateCheckbox v-model="filterModel.value" @change="filterCallback()" /> <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -416,7 +416,7 @@ export default {
<i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i> <i class="pi" :class="{ 'pi-check-circle text-green-500': data.verified, 'pi-times-circle text-red-400': !data.verified }"></i>
</template> </template>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
<TriStateCheckbox v-model="filterModel.value" @change="filterCallback()" /> <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
</template> </template>
</Column> </Column>
</DataTable> </DataTable>

54
doc/tristatecheckbox/AccessibilityDoc.vue
View File

@ -1,54 +0,0 @@
<template>
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3>
<p>
TriStateCheckbox component uses an element with <i>checkbox</i> role. Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Component adds an element with <i>aria-live</i> attribute
that is only visible to screen readers to read the value displayed. Values to read are defined with the <i>trueLabel</i>, <i>falseLabel</i> and <i>nullLabel</i> keys of the <i>aria</i> property from the
<NuxtLink to="/configuration/#locale">locale</NuxtLink> API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.
</p>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />
<h3>Keyboard Support</h3>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>tab</i></td>
<td>Moves focus to the checkbox.</td>
</tr>
<tr>
<td><i>space</i></td>
<td>Toggles between the values.</td>
</tr>
<tr>
<td><i>enter</i></td>
<td>Toggles between the values.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<span id="chkbox1">Remember Me</span>
<TriStateCheckbox aria-labelledby="chkbox1" />
<TriStateCheckbox aria-label="Remember Me" />
`
}
};
}
};
</script>

57
doc/tristatecheckbox/BasicDoc.vue
View File

@ -1,57 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A model can be bound using the standard v-model directive.</p>
</DocSectionText>
<div class="card flex flex-column align-items-center gap-3">
<TriStateCheckbox v-model="value" />
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `
<TriStateCheckbox v-model="value" />
`,
options: `
<template>
<div class="card flex flex-column align-items-center gap-3">
<TriStateCheckbox v-model="value" />
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
</div>
</template>
<script>
export default {
data() {
return {
value: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-column align-items-center gap-3">
<TriStateCheckbox v-model="value" />
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>
`
}
};
}
};
</script>

54
doc/tristatecheckbox/DisabledDoc.vue
View File

@ -1,54 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText>
<div class="card flex flex-column align-items-center">
<TriStateCheckbox v-model="value" disabled />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `
<TriStateCheckbox v-model="value" />
`,
options: `
<template>
<div class="card flex flex-column align-items-center">
<TriStateCheckbox v-model="value" disabled />
</div>
</template>
<script>
export default {
data() {
return {
value: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-column align-items-center">
<TriStateCheckbox v-model="value" disabled />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>
`
}
};
}
};
</script>

54
doc/tristatecheckbox/FilledDoc.vue
View File

@ -1,54 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A model can be bound using the standard v-model directive.</p>
</DocSectionText>
<div class="card flex flex-column align-items-center">
<TriStateCheckbox v-model="value" variant="filled" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `
<TriStateCheckbox v-model="value" />
`,
options: `
<template>
<div class="card flex align-items-center">
<TriStateCheckbox v-model="value" variant="filled" />
</div>
</template>
<script>
export default {
data() {
return {
value: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex align-items-center">
<TriStateCheckbox v-model="value" variant="filled" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>
`
}
};
}
};
</script>

18
doc/tristatecheckbox/ImportDoc.vue
View File

@ -1,18 +0,0 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import TriStateCheckbox from 'primevue/tristatecheckbox';
`
}
};
}
};
</script>

57
doc/tristatecheckbox/InvalidDoc.vue
View File

@ -1,57 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
</DocSectionText>
<div class="card flex flex-column align-items-center gap-3">
<TriStateCheckbox v-model="value" invalid />
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
value: null,
code: {
basic: `
<TriStateCheckbox v-model="value" invalid />
`,
options: `
<template>
<div class="card flex flex-column align-items-center gap-3">
<TriStateCheckbox v-model="value" invalid />
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
</div>
</template>
<script>
export default {
data() {
return {
value: null
}
}
}
<\/script>
`,
composition: `
<template>
<div class="card flex flex-column align-items-center gap-3">
<TriStateCheckbox v-model="value" invalid />
<label for="checkbox">{{ value == null ? 'null' : value }}</label>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
<\/script>
`
}
};
}
};
</script>

139
doc/tristatecheckbox/form/VeeValidateDoc.vue
View File

@ -1,139 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p><a href="https://vee-validate.logaretm.com/v4/">VeeValidate</a> is a popular library for handling forms in Vue.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<div>* I've read and accept the terms & conditions.</div>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
<DocSectionCode :code="code" :dependencies="{ 'vee-validate': '4.8.2' }" />
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (typeof value === 'undefined' || value === null) {
return 'Value is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
},
data() {
return {
code: {
basic: `
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<div>* I've read and accept the terms & conditions.</div>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
</div>
`,
options: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<div>* I've read and accept the terms & conditions.</div>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (typeof value === 'undefined' || value === null) {
return 'Value is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm();
}
});
return { value, handleSubmit, onSubmit, errorMessage };
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
<TriStateCheckbox v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="text-error" />
<div>* I've read and accept the terms & conditions.</div>
<small id="text-error" class="p-error">{{ errorMessage || '&nbsp;' }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
<script setup>
import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate';
const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField);
const toast = useToast();
function validateField(value) {
if (typeof value === 'undefined' || value === null) {
return 'Value is required.';
}
return true;
}
const onSubmit = handleSubmit((values) => {
if (values.value) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm();
}
});
<\/script>
`
}
};
}
};
</script>

8
doc/tristatecheckbox/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/tristatecheckbox.jpg" />
</div>
</template>

35
doc/tristatecheckbox/pt/index.vue
View File

@ -1,35 +0,0 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>TriStateCheckbox Pass Through</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
import PTImage from './PTImage.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
},
{
id: 'pt.doc.steps',
label: 'TriStateCheckbox PT Options',
component: DocApiTable,
data: getPTOption('TriStateCheckbox')
}
]
};
}
};
</script>

33
doc/tristatecheckbox/theming/StyledDoc.vue
View File

@ -1,33 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-chkbox</td>
<td>Container element</td>
</tr>
<tr>
<td>p-tristatechkbox</td>
<td>Container element</td>
</tr>
<tr>
<td>p-chkbox-box</td>
<td>Container of icon.</td>
</tr>
<tr>
<td>p-chkbox-icon</td>
<td>Icon element.</td>
</tr>
</tbody>
</table>
</div>
</template>

6
doc/tristatecheckbox/theming/TailwindDoc.vue
View File

@ -1,6 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
Tailwind CSS.
</DocSectionText>
</template>

40
doc/tristatecheckbox/theming/index.vue
View File

@ -1,40 +0,0 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>TriStateCheckbox Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import TailwindDoc from './TailwindDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'theming.styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'theming.unstyled',
label: 'Unstyled',
description: 'Theming is implemented with the pass through properties in unstyled mode.',
children: [
{
id: 'theming.tailwind',
label: 'Tailwind',
component: TailwindDoc
}
]
}
]
};
}
};
</script>

3
modules/nuxt-primevue/runtime/core/components/index.js
View File

@ -27,8 +27,7 @@ const form = [
'Slider', 'Slider',
'Textarea', 'Textarea',
'ToggleButton', 'ToggleButton',
'TreeSelect', 'TreeSelect'
'TriStateCheckbox'
]; ];
const button = ['Button', 'ButtonGroup', 'SpeedDial', 'SplitButton']; const button = ['Button', 'ButtonGroup', 'SpeedDial', 'SplitButton'];

1
nuxt-vite.config.js
View File

@ -109,7 +109,6 @@ const STYLE_ALIAS = {
'primevue/tree/style': path.resolve(__dirname, './components/lib/tree/style/TreeStyle.js'), 'primevue/tree/style': path.resolve(__dirname, './components/lib/tree/style/TreeStyle.js'),
'primevue/treeselect/style': path.resolve(__dirname, './components/lib/treeselect/style/TreeSelectStyle.js'), 'primevue/treeselect/style': path.resolve(__dirname, './components/lib/treeselect/style/TreeSelectStyle.js'),
'primevue/treetable/style': path.resolve(__dirname, './components/lib/treetable/style/TreeTableStyle.js'), 'primevue/treetable/style': path.resolve(__dirname, './components/lib/treetable/style/TreeTableStyle.js'),
'primevue/tristatecheckbox/style': path.resolve(__dirname, './components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js'),
'primevue/virtualscroller/style': path.resolve(__dirname, './components/lib/virtualscroller/style/VirtualScrollerStyle.js') 'primevue/virtualscroller/style': path.resolve(__dirname, './components/lib/virtualscroller/style/VirtualScrollerStyle.js')
}; };

63
pages/tristatecheckbox/index.vue
View File

@ -1,63 +0,0 @@
<template>
<DocComponent
title="Vue TriStateCheckbox Component"
header="TriStateCheckbox"
description="TriStateCheckbox is used to select either true, false or null as the value."
:componentDocs="docs"
:apiDocs="['TriStateCheckbox']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
<script>
import AccessibilityDoc from '@/doc/tristatecheckbox/AccessibilityDoc.vue';
import BasicDoc from '@/doc/tristatecheckbox/BasicDoc.vue';
import DisabledDoc from '@/doc/tristatecheckbox/DisabledDoc.vue';
import FilledDoc from '@/doc/tristatecheckbox/FilledDoc.vue';
import ImportDoc from '@/doc/tristatecheckbox/ImportDoc.vue';
import InvalidDoc from '@/doc/tristatecheckbox/InvalidDoc.vue';
import PTComponent from '@/doc/tristatecheckbox/pt/index.vue';
import ThemingDoc from '@/doc/tristatecheckbox/theming/index.vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
},
{
id: 'filled',
label: 'Filled',
component: FilledDoc
},
{
id: 'invalid',
label: 'Invalid',
component: InvalidDoc
},
{
id: 'disabled',
label: 'Disabled',
component: DisabledDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};
</script>

1
rollup.config.js
View File

@ -170,7 +170,6 @@ const CORE_STYLE_DEPENDENCIES = {
'primevue/tree/style': 'primevue.tree.style', 'primevue/tree/style': 'primevue.tree.style',
'primevue/treeselect/style': 'primevue.treeselect.style', 'primevue/treeselect/style': 'primevue.treeselect.style',
'primevue/treetable/style': 'primevue.treetable.style', 'primevue/treetable/style': 'primevue.treetable.style',
'primevue/tristatecheckbox/style': 'primevue.tristatecheckbox.style',
'primevue/virtualscroller/style': 'primevue.virtualscroller.style' 'primevue/virtualscroller/style': 'primevue.virtualscroller.style'
}; };