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

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

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

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

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

6
packages/core/package.json
View File

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

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

@ -1,10 +1,10 @@
<script> <script>
import { Theme, ThemeService } from '@primeuix/styled'; 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 { getKeyValue, isArray, isFunction, isNotEmpty, isString, resolve, toFlatCase } from '@primeuix/utils/object';
import { uuid } from '@primeuix/utils/uuid';
import Base from '@primevue/core/base'; import Base from '@primevue/core/base';
import BaseStyle from '@primevue/core/base/style'; import BaseStyle from '@primevue/core/base/style';
import { useAttrSelector } from '@primevue/core/useattrselector';
import { mergeProps } from 'vue'; import { mergeProps } from 'vue';
import BaseComponentStyle from './style/BaseComponentStyle'; import BaseComponentStyle from './style/BaseComponentStyle';
@ -62,6 +62,7 @@ export default {
}, },
scopedStyleEl: undefined, scopedStyleEl: undefined,
rootEl: undefined, rootEl: undefined,
uid: undefined,
$attrSelector: undefined, $attrSelector: undefined,
beforeCreate() { beforeCreate() {
const _usept = this.pt?.['_usept']; const _usept = this.pt?.['_usept'];
@ -75,17 +76,18 @@ export default {
const valueInConfig = _useptInConfig ? this.$primevue?.config?.pt?.value : this.$primevue?.config?.pt; const valueInConfig = _useptInConfig ? this.$primevue?.config?.pt?.value : this.$primevue?.config?.pt;
(valueInConfig || originalValueInConfig)?.[this.$.type.name]?.hooks?.['onBeforeCreate']?.(); (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() { created() {
this._hook('onCreated'); this._hook('onCreated');
}, },
beforeMount() { beforeMount() {
// @todo - improve performance // @deprecated - remove in v5
this.rootEl = findSingle(this.$el, `[data-pc-name="${toFlatCase(this.$.type.name)}"]`); this.rootEl = findSingle(isElement(this.$el) ? this.$el : this.$el?.parentElement, `[${this.$attrSelector}]`);
if (this.rootEl) { 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 }; this.rootEl.$pc = { name: this.$.type.name, attrSelector: this.$attrSelector, ...this.$params };
} }
@ -245,7 +247,7 @@ export default {
...(key === 'root' && { ...(key === 'root' && {
[`${datasetPrefix}name`]: toFlatCase(isExtended ? this.pt?.['data-pc-section'] : this.$.type.name), [`${datasetPrefix}name`]: toFlatCase(isExtended ? this.pt?.['data-pc-section'] : this.$.type.name),
...(isExtended && { [`${datasetPrefix}extend`]: toFlatCase(this.$.type.name) }), ...(isExtended && { [`${datasetPrefix}extend`]: toFlatCase(this.$.type.name) }),
...(isClient() && { [`${this.$attrSelector}`]: '' }) [`${this.$attrSelector}`]: ''
}), }),
[`${datasetPrefix}section`]: toFlatCase(key) [`${datasetPrefix}section`]: toFlatCase(key)
} }
@ -301,7 +303,11 @@ export default {
}, },
ptmi(key = '', params = {}) { ptmi(key = '', params = {}) {
// inheritAttrs:true // 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 = {}) { ptmo(obj = {}, key = '', params = {}) {
return this._getPTValue(obj, key, { instance: this, ...params }, false); return this._getPTValue(obj, key, { instance: this, ...params }, false);
@ -330,6 +336,9 @@ export default {
isUnstyled() { isUnstyled() {
return this.unstyled !== undefined ? this.unstyled : this.$primevueConfig?.unstyled; return this.unstyled !== undefined ? this.unstyled : this.$primevueConfig?.unstyled;
}, },
$id() {
return this.$attrs.id || this.uid;
},
$inProps() { $inProps() {
const nodePropKeys = Object.keys(this.$.vnode?.props || {}); 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 * from '@primevue/core/config';
export { default as PrimeVue } from '@primevue/core/config'; export { default as PrimeVue } from '@primevue/core/config';
export * from '@primevue/core/service'; export * from '@primevue/core/service';
export * from '@primevue/core/useattrselector';
export * from '@primevue/core/useid';
export * from '@primevue/core/usestyle'; export * from '@primevue/core/usestyle';
export * from '@primevue/core/utils'; 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 // PrimeVueService
export { default as PrimeVueService } from '@primevue/core/service'; export { default as PrimeVueService } from '@primevue/core/service';
// UseAttrSelector
export * from '@primevue/core/useattrselector';
// UseId
export * from '@primevue/core/useid';
// UseStyle // UseStyle
export * from '@primevue/core/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 * from '@primevue/icons/filter';
export { default as FilterIcon } 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 // FilterSlashIcon
export * from '@primevue/icons/filterslash'; export * from '@primevue/icons/filterslash';
export { default as FilterSlashIcon } 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 * from '@primevue/icons/filter';
export { default as FilterIcon } 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 // FilterSlashIcon
export * from '@primevue/icons/filterslash'; export * from '@primevue/icons/filterslash';
export { default as FilterSlashIcon } 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/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/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/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/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/utils', replacement: path.resolve(__dirname, '../core/src/utils/Utils.js') },
{ find: '@primevue/core', replacement: path.resolve(__dirname, '../core/src/index.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> </template>
<script> <script>
import { UniqueComponentId } from '@primevue/core/utils';
import ChevronRightIcon from '@primevue/icons/chevronright'; import ChevronRightIcon from '@primevue/icons/chevronright';
import ChevronUpIcon from '@primevue/icons/chevronup'; import ChevronUpIcon from '@primevue/icons/chevronup';
import AccordionContent from 'primevue/accordioncontent'; import AccordionContent from 'primevue/accordioncontent';
@ -44,14 +43,10 @@ export default {
emits: ['update:value', 'update:activeIndex', 'tab-open', 'tab-close', 'tab-click'], emits: ['update:value', 'update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
data() { data() {
return { return {
id: this.$attrs.id,
d_value: this.value d_value: this.value
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
value(newValue) { value(newValue) {
this.d_value = newValue; this.d_value = newValue;
}, },
@ -64,9 +59,6 @@ export default {
} }
} }
}, },
mounted() {
this.id = this.id || UniqueComponentId();
},
methods: { methods: {
isItemActive(value) { isItemActive(value) {
return this.multiple ? this.d_value?.includes(value) : this.d_value === 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 <li
v-for="(option, i) of d_value" v-for="(option, i) of d_value"
:key="`${i}_${getOptionLabel(option)}`" :key="`${i}_${getOptionLabel(option)}`"
:id="id + '_multiple_option_' + i" :id="$id + '_multiple_option_' + i"
:class="cx('chipItem', { i })" :class="cx('chipItem', { i })"
role="option" role="option"
:aria-label="getOptionLabel(option)" :aria-label="getOptionLabel(option)"
@ -84,7 +84,7 @@
aria-haspopup="listbox" aria-haspopup="listbox"
aria-autocomplete="list" aria-autocomplete="list"
:aria-expanded="overlayVisible" :aria-expanded="overlayVisible"
:aria-controls="id + '_list'" :aria-controls="$id + '_list'"
:aria-activedescendant="focused ? focusedOptionId : undefined" :aria-activedescendant="focused ? focusedOptionId : undefined"
:aria-invalid="invalid || undefined" :aria-invalid="invalid || undefined"
@focus="onFocus" @focus="onFocus"
@ -128,11 +128,11 @@
<div :class="cx('listContainer')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('listContainer')"> <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')"> <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 }"> <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))"> <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
<li <li
v-if="isOptionGroup(option)" v-if="isOptionGroup(option)"
:id="id + '_' + getOptionIndex(i, getItemOptions)" :id="$id + '_' + getOptionIndex(i, getItemOptions)"
:style="{ height: itemSize ? itemSize + 'px' : undefined }" :style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('optionGroup')" :class="cx('optionGroup')"
role="option" role="option"
@ -142,7 +142,7 @@
</li> </li>
<li <li
v-else v-else
:id="id + '_' + getOptionIndex(i, getItemOptions)" :id="$id + '_' + getOptionIndex(i, getItemOptions)"
v-ripple v-ripple
:style="{ height: itemSize ? itemSize + 'px' : undefined }" :style="{ height: itemSize ? itemSize + 'px' : undefined }"
:class="cx('option', { option, i, getItemOptions })" :class="cx('option', { option, i, getItemOptions })"
@ -186,7 +186,7 @@
import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom'; import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
import { equals, findLastIndex, isEmpty, isNotEmpty, resolveFieldData } from '@primeuix/utils/object'; import { equals, findLastIndex, isEmpty, isNotEmpty, resolveFieldData } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex'; 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 ChevronDownIcon from '@primevue/icons/chevrondown';
import SpinnerIcon from '@primevue/icons/spinner'; import SpinnerIcon from '@primevue/icons/spinner';
import Chip from 'primevue/chip'; import Chip from 'primevue/chip';
@ -215,7 +215,6 @@ export default {
startRangeIndex: -1, startRangeIndex: -1,
data() { data() {
return { return {
id: this.$attrs.id,
clicked: false, clicked: false,
focused: false, focused: false,
focusedOptionIndex: -1, focusedOptionIndex: -1,
@ -225,9 +224,6 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
suggestions() { suggestions() {
if (this.searching) { if (this.searching) {
this.show(); this.show();
@ -240,7 +236,6 @@ export default {
} }
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
this.autoUpdateModel(); this.autoUpdateModel();
}, },
updated() { updated() {
@ -930,7 +925,7 @@ export default {
}, },
scrollInView(index = -1) { scrollInView(index = -1) {
this.$nextTick(() => { 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}"]`); const element = findSingle(this.list, `li[id="${id}"]`);
if (element) { if (element) {
@ -1044,10 +1039,10 @@ export default {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined; return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined;
}, },
focusedOptionId() { focusedOptionId() {
return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null; return this.focusedOptionIndex !== -1 ? `${this.$id}_${this.focusedOptionIndex}` : null;
}, },
focusedMultipleOptionId() { focusedMultipleOptionId() {
return this.focusedMultipleOptionIndex !== -1 ? `${this.id}_multiple_option_${this.focusedMultipleOptionIndex}` : null; return this.focusedMultipleOptionIndex !== -1 ? `${this.$id}_multiple_option_${this.focusedMultipleOptionIndex}` : null;
}, },
ariaSetSize() { ariaSetSize() {
return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length; return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;
@ -1056,7 +1051,7 @@ export default {
return !this.virtualScrollerOptions; return !this.virtualScrollerOptions;
}, },
panelId() { panelId() {
return this.id + '_panel'; return this.$id + '_panel';
} }
}, },
components: { components: {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -64,7 +64,6 @@
<script> <script>
import { addClass, addStyle, blockBodyScroll, focus, getOuterHeight, getOuterWidth, getViewport, setAttribute, unblockBodyScroll } from '@primeuix/utils/dom'; import { addClass, addStyle, blockBodyScroll, focus, getOuterHeight, getOuterWidth, getViewport, setAttribute, unblockBodyScroll } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex'; import { ZIndex } from '@primeuix/utils/zindex';
import { UniqueComponentId } from '@primevue/core/utils';
import TimesIcon from '@primevue/icons/times'; import TimesIcon from '@primevue/icons/times';
import WindowMaximizeIcon from '@primevue/icons/windowmaximize'; import WindowMaximizeIcon from '@primevue/icons/windowmaximize';
import WindowMinimizeIcon from '@primevue/icons/windowminimize'; import WindowMinimizeIcon from '@primevue/icons/windowminimize';
@ -87,7 +86,6 @@ export default {
}, },
data() { data() {
return { return {
id: this.$attrs.id,
containerVisible: this.visible, containerVisible: this.visible,
maximized: false, maximized: false,
focusableMax: null, focusableMax: null,
@ -95,11 +93,6 @@ export default {
target: null target: null
}; };
}, },
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
}
},
documentKeydownListener: null, documentKeydownListener: null,
container: null, container: null,
mask: null, mask: null,
@ -133,8 +126,6 @@ export default {
this.mask = null; this.mask = null;
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
if (this.breakpoints) { if (this.breakpoints) {
this.createStyle(); this.createStyle();
} }
@ -409,7 +400,7 @@ export default {
return this.maximized ? (this.minimizeIcon ? 'span' : 'WindowMinimizeIcon') : this.maximizeIcon ? 'span' : 'WindowMaximizeIcon'; return this.maximized ? (this.minimizeIcon ? 'span' : 'WindowMinimizeIcon') : this.maximizeIcon ? 'span' : 'WindowMaximizeIcon';
}, },
ariaLabelledById() { 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() { closeAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined; 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')"> <div :class="cx('listContainer')" v-bind="ptm('listContainer')">
<ul <ul
ref="list" ref="list"
:id="id" :id="idx"
:class="cx('list')" :class="cx('list')"
role="menu" role="menu"
:aria-orientation="position === 'bottom' || position === 'top' ? 'horizontal' : 'vertical'" :aria-orientation="position === 'bottom' || position === 'top' ? 'horizontal' : 'vertical'"
@ -59,7 +59,6 @@
import { find, findSingle } from '@primeuix/utils/dom'; import { find, findSingle } from '@primeuix/utils/dom';
import { resolve } from '@primeuix/utils/object'; import { resolve } from '@primeuix/utils/object';
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { UniqueComponentId } from '@primevue/core/utils';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
import Tooltip from 'primevue/tooltip'; import Tooltip from 'primevue/tooltip';
import { mergeProps } from 'vue'; import { mergeProps } from 'vue';
@ -102,23 +101,14 @@ export default {
}, },
data() { data() {
return { return {
id: this.menuId,
currentIndex: -3, currentIndex: -3,
focused: false, focused: false,
focusedOptionIndex: -1 focusedOptionIndex: -1
}; };
}, },
watch: {
menuId(newValue) {
this.id = newValue || UniqueComponentId();
}
},
mounted() {
this.id = this.id || UniqueComponentId();
},
methods: { methods: {
getItemId(index) { getItemId(index) {
return `${this.id}_${index}`; return `${this.idx}_${index}`;
}, },
getItemProp(processedItem, name) { getItemProp(processedItem, name) {
return processedItem && processedItem.item ? resolve(processedItem.item[name]) : undefined; return processedItem && processedItem.item ? resolve(processedItem.item[name]) : undefined;
@ -277,6 +267,9 @@ export default {
computed: { computed: {
focusedOptionId() { focusedOptionId() {
return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null; return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
},
idx() {
return this.menuId || this.$id;
} }
}, },
directives: { directives: {

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,13 +1,13 @@
<template> <template>
<Portal :appendTo="appendTo" :disabled="!popup"> <Portal :appendTo="appendTo" :disabled="!popup">
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')"> <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')"> <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot> <slot name="start"></slot>
</div> </div>
<ul <ul
:ref="listRef" :ref="listRef"
:id="id + '_list'" :id="$id + '_list'"
:class="cx('list')" :class="cx('list')"
role="menu" role="menu"
:tabindex="tabindex" :tabindex="tabindex"
@ -21,14 +21,14 @@
> >
<template v-for="(item, i) of model" :key="label(item) + i.toString()"> <template v-for="(item, i) of model" :key="label(item) + i.toString()">
<template v-if="item.items && visible(item) && !item.separator"> <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--> <!--TODO: submenuheader deprecated since v4.0. Use submenulabel-->
<slot :name="$slots.submenulabel ? 'submenulabel' : 'submenuheader'" :item="item">{{ label(item) }}</slot> <slot :name="$slots.submenulabel ? 'submenulabel' : 'submenuheader'" :item="item">{{ label(item) }}</slot>
</li> </li>
<template v-for="(child, j) of item.items" :key="child.label + i + '_' + j"> <template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
<PVMenuitem <PVMenuitem
v-if="visible(child) && !child.separator" v-if="visible(child) && !child.separator"
:id="id + '_' + i + '_' + j" :id="$id + '_' + i + '_' + j"
:item="child" :item="child"
:templates="$slots" :templates="$slots"
:focusedOptionId="focusedOptionId" :focusedOptionId="focusedOptionId"
@ -44,7 +44,7 @@
<PVMenuitem <PVMenuitem
v-else v-else
:key="label(item) + i.toString()" :key="label(item) + i.toString()"
:id="id + '_' + i" :id="$id + '_' + i"
:item="item" :item="item"
:index="i" :index="i"
:templates="$slots" :templates="$slots"
@ -65,9 +65,9 @@
</template> </template>
<script> <script>
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils'; import { absolutePosition, addStyle, find, findSingle, focus, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
import { focus, find, findSingle, addStyle, absolutePosition, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex'; import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import OverlayEventBus from 'primevue/overlayeventbus'; import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal'; import Portal from 'primevue/portal';
import BaseMenu from './BaseMenu.vue'; import BaseMenu from './BaseMenu.vue';
@ -80,18 +80,12 @@ export default {
emits: ['show', 'hide', 'focus', 'blur'], emits: ['show', 'hide', 'focus', 'blur'],
data() { data() {
return { return {
id: this.$attrs.id,
overlayVisible: false, overlayVisible: false,
focused: false, focused: false,
focusedOptionIndex: -1, focusedOptionIndex: -1,
selectedOptionIndex: -1 selectedOptionIndex: -1
}; };
}, },
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
}
},
target: null, target: null,
outsideClickListener: null, outsideClickListener: null,
scrollHandler: null, scrollHandler: null,
@ -99,8 +93,6 @@ export default {
container: null, container: null,
list: null, list: null,
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
if (!this.popup) { if (!this.popup) {
this.bindResizeListener(); this.bindResizeListener();
this.bindOutsideClickListener(); 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')"> <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot> <slot name="start"></slot>
</div> </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--> <!-- TODO: menubutton deprecated since v4.0-->
<a <a
v-if="model && model.length > 0" v-if="model && model.length > 0"
@ -13,7 +13,7 @@
:class="cx('button')" :class="cx('button')"
:aria-haspopup="model.length && model.length > 0 ? true : false" :aria-haspopup="model.length && model.length > 0 ? true : false"
:aria-expanded="mobileActive" :aria-expanded="mobileActive"
:aria-controls="id" :aria-controls="$id"
:aria-label="$primevue.config.locale.aria?.navigation" :aria-label="$primevue.config.locale.aria?.navigation"
@click="menuButtonClick($event)" @click="menuButtonClick($event)"
@keydown="menuButtonKeydown($event)" @keydown="menuButtonKeydown($event)"
@ -27,7 +27,7 @@
</slot> </slot>
<MenubarSub <MenubarSub
:ref="menubarRef" :ref="menubarRef"
:id="id + '_list'" :id="$id + '_list'"
role="menubar" role="menubar"
:items="processedItems" :items="processedItems"
:templates="$slots" :templates="$slots"
@ -35,7 +35,7 @@
:mobileActive="mobileActive" :mobileActive="mobileActive"
tabindex="0" tabindex="0"
:aria-activedescendant="focused ? focusedItemId : undefined" :aria-activedescendant="focused ? focusedItemId : undefined"
:menuId="id" :menuId="$id"
:focusedItemId="focused ? focusedItemId : undefined" :focusedItemId="focused ? focusedItemId : undefined"
:activeItemPath="activeItemPath" :activeItemPath="activeItemPath"
:level="0" :level="0"
@ -57,9 +57,8 @@
</template> </template>
<script> <script>
import { UniqueComponentId } from '@primevue/core/utils'; import { findSingle, focus, isTouchDevice } from '@primeuix/utils/dom';
import { focus, isTouchDevice, findSingle } from '@primeuix/utils/dom'; import { findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolve } from '@primeuix/utils/object';
import { isNotEmpty, resolve, isPrintableCharacter, isEmpty, findLastIndex } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex'; import { ZIndex } from '@primeuix/utils/zindex';
import BarsIcon from '@primevue/icons/bars'; import BarsIcon from '@primevue/icons/bars';
import BaseMenubar from './BaseMenubar.vue'; import BaseMenubar from './BaseMenubar.vue';
@ -73,7 +72,6 @@ export default {
matchMediaListener: null, matchMediaListener: null,
data() { data() {
return { return {
id: this.$attrs.id,
mobileActive: false, mobileActive: false,
focused: false, focused: false,
focusedItemInfo: { index: -1, level: 0, parentKey: '' }, focusedItemInfo: { index: -1, level: 0, parentKey: '' },
@ -84,9 +82,6 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
activeItemPath(newPath) { activeItemPath(newPath) {
if (isNotEmpty(newPath)) { if (isNotEmpty(newPath)) {
this.bindOutsideClickListener(); this.bindOutsideClickListener();
@ -101,7 +96,6 @@ export default {
container: null, container: null,
menubar: null, menubar: null,
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
this.bindMatchMediaListener(); this.bindMatchMediaListener();
}, },
beforeUnmount() { beforeUnmount() {
@ -590,7 +584,7 @@ export default {
} }
}, },
scrollInView(index = -1) { 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}"]`); const element = findSingle(this.menubar, `li[id="${id}"]`);
if (element) { if (element) {
@ -635,7 +629,7 @@ export default {
return processedItem ? processedItem.items : this.processedItems; return processedItem ? processedItem.items : this.processedItems;
}, },
focusedItemId() { 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: { components: {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,13 +1,13 @@
<template> <template>
<Portal :appendTo="appendTo" :disabled="!popup"> <Portal :appendTo="appendTo" :disabled="!popup">
<transition name="p-connected-overlay" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')"> <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')"> <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot> <slot name="start"></slot>
</div> </div>
<TieredMenuSub <TieredMenuSub
:ref="menubarRef" :ref="menubarRef"
:id="id + '_list'" :id="$id + '_list'"
:class="cx('rootList')" :class="cx('rootList')"
:tabindex="!disabled ? tabindex : -1" :tabindex="!disabled ? tabindex : -1"
role="menubar" role="menubar"
@ -16,7 +16,7 @@
:aria-disabled="disabled || undefined" :aria-disabled="disabled || undefined"
aria-orientation="vertical" aria-orientation="vertical"
:aria-activedescendant="focused ? focusedItemId : undefined" :aria-activedescendant="focused ? focusedItemId : undefined"
:menuId="id" :menuId="$id"
:focusedItemId="focused ? focusedItemId : undefined" :focusedItemId="focused ? focusedItemId : undefined"
:items="processedItems" :items="processedItems"
:templates="$slots" :templates="$slots"
@ -45,7 +45,7 @@
import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom'; import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
import { findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolve } from '@primeuix/utils/object'; import { findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolve } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex'; 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 OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal'; import Portal from 'primevue/portal';
import BaseTieredMenu from './BaseTieredMenu.vue'; import BaseTieredMenu from './BaseTieredMenu.vue';
@ -67,7 +67,6 @@ export default {
searchValue: null, searchValue: null,
data() { data() {
return { return {
id: this.$attrs.id,
focused: false, focused: false,
focusedItemInfo: { index: -1, level: 0, parentKey: '' }, focusedItemInfo: { index: -1, level: 0, parentKey: '' },
activeItemPath: [], activeItemPath: [],
@ -79,9 +78,6 @@ export default {
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
activeItemPath(newPath) { activeItemPath(newPath) {
if (!this.popup) { if (!this.popup) {
if (isNotEmpty(newPath)) { if (isNotEmpty(newPath)) {
@ -95,7 +91,6 @@ export default {
} }
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
this.bindMatchMediaListener(); this.bindMatchMediaListener();
}, },
beforeUnmount() { beforeUnmount() {
@ -612,7 +607,7 @@ export default {
} }
}, },
scrollInView(index = -1) { 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}"]`); const element = findSingle(this.menubar, `li[id="${id}"]`);
if (element) { if (element) {
@ -657,7 +652,7 @@ export default {
return processedItem ? processedItem.items : this.processedItems; return processedItem ? processedItem.items : this.processedItems;
}, },
focusedItemId() { 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: { 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 { absolutePosition, addStyle, find, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';
import { isEmpty, isNotEmpty } from '@primeuix/utils/object'; import { isEmpty, isNotEmpty } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex'; 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 ChevronDownIcon from '@primevue/icons/chevrondown';
import TimesIcon from '@primevue/icons/times'; import TimesIcon from '@primevue/icons/times';
import Chip from 'primevue/chip'; import Chip from 'primevue/chip';
@ -152,16 +152,12 @@ export default {
}, },
data() { data() {
return { return {
id: this.$attrs.id,
focused: false, focused: false,
overlayVisible: false, overlayVisible: false,
d_expandedKeys: this.expandedKeys || {} d_expandedKeys: this.expandedKeys || {}
}; };
}, },
watch: { watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
},
modelValue: { modelValue: {
handler: function () { handler: function () {
if (!this.selfChange) { if (!this.selfChange) {
@ -200,7 +196,6 @@ export default {
} }
}, },
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
this.updateTreeState(); this.updateTreeState();
}, },
methods: { methods: {
@ -560,7 +555,7 @@ export default {
return !this.options || this.options.length === 0; return !this.options || this.options.length === 0;
}, },
listId() { listId() {
return this.id + '_list'; return this.$id + '_list';
}, },
hasFluid() { hasFluid() {
return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid; return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;

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

@ -10,8 +10,9 @@
</template> </template>
<template v-else> <template v-else>
<component v-if="column.children && column.children.rowtoggleicon" :is="column.children.rowtoggleicon" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" /> <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--> <!-- 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-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')" /> <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('nodeToggleIcon')" v-bind="getColumnPT('nodeToggleIcon')" />
</template> </template>

686
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff