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

Fixed #5476 - For TriStateCheckbox

Browse source
This commit is contained in:
tugcekucukoglu 2024-03-27 14:12:51 +03:00
parent 9b20f4baca
commit 5ebefdf258
30 changed files with 9 additions and 1259 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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?: {

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"
}