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

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

@ -1,5 +1,5 @@
<template> <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 <input
:id="inputId" :id="inputId"
type="checkbox" type="checkbox"

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

@ -12,9 +12,11 @@
import { VNode } from 'vue'; import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent'; import { ComponentHooks } from '../basecomponent';
import { ButtonPassThroughOptions } from '../button'; import { ButtonPassThroughOptions } from '../button';
import { CheckboxPassThroughOptionType } from '../checkbox';
import { DataTablePassThroughOptions } from '../datatable'; import { DataTablePassThroughOptions } from '../datatable';
import { DropdownPassThroughOptionType } from '../dropdown'; import { DropdownPassThroughOptionType } from '../dropdown';
import { PassThroughOptions } from '../passthrough'; import { PassThroughOptions } from '../passthrough';
import { RadioButtonPassThroughOptionType } from '../radiobutton';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
import { VirtualScrollerLoaderOptions } from '../virtualscroller'; import { VirtualScrollerLoaderOptions } from '../virtualscroller';
@ -156,18 +158,10 @@ export interface ColumnPassThroughOptions {
* Used to pass attributes to the sort badge's DOM element. * Used to pass attributes to the sort badge's DOM element.
*/ */
sortBadge?: ColumnPassThroughOptionType; 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. * Used to pass attributes to the header checkbox's DOM element.
*/ */
headerCheckbox?: ColumnPassThroughOptionType; headerCheckbox?: CheckboxPassThroughOptionType;
/**
* Used to pass attributes to the header checkbox icon's DOM element.
*/
headerCheckboxIcon?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the column filter's DOM element. * 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. * Used to pass attributes to the column title's DOM element.
*/ */
columnTitle?: ColumnPassThroughOptionType; 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. * Used to pass attributes to the radiobutton's DOM element.
*/ */
radiobutton?: ColumnPassThroughOptionType; rowRadioButton?: RadioButtonPassThroughOptionType;
/**
* 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;
/** /**
* Used to pass attributes to the checkbox's DOM element. * Used to pass attributes to the checkbox's DOM element.
*/ */
checkbox?: ColumnPassThroughOptionType; rowCheckbox?: CheckboxPassThroughOptionType;
/**
* Used to pass attributes to the checkbox icon's DOM element.
*/
checkboxIcon?: ColumnPassThroughOptionType;
/** /**
* Used to pass attributes to the rowtoggler's DOM element. * 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. * Used to pass attributes to the body cell content's DOM element.
*/ */
bodyCellContent?: ColumnPassThroughOptionType; 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. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

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

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

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

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

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

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

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

@ -297,23 +297,6 @@ const classes = {
headerTitle: 'p-column-title', headerTitle: 'p-column-title',
sortIcon: 'p-sortable-column-icon', sortIcon: 'p-sortable-column-icon',
sortBadge: 'p-sortable-column-badge', 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
columnFilter: ({ props }) => [ columnFilter: ({ props }) => [
'p-column-filter p-fluid', 'p-column-filter p-fluid',
@ -413,38 +396,6 @@ const classes = {
rowEditorSaveIcon: 'p-row-editor-save-icon', rowEditorSaveIcon: 'p-row-editor-save-icon',
rowEditorCancelButton: 'p-row-editor-cancel p-link', rowEditorCancelButton: 'p-row-editor-cancel p-link',
rowEditorCancelIcon: 'p-row-editor-cancel-icon', 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 //tablefooter
tfoot: 'p-datatable-tfoot', tfoot: 'p-datatable-tfoot',
//footercell //footercell

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

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

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

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

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

@ -148,21 +148,6 @@ const classes = {
} }
], ],
header: 'p-multiselect-header', 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', filterContainer: 'p-multiselect-filter-container',
filterInput: 'p-multiselect-filter p-inputtext p-component', filterInput: 'p-multiselect-filter p-inputtext p-component',
filterIcon: 'p-multiselect-filter-icon', filterIcon: 'p-multiselect-filter-icon',
@ -179,9 +164,6 @@ const classes = {
'p-disabled': instance.isOptionDisabled(option) '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' emptyMessage: 'p-multiselect-empty-message'
}; };

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

@ -7,7 +7,6 @@
* @module radiobutton * @module radiobutton
* *
*/ */
import { InputHTMLAttributes } from 'vue';
import { ComponentHooks } from '../basecomponent'; import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough'; import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -30,6 +29,10 @@ export interface RadioButtonPassThroughMethodOptions {
* Defines current inline state. * Defines current inline state.
*/ */
state: RadioButtonState; state: RadioButtonState;
/**
* Defines current options.
*/
context: RadioButtonContext;
/** /**
* Defines valid attributes. * Defines valid attributes.
*/ */
@ -57,18 +60,14 @@ export interface RadioButtonPassThroughOptions {
* Used to pass attributes to the input's DOM element. * Used to pass attributes to the input's DOM element.
*/ */
input?: RadioButtonPassThroughOptionType; input?: RadioButtonPassThroughOptionType;
/**
* Used to pass attributes to the box's DOM element.
*/
box?: RadioButtonPassThroughOptionType;
/** /**
* Used to pass attributes to the icon's DOM element. * Used to pass attributes to the icon's DOM element.
*/ */
icon?: RadioButtonPassThroughOptionType; 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. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}
@ -87,11 +86,7 @@ export interface RadioButtonPassThroughAttributes {
* Defines current inline state in RadioButton component. * Defines current inline state in RadioButton component.
*/ */
export interface RadioButtonState { export interface RadioButtonState {
/** [key: string]: any;
* Current focused state as a boolean.
* @defaultValue false
*/
focused: boolean;
} }
/** /**
@ -115,6 +110,15 @@ export interface RadioButtonProps {
* @defaultValue false * @defaultValue false
*/ */
disabled?: boolean | undefined; 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. * Identifier of the underlying input element.
*/ */
@ -127,10 +131,6 @@ export interface RadioButtonProps {
* Style class of the input field. * Style class of the input field.
*/ */
inputClass?: string | object | undefined; 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. * 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; 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 {} export interface RadioButtonSlots {}
/** /**
@ -167,16 +183,21 @@ export interface RadioButtonEmits {
* @param {*} value - New value. * @param {*} value - New value.
*/ */
'update:modelValue'(value: any): void; '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. * Callback to invoke on radio button value change.
* @param {Event} event - Browser event. * @param {Event} event - Browser event.
*/ */
change(event: Event): void; 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> <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 <input
:id="inputId" :id="inputId"
type="radio" type="radio"

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

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

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

@ -7,7 +7,7 @@
* @module togglebutton * @module togglebutton
* *
*/ */
import { InputHTMLAttributes, VNode } from 'vue'; import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent'; import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough'; import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers'; import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@ -57,6 +57,10 @@ export interface ToggleButtonPassThroughOptions {
* Used to pass attributes to the root's DOM element. * Used to pass attributes to the root's DOM element.
*/ */
root?: ToggleButtonPassThroughOptionType; root?: ToggleButtonPassThroughOptionType;
/**
* Used to pass attributes to the input's DOM element.
*/
input?: ToggleButtonPassThroughOptionType;
/** /**
* Used to pass attributes to the icon's DOM element. * 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. * Used to pass attributes to the label's DOM element.
*/ */
label?: ToggleButtonPassThroughOptionType; 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. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}
@ -91,10 +87,7 @@ export interface ToggleButtonPassThroughAttributes {
* Defines current inline state in ToggleButton component. * Defines current inline state in ToggleButton component.
*/ */
export interface ToggleButtonState { export interface ToggleButtonState {
/** [key: string]: any;
* Focused state as a boolean.
*/
focused: boolean;
} }
/** /**
@ -102,20 +95,15 @@ export interface ToggleButtonState {
*/ */
export interface ToggleButtonContext { export interface ToggleButtonContext {
/** /**
* Current focused state as a boolean. * Current highlighted state as a boolean.
* @defaultValue false * @defaultValue false
*/ */
focused: boolean; active: boolean;
/** /**
* Current disabled state as a boolean. * Current disabled state as a boolean.
* @defaultValue false * @defaultValue false
*/ */
disabled: boolean; disabled: boolean;
/**
* Current highlighted state as a boolean.
* @defaultValue false
*/
highlighted: boolean;
} }
/** /**
@ -157,6 +145,11 @@ export interface ToggleButtonProps {
* @defaultValue false * @defaultValue false
*/ */
disabled?: boolean | undefined; 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. * Index of the element in tabbing order.
*/ */
@ -173,10 +166,6 @@ export interface ToggleButtonProps {
* Inline style of the input field. * Inline style of the input field.
*/ */
inputStyle?: object | undefined; 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. * 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. * Used to pass attributes to the toggler icon's DOM element.
*/ */
togglerIcon?: TreePassThroughOptionType<T>; 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. * Used to pass attributes to the checkbox's DOM element.
*/ */
checkbox?: TreePassThroughOptionType<T>; nodeCheckbox?: TreePassThroughOptionType<T>;
/**
* Used to pass attributes to the checkbox icon's DOM element.
*/
checkboxIcon?: TreePassThroughOptionType<T>;
/** /**
* Used to pass attributes to the node icon's DOM element. * 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')" /> <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
</template> </template>
</button> </button>
<div v-if="checkboxMode" :class="cx('checkboxContainer')" aria-hidden="true" v-bind="getPTOptions('checkboxContainer')"> <Checkbox v-if="checkboxMode" :modelValue="checked" :binary="true" :class="cx('nodeCheckbox')" :pt="getPTOptions('nodeCheckbox')" :data-p-checked="checked" :data-p-partialchecked="partialChecked">
<div :class="cx('checkbox')" role="checkbox" v-bind="getPTOptions('checkbox')" :data-p-checked="checked" :data-p-partialchecked="partialChecked"> <template #icon="slotProps">
<component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" :class="cx('checkboxIcon')" /> <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="cx('checkboxIcon')" v-bind="getPTOptions('checkboxIcon')" /> <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="slotProps.class" v-bind="getPTOptions('nodeCheckbox.icon')" />
</div> </template>
</div> </Checkbox>
<span :class="[cx('nodeIcon'), node.icon]" v-bind="getPTOptions('nodeIcon')"></span> <span :class="[cx('nodeIcon'), node.icon]" v-bind="getPTOptions('nodeIcon')"></span>
<span :class="cx('label')" v-bind="getPTOptions('label')" @keydown.stop> <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" /> <component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" />
@ -59,6 +59,7 @@
<script> <script>
import BaseComponent from 'primevue/basecomponent'; import BaseComponent from 'primevue/basecomponent';
import Checkbox from 'primevue/checkbox';
import CheckIcon from 'primevue/icons/check'; import CheckIcon from 'primevue/icons/check';
import ChevronDownIcon from 'primevue/icons/chevrondown'; import ChevronDownIcon from 'primevue/icons/chevrondown';
import ChevronRightIcon from 'primevue/icons/chevronright'; import ChevronRightIcon from 'primevue/icons/chevronright';
@ -441,11 +442,12 @@ export default {
} }
}, },
components: { components: {
ChevronDownIcon: ChevronDownIcon, Checkbox,
ChevronRightIcon: ChevronRightIcon, ChevronDownIcon,
CheckIcon: CheckIcon, ChevronRightIcon,
MinusIcon: MinusIcon, CheckIcon,
SpinnerIcon: SpinnerIcon MinusIcon,
SpinnerIcon
}, },
directives: { directives: {
ripple: Ripple ripple: Ripple

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

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

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

@ -235,21 +235,12 @@ const classes = {
], ],
rowToggler: 'p-treetable-toggler p-link', rowToggler: 'p-treetable-toggler p-link',
rowTogglerIcon: 'p-tree-toggler-icon', rowTogglerIcon: 'p-tree-toggler-icon',
checkboxWrapper: ({ instance }) => [ rowCheckbox: ({ instance }) => [
'p-checkbox p-treetable-checkbox p-component', '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 'p-indeterminate': instance.partialChecked
} }
], ],
checkboxicon: 'p-checkbox-icon',
//treetable //treetable
emptyMessage: 'p-treetable-emptymessage', emptyMessage: 'p-treetable-emptymessage',
tfoot: 'p-treetable-tfoot', tfoot: 'p-treetable-tfoot',

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

@ -7,7 +7,7 @@
* @module tristatecheckbox * @module tristatecheckbox
* *
*/ */
import { InputHTMLAttributes, VNode } from 'vue'; import { VNode } from 'vue';
import { ComponentHooks } from '../basecomponent'; import { ComponentHooks } from '../basecomponent';
import { PassThroughOptions } from '../passthrough'; import { PassThroughOptions } from '../passthrough';
import { ClassComponent, GlobalComponentConstructor, Nullable, PassThrough } from '../ts-helpers'; import { ClassComponent, GlobalComponentConstructor, Nullable, PassThrough } from '../ts-helpers';
@ -58,9 +58,13 @@ export interface TriStateCheckboxPassThroughOptions {
*/ */
root?: TriStateCheckboxPassThroughOptionType; 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. * 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. * Used to pass attributes to the nullable icon's DOM element.
*/ */
nullableIcon?: TriStateCheckboxPassThroughOptionType; 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. * 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. * Defines current inline state in TriStateCheckbox component.
*/ */
export interface TriStateCheckboxState { export interface TriStateCheckboxState {
/** [key: string]: any;
* Focused state as a boolean.
*/
focused: boolean;
} }
/** /**
@ -118,11 +111,6 @@ export interface TriStateCheckboxContext {
* @defaultValue false * @defaultValue false
*/ */
active: boolean; active: boolean;
/**
* Current focused state as a boolean.
* @defaultValue false
*/
focused: boolean;
/** /**
* Current disabled state as a boolean. * Current disabled state as a boolean.
* @defaultValue false * @defaultValue false
@ -144,6 +132,11 @@ export interface TriStateCheckboxProps {
* @defaultValue false * @defaultValue false
*/ */
disabled?: boolean | undefined; 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. * Index of the element in tabbing order.
*/ */
@ -153,10 +146,13 @@ export interface TriStateCheckboxProps {
*/ */
inputId?: string | undefined; inputId?: string | undefined;
/** /**
* Used to pass all properties of the HTMLInputElement to the focusable input element inside the component. * Style class of the input field.
* @deprecated since v3.26.0. Use 'pt' property.
*/ */
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. * 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. * @param {boolean|null|undefined} value - New value.
*/ */
'update:modelValue'(value: Nullable<boolean>): void; '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, ...ICON_ALIAS,
'primevue/button': path.resolve(__dirname, './components/lib/button/Button.vue'), 'primevue/button': path.resolve(__dirname, './components/lib/button/Button.vue'),
'primevue/inputtext': path.resolve(__dirname, './components/lib/inputtext/InputText.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/dialog': path.resolve(__dirname, './components/lib/dialog/Dialog.vue'),
'primevue/menu': path.resolve(__dirname, './components/lib/menu/Menu.vue'), 'primevue/menu': path.resolve(__dirname, './components/lib/menu/Menu.vue'),
'primevue/tieredmenu': path.resolve(__dirname, './components/lib/tieredmenu/TieredMenu.vue'), 'primevue/tieredmenu': path.resolve(__dirname, './components/lib/tieredmenu/TieredMenu.vue'),