Fixed #5476 - For TriStateCheckbox
tugcekucukoglu
parent
9b20f4baca
commit
5ebefdf258
|
|
@ -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
|
||||
}
|
||||
};
|
||||
|
|
@ -171,10 +171,6 @@
|
|||
{
|
||||
"name": "TreeSelect",
|
||||
"to": "/treeselect"
|
||||
},
|
||||
{
|
||||
"name": "TriStateCheckbox",
|
||||
"to": "/tristatecheckbox"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -249,7 +249,6 @@ import Tooltip from 'primevue/tooltip';
|
|||
import Tree from 'primevue/tree';
|
||||
import TreeSelect from 'primevue/treeselect';
|
||||
import TreeTable from 'primevue/treetable';
|
||||
import TriStateCheckbox from 'primevue/tristatecheckbox';
|
||||
import VirtualScroller from 'primevue/virtualscroller';
|
||||
${imports}
|
||||
|
||||
|
|
@ -363,7 +362,6 @@ app.component('ToggleButton', ToggleButton);
|
|||
app.component('Tree', Tree);
|
||||
app.component('TreeSelect', TreeSelect);
|
||||
app.component('TreeTable', TreeTable);
|
||||
app.component('TriStateCheckbox', TriStateCheckbox);
|
||||
app.component('VirtualScroller', VirtualScroller);
|
||||
${element}
|
||||
|
||||
|
|
|
|||
|
|
@ -92,7 +92,6 @@ import { TooltipDirectivePassThroughOptions } from '../tooltip';
|
|||
import { TreePassThroughOptions } from '../tree';
|
||||
import { TreeSelectPassThroughOptions } from '../treeselect';
|
||||
import { TreeTablePassThroughOptions } from '../treetable';
|
||||
import { TriStateCheckboxPassThroughOptions } from '../tristatecheckbox';
|
||||
import { DefaultPassThrough, PassThrough } from '../ts-helpers';
|
||||
import { VirtualScrollerPassThroughOptions } from '../virtualscroller';
|
||||
|
||||
|
|
@ -208,7 +207,6 @@ export interface PrimeVuePTOptions {
|
|||
toolbar?: DefaultPassThrough<ToolbarPassThroughOptions>;
|
||||
tree?: DefaultPassThrough<TreePassThroughOptions>;
|
||||
treeselect?: DefaultPassThrough<TreeSelectPassThroughOptions>;
|
||||
tristatecheckbox?: DefaultPassThrough<TriStateCheckboxPassThroughOptions>;
|
||||
treetable?: DefaultPassThrough<TreeTablePassThroughOptions>;
|
||||
virtualscroller?: DefaultPassThrough<VirtualScrollerPassThroughOptions>;
|
||||
directives?: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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/)
|
||||
* --- ---
|
||||
* 
|
||||
*
|
||||
* @group Component
|
||||
*
|
||||
*/
|
||||
declare class TriStateCheckbox extends ClassComponent<TriStateCheckboxProps, TriStateCheckboxSlots, TriStateCheckboxEmits> {}
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
TriStateCheckbox: GlobalComponentConstructor<TriStateCheckbox>;
|
||||
}
|
||||
}
|
||||
|
||||
export default TriStateCheckbox;
|
||||
|
|
@ -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]]]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"main": "./tristatecheckbox.cjs.js",
|
||||
"module": "./tristatecheckbox.esm.js",
|
||||
"unpkg": "./tristatecheckbox.min.js",
|
||||
"types": "./TriStateCheckbox.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./TriStateCheckbox.vue"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import { BaseStyle } from '../../base/style';
|
||||
|
||||
export interface TriStateCheckboxStyle extends BaseStyle {}
|
||||
|
|
@ -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
|
||||
});
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"main": "./tristatecheckboxstyle.cjs.js",
|
||||
"module": "./tristatecheckboxstyle.esm.js",
|
||||
"unpkg": "./tristatecheckboxstyle.min.js",
|
||||
"types": "./TriStateCheckboxStyle.d.ts"
|
||||
}
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<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>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -251,7 +251,7 @@ export default {
|
|||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<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>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -366,7 +366,7 @@ export default {
|
|||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<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>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -573,7 +573,7 @@ export default {
|
|||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
<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>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<TriStateCheckbox v-model="filterModel.value" @change="filterCallback()" />
|
||||
<Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
|
||||
</template>
|
||||
</Column>
|
||||
</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>
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<TriStateCheckbox v-model="filterModel.value" @change="filterCallback()" />
|
||||
<Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
|
||||
</template>
|
||||
</Column>
|
||||
</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>
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<TriStateCheckbox v-model="filterModel.value" @change="filterCallback()" />
|
||||
<Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
|
||||
</template>
|
||||
</Column>
|
||||
</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>
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<TriStateCheckbox v-model="filterModel.value" @change="filterCallback()" />
|
||||
<Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary @change="filterCallback()" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 || ' ' }}</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 || ' ' }}</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 || ' ' }}</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 || ' ' }}</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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -27,8 +27,7 @@ const form = [
|
|||
'Slider',
|
||||
'Textarea',
|
||||
'ToggleButton',
|
||||
'TreeSelect',
|
||||
'TriStateCheckbox'
|
||||
'TreeSelect'
|
||||
];
|
||||
|
||||
const button = ['Button', 'ButtonGroup', 'SpeedDial', 'SplitButton'];
|
||||
|
|
|
|||
|
|
@ -109,7 +109,6 @@ const STYLE_ALIAS = {
|
|||
'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/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')
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -170,7 +170,6 @@ const CORE_STYLE_DEPENDENCIES = {
|
|||
'primevue/tree/style': 'primevue.tree.style',
|
||||
'primevue/treeselect/style': 'primevue.treeselect.style',
|
||||
'primevue/treetable/style': 'primevue.treetable.style',
|
||||
'primevue/tristatecheckbox/style': 'primevue.tristatecheckbox.style',
|
||||
'primevue/virtualscroller/style': 'primevue.virtualscroller.style'
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue