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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/7064/merge
Cagatay Civici 2025-01-14 14:59:29 +03:00
parent e427f85a6b d406c26559
commit d4c6dbfc1f
58 changed files with 590 additions and 737 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/showcase/components/layout/designer/editor/DesignTokenField.vue
View File

@ -47,7 +47,7 @@
</template>
<script>
import { UniqueComponentId } from '@primevue/core/utils';
import { uuid } from '@primeuix/utils';
import { $dt } from '@primevue/themes';
export default {
@ -85,7 +85,7 @@ export default {
};
},
created() {
this.id = 'dt_field_' + UniqueComponentId();
this.id = uuid('dt_field_');
},
methods: {
onOptionSelect(event) {

10
apps/showcase/doc/common/apidoc/index.json
View File

@ -13463,7 +13463,7 @@
"optional": true,
"readonly": false,
"type": "boolean",
"default": "true",
"default": "false",
"description": "Displays a button to clear the column filtering."
},
{
@ -23073,14 +23073,6 @@
"default": "body",
"description": "A valid query selector or an HTMLElement to specify where the overlay gets attached."
},
{
"name": "id",
"optional": true,
"readonly": false,
"type": "string",
"default": "",
"description": "Identifier of the element."
},
{
"name": "inputId",
"optional": true,

2
apps/showcase/rollup.config.js
View File

@ -273,7 +273,7 @@ function addPackageJson() {
"*.vue"
],
"peerDependencies": {
"vue": "^3.0.0"
"vue": "^3.5.0"
},
"engines": {
"node": ">=12.11.0"

6
packages/core/package.json
View File

@ -18,6 +18,7 @@
"types": "./src/index.d.ts",
"exports": {
"./api": "./src/api/Api.js",
"./useid": "./src/useid/UseId.js",
"./base/style": "./src/base/style/BaseStyle.js",
"./base": "./src/base/Base.js",
"./basecomponent/style": "./src/basecomponent/style/BaseComponentStyle.js",
@ -27,6 +28,7 @@
"./baseinput": "./src/baseinput/BaseInput.vue",
"./config": "./src/config/PrimeVue.js",
"./service": "./src/service/PrimeVueService.js",
"./useattrselector": "./src/useattrselector/UseAttrSelector.js",
"./usestyle": "./src/usestyle/UseStyle.js",
"./utils": "./src/utils/Utils.js"
},
@ -62,9 +64,9 @@
"@primeuix/utils": "catalog:"
},
"peerDependencies": {
"vue": "^3.3.0"
"vue": "^3.5.0"
},
"engines": {
"node": ">=12.11.0"
}
}
}

25
packages/core/src/basecomponent/BaseComponent.vue
View File

@ -1,10 +1,10 @@
<script>
import { Theme, ThemeService } from '@primeuix/styled';
import { findSingle, isClient } from '@primeuix/utils/dom';
import { findSingle, isElement } from '@primeuix/utils/dom';
import { getKeyValue, isArray, isFunction, isNotEmpty, isString, resolve, toFlatCase } from '@primeuix/utils/object';
import { uuid } from '@primeuix/utils/uuid';
import Base from '@primevue/core/base';
import BaseStyle from '@primevue/core/base/style';
import { useAttrSelector } from '@primevue/core/useattrselector';
import { mergeProps } from 'vue';
import BaseComponentStyle from './style/BaseComponentStyle';
@ -62,6 +62,7 @@ export default {
},
scopedStyleEl: undefined,
rootEl: undefined,
uid: undefined,
$attrSelector: undefined,
beforeCreate() {
const _usept = this.pt?.['_usept'];
@ -75,17 +76,18 @@ export default {
const valueInConfig = _useptInConfig ? this.$primevue?.config?.pt?.value : this.$primevue?.config?.pt;
(valueInConfig || originalValueInConfig)?.[this.$.type.name]?.hooks?.['onBeforeCreate']?.();
this.$attrSelector = uuid('pc');
this.$attrSelector = useAttrSelector();
this.uid = this.$attrs.id || this.$attrSelector.replace('pc', 'pv_id_');
},
created() {
this._hook('onCreated');
},
beforeMount() {
// @todo - improve performance
this.rootEl = findSingle(this.$el, `[data-pc-name="${toFlatCase(this.$.type.name)}"]`);
// @deprecated - remove in v5
this.rootEl = findSingle(isElement(this.$el) ? this.$el : this.$el?.parentElement, `[${this.$attrSelector}]`);
if (this.rootEl) {
this.$attrSelector && !this.rootEl.hasAttribute(this.$attrSelector) && this.rootEl.setAttribute(this.$attrSelector, '');
this.rootEl.$pc = { name: this.$.type.name, attrSelector: this.$attrSelector, ...this.$params };
}
@ -245,7 +247,7 @@ export default {
...(key === 'root' && {
[`${datasetPrefix}name`]: toFlatCase(isExtended ? this.pt?.['data-pc-section'] : this.$.type.name),
...(isExtended && { [`${datasetPrefix}extend`]: toFlatCase(this.$.type.name) }),
...(isClient() && { [`${this.$attrSelector}`]: '' })
[`${this.$attrSelector}`]: ''
}),
[`${datasetPrefix}section`]: toFlatCase(key)
}
@ -301,7 +303,11 @@ export default {
},
ptmi(key = '', params = {}) {
// inheritAttrs:true
return mergeProps(this.$_attrsWithoutPT, this.ptm(key, params));
const attrs = mergeProps(this.$_attrsWithoutPT, this.ptm(key, params));
attrs?.hasOwnProperty('id') && (attrs.id ??= this.$id);
return attrs;
},
ptmo(obj = {}, key = '', params = {}) {
return this._getPTValue(obj, key, { instance: this, ...params }, false);
@ -330,6 +336,9 @@ export default {
isUnstyled() {
return this.unstyled !== undefined ? this.unstyled : this.$primevueConfig?.unstyled;
},
$id() {
return this.$attrs.id || this.uid;
},
$inProps() {
const nodePropKeys = Object.keys(this.$.vnode?.props || {});

2
packages/core/src/index.d.ts vendored
View File

@ -52,5 +52,7 @@ export * from '@primevue/core/baseinput';
export * from '@primevue/core/config';
export { default as PrimeVue } from '@primevue/core/config';
export * from '@primevue/core/service';
export * from '@primevue/core/useattrselector';
export * from '@primevue/core/useid';
export * from '@primevue/core/usestyle';
export * from '@primevue/core/utils';

6
packages/core/src/index.js
View File

@ -25,6 +25,12 @@ export { default as PrimeVue } from '@primevue/core/config';
// PrimeVueService
export { default as PrimeVueService } from '@primevue/core/service';
// UseAttrSelector
export * from '@primevue/core/useattrselector';
// UseId
export * from '@primevue/core/useid';
// UseStyle
export * from '@primevue/core/usestyle';

1
packages/core/src/useattrselector/UseAttrSelector.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export declare function useAttrSelector(prefix?: string): string;

7
packages/core/src/useattrselector/UseAttrSelector.js Normal file
View File

@ -0,0 +1,7 @@
import { useId } from 'vue';
export function useAttrSelector(prefix = 'pc') {
const idx = useId();
return `${prefix}${idx.replace('v-', '').replaceAll('-', '_')}`;
}

5
packages/core/src/useattrselector/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./UseAttrSelector.js",
"module": "./UseAttrSelector.js",
"types": "./UseAttrSelector.d.ts"
}

1
packages/core/src/useid/UseId.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export declare function useId(initialValue?: string): string;

8
packages/core/src/useid/UseId.js Normal file
View File

@ -0,0 +1,8 @@
import { ref, toValue, useId as vueUseId } from 'vue';
export function useId(initialValue) {
const idx = vueUseId();
const id = ref(initialValue);
return toValue(id) || `pv_id${toValue(idx)?.replaceAll(/v-|-/g, '_')}`;
}

5
packages/core/src/useid/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./UseId.js",
"module": "./UseId.js",
"types": "./UseId.d.ts"
}

12
packages/icons/src/filterfill/FilterFillIcon.d.ts vendored Normal file
View File

@ -0,0 +1,12 @@
import type { DefineComponent } from '@primevue/core';
import type { Icon } from '@primevue/icons/baseicon';
declare class FilterFillIcon extends Icon {}
declare module 'vue' {
export interface GlobalComponents {
FilterFillIcon: DefineComponent<FilterFillIcon>;
}
}
export default FilterFillIcon;

14
packages/icons/src/filterfill/FilterFillIcon.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 1.25H1.5L7 8.75V16.75H11V8.75L16.5 1.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="currentColor" />
</svg>
</template>
<script>
import BaseIcon from '@primevue/icons/baseicon';
export default {
name: 'FilterIcon',
extends: BaseIcon
};
</script>

11
packages/icons/src/filterfill/package.json Normal file
View File

@ -0,0 +1,11 @@
{
"main": "./FilterFillIcon.vue",
"module": "./FilterFillIcon.vue",
"types": "./FilterFillIcon.d.ts",
"browser": {
"./sfc": "./FilterFillIcon.vue"
},
"sideEffects": [
"*.vue"
]
}

4
packages/icons/src/index.d.ts vendored
View File

@ -98,6 +98,10 @@ export { default as EyeSlashIcon } from '@primevue/icons/eyeslash';
export * from '@primevue/icons/filter';
export { default as FilterIcon } from '@primevue/icons/filter';
// FilterFillIcon
export * from '@primevue/icons/filterfill';
export { default as FilterFillIcon } from '@primevue/icons/filterfill';
// FilterSlashIcon
export * from '@primevue/icons/filterslash';
export { default as FilterSlashIcon } from '@primevue/icons/filterslash';

4
packages/icons/src/index.js
View File

@ -98,6 +98,10 @@ export { default as EyeSlashIcon } from '@primevue/icons/eyeslash';
export * from '@primevue/icons/filter';
export { default as FilterIcon } from '@primevue/icons/filter';
// FilterFillIcon
export * from '@primevue/icons/filterfill';
export { default as FilterFillIcon } from '@primevue/icons/filterfill';
// FilterSlashIcon
export * from '@primevue/icons/filterslash';
export { default as FilterSlashIcon } from '@primevue/icons/filterslash';

2
packages/primevue/rollup.config.mjs
View File

@ -54,6 +54,8 @@ const ALIAS_ENTRIES = [
{ find: '@primevue/core/baseinput', replacement: path.resolve(__dirname, '../core/src/baseinput/BaseInput.vue') },
{ find: '@primevue/core/config', replacement: path.resolve(__dirname, '../core/src/config/PrimeVue.js') },
{ find: '@primevue/core/service', replacement: path.resolve(__dirname, '../core/src/service/PrimeVueService.js') },
{ find: '@primevue/core/useattrselector', replacement: path.resolve(__dirname, '../core/src/useattrselector/UseAttrSelector.js') },
{ find: '@primevue/core/useid', replacement: path.resolve(__dirname, '../core/src/useid/UseId.js') },
{ find: '@primevue/core/usestyle', replacement: path.resolve(__dirname, '../core/src/usestyle/UseStyle.js') },
{ find: '@primevue/core/utils', replacement: path.resolve(__dirname, '../core/src/utils/Utils.js') },
{ find: '@primevue/core', replacement: path.resolve(__dirname, '../core/src/index.js') },

8
packages/primevue/src/accordion/Accordion.vue
View File

@ -28,7 +28,6 @@
</template>
<script>
import { UniqueComponentId } from '@primevue/core/utils';
import ChevronRightIcon from '@primevue/icons/chevronright';
import ChevronUpIcon from '@primevue/icons/chevronup';
import AccordionContent from 'primevue/accordioncontent';
@ -44,14 +43,10 @@ export default {
emits: ['update:value', 'update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
data() {
return {
id: this.$attrs.id,
d_value: this.value
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
value(newValue) {
this.d_value = newValue;
},
@ -64,9 +59,6 @@ export default {
}
}
},
mounted() {
this.id = this.id || UniqueComponentId();
},
methods: {
isItemActive(value) {
return this.multiple ? this.d_value?.includes(value) : this.d_value === value;

25
packages/primevue/src/autocomplete/AutoComplete.vue
View File

@ -49,7 +49,7 @@
<li
v-for="(option, i) of d_value"
:key="`${i}_${getOptionLabel(option)}`"
:id="id + '_multiple_option_' + i"
:id="$id + '_multiple_option_' + i"
:class="cx('chipItem', { i })"
role="option"
:aria-label="getOptionLabel(option)"
@ -84,7 +84,7 @@
aria-haspopup="listbox"
aria-autocomplete="list"
:aria-expanded="overlayVisible"
:aria-controls="id + '_list'"
:aria-controls="$id + '_list'"
:aria-activedescendant="focused ? focusedOptionId : undefined"
:aria-invalid="invalid || undefined"
@focus="onFocus"
@ -128,11 +128,11 @@
<div :class="cx('listContainer')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('listContainer')">
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" :aria-label="listAriaLabel" v-bind="ptm('list')">
<ul :ref="(el) => listRef(el, contentRef)" :id="$id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" :aria-label="listAriaLabel" v-bind="ptm('list')">
<template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
<li
v-if="isOptionGroup(option)"
:id="id + '_' + getOptionIndex(i, getItemOptions)"
:id="$id + '_' + getOptionIndex(i, getItemOptions)"
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('optionGroup')"
role="option"
@ -142,7 +142,7 @@
</li>
<li
v-else
:id="id + '_' + getOptionIndex(i, getItemOptions)"
:id="$id + '_' + getOptionIndex(i, getItemOptions)"
v-ripple
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('option', { option, i, getItemOptions })"
@ -186,7 +186,7 @@
import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
import { equals, findLastIndex, isEmpty, isNotEmpty, resolveFieldData } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import ChevronDownIcon from '@primevue/icons/chevrondown';
import SpinnerIcon from '@primevue/icons/spinner';
import Chip from 'primevue/chip';
@ -215,7 +215,6 @@ export default {
startRangeIndex: -1,
data() {
return {
id: this.$attrs.id,
clicked: false,
focused: false,
focusedOptionIndex: -1,
@ -225,9 +224,6 @@ export default {
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
suggestions() {
if (this.searching) {
this.show();
@ -240,7 +236,6 @@ export default {
}
},
mounted() {
this.id = this.id || UniqueComponentId();
this.autoUpdateModel();
},
updated() {
@ -930,7 +925,7 @@ export default {
},
scrollInView(index = -1) {
this.$nextTick(() => {
const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
const id = index !== -1 ? `${this.$id}_${index}` : this.focusedOptionId;
const element = findSingle(this.list, `li[id="${id}"]`);
if (element) {
@ -1044,10 +1039,10 @@ export default {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined;
},
focusedOptionId() {
return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
return this.focusedOptionIndex !== -1 ? `${this.$id}_${this.focusedOptionIndex}` : null;
},
focusedMultipleOptionId() {
return this.focusedMultipleOptionIndex !== -1 ? `${this.id}_multiple_option_${this.focusedMultipleOptionIndex}` : null;
return this.focusedMultipleOptionIndex !== -1 ? `${this.$id}_multiple_option_${this.focusedMultipleOptionIndex}` : null;
},
ariaSetSize() {
return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;
@ -1056,7 +1051,7 @@ export default {
return !this.virtualScrollerOptions;
},
panelId() {
return this.id + '_panel';
return this.$id + '_panel';
}
},
components: {

17
packages/primevue/src/cascadeselect/CascadeSelect.vue
View File

@ -16,7 +16,7 @@
:aria-labelledby="ariaLabelledby"
aria-haspopup="tree"
:aria-expanded="overlayVisible"
:aria-controls="id + '_tree'"
:aria-controls="$id + '_tree'"
:aria-activedescendant="focused ? focusedOptionId : undefined"
:aria-invalid="invalid || undefined"
@focus="onFocus"
@ -59,10 +59,10 @@
<slot name="header" :value="d_value" :options="options" />
<div :class="cx('listContainer')" v-bind="ptm('listContainer')">
<CascadeSelectSub
:id="id + '_tree'"
:id="$id + '_tree'"
role="tree"
aria-orientation="horizontal"
:selectId="id"
:selectId="$id"
:focusedOptionId="focused ? focusedOptionId : undefined"
:options="processedOptions"
:activeOptionPath="activeOptionPath"
@ -96,7 +96,7 @@
import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
import { equals, findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, isString, resolveFieldData } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import AngleRightIcon from '@primevue/icons/angleright';
import ChevronDownIcon from '@primevue/icons/chevrondown';
import SpinnerIcon from '@primevue/icons/spinner';
@ -120,7 +120,6 @@ export default {
searchValue: null,
data() {
return {
id: this.$attrs.id,
clicked: false,
focused: false,
focusedOptionInfo: { index: -1, level: 0, parentKey: '' },
@ -133,15 +132,11 @@ export default {
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
options() {
this.autoUpdateModel();
}
},
mounted() {
this.id = this.id || UniqueComponentId();
this.autoUpdateModel();
this.bindMatchMediaListener();
},
@ -758,7 +753,7 @@ export default {
},
scrollInView(index = -1) {
this.$nextTick(() => {
const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
const id = index !== -1 ? `${this.$id}_${index}` : this.focusedOptionId;
const element = findSingle(this.list, `li[id="${id}"]`);
if (element) {
@ -853,7 +848,7 @@ export default {
return this.$filled ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
},
focusedOptionId() {
return this.focusedOptionInfo.index !== -1 ? `${this.id}${isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null;
return this.focusedOptionInfo.index !== -1 ? `${this.$id}${isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null;
},
isClearIconVisible() {
return this.showClear && this.d_value != null && isNotEmpty(this.options);

2
packages/primevue/src/column/BaseColumn.vue
View File

@ -80,7 +80,7 @@ export default {
},
showClearButton: {
type: Boolean,
default: true
default: false
},
showApplyButton: {
type: Boolean,

2
packages/primevue/src/column/Column.d.ts vendored
View File

@ -431,7 +431,7 @@ export interface ColumnProps {
showFilterOperator?: boolean | undefined;
/**
* Displays a button to clear the column filtering.
* @defaultValue true
* @defaultValue false
*/
showClearButton?: boolean | undefined;
/**

14
packages/primevue/src/contextmenu/ContextMenu.vue
View File

@ -4,14 +4,14 @@
<div v-if="visible" :ref="containerRef" :class="cx('root')" v-bind="ptmi('root')">
<ContextMenuSub
:ref="listRef"
:id="id + '_list'"
:id="$id + '_list'"
:class="cx('rootList')"
role="menubar"
:root="true"
:tabindex="tabindex"
aria-orientation="vertical"
:aria-activedescendant="focused ? focusedItemIdx : undefined"
:menuId="id"
:menuId="$id"
:focusedItemId="focused ? focusedItemIdx : undefined"
:items="processedItems"
:templates="$slots"
@ -38,7 +38,6 @@
import { addStyle, findSingle, focus, getHiddenElementOuterHeight, getHiddenElementOuterWidth, getViewport, isTouchDevice } from '@primeuix/utils/dom';
import { findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolve } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
import { UniqueComponentId } from '@primevue/core/utils';
import Portal from 'primevue/portal';
import BaseContextMenu from './BaseContextMenu.vue';
import ContextMenuSub from './ContextMenuSub.vue';
@ -59,7 +58,6 @@ export default {
list: null,
data() {
return {
id: this.$attrs.id,
focused: false,
focusedItemInfo: { index: -1, level: 0, parentKey: '' },
activeItemPath: [],
@ -70,9 +68,6 @@ export default {
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
activeItemPath(newPath) {
if (isNotEmpty(newPath)) {
this.bindOutsideClickListener();
@ -84,7 +79,6 @@ export default {
}
},
mounted() {
this.id = this.id || UniqueComponentId();
this.bindMatchMediaListener();
if (this.global) {
@ -579,7 +573,7 @@ export default {
}
},
scrollInView(index = -1) {
const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemIdx;
const id = index !== -1 ? `${this.$id}_${index}` : this.focusedItemIdx;
const element = findSingle(this.list, `li[id="${id}"]`);
if (element) {
@ -624,7 +618,7 @@ export default {
return processedItem ? processedItem.items : this.processedItems;
},
focusedItemIdx() {
return this.focusedItemInfo.index !== -1 ? `${this.id}${isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
return this.focusedItemInfo.index !== -1 ? `${this.$id}${isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
}
},
components: {

22
packages/primevue/src/datatable/ColumnFilter.vue
View File

@ -17,7 +17,7 @@
v-bind="{ ...getColumnPT('pcColumnFilterButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
>
<template #icon="slotProps">
<component :is="filterIconTemplate || 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" />
<component :is="filterIconTemplate || hasRowFilter() ? 'FilterFillIcon' : 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" />
</template>
</Button>
<Button
@ -164,12 +164,13 @@
</template>
<script>
import { absolutePosition, addStyle, focus, getAttribute, isTouchDevice } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import { FilterOperator } from '@primevue/core/api';
import BaseComponent from '@primevue/core/basecomponent';
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { getAttribute, focus, addStyle, absolutePosition, isTouchDevice } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import FilterIcon from '@primevue/icons/filter';
import FilterFillIcon from '@primevue/icons/filterfill';
import FilterSlashIcon from '@primevue/icons/filterslash';
import PlusIcon from '@primevue/icons/plus';
import TrashIcon from '@primevue/icons/trash';
@ -212,7 +213,7 @@ export default {
},
showClearButton: {
type: Boolean,
default: true
default: false
},
showApplyButton: {
type: Boolean,
@ -298,17 +299,11 @@ export default {
},
data() {
return {
id: this.$attrs.id,
overlayVisible: false,
defaultMatchMode: null,
defaultOperator: null
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
}
},
overlay: null,
selfClick: false,
overlayEventListener: null,
@ -324,8 +319,6 @@ export default {
}
},
mounted() {
this.id = this.id || UniqueComponentId();
if (this.filters && this.filters[this.field]) {
let fieldFilters = this.filters[this.field];
@ -647,7 +640,7 @@ export default {
return this.showMenu && (this.display === 'row' ? this.type !== 'boolean' : true);
},
overlayId() {
return this.id + '_overlay';
return this.$id + '_overlay';
},
matchModes() {
return (
@ -726,6 +719,7 @@ export default {
Button,
Portal,
FilterSlashIcon,
FilterFillIcon,
FilterIcon,
TrashIcon,
PlusIcon

13
packages/primevue/src/datatable/TableBody.vue
View File

@ -36,8 +36,8 @@
:isVirtualScrollerDisabled="isVirtualScrollerDisabled"
:editingMeta="editingMeta"
:rowGroupHeaderStyle="rowGroupHeaderStyle"
:expandedRowId="expandedRowId"
:nameAttributeSelector="nameAttributeSelector"
:expandedRowId="$id"
:nameAttributeSelector="$attrSelector"
@rowgroup-toggle="$emit('rowgroup-toggle', $event)"
@row-click="$emit('row-click', $event)"
@row-dblclick="$emit('row-dblclick', $event)"
@ -70,10 +70,9 @@
</template>
<script>
import BaseComponent from '@primevue/core/basecomponent';
import { UniqueComponentId } from '@primevue/core/utils';
import { getOuterHeight } from '@primeuix/utils/dom';
import { resolveFieldData } from '@primeuix/utils/object';
import BaseComponent from '@primevue/core/basecomponent';
import BodyRow from './BodyRow.vue';
export default {
@ -290,12 +289,6 @@ export default {
scrollable: this.$parentInstance?.$parentInstance?.scrollable
}
};
},
expandedRowId() {
return UniqueComponentId();
},
nameAttributeSelector() {
return UniqueComponentId();
}
},
components: {

4
packages/primevue/src/datepicker/BaseDatePicker.vue
View File

@ -167,10 +167,6 @@ export default {
type: String,
default: null
},
id: {
type: String,
default: null
},
inputId: {
type: String,
default: null

4
packages/primevue/src/datepicker/DatePicker.d.ts vendored
View File

@ -736,10 +736,6 @@ export interface DatePickerProps {
* @defaultValue body
*/
appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
/**
* Identifier of the element.
*/
id?: string | undefined;
/**
* Identifier of the underlying input element.
*/

11
packages/primevue/src/datepicker/DatePicker.vue
View File

@ -1,5 +1,5 @@
<template>
<span ref="container" :id="d_id" :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
<span ref="container" :id="$id" :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
<InputText
v-if="!inline"
:ref="inputRef"
@ -537,7 +537,7 @@
import { absolutePosition, addStyle, find, findSingle, getAttribute, getFocusableElements, getIndex, getOuterWidth, isTouchDevice, relativePosition, setAttribute } from '@primeuix/utils/dom';
import { localeComparator } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import CalendarIcon from '@primevue/icons/calendar';
import ChevronDownIcon from '@primevue/icons/chevrondown';
import ChevronLeftIcon from '@primevue/icons/chevronleft';
@ -573,7 +573,6 @@ export default {
typeUpdate: false,
data() {
return {
d_id: this.id,
currentMonth: null,
currentYear: null,
currentHour: null,
@ -588,9 +587,6 @@ export default {
};
},
watch: {
id: function (newValue) {
this.d_id = newValue || UniqueComponentId();
},
modelValue(newValue) {
this.updateCurrentMetaData();
@ -639,7 +635,6 @@ export default {
this.updateCurrentMetaData();
},
mounted() {
this.d_id = this.d_id || UniqueComponentId();
this.createResponsiveStyle();
this.bindMatchMediaListener();
@ -2961,7 +2956,7 @@ export default {
return this.numberOfMonths > 1 || this.disabled;
},
panelId() {
return this.d_id + '_panel';
return this.$id + '_panel';
}
},
components: {

11
packages/primevue/src/dialog/Dialog.vue
View File

@ -64,7 +64,6 @@
<script>
import { addClass, addStyle, blockBodyScroll, focus, getOuterHeight, getOuterWidth, getViewport, setAttribute, unblockBodyScroll } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import { UniqueComponentId } from '@primevue/core/utils';
import TimesIcon from '@primevue/icons/times';
import WindowMaximizeIcon from '@primevue/icons/windowmaximize';
import WindowMinimizeIcon from '@primevue/icons/windowminimize';
@ -87,7 +86,6 @@ export default {
},
data() {
return {
id: this.$attrs.id,
containerVisible: this.visible,
maximized: false,
focusableMax: null,
@ -95,11 +93,6 @@ export default {
target: null
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
}
},
documentKeydownListener: null,
container: null,
mask: null,
@ -133,8 +126,6 @@ export default {
this.mask = null;
},
mounted() {
this.id = this.id || UniqueComponentId();
if (this.breakpoints) {
this.createStyle();
}
@ -409,7 +400,7 @@ export default {
return this.maximized ? (this.minimizeIcon ? 'span' : 'WindowMinimizeIcon') : this.maximizeIcon ? 'span' : 'WindowMaximizeIcon';
},
ariaLabelledById() {
return this.header != null || this.$attrs['aria-labelledby'] !== null ? this.id + '_header' : null;
return this.header != null || this.$attrs['aria-labelledby'] !== null ? this.$id + '_header' : null;
},
closeAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;

17
packages/primevue/src/dock/DockSub.vue
View File

@ -2,7 +2,7 @@
<div :class="cx('listContainer')" v-bind="ptm('listContainer')">
<ul
ref="list"
:id="id"
:id="idx"
:class="cx('list')"
role="menu"
:aria-orientation="position === 'bottom' || position === 'top' ? 'horizontal' : 'vertical'"
@ -59,7 +59,6 @@
import { find, findSingle } from '@primeuix/utils/dom';
import { resolve } from '@primeuix/utils/object';
import BaseComponent from '@primevue/core/basecomponent';
import { UniqueComponentId } from '@primevue/core/utils';
import Ripple from 'primevue/ripple';
import Tooltip from 'primevue/tooltip';
import { mergeProps } from 'vue';
@ -102,23 +101,14 @@ export default {
},
data() {
return {
id: this.menuId,
currentIndex: -3,
focused: false,
focusedOptionIndex: -1
};
},
watch: {
menuId(newValue) {
this.id = newValue || UniqueComponentId();
}
},
mounted() {
this.id = this.id || UniqueComponentId();
},
methods: {
getItemId(index) {
return `${this.id}_${index}`;
return `${this.idx}_${index}`;
},
getItemProp(processedItem, name) {
return processedItem && processedItem.item ? resolve(processedItem.item[name]) : undefined;
@ -277,6 +267,9 @@ export default {
computed: {
focusedOptionId() {
return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
},
idx() {
return this.menuId || this.$id;
}
},
directives: {

4
packages/primevue/src/dynamicdialog/DynamicDialog.vue
View File

@ -13,7 +13,7 @@
</template>
<script>
import { UniqueComponentId } from '@primevue/core/utils';
import { uuid } from '@primeuix/utils';
import Dialog from 'primevue/dialog';
import DynamicDialogEventBus from 'primevue/dynamicdialogeventbus';
import BaseDynamicDialog from './BaseDynamicDialog.vue';
@ -32,7 +32,7 @@ export default {
currentInstance: null,
mounted() {
this.openListener = ({ instance }) => {
const key = UniqueComponentId() + '_dynamic_dialog';
const key = uuid() + '_dynamic_dialog';
instance.visible = true;
instance.key = key;

16
packages/primevue/src/fieldset/Fieldset.vue
View File

@ -2,13 +2,13 @@
<fieldset :class="cx('root')" v-bind="ptmi('root')">
<legend :class="cx('legend')" v-bind="ptm('legend')">
<slot name="legend" :toggleCallback="toggle">
<span v-if="!toggleable" :id="id + '_header'" :class="cx('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span>
<span v-if="!toggleable" :id="$id + '_header'" :class="cx('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span>
<button
v-if="toggleable"
:id="id + '_header'"
:id="$id + '_header'"
v-ripple
type="button"
:aria-controls="id + '_content'"
:aria-controls="$id + '_content'"
:aria-expanded="!d_collapsed"
:aria-label="buttonAriaLabel"
:class="cx('toggleButton')"
@ -25,7 +25,7 @@
</slot>
</legend>
<transition name="p-toggleable-content" v-bind="ptm('transition')">
<div v-show="!d_collapsed" :id="id + '_content'" :class="cx('contentContainer')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('contentContainer')">
<div v-show="!d_collapsed" :id="$id + '_content'" :class="cx('contentContainer')" role="region" :aria-labelledby="$id + '_header'" v-bind="ptm('contentContainer')">
<div :class="cx('content')" v-bind="ptm('content')">
<slot></slot>
</div>
@ -35,7 +35,6 @@
</template>
<script>
import { UniqueComponentId } from '@primevue/core/utils';
import MinusIcon from '@primevue/icons/minus';
import PlusIcon from '@primevue/icons/plus';
import Ripple from 'primevue/ripple';
@ -48,21 +47,14 @@ export default {
emits: ['update:collapsed', 'toggle'],
data() {
return {
id: this.$attrs.id,
d_collapsed: this.collapsed
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
collapsed(newValue) {
this.d_collapsed = newValue;
}
},
mounted() {
this.id = this.id || UniqueComponentId();
},
methods: {
toggle(event) {
this.d_collapsed = !this.d_collapsed;

14
packages/primevue/src/galleria/GalleriaContent.vue
View File

@ -1,7 +1,7 @@
<template>
<div
v-if="$attrs.value && $attrs.value.length > 0"
:id="id"
:id="$id"
role="region"
:class="[cx('root'), $attrs.containerClass]"
:style="$attrs.containerStyle"
@ -17,7 +17,7 @@
</div>
<div :class="cx('content')" :aria-live="$attrs.autoPlay ? 'polite' : 'off'" v-bind="getPTOptions('content')">
<GalleriaItem
:id="id"
:id="$id"
v-model:activeIndex="activeIndex"
v-model:slideShowActive="slideShowActive"
:value="$attrs.value"
@ -37,7 +37,7 @@
v-if="$attrs.showThumbnails"
v-model:activeIndex="activeIndex"
v-model:slideShowActive="slideShowActive"
:containerId="id"
:containerId="$id"
:value="$attrs.value"
:templates="$attrs.templates"
:numVisible="numVisible"
@ -61,7 +61,6 @@
<script>
import BaseComponent from '@primevue/core/basecomponent';
import { UniqueComponentId } from '@primevue/core/utils';
import TimesIcon from '@primevue/icons/times';
import Ripple from 'primevue/ripple';
import GalleriaItem from './GalleriaItem.vue';
@ -76,16 +75,12 @@ export default {
emits: ['activeitem-change', 'mask-hide'],
data() {
return {
id: this.$attrs.id || UniqueComponentId(),
activeIndex: this.$attrs.activeIndex,
numVisible: this.$attrs.numVisible,
slideShowActive: false
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
'$attrs.value': function (newVal) {
if (newVal && newVal.length < this.numVisible) {
this.numVisible = newVal.length;
@ -101,9 +96,6 @@ export default {
newVal ? this.startSlideShow() : this.stopSlideShow();
}
},
mounted() {
this.id = this.id || UniqueComponentId();
},
updated() {
this.$emit('activeitem-change', this.activeIndex);
},

12
packages/primevue/src/inputchips/InputChips.vue
View File

@ -18,7 +18,7 @@
<li
v-for="(val, i) of modelValue"
:key="`${i}_${val}`"
:id="id + '_inputchips_item_' + i"
:id="$id + '_inputchips_item_' + i"
role="option"
:class="cx('chipItem', { index: i })"
:aria-label="val"
@ -60,7 +60,6 @@
</template>
<script>
import { UniqueComponentId } from '@primevue/core/utils';
import Chip from 'primevue/chip';
import BaseInputChips from './BaseInputChips.vue';
@ -71,20 +70,13 @@ export default {
emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
data() {
return {
id: this.$attrs.id,
inputValue: null,
focused: false,
focusedIndex: null
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
}
},
mounted() {
console.warn('Deprecated since v4. Use AutoComplete component instead with its typeahead property.');
this.id = this.id || UniqueComponentId();
},
methods: {
onWrapperClick() {
@ -261,7 +253,7 @@ export default {
return this.max && this.modelValue && this.max === this.modelValue.length;
},
focusedOptionId() {
return this.focusedIndex !== null ? `${this.id}_inputchips_item_${this.focusedIndex}` : null;
return this.focusedIndex !== null ? `${this.$id}_inputchips_item_${this.focusedIndex}` : null;
}
},
components: {

20
packages/primevue/src/listbox/Listbox.vue
View File

@ -1,5 +1,5 @@
<template>
<div :id="id" :class="cx('root')" @focusout="onFocusout" v-bind="ptmi('root')">
<div :id="$id" :class="cx('root')" @focusout="onFocusout" v-bind="ptmi('root')">
<span
ref="firstHiddenFocusableElement"
role="presentation"
@ -25,7 +25,7 @@
autocomplete="off"
:disabled="disabled"
:unstyled="unstyled"
:aria-owns="id + '_list'"
:aria-owns="$id + '_list'"
:aria-activedescendant="focusedOptionId"
:tabindex="!disabled && !focused ? tabindex : -1"
@input="onFilterChange"
@ -49,7 +49,7 @@
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
<ul
:ref="(el) => listRef(el, contentRef)"
:id="id + '_list'"
:id="$id + '_list'"
:class="[cx('list'), styleClass]"
:style="contentStyle"
:tabindex="-1"
@ -65,12 +65,12 @@
v-bind="ptm('list')"
>
<template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
<li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('optionGroup')" role="option" v-bind="ptm('optionGroup')">
<li v-if="isOptionGroup(option)" :id="$id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('optionGroup')" role="option" v-bind="ptm('optionGroup')">
<slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
</li>
<li
v-else
:id="id + '_' + getOptionIndex(i, getItemOptions)"
:id="$id + '_' + getOptionIndex(i, getItemOptions)"
v-ripple
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('option', { option, index: i, getItemOptions })"
@ -135,7 +135,6 @@
import { findSingle, focus, getFirstFocusableElement, isElement } from '@primeuix/utils/dom';
import { equals, findLastIndex, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
import { FilterService } from '@primevue/core/api';
import { UniqueComponentId } from '@primevue/core/utils';
import BlankIcon from '@primevue/icons/blank';
import CheckIcon from '@primevue/icons/check';
import SearchIcon from '@primevue/icons/search';
@ -159,22 +158,17 @@ export default {
searchValue: '',
data() {
return {
id: this.$attrs.id,
filterValue: null,
focused: false,
focusedOptionIndex: -1
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
options() {
this.autoUpdateModel();
}
},
mounted() {
this.id = this.id || UniqueComponentId();
this.autoUpdateModel();
},
methods: {
@ -683,7 +677,7 @@ export default {
},
scrollInView(index = -1) {
this.$nextTick(() => {
const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
const id = index !== -1 ? `${this.$id}_${index}` : this.focusedOptionId;
const element = findSingle(this.list, `li[id="${id}"]`);
if (element) {
@ -764,7 +758,7 @@ export default {
return this.$filled ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.d_value.length : '1') : this.emptySelectionMessageText;
},
focusedOptionId() {
return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
return this.focusedOptionIndex !== -1 ? `${this.$id}_${this.focusedOptionIndex}` : null;
},
ariaSetSize() {
return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;

20
packages/primevue/src/megamenu/MegaMenu.vue
View File

@ -1,10 +1,10 @@
<template>
<div :ref="containerRef" :id="id" :class="cx('root')" v-bind="ptmi('root')">
<div :ref="containerRef" :id="$id" :class="cx('root')" v-bind="ptmi('root')">
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot>
</div>
<!--TODO: menubutton deprecated since v4.0. Use button-->
<slot :id="id" :name="$slots.button ? 'button' : 'menubutton'" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
<slot :id="$id" :name="$slots.button ? 'button' : 'menubutton'" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
<a
v-if="model && model.length > 0"
ref="menubutton"
@ -13,7 +13,7 @@
:class="cx('button')"
:aria-haspopup="model.length && model.length > 0 ? true : false"
:aria-expanded="mobileActive"
:aria-controls="id"
:aria-controls="$id"
:aria-label="$primevue.config.locale.aria?.navigation"
@click="menuButtonClick($event)"
@keydown="menuButtonKeydown($event)"
@ -27,7 +27,7 @@
</slot>
<MegaMenuSub
:ref="menubarRef"
:id="id + '_list'"
:id="$id + '_list'"
:tabindex="!disabled ? tabindex : -1"
role="menubar"
:aria-label="ariaLabel"
@ -35,7 +35,7 @@
:aria-disabled="disabled || undefined"
:aria-orientation="orientation"
:aria-activedescendant="focused ? focusedItemId : undefined"
:menuId="id"
:menuId="$id"
:focusedItemId="focused ? focusedItemId : undefined"
:items="processedItems"
:horizontal="horizontal"
@ -62,7 +62,6 @@
import { findSingle, focus, isTouchDevice } from '@primeuix/utils/dom';
import { findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolve } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
import { UniqueComponentId } from '@primevue/core/utils';
import BarsIcon from '@primevue/icons/bars';
import BaseMegaMenu from './BaseMegaMenu.vue';
import MegaMenuSub from './MegaMenuSub.vue';
@ -81,7 +80,6 @@ export default {
searchValue: null,
data() {
return {
id: this.$attrs.id,
mobileActive: false,
focused: false,
focusedItemInfo: { index: -1, key: '', parentKey: '' },
@ -92,9 +90,6 @@ export default {
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
activeItem(newItem) {
if (isNotEmpty(newItem)) {
this.bindOutsideClickListener();
@ -106,7 +101,6 @@ export default {
}
},
mounted() {
this.id = this.id || UniqueComponentId();
this.bindMatchMediaListener();
},
beforeUnmount() {
@ -606,7 +600,7 @@ export default {
this.scrollInView();
},
scrollInView(index = -1) {
const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId;
const id = index !== -1 ? `${this.$id}_${index}` : this.focusedItemId;
let element;
if (id === null && this.queryMatches) {
@ -675,7 +669,7 @@ export default {
return this.orientation === 'vertical';
},
focusedItemId() {
return isNotEmpty(this.focusedItemInfo.key) ? `${this.id}_${this.focusedItemInfo.key}` : null;
return isNotEmpty(this.focusedItemInfo.key) ? `${this.$id}_${this.focusedItemInfo.key}` : null;
}
},
components: {

22
packages/primevue/src/menu/Menu.vue
View File

@ -1,13 +1,13 @@
<template>
<Portal :appendTo="appendTo" :disabled="!popup">
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="ptmi('root')">
<div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="$id" :class="cx('root')" @click="onOverlayClick" v-bind="ptmi('root')">
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot>
</div>
<ul
:ref="listRef"
:id="id + '_list'"
:id="$id + '_list'"
:class="cx('list')"
role="menu"
:tabindex="tabindex"
@ -21,14 +21,14 @@
>
<template v-for="(item, i) of model" :key="label(item) + i.toString()">
<template v-if="item.items && visible(item) && !item.separator">
<li v-if="item.items" :id="id + '_' + i" :class="[cx('submenuLabel'), item.class]" role="none" v-bind="ptm('submenuLabel')">
<li v-if="item.items" :id="$id + '_' + i" :class="[cx('submenuLabel'), item.class]" role="none" v-bind="ptm('submenuLabel')">
<!--TODO: submenuheader deprecated since v4.0. Use submenulabel-->
<slot :name="$slots.submenulabel ? 'submenulabel' : 'submenuheader'" :item="item">{{ label(item) }}</slot>
</li>
<template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
<PVMenuitem
v-if="visible(child) && !child.separator"
:id="id + '_' + i + '_' + j"
:id="$id + '_' + i + '_' + j"
:item="child"
:templates="$slots"
:focusedOptionId="focusedOptionId"
@ -44,7 +44,7 @@
<PVMenuitem
v-else
:key="label(item) + i.toString()"
:id="id + '_' + i"
:id="$id + '_' + i"
:item="item"
:index="i"
:templates="$slots"
@ -65,9 +65,9 @@
</template>
<script>
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { focus, find, findSingle, addStyle, absolutePosition, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
import { absolutePosition, addStyle, find, findSingle, focus, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import BaseMenu from './BaseMenu.vue';
@ -80,18 +80,12 @@ export default {
emits: ['show', 'hide', 'focus', 'blur'],
data() {
return {
id: this.$attrs.id,
overlayVisible: false,
focused: false,
focusedOptionIndex: -1,
selectedOptionIndex: -1
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
}
},
target: null,
outsideClickListener: null,
scrollHandler: null,
@ -99,8 +93,6 @@ export default {
container: null,
list: null,
mounted() {
this.id = this.id || UniqueComponentId();
if (!this.popup) {
this.bindResizeListener();
this.bindOutsideClickListener();

22
packages/primevue/src/menubar/Menubar.vue
View File

@ -3,7 +3,7 @@
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot>
</div>
<slot :id="id" :name="$slots.button ? 'button' : 'menubutton'" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
<slot :id="$id" :name="$slots.button ? 'button' : 'menubutton'" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
<!-- TODO: menubutton deprecated since v4.0-->
<a
v-if="model && model.length > 0"
@ -13,7 +13,7 @@
:class="cx('button')"
:aria-haspopup="model.length && model.length > 0 ? true : false"
:aria-expanded="mobileActive"
:aria-controls="id"
:aria-controls="$id"
:aria-label="$primevue.config.locale.aria?.navigation"
@click="menuButtonClick($event)"
@keydown="menuButtonKeydown($event)"
@ -27,7 +27,7 @@
</slot>
<MenubarSub
:ref="menubarRef"
:id="id + '_list'"
:id="$id + '_list'"
role="menubar"
:items="processedItems"
:templates="$slots"
@ -35,7 +35,7 @@
:mobileActive="mobileActive"
tabindex="0"
:aria-activedescendant="focused ? focusedItemId : undefined"
:menuId="id"
:menuId="$id"
:focusedItemId="focused ? focusedItemId : undefined"
:activeItemPath="activeItemPath"
:level="0"
@ -57,9 +57,8 @@
</template>
<script>
import { UniqueComponentId } from '@primevue/core/utils';
import { focus, isTouchDevice, findSingle } from '@primeuix/utils/dom';
import { isNotEmpty, resolve, isPrintableCharacter, isEmpty, findLastIndex } from '@primeuix/utils/object';
import { findSingle, focus, isTouchDevice } from '@primeuix/utils/dom';
import { findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolve } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
import BarsIcon from '@primevue/icons/bars';
import BaseMenubar from './BaseMenubar.vue';
@ -73,7 +72,6 @@ export default {
matchMediaListener: null,
data() {
return {
id: this.$attrs.id,
mobileActive: false,
focused: false,
focusedItemInfo: { index: -1, level: 0, parentKey: '' },
@ -84,9 +82,6 @@ export default {
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
activeItemPath(newPath) {
if (isNotEmpty(newPath)) {
this.bindOutsideClickListener();
@ -101,7 +96,6 @@ export default {
container: null,
menubar: null,
mounted() {
this.id = this.id || UniqueComponentId();
this.bindMatchMediaListener();
},
beforeUnmount() {
@ -590,7 +584,7 @@ export default {
}
},
scrollInView(index = -1) {
const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId;
const id = index !== -1 ? `${this.$id}_${index}` : this.focusedItemId;
const element = findSingle(this.menubar, `li[id="${id}"]`);
if (element) {
@ -635,7 +629,7 @@ export default {
return processedItem ? processedItem.items : this.processedItems;
},
focusedItemId() {
return this.focusedItemInfo.index !== -1 ? `${this.id}${isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
return this.focusedItemInfo.index !== -1 ? `${this.$id}${isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
}
},
components: {

21
packages/primevue/src/multiselect/MultiSelect.vue
View File

@ -14,7 +14,7 @@
:aria-labelledby="ariaLabelledby"
aria-haspopup="listbox"
:aria-expanded="overlayVisible"
:aria-controls="id + '_list'"
:aria-controls="$id + '_list'"
:aria-activedescendant="focused ? focusedOptionId : undefined"
:aria-invalid="invalid || undefined"
@focus="onFocus"
@ -108,7 +108,7 @@
:unstyled="unstyled"
role="searchbox"
autocomplete="off"
:aria-owns="id + '_list'"
:aria-owns="$id + '_list'"
:aria-activedescendant="focusedOptionId"
@keydown="onFilterKeyDown"
@blur="onFilterBlur"
@ -130,11 +130,11 @@
<div :class="cx('listContainer')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('listContainer')">
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="true" :aria-label="listAriaLabel" v-bind="ptm('list')">
<ul :ref="(el) => listRef(el, contentRef)" :id="$id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="true" :aria-label="listAriaLabel" v-bind="ptm('list')">
<template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
<li
v-if="isOptionGroup(option)"
:id="id + '_' + getOptionIndex(i, getItemOptions)"
:id="$id + '_' + getOptionIndex(i, getItemOptions)"
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('optionGroup')"
role="option"
@ -144,7 +144,7 @@
</li>
<li
v-else
:id="id + '_' + getOptionIndex(i, getItemOptions)"
:id="$id + '_' + getOptionIndex(i, getItemOptions)"
v-ripple
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('option', { option, index: i, getItemOptions })"
@ -227,7 +227,7 @@ import { absolutePosition, addStyle, findSingle, focus, getFirstFocusableElement
import { equals, findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
import { FilterService } from '@primevue/core/api';
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import CheckIcon from '@primevue/icons/check';
import ChevronDownIcon from '@primevue/icons/chevrondown';
import SearchIcon from '@primevue/icons/search';
@ -264,7 +264,6 @@ export default {
selectOnFocus: false,
data() {
return {
id: this.$attrs.id,
clicked: false,
focused: false,
focusedOptionIndex: -1,
@ -273,15 +272,11 @@ export default {
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
options() {
this.autoUpdateModel();
}
},
mounted() {
this.id = this.id || UniqueComponentId();
this.autoUpdateModel();
},
beforeUnmount() {
@ -989,7 +984,7 @@ export default {
},
scrollInView(index = -1) {
this.$nextTick(() => {
const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
const id = index !== -1 ? `${this.$id}_${index}` : this.focusedOptionId;
const element = findSingle(this.list, `li[id="${id}"]`);
if (element) {
@ -1124,7 +1119,7 @@ export default {
return this.$filled ? this.selectionMessageText.replaceAll('{0}', this.d_value.length) : this.emptySelectionMessageText;
},
focusedOptionId() {
return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
return this.focusedOptionIndex !== -1 ? `${this.$id}_${this.focusedOptionIndex}` : null;
},
ariaSetSize() {
return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;

11
packages/primevue/src/orderlist/OrderList.vue
View File

@ -34,7 +34,7 @@
</div>
<Listbox
ref="listbox"
:id="id"
:id="$id"
:modelValue="d_selection"
:options="modelValue"
multiple
@ -69,7 +69,6 @@
<script>
import { find, findSingle, scrollInView, setAttribute } from '@primeuix/utils/dom';
import { findIndexInList, isNotEmpty } from '@primeuix/utils/object';
import { UniqueComponentId } from '@primevue/core/utils';
import AngleDoubleDownIcon from '@primevue/icons/angledoubledown';
import AngleDoubleUpIcon from '@primevue/icons/angledoubleup';
import AngleDownIcon from '@primevue/icons/angledown';
@ -90,15 +89,9 @@ export default {
list: null,
data() {
return {
id: this.$attrs.id,
d_selection: this.selection
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
}
},
beforeUnmount() {
this.destroyStyle();
},
@ -109,8 +102,6 @@ export default {
}
},
mounted() {
this.id = this.id || UniqueComponentId();
if (this.responsive) {
this.createStyle();
}

18
packages/primevue/src/panel/Panel.vue
View File

@ -1,17 +1,17 @@
<template>
<div :class="cx('root')" v-bind="ptmi('root')">
<div :class="cx('header')" v-bind="ptm('header')">
<slot :id="id + '_header'" name="header" :class="cx('title')">
<span v-if="header" :id="id + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
<slot :id="$id + '_header'" name="header" :class="cx('title')">
<span v-if="header" :id="$id + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
</slot>
<div :class="cx('headerActions')" v-bind="ptm('headerActions')">
<slot name="icons"></slot>
<Button
v-if="toggleable"
:id="id + '_header'"
:id="$id + '_header'"
:class="cx('pcToggleButton')"
:aria-label="buttonAriaLabel"
:aria-controls="id + '_content'"
:aria-controls="$id + '_content'"
:aria-expanded="!d_collapsed"
:unstyled="unstyled"
@click="toggle"
@ -29,7 +29,7 @@
</div>
</div>
<transition name="p-toggleable-content" v-bind="ptm('transition')">
<div v-show="!d_collapsed" :id="id + '_content'" :class="cx('contentContainer')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('contentContainer')">
<div v-show="!d_collapsed" :id="$id + '_content'" :class="cx('contentContainer')" role="region" :aria-labelledby="$id + '_header'" v-bind="ptm('contentContainer')">
<div :class="cx('content')" v-bind="ptm('content')">
<slot></slot>
</div>
@ -42,7 +42,6 @@
</template>
<script>
import { UniqueComponentId } from '@primevue/core/utils';
import MinusIcon from '@primevue/icons/minus';
import PlusIcon from '@primevue/icons/plus';
import Button from 'primevue/button';
@ -56,21 +55,14 @@ export default {
emits: ['update:collapsed', 'toggle'],
data() {
return {
id: this.$attrs.id,
d_collapsed: this.collapsed
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
collapsed(newValue) {
this.d_collapsed = newValue;
}
},
mounted() {
this.id = this.id || UniqueComponentId();
},
methods: {
toggle(event) {
this.d_collapsed = !this.d_collapsed;

14
packages/primevue/src/panelmenu/PanelMenu.vue
View File

@ -1,5 +1,5 @@
<template>
<div :id="id" :class="cx('root')" v-bind="ptmi('root')">
<div :id="$id" :class="cx('root')" v-bind="ptmi('root')">
<template v-for="(item, index) of model" :key="getPanelKey(index)">
<div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="[cx('panel'), getItemProp(item, 'class')]" v-bind="ptm('panel')">
<div
@ -55,7 +55,6 @@
<script>
import { findSingle, focus, getAttribute } from '@primeuix/utils/dom';
import { equals, isNotEmpty, resolve } from '@primeuix/utils/object';
import { UniqueComponentId } from '@primevue/core/utils';
import ChevronDownIcon from '@primevue/icons/chevrondown';
import ChevronRightIcon from '@primevue/icons/chevronright';
import { mergeProps } from 'vue';
@ -69,19 +68,10 @@ export default {
emits: ['update:expandedKeys', 'panel-open', 'panel-close'],
data() {
return {
id: this.$attrs.id,
activeItem: null,
activeItems: []
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
}
},
mounted() {
this.id = this.id || UniqueComponentId();
},
methods: {
getItemProp(item, name) {
return item ? resolve(item[name]) : undefined;
@ -115,7 +105,7 @@ export default {
return isNotEmpty(item.items);
},
getPanelId(index) {
return `${this.id}_${index}`;
return `${this.$id}_${index}`;
},
getPanelKey(index) {
return this.getPanelId(index);

11
packages/primevue/src/password/Password.vue
View File

@ -70,7 +70,7 @@
<script>
import { absolutePosition, addStyle, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import EyeIcon from '@primevue/icons/eye';
import EyeSlashIcon from '@primevue/icons/eyeslash';
import InputText from 'primevue/inputtext';
@ -88,7 +88,6 @@ export default {
},
data() {
return {
id: this.$attrs.id,
overlayVisible: false,
meter: null,
infoText: null,
@ -96,18 +95,12 @@ export default {
unmasked: false
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
}
},
mediumCheckRegExp: null,
strongCheckRegExp: null,
resizeListener: null,
scrollHandler: null,
overlay: null,
mounted() {
this.id = this.id || UniqueComponentId();
this.infoText = this.promptText;
this.mediumCheckRegExp = new RegExp(this.mediumRegex);
this.strongCheckRegExp = new RegExp(this.strongRegex);
@ -321,7 +314,7 @@ export default {
return this.promptLabel || this.$primevue.config.locale.passwordPrompt;
},
overlayUniqueId() {
return this.id + '_overlay';
return this.$id + '_overlay';
}
},
components: {

11
packages/primevue/src/picklist/PickList.vue
View File

@ -168,7 +168,6 @@
<script>
import { find, scrollInView, setAttribute } from '@primeuix/utils/dom';
import { findIndexInList, isEmpty } from '@primeuix/utils/object';
import { UniqueComponentId } from '@primevue/core/utils';
import AngleDoubleDownIcon from '@primevue/icons/angledoubledown';
import AngleDoubleLeftIcon from '@primevue/icons/angledoubleleft';
import AngleDoubleRightIcon from '@primevue/icons/angledoubleright';
@ -194,15 +193,11 @@ export default {
mediaChangeListener: null,
data() {
return {
id: this.$attrs.id,
d_selection: this.selection,
viewChanged: false
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
selection(newValue) {
this.d_selection = newValue;
},
@ -223,8 +218,6 @@ export default {
this.destroyMedia();
},
mounted() {
this.id = this.id || UniqueComponentId();
if (this.responsive) {
this.createStyle();
this.initMedia();
@ -597,10 +590,10 @@ export default {
},
computed: {
idSource() {
return `${this.id}_source`;
return `${this.$id}_source`;
},
idTarget() {
return `${this.id}_target`;
return `${this.$id}_target`;
},
sourceList() {
return this.modelValue && this.modelValue[0] ? this.modelValue[0] : null;

17
packages/primevue/src/rating/Rating.vue
View File

@ -6,7 +6,7 @@
<input
type="radio"
:value="value"
:name="d_name"
:name="namex"
:checked="d_value === value"
:disabled="disabled"
:readonly="readonly"
@ -30,7 +30,6 @@
<script>
import { focus, getFirstFocusableElement } from '@primeuix/utils/dom';
import { UniqueComponentId } from '@primevue/core/utils';
import BanIcon from '@primevue/icons/ban';
import StarIcon from '@primevue/icons/star';
import StarFillIcon from '@primevue/icons/starfill';
@ -43,19 +42,10 @@ export default {
emits: ['change', 'focus', 'blur'],
data() {
return {
d_name: this.name,
focusedOptionIndex: -1,
isFocusVisibleItem: true
};
},
watch: {
name: function (newValue) {
this.d_name = newValue || UniqueComponentId();
}
},
mounted() {
this.d_name = this.d_name || UniqueComponentId();
},
methods: {
getPTOptions(key, value) {
return this.ptm(key, {
@ -104,6 +94,11 @@ export default {
return value === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, value);
}
},
computed: {
namex() {
return this.name || `${this.$attrSelector}_name`;
}
},
components: {
StarFillIcon,
StarIcon,

11
packages/primevue/src/scrollpanel/ScrollPanel.vue
View File

@ -41,7 +41,6 @@
<script>
import { addClass, getHeight, removeClass } from '@primeuix/utils/dom';
import { UniqueComponentId } from '@primevue/core/utils';
import BaseScrollPanel from './BaseScrollPanel.vue';
export default {
@ -63,20 +62,12 @@ export default {
outsideClickListener: null,
data() {
return {
id: this.$attrs.id,
orientation: 'vertical',
lastScrollTop: 0,
lastScrollLeft: 0
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
}
},
mounted() {
this.id = this.id || UniqueComponentId();
if (this.$el.offsetParent) {
this.initialize();
}
@ -378,7 +369,7 @@ export default {
},
computed: {
contentId() {
return this.id + '_content';
return this.$id + '_content';
}
}
};

25
packages/primevue/src/select/Select.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="container" :id="id" :class="cx('root')" @click="onContainerClick" v-bind="ptmi('root')">
<div ref="container" :id="$id" :class="cx('root')" @click="onContainerClick" v-bind="ptmi('root')">
<input
v-if="editable"
ref="focusInput"
@ -17,7 +17,7 @@
:aria-labelledby="ariaLabelledby"
aria-haspopup="listbox"
:aria-expanded="overlayVisible"
:aria-controls="id + '_list'"
:aria-controls="$id + '_list'"
:aria-activedescendant="focused ? focusedOptionId : undefined"
:aria-invalid="invalid || undefined"
@focus="onFocus"
@ -38,7 +38,7 @@
:aria-labelledby="ariaLabelledby"
aria-haspopup="listbox"
:aria-expanded="overlayVisible"
:aria-controls="id + '_list'"
:aria-controls="$id + '_list'"
:aria-activedescendant="focused ? focusedOptionId : undefined"
:aria-invalid="invalid || undefined"
:aria-disabled="disabled"
@ -90,7 +90,7 @@
:unstyled="unstyled"
role="searchbox"
autocomplete="off"
:aria-owns="id + '_list'"
:aria-owns="$id + '_list'"
:aria-activedescendant="focusedOptionId"
@keydown="onFilterKeyDown"
@blur="onFilterBlur"
@ -112,11 +112,11 @@
<div :class="cx('listContainer')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('listContainer')">
<VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
<template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
<ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
<ul :ref="(el) => listRef(el, contentRef)" :id="$id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
<template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
<li
v-if="isOptionGroup(option)"
:id="id + '_' + getOptionIndex(i, getItemOptions)"
:id="$id + '_' + getOptionIndex(i, getItemOptions)"
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('optionGroup')"
role="option"
@ -128,7 +128,7 @@
</li>
<li
v-else
:id="id + '_' + getOptionIndex(i, getItemOptions)"
:id="$id + '_' + getOptionIndex(i, getItemOptions)"
v-ripple
:class="cx('option', { option, focusedOption: getOptionIndex(i, getItemOptions) })"
:style="{ height: itemSize ? itemSize + 'px' : undefined }"
@ -196,7 +196,7 @@ import { absolutePosition, addStyle, findSingle, focus, getFirstFocusableElement
import { equals, findLastIndex, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
import { FilterService } from '@primevue/core/api';
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import BlankIcon from '@primevue/icons/blank';
import CheckIcon from '@primevue/icons/check';
import ChevronDownIcon from '@primevue/icons/chevrondown';
@ -229,7 +229,6 @@ export default {
isModelValueChanged: false,
data() {
return {
id: this.$attrs.id,
clicked: false,
focused: false,
focusedOptionIndex: -1,
@ -238,9 +237,6 @@ export default {
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
modelValue() {
this.isModelValueChanged = true;
},
@ -249,7 +245,6 @@ export default {
}
},
mounted() {
this.id = this.id || UniqueComponentId();
this.autoUpdateModel();
this.bindLabelClickListener();
},
@ -893,7 +888,7 @@ export default {
},
scrollInView(index = -1) {
this.$nextTick(() => {
const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
const id = index !== -1 ? `${this.$id}_${index}` : this.focusedOptionId;
const element = findSingle(this.list, `li[id="${id}"]`);
if (element) {
@ -1003,7 +998,7 @@ export default {
return this.$filled ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
},
focusedOptionId() {
return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
return this.focusedOptionIndex !== -1 ? `${this.$id}_${this.focusedOptionIndex}` : null;
},
ariaSetSize() {
return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;

23
packages/primevue/src/speeddial/SpeedDial.vue
View File

@ -6,7 +6,7 @@
:disabled="disabled"
:aria-expanded="d_visible"
:aria-haspopup="true"
:aria-controls="id + '_list'"
:aria-controls="$id + '_list'"
:aria-label="ariaLabel"
:aria-labelledby="ariaLabelledby"
:unstyled="unstyled"
@ -23,16 +23,16 @@
</template>
</Button>
</slot>
<ul :ref="listRef" :id="id + '_list'" :class="cx('list')" :style="sx('list')" role="menu" tabindex="-1" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" v-bind="ptm('list')">
<ul :ref="listRef" :id="$id + '_list'" :class="cx('list')" :style="sx('list')" role="menu" tabindex="-1" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" v-bind="ptm('list')">
<template v-for="(item, index) of model" :key="index">
<li
v-if="isItemVisible(item)"
:id="`${id}_${index}`"
:class="cx('item', { id: `${id}_${index}` })"
:id="`${$id}_${index}`"
:class="cx('item', { id: `${$id}_${index}` })"
:style="getItemStyle(index)"
role="none"
:data-p-active="isItemActive(`${id}_${index}`)"
v-bind="getPTOptions(`${id}_${index}`, 'item')"
:data-p-active="isItemActive(`${$id}_${index}`)"
v-bind="getPTOptions(`${$id}_${index}`, 'item')"
>
<template v-if="!$slots.item">
<Button
@ -45,11 +45,11 @@
:unstyled="unstyled"
@click="onItemClick($event, item)"
v-bind="actionButtonProps"
:pt="getPTOptions(`${id}_${index}`, 'pcAction')"
:pt="getPTOptions(`${$id}_${index}`, 'pcAction')"
>
<template v-if="item.icon" #icon="slotProps">
<slot name="itemicon" :item="item" :class="slotProps.class">
<span :class="[item.icon, slotProps.class]" v-bind="getPTOptions(`${id}_${index}`, 'actionIcon')"></span>
<span :class="[item.icon, slotProps.class]" v-bind="getPTOptions(`${$id}_${index}`, 'actionIcon')"></span>
</slot>
</template>
</Button>
@ -67,7 +67,6 @@
<script>
import { $dt } from '@primeuix/styled';
import { find, findSingle, focus, hasClass } from '@primeuix/utils/dom';
import { UniqueComponentId } from '@primevue/core/utils';
import PlusIcon from '@primevue/icons/plus';
import Button from 'primevue/button';
import Ripple from 'primevue/ripple';
@ -87,7 +86,6 @@ export default {
list: null,
data() {
return {
id: this.$attrs.id,
d_visible: this.visible,
isItemClicked: false,
focused: false,
@ -95,16 +93,11 @@ export default {
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
visible(newValue) {
this.d_visible = newValue;
}
},
mounted() {
this.id = this.id || UniqueComponentId();
if (this.type !== 'linear') {
const button = findSingle(this.container, '[data-pc-name="pcbutton"]');
const firstItem = findSingle(this.list, '[data-pc-section="item"]');

13
packages/primevue/src/splitbutton/SplitButton.vue
View File

@ -33,7 +33,7 @@
:disabled="disabled"
aria-haspopup="true"
:aria-expanded="isExpanded"
:aria-controls="id + '_overlay'"
:aria-controls="$id + '_overlay'"
@click="onDropdownButtonClick"
@keydown="onDropdownKeydown"
:severity="severity"
@ -51,7 +51,7 @@
</slot>
</template>
</PVSButton>
<PVSMenu ref="menu" :id="id + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" :unstyled="unstyled" :pt="ptm('pcMenu')">
<PVSMenu ref="menu" :id="$id + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" :unstyled="unstyled" :pt="ptm('pcMenu')">
<template v-if="$slots.menuitemicon" #itemicon="slotProps">
<slot name="menuitemicon" :item="slotProps.item" :class="slotProps.class" />
</template>
@ -64,7 +64,6 @@
<script>
import { isEmpty } from '@primeuix/utils/object';
import { UniqueComponentId } from '@primevue/core/utils';
import ChevronDownIcon from '@primevue/icons/chevrondown';
import Button from 'primevue/button';
import TieredMenu from 'primevue/tieredmenu';
@ -80,18 +79,10 @@ export default {
},
data() {
return {
id: this.$attrs.id,
isExpanded: false
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
}
},
mounted() {
this.id = this.id || UniqueComponentId();
this.$watch('$refs.menu.visible', (newValue) => {
this.isExpanded = newValue;
});

8
packages/primevue/src/stepper/Stepper.vue
View File

@ -7,7 +7,6 @@
</template>
<script>
import { UniqueComponentId } from '@primevue/core/utils';
import BaseStepper from './BaseStepper.vue';
export default {
@ -17,21 +16,14 @@ export default {
emits: ['update:value'],
data() {
return {
id: this.$attrs.id,
d_value: this.value
};
},
watch: {
'$attrs.id'(newValue) {
this.id = newValue || UniqueComponentId();
},
value(newValue) {
this.d_value = newValue;
}
},
mounted() {
this.id = this.id || UniqueComponentId();
},
methods: {
updateValue(newValue) {
if (this.d_value !== newValue) {

8
packages/primevue/src/tabs/Tabs.vue
View File

@ -5,7 +5,6 @@
</template>
<script>
import { UniqueComponentId } from '@primevue/core/utils';
import BaseTabs from './BaseTabs.vue';
export default {
@ -15,21 +14,14 @@ export default {
emits: ['update:value'],
data() {
return {
id: this.$attrs.id,
d_value: this.value
};
},
watch: {
'$attrs.id'(newValue) {
this.id = newValue || UniqueComponentId();
},
value(newValue) {
this.d_value = newValue;
}
},
mounted() {
this.id = this.id || UniqueComponentId();
},
methods: {
updateValue(newValue) {
if (this.d_value !== newValue) {

12
packages/primevue/src/tabview/TabView.vue
View File

@ -91,8 +91,7 @@
</template>
<script>
import { UniqueComponentId } from '@primevue/core/utils';
import { getWidth, getAttribute, findSingle, focus, getOffset } from '@primeuix/utils/dom';
import { findSingle, focus, getAttribute, getOffset, getWidth } from '@primeuix/utils/dom';
import ChevronLeftIcon from '@primevue/icons/chevronleft';
import ChevronRightIcon from '@primevue/icons/chevronright';
import Ripple from 'primevue/ripple';
@ -106,16 +105,12 @@ export default {
emits: ['update:activeIndex', 'tab-change', 'tab-click'],
data() {
return {
id: this.$attrs.id,
d_activeIndex: this.activeIndex,
isPrevButtonDisabled: true,
isNextButtonDisabled: false
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
activeIndex(newValue) {
this.d_activeIndex = newValue;
@ -125,7 +120,6 @@ export default {
mounted() {
console.warn('Deprecated since v4. Use Tabs component instead.');
this.id = this.id || UniqueComponentId();
this.updateInkBar();
this.scrollable && this.updateButtonState();
},
@ -147,10 +141,10 @@ export default {
return this.getTabProp(tab, 'header') || index;
},
getTabHeaderActionId(index) {
return `${this.id}_${index}_header_action`;
return `${this.$id}_${index}_header_action`;
},
getTabContentId(index) {
return `${this.id}_${index}_content`;
return `${this.$id}_${index}_content`;
},
getTabPT(tab, key, index) {
const count = this.tabs.length;

17
packages/primevue/src/tieredmenu/TieredMenu.vue
View File

@ -1,13 +1,13 @@
<template>
<Portal :appendTo="appendTo" :disabled="!popup">
<transition name="p-connected-overlay" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<div v-if="visible" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="ptmi('root')">
<div v-if="visible" :ref="containerRef" :id="$id" :class="cx('root')" @click="onOverlayClick" v-bind="ptmi('root')">
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot>
</div>
<TieredMenuSub
:ref="menubarRef"
:id="id + '_list'"
:id="$id + '_list'"
:class="cx('rootList')"
:tabindex="!disabled ? tabindex : -1"
role="menubar"
@ -16,7 +16,7 @@
:aria-disabled="disabled || undefined"
aria-orientation="vertical"
:aria-activedescendant="focused ? focusedItemId : undefined"
:menuId="id"
:menuId="$id"
:focusedItemId="focused ? focusedItemId : undefined"
:items="processedItems"
:templates="$slots"
@ -45,7 +45,7 @@
import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
import { findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolve } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import BaseTieredMenu from './BaseTieredMenu.vue';
@ -67,7 +67,6 @@ export default {
searchValue: null,
data() {
return {
id: this.$attrs.id,
focused: false,
focusedItemInfo: { index: -1, level: 0, parentKey: '' },
activeItemPath: [],
@ -79,9 +78,6 @@ export default {
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
activeItemPath(newPath) {
if (!this.popup) {
if (isNotEmpty(newPath)) {
@ -95,7 +91,6 @@ export default {
}
},
mounted() {
this.id = this.id || UniqueComponentId();
this.bindMatchMediaListener();
},
beforeUnmount() {
@ -612,7 +607,7 @@ export default {
}
},
scrollInView(index = -1) {
const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId;
const id = index !== -1 ? `${this.$id}_${index}` : this.focusedItemId;
const element = findSingle(this.menubar, `li[id="${id}"]`);
if (element) {
@ -657,7 +652,7 @@ export default {
return processedItem ? processedItem.items : this.processedItems;
},
focusedItemId() {
return this.focusedItemInfo.index !== -1 ? `${this.id}${isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
return this.focusedItemInfo.index !== -1 ? `${this.$id}${isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
}
},
components: {

9
packages/primevue/src/treeselect/TreeSelect.vue
View File

@ -132,7 +132,7 @@
import { absolutePosition, addStyle, find, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
import { isEmpty, isNotEmpty } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import ChevronDownIcon from '@primevue/icons/chevrondown';
import TimesIcon from '@primevue/icons/times';
import Chip from 'primevue/chip';
@ -152,16 +152,12 @@ export default {
},
data() {
return {
id: this.$attrs.id,
focused: false,
overlayVisible: false,
d_expandedKeys: this.expandedKeys || {}
};
},
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
modelValue: {
handler: function () {
if (!this.selfChange) {
@ -200,7 +196,6 @@ export default {
}
},
mounted() {
this.id = this.id || UniqueComponentId();
this.updateTreeState();
},
methods: {
@ -560,7 +555,7 @@ export default {
return !this.options || this.options.length === 0;
},
listId() {
return this.id + '_list';
return this.$id + '_list';
},
hasFluid() {
return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;

3
packages/primevue/src/treetable/BodyCell.vue
View File

@ -10,8 +10,9 @@
</template>
<template v-else>
<component v-if="column.children && column.children.rowtoggleicon" :is="column.children.rowtoggleicon" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
<component v-else-if="templates['nodetoggleicon']" :is="templates['nodetoggleicon']" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
<!-- TODO: Deprecated since v4.0-->
<component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
<component v-else-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('nodeToggleIcon')" v-bind="getColumnPT('nodeToggleIcon')" />
<component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('nodeToggleIcon')" v-bind="getColumnPT('nodeToggleIcon')" />
</template>

686
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff