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

Refactor #5071

pull/5098/head
mertsincan 2024-01-14 13:38:51 +00:00
parent c06c73e285
commit bd5b3f7c6a
22 changed files with 258 additions and 463 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/lib/checkbox/Checkbox.d.ts vendored
View File

@ -61,18 +61,14 @@ export interface CheckboxPassThroughOptions {
* Used to pass attributes to the input's DOM element.
*/
input?: CheckboxPassThroughOptionType;
/**
* Used to pass attributes to the box's DOM element.
*/
box?: CheckboxPassThroughOptionType;
/**
* Used to pass attributes to the icon's DOM element.
*/
icon?: CheckboxPassThroughOptionType;
/**
* Used to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenInputWrapper?: CheckboxPassThroughOptionType;
/**
* Used to pass attributes to the hidden input's DOM element.
*/
hiddenInput?: CheckboxPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -222,10 +218,10 @@ export interface CheckboxSlots {
*/
export interface CheckboxEmits {
/**
* Emitted when the page changes.
* @param {*} value - New page value.
* Emitted when the value changes.
* @param {*} value - New value.
*/
'update:page'(value: any): void;
'update:modelValue'(value: any): void;
/**
* Callback to invoke on value change.
* @param {Event} event - Browser event.

2
components/lib/checkbox/Checkbox.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="checkbox" :data-p-highlight="checked" :data-p-disabled="disabled">
<div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="checkbox" :data-p-checked="checked" :data-p-disabled="disabled">
<input
:id="inputId"
type="checkbox"

48
components/lib/column/Column.d.ts vendored
View File

@ -12,9 +12,11 @@
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button';
import { CheckboxPassThroughOptionType } from '../checkbox';
import { DataTablePassThroughOptions } from '../datatable';
import { DropdownPassThroughOptionType } from '../dropdown';
import { PassThroughOptions } from '../passthrough';
import { RadioButtonPassThroughOptionType } from '../radiobutton';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
import { VirtualScrollerLoaderOptions } from '../virtualscroller';
@ -156,18 +158,10 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the sort badge's DOM element.
*/
sortBadge?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the checkbox wrapper's DOM element.
*/
headerCheckboxWrapper?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the header checkbox's DOM element.
*/
headerCheckbox?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the header checkbox icon's DOM element.
*/
headerCheckboxIcon?: ColumnPassThroughOptionType;
headerCheckbox?: CheckboxPassThroughOptionType;
/**
* Used to pass attributes to the column filter's DOM element.
*/
@ -278,30 +272,14 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the column title's DOM element.
*/
columnTitle?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the radiobutton wrapper's DOM element.
*/
radiobuttonWrapper?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the radiobutton's DOM element.
*/
radiobutton?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the radiobutton icon's DOM element.
*/
radiobuttonIcon?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the checkbox wrapper's DOM element.
*/
checkboxWrapper?: ColumnPassThroughOptionType;
rowRadioButton?: RadioButtonPassThroughOptionType;
/**
* Used to pass attributes to the checkbox's DOM element.
*/
checkbox?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the checkbox icon's DOM element.
*/
checkboxIcon?: ColumnPassThroughOptionType;
rowCheckbox?: CheckboxPassThroughOptionType;
/**
* Used to pass attributes to the rowtoggler's DOM element.
*/
@ -342,22 +320,6 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the body cell content's DOM element.
*/
bodyCellContent?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenHeaderInputWrapper?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the hidden input's DOM element.
*/
hiddenHeaderInput?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenInputWrapper?: ColumnPassThroughOptionType;
/**
* Used to pass attributes to the hidden input's DOM element.
*/
hiddenInput?: ColumnPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

56
components/lib/datatable/HeaderCheckbox.vue
View File

@ -1,29 +1,16 @@
<template>
<div :class="cx('headerCheckboxWrapper')" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPT('headerCheckboxWrapper')">
<div class="p-hidden-accessible" v-bind="getColumnPT('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
<input
ref="input"
type="checkbox"
:checked="checked"
:disabled="disabled"
:tabindex="disabled ? null : '0'"
:aria-label="headerCheckboxAriaLabel"
@focus="onFocus($event)"
@blur="onBlur($event)"
v-bind="getColumnPT('hiddenHeaderInput')"
/>
</div>
<div ref="box" :class="cx('headerCheckbox')" v-bind="getColumnPT('headerCheckbox')">
<component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" :class="cx('headerCheckboxIcon')" />
<CheckIcon v-else-if="!headerCheckboxIconTemplate && !!checked" :class="cx('headerCheckboxIcon')" v-bind="getColumnPT('headerCheckboxIcon')" />
</div>
</div>
<Checkbox :modelValue="checked" :binary="true" :disabled="disabled" :aria-label="headerCheckboxAriaLabel" @change="onChange" :pt="getColumnPT('headerCheckbox')">
<template #icon="slotProps">
<component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
<CheckIcon v-else-if="!headerCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('headerCheckbox.icon')" />
</template>
</Checkbox>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import Checkbox from 'primevue/checkbox';
import CheckIcon from 'primevue/icons/check';
import { DomHandler } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
@ -40,11 +27,6 @@ export default {
default: null
}
},
data() {
return {
focused: false
};
},
methods: {
getColumnPT(key) {
const columnMetaData = {
@ -56,7 +38,6 @@ export default {
},
context: {
checked: this.checked,
focused: this.focused,
disabled: this.disabled
}
};
@ -66,21 +47,11 @@ export default {
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
},
onClick(event) {
if (!this.disabled) {
this.$emit('change', {
originalEvent: event,
checked: !this.checked
});
DomHandler.focus(this.$refs.input);
}
},
onFocus() {
this.focused = true;
},
onBlur() {
this.focused = false;
onChange(event) {
this.$emit('change', {
originalEvent: event,
checked: !this.checked
});
}
},
computed: {
@ -89,7 +60,8 @@ export default {
}
},
components: {
CheckIcon: CheckIcon
CheckIcon,
Checkbox
}
};
</script>

62
components/lib/datatable/RowCheckbox.vue
View File

@ -1,30 +1,16 @@
<template>
<div :class="cx('checkboxWrapper')" @click="onClick" v-bind="getColumnPT('checkboxWrapper')">
<div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input
ref="input"
type="checkbox"
:checked="checked"
:disabled="$attrs.disabled"
:tabindex="$attrs.disabled ? null : '0'"
:aria-label="checkboxAriaLabel"
@focus="onFocus($event)"
@blur="onBlur($event)"
@keydown="onKeydown"
v-bind="getColumnPT('hiddenInput')"
/>
</div>
<div ref="box" :class="cx('checkbox')" v-bind="getColumnPT('checkbox')">
<component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" :class="cx('checkboxIcon')" />
<CheckIcon v-else-if="!rowCheckboxIconTemplate && !!checked" :class="cx('checkboxIcon')" v-bind="getColumnPT('checkboxIcon')" />
</div>
</div>
<Checkbox :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :aria-label="checkboxAriaLabel" @change="onChange" :pt="getColumnPT('rowCheckbox')">
<template #icon="slotProps">
<component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
<CheckIcon v-else-if="!rowCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('rowCheckbox.icon')" />
</template>
</Checkbox>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import Checkbox from 'primevue/checkbox';
import CheckIcon from 'primevue/icons/check';
import { DomHandler } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
@ -45,11 +31,6 @@ export default {
default: null
}
},
data() {
return {
focused: false
};
},
methods: {
getColumnPT(key) {
const columnMetaData = {
@ -62,7 +43,6 @@ export default {
context: {
index: this.index,
checked: this.checked,
focused: this.focused,
disabled: this.$attrs.disabled
}
};
@ -72,35 +52,12 @@ export default {
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
},
onClick(event) {
onChange(event) {
if (!this.$attrs.disabled) {
this.$emit('change', {
originalEvent: event,
data: this.value
});
DomHandler.focus(this.$refs.input);
}
event.preventDefault();
event.stopPropagation();
},
onFocus() {
this.focused = true;
},
onBlur() {
this.focused = false;
},
onKeydown(event) {
switch (event.code) {
case 'Space': {
this.onClick(event);
break;
}
default:
break;
}
}
},
@ -110,7 +67,8 @@ export default {
}
},
components: {
CheckIcon: CheckIcon
CheckIcon,
Checkbox
}
};
</script>

43
components/lib/datatable/RowRadioButton.vue
View File

@ -1,24 +1,16 @@
<template>
<div :class="cx('radiobuttonWrapper')" @click="onClick" v-bind="getColumnPT('radiobuttonWrapper')">
<div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" v-bind="getColumnPT('hiddenInput')" />
</div>
<div ref="box" :class="cx('radiobutton')" v-bind="getColumnPT('radiobutton')">
<div :class="cx('radiobuttonIcon')" v-bind="getColumnPT('radiobuttonIcon')"></div>
</div>
</div>
<RadioButton :modelValue="checked" :disabled="$attrs.disabled" :name="name" @change="onChange" :pt="getColumnPT('rowRadiobutton')" />
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import { DomHandler } from 'primevue/utils';
import RadioButton from 'primevue/radiobutton';
import { mergeProps } from 'vue';
export default {
name: 'RowRadioButton',
hostName: 'DataTable',
extends: BaseComponent,
inheritAttrs: false,
emits: ['change'],
props: {
value: null,
@ -30,11 +22,6 @@ export default {
default: null
}
},
data() {
return {
focused: false
};
},
methods: {
getColumnPT(key) {
const columnMetaData = {
@ -47,7 +34,6 @@ export default {
context: {
index: this.index,
checked: this.checked,
focused: this.focused,
disabled: this.$attrs.disabled
}
};
@ -57,24 +43,17 @@ export default {
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
},
onClick(event) {
if (!this.disabled) {
if (!this.checked) {
this.$emit('change', {
originalEvent: event,
data: this.value
});
DomHandler.focus(this.$refs.input);
}
onChange(event) {
if (!this.$attrs.disabled) {
this.$emit('change', {
originalEvent: event,
data: this.value
});
}
},
onFocus() {
this.focused = true;
},
onBlur() {
this.focused = false;
}
},
components: {
RadioButton
}
};
</script>

49
components/lib/datatable/style/DataTableStyle.js
View File

@ -297,23 +297,6 @@ const classes = {
headerTitle: 'p-column-title',
sortIcon: 'p-sortable-column-icon',
sortBadge: 'p-sortable-column-badge',
//headercheckbox
headerCheckboxWrapper: ({ instance }) => [
'p-checkbox p-component',
{
'p-checkbox-focused': instance.focused,
'p-disabled': instance.disabled
}
],
headerCheckbox: ({ instance }) => [
'p-checkbox-box p-component',
{
'p-highlight': instance.checked,
'p-disabled': instance.disabled,
'p-focus': instance.focused
}
],
headerCheckboxIcon: 'p-checkbox-icon',
// columnfilter
columnFilter: ({ props }) => [
'p-column-filter p-fluid',
@ -413,38 +396,6 @@ const classes = {
rowEditorSaveIcon: 'p-row-editor-save-icon',
rowEditorCancelButton: 'p-row-editor-cancel p-link',
rowEditorCancelIcon: 'p-row-editor-cancel-icon',
//rowcheckbox
checkboxWrapper: ({ instance }) => [
'p-checkbox p-component',
{
'p-checkbox-focused': instance.focused
}
],
checkbox: ({ instance }) => [
'p-checkbox-box p-component',
{
'p-highlight': instance.checked,
'p-disabled': instance.$attrs.disabled,
'p-focus': instance.focused
}
],
checkboxIcon: 'p-checkbox-icon',
//rowradiobutton
radiobuttonWrapper: ({ instance }) => [
'p-radiobutton p-component',
{
'p-radiobutton-focused': instance.focused
}
],
radiobutton: ({ instance }) => [
'p-radiobutton-box p-component',
{
'p-highlight': instance.checked,
'p-disabled': instance.$attrs.disabled,
'p-focus': instance.focused
}
],
radiobuttonIcon: 'p-radiobutton-icon',
//tablefooter
tfoot: 'p-datatable-tfoot',
//footercell

63
components/lib/inputswitch/InputSwitch.d.ts vendored
View File

@ -30,6 +30,10 @@ export interface InputSwitchPassThroughMethodOptions {
* Defines current inline state.
*/
state: InputSwitchState;
/**
* Defines current options.
*/
context: InputSwitchContext;
/**
* Defines valid attributes.
*/
@ -53,18 +57,14 @@ export interface InputSwitchPassThroughOptions {
* Used to pass attributes to the root's DOM element.
*/
root?: InputSwitchPassThroughOptionType;
/**
* Used to pass attributes to the input's DOM element.
*/
input?: InputSwitchPassThroughOptionType;
/**
* Used to pass attributes to the slider's DOM element.
*/
slider?: InputSwitchPassThroughOptionType;
/**
* Used to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenInputWrapper?: InputSwitchPassThroughOptionType;
/**
* Used to pass attributes to the hidden input's DOM element.
*/
hiddenInput?: InputSwitchPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -83,11 +83,7 @@ export interface InputSwitchPassThroughAttributes {
* Defines current inline state in InputSwitch component.
*/
export interface InputSwitchState {
/**
* Current focus state as a boolean.
* @defaultValue false
*/
focused: boolean;
[key: string]: any;
}
/**
@ -114,6 +110,15 @@ export interface InputSwitchProps {
* @defaultValue false
*/
disabled?: boolean | 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?: number | undefined;
/**
* Identifier of the underlying input element.
*/
@ -155,6 +160,22 @@ export interface InputSwitchProps {
unstyled?: boolean;
}
/**
* Defines current options in InputSwitch component.
*/
export interface InputSwitchContext {
/**
* Current checked state of the item as a boolean.
* @defaultValue false
*/
checked: boolean;
/**
* Current disabled state of the item as a boolean.
* @defaultValue false
*/
disabled: boolean;
}
export interface InputSwitchSlots {}
/**
@ -166,21 +187,21 @@ export interface InputSwitchEmits {
* @param {boolean} value - New value.
*/
'update:modelValue'(value: boolean): void;
/**
* Callback to invoke on click.
* @param {Event} event - Browser event.
*/
click(event: Event): void;
/**
* Callback to invoke on value change.
* @param {Event} event - Browser event.
*/
change(event: Event): void;
/**
* Callback to invoke on value change.
* @param {boolean} value - New value.
* Callback to invoke when the component receives focus.
* @param {Event} event - Browser event.
*/
input(value: boolean): void;
focus(event: Event): void;
/**
* Callback to invoke when the component loses focus.
* @param {Event} event - Browser event.
*/
blur(event: Event): void;
}
/**

20
components/lib/multiselect/MultiSelect.d.ts vendored
View File

@ -145,10 +145,6 @@ export interface MultiSelectPassThroughOptions {
* Used to pass attributes to the header's DOM element.
*/
header?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the header checkbox container's DOM element.
*/
headerCheckboxContainer?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the header checkbox's DOM element.
*/
@ -195,17 +191,9 @@ export interface MultiSelectPassThroughOptions {
*/
item?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the checkbox container's DOM element.
* Used to pass attributes to the item checkbox's DOM element.
*/
checkboxContainer?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the checkbox's DOM element.
*/
checkbox?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the checkbox icon's DOM element.
*/
checkboxIcon?: MultiSelectPassThroughOptionType;
itemCheckbox?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the option's DOM element.
*/
@ -214,10 +202,6 @@ export interface MultiSelectPassThroughOptions {
* Used to pass attributes to the emptyMessage's DOM element.
*/
emptyMessage?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenInputWrapper?: MultiSelectPassThroughOptionType;
/**
* Used to pass attributes to the hidden input's DOM element.
*/

69
components/lib/multiselect/MultiSelect.vue
View File

@ -68,16 +68,12 @@
></span>
<slot name="header" :value="modelValue" :options="visibleOptions"></slot>
<div v-if="(showToggleAll && selectionLimit == null) || filter" :class="cx('header')" v-bind="ptm('header')">
<div v-if="showToggleAll && selectionLimit == null" :class="cx('headerCheckboxContainer')" @click="onToggleAll" v-bind="ptm('headerCheckboxContainer')">
<div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" v-bind="ptm('headerCheckbox')" />
</div>
<div :class="cx('headerCheckbox')" v-bind="getHeaderCheckboxPTOptions('headerCheckbox')">
<slot name="headercheckboxicon" :allSelected="allSelected" :class="cx('headerCheckboxIcon')">
<component v-show="allSelected" :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="[cx('headerCheckboxIcon'), { [checkboxIcon]: allSelected }]" v-bind="getHeaderCheckboxPTOptions('headerCheckboxIcon')" />
</slot>
</div>
</div>
<Checkbox v-if="showToggleAll && selectionLimit == null" :modelValue="allSelected" :binary="true" :disabled="disabled" :aria-label="toggleAllAriaLabel" @change="onToggleAll" :pt="getHeaderCheckboxPTOptions('headerCheckbox')">
<template #icon="slotProps">
<component v-if="$slots.headercheckboxicon" :is="$slots.headercheckboxicon" :checked="slotProps.checked" :class="slotProps.class" />
<component v-else-if="slotProps.checked" :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]" v-bind="getHeaderCheckboxPTOptions('headerCheckbox.icon')" />
</template>
</Checkbox>
<div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
<input
ref="filterInput"
@ -135,18 +131,17 @@
:data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
:data-p-disabled="isOptionDisabled(option)"
>
<div :class="cx('checkboxContainer')" v-bind="ptm('checkboxContainer')">
<div :class="cx('checkbox', { option })" v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'checkbox')">
<slot name="itemcheckboxicon" :selected="isSelected(option)" :class="cx('checkboxIcon')">
<component
v-show="isSelected(option)"
:is="checkboxIcon ? 'span' : 'CheckIcon'"
:class="[cx('checkboxIcon'), { [checkboxIcon]: isSelected(option) }]"
v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'checkboxIcon')"
/>
</slot>
</div>
</div>
<Checkbox :modelValue="isSelected(option)" :binary="true" :pt="getCheckboxPTOptions(option, getItemOptions, i, 'itemCheckbox')">
<template #icon="slotProps">
<component v-if="$slots.itemcheckboxicon" :is="$slots.itemcheckboxicon" :checked="slotProps.checked" :class="slotProps.class" />
<component
v-else-if="slotProps.checked"
:is="checkboxIcon ? 'span' : 'CheckIcon'"
:class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]"
v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'itemCheckbox.icon')"
/>
</template>
</Checkbox>
<slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
<span v-bind="ptm('option')">{{ getOptionLabel(option) }}</span>
</slot>
@ -191,6 +186,7 @@
<script>
import { FilterService } from 'primevue/api';
import Checkbox from 'primevue/checkbox';
import CheckIcon from 'primevue/icons/check';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import SearchIcon from 'primevue/icons/search';
@ -224,7 +220,6 @@ export default {
id: this.$attrs.id,
focused: false,
focusedOptionIndex: -1,
headerCheckboxFocused: false,
filterValue: null,
overlayVisible: false
};
@ -272,8 +267,7 @@ export default {
getHeaderCheckboxPTOptions(key) {
return this.ptm(key, {
context: {
selected: this.allSelected,
focused: this.headerCheckboxFocused
selected: this.allSelected
}
});
},
@ -438,12 +432,6 @@ export default {
onCloseClick() {
this.hide(true);
},
onHeaderCheckboxFocus() {
this.headerCheckboxFocused = true;
},
onHeaderCheckboxBlur() {
this.headerCheckboxFocused = false;
},
onOptionSelect(event, option, index = -1, isFocus = false) {
if (this.disabled || this.isOptionDisabled(option)) {
return;
@ -788,8 +776,6 @@ export default {
this.updateModel(event, value);
}
this.headerCheckboxFocused = true;
},
removeOption(event, optionValue) {
let value = this.modelValue.filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey));
@ -1061,14 +1047,15 @@ export default {
ripple: Ripple
},
components: {
VirtualScroller: VirtualScroller,
Portal: Portal,
TimesIcon: TimesIcon,
SearchIcon: SearchIcon,
TimesCircleIcon: TimesCircleIcon,
ChevronDownIcon: ChevronDownIcon,
SpinnerIcon: SpinnerIcon,
CheckIcon: CheckIcon
Checkbox,
VirtualScroller,
Portal,
TimesIcon,
SearchIcon,
TimesCircleIcon,
ChevronDownIcon,
SpinnerIcon,
CheckIcon
}
};
</script>

18
components/lib/multiselect/style/MultiSelectStyle.js
View File

@ -148,21 +148,6 @@ const classes = {
}
],
header: 'p-multiselect-header',
headerCheckboxContainer: ({ instance }) => [
'p-checkbox p-component',
{
'p-checkbox-checked': instance.allSelected,
'p-checkbox-focused': instance.headerCheckboxFocused
}
],
headerCheckbox: ({ instance }) => [
'p-checkbox-box',
{
'p-highlight': instance.allSelected,
'p-focus': instance.headerCheckboxFocused
}
],
headerCheckboxIcon: 'p-checkbox-icon',
filterContainer: 'p-multiselect-filter-container',
filterInput: 'p-multiselect-filter p-inputtext p-component',
filterIcon: 'p-multiselect-filter-icon',
@ -179,9 +164,6 @@ const classes = {
'p-disabled': instance.isOptionDisabled(option)
}
],
checkboxContainer: 'p-checkbox p-component',
checkbox: ({ instance, option }) => ['p-checkbox-box', { 'p-highlight': instance.isSelected(option) }],
checkboxIcon: 'p-checkbox-icon',
emptyMessage: 'p-multiselect-empty-message'
};

67
components/lib/radiobutton/RadioButton.d.ts vendored
View File

@ -7,7 +7,6 @@
* @module radiobutton
*
*/
import { InputHTMLAttributes } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -30,6 +29,10 @@ export interface RadioButtonPassThroughMethodOptions {
* Defines current inline state.
*/
state: RadioButtonState;
/**
* Defines current options.
*/
context: RadioButtonContext;
/**
* Defines valid attributes.
*/
@ -57,18 +60,14 @@ export interface RadioButtonPassThroughOptions {
* Used to pass attributes to the input's DOM element.
*/
input?: RadioButtonPassThroughOptionType;
/**
* Used to pass attributes to the box's DOM element.
*/
box?: RadioButtonPassThroughOptionType;
/**
* Used to pass attributes to the icon's DOM element.
*/
icon?: RadioButtonPassThroughOptionType;
/**
* Used to pass attributes to the hidden accessible DOM element wrapper.
*/
hiddenInputWrapper?: RadioButtonPassThroughOptionType;
/**
* Used to pass attributes to the hidden accessible DOM element.
*/
hiddenInput?: RadioButtonPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -87,11 +86,7 @@ export interface RadioButtonPassThroughAttributes {
* Defines current inline state in RadioButton component.
*/
export interface RadioButtonState {
/**
* Current focused state as a boolean.
* @defaultValue false
*/
focused: boolean;
[key: string]: any;
}
/**
@ -115,6 +110,15 @@ export interface RadioButtonProps {
* @defaultValue false
*/
disabled?: boolean | 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?: number | undefined;
/**
* Identifier of the underlying input element.
*/
@ -127,10 +131,6 @@ export interface RadioButtonProps {
* Style class of the input field.
*/
inputClass?: string | object | undefined;
/**
* Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/
inputProps?: InputHTMLAttributes | undefined;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
@ -156,6 +156,22 @@ export interface RadioButtonProps {
unstyled?: boolean;
}
/**
* Defines current options in RadioButton component.
*/
export interface RadioButtonContext {
/**
* Current checked state of the item as a boolean.
* @defaultValue false
*/
checked: boolean;
/**
* Current disabled state of the item as a boolean.
* @defaultValue false
*/
disabled: boolean;
}
export interface RadioButtonSlots {}
/**
@ -167,16 +183,21 @@ export interface RadioButtonEmits {
* @param {*} value - New value.
*/
'update:modelValue'(value: any): void;
/**
* Callback to invoke on radio button click.
* @param {Event} event - Browser event.
*/
click(event: Event): void;
/**
* Callback to invoke on radio button 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;
}
/**

2
components/lib/radiobutton/RadioButton.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="radiobutton" :data-p-highlight="checked" :data-p-disabled="disabled">
<div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="radiobutton" :data-p-checked="checked" :data-p-disabled="disabled">
<input
:id="inputId"
type="radio"

8
components/lib/togglebutton/BaseToggleButton.vue
View File

@ -25,6 +25,10 @@ export default {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
tabindex: {
type: Number,
default: null
@ -41,10 +45,6 @@ export default {
type: Object,
default: null
},
inputProps: {
type: null,
default: null
},
ariaLabelledby: {
type: String,
default: null

37
components/lib/togglebutton/ToggleButton.d.ts vendored
View File

@ -7,7 +7,7 @@
* @module togglebutton
*
*/
import { InputHTMLAttributes, VNode } from 'vue';
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -57,6 +57,10 @@ export interface ToggleButtonPassThroughOptions {
* Used to pass attributes to the root's DOM element.
*/
root?: ToggleButtonPassThroughOptionType;
/**
* Used to pass attributes to the input's DOM element.
*/
input?: ToggleButtonPassThroughOptionType;
/**
* Used to pass attributes to the icon's DOM element.
*/
@ -65,14 +69,6 @@ export interface ToggleButtonPassThroughOptions {
* Used to pass attributes to the label's DOM element.
*/
label?: ToggleButtonPassThroughOptionType;
/**
* Used to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenInputWrapper?: ToggleButtonPassThroughOptionType;
/**
* Used to pass attributes to the hidden input's DOM element.
*/
hiddenInput?: ToggleButtonPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -91,10 +87,7 @@ export interface ToggleButtonPassThroughAttributes {
* Defines current inline state in ToggleButton component.
*/
export interface ToggleButtonState {
/**
* Focused state as a boolean.
*/
focused: boolean;
[key: string]: any;
}
/**
@ -102,20 +95,15 @@ export interface ToggleButtonState {
*/
export interface ToggleButtonContext {
/**
* Current focused state as a boolean.
* Current highlighted state as a boolean.
* @defaultValue false
*/
focused: boolean;
active: boolean;
/**
* Current disabled state as a boolean.
* @defaultValue false
*/
disabled: boolean;
/**
* Current highlighted state as a boolean.
* @defaultValue false
*/
highlighted: boolean;
}
/**
@ -157,6 +145,11 @@ export interface ToggleButtonProps {
* @defaultValue false
*/
disabled?: boolean | undefined;
/**
* When present, it specifies that an input field is read-only.
* @default false
*/
readonly?: boolean | undefined;
/**
* Index of the element in tabbing order.
*/
@ -173,10 +166,6 @@ export interface ToggleButtonProps {
* Inline style of the input field.
*/
inputStyle?: object | undefined;
/**
* Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
*/
inputProps?: InputHTMLAttributes | undefined;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/

10
components/lib/tree/Tree.d.ts vendored
View File

@ -125,18 +125,10 @@ export interface TreePassThroughOptions<T = any> {
* Used to pass attributes to the toggler icon's DOM element.
*/
togglerIcon?: TreePassThroughOptionType<T>;
/**
* Used to pass attributes to the checkbox container's DOM element.
*/
checkboxContainer?: TreePassThroughOptionType<T>;
/**
* Used to pass attributes to the checkbox's DOM element.
*/
checkbox?: TreePassThroughOptionType<T>;
/**
* Used to pass attributes to the checkbox icon's DOM element.
*/
checkboxIcon?: TreePassThroughOptionType<T>;
nodeCheckbox?: TreePassThroughOptionType<T>;
/**
* Used to pass attributes to the node icon's DOM element.
*/

24
components/lib/tree/TreeNode.vue
View File

@ -26,12 +26,12 @@
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
</template>
</button>
<div v-if="checkboxMode" :class="cx('checkboxContainer')" aria-hidden="true" v-bind="getPTOptions('checkboxContainer')">
<div :class="cx('checkbox')" role="checkbox" v-bind="getPTOptions('checkbox')" :data-p-checked="checked" :data-p-partialchecked="partialChecked">
<component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" :class="cx('checkboxIcon')" />
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="cx('checkboxIcon')" v-bind="getPTOptions('checkboxIcon')" />
</div>
</div>
<Checkbox v-if="checkboxMode" :modelValue="checked" :binary="true" :class="cx('nodeCheckbox')" :pt="getPTOptions('nodeCheckbox')" :data-p-checked="checked" :data-p-partialchecked="partialChecked">
<template #icon="slotProps">
<component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="slotProps.checked" :partialChecked="partialChecked" :class="slotProps.class" />
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="slotProps.class" v-bind="getPTOptions('nodeCheckbox.icon')" />
</template>
</Checkbox>
<span :class="[cx('nodeIcon'), node.icon]" v-bind="getPTOptions('nodeIcon')"></span>
<span :class="cx('label')" v-bind="getPTOptions('label')" @keydown.stop>
<component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" />
@ -59,6 +59,7 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import Checkbox from 'primevue/checkbox';
import CheckIcon from 'primevue/icons/check';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
@ -441,11 +442,12 @@ export default {
}
},
components: {
ChevronDownIcon: ChevronDownIcon,
ChevronRightIcon: ChevronRightIcon,
CheckIcon: CheckIcon,
MinusIcon: MinusIcon,
SpinnerIcon: SpinnerIcon
Checkbox,
ChevronDownIcon,
ChevronRightIcon,
CheckIcon,
MinusIcon,
SpinnerIcon
},
directives: {
ripple: Ripple

6
components/lib/tree/style/TreeStyle.js
View File

@ -114,15 +114,11 @@ const classes = {
toggler: 'p-tree-toggler p-link',
togglerIcon: 'p-tree-toggler-icon',
nodeTogglerIcon: 'p-tree-node-toggler-icon',
checkboxContainer: 'p-checkbox p-component',
checkbox: ({ instance }) => [
'p-checkbox-box',
nodeCheckbox: ({ instance }) => [
{
'p-highlight': instance.checked,
'p-indeterminate': instance.partialChecked
}
],
checkboxIcon: 'p-checkbox-icon',
nodeIcon: 'p-treenode-icon',
label: 'p-treenode-label',
subgroup: 'p-treenode-children'

47
components/lib/treetable/BodyCell.vue
View File

@ -11,15 +11,21 @@
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
</template>
</button>
<div v-if="checkboxSelectionMode && columnProp('expander')" :class="cx('checkboxWrapper')" @click="toggleCheckbox" v-bind="getColumnCheckboxPT('checkboxWrapper')">
<div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
<input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" v-bind="getColumnPT('hiddenInput')" />
</div>
<div ref="checkboxEl" :class="cx('checkbox')" v-bind="getColumnCheckboxPT('checkbox')">
<component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" :class="cx('checkboxicon')" />
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="cx('checkboxicon')" v-bind="getColumnCheckboxPT('checkboxIcon')" />
</div>
</div>
<Checkbox
v-if="checkboxSelectionMode && columnProp('expander')"
:modelValue="checked"
:binary="true"
:class="cx('rowCheckbox')"
@change="toggleCheckbox"
:pt="getColumnCheckboxPT('rowCheckbox')"
:data-p-checked="checked"
:data-p-partialchecked="partialChecked"
>
<template #icon="slotProps">
<component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="slotProps.checked" :partialChecked="partialChecked" :class="slotProps.class" />
<component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="slotProps.class" v-bind="getColumnCheckboxPT('rowCheckbox.icon')" />
</template>
</Checkbox>
<component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
<template v-else>
<span v-bind="getColumnPT('bodyCellContent')">{{ resolveFieldData(node.data, columnProp('field')) }}</span>
@ -29,6 +35,7 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import Checkbox from 'primevue/checkbox';
import CheckIcon from 'primevue/icons/check';
import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright';
@ -95,8 +102,7 @@ export default {
},
data() {
return {
styleObject: {},
checkboxFocused: false
styleObject: {}
};
},
mounted() {
@ -126,7 +132,6 @@ export default {
},
context: {
index: this.index,
focused: this.checkboxFocused,
selectable: this.$parentInstance.rowHover || this.$parentInstance.rowSelectionMode,
selected: this.$parent.selected,
frozen: this.columnProp('frozen'),
@ -152,7 +157,6 @@ export default {
},
context: {
checked: this.checked,
focused: this.checkboxFocused,
partialChecked: this.partialChecked
}
};
@ -189,12 +193,6 @@ export default {
},
toggleCheckbox() {
this.$emit('checkbox-toggle');
},
onCheckboxFocus() {
this.checkboxFocused = true;
},
onCheckboxBlur() {
this.checkboxFocused = false;
}
},
computed: {
@ -218,11 +216,12 @@ export default {
}
},
components: {
ChevronRightIcon: ChevronRightIcon,
ChevronDownIcon: ChevronDownIcon,
CheckIcon: CheckIcon,
MinusIcon: MinusIcon,
SpinnerIcon: SpinnerIcon
Checkbox,
ChevronRightIcon,
ChevronDownIcon,
CheckIcon,
MinusIcon,
SpinnerIcon
},
directives: {
ripple: Ripple

13
components/lib/treetable/style/TreeTableStyle.js
View File

@ -235,21 +235,12 @@ const classes = {
],
rowToggler: 'p-treetable-toggler p-link',
rowTogglerIcon: 'p-tree-toggler-icon',
checkboxWrapper: ({ instance }) => [
'p-checkbox p-treetable-checkbox p-component',
rowCheckbox: ({ instance }) => [
'p-treetable-checkbox',
{
'p-checkbox-focused': instance.checkboxFocused
}
],
checkbox: ({ instance }) => [
'p-checkbox-box',
{
'p-highlight': instance.checked,
'p-focus': instance.checkboxFocused,
'p-indeterminate': instance.partialChecked
}
],
checkboxicon: 'p-checkbox-icon',
//treetable
emptyMessage: 'p-treetable-emptymessage',
tfoot: 'p-treetable-tfoot',

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

@ -7,7 +7,7 @@
* @module tristatecheckbox
*
*/
import { InputHTMLAttributes, VNode } from 'vue';
import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, Nullable, PassThrough } from '../ts-helpers';
@ -58,9 +58,13 @@ export interface TriStateCheckboxPassThroughOptions {
*/
root?: TriStateCheckboxPassThroughOptionType;
/**
* Used to pass attributes to the checkbox box's DOM element.
* Used to pass attributes to the input's DOM element.
*/
checkbox?: TriStateCheckboxPassThroughOptionType;
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.
*/
@ -73,14 +77,6 @@ export interface TriStateCheckboxPassThroughOptions {
* Used to pass attributes to the nullable icon's DOM element.
*/
nullableIcon?: TriStateCheckboxPassThroughOptionType;
/**
* Used to pass attributes to the hidden input wrapper's DOM element.
*/
hiddenInputWrapper?: TriStateCheckboxPassThroughOptionType;
/**
* Used to pass attributes to the hidden input's DOM element.
*/
hiddenInput?: TriStateCheckboxPassThroughOptionType;
/**
* Used to pass attributes to the hidden value label's DOM element.
*/
@ -103,10 +99,7 @@ export interface TriStateCheckboxPassThroughAttributes {
* Defines current inline state in TriStateCheckbox component.
*/
export interface TriStateCheckboxState {
/**
* Focused state as a boolean.
*/
focused: boolean;
[key: string]: any;
}
/**
@ -118,11 +111,6 @@ export interface TriStateCheckboxContext {
* @defaultValue false
*/
active: boolean;
/**
* Current focused state as a boolean.
* @defaultValue false
*/
focused: boolean;
/**
* Current disabled state as a boolean.
* @defaultValue false
@ -144,6 +132,11 @@ export interface TriStateCheckboxProps {
* @defaultValue false
*/
disabled?: boolean | undefined;
/**
* When present, it specifies that an input field is read-only.
* @default false
*/
readonly?: boolean | undefined;
/**
* Index of the element in tabbing order.
*/
@ -153,10 +146,13 @@ export interface TriStateCheckboxProps {
*/
inputId?: string | undefined;
/**
* Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.
* @deprecated since v3.26.0. Use 'pt' property.
* Style class of the input field.
*/
inputProps?: InputHTMLAttributes | undefined;
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.
*/
@ -227,6 +223,21 @@ export interface TriStateCheckboxEmits {
* @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;
}
/**

2
nuxt-vite.config.js
View File

@ -176,6 +176,8 @@ export default {
...ICON_ALIAS,
'primevue/button': path.resolve(__dirname, './components/lib/button/Button.vue'),
'primevue/inputtext': path.resolve(__dirname, './components/lib/inputtext/InputText.vue'),
'primevue/checkbox': path.resolve(__dirname, './components/lib/checkbox/Checkbox.vue'),
'primevue/radiobutton': path.resolve(__dirname, './components/lib/radiobutton/RadioButton.vue'),
'primevue/dialog': path.resolve(__dirname, './components/lib/dialog/Dialog.vue'),
'primevue/menu': path.resolve(__dirname, './components/lib/menu/Menu.vue'),
'primevue/tieredmenu': path.resolve(__dirname, './components/lib/tieredmenu/TieredMenu.vue'),