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

Fixed #5968 - Improve utils methods in all packages

pull/5969/head
Mert Sincan 2024-06-26 08:46:26 +01:00
parent 3c13918e2b
commit 796edf4c11
123 changed files with 1358 additions and 2700 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/showcase/components/doc/DocSectionNav.vue
View File

@ -21,7 +21,8 @@
</template> </template>
<script> <script>
import { DomHandler, ObjectUtils } from '@primevue/core/utils'; import { findSingle, getHeight, getOffset, getWindowScrollTop, isVisible } from '@primeuix/utils/dom';
import { isNotEmpty } from '@primeuix/utils/object';
export default { export default {
props: ['docs'], props: ['docs'],
@ -49,16 +50,16 @@ export default {
methods: { methods: {
onScroll() { onScroll() {
if (!this.isScrollBlocked) { if (!this.isScrollBlocked) {
const labels = [...document.querySelectorAll(':is(h1,h2,h3).doc-section-label')].filter((el) => DomHandler.isVisible(el)); const labels = [...document.querySelectorAll(':is(h1,h2,h3).doc-section-label')].filter((el) => isVisible(el));
const windowScrollTop = DomHandler.getWindowScrollTop(); const windowScrollTop = getWindowScrollTop();
labels.forEach((label) => { labels.forEach((label) => {
const { top } = DomHandler.getOffset(label); const { top } = getOffset(label);
const threshold = this.getThreshold(label); const threshold = this.getThreshold(label);
if (top - threshold <= windowScrollTop) { if (top - threshold <= windowScrollTop) {
const link = DomHandler.findSingle(label, 'a'); const link = findSingle(label, 'a');
this.activeId = link.id; this.activeId = link.id;
} }
@ -69,7 +70,7 @@ export default {
this.scrollEndTimer = setTimeout(() => { this.scrollEndTimer = setTimeout(() => {
this.isScrollBlocked = false; this.isScrollBlocked = false;
const activeItem = DomHandler.findSingle(this.$refs.nav, '.active-navbar-item'); const activeItem = findSingle(this.$refs.nav, '.active-navbar-item');
activeItem && activeItem.scrollIntoView({ block: 'nearest', inline: 'start' }); activeItem && activeItem.scrollIntoView({ block: 'nearest', inline: 'start' });
}, 50); }, 50);
@ -89,19 +90,19 @@ export default {
}, },
getThreshold(label) { getThreshold(label) {
if (!this.topbarHeight) { if (!this.topbarHeight) {
const topbar = DomHandler.findSingle(document.body, '.layout-topbar'); const topbar = findSingle(document.body, '.layout-topbar');
this.topbarHeight = topbar ? DomHandler.getHeight(topbar) : 0; this.topbarHeight = topbar ? getHeight(topbar) : 0;
} }
return this.topbarHeight + DomHandler.getHeight(label) * 1.5; return this.topbarHeight + getHeight(label) * 1.5;
}, },
getIdOfTheSection(section) { getIdOfTheSection(section) {
return section.querySelector('a').getAttribute('id'); return section.querySelector('a').getAttribute('id');
}, },
scrollCurrentUrl() { scrollCurrentUrl() {
const hash = window.location.hash.substring(1); const hash = window.location.hash.substring(1);
const hasHash = ObjectUtils.isNotEmpty(hash); const hasHash = isNotEmpty(hash);
const id = hasHash ? hash : (this.docs[0] || {}).id; const id = hasHash ? hash : (this.docs[0] || {}).id;
this.activeId = id; this.activeId = id;

4
apps/showcase/directives/CodeHighlight.js
View File

@ -1,4 +1,4 @@
import { DomHandler } from '@primevue/core/utils'; import { isClient } from '@primeuix/utils/dom';
const CodeHighlight = { const CodeHighlight = {
mounted(el, binding) { mounted(el, binding) {
@ -9,7 +9,7 @@ const CodeHighlight = {
else if (modifiers.css || value === 'css') el.className = 'language-css'; else if (modifiers.css || value === 'css') el.className = 'language-css';
else el.className = 'language-markup'; else el.className = 'language-markup';
if (DomHandler.isClient()) { if (isClient()) {
window.Prism.highlightElement(el.children[0]); window.Prism.highlightElement(el.children[0]);
el.children[0].parentElement.setAttribute('tabindex', '-1'); el.children[0].parentElement.setAttribute('tabindex', '-1');
} }

10
apps/showcase/layouts/default.vue
View File

@ -18,7 +18,7 @@
</template> </template>
<script> <script>
import { DomHandler } from '@primevue/core/utils'; import { blockBodyScroll, unblockBodyScroll } from '@primeuix/utils/dom';
import AppFooter from './AppFooter.vue'; import AppFooter from './AppFooter.vue';
import AppMenu from './AppMenu.vue'; import AppMenu from './AppMenu.vue';
import AppNews from './AppNews.vue'; import AppNews from './AppNews.vue';
@ -39,7 +39,7 @@ export default {
} }
this.sidebarActive = false; this.sidebarActive = false;
DomHandler.unblockBodyScroll('blocked-scroll'); unblockBodyScroll('blocked-scroll');
this.$toast.removeAllGroups(); this.$toast.removeAllGroups();
} }
} }
@ -48,15 +48,15 @@ export default {
onMenuButtonClick() { onMenuButtonClick() {
if (this.sidebarActive) { if (this.sidebarActive) {
this.sidebarActive = false; this.sidebarActive = false;
DomHandler.unblockBodyScroll('blocked-scroll'); unblockBodyScroll('blocked-scroll');
} else { } else {
this.sidebarActive = true; this.sidebarActive = true;
DomHandler.blockBodyScroll('blocked-scroll'); blockBodyScroll('blocked-scroll');
} }
}, },
onMaskClick() { onMaskClick() {
this.sidebarActive = false; this.sidebarActive = false;
DomHandler.unblockBodyScroll('blocked-scroll'); unblockBodyScroll('blocked-scroll');
}, },
isOutdatedIE() { isOutdatedIE() {
let ua = window.navigator.userAgent; let ua = window.navigator.userAgent;

2
apps/showcase/package.json
View File

@ -93,4 +93,4 @@
"engines": { "engines": {
"node": ">=12.11.0" "node": ">=12.11.0"
} }
} }

3
packages/core/package.json
View File

@ -48,7 +48,8 @@
"dev:link": "pnpm link --global && npm link" "dev:link": "pnpm link --global && npm link"
}, },
"dependencies": { "dependencies": {
"@primeuix/styled": "^0.0.1" "@primeuix/utils": "^0.0.3",
"@primeuix/styled": "^0.0.3"
}, },
"peerDependencies": { "peerDependencies": {
"vue": "^3.0.0" "vue": "^3.0.0"

26
packages/core/src/api/FilterService.js
View File

@ -1,4 +1,4 @@
import { ObjectUtils } from '@primevue/core/utils'; import { equals, removeAccents, resolveFieldData } from '@primeuix/utils/object';
const FilterService = { const FilterService = {
filter(value, fields, filterValue, filterMatchMode, filterLocale) { filter(value, fields, filterValue, filterMatchMode, filterLocale) {
@ -16,7 +16,7 @@ const FilterService = {
} }
} else { } else {
for (const field of fields) { for (const field of fields) {
const fieldValue = ObjectUtils.resolveFieldData(item, field); const fieldValue = resolveFieldData(item, field);
if (this.filters[filterMatchMode](fieldValue, filterValue, filterLocale)) { if (this.filters[filterMatchMode](fieldValue, filterValue, filterLocale)) {
filteredItems.push(item); filteredItems.push(item);
@ -38,8 +38,8 @@ const FilterService = {
return false; return false;
} }
let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); let filterValue = removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale); let stringValue = removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.slice(0, filterValue.length) === filterValue; return stringValue.slice(0, filterValue.length) === filterValue;
}, },
@ -52,8 +52,8 @@ const FilterService = {
return false; return false;
} }
let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); let filterValue = removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale); let stringValue = removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.indexOf(filterValue) !== -1; return stringValue.indexOf(filterValue) !== -1;
}, },
@ -66,8 +66,8 @@ const FilterService = {
return false; return false;
} }
let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); let filterValue = removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale); let stringValue = removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.indexOf(filterValue) === -1; return stringValue.indexOf(filterValue) === -1;
}, },
@ -80,8 +80,8 @@ const FilterService = {
return false; return false;
} }
let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); let filterValue = removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale); let stringValue = removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1; return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1;
}, },
@ -95,7 +95,7 @@ const FilterService = {
} }
if (value.getTime && filter.getTime) return value.getTime() === filter.getTime(); if (value.getTime && filter.getTime) return value.getTime() === filter.getTime();
else return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) == ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); else return removeAccents(value.toString()).toLocaleLowerCase(filterLocale) == removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
}, },
notEquals(value, filter, filterLocale) { notEquals(value, filter, filterLocale) {
if (filter === undefined || filter === null || filter === '') { if (filter === undefined || filter === null || filter === '') {
@ -107,7 +107,7 @@ const FilterService = {
} }
if (value.getTime && filter.getTime) return value.getTime() !== filter.getTime(); if (value.getTime && filter.getTime) return value.getTime() !== filter.getTime();
else return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) != ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale); else return removeAccents(value.toString()).toLocaleLowerCase(filterLocale) != removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
}, },
in(value, filter) { in(value, filter) {
if (filter === undefined || filter === null || filter.length === 0) { if (filter === undefined || filter === null || filter.length === 0) {
@ -115,7 +115,7 @@ const FilterService = {
} }
for (let i = 0; i < filter.length; i++) { for (let i = 0; i < filter.length; i++) {
if (ObjectUtils.equals(value, filter[i])) { if (equals(value, filter[i])) {
return true; return true;
} }
} }

14
packages/core/src/base/style/BaseStyle.js
View File

@ -1,6 +1,6 @@
import { Theme, dt } from '@primeuix/styled'; import { Theme, dt } from '@primeuix/styled';
import { minifyCSS, resolve } from '@primeuix/utils/object';
import { useStyle } from '@primevue/core/usestyle'; import { useStyle } from '@primevue/core/usestyle';
import { ObjectUtils } from '@primevue/core/utils';
const theme = ({ dt }) => ` const theme = ({ dt }) => `
* { * {
@ -157,9 +157,9 @@ export default {
classes, classes,
inlineStyles, inlineStyles,
load(style, options = {}, transform = (cs) => cs) { load(style, options = {}, transform = (cs) => cs) {
const computedStyle = transform(ObjectUtils.getItemValue(style, { dt })); const computedStyle = transform(resolve(style, { dt }));
return computedStyle ? useStyle(ObjectUtils.minifyCSS(computedStyle), { name: this.name, ...options }) : {}; return computedStyle ? useStyle(minifyCSS(computedStyle), { name: this.name, ...options }) : {};
}, },
loadCSS(options = {}) { loadCSS(options = {}) {
return this.load(this.css, options); return this.load(this.css, options);
@ -184,8 +184,8 @@ export default {
}, },
getStyleSheet(extendedCSS = '', props = {}) { getStyleSheet(extendedCSS = '', props = {}) {
if (this.css) { if (this.css) {
const _css = ObjectUtils.getItemValue(this.css, { dt }); const _css = resolve(this.css, { dt });
const _style = ObjectUtils.minifyCSS(`${_css}${extendedCSS}`); const _style = minifyCSS(`${_css}${extendedCSS}`);
const _props = Object.entries(props) const _props = Object.entries(props)
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, []) .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
.join(' '); .join(' ');
@ -203,8 +203,8 @@ export default {
if (this.theme) { if (this.theme) {
const name = this.name === 'base' ? 'global-style' : `${this.name}-style`; const name = this.name === 'base' ? 'global-style' : `${this.name}-style`;
const _css = ObjectUtils.getItemValue(this.theme, { dt }); const _css = resolve(this.theme, { dt });
const _style = ObjectUtils.minifyCSS(Theme.transformCSS(name, _css)); const _style = minifyCSS(Theme.transformCSS(name, _css));
const _props = Object.entries(props) const _props = Object.entries(props)
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, []) .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
.join(' '); .join(' ');

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

@ -1,8 +1,10 @@
<script> <script>
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 { DomHandler, ObjectUtils, UniqueComponentId } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { Theme, ThemeService } from '@primeuix/styled'; import { Theme, ThemeService } from '@primeuix/styled';
import { toFlatCase, isNotEmpty, getKeyValue, isString, isArray, resolve } from '@primeuix/utils/object';
import { findSingle } from '@primeuix/utils/dom';
import { mergeProps } from 'vue'; import { mergeProps } from 'vue';
import BaseComponentStyle from './style/BaseComponentStyle'; import BaseComponentStyle from './style/BaseComponentStyle';
@ -77,7 +79,7 @@ export default {
}, },
mounted() { mounted() {
// @todo - improve performance // @todo - improve performance
this.rootEl = DomHandler.findSingle(this.$el, `[data-pc-name="${ObjectUtils.toFlatCase(this.$.type.name)}"]`); this.rootEl = findSingle(this.$el, `[data-pc-name="${toFlatCase(this.$.type.name)}"]`);
if (this.rootEl) { if (this.rootEl) {
this.rootEl.setAttribute(this.$attrSelector, ''); this.rootEl.setAttribute(this.$attrSelector, '');
@ -110,7 +112,7 @@ export default {
} }
}, },
_mergeProps(fn, ...args) { _mergeProps(fn, ...args) {
return ObjectUtils.isFunction(fn) ? fn(...args) : mergeProps(...args); return isFunction(fn) ? fn(...args) : mergeProps(...args);
}, },
_loadStyles() { _loadStyles() {
const _load = () => { const _load = () => {
@ -144,12 +146,12 @@ export default {
* const selfCSS = this._getPTClassValue(this.pt, 'css', this.$params); * const selfCSS = this._getPTClassValue(this.pt, 'css', this.$params);
* const defaultCSS = this._getPTClassValue(this.defaultPT, 'css', this.$params); * const defaultCSS = this._getPTClassValue(this.defaultPT, 'css', this.$params);
* const mergedCSS = mergeProps(selfCSS, defaultCSS); * const mergedCSS = mergeProps(selfCSS, defaultCSS);
* ObjectUtils.isNotEmpty(mergedCSS?.class) && this.$css.loadCustomStyle(mergedCSS?.class); * isNotEmpty(mergedCSS?.class) && this.$css.loadCustomStyle(mergedCSS?.class);
*/ */
const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params); const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
ObjectUtils.isNotEmpty(globalCSS) && BaseStyle.load(globalCSS, { name: 'global', ...this.$styleOptions }); isNotEmpty(globalCSS) && BaseStyle.load(globalCSS, { name: 'global', ...this.$styleOptions });
}, },
_loadThemeStyles() { _loadThemeStyles() {
if (this.isUnstyled) return; if (this.isUnstyled) return;
@ -204,14 +206,7 @@ export default {
return this[name] || this._getHostInstance(this)?.[name]; return this[name] || this._getHostInstance(this)?.[name];
}, },
_getOptionValue(options, key = '', params = {}) { _getOptionValue(options, key = '', params = {}) {
const fKeys = ObjectUtils.toFlatCase(key).split('.'); return getKeyValue(options, key, params);
const fKey = fKeys.shift();
return fKey
? ObjectUtils.isObject(options)
? this._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.toFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
: undefined
: ObjectUtils.getItemValue(options, params);
}, },
_getPTValue(obj = {}, key = '', params = {}, searchInDefaultPT = true) { _getPTValue(obj = {}, key = '', params = {}, searchInDefaultPT = true) {
const searchOut = /./g.test(key) && !!params[key.split('.')[0]]; const searchOut = /./g.test(key) && !!params[key.split('.')[0]];
@ -230,28 +225,28 @@ export default {
}, },
_getPTDatasets(key = '') { _getPTDatasets(key = '') {
const datasetPrefix = 'data-pc-'; const datasetPrefix = 'data-pc-';
const isExtended = key === 'root' && ObjectUtils.isNotEmpty(this.pt?.['data-pc-section']); const isExtended = key === 'root' && isNotEmpty(this.pt?.['data-pc-section']);
return ( return (
key !== 'transition' && { key !== 'transition' && {
...(key === 'root' && { ...(key === 'root' && {
[`${datasetPrefix}name`]: ObjectUtils.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`]: ObjectUtils.toFlatCase(this.$.type.name) }) ...(isExtended && { [`${datasetPrefix}extend`]: toFlatCase(this.$.type.name) })
}), }),
[`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key) [`${datasetPrefix}section`]: toFlatCase(key)
} }
); );
}, },
_getPTClassValue(...args) { _getPTClassValue(...args) {
const value = this._getOptionValue(...args); const value = this._getOptionValue(...args);
return ObjectUtils.isString(value) || ObjectUtils.isArray(value) ? { class: value } : value; return isString(value) || isArray(value) ? { class: value } : value;
}, },
_getPT(pt, key = '', callback) { _getPT(pt, key = '', callback) {
const getValue = (value, checkSameKey = false) => { const getValue = (value, checkSameKey = false) => {
const computedValue = callback ? callback(value) : value; const computedValue = callback ? callback(value) : value;
const _key = ObjectUtils.toFlatCase(key); const _key = toFlatCase(key);
const _cKey = ObjectUtils.toFlatCase(this.$name); const _cKey = toFlatCase(this.$name);
return (checkSameKey ? (_key !== _cKey ? computedValue?.[_key] : undefined) : computedValue?.[_key]) ?? computedValue; return (checkSameKey ? (_key !== _cKey ? computedValue?.[_key] : undefined) : computedValue?.[_key]) ?? computedValue;
}; };
@ -273,8 +268,8 @@ export default {
const value = fn(pt.value); const value = fn(pt.value);
if (originalValue === undefined && value === undefined) return undefined; if (originalValue === undefined && value === undefined) return undefined;
else if (ObjectUtils.isString(value)) return value; else if (isString(value)) return value;
else if (ObjectUtils.isString(originalValue)) return originalValue; else if (isString(originalValue)) return originalValue;
return mergeSections || (!mergeSections && value) ? (useMergeProps ? this._mergeProps(useMergeProps, originalValue, value) : { ...originalValue, ...value }) : value; return mergeSections || (!mergeSections && value) ? (useMergeProps ? this._mergeProps(useMergeProps, originalValue, value) : { ...originalValue, ...value }) : value;
} }
@ -313,10 +308,10 @@ export default {
}, },
computed: { computed: {
globalPT() { globalPT() {
return this._getPT(this.$primevueConfig?.pt, undefined, (value) => ObjectUtils.getItemValue(value, { instance: this })); return this._getPT(this.$primevueConfig?.pt, undefined, (value) => resolve(value, { instance: this }));
}, },
defaultPT() { defaultPT() {
return this._getPT(this.$primevueConfig?.pt, undefined, (value) => this._getOptionValue(value, this.$name, { ...this.$params }) || ObjectUtils.getItemValue(value, { ...this.$params })); return this._getPT(this.$primevueConfig?.pt, undefined, (value) => this._getOptionValue(value, this.$name, { ...this.$params }) || resolve(value, { ...this.$params }));
}, },
isUnstyled() { isUnstyled() {
return this.unstyled !== undefined ? this.unstyled : this.$primevueConfig?.unstyled; return this.unstyled !== undefined ? this.unstyled : this.$primevueConfig?.unstyled;

34
packages/core/src/basedirective/BaseDirective.js
View File

@ -1,28 +1,20 @@
import { Theme, ThemeService } from '@primeuix/styled'; import { Theme, ThemeService } from '@primeuix/styled';
import { getKeyValue, isArray, isEmpty, isFunction, isObject, isString, resolve, toCapitalCase, toFlatCase } from '@primeuix/utils/object';
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 PrimeVueService from '@primevue/core/service'; import PrimeVueService from '@primevue/core/service';
import { ObjectUtils, UniqueComponentId } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { mergeProps } from 'vue'; import { mergeProps } from 'vue';
const BaseDirective = { const BaseDirective = {
_getMeta: (...args) => [ObjectUtils.isObject(args[0]) ? undefined : args[0], ObjectUtils.getItemValue(ObjectUtils.isObject(args[0]) ? args[0] : args[1])], _getMeta: (...args) => [isObject(args[0]) ? undefined : args[0], resolve(isObject(args[0]) ? args[0] : args[1])],
_getConfig: (binding, vnode) => (binding?.instance?.$primevue || vnode?.ctx?.appContext?.config?.globalProperties?.$primevue)?.config, _getConfig: (binding, vnode) => (binding?.instance?.$primevue || vnode?.ctx?.appContext?.config?.globalProperties?.$primevue)?.config,
_getOptionValue: (options, key = '', params = {}) => { _getOptionValue: getKeyValue,
const fKeys = ObjectUtils.toFlatCase(key).split('.');
const fKey = fKeys.shift();
return fKey
? ObjectUtils.isObject(options)
? BaseDirective._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.toFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
: undefined
: ObjectUtils.getItemValue(options, params);
},
_getPTValue: (instance = {}, obj = {}, key = '', params = {}, searchInDefaultPT = true) => { _getPTValue: (instance = {}, obj = {}, key = '', params = {}, searchInDefaultPT = true) => {
const getValue = (...args) => { const getValue = (...args) => {
const value = BaseDirective._getOptionValue(...args); const value = BaseDirective._getOptionValue(...args);
return ObjectUtils.isString(value) || ObjectUtils.isArray(value) ? { class: value } : value; return isString(value) || isArray(value) ? { class: value } : value;
}; };
const { mergeSections = true, mergeProps: useMergeProps = false } = instance.binding?.value?.ptOptions || instance.$primevueConfig?.ptOptions || {}; const { mergeSections = true, mergeProps: useMergeProps = false } = instance.binding?.value?.ptOptions || instance.$primevueConfig?.ptOptions || {};
@ -36,14 +28,14 @@ const BaseDirective = {
const datasetPrefix = 'data-pc-'; const datasetPrefix = 'data-pc-';
return { return {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }), ...(key === 'root' && { [`${datasetPrefix}name`]: toFlatCase(instance.$name) }),
[`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key) [`${datasetPrefix}section`]: toFlatCase(key)
}; };
}, },
_getPT: (pt, key = '', callback) => { _getPT: (pt, key = '', callback) => {
const getValue = (value) => { const getValue = (value) => {
const computedValue = callback ? callback(value) : value; const computedValue = callback ? callback(value) : value;
const _key = ObjectUtils.toFlatCase(key); const _key = toFlatCase(key);
return computedValue?.[_key] ?? computedValue; return computedValue?.[_key] ?? computedValue;
}; };
@ -65,8 +57,8 @@ const BaseDirective = {
const value = fn(pt.value); const value = fn(pt.value);
if (originalValue === undefined && value === undefined) return undefined; if (originalValue === undefined && value === undefined) return undefined;
else if (ObjectUtils.isString(value)) return value; else if (isString(value)) return value;
else if (ObjectUtils.isString(originalValue)) return originalValue; else if (isString(originalValue)) return originalValue;
return mergeSections || (!mergeSections && value) ? (useMergeProps ? BaseDirective._mergeProps(instance, useMergeProps, originalValue, value) : { ...originalValue, ...value }) : value; return mergeSections || (!mergeSections && value) ? (useMergeProps ? BaseDirective._mergeProps(instance, useMergeProps, originalValue, value) : { ...originalValue, ...value }) : value;
} }
@ -142,7 +134,7 @@ const BaseDirective = {
ThemeService.on('theme:change', callback); ThemeService.on('theme:change', callback);
}, },
_hook: (directiveName, hookName, el, binding, vnode, prevVnode) => { _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
const name = `on${ObjectUtils.toCapitalCase(hookName)}`; const name = `on${toCapitalCase(hookName)}`;
const config = BaseDirective._getConfig(binding, vnode); const config = BaseDirective._getConfig(binding, vnode);
const instance = el?.$instance; const instance = el?.$instance;
const selfHook = BaseDirective._usePT(instance, BaseDirective._getPT(binding?.value?.pt, directiveName), BaseDirective._getOptionValue, `hooks.${name}`); const selfHook = BaseDirective._usePT(instance, BaseDirective._getPT(binding?.value?.pt, directiveName), BaseDirective._getOptionValue, `hooks.${name}`);
@ -153,7 +145,7 @@ const BaseDirective = {
defaultHook?.(instance, options); defaultHook?.(instance, options);
}, },
_mergeProps(instance = {}, fn, ...args) { _mergeProps(instance = {}, fn, ...args) {
return ObjectUtils.isFunction(fn) ? fn(...args) : mergeProps(...args); return isFunction(fn) ? fn(...args) : mergeProps(...args);
}, },
_extend: (name, options = {}) => { _extend: (name, options = {}) => {
const handleHook = (hook, el, binding, vnode, prevVnode) => { const handleHook = (hook, el, binding, vnode, prevVnode) => {
@ -161,7 +153,7 @@ const BaseDirective = {
const config = BaseDirective._getConfig(binding, vnode); const config = BaseDirective._getConfig(binding, vnode);
const $prevInstance = el._$instances[name] || {}; const $prevInstance = el._$instances[name] || {};
const $options = ObjectUtils.isEmpty($prevInstance) ? { ...options, ...options?.methods } : {}; const $options = isEmpty($prevInstance) ? { ...options, ...options?.methods } : {};
el._$instances[name] = { el._$instances[name] = {
...$prevInstance, ...$prevInstance,

8
packages/core/src/service/PrimeVueService.d.ts vendored
View File

@ -1,5 +1,3 @@
export interface PrimeVueService { import type { EventBusOptions } from '@primeuix/utils/eventbus';
on(type: string, fn: any): void;
emit(type: string, evt?: any): void; export interface PrimeVueService extends EventBusOptions {}
off(type: string, fn: any): void;
}

2
packages/core/src/service/PrimeVueService.js
View File

@ -1,3 +1,3 @@
import { EventBus } from '@primevue/core/utils'; import { EventBus } from '@primeuix/utils/eventbus';
export default EventBus(); export default EventBus();

12
packages/core/src/usestyle/UseStyle.js
View File

@ -2,7 +2,7 @@
* Ported from useStyleTag in @vueuse/core * Ported from useStyleTag in @vueuse/core
* https://github.com/vueuse * https://github.com/vueuse
*/ */
import { DomHandler } from '@primevue/core/utils'; import { isClient, isExist, setAttribute, setAttributes } from '@primeuix/utils/dom';
import { getCurrentInstance, nextTick, onMounted, readonly, ref, watch } from 'vue'; import { getCurrentInstance, nextTick, onMounted, readonly, ref, watch } from 'vue';
function tryOnMounted(fn, sync = true) { function tryOnMounted(fn, sync = true) {
@ -18,7 +18,7 @@ export function useStyle(css, options = {}) {
const cssRef = ref(css); const cssRef = ref(css);
const styleRef = ref(null); const styleRef = ref(null);
const defaultDocument = DomHandler.isClient() ? window.document : undefined; const defaultDocument = isClient() ? window.document : undefined;
const { const {
document = defaultDocument, document = defaultDocument,
immediate = true, immediate = true,
@ -48,15 +48,15 @@ export function useStyle(css, options = {}) {
if (!styleRef.value.isConnected) { if (!styleRef.value.isConnected) {
cssRef.value = _css || css; cssRef.value = _css || css;
DomHandler.setAttributes(styleRef.value, { setAttributes(styleRef.value, {
type: 'text/css', type: 'text/css',
id: _id, id: _id,
media, media,
nonce: _nonce nonce: _nonce
}); });
first ? document.head.prepend(styleRef.value) : document.head.appendChild(styleRef.value); first ? document.head.prepend(styleRef.value) : document.head.appendChild(styleRef.value);
DomHandler.setAttribute(styleRef.value, 'data-primevue-style-id', _name); setAttribute(styleRef.value, 'data-primevue-style-id', _name);
DomHandler.setAttributes(styleRef.value, _styleProps); setAttributes(styleRef.value, _styleProps);
styleRef.value.onload = (event) => onStyleLoaded?.(event, { name: _name }); styleRef.value.onload = (event) => onStyleLoaded?.(event, { name: _name });
onStyleMounted?.(_name); onStyleMounted?.(_name);
} }
@ -78,7 +78,7 @@ export function useStyle(css, options = {}) {
const unload = () => { const unload = () => {
if (!document || !isLoaded.value) return; if (!document || !isLoaded.value) return;
stop(); stop();
DomHandler.isExist(styleRef.value) && document.head.removeChild(styleRef.value); isExist(styleRef.value) && document.head.removeChild(styleRef.value);
isLoaded.value = false; isLoaded.value = false;
}; };

4
packages/core/src/utils/ConnectedOverlayScrollHandler.js
View File

@ -1,4 +1,4 @@
import DomHandler from './DomHandler'; import { getScrollableParents } from '@primeuix/utils/dom';
export default class ConnectedOverlayScrollHandler { export default class ConnectedOverlayScrollHandler {
constructor(element, listener = () => {}) { constructor(element, listener = () => {}) {
@ -7,7 +7,7 @@ export default class ConnectedOverlayScrollHandler {
} }
bindScrollListener() { bindScrollListener() {
this.scrollableParents = DomHandler.getScrollableParents(this.element); this.scrollableParents = getScrollableParents(this.element);
for (let i = 0; i < this.scrollableParents.length; i++) { for (let i = 0; i < this.scrollableParents.length; i++) {
this.scrollableParents[i].addEventListener('scroll', this.listener); this.scrollableParents[i].addEventListener('scroll', this.listener);

862
packages/core/src/utils/DomHandler.js
View File

@ -1,862 +0,0 @@
import { $dt } from '@primeuix/styled';
export default {
innerWidth(el) {
if (el) {
let width = el.offsetWidth;
let style = getComputedStyle(el);
width += parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
return width;
}
return 0;
},
width(el) {
if (el) {
let width = el.offsetWidth;
let style = getComputedStyle(el);
width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
return width;
}
return 0;
},
getWindowScrollTop() {
let doc = document.documentElement;
return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
},
getWindowScrollLeft() {
let doc = document.documentElement;
return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
},
getOuterWidth(el, margin) {
if (el) {
let width = el.offsetWidth;
if (margin) {
let style = getComputedStyle(el);
width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
}
return width;
}
return 0;
},
getOuterHeight(el, margin) {
if (el) {
let height = el.offsetHeight;
if (margin) {
let style = getComputedStyle(el);
height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
}
return height;
}
return 0;
},
getClientHeight(el, margin) {
if (el) {
let height = el.clientHeight;
if (margin) {
let style = getComputedStyle(el);
height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
}
return height;
}
return 0;
},
getViewport() {
let win = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
w = win.innerWidth || e.clientWidth || g.clientWidth,
h = win.innerHeight || e.clientHeight || g.clientHeight;
return { width: w, height: h };
},
getOffset(el) {
if (el) {
let rect = el.getBoundingClientRect();
return {
top: rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0),
left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0)
};
}
return {
top: 'auto',
left: 'auto'
};
},
index(element) {
if (element) {
let children = this.getParentNode(element)?.childNodes;
let num = 0;
for (let i = 0; i < children.length; i++) {
if (children[i] === element) return num;
if (children[i].nodeType === 1) num++;
}
}
return -1;
},
addMultipleClasses(element, classNames) {
if (element && classNames) {
[classNames]
.flat()
.filter(Boolean)
.forEach((cNames) => cNames.split(' ').forEach((className) => this.addClass(element, className)));
}
},
removeMultipleClasses(element, classNames) {
if (element && classNames) {
[classNames]
.flat()
.filter(Boolean)
.forEach((cNames) => cNames.split(' ').forEach((className) => this.removeClass(element, className)));
}
},
addClass(element, className) {
if (element && className && !this.hasClass(element, className)) {
if (element.classList) element.classList.add(className);
else element.className += ' ' + className;
}
},
removeClass(element, className) {
if (element && className) {
if (element.classList) element.classList.remove(className);
else element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
},
hasClass(element, className) {
if (element) {
if (element.classList) return element.classList.contains(className);
else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
}
return false;
},
addStyles(element, styles = {}) {
if (element) {
Object.entries(styles).forEach(([key, value]) => (element.style[key] = value));
}
},
find(element, selector) {
return this.isElement(element) ? element.querySelectorAll(selector) : [];
},
findSingle(element, selector) {
return this.isElement(element) ? (element.matches(selector) ? element : element.querySelector(selector)) : null;
},
createElement(type, attributes = {}, ...children) {
if (type) {
const element = document.createElement(type);
this.setAttributes(element, attributes);
element.append(...children);
return element;
}
return undefined;
},
setAttribute(element, attribute = '', value) {
if (this.isElement(element) && value !== null && value !== undefined) {
element.setAttribute(attribute, value);
}
},
setAttributes(element, attributes = {}) {
if (this.isElement(element)) {
const computedStyles = (rule, value) => {
const styles = element?.$attrs?.[rule] ? [element?.$attrs?.[rule]] : [];
return [value].flat().reduce((cv, v) => {
if (v !== null && v !== undefined) {
const type = typeof v;
if (type === 'string' || type === 'number') {
cv.push(v);
} else if (type === 'object') {
const _cv = Array.isArray(v)
? computedStyles(rule, v)
: Object.entries(v).map(([_k, _v]) => (rule === 'style' && (!!_v || _v === 0) ? `${_k.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}:${_v}` : !!_v ? _k : undefined));
cv = _cv.length ? cv.concat(_cv.filter((c) => !!c)) : cv;
}
}
return cv;
}, styles);
};
Object.entries(attributes).forEach(([key, value]) => {
if (value !== undefined && value !== null) {
const matchedEvent = key.match(/^on(.+)/);
if (matchedEvent) {
element.addEventListener(matchedEvent[1].toLowerCase(), value);
} else if (key === 'p-bind') {
this.setAttributes(element, value);
} else {
value = key === 'class' ? [...new Set(computedStyles('class', value))].join(' ').trim() : key === 'style' ? computedStyles('style', value).join(';').trim() : value;
(element.$attrs = element.$attrs || {}) && (element.$attrs[key] = value);
element.setAttribute(key, value);
}
}
});
}
},
getAttribute(element, name) {
if (this.isElement(element)) {
const value = element.getAttribute(name);
if (!isNaN(value)) {
return +value;
}
if (value === 'true' || value === 'false') {
return value === 'true';
}
return value;
}
return undefined;
},
isAttributeEquals(element, name, value) {
return this.isElement(element) ? this.getAttribute(element, name) === value : false;
},
isAttributeNotEquals(element, name, value) {
return !this.isAttributeEquals(element, name, value);
},
getHeight(el) {
if (el) {
let height = el.offsetHeight;
let style = getComputedStyle(el);
height -= parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
return height;
}
return 0;
},
getWidth(el) {
if (el) {
let width = el.offsetWidth;
let style = getComputedStyle(el);
width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
return width;
}
return 0;
},
absolutePosition(element, target, gutter = true) {
if (element) {
const elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
const elementOuterHeight = elementDimensions.height;
const elementOuterWidth = elementDimensions.width;
const targetOuterHeight = target.offsetHeight;
const targetOuterWidth = target.offsetWidth;
const targetOffset = target.getBoundingClientRect();
const windowScrollTop = this.getWindowScrollTop();
const windowScrollLeft = this.getWindowScrollLeft();
const viewport = this.getViewport();
let top,
left,
origin = 'top';
if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
top = targetOffset.top + windowScrollTop - elementOuterHeight;
origin = 'bottom';
if (top < 0) {
top = windowScrollTop;
}
} else {
top = targetOuterHeight + targetOffset.top + windowScrollTop;
}
if (targetOffset.left + elementOuterWidth > viewport.width) left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
else left = targetOffset.left + windowScrollLeft;
element.style.top = top + 'px';
element.style.left = left + 'px';
element.style.transformOrigin = origin;
gutter && (element.style.marginTop = origin === 'bottom' ? `calc(${$dt('anchor.gutter', '2px').variable} * -1)` : $dt('anchor.gutter').variable);
}
},
relativePosition(element, target, gutter = true) {
if (element) {
const elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
const targetHeight = target.offsetHeight;
const targetOffset = target.getBoundingClientRect();
const viewport = this.getViewport();
let top,
left,
origin = 'top';
if (targetOffset.top + targetHeight + elementDimensions.height > viewport.height) {
top = -1 * elementDimensions.height;
origin = 'bottom';
if (targetOffset.top + top < 0) {
top = -1 * targetOffset.top;
}
} else {
top = targetHeight;
}
if (elementDimensions.width > viewport.width) {
// element wider then viewport and cannot fit on screen (align at left side of viewport)
left = targetOffset.left * -1;
} else if (targetOffset.left + elementDimensions.width > viewport.width) {
// element wider then viewport but can be fit on screen (align at right side of viewport)
left = (targetOffset.left + elementDimensions.width - viewport.width) * -1;
} else {
// element fits on screen (align with target)
left = 0;
}
element.style.top = top + 'px';
element.style.left = left + 'px';
element.style.transformOrigin = origin;
gutter && (element.style.marginTop = origin === 'bottom' ? `calc(${$dt('anchor.gutter', '2px').variable} * -1)` : $dt('anchor.gutter').variable);
}
},
nestedPosition(element, level) {
if (element) {
const parentItem = element.parentElement;
const elementOffset = this.getOffset(parentItem);
const viewport = this.getViewport();
const sublistWidth = element.offsetParent ? element.offsetWidth : this.getHiddenElementOuterWidth(element);
const itemOuterWidth = this.getOuterWidth(parentItem.children[0]);
let left;
if (parseInt(elementOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - this.calculateScrollbarWidth()) {
if (parseInt(elementOffset.left, 10) < sublistWidth) {
// for too small screens
if (level % 2 === 1) {
left = parseInt(elementOffset.left, 10) ? '-' + parseInt(elementOffset.left, 10) + 'px' : '100%';
} else if (level % 2 === 0) {
left = viewport.width - sublistWidth - this.calculateScrollbarWidth() + 'px';
}
} else {
left = '-100%';
}
} else {
left = '100%';
}
element.style.top = '0px';
element.style.left = left;
}
},
getParentNode(element) {
let parent = element?.parentNode;
if (parent && parent instanceof ShadowRoot && parent.host) {
parent = parent.host;
}
return parent;
},
getParents(element, parents = []) {
const parent = this.getParentNode(element);
return parent === null ? parents : this.getParents(parent, parents.concat([parent]));
},
getScrollableParents(element) {
let scrollableParents = [];
if (element) {
let parents = this.getParents(element);
const overflowRegex = /(auto|scroll)/;
const overflowCheck = (node) => {
try {
let styleDeclaration = window['getComputedStyle'](node, null);
return overflowRegex.test(styleDeclaration.getPropertyValue('overflow')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowX')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflowY'));
} catch (err) {
return false;
}
};
for (let parent of parents) {
let scrollSelectors = parent.nodeType === 1 && parent.dataset['scrollselectors'];
if (scrollSelectors) {
let selectors = scrollSelectors.split(',');
for (let selector of selectors) {
let el = this.findSingle(parent, selector);
if (el && overflowCheck(el)) {
scrollableParents.push(el);
}
}
}
if (parent.nodeType !== 9 && overflowCheck(parent)) {
scrollableParents.push(parent);
}
}
}
return scrollableParents;
},
getHiddenElementOuterHeight(element) {
if (element) {
element.style.visibility = 'hidden';
element.style.display = 'block';
let elementHeight = element.offsetHeight;
element.style.display = 'none';
element.style.visibility = 'visible';
return elementHeight;
}
return 0;
},
getHiddenElementOuterWidth(element) {
if (element) {
element.style.visibility = 'hidden';
element.style.display = 'block';
let elementWidth = element.offsetWidth;
element.style.display = 'none';
element.style.visibility = 'visible';
return elementWidth;
}
return 0;
},
getHiddenElementDimensions(element) {
if (element) {
let dimensions = {};
element.style.visibility = 'hidden';
element.style.display = 'block';
dimensions.width = element.offsetWidth;
dimensions.height = element.offsetHeight;
element.style.display = 'none';
element.style.visibility = 'visible';
return dimensions;
}
return 0;
},
fadeIn(element, duration) {
if (element) {
element.style.opacity = 0;
let last = +new Date();
let opacity = 0;
let tick = function () {
opacity = +element.style.opacity + (new Date().getTime() - last) / duration;
element.style.opacity = opacity;
last = +new Date();
if (+opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
};
tick();
}
},
fadeOut(element, ms) {
if (element) {
let opacity = 1,
interval = 50,
duration = ms,
gap = interval / duration;
let fading = setInterval(() => {
opacity -= gap;
if (opacity <= 0) {
opacity = 0;
clearInterval(fading);
}
element.style.opacity = opacity;
}, interval);
}
},
getUserAgent() {
return navigator.userAgent;
},
appendChild(element, target) {
if (this.isElement(target)) target.appendChild(element);
else if (target.el && target.elElement) target.elElement.appendChild(element);
else throw new Error('Cannot append ' + target + ' to ' + element);
},
isElement(obj) {
return typeof HTMLElement === 'object' ? obj instanceof HTMLElement : obj && typeof obj === 'object' && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === 'string';
},
scrollInView(container, item) {
let borderTopValue = getComputedStyle(container).getPropertyValue('borderTopWidth');
let borderTop = borderTopValue ? parseFloat(borderTopValue) : 0;
let paddingTopValue = getComputedStyle(container).getPropertyValue('paddingTop');
let paddingTop = paddingTopValue ? parseFloat(paddingTopValue) : 0;
let containerRect = container.getBoundingClientRect();
let itemRect = item.getBoundingClientRect();
let offset = itemRect.top + document.body.scrollTop - (containerRect.top + document.body.scrollTop) - borderTop - paddingTop;
let scroll = container.scrollTop;
let elementHeight = container.clientHeight;
let itemHeight = this.getOuterHeight(item);
if (offset < 0) {
container.scrollTop = scroll + offset;
} else if (offset + itemHeight > elementHeight) {
container.scrollTop = scroll + offset - elementHeight + itemHeight;
}
},
clearSelection() {
if (window.getSelection) {
if (window.getSelection().empty) {
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges && window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects().length > 0) {
window.getSelection().removeAllRanges();
}
} else if (document['selection'] && document['selection'].empty) {
try {
document['selection'].empty();
} catch (error) {
//ignore IE bug
}
}
},
getSelection() {
if (window.getSelection) return window.getSelection().toString();
else if (document.getSelection) return document.getSelection().toString();
else if (document['selection']) return document['selection'].createRange().text;
return null;
},
calculateScrollbarWidth() {
if (this.calculatedScrollbarWidth != null) return this.calculatedScrollbarWidth;
let scrollDiv = document.createElement('div');
this.addStyles(scrollDiv, {
width: '100px',
height: '100px',
overflow: 'scroll',
position: 'absolute',
top: '-9999px'
});
document.body.appendChild(scrollDiv);
let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
this.calculatedScrollbarWidth = scrollbarWidth;
return scrollbarWidth;
},
calculateBodyScrollbarWidth() {
return window.innerWidth - document.documentElement.offsetWidth;
},
getBrowser() {
if (!this.browser) {
let matched = this.resolveUserAgent();
this.browser = {};
if (matched.browser) {
this.browser[matched.browser] = true;
this.browser['version'] = matched.version;
}
if (this.browser['chrome']) {
this.browser['webkit'] = true;
} else if (this.browser['webkit']) {
this.browser['safari'] = true;
}
}
return this.browser;
},
resolveUserAgent() {
let ua = navigator.userAgent.toLowerCase();
let match = /(chrome)[ ]([\w.]+)/.exec(ua) || /(webkit)[ ]([\w.]+)/.exec(ua) || /(opera)(?:.*version|)[ ]([\w.]+)/.exec(ua) || /(msie) ([\w.]+)/.exec(ua) || (ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua)) || [];
return {
browser: match[1] || '',
version: match[2] || '0'
};
},
isVisible(element) {
return element && element.offsetParent != null;
},
invokeElementMethod(element, methodName, args) {
element[methodName].apply(element, args);
},
isExist(element) {
return !!(element !== null && typeof element !== 'undefined' && element.nodeName && this.getParentNode(element));
},
isClient() {
return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
},
focus(el, options) {
el && document.activeElement !== el && el.focus(options);
},
isFocusableElement(element, selector = '') {
return this.isElement(element)
? element.matches(`button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
[href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
[tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
[contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector}`)
: false;
},
getFocusableElements(element, selector = '') {
let focusableElements = this.find(
element,
`button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
[href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
[tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
[contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector}`
);
let visibleFocusableElements = [];
for (let focusableElement of focusableElements) {
if (getComputedStyle(focusableElement).display != 'none' && getComputedStyle(focusableElement).visibility != 'hidden') visibleFocusableElements.push(focusableElement);
}
return visibleFocusableElements;
},
getFirstFocusableElement(element, selector) {
const focusableElements = this.getFocusableElements(element, selector);
return focusableElements.length > 0 ? focusableElements[0] : null;
},
getLastFocusableElement(element, selector) {
const focusableElements = this.getFocusableElements(element, selector);
return focusableElements.length > 0 ? focusableElements[focusableElements.length - 1] : null;
},
getNextFocusableElement(container, element, selector) {
const focusableElements = this.getFocusableElements(container, selector);
const index = focusableElements.length > 0 ? focusableElements.findIndex((el) => el === element) : -1;
const nextIndex = index > -1 && focusableElements.length >= index + 1 ? index + 1 : -1;
return nextIndex > -1 ? focusableElements[nextIndex] : null;
},
getPreviousElementSibling(element, selector) {
let previousElement = element.previousElementSibling;
while (previousElement) {
if (previousElement.matches(selector)) {
return previousElement;
} else {
previousElement = previousElement.previousElementSibling;
}
}
return null;
},
getNextElementSibling(element, selector) {
let nextElement = element.nextElementSibling;
while (nextElement) {
if (nextElement.matches(selector)) {
return nextElement;
} else {
nextElement = nextElement.nextElementSibling;
}
}
return null;
},
isClickable(element) {
if (element) {
const targetNode = element.nodeName;
const parentNode = element.parentElement && element.parentElement.nodeName;
return (
targetNode === 'INPUT' ||
targetNode === 'TEXTAREA' ||
targetNode === 'BUTTON' ||
targetNode === 'A' ||
parentNode === 'INPUT' ||
parentNode === 'TEXTAREA' ||
parentNode === 'BUTTON' ||
parentNode === 'A' ||
!!element.closest('.p-button, .p-checkbox, .p-radiobutton') // @todo Add [data-pc-section="button"]
);
}
return false;
},
applyStyle(element, style) {
if (typeof style === 'string') {
element.style.cssText = style;
} else {
for (let prop in style) {
element.style[prop] = style[prop];
}
}
},
isIOS() {
return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
},
isAndroid() {
return /(android)/i.test(navigator.userAgent);
},
isTouchDevice() {
return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
},
hasCSSAnimation(element) {
if (element) {
const style = getComputedStyle(element);
const animationDuration = parseFloat(style.getPropertyValue('animation-duration') || '0');
return animationDuration > 0;
}
return false;
},
hasCSSTransition(element) {
if (element) {
const style = getComputedStyle(element);
const transitionDuration = parseFloat(style.getPropertyValue('transition-duration') || '0');
return transitionDuration > 0;
}
return false;
},
exportCSV(csv, filename) {
let blob = new Blob([csv], {
type: 'application/csv;charset=utf-8;'
});
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob(blob, filename + '.csv');
} else {
let link = document.createElement('a');
if (link.download !== undefined) {
link.setAttribute('href', URL.createObjectURL(blob));
link.setAttribute('download', filename + '.csv');
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
csv = 'data:text/csv;charset=utf-8,' + csv;
window.open(encodeURI(csv));
}
}
},
blockBodyScroll(className = 'p-overflow-hidden') {
document.body.style.setProperty($dt('scrollbar.width').name, this.calculateBodyScrollbarWidth() + 'px');
this.addClass(document.body, className);
},
unblockBodyScroll(className = 'p-overflow-hidden') {
document.body.style.removeProperty($dt('scrollbar.width').name);
this.removeClass(document.body, className);
}
};

32
packages/core/src/utils/EventBus.js
View File

@ -1,32 +0,0 @@
export default function primebus() {
const allHandlers = new Map();
return {
on(type, handler) {
let handlers = allHandlers.get(type);
if (!handlers) handlers = [handler];
else handlers.push(handler);
allHandlers.set(type, handlers);
},
off(type, handler) {
let handlers = allHandlers.get(type);
if (handlers) {
handlers.splice(handlers.indexOf(handler) >>> 0, 1);
}
},
emit(type, evt) {
let handlers = allHandlers.get(type);
if (handlers) {
handlers.slice().map((handler) => {
handler(evt);
});
}
}
};
}

6
packages/core/src/utils/HelperSet.js
View File

@ -1,4 +1,4 @@
import ObjectUtils from './ObjectUtils'; import { isNotEmpty } from '@primeuix/utils/object';
export default class { export default class {
helpers; helpers;
@ -23,7 +23,7 @@ export default class {
const children = this._get(parentInstance, slots); const children = this._get(parentInstance, slots);
const computed = children ? this._recursive([...this.helpers], children) : null; const computed = children ? this._recursive([...this.helpers], children) : null;
return ObjectUtils.isNotEmpty(computed) ? computed : null; return isNotEmpty(computed) ? computed : null;
} }
_isMatched(instance, key) { _isMatched(instance, key) {
const parent = instance?.parent; const parent = instance?.parent;
@ -41,7 +41,7 @@ export default class {
components = components.concat(this._recursive(components, child.children)); components = components.concat(this._recursive(components, child.children));
} else if (child.type.name === this.type) { } else if (child.type.name === this.type) {
components.push(child); components.push(child);
} else if (ObjectUtils.isNotEmpty(child.key)) { } else if (isNotEmpty(child.key)) {
components = components.concat(helpers.filter((c) => this._isMatched(c, child.key)).map((c) => c.vnode)); components = components.concat(helpers.filter((c) => this._isMatched(c, child.key)).map((c) => c.vnode));
} }
}); });

383
packages/core/src/utils/ObjectUtils.js
View File

@ -1,383 +0,0 @@
export default {
equals(obj1, obj2, field) {
if (field) return this.resolveFieldData(obj1, field) === this.resolveFieldData(obj2, field);
else return this.deepEquals(obj1, obj2);
},
deepEquals(a, b) {
if (a === b) return true;
if (a && b && typeof a == 'object' && typeof b == 'object') {
var arrA = Array.isArray(a),
arrB = Array.isArray(b),
i,
length,
key;
if (arrA && arrB) {
length = a.length;
if (length != b.length) return false;
for (i = length; i-- !== 0; ) if (!this.deepEquals(a[i], b[i])) return false;
return true;
}
if (arrA != arrB) return false;
var dateA = a instanceof Date,
dateB = b instanceof Date;
if (dateA != dateB) return false;
if (dateA && dateB) return a.getTime() == b.getTime();
var regexpA = a instanceof RegExp,
regexpB = b instanceof RegExp;
if (regexpA != regexpB) return false;
if (regexpA && regexpB) return a.toString() == b.toString();
var keys = Object.keys(a);
length = keys.length;
if (length !== Object.keys(b).length) return false;
for (i = length; i-- !== 0; ) if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
for (i = length; i-- !== 0; ) {
key = keys[i];
if (!this.deepEquals(a[key], b[key])) return false;
}
return true;
}
return a !== a && b !== b;
},
resolveFieldData(data, field) {
if (!data || !field) {
// short circuit if there is nothing to resolve
return null;
}
try {
const value = data[field];
if (this.isNotEmpty(value)) return value;
} catch {
// Performance optimization: https://github.com/primefaces/primereact/issues/4797
// do nothing and continue to other methods to resolve field data
}
if (Object.keys(data).length) {
if (this.isFunction(field)) {
return field(data);
} else if (field.indexOf('.') === -1) {
return data[field];
} else {
let fields = field.split('.');
let value = data;
for (var i = 0, len = fields.length; i < len; ++i) {
if (value == null) {
return null;
}
value = value[fields[i]];
}
return value;
}
}
return null;
},
getItemValue(obj, ...params) {
return this.isFunction(obj) ? obj(...params) : obj;
},
filter(value, fields, filterValue) {
var filteredItems = [];
if (value) {
for (let item of value) {
for (let field of fields) {
if (String(this.resolveFieldData(item, field)).toLowerCase().indexOf(filterValue.toLowerCase()) > -1) {
filteredItems.push(item);
break;
}
}
}
}
return filteredItems;
},
reorderArray(value, from, to) {
if (value && from !== to) {
if (to >= value.length) {
to %= value.length;
from %= value.length;
}
value.splice(to, 0, value.splice(from, 1)[0]);
}
},
findIndexInList(value, list) {
let index = -1;
if (list) {
for (let i = 0; i < list.length; i++) {
if (list[i] === value) {
index = i;
break;
}
}
}
return index;
},
contains(value, list) {
if (value != null && list && list.length) {
for (let val of list) {
if (this.equals(value, val)) return true;
}
}
return false;
},
insertIntoOrderedArray(item, index, arr, sourceArr) {
if (arr.length > 0) {
let injected = false;
for (let i = 0; i < arr.length; i++) {
let currentItemIndex = this.findIndexInList(arr[i], sourceArr);
if (currentItemIndex > index) {
arr.splice(i, 0, item);
injected = true;
break;
}
}
if (!injected) {
arr.push(item);
}
} else {
arr.push(item);
}
},
removeAccents(str) {
if (str && str.search(/[\xC0-\xFF]/g) > -1) {
str = str
.replace(/[\xC0-\xC5]/g, 'A')
.replace(/[\xC6]/g, 'AE')
.replace(/[\xC7]/g, 'C')
.replace(/[\xC8-\xCB]/g, 'E')
.replace(/[\xCC-\xCF]/g, 'I')
.replace(/[\xD0]/g, 'D')
.replace(/[\xD1]/g, 'N')
.replace(/[\xD2-\xD6\xD8]/g, 'O')
.replace(/[\xD9-\xDC]/g, 'U')
.replace(/[\xDD]/g, 'Y')
.replace(/[\xDE]/g, 'P')
.replace(/[\xE0-\xE5]/g, 'a')
.replace(/[\xE6]/g, 'ae')
.replace(/[\xE7]/g, 'c')
.replace(/[\xE8-\xEB]/g, 'e')
.replace(/[\xEC-\xEF]/g, 'i')
.replace(/[\xF1]/g, 'n')
.replace(/[\xF2-\xF6\xF8]/g, 'o')
.replace(/[\xF9-\xFC]/g, 'u')
.replace(/[\xFE]/g, 'p')
.replace(/[\xFD\xFF]/g, 'y');
}
return str;
},
getVNodeProp(vnode, prop) {
if (vnode) {
let props = vnode.props;
if (props) {
let kebabProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
let propName = Object.prototype.hasOwnProperty.call(props, kebabProp) ? kebabProp : prop;
return vnode.type.extends.props[prop].type === Boolean && props[propName] === '' ? true : props[propName];
}
}
return null;
},
toFlatCase(str) {
// convert snake, kebab, camel and pascal cases to flat case
return this.isString(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
},
toKebabCase(str) {
// convert snake, camel and pascal cases to kebab case
return this.isString(str)
? str
.replace(/(_)/g, '-')
.replace(/[A-Z]/g, (c, i) => (i === 0 ? c : '-' + c.toLowerCase()))
.toLowerCase()
: str;
},
toCapitalCase(str) {
return this.isString(str, { empty: false }) ? str[0].toUpperCase() + str.slice(1) : str;
},
isEmpty(value) {
return value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0) || (!(value instanceof Date) && typeof value === 'object' && Object.keys(value).length === 0);
},
isNotEmpty(value) {
return !this.isEmpty(value);
},
isFunction(value) {
return !!(value && value.constructor && value.call && value.apply);
},
isObject(value, empty = true) {
return value instanceof Object && value.constructor === Object && (empty || Object.keys(value).length !== 0);
},
isDate(value) {
return value instanceof Date && value.constructor === Date;
},
isArray(value, empty = true) {
return Array.isArray(value) && (empty || value.length !== 0);
},
isString(value, empty = true) {
return typeof value === 'string' && (empty || value !== '');
},
isPrintableCharacter(char = '') {
return this.isNotEmpty(char) && char.length === 1 && char.match(/\S| /);
},
/**
* Firefox-v103 does not currently support the "findLast" method. It is stated that this method will be supported with Firefox-v104.
* https://caniuse.com/mdn-javascript_builtins_array_findlast
*/
findLast(arr, callback) {
let item;
if (this.isNotEmpty(arr)) {
try {
item = arr.findLast(callback);
} catch {
item = [...arr].reverse().find(callback);
}
}
return item;
},
/**
* Firefox-v103 does not currently support the "findLastIndex" method. It is stated that this method will be supported with Firefox-v104.
* https://caniuse.com/mdn-javascript_builtins_array_findlastindex
*/
findLastIndex(arr, callback) {
let index = -1;
if (this.isNotEmpty(arr)) {
try {
index = arr.findLastIndex(callback);
} catch {
index = arr.lastIndexOf([...arr].reverse().find(callback));
}
}
return index;
},
sort(value1, value2, order = 1, comparator, nullSortOrder = 1) {
const result = this.compare(value1, value2, comparator, order);
let finalSortOrder = order;
// nullSortOrder == 1 means Excel like sort nulls at bottom
if (this.isEmpty(value1) || this.isEmpty(value2)) {
finalSortOrder = nullSortOrder === 1 ? order : nullSortOrder;
}
return finalSortOrder * result;
},
compare(value1, value2, comparator, order = 1) {
let result = -1;
const emptyValue1 = this.isEmpty(value1);
const emptyValue2 = this.isEmpty(value2);
if (emptyValue1 && emptyValue2) result = 0;
else if (emptyValue1) result = order;
else if (emptyValue2) result = -order;
else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparator(value1, value2);
else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return result;
},
localeComparator() {
//performance gain using Int.Collator. It is not recommended to use localeCompare against large arrays.
return new Intl.Collator(undefined, { numeric: true }).compare;
},
nestedKeys(obj = {}, parentKey = '') {
return Object.entries(obj).reduce((o, [key, value]) => {
const currentKey = parentKey ? `${parentKey}.${key}` : key;
this.isObject(value) ? (o = o.concat(this.nestedKeys(value, currentKey))) : o.push(currentKey);
return o;
}, []);
},
stringify(value, indent = 2, currentIndent = 0) {
const currentIndentStr = ' '.repeat(currentIndent);
const nextIndentStr = ' '.repeat(currentIndent + indent);
if (this.isArray(value)) {
return '[' + value.map((v) => this.stringify(v, indent, currentIndent + indent)).join(', ') + ']';
} else if (this.isDate(value)) {
return value.toISOString();
} else if (this.isFunction(value)) {
return value.toString();
} else if (this.isObject(value)) {
return (
'{\n' +
Object.entries(value)
.map(([k, v]) => `${nextIndentStr}${k}: ${this.stringify(v, indent, currentIndent + indent)}`)
.join(',\n') +
`\n${currentIndentStr}` +
'}'
);
} else {
return JSON.stringify(value);
}
},
minifyCSS(css) {
return css
? css
.replace(/\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/g, '')
.replace(/ {2,}/g, ' ')
.replace(/ ([{:}]) /g, '$1')
.replace(/([;,]) /g, '$1')
.replace(/ !/g, '!')
.replace(/: /g, ':')
: css;
}
};

10
packages/core/src/utils/UniqueComponentId.js
View File

@ -1,11 +1,5 @@
const lastIds = {}; import { uuid } from '@primeuix/utils/uuid';
export default function (prefix = 'pv_id_') { export default function (prefix = 'pv_id_') {
if (!lastIds.hasOwnProperty(prefix)) { return uuid(prefix);
lastIds[prefix] = 0;
}
lastIds[prefix]++;
return `${prefix}${lastIds[prefix]}`;
} }

112
packages/core/src/utils/Utils.d.ts vendored
View File

@ -1,3 +1,5 @@
export * from '@primeuix/utils';
export declare class ConnectedOverlayScrollHandler { export declare class ConnectedOverlayScrollHandler {
constructor(element: any, listener?: () => void); constructor(element: any, listener?: () => void);
bindScrollListener(): void; bindScrollListener(): void;
@ -5,103 +7,6 @@ export declare class ConnectedOverlayScrollHandler {
destroy(): void; destroy(): void;
} }
export declare class DomHandler {
static innerWidth(el: HTMLElement): number;
static width(el: HTMLElement): number;
static getWindowScrollTop(): number;
static getWindowScrollLeft(): number;
static getOuterWidth(el: HTMLElement, margin: boolean): number;
static getOuterHeight(el: HTMLElement, margin: boolean): number;
static getClientHeight(el: HTMLElement, margin: boolean): number;
static getViewport(): { width: number; height: number };
static getOffset(el: HTMLElement): { top: any; left: any };
static index(el: HTMLElement): number;
static addMultipleClasses(el: HTMLElement, classNames: string | string[]): void;
static addRemoveClasses(el: HTMLElement, classNames: string | string[]): void;
static addClass(el: HTMLElement, className: string): void;
static removeClass(el: HTMLElement, className: string): void;
static hasClass(el: HTMLElement, className: string): boolean;
static addStyles(el: HTMLElement, styles: object): void;
static find(el: HTMLElement, selector: string): any[];
static findSingle(el: HTMLElement, selector: string): any;
static createElement(type: string, attributes: object, ...children: any): HTMLElement;
static setAttribute(el: HTMLElement, attribute: string, value: any): void;
static setAttributes(el: HTMLElement, attributes: object): void;
static getAttribute(el: HTMLElement, name: string): any;
static isAttributeEquals(el: HTMLElement, name: string, value: any): boolean;
static isAttributeNotEquals(el: HTMLElement, name: string, value: any): boolean;
static getHeight(el: HTMLElement): number;
static getWidth(el: HTMLElement): number;
static absolutePosition(el: HTMLElement, target: HTMLElement): void;
static relativePosition(el: HTMLElement, target: HTMLElement): void;
static nestedPosition(el: HTMLElement, level: number): void;
static getParents(el: HTMLElement, parents?: any[]): any[];
static getScrollableParents(el: HTMLElement): any[];
static getHiddenElementOuterHeight(el: HTMLElement): number;
static getHiddenElementOuterWidth(el: HTMLElement): number;
static getHiddenElementDimensions(el: HTMLElement): { width?: number; height?: number };
static fadeIn(el: HTMLElement, duration: number): void;
static fadeOut(el: HTMLElement, duration: number): void;
static getUserAgent(): string;
static appendChild(el: HTMLElement, target: HTMLElement): void;
static scrollInView(container: HTMLElement, item: HTMLElement): void;
static clearSelection(): void;
static getSelection(): string | null;
static calculateScrollbarWidth(): number;
static calculateBodyScrollbarWidth(): number;
static getBrowser(): object;
static resolveUserAgent(): { browser: string; version: string };
static isVisible(el: HTMLElement): boolean;
static invokeElementMethod(el: HTMLElement, methodName: string, args: any): void;
static isExist(el: HTMLElement): boolean;
static isClient(): boolean;
static focus(el: HTMLElement, options?: FocusOptions): void;
static getFocusableElements(el: HTMLElement, selector?: string): any[];
static getFirstFocusableElement(el: HTMLElement, selector?: string): any;
static getLastFocusableElement(el: HTMLElement, selector?: string): any;
static getPreviousElementSibling(el: HTMLElement, selector?: string): any;
static getNextElementSibling(el: HTMLElement, selector?: string): any;
static isClickable(el: HTMLElement): boolean;
static applyStyle(el: HTMLElement, style: any): void;
static isIOS(): boolean;
static isAndroid(): boolean;
static isTouchDevice(): boolean;
static hasCSSAnimation(el: HTMLElement): boolean;
static hasCSSTransition(el: HTMLElement): boolean;
static exportCSV(csv: any, filename: string): void;
static blockBodyScroll(className?: string): void;
static unblockBodyScroll(className?: string): void;
}
export declare class ObjectUtils {
static equals(obj1: any, obj2: any, field: string): boolean;
static deepEquals(a: any, b: any): boolean;
static resolveFieldData(data: any, field: string): any;
static filter(value: any, fields: any, filterValue: any): any;
static reorderArray(value: any, from: number, to: number): void;
static findIndexInList(value: any, list: any[], dataKey?: string): number;
static contains(value: any, list: any[]): boolean;
static insertIntoOrderedArray(item: any, index: number, arr: any[], sourceArr: any[]): void;
static removeAccents(str: any): string;
static toFlatCase(str: string): string;
static toCapitalCase(str: string): string;
static toKebabCase(str: string): string;
static isEmpty(value: any): boolean;
static isNotEmpty(value: any): boolean;
static isFunction(value: any): boolean;
static isObject(value: any, empty?: boolean): boolean;
static isDate(value: any): boolean;
static isArray(value: any, empty?: boolean): boolean;
static isString(value: any, empty?: boolean): boolean;
static isPrintableCharacter(char: string): boolean;
static findLast(value: any[], callback: () => any): any;
static findLastIndex(value: any[], callback: () => any): number;
static sort(value1: any, value2: any, order: number, comparator: (a: any, b: any) => any, nullSortOrder: number): number;
static compare(value1: any, value2: any, comparator: (a: any, b: any) => any, order: number): number;
static nestedKeys(obj: object, parentKey?: string): string[];
static stringify(value: any, indent?: number, currentIndent?: number): string;
}
export declare class HelperSet { export declare class HelperSet {
constructor(options: { init?: any; type?: string }); constructor(options: { init?: any; type?: string });
add(instance: any): void; add(instance: any): void;
@ -111,17 +16,4 @@ export declare class HelperSet {
get(parentInstance?: any, slots?: any): any[] | null | undefined; get(parentInstance?: any, slots?: any): any[] | null | undefined;
} }
export declare namespace ZIndexUtils {
export function get(el?: HTMLElement): number;
export function set(key: string, el: HTMLElement, baseZIndex?: number): void;
export function clear(el: HTMLElement): void;
export function getCurrent(): number;
}
export declare function UniqueComponentId(prefix?: string): string; export declare function UniqueComponentId(prefix?: string): string;
export declare function EventBus(): {
on(type: string, fn: any): void;
emit(type: string, evt?: any): void;
off(type: string, fn: any): void;
};

28
packages/core/src/utils/Utils.js
View File

@ -1,13 +1,19 @@
/* export * from '@primeuix/utils';
* @todo - Move to @primeui/utils export { default as ConnectedOverlayScrollHandler } from './ConnectedOverlayScrollHandler';
*/ export { default as HelperSet } from './HelperSet';
export { default as UniqueComponentId } from './UniqueComponentId';
import ConnectedOverlayScrollHandler from './ConnectedOverlayScrollHandler'; export function getVNodeProp(vnode, prop) {
import DomHandler from './DomHandler'; if (vnode) {
import EventBus from './EventBus'; let props = vnode.props;
import HelperSet from './HelperSet';
import ObjectUtils from './ObjectUtils';
import UniqueComponentId from './UniqueComponentId';
import ZIndexUtils from './ZIndexUtils';
export { ConnectedOverlayScrollHandler, DomHandler, EventBus, HelperSet, ObjectUtils, UniqueComponentId, ZIndexUtils }; if (props) {
let kebabProp = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
let propName = Object.prototype.hasOwnProperty.call(props, kebabProp) ? kebabProp : prop;
return vnode.type.extends.props[prop].type === Boolean && props[propName] === '' ? true : props[propName];
}
}
return null;
}

46
packages/core/src/utils/ZIndexUtils.js
View File

@ -1,46 +0,0 @@
function handler() {
let zIndexes = [];
const generateZIndex = (key, autoZIndex, baseZIndex = 999) => {
const lastZIndex = getLastZIndex(key, autoZIndex, baseZIndex);
const newZIndex = lastZIndex.value + (lastZIndex.key === key ? 0 : baseZIndex) + 1;
zIndexes.push({ key, value: newZIndex });
return newZIndex;
};
const revertZIndex = (zIndex) => {
zIndexes = zIndexes.filter((obj) => obj.value !== zIndex);
};
const getCurrentZIndex = (key, autoZIndex) => {
return getLastZIndex(key, autoZIndex).value;
};
const getLastZIndex = (key, autoZIndex, baseZIndex = 0) => {
return [...zIndexes].reverse().find((obj) => (autoZIndex ? true : obj.key === key)) || { key, value: baseZIndex };
};
const getZIndex = (el) => {
return el ? parseInt(el.style.zIndex, 10) || 0 : 0;
};
return {
get: getZIndex,
set: (key, el, baseZIndex) => {
if (el) {
el.style.zIndex = String(generateZIndex(key, true, baseZIndex));
}
},
clear: (el) => {
if (el) {
revertZIndex(getZIndex(el));
el.style.zIndex = '';
}
},
getCurrent: (key) => getCurrentZIndex(key, true)
};
}
export default handler();

4
packages/icons/src/baseicon/BaseIcon.vue
View File

@ -1,6 +1,6 @@
<script> <script>
import { isEmpty } from '@primeuix/utils/object';
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { ObjectUtils } from '@primevue/core/utils';
import BaseIconStyle from '@primevue/icons/baseicon/style'; import BaseIconStyle from '@primevue/icons/baseicon/style';
export default { export default {
@ -25,7 +25,7 @@ export default {
}, },
methods: { methods: {
pti() { pti() {
const isLabelEmpty = ObjectUtils.isEmpty(this.label); const isLabelEmpty = isEmpty(this.label);
return { return {
...(!this.isUnstyled && { ...(!this.isUnstyled && {

7
packages/nuxt-module/package.json
View File

@ -36,7 +36,10 @@
"primevue", "primevue",
"@primevue/metadata", "@primevue/metadata",
"@primevue/auto-import-resolver", "@primevue/auto-import-resolver",
"unplugin-vue-components" "unplugin-vue-components",
"@primeuix/utils",
"@primeuix/utils/object",
"@primeuix/utils/dom"
] ]
}, },
"publishConfig": { "publishConfig": {
@ -86,4 +89,4 @@
"engines": { "engines": {
"node": ">=12.11.0" "node": ">=12.11.0"
} }
} }

13
packages/nuxt-module/src/register.ts
View File

@ -1,4 +1,5 @@
import { addComponent, addImports } from '@nuxt/kit'; import { addComponent, addImports } from '@nuxt/kit';
import { isNotEmpty, isString, resolve } from '@primeuix/utils/object';
import type { MetaType } from '@primevue/metadata'; import type { MetaType } from '@primevue/metadata';
import { components, composables, directives } from '@primevue/metadata'; import { components, composables, directives } from '@primevue/metadata';
import type { PrimeVueConfiguration } from 'primevue/config'; import type { PrimeVueConfiguration } from 'primevue/config';
@ -6,14 +7,14 @@ import type { ConstructsType, ModuleOptions, ResolvePathOptions } from './types'
import { Utils } from './utils'; import { Utils } from './utils';
function registerItems(items: any[] = [], options: ConstructsType = {}, params: any) { function registerItems(items: any[] = [], options: ConstructsType = {}, params: any) {
const included = Utils.object.getValue(options.include, params); const included = resolve(options.include, params);
const excluded = Utils.object.getValue(options.exclude, params); const excluded = resolve(options.exclude, params);
const isMatched = (name: string, tName: any) => name?.toLowerCase() === (Utils.object.isString(tName) ? tName?.toLowerCase() : tName?.name?.toLowerCase()); const isMatched = (name: string, tName: any) => name?.toLowerCase() === (isString(tName) ? tName?.toLowerCase() : tName?.name?.toLowerCase());
return items.filter((item) => { return items.filter((item) => {
const name = item?.name; const name = item?.name;
const matchedIn = included === '*' || included === undefined ? true : Utils.object.isNotEmpty(included) ? included.some((inc: any) => isMatched(name, inc)) : false; const matchedIn = included === '*' || included === undefined ? true : isNotEmpty(included) ? included.some((inc: any) => isMatched(name, inc)) : false;
const matchedEx = included === '*' && excluded === '*' ? false : excluded === '*' ? true : Utils.object.isNotEmpty(excluded) ? excluded.some((exc: any) => isMatched(name, exc)) : false; const matchedEx = included === '*' && excluded === '*' ? false : excluded === '*' ? true : isNotEmpty(excluded) ? excluded.some((exc: any) => isMatched(name, exc)) : false;
return matchedIn && !matchedEx; return matchedIn && !matchedEx;
}); });
@ -111,7 +112,7 @@ function registerStyles(resolvePath: any, registered: any, moduleOptions: Module
]; ];
if (!moduleOptions.autoImport && !options?.unstyled) { if (!moduleOptions.autoImport && !options?.unstyled) {
if (Utils.object.isNotEmpty(registered?.components)) { if (isNotEmpty(registered?.components)) {
styles.push({ styles.push({
name: 'BaseComponentStyle', name: 'BaseComponentStyle',
as: 'BaseComponentStyle', as: 'BaseComponentStyle',

29
packages/nuxt-module/src/utils.ts
View File

@ -1,37 +1,20 @@
import { createStyleAsString } from '@primeuix/utils/dom';
import { isFunction } from '@primeuix/utils/object';
import type { MetaType } from '@primevue/metadata'; import type { MetaType } from '@primevue/metadata';
import type { ConstructsType, ResolvePathOptions } from './types'; import type { ConstructsType, ResolvePathOptions } from './types';
export const Utils = { export const Utils = {
object: { object: {
isEmpty(value: any) {
return value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0) || (!(value instanceof Date) && typeof value === 'object' && Object.keys(value).length === 0);
},
isNotEmpty(value: any) {
return !this.isEmpty(value);
},
isFunction(value: any) {
return !!(value && value.constructor && value.call && value.apply);
},
isString(value: any, empty: boolean = true) {
return typeof value === 'string' && (empty || value !== '');
},
getValue(obj: any, ...params: any) {
return this.isFunction(obj) ? obj(...params) : obj;
},
getName(item: MetaType, options: ConstructsType) { getName(item: MetaType, options: ConstructsType) {
return this.isFunction(options?.name) ? options.name(item) : `${options.prefix}${item.name}`; return isFunction(options?.name) ? options.name(item) : `${options.prefix}${item.name}`;
}, },
getPath(fn: any, options: ResolvePathOptions) { getPath(fn: any, options: ResolvePathOptions) {
return this.isFunction(fn) ? fn(options) : options.from; return isFunction(fn) ? fn(options) : options.from;
}, },
createStyleAsString(css: string, options = { name: '' }) { createStyleAsString(css: string, options = { name: '' }) {
if (css) { const { name, ...rest } = options;
const { name, ...rest } = options;
return `'<style type="text/css" data-primevue-style-id="${name}"${Object.entries(rest).reduce((s, [k, v]) => s + `${k}="${v}"`, ' ')}>${css}</style>'`; return createStyleAsString(css, { 'data-primevue-style-id': name, ...rest });
}
return '';
} }
} }
}; };

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

@ -19,7 +19,7 @@ const GLOBALS = {
// externals // externals
const GLOBAL_EXTERNALS = ['vue', 'chart.js/auto', 'quill']; const GLOBAL_EXTERNALS = ['vue', 'chart.js/auto', 'quill'];
const INLINE_EXTERNALS = [/@primevue\/core\/.*/, /@primevue\/icons\/.*/, '@primeuix/styled']; const INLINE_EXTERNALS = [/@primevue\/core\/.*/, /@primevue\/icons\/.*/, '@primeuix/styled', /@primeuix\/utils\/.*/];
const EXTERNALS = [...GLOBAL_EXTERNALS, ...INLINE_EXTERNALS]; const EXTERNALS = [...GLOBAL_EXTERNALS, ...INLINE_EXTERNALS];
// alias // alias

10
packages/primevue/src/accordionheader/AccordionHeader.vue
View File

@ -22,7 +22,7 @@
</template> </template>
<script> <script>
import { DomHandler } from '@primevue/core/utils'; import { findSingle, getAttribute, focus } from '@primeuix/utils/dom';
import ChevronDownIcon from '@primevue/icons/chevrondown'; import ChevronDownIcon from '@primevue/icons/chevrondown';
import ChevronUpIcon from '@primevue/icons/chevronup'; import ChevronUpIcon from '@primevue/icons/chevronup';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
@ -101,17 +101,17 @@ export default {
return headerElement?.closest('[data-pc-name="accordionpanel"]'); return headerElement?.closest('[data-pc-name="accordionpanel"]');
}, },
findHeader(panelElement) { findHeader(panelElement) {
return DomHandler.findSingle(panelElement, '[data-pc-name="accordionheader"]'); return findSingle(panelElement, '[data-pc-name="accordionheader"]');
}, },
findNextPanel(panelElement, selfCheck = false) { findNextPanel(panelElement, selfCheck = false) {
const element = selfCheck ? panelElement : panelElement.nextElementSibling; const element = selfCheck ? panelElement : panelElement.nextElementSibling;
return element ? (DomHandler.getAttribute(element, 'data-p-disabled') ? this.findNextPanel(element) : this.findHeader(element)) : null; return element ? (getAttribute(element, 'data-p-disabled') ? this.findNextPanel(element) : this.findHeader(element)) : null;
}, },
findPrevPanel(panelElement, selfCheck = false) { findPrevPanel(panelElement, selfCheck = false) {
const element = selfCheck ? panelElement : panelElement.previousElementSibling; const element = selfCheck ? panelElement : panelElement.previousElementSibling;
return element ? (DomHandler.getAttribute(element, 'data-p-disabled') ? this.findPrevPanel(element) : this.findHeader(element)) : null; return element ? (getAttribute(element, 'data-p-disabled') ? this.findPrevPanel(element) : this.findHeader(element)) : null;
}, },
findFirstPanel() { findFirstPanel() {
return this.findNextPanel(this.$pcAccordion.$el.firstElementChild, true); return this.findNextPanel(this.$pcAccordion.$el.firstElementChild, true);
@ -123,7 +123,7 @@ export default {
this.$pcAccordion.updateValue(this.$pcAccordionPanel.value); this.$pcAccordion.updateValue(this.$pcAccordionPanel.value);
}, },
changeFocusedPanel(event, element) { changeFocusedPanel(event, element) {
DomHandler.focus(this.findHeader(element)); focus(this.findHeader(element));
} }
}, },
computed: { computed: {

14
packages/primevue/src/animateonscroll/AnimateOnScroll.js
View File

@ -1,4 +1,4 @@
import { DomHandler } from '@primevue/core/utils'; import { addClass, removeClass } from '@primeuix/utils/dom';
import BaseAnimateOnScroll from './BaseAnimateOnScroll'; import BaseAnimateOnScroll from './BaseAnimateOnScroll';
const AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', { const AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', {
@ -24,7 +24,7 @@ const AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', {
bindAnimationEvents() { bindAnimationEvents() {
if (!this.animationEndListener) { if (!this.animationEndListener) {
this.animationEndListener = () => { this.animationEndListener = () => {
DomHandler.removeMultipleClasses(this.$el, [this.$value.enterClass, this.$value.leaveClass]); removeClass(this.$el, [this.$value.enterClass, this.$value.leaveClass]);
!this.$modifiers.once && this.resetObserver.observe(this.$el); !this.$modifiers.once && this.resetObserver.observe(this.$el);
this.unbindAnimationEvents(); this.unbindAnimationEvents();
}; };
@ -56,7 +56,7 @@ const AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', {
([entry]) => { ([entry]) => {
if (entry.boundingClientRect.top > 0 && !entry.isIntersecting) { if (entry.boundingClientRect.top > 0 && !entry.isIntersecting) {
this.$el.style.opacity = this.$value.enterClass ? '0' : ''; this.$el.style.opacity = this.$value.enterClass ? '0' : '';
DomHandler.removeMultipleClasses(this.$el, [this.$value.enterClass, this.$value.leaveClass]); removeClass(this.$el, [this.$value.enterClass, this.$value.leaveClass]);
this.resetObserver.unobserve(this.$el); this.resetObserver.unobserve(this.$el);
} }
@ -69,8 +69,8 @@ const AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', {
enter() { enter() {
if (this.animationState !== 'enter' && this.$value.enterClass) { if (this.animationState !== 'enter' && this.$value.enterClass) {
this.$el.style.opacity = ''; this.$el.style.opacity = '';
DomHandler.removeMultipleClasses(this.$el, this.$value.leaveClass); removeClass(this.$el, this.$value.leaveClass);
DomHandler.addMultipleClasses(this.$el, this.$value.enterClass); addClass(this.$el, this.$value.enterClass);
this.$modifiers.once && this.unbindIntersectionObserver(this.$el); this.$modifiers.once && this.unbindIntersectionObserver(this.$el);
@ -81,8 +81,8 @@ const AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', {
leave() { leave() {
if (this.animationState !== 'leave' && this.$value.leaveClass) { if (this.animationState !== 'leave' && this.$value.leaveClass) {
this.$el.style.opacity = this.$value.enterClass ? '0' : ''; this.$el.style.opacity = this.$value.enterClass ? '0' : '';
DomHandler.removeMultipleClasses(this.$el, this.$value.enterClass); removeClass(this.$el, this.$value.enterClass);
DomHandler.addMultipleClasses(this.$el, this.$value.leaveClass); addClass(this.$el, this.$value.leaveClass);
this.bindAnimationEvents(); this.bindAnimationEvents();
this.animationState = 'leave'; this.animationState = 'leave';

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

@ -180,7 +180,10 @@
</template> </template>
<script> <script>
import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils'; import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { focus, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, findSingle } from '@primeuix/utils/dom';
import { resolveFieldData, isEmpty, isNotEmpty, equals, findLastIndex } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
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';
@ -247,7 +250,7 @@ export default {
} }
if (this.overlay) { if (this.overlay) {
ZIndexUtils.clear(this.overlay); ZIndex.clear(this.overlay);
this.overlay = null; this.overlay = null;
} }
}, },
@ -256,13 +259,13 @@ export default {
return this.virtualScrollerDisabled ? index : fn && fn(index)['index']; return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
}, },
getOptionLabel(option) { getOptionLabel(option) {
return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option; return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;
}, },
getOptionValue(option) { getOptionValue(option) {
return option; // TODO: The 'optionValue' properties can be added. return option; // TODO: The 'optionValue' properties can be added.
}, },
getOptionRenderKey(option, index) { getOptionRenderKey(option, index) {
return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index; return (this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
}, },
getPTOptions(option, itemOptions, index, key) { getPTOptions(option, itemOptions, index, key) {
return this.ptm(key, { return this.ptm(key, {
@ -274,16 +277,16 @@ export default {
}); });
}, },
isOptionDisabled(option) { isOptionDisabled(option) {
return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false; return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
}, },
isOptionGroup(option) { isOptionGroup(option) {
return this.optionGroupLabel && option.optionGroup && option.group; return this.optionGroupLabel && option.optionGroup && option.group;
}, },
getOptionGroupLabel(optionGroup) { getOptionGroupLabel(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel); return resolveFieldData(optionGroup, this.optionGroupLabel);
}, },
getOptionGroupChildren(optionGroup) { getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren); return resolveFieldData(optionGroup, this.optionGroupChildren);
}, },
getAriaPosInset(index) { getAriaPosInset(index) {
return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1; return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;
@ -293,7 +296,7 @@ export default {
this.dirty = true; this.dirty = true;
this.overlayVisible = true; this.overlayVisible = true;
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1; this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
isFocus && DomHandler.focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el); isFocus && focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
}, },
hide(isFocus) { hide(isFocus) {
const _hide = () => { const _hide = () => {
@ -303,7 +306,7 @@ export default {
this.clicked = false; this.clicked = false;
this.focusedOptionIndex = -1; this.focusedOptionIndex = -1;
isFocus && DomHandler.focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el); isFocus && focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
}; };
setTimeout(() => { setTimeout(() => {
@ -499,7 +502,7 @@ export default {
} }
if (!this.overlay || !this.overlay.contains(event.target)) { if (!this.overlay || !this.overlay.contains(event.target)) {
DomHandler.focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el); focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
} }
}, },
onDropdownClick(event) { onDropdownClick(event) {
@ -508,7 +511,7 @@ export default {
if (this.overlayVisible) { if (this.overlayVisible) {
this.hide(true); this.hide(true);
} else { } else {
DomHandler.focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el); focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
query = this.$refs.focusInput.$el.value; query = this.$refs.focusInput.$el.value;
if (this.dropdownMode === 'blank') this.search(event, '', 'dropdown'); if (this.dropdownMode === 'blank') this.search(event, '', 'dropdown');
@ -593,8 +596,8 @@ export default {
this.focusedOptionIndex = -1; this.focusedOptionIndex = -1;
if (this.multiple) { if (this.multiple) {
if (ObjectUtils.isEmpty(target.value) && this.hasSelectedOption) { if (isEmpty(target.value) && this.hasSelectedOption) {
DomHandler.focus(this.$refs.multiContainer); focus(this.$refs.multiContainer);
this.focusedMultipleOptionIndex = this.modelValue.length; this.focusedMultipleOptionIndex = this.modelValue.length;
} else { } else {
event.stopPropagation(); // To prevent onArrowLeftKeyOnMultiple method event.stopPropagation(); // To prevent onArrowLeftKeyOnMultiple method
@ -664,7 +667,7 @@ export default {
}, },
onBackspaceKey(event) { onBackspaceKey(event) {
if (this.multiple) { if (this.multiple) {
if (ObjectUtils.isNotEmpty(this.modelValue) && !this.$refs.focusInput.value) { if (isNotEmpty(this.modelValue) && !this.$refs.focusInput.value) {
const removedValue = this.modelValue[this.modelValue.length - 1]; const removedValue = this.modelValue[this.modelValue.length - 1];
const newValue = this.modelValue.slice(0, -1); const newValue = this.modelValue.slice(0, -1);
@ -684,7 +687,7 @@ export default {
if (this.focusedMultipleOptionIndex > this.modelValue.length - 1) { if (this.focusedMultipleOptionIndex > this.modelValue.length - 1) {
this.focusedMultipleOptionIndex = -1; this.focusedMultipleOptionIndex = -1;
DomHandler.focus(this.$refs.focusInput); focus(this.$refs.focusInput);
} }
}, },
onBackspaceKeyOnMultiple(event) { onBackspaceKeyOnMultiple(event) {
@ -693,9 +696,9 @@ export default {
} }
}, },
onOverlayEnter(el) { onOverlayEnter(el) {
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay); ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' }); addStyle(el, { position: 'absolute', top: '0', left: '0' });
this.alignOverlay(); this.alignOverlay();
}, },
onOverlayAfterEnter() { onOverlayAfterEnter() {
@ -714,16 +717,16 @@ export default {
this.overlay = null; this.overlay = null;
}, },
onOverlayAfterLeave(el) { onOverlayAfterLeave(el) {
ZIndexUtils.clear(el); ZIndex.clear(el);
}, },
alignOverlay() { alignOverlay() {
let target = this.multiple ? this.$refs.multiContainer : this.$refs.focusInput.$el; let target = this.multiple ? this.$refs.multiContainer : this.$refs.focusInput.$el;
if (this.appendTo === 'self') { if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, target); relativePosition(this.overlay, target);
} else { } else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(target) + 'px'; this.overlay.style.minWidth = getOuterWidth(target) + 'px';
DomHandler.absolutePosition(this.overlay, target); absolutePosition(this.overlay, target);
} }
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
@ -762,7 +765,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = () => { this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) { if (this.overlayVisible && !isTouchDevice()) {
this.hide(); this.hide();
} }
}; };
@ -790,13 +793,13 @@ export default {
return this.isValidOption(option) && this.getOptionLabel(option)?.toLocaleLowerCase(this.searchLocale) === value.toLocaleLowerCase(this.searchLocale); return this.isValidOption(option) && this.getOptionLabel(option)?.toLocaleLowerCase(this.searchLocale) === value.toLocaleLowerCase(this.searchLocale);
}, },
isValidOption(option) { isValidOption(option) {
return ObjectUtils.isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option)); return isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
}, },
isValidSelectedOption(option) { isValidSelectedOption(option) {
return this.isValidOption(option) && this.isSelected(option); return this.isValidOption(option) && this.isSelected(option);
}, },
isEquals(value1, value2) { isEquals(value1, value2) {
return ObjectUtils.equals(value1, value2, this.equalityKey); return equals(value1, value2, this.equalityKey);
}, },
isSelected(option) { isSelected(option) {
const optionValue = this.getOptionValue(option); const optionValue = this.getOptionValue(option);
@ -807,7 +810,7 @@ export default {
return this.visibleOptions.findIndex((option) => this.isValidOption(option)); return this.visibleOptions.findIndex((option) => this.isValidOption(option));
}, },
findLastOptionIndex() { findLastOptionIndex() {
return ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidOption(option)); return findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
}, },
findNextOptionIndex(index) { findNextOptionIndex(index) {
const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1; const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1;
@ -815,7 +818,7 @@ export default {
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index; return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
}, },
findPrevOptionIndex(index) { findPrevOptionIndex(index) {
const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1; const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : index; return matchedOptionIndex > -1 ? matchedOptionIndex : index;
}, },
@ -854,7 +857,7 @@ export default {
this.$emit('item-unselect', { originalEvent: event, value: removedOption }); this.$emit('item-unselect', { originalEvent: event, value: removedOption });
this.$emit('option-unselect', { originalEvent: event, value: removedOption }); this.$emit('option-unselect', { originalEvent: event, value: removedOption });
this.dirty = true; this.dirty = true;
DomHandler.focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el); focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);
}, },
changeFocusedOptionIndex(event, index) { changeFocusedOptionIndex(event, index) {
if (this.focusedOptionIndex !== index) { if (this.focusedOptionIndex !== index) {
@ -869,7 +872,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 = DomHandler.findSingle(this.list, `li[id="${id}"]`); const element = findSingle(this.list, `li[id="${id}"]`);
if (element) { if (element) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' }); element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
@ -915,7 +918,7 @@ export default {
return this.optionGroupLabel ? this.flatOptions(this.suggestions) : this.suggestions || []; return this.optionGroupLabel ? this.flatOptions(this.suggestions) : this.suggestions || [];
}, },
inputValue() { inputValue() {
if (ObjectUtils.isNotEmpty(this.modelValue)) { if (isNotEmpty(this.modelValue)) {
if (typeof this.modelValue === 'object') { if (typeof this.modelValue === 'object') {
const label = this.getOptionLabel(this.modelValue); const label = this.getOptionLabel(this.modelValue);
@ -928,13 +931,13 @@ export default {
} }
}, },
hasSelectedOption() { hasSelectedOption() {
return ObjectUtils.isNotEmpty(this.modelValue); return isNotEmpty(this.modelValue);
}, },
equalityKey() { equalityKey() {
return this.dataKey; // TODO: The 'optionValue' properties can be added. return this.dataKey; // TODO: The 'optionValue' properties can be added.
}, },
searchResultMessageText() { searchResultMessageText() {
return ObjectUtils.isNotEmpty(this.visibleOptions) && this.overlayVisible ? this.searchMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptySearchMessageText; return isNotEmpty(this.visibleOptions) && this.overlayVisible ? this.searchMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptySearchMessageText;
}, },
searchMessageText() { searchMessageText() {
return this.searchMessage || this.$primevue.config.locale.searchMessage || ''; return this.searchMessage || this.$primevue.config.locale.searchMessage || '';

4
packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
View File

@ -1,5 +1,5 @@
import { isNotEmpty } from '@primeuix/utils/object';
import BaseStyle from '@primevue/core/base/style'; import BaseStyle from '@primevue/core/base/style';
import { ObjectUtils } from '@primevue/core/utils';
const theme = ({ dt }) => ` const theme = ({ dt }) => `
.p-autocomplete { .p-autocomplete {
@ -249,7 +249,7 @@ const classes = {
'p-disabled': props.disabled, 'p-disabled': props.disabled,
'p-invalid': props.invalid, 'p-invalid': props.invalid,
'p-focus': instance.focused, 'p-focus': instance.focused,
'p-inputwrapper-filled': props.modelValue || ObjectUtils.isNotEmpty(instance.inputValue), 'p-inputwrapper-filled': props.modelValue || isNotEmpty(instance.inputValue),
'p-inputwrapper-focus': instance.focused, 'p-inputwrapper-focus': instance.focused,
'p-autocomplete-open': instance.overlayVisible 'p-autocomplete-open': instance.overlayVisible
} }

6
packages/primevue/src/badge/style/BadgeStyle.js
View File

@ -1,5 +1,5 @@
import { isEmpty, isNotEmpty } from '@primeuix/utils/object';
import BaseStyle from '@primevue/core/base/style'; import BaseStyle from '@primevue/core/base/style';
import { ObjectUtils } from '@primevue/core/utils';
const theme = ({ dt }) => ` const theme = ({ dt }) => `
.p-badge { .p-badge {
@ -85,8 +85,8 @@ const classes = {
root: ({ props, instance }) => [ root: ({ props, instance }) => [
'p-badge p-component', 'p-badge p-component',
{ {
'p-badge-circle': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1, 'p-badge-circle': isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default, 'p-badge-dot': isEmpty(props.value) && !instance.$slots.default,
'p-badge-sm': props.size === 'small', 'p-badge-sm': props.size === 'small',
'p-badge-lg': props.size === 'large', 'p-badge-lg': props.size === 'large',
'p-badge-xl': props.size === 'xlarge', 'p-badge-xl': props.size === 'xlarge',

25
packages/primevue/src/badgedirective/BadgeDirective.js
View File

@ -1,4 +1,5 @@
import { DomHandler, UniqueComponentId } from '@primevue/core/utils'; import { addClass, createElement, hasClass, removeClass } from '@primeuix/utils/dom';
import { UniqueComponentId } from '@primevue/core/utils';
import BaseBadgeDirective from './BaseBadgeDirective'; import BaseBadgeDirective from './BaseBadgeDirective';
const BadgeDirective = BaseBadgeDirective.extend('badge', { const BadgeDirective = BaseBadgeDirective.extend('badge', {
@ -6,7 +7,7 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
console.warn('Deprecated since v4. Use OverlayBadge component instead.'); console.warn('Deprecated since v4. Use OverlayBadge component instead.');
const id = UniqueComponentId() + '_badge'; const id = UniqueComponentId() + '_badge';
const badge = DomHandler.createElement('span', { const badge = createElement('span', {
id, id,
class: !this.isUnstyled() && this.cx('root'), class: !this.isUnstyled() && this.cx('root'),
[this.$attrSelector]: '', [this.$attrSelector]: '',
@ -22,7 +23,7 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
el.$_pbadgeId = badge.getAttribute('id'); el.$_pbadgeId = badge.getAttribute('id');
for (let modifier in binding.modifiers) { for (let modifier in binding.modifiers) {
!this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-' + modifier); !this.isUnstyled() && addClass(badge, 'p-badge-' + modifier);
} }
if (binding.value != null) { if (binding.value != null) {
@ -31,21 +32,21 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
badge.appendChild(document.createTextNode(el.$_badgeValue)); badge.appendChild(document.createTextNode(el.$_badgeValue));
if (String(el.$_badgeValue).length === 1 && !this.isUnstyled()) { if (String(el.$_badgeValue).length === 1 && !this.isUnstyled()) {
!this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-circle'); !this.isUnstyled() && addClass(badge, 'p-badge-circle');
} }
} else { } else {
!this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-dot'); !this.isUnstyled() && addClass(badge, 'p-badge-dot');
} }
el.setAttribute('data-pd-badge', true); el.setAttribute('data-pd-badge', true);
!this.isUnstyled() && DomHandler.addClass(el, 'p-overlay-badge'); !this.isUnstyled() && addClass(el, 'p-overlay-badge');
el.setAttribute('data-p-overlay-badge', 'true'); el.setAttribute('data-p-overlay-badge', 'true');
el.appendChild(badge); el.appendChild(badge);
this.$el = badge; this.$el = badge;
}, },
updated(el, binding) { updated(el, binding) {
!this.isUnstyled() && DomHandler.addClass(el, 'p-overlay-badge'); !this.isUnstyled() && addClass(el, 'p-overlay-badge');
el.setAttribute('data-p-overlay-badge', 'true'); el.setAttribute('data-p-overlay-badge', 'true');
if (binding.oldValue !== binding.value) { if (binding.oldValue !== binding.value) {
@ -56,12 +57,12 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
if (!this.isUnstyled()) { if (!this.isUnstyled()) {
if (el.$_badgeValue) { if (el.$_badgeValue) {
if (DomHandler.hasClass(badge, 'p-badge-dot')) DomHandler.removeClass(badge, 'p-badge-dot'); if (hasClass(badge, 'p-badge-dot')) removeClass(badge, 'p-badge-dot');
if (el.$_badgeValue.length === 1) DomHandler.addClass(badge, 'p-badge-circle'); if (el.$_badgeValue.length === 1) addClass(badge, 'p-badge-circle');
else DomHandler.removeClass(badge, 'p-badge-circle'); else removeClass(badge, 'p-badge-circle');
} else if (!el.$_badgeValue && !DomHandler.hasClass(badge, 'p-badge-dot')) { } else if (!el.$_badgeValue && !hasClass(badge, 'p-badge-dot')) {
DomHandler.addClass(badge, 'p-badge-dot'); addClass(badge, 'p-badge-dot');
} }
} }

19
packages/primevue/src/blockui/BlockUI.vue
View File

@ -5,7 +5,8 @@
</template> </template>
<script> <script>
import { DomHandler, ZIndexUtils } from '@primevue/core/utils'; import { createElement, blockBodyScroll, addClass, hasCSSAnimation, unblockBodyScroll } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import BaseBlockUI from './BaseBlockUI.vue'; import BaseBlockUI from './BaseBlockUI.vue';
export default { export default {
@ -37,7 +38,7 @@ export default {
if (this.fullScreen) { if (this.fullScreen) {
styleClass += ' p-blockui-mask-document'; styleClass += ' p-blockui-mask-document';
this.mask = DomHandler.createElement('div', { this.mask = createElement('div', {
style: { style: {
position: 'fixed', position: 'fixed',
top: '0', top: '0',
@ -50,10 +51,10 @@ export default {
}); });
document.body.appendChild(this.mask); document.body.appendChild(this.mask);
DomHandler.blockBodyScroll(); blockBodyScroll();
document.activeElement.blur(); document.activeElement.blur();
} else { } else {
this.mask = DomHandler.createElement('div', { this.mask = createElement('div', {
style: { style: {
position: 'absolute', position: 'absolute',
top: '0', top: '0',
@ -68,16 +69,16 @@ export default {
} }
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.set('modal', this.mask, this.baseZIndex + this.$primevue.config.zIndex.modal); ZIndex.set('modal', this.mask, this.baseZIndex + this.$primevue.config.zIndex.modal);
} }
this.isBlocked = true; this.isBlocked = true;
this.$emit('block'); this.$emit('block');
}, },
unblock() { unblock() {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave'); !this.isUnstyled && addClass(this.mask, 'p-overlay-mask-leave');
if (DomHandler.hasCSSAnimation(this.mask) > 0) { if (hasCSSAnimation(this.mask) > 0) {
this.mask.addEventListener('animationend', () => { this.mask.addEventListener('animationend', () => {
this.removeMask(); this.removeMask();
}); });
@ -86,11 +87,11 @@ export default {
} }
}, },
removeMask() { removeMask() {
ZIndexUtils.clear(this.mask); ZIndex.clear(this.mask);
if (this.fullScreen) { if (this.fullScreen) {
document.body.removeChild(this.mask); document.body.removeChild(this.mask);
DomHandler.unblockBodyScroll(); unblockBodyScroll();
} else { } else {
this.$refs.container.removeChild(this.mask); this.$refs.container.removeChild(this.mask);
} }

30
packages/primevue/src/carousel/Carousel.vue
View File

@ -101,7 +101,9 @@
</template> </template>
<script> <script>
import { DomHandler, ObjectUtils, UniqueComponentId } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { removeClass, addClass, find, findSingle, getAttribute, setAttribute } from '@primeuix/utils/dom';
import { localeComparator, sort } from '@primeuix/utils/object';
import ChevronDownIcon from '@primevue/icons/chevrondown'; import ChevronDownIcon from '@primevue/icons/chevrondown';
import ChevronLeftIcon from '@primevue/icons/chevronleft'; import ChevronLeftIcon from '@primevue/icons/chevronleft';
import ChevronRightIcon from '@primevue/icons/chevronright'; import ChevronRightIcon from '@primevue/icons/chevronright';
@ -314,7 +316,7 @@ export default {
} }
if (this.$refs.itemsContainer) { if (this.$refs.itemsContainer) {
!this.isUnstyled && DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden'); !this.isUnstyled && removeClass(this.$refs.itemsContainer, 'p-items-hidden');
this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`; this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s'; this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
} }
@ -395,7 +397,7 @@ export default {
}, },
onTransitionEnd() { onTransitionEnd() {
if (this.$refs.itemsContainer) { if (this.$refs.itemsContainer) {
!this.isUnstyled && DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden'); !this.isUnstyled && addClass(this.$refs.itemsContainer, 'p-items-hidden');
this.$refs.itemsContainer.style.transition = ''; this.$refs.itemsContainer.style.transition = '';
if ((this.d_page === 0 || this.d_page === this.totalIndicators - 1) && this.isCircular()) { if ((this.d_page === 0 || this.d_page === this.totalIndicators - 1) && this.isCircular()) {
@ -475,7 +477,7 @@ export default {
} }
}, },
onRightKey() { onRightKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')]; const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const activeIndex = this.findFocusedIndicatorIndex(); const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1); this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
@ -491,29 +493,29 @@ export default {
this.changedFocusedIndicator(activeIndex, 0); this.changedFocusedIndicator(activeIndex, 0);
}, },
onEndKey() { onEndKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')]; const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const activeIndex = this.findFocusedIndicatorIndex(); const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, indicators.length - 1); this.changedFocusedIndicator(activeIndex, indicators.length - 1);
}, },
onTabKey() { onTabKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')]; const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-active') === true); const highlightedIndex = indicators.findIndex((ind) => getAttribute(ind, 'data-p-active') === true);
const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]'); const activeIndicator = findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement); const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
indicators[activeIndex].children[0].tabIndex = '-1'; indicators[activeIndex].children[0].tabIndex = '-1';
indicators[highlightedIndex].children[0].tabIndex = '0'; indicators[highlightedIndex].children[0].tabIndex = '0';
}, },
findFocusedIndicatorIndex() { findFocusedIndicatorIndex() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')]; const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]'); const activeIndicator = findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
return indicators.findIndex((ind) => ind === activeIndicator.parentElement); return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
}, },
changedFocusedIndicator(prevInd, nextInd) { changedFocusedIndicator(prevInd, nextInd) {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')]; const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
indicators[prevInd].children[0].tabIndex = '-1'; indicators[prevInd].children[0].tabIndex = '-1';
indicators[nextInd].children[0].tabIndex = '0'; indicators[nextInd].children[0].tabIndex = '0';
@ -552,7 +554,7 @@ export default {
if (!this.carouselStyle) { if (!this.carouselStyle) {
this.carouselStyle = document.createElement('style'); this.carouselStyle = document.createElement('style');
this.carouselStyle.type = 'text/css'; this.carouselStyle.type = 'text/css';
DomHandler.setAttribute(this.carouselStyle, 'nonce', this.$primevue?.config?.csp?.nonce); setAttribute(this.carouselStyle, 'nonce', this.$primevue?.config?.csp?.nonce);
document.body.appendChild(this.carouselStyle); document.body.appendChild(this.carouselStyle);
} }
@ -564,13 +566,13 @@ export default {
if (this.responsiveOptions && !this.isUnstyled) { if (this.responsiveOptions && !this.isUnstyled) {
let _responsiveOptions = [...this.responsiveOptions]; let _responsiveOptions = [...this.responsiveOptions];
const comparer = ObjectUtils.localeComparator(); const comparer = localeComparator();
_responsiveOptions.sort((data1, data2) => { _responsiveOptions.sort((data1, data2) => {
const value1 = data1.breakpoint; const value1 = data1.breakpoint;
const value2 = data2.breakpoint; const value2 = data2.breakpoint;
return ObjectUtils.sort(value1, value2, -1, comparer); return sort(value1, value2, -1, comparer);
}); });
for (let i = 0; i < _responsiveOptions.length; i++) { for (let i = 0; i < _responsiveOptions.length; i++) {

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

@ -86,7 +86,10 @@
</template> </template>
<script> <script>
import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils'; import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { focus, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, findSingle } from '@primeuix/utils/dom';
import { resolveFieldData, isString, isNotEmpty, isPrintableCharacter, isEmpty, findLastIndex, equals } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
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';
@ -139,25 +142,25 @@ export default {
} }
if (this.overlay) { if (this.overlay) {
ZIndexUtils.clear(this.overlay); ZIndex.clear(this.overlay);
this.overlay = null; this.overlay = null;
} }
}, },
methods: { methods: {
getOptionLabel(option) { getOptionLabel(option) {
return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option; return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;
}, },
getOptionValue(option) { getOptionValue(option) {
return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option; return this.optionValue ? resolveFieldData(option, this.optionValue) : option;
}, },
isOptionDisabled(option) { isOptionDisabled(option) {
return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false; return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
}, },
getOptionGroupLabel(optionGroup) { getOptionGroupLabel(optionGroup) {
return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : null; return this.optionGroupLabel ? resolveFieldData(optionGroup, this.optionGroupLabel) : null;
}, },
getOptionGroupChildren(optionGroup, level) { getOptionGroupChildren(optionGroup, level) {
return ObjectUtils.isString(this.optionGroupChildren) ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren[level]); return isString(this.optionGroupChildren) ? resolveFieldData(optionGroup, this.optionGroupChildren) : resolveFieldData(optionGroup, this.optionGroupChildren[level]);
}, },
isOptionGroup(option, level) { isOptionGroup(option, level) {
return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren[level]); return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren[level]);
@ -168,14 +171,14 @@ export default {
return grouped ? this.getOptionGroupLabel(processedOption.option, processedOption.level) : this.getOptionLabel(processedOption.option); return grouped ? this.getOptionGroupLabel(processedOption.option, processedOption.level) : this.getOptionLabel(processedOption.option);
}, },
isProccessedOptionGroup(processedOption) { isProccessedOptionGroup(processedOption) {
return ObjectUtils.isNotEmpty(processedOption?.children); return isNotEmpty(processedOption?.children);
}, },
show(isFocus) { show(isFocus) {
this.$emit('before-show'); this.$emit('before-show');
this.overlayVisible = true; this.overlayVisible = true;
this.activeOptionPath = this.hasSelectedOption ? this.findOptionPathByValue(this.modelValue) : this.activeOptionPath; this.activeOptionPath = this.hasSelectedOption ? this.findOptionPathByValue(this.modelValue) : this.activeOptionPath;
if (this.hasSelectedOption && ObjectUtils.isNotEmpty(this.activeOptionPath)) { if (this.hasSelectedOption && isNotEmpty(this.activeOptionPath)) {
const processedOption = this.activeOptionPath[this.activeOptionPath.length - 1]; const processedOption = this.activeOptionPath[this.activeOptionPath.length - 1];
this.focusedOptionInfo = { index: processedOption.index, level: processedOption.level, parentKey: processedOption.parentKey }; this.focusedOptionInfo = { index: processedOption.index, level: processedOption.level, parentKey: processedOption.parentKey };
@ -183,7 +186,7 @@ export default {
this.focusedOptionInfo = { index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex(), level: 0, parentKey: '' }; this.focusedOptionInfo = { index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex(), level: 0, parentKey: '' };
} }
isFocus && DomHandler.focus(this.$refs.focusInput); isFocus && focus(this.$refs.focusInput);
}, },
hide(isFocus) { hide(isFocus) {
const _hide = () => { const _hide = () => {
@ -193,7 +196,7 @@ export default {
this.activeOptionPath = []; this.activeOptionPath = [];
this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' }; this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' };
isFocus && DomHandler.focus(this.$refs.focusInput); isFocus && focus(this.$refs.focusInput);
}; };
setTimeout(() => { setTimeout(() => {
@ -275,7 +278,7 @@ export default {
break; break;
default: default:
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { if (!metaKey && isPrintableCharacter(event.key)) {
!this.overlayVisible && this.show(); !this.overlayVisible && this.show();
this.searchOptions(event, event.key); this.searchOptions(event, event.key);
} }
@ -288,11 +291,11 @@ export default {
onOptionChange(event) { onOptionChange(event) {
const { originalEvent, processedOption, isFocus, isHide } = event; const { originalEvent, processedOption, isFocus, isHide } = event;
if (ObjectUtils.isEmpty(processedOption)) return; if (isEmpty(processedOption)) return;
const { index, level, parentKey, children } = processedOption; const { index, level, parentKey, children } = processedOption;
const grouped = ObjectUtils.isNotEmpty(children); const grouped = isNotEmpty(children);
const root = ObjectUtils.isEmpty(processedOption.parent); const root = isEmpty(processedOption.parent);
const selected = this.isSelected(processedOption); const selected = this.isSelected(processedOption);
if (selected) { if (selected) {
@ -312,7 +315,7 @@ export default {
} }
grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide); grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
isFocus && DomHandler.focus(this.$refs.focusInput); isFocus && focus(this.$refs.focusInput);
}, },
onOptionFocusChange(event) { onOptionFocusChange(event) {
if (this.focusOnHover) { if (this.focusOnHover) {
@ -341,7 +344,7 @@ export default {
if (!this.overlay || !this.overlay.contains(event.target)) { if (!this.overlay || !this.overlay.contains(event.target)) {
this.overlayVisible ? this.hide() : this.show(); this.overlayVisible ? this.hide() : this.show();
DomHandler.focus(this.$refs.focusInput); focus(this.$refs.focusInput);
} }
this.clicked = true; this.clicked = true;
@ -399,7 +402,7 @@ export default {
const processedOption = this.visibleOptions[this.focusedOptionInfo.index]; const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
const parentOption = this.activeOptionPath.find((p) => p.key === processedOption?.parentKey); const parentOption = this.activeOptionPath.find((p) => p.key === processedOption?.parentKey);
const matched = this.focusedOptionInfo.parentKey === '' || (parentOption && parentOption.key === this.focusedOptionInfo.parentKey); const matched = this.focusedOptionInfo.parentKey === '' || (parentOption && parentOption.key === this.focusedOptionInfo.parentKey);
const root = ObjectUtils.isEmpty(processedOption?.parent); const root = isEmpty(processedOption?.parent);
if (matched) { if (matched) {
this.activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== this.focusedOptionInfo.parentKey); this.activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== this.focusedOptionInfo.parentKey);
@ -480,9 +483,9 @@ export default {
this.overlayVisible && this.hide(); this.overlayVisible && this.hide();
}, },
onOverlayEnter(el) { onOverlayEnter(el) {
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay); ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' }); addStyle(el, { position: 'absolute', top: '0', left: '0' });
this.alignOverlay(); this.alignOverlay();
this.scrollInView(); this.scrollInView();
}, },
@ -503,14 +506,14 @@ export default {
this.dirty = false; this.dirty = false;
}, },
onOverlayAfterLeave(el) { onOverlayAfterLeave(el) {
ZIndexUtils.clear(el); ZIndex.clear(el);
}, },
alignOverlay() { alignOverlay() {
if (this.appendTo === 'self') { if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, this.$el); relativePosition(this.overlay, this.$el);
} else { } else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px'; this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el); absolutePosition(this.overlay, this.$el);
} }
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
@ -549,7 +552,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = () => { this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) { if (this.overlayVisible && !isTouchDevice()) {
this.hide(); this.hide();
} }
}; };
@ -567,7 +570,7 @@ export default {
return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption)?.toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale)); return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption)?.toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));
}, },
isValidOption(processedOption) { isValidOption(processedOption) {
return ObjectUtils.isNotEmpty(processedOption) && !this.isOptionDisabled(processedOption.option); return isNotEmpty(processedOption) && !this.isOptionDisabled(processedOption.option);
}, },
isValidSelectedOption(processedOption) { isValidSelectedOption(processedOption) {
return this.isValidOption(processedOption) && this.isSelected(processedOption); return this.isValidOption(processedOption) && this.isSelected(processedOption);
@ -579,7 +582,7 @@ export default {
return this.visibleOptions.findIndex((processedOption) => this.isValidOption(processedOption)); return this.visibleOptions.findIndex((processedOption) => this.isValidOption(processedOption));
}, },
findLastOptionIndex() { findLastOptionIndex() {
return ObjectUtils.findLastIndex(this.visibleOptions, (processedOption) => this.isValidOption(processedOption)); return findLastIndex(this.visibleOptions, (processedOption) => this.isValidOption(processedOption));
}, },
findNextOptionIndex(index) { findNextOptionIndex(index) {
const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((processedOption) => this.isValidOption(processedOption)) : -1; const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((processedOption) => this.isValidOption(processedOption)) : -1;
@ -587,7 +590,7 @@ export default {
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index; return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
}, },
findPrevOptionIndex(index) { findPrevOptionIndex(index) {
const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (processedOption) => this.isValidOption(processedOption)) : -1; const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), (processedOption) => this.isValidOption(processedOption)) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : index; return matchedOptionIndex > -1 ? matchedOptionIndex : index;
}, },
@ -608,12 +611,12 @@ export default {
processedOptions = processedOptions || (level === 0 && this.processedOptions); processedOptions = processedOptions || (level === 0 && this.processedOptions);
if (!processedOptions) return null; if (!processedOptions) return null;
if (ObjectUtils.isEmpty(value)) return []; if (isEmpty(value)) return [];
for (let i = 0; i < processedOptions.length; i++) { for (let i = 0; i < processedOptions.length; i++) {
const processedOption = processedOptions[i]; const processedOption = processedOptions[i];
if (ObjectUtils.equals(value, this.getOptionValue(processedOption.option), this.equalityKey)) { if (equals(value, this.getOptionValue(processedOption.option), this.equalityKey)) {
return [processedOption]; return [processedOption];
} }
@ -632,7 +635,7 @@ export default {
let optionIndex = -1; let optionIndex = -1;
let matched = false; let matched = false;
if (ObjectUtils.isNotEmpty(this.searchValue)) { if (isNotEmpty(this.searchValue)) {
if (this.focusedOptionInfo.index !== -1) { if (this.focusedOptionInfo.index !== -1) {
optionIndex = this.visibleOptions.slice(this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption)); optionIndex = this.visibleOptions.slice(this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption));
optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption)) : optionIndex + this.focusedOptionInfo.index; optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption)) : optionIndex + this.focusedOptionInfo.index;
@ -677,7 +680,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 = DomHandler.findSingle(this.list, `li[id="${id}"]`); const element = findSingle(this.list, `li[id="${id}"]`);
if (element) { if (element) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' }); element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
@ -723,14 +726,14 @@ export default {
}, },
computed: { computed: {
hasSelectedOption() { hasSelectedOption() {
return ObjectUtils.isNotEmpty(this.modelValue); return isNotEmpty(this.modelValue);
}, },
label() { label() {
const label = this.placeholder || 'p-emptylabel'; const label = this.placeholder || 'p-emptylabel';
if (this.hasSelectedOption) { if (this.hasSelectedOption) {
const activeOptionPath = this.findOptionPathByValue(this.modelValue); const activeOptionPath = this.findOptionPathByValue(this.modelValue);
const processedOption = ObjectUtils.isNotEmpty(activeOptionPath) ? activeOptionPath[activeOptionPath.length - 1] : null; const processedOption = isNotEmpty(activeOptionPath) ? activeOptionPath[activeOptionPath.length - 1] : null;
return processedOption ? this.getOptionLabel(processedOption.option) : label; return processedOption ? this.getOptionLabel(processedOption.option) : label;
} }
@ -749,7 +752,7 @@ export default {
return this.optionValue ? null : this.dataKey; return this.optionValue ? null : this.dataKey;
}, },
searchResultMessageText() { searchResultMessageText() {
return ObjectUtils.isNotEmpty(this.visibleOptions) ? this.searchMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptySearchMessageText; return isNotEmpty(this.visibleOptions) ? this.searchMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptySearchMessageText;
}, },
searchMessageText() { searchMessageText() {
return this.searchMessage || this.$primevue.config.locale.searchMessage || ''; return this.searchMessage || this.$primevue.config.locale.searchMessage || '';
@ -770,7 +773,7 @@ export default {
return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText; return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
}, },
focusedOptionId() { focusedOptionId() {
return this.focusedOptionInfo.index !== -1 ? `${this.id}${ObjectUtils.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;
} }
}, },
components: { components: {

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

@ -55,7 +55,8 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { DomHandler, ObjectUtils } from '@primevue/core/utils'; import { nestedPosition } from '@primeuix/utils/dom';
import { resolveFieldData, isNotEmpty } from '@primeuix/utils/object';
import AngleRightIcon from '@primevue/icons/angleright'; import AngleRightIcon from '@primevue/icons/angleright';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
@ -91,13 +92,13 @@ export default {
watch: { watch: {
isParentMount: { isParentMount: {
handler(newValue) { handler(newValue) {
newValue && DomHandler.nestedPosition(this.container, this.level); newValue && nestedPosition(this.container, this.level);
} }
} }
}, },
mounted() { mounted() {
// entering order correction when an option is selected // entering order correction when an option is selected
(this.isParentMount || this.level === 0) && DomHandler.nestedPosition(this.container, this.level); (this.isParentMount || this.level === 0) && nestedPosition(this.container, this.level);
this.mounted = true; this.mounted = true;
}, },
methods: { methods: {
@ -105,10 +106,10 @@ export default {
return `${this.selectId}_${processedOption.key}`; return `${this.selectId}_${processedOption.key}`;
}, },
getOptionLabel(processedOption) { getOptionLabel(processedOption) {
return this.optionLabel ? ObjectUtils.resolveFieldData(processedOption.option, this.optionLabel) : processedOption.option; return this.optionLabel ? resolveFieldData(processedOption.option, this.optionLabel) : processedOption.option;
}, },
getOptionValue(processedOption) { getOptionValue(processedOption) {
return this.optionValue ? ObjectUtils.resolveFieldData(processedOption.option, this.optionValue) : processedOption.option; return this.optionValue ? resolveFieldData(processedOption.option, this.optionValue) : processedOption.option;
}, },
getPTOptions(processedOption, index, key) { getPTOptions(processedOption, index, key) {
return this.ptm(key, { return this.ptm(key, {
@ -124,16 +125,16 @@ export default {
}); });
}, },
isOptionDisabled(processedOption) { isOptionDisabled(processedOption) {
return this.optionDisabled ? ObjectUtils.resolveFieldData(processedOption.option, this.optionDisabled) : false; return this.optionDisabled ? resolveFieldData(processedOption.option, this.optionDisabled) : false;
}, },
getOptionGroupLabel(processedOption) { getOptionGroupLabel(processedOption) {
return this.optionGroupLabel ? ObjectUtils.resolveFieldData(processedOption.option, this.optionGroupLabel) : null; return this.optionGroupLabel ? resolveFieldData(processedOption.option, this.optionGroupLabel) : null;
}, },
getOptionGroupChildren(processedOption) { getOptionGroupChildren(processedOption) {
return processedOption.children; return processedOption.children;
}, },
isOptionGroup(processedOption) { isOptionGroup(processedOption) {
return ObjectUtils.isNotEmpty(processedOption.children); return isNotEmpty(processedOption.children);
}, },
isOptionSelected(processedOption) { isOptionSelected(processedOption) {
return !this.isOptionGroup(processedOption) && this.isOptionActive(processedOption); return !this.isOptionGroup(processedOption) && this.isOptionActive(processedOption);

6
packages/primevue/src/checkbox/Checkbox.vue
View File

@ -31,7 +31,7 @@
</template> </template>
<script> <script>
import { ObjectUtils } from '@primevue/core/utils'; import { equals, contains } from '@primeuix/utils/object';
import CheckIcon from '@primevue/icons/check'; import CheckIcon from '@primevue/icons/check';
import MinusIcon from '@primevue/icons/minus'; import MinusIcon from '@primevue/icons/minus';
import BaseCheckbox from './BaseCheckbox.vue'; import BaseCheckbox from './BaseCheckbox.vue';
@ -69,7 +69,7 @@ export default {
if (this.binary) { if (this.binary) {
newModelValue = this.d_indeterminate ? this.trueValue : this.checked ? this.falseValue : this.trueValue; newModelValue = this.d_indeterminate ? this.trueValue : this.checked ? this.falseValue : this.trueValue;
} else { } else {
if (this.checked || this.d_indeterminate) newModelValue = this.modelValue.filter((val) => !ObjectUtils.equals(val, this.value)); if (this.checked || this.d_indeterminate) newModelValue = this.modelValue.filter((val) => !equals(val, this.value));
else newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value]; else newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
} }
@ -91,7 +91,7 @@ export default {
}, },
computed: { computed: {
checked() { checked() {
return this.d_indeterminate ? false : this.binary ? this.modelValue === this.trueValue : ObjectUtils.contains(this.value, this.modelValue); return this.d_indeterminate ? false : this.binary ? this.modelValue === this.trueValue : contains(this.value, this.modelValue);
} }
}, },
components: { components: {

22
packages/primevue/src/colorpicker/ColorPicker.vue
View File

@ -21,7 +21,9 @@
</template> </template>
<script> <script>
import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from '@primevue/core/utils'; import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import { relativePosition, absolutePosition, addClass, removeClass, isTouchDevice } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import OverlayEventBus from 'primevue/overlayeventbus'; import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal'; import Portal from 'primevue/portal';
import BaseColorPicker from './BaseColorPicker.vue'; import BaseColorPicker from './BaseColorPicker.vue';
@ -72,7 +74,7 @@ export default {
} }
if (this.picker && this.autoZIndex) { if (this.picker && this.autoZIndex) {
ZIndexUtils.clear(this.picker); ZIndex.clear(this.picker);
} }
this.clearRefs(); this.clearRefs();
@ -349,7 +351,7 @@ export default {
this.bindResizeListener(); this.bindResizeListener();
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.set('overlay', el, this.baseZIndex, this.$primevue.config.zIndex.overlay); ZIndex.set('overlay', el, this.baseZIndex, this.$primevue.config.zIndex.overlay);
} }
this.$emit('show'); this.$emit('show');
@ -363,12 +365,12 @@ export default {
}, },
onOverlayAfterLeave(el) { onOverlayAfterLeave(el) {
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.clear(el); ZIndex.clear(el);
} }
}, },
alignOverlay() { alignOverlay() {
if (this.appendTo === 'self') DomHandler.relativePosition(this.picker, this.$refs.input); if (this.appendTo === 'self') relativePosition(this.picker, this.$refs.input);
else DomHandler.absolutePosition(this.picker, this.$refs.input); else absolutePosition(this.picker, this.$refs.input);
}, },
onInputClick() { onInputClick() {
if (this.disabled) { if (this.disabled) {
@ -410,7 +412,7 @@ export default {
this.colorDragging = true; this.colorDragging = true;
this.pickColor(event); this.pickColor(event);
this.$el.setAttribute('p-colorpicker-dragging', 'true'); this.$el.setAttribute('p-colorpicker-dragging', 'true');
!this.isUnstyled && DomHandler.addClass(this.$el, 'p-colorpicker-dragging'); !this.isUnstyled && addClass(this.$el, 'p-colorpicker-dragging');
event.preventDefault(); event.preventDefault();
}, },
onDrag(event) { onDrag(event) {
@ -428,7 +430,7 @@ export default {
this.colorDragging = false; this.colorDragging = false;
this.hueDragging = false; this.hueDragging = false;
this.$el.setAttribute('p-colorpicker-dragging', 'false'); this.$el.setAttribute('p-colorpicker-dragging', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$el, 'p-colorpicker-dragging'); !this.isUnstyled && removeClass(this.$el, 'p-colorpicker-dragging');
this.unbindDragListeners(); this.unbindDragListeners();
}, },
onHueMousedown(event) { onHueMousedown(event) {
@ -446,7 +448,7 @@ export default {
this.hueDragging = true; this.hueDragging = true;
this.pickHue(event); this.pickHue(event);
!this.isUnstyled && DomHandler.addClass(this.$el, 'p-colorpicker-dragging'); !this.isUnstyled && addClass(this.$el, 'p-colorpicker-dragging');
}, },
isInputClicked(event) { isInputClicked(event) {
return this.$refs.input && this.$refs.input.isSameNode(event.target); return this.$refs.input && this.$refs.input.isSameNode(event.target);
@ -495,7 +497,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = () => { this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) { if (this.overlayVisible && !isTouchDevice()) {
this.overlayVisible = false; this.overlayVisible = false;
} }
}; };

2
packages/primevue/src/confirmationeventbus/ConfirmationEventBus.js
View File

@ -1,3 +1,3 @@
import { EventBus } from '@primevue/core/utils'; import { EventBus } from '@primeuix/utils/eventbus';
export default EventBus(); export default EventBus();

26
packages/primevue/src/confirmpopup/ConfirmPopup.vue
View File

@ -58,7 +58,9 @@
</template> </template>
<script> <script>
import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from '@primevue/core/utils'; import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import { focus, absolutePosition, getOffset, addClass, isTouchDevice } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import { $dt } from '@primeuix/styled'; import { $dt } from '@primeuix/styled';
import Button from 'primevue/button'; import Button from 'primevue/button';
import ConfirmationEventBus from 'primevue/confirmationeventbus'; import ConfirmationEventBus from 'primevue/confirmationeventbus';
@ -126,7 +128,7 @@ export default {
this.unbindResizeListener(); this.unbindResizeListener();
if (this.container) { if (this.container) {
ZIndexUtils.clear(this.container); ZIndex.clear(this.container);
this.container = null; this.container = null;
} }
@ -158,14 +160,14 @@ export default {
onAcceptKeydown(event) { onAcceptKeydown(event) {
if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') { if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
this.accept(); this.accept();
DomHandler.focus(this.target); focus(this.target);
event.preventDefault(); event.preventDefault();
} }
}, },
onRejectKeydown(event) { onRejectKeydown(event) {
if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') { if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
this.reject(); this.reject();
DomHandler.focus(this.target); focus(this.target);
event.preventDefault(); event.preventDefault();
} }
}, },
@ -177,7 +179,7 @@ export default {
this.bindScrollListener(); this.bindScrollListener();
this.bindResizeListener(); this.bindResizeListener();
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay); ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);
}, },
onAfterEnter() { onAfterEnter() {
this.focus(); this.focus();
@ -191,13 +193,13 @@ export default {
this.unbindResizeListener(); this.unbindResizeListener();
}, },
onAfterLeave(el) { onAfterLeave(el) {
ZIndexUtils.clear(el); ZIndex.clear(el);
}, },
alignOverlay() { alignOverlay() {
DomHandler.absolutePosition(this.container, this.target, false); absolutePosition(this.container, this.target, false);
const containerOffset = DomHandler.getOffset(this.container); const containerOffset = getOffset(this.container);
const targetOffset = DomHandler.getOffset(this.target); const targetOffset = getOffset(this.target);
let arrowLeft = 0; let arrowLeft = 0;
if (containerOffset.left < targetOffset.left) { if (containerOffset.left < targetOffset.left) {
@ -208,7 +210,7 @@ export default {
if (containerOffset.top < targetOffset.top) { if (containerOffset.top < targetOffset.top) {
this.container.setAttribute('data-p-confirmpopup-flipped', 'true'); this.container.setAttribute('data-p-confirmpopup-flipped', 'true');
!this.isUnstyled && DomHandler.addClass(this.container, 'p-confirmpopup-flipped'); !this.isUnstyled && addClass(this.container, 'p-confirmpopup-flipped');
} }
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
@ -253,7 +255,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = () => { this.resizeListener = () => {
if (this.visible && !DomHandler.isTouchDevice()) { if (this.visible && !isTouchDevice()) {
this.visible = false; this.visible = false;
} }
}; };
@ -289,7 +291,7 @@ export default {
onOverlayKeydown(event) { onOverlayKeydown(event) {
if (event.code === 'Escape') { if (event.code === 'Escape') {
ConfirmationEventBus.emit('close', this.closeListener); ConfirmationEventBus.emit('close', this.closeListener);
DomHandler.focus(this.target); focus(this.target);
} }
}, },
getCXOptions(icon, iconProps) { getCXOptions(icon, iconProps) {

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

@ -35,7 +35,10 @@
</template> </template>
<script> <script>
import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { focus, findSingle, addStyle, getHiddenElementOuterWidth, getHiddenElementOuterHeight, getViewport, isTouchDevice } from '@primeuix/utils/dom';
import { resolve, isNotEmpty, isPrintableCharacter, isEmpty, findLastIndex } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
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';
@ -68,7 +71,7 @@ export default {
this.id = newValue || UniqueComponentId(); this.id = newValue || UniqueComponentId();
}, },
activeItemPath(newPath) { activeItemPath(newPath) {
if (ObjectUtils.isNotEmpty(newPath)) { if (isNotEmpty(newPath)) {
this.bindOutsideClickListener(); this.bindOutsideClickListener();
this.bindResizeListener(); this.bindResizeListener();
} else if (!this.visible) { } else if (!this.visible) {
@ -90,7 +93,7 @@ export default {
this.unbindDocumentContextMenuListener(); this.unbindDocumentContextMenuListener();
if (this.container && this.autoZIndex) { if (this.container && this.autoZIndex) {
ZIndexUtils.clear(this.container); ZIndex.clear(this.container);
} }
this.target = null; this.target = null;
@ -98,7 +101,7 @@ export default {
}, },
methods: { methods: {
getItemProp(item, name) { getItemProp(item, name) {
return item ? ObjectUtils.getItemValue(item[name]) : undefined; return item ? resolve(item[name]) : undefined;
}, },
getItemLabel(item) { getItemLabel(item) {
return this.getItemProp(item, 'label'); return this.getItemProp(item, 'label');
@ -110,7 +113,7 @@ export default {
return this.getItemProp(item, 'visible') !== false; return this.getItemProp(item, 'visible') !== false;
}, },
isItemGroup(item) { isItemGroup(item) {
return ObjectUtils.isNotEmpty(this.getItemProp(item, 'items')); return isNotEmpty(this.getItemProp(item, 'items'));
}, },
isItemSeparator(item) { isItemSeparator(item) {
return this.getItemProp(item, 'separator'); return this.getItemProp(item, 'separator');
@ -119,7 +122,7 @@ export default {
return processedItem ? this.getItemLabel(processedItem.item) : undefined; return processedItem ? this.getItemLabel(processedItem.item) : undefined;
}, },
isProccessedItemGroup(processedItem) { isProccessedItemGroup(processedItem) {
return processedItem && ObjectUtils.isNotEmpty(processedItem.items); return processedItem && isNotEmpty(processedItem.items);
}, },
toggle(event) { toggle(event) {
this.visible ? this.hide() : this.show(event); this.visible ? this.hide() : this.show(event);
@ -128,7 +131,7 @@ export default {
this.$emit('before-show'); this.$emit('before-show');
this.activeItemPath = []; this.activeItemPath = [];
this.focusedItemInfo = { index: -1, level: 0, parentKey: '' }; this.focusedItemInfo = { index: -1, level: 0, parentKey: '' };
DomHandler.focus(this.list); focus(this.list);
this.pageX = event.pageX; this.pageX = event.pageX;
this.pageY = event.pageY; this.pageY = event.pageY;
@ -208,7 +211,7 @@ export default {
break; break;
default: default:
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { if (!metaKey && isPrintableCharacter(event.key)) {
this.searchItems(event, event.key); this.searchItems(event, event.key);
} }
@ -218,10 +221,10 @@ export default {
onItemChange(event) { onItemChange(event) {
const { processedItem, isFocus } = event; const { processedItem, isFocus } = event;
if (ObjectUtils.isEmpty(processedItem)) return; if (isEmpty(processedItem)) return;
const { index, key, level, parentKey, items } = processedItem; const { index, key, level, parentKey, items } = processedItem;
const grouped = ObjectUtils.isNotEmpty(items); const grouped = isNotEmpty(items);
const activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key); const activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
if (grouped) { if (grouped) {
@ -232,7 +235,7 @@ export default {
this.focusedItemInfo = { index, level, parentKey }; this.focusedItemInfo = { index, level, parentKey };
this.activeItemPath = activeItemPath; this.activeItemPath = activeItemPath;
isFocus && DomHandler.focus(this.list); isFocus && focus(this.list);
}, },
onItemClick(event) { onItemClick(event) {
const { processedItem } = event; const { processedItem } = event;
@ -245,7 +248,7 @@ export default {
this.activeItemPath = this.activeItemPath.filter((p) => key !== p.key && key.startsWith(p.key)); this.activeItemPath = this.activeItemPath.filter((p) => key !== p.key && key.startsWith(p.key));
this.focusedItemInfo = { index, level, parentKey }; this.focusedItemInfo = { index, level, parentKey };
DomHandler.focus(this.list); focus(this.list);
} else { } else {
grouped ? this.onItemChange(event) : this.hide(); grouped ? this.onItemChange(event) : this.hide();
} }
@ -285,7 +288,7 @@ export default {
onArrowLeftKey(event) { onArrowLeftKey(event) {
const processedItem = this.visibleItems[this.focusedItemInfo.index]; const processedItem = this.visibleItems[this.focusedItemInfo.index];
const parentItem = this.activeItemPath.find((p) => p.key === processedItem.parentKey); const parentItem = this.activeItemPath.find((p) => p.key === processedItem.parentKey);
const root = ObjectUtils.isEmpty(processedItem.parent); const root = isEmpty(processedItem.parent);
if (!root) { if (!root) {
this.focusedItemInfo = { index: -1, parentKey: parentItem ? parentItem.parentKey : '' }; this.focusedItemInfo = { index: -1, parentKey: parentItem ? parentItem.parentKey : '' };
@ -320,8 +323,8 @@ export default {
}, },
onEnterKey(event) { onEnterKey(event) {
if (this.focusedItemInfo.index !== -1) { if (this.focusedItemInfo.index !== -1) {
const element = DomHandler.findSingle(this.list, `li[id="${`${this.focusedItemIdx}`}"]`); const element = findSingle(this.list, `li[id="${`${this.focusedItemIdx}`}"]`);
const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="itemlink"]'); const anchorElement = element && findSingle(element, 'a[data-pc-section="itemlink"]');
anchorElement ? anchorElement.click() : element && element.click(); anchorElement ? anchorElement.click() : element && element.click();
const processedItem = this.visibleItems[this.focusedItemInfo.index]; const processedItem = this.visibleItems[this.focusedItemInfo.index];
@ -352,11 +355,11 @@ export default {
this.hide(); this.hide();
}, },
onEnter(el) { onEnter(el) {
DomHandler.addStyles(el, { position: 'absolute' }); addStyle(el, { position: 'absolute' });
this.position(); this.position();
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.set('menu', el, this.baseZIndex + this.$primevue.config.zIndex.menu); ZIndex.set('menu', el, this.baseZIndex + this.$primevue.config.zIndex.menu);
} }
}, },
onAfterEnter() { onAfterEnter() {
@ -364,7 +367,7 @@ export default {
this.bindResizeListener(); this.bindResizeListener();
this.$emit('show'); this.$emit('show');
DomHandler.focus(this.list); focus(this.list);
}, },
onLeave() { onLeave() {
this.$emit('hide'); this.$emit('hide');
@ -372,7 +375,7 @@ export default {
}, },
onAfterLeave(el) { onAfterLeave(el) {
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.clear(el); ZIndex.clear(el);
} }
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
@ -381,9 +384,9 @@ export default {
position() { position() {
let left = this.pageX + 1; let left = this.pageX + 1;
let top = this.pageY + 1; let top = this.pageY + 1;
let width = this.container.offsetParent ? this.container.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.container); let width = this.container.offsetParent ? this.container.offsetWidth : getHiddenElementOuterWidth(this.container);
let height = this.container.offsetParent ? this.container.offsetHeight : DomHandler.getHiddenElementOuterHeight(this.container); let height = this.container.offsetParent ? this.container.offsetHeight : getHiddenElementOuterHeight(this.container);
let viewport = DomHandler.getViewport(); let viewport = getViewport();
//flip //flip
if (left + width - document.body.scrollLeft > viewport.width) { if (left + width - document.body.scrollLeft > viewport.width) {
@ -431,7 +434,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = () => { this.resizeListener = () => {
if (this.visible && !DomHandler.isTouchDevice()) { if (this.visible && !isTouchDevice()) {
this.hide(); this.hide();
} }
}; };
@ -476,7 +479,7 @@ export default {
return this.visibleItems.findIndex((processedItem) => this.isValidItem(processedItem)); return this.visibleItems.findIndex((processedItem) => this.isValidItem(processedItem));
}, },
findLastItemIndex() { findLastItemIndex() {
return ObjectUtils.findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem)); return findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem));
}, },
findNextItemIndex(index) { findNextItemIndex(index) {
const matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex((processedItem) => this.isValidItem(processedItem)) : -1; const matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex((processedItem) => this.isValidItem(processedItem)) : -1;
@ -484,7 +487,7 @@ export default {
return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index; return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
}, },
findPrevItemIndex(index) { findPrevItemIndex(index) {
const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1; const matchedItemIndex = index > 0 ? findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1;
return matchedItemIndex > -1 ? matchedItemIndex : index; return matchedItemIndex > -1 ? matchedItemIndex : index;
}, },
@ -545,7 +548,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 = DomHandler.findSingle(this.list, `li[id="${id}"]`); const element = findSingle(this.list, `li[id="${id}"]`);
if (element) { if (element) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' }); element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
@ -589,7 +592,7 @@ export default {
return processedItem ? processedItem.items : this.processedItems; return processedItem ? processedItem.items : this.processedItems;
}, },
focusedItemIdx() { focusedItemIdx() {
return this.focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.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/contextmenu/ContextMenuSub.vue
View File

@ -76,7 +76,8 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { DomHandler, ObjectUtils } from '@primevue/core/utils'; import { nestedPosition } from '@primeuix/utils/dom';
import { resolve, isNotEmpty } from '@primeuix/utils/object';
import AngleRightIcon from '@primevue/icons/angleright'; import AngleRightIcon from '@primevue/icons/angleright';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
import { mergeProps } from 'vue'; import { mergeProps } from 'vue';
@ -132,7 +133,7 @@ export default {
return this.getItemId(processedItem); return this.getItemId(processedItem);
}, },
getItemProp(processedItem, name, params) { getItemProp(processedItem, name, params) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined; return processedItem && processedItem.item ? resolve(processedItem.item[name], params) : undefined;
}, },
getItemLabel(processedItem) { getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label'); return this.getItemProp(processedItem, 'label');
@ -164,7 +165,7 @@ export default {
return this.focusedItemId === this.getItemId(processedItem); return this.focusedItemId === this.getItemId(processedItem);
}, },
isItemGroup(processedItem) { isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items); return isNotEmpty(processedItem.items);
}, },
onItemClick(event, processedItem) { onItemClick(event, processedItem) {
this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item }); this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });
@ -183,7 +184,7 @@ export default {
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1; return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
}, },
onEnter() { onEnter() {
DomHandler.nestedPosition(this.$refs.container, this.level); nestedPosition(this.$refs.container, this.level);
}, },
getMenuItemProps(processedItem, index) { getMenuItemProps(processedItem, index) {
return { return {

28
packages/primevue/src/datatable/BodyCell.vue
View File

@ -128,7 +128,9 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { DomHandler, ObjectUtils } from '@primevue/core/utils'; import { getVNodeProp } from '@primevue/core/utils';
import { getFirstFocusableElement, invokeElementMethod, getAttribute, getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';
import { resolveFieldData } from '@primeuix/utils/object';
import BarsIcon from '@primevue/icons/bars'; import BarsIcon from '@primevue/icons/bars';
import CheckIcon from '@primevue/icons/check'; import CheckIcon from '@primevue/icons/check';
import ChevronDownIcon from '@primevue/icons/chevrondown'; import ChevronDownIcon from '@primevue/icons/chevrondown';
@ -242,7 +244,7 @@ export default {
if (this.d_editing && (this.editMode === 'cell' || (this.editMode === 'row' && this.columnProp('rowEditor')))) { if (this.d_editing && (this.editMode === 'cell' || (this.editMode === 'row' && this.columnProp('rowEditor')))) {
setTimeout(() => { setTimeout(() => {
const focusableEl = DomHandler.getFirstFocusableElement(this.$el); const focusableEl = getFirstFocusableElement(this.$el);
focusableEl && focusableEl.focus(); focusableEl && focusableEl.focus();
}, 1); }, 1);
@ -256,7 +258,7 @@ export default {
}, },
methods: { methods: {
columnProp(prop) { columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop); return getVNodeProp(this.column, prop);
}, },
getColumnPT(key) { getColumnPT(key) {
const columnMetaData = { const columnMetaData = {
@ -279,7 +281,7 @@ export default {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
}, },
resolveFieldData() { resolveFieldData() {
return ObjectUtils.resolveFieldData(this.rowData, this.field); return resolveFieldData(this.rowData, this.field);
}, },
toggleRow(event) { toggleRow(event) {
this.$emit('row-toggle', { this.$emit('row-toggle', {
@ -393,7 +395,7 @@ export default {
let targetCell = this.findPreviousEditableColumn(currentCell); let targetCell = this.findPreviousEditableColumn(currentCell);
if (targetCell) { if (targetCell) {
DomHandler.invokeElementMethod(targetCell, 'click'); invokeElementMethod(targetCell, 'click');
event.preventDefault(); event.preventDefault();
} }
}, },
@ -402,7 +404,7 @@ export default {
let targetCell = this.findNextEditableColumn(currentCell); let targetCell = this.findNextEditableColumn(currentCell);
if (targetCell) { if (targetCell) {
DomHandler.invokeElementMethod(targetCell, 'click'); invokeElementMethod(targetCell, 'click');
event.preventDefault(); event.preventDefault();
} }
}, },
@ -410,7 +412,7 @@ export default {
if (element) { if (element) {
let cell = element; let cell = element;
while (cell && !DomHandler.getAttribute(cell, 'data-p-cell-editing')) { while (cell && !getAttribute(cell, 'data-p-cell-editing')) {
cell = cell.parentElement; cell = cell.parentElement;
} }
@ -431,7 +433,7 @@ export default {
} }
if (prevCell) { if (prevCell) {
if (DomHandler.getAttribute(prevCell, 'data-p-editable-column')) return prevCell; if (getAttribute(prevCell, 'data-p-editable-column')) return prevCell;
else return this.findPreviousEditableColumn(prevCell); else return this.findPreviousEditableColumn(prevCell);
} else { } else {
return null; return null;
@ -449,7 +451,7 @@ export default {
} }
if (nextCell) { if (nextCell) {
if (DomHandler.getAttribute(nextCell, 'data-p-editable-column')) return nextCell; if (getAttribute(nextCell, 'data-p-editable-column')) return nextCell;
else return this.findNextEditableColumn(nextCell); else return this.findNextEditableColumn(nextCell);
} else { } else {
return null; return null;
@ -488,19 +490,19 @@ export default {
if (align === 'right') { if (align === 'right') {
let right = 0; let right = 0;
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]'); let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) { if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); right = getOuterWidth(next) + parseFloat(next.style.right || 0);
} }
this.styleObject.right = right + 'px'; this.styleObject.right = right + 'px';
} else { } else {
let left = 0; let left = 0;
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) { if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0); left = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
} }
this.styleObject.left = left + 'px'; this.styleObject.left = left + 'px';

33
packages/primevue/src/datatable/BodyRow.vue
View File

@ -94,7 +94,8 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { ObjectUtils } from '@primevue/core/utils'; import { getVNodeProp } from '@primevue/core/utils';
import { resolveFieldData, equals, isNotEmpty } from '@primeuix/utils/object';
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';
@ -280,13 +281,13 @@ export default {
deep: true, deep: true,
immediate: true, immediate: true,
handler(newValue) { handler(newValue) {
this.d_rowExpanded = this.dataKey ? newValue?.[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)] !== undefined : newValue?.some((d) => this.equals(this.rowData, d)); this.d_rowExpanded = this.dataKey ? newValue?.[resolveFieldData(this.rowData, this.dataKey)] !== undefined : newValue?.some((d) => this.equals(this.rowData, d));
} }
} }
}, },
methods: { methods: {
columnProp(col, prop) { columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop); return getVNodeProp(col, prop);
}, },
//@todo - update this method //@todo - update this method
getColumnPT(key) { getColumnPT(key) {
@ -326,8 +327,8 @@ export default {
let prevRowData = this.value[this.rowIndex - 1]; let prevRowData = this.value[this.rowIndex - 1];
if (prevRowData) { if (prevRowData) {
const currentRowFieldData = ObjectUtils.resolveFieldData(this.value[this.rowIndex], field); const currentRowFieldData = resolveFieldData(this.value[this.rowIndex], field);
const previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, field); const previousRowFieldData = resolveFieldData(prevRowData, field);
return currentRowFieldData !== previousRowFieldData; return currentRowFieldData !== previousRowFieldData;
} else { } else {
@ -345,7 +346,7 @@ export default {
if (this.isGrouped(column)) { if (this.isGrouped(column)) {
let index = this.rowIndex; let index = this.rowIndex;
const field = this.columnProp(column, 'field'); const field = this.columnProp(column, 'field');
const currentRowFieldData = ObjectUtils.resolveFieldData(this.value[index], field); const currentRowFieldData = resolveFieldData(this.value[index], field);
let nextRowFieldData = currentRowFieldData; let nextRowFieldData = currentRowFieldData;
let groupRowSpan = 0; let groupRowSpan = 0;
@ -354,7 +355,7 @@ export default {
let nextRowData = this.value[++index]; let nextRowData = this.value[++index];
if (nextRowData) { if (nextRowData) {
nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, field); nextRowFieldData = resolveFieldData(nextRowData, field);
} else { } else {
break; break;
} }
@ -393,7 +394,7 @@ export default {
return index; return index;
}, },
equals(data1, data2) { equals(data1, data2) {
return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.dataKey); return this.compareSelectionBy === 'equals' ? data1 === data2 : equals(data1, data2, this.dataKey);
}, },
onRowGroupToggle(event) { onRowGroupToggle(event) {
this.$emit('rowgroup-toggle', { originalEvent: event, data: this.rowData }); this.$emit('rowgroup-toggle', { originalEvent: event, data: this.rowData });
@ -494,7 +495,7 @@ export default {
for (let col of this.columns) { for (let col of this.columns) {
let _selectionMode = this.columnProp(col, 'selectionMode'); let _selectionMode = this.columnProp(col, 'selectionMode');
if (ObjectUtils.isNotEmpty(_selectionMode) && _selectionMode === 'multiple') { if (isNotEmpty(_selectionMode) && _selectionMode === 'multiple') {
columnSelectionMode = _selectionMode; columnSelectionMode = _selectionMode;
break; break;
} }
@ -512,7 +513,7 @@ export default {
}, },
isRowEditing() { isRowEditing() {
if (this.rowData && this.editingRows) { if (this.rowData && this.editingRows) {
if (this.dataKey) return this.editingRowKeys ? this.editingRowKeys[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)] !== undefined : false; if (this.dataKey) return this.editingRowKeys ? this.editingRowKeys[resolveFieldData(this.rowData, this.dataKey)] !== undefined : false;
else return this.findIndex(this.rowData, this.editingRows) > -1; else return this.findIndex(this.rowData, this.editingRows) > -1;
} }
@ -520,7 +521,7 @@ export default {
}, },
isRowGroupExpanded() { isRowGroupExpanded() {
if (this.expandableRowGroups && this.expandedRowGroups) { if (this.expandableRowGroups && this.expandedRowGroups) {
const groupFieldValue = ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy); const groupFieldValue = resolveFieldData(this.rowData, this.groupRowsBy);
return this.expandedRowGroups.indexOf(groupFieldValue) > -1; return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
} }
@ -530,7 +531,7 @@ export default {
isSelected() { isSelected() {
if (this.rowData && this.selection) { if (this.rowData && this.selection) {
if (this.dataKey) { if (this.dataKey) {
return this.selectionKeys ? this.selectionKeys[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)] !== undefined : false; return this.selectionKeys ? this.selectionKeys[resolveFieldData(this.rowData, this.dataKey)] !== undefined : false;
} else { } else {
if (this.selection instanceof Array) return this.findIndexInSelection(this.rowData) > -1; if (this.selection instanceof Array) return this.findIndexInSelection(this.rowData) > -1;
else return this.equals(this.rowData, this.selection); else return this.equals(this.rowData, this.selection);
@ -547,11 +548,11 @@ export default {
return false; return false;
}, },
shouldRenderRowGroupHeader() { shouldRenderRowGroupHeader() {
const currentRowFieldData = ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy); const currentRowFieldData = resolveFieldData(this.rowData, this.groupRowsBy);
const prevRowData = this.value[this.rowIndex - 1]; const prevRowData = this.value[this.rowIndex - 1];
if (prevRowData) { if (prevRowData) {
const previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy); const previousRowFieldData = resolveFieldData(prevRowData, this.groupRowsBy);
return currentRowFieldData !== previousRowFieldData; return currentRowFieldData !== previousRowFieldData;
} else { } else {
@ -562,11 +563,11 @@ export default {
if (this.expandableRowGroups && !this.isRowGroupExpanded) { if (this.expandableRowGroups && !this.isRowGroupExpanded) {
return false; return false;
} else { } else {
let currentRowFieldData = ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy); let currentRowFieldData = resolveFieldData(this.rowData, this.groupRowsBy);
let nextRowData = this.value[this.rowIndex + 1]; let nextRowData = this.value[this.rowIndex + 1];
if (nextRowData) { if (nextRowData) {
let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy); let nextRowFieldData = resolveFieldData(nextRowData, this.groupRowsBy);
return currentRowFieldData !== nextRowFieldData; return currentRowFieldData !== nextRowFieldData;
} else { } else {

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

@ -166,7 +166,9 @@
<script> <script>
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, DomHandler, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils'; import { ConnectedOverlayScrollHandler, UniqueComponentId } 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 FilterSlashIcon from '@primevue/icons/filterslash'; import FilterSlashIcon from '@primevue/icons/filterslash';
import PlusIcon from '@primevue/icons/plus'; import PlusIcon from '@primevue/icons/plus';
@ -317,7 +319,7 @@ export default {
} }
if (this.overlay) { if (this.overlay) {
ZIndexUtils.clear(this.overlay); ZIndex.clear(this.overlay);
this.onOverlayHide(); this.onOverlayHide();
} }
}, },
@ -515,19 +517,19 @@ export default {
findNextItem(item) { findNextItem(item) {
let nextItem = item.nextElementSibling; let nextItem = item.nextElementSibling;
if (nextItem) return DomHandler.getAttribute(nextItem, 'data-pc-section') === 'filterconstraintseparator' ? this.findNextItem(nextItem) : nextItem; if (nextItem) return getAttribute(nextItem, 'data-pc-section') === 'filterconstraintseparator' ? this.findNextItem(nextItem) : nextItem;
else return item.parentElement.firstElementChild; else return item.parentElement.firstElementChild;
}, },
findPrevItem(item) { findPrevItem(item) {
let prevItem = item.previousElementSibling; let prevItem = item.previousElementSibling;
if (prevItem) return DomHandler.getAttribute(prevItem, 'data-pc-section') === 'filterconstraintseparator' ? this.findPrevItem(prevItem) : prevItem; if (prevItem) return getAttribute(prevItem, 'data-pc-section') === 'filterconstraintseparator' ? this.findPrevItem(prevItem) : prevItem;
else return item.parentElement.lastElementChild; else return item.parentElement.lastElementChild;
}, },
hide() { hide() {
this.overlayVisible = false; this.overlayVisible = false;
this.showMenuButton && DomHandler.focus(this.$refs.icon.$el); this.showMenuButton && focus(this.$refs.icon.$el);
}, },
onContentClick(event) { onContentClick(event) {
this.selfClick = true; this.selfClick = true;
@ -542,12 +544,12 @@ export default {
}, },
onOverlayEnter(el) { onOverlayEnter(el) {
if (this.filterMenuStyle) { if (this.filterMenuStyle) {
DomHandler.applyStyle(this.overlay, this.filterMenuStyle); addStyle(this.overlay, this.filterMenuStyle);
} }
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay); ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' }); addStyle(el, { position: 'absolute', top: '0', left: '0' });
DomHandler.absolutePosition(this.overlay, this.$refs.icon.$el); absolutePosition(this.overlay, this.$refs.icon.$el);
this.bindOutsideClickListener(); this.bindOutsideClickListener();
this.bindScrollListener(); this.bindScrollListener();
this.bindResizeListener(); this.bindResizeListener();
@ -567,7 +569,7 @@ export default {
this.onOverlayHide(); this.onOverlayHide();
}, },
onOverlayAfterLeave(el) { onOverlayAfterLeave(el) {
ZIndexUtils.clear(el); ZIndex.clear(el);
}, },
onOverlayHide() { onOverlayHide() {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
@ -625,7 +627,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = () => { this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) { if (this.overlayVisible && !isTouchDevice()) {
this.hide(); this.hide();
} }
}; };

185
packages/primevue/src/datatable/DataTable.vue
View File

@ -281,7 +281,28 @@
<script> <script>
import { FilterMatchMode, FilterOperator, FilterService } from '@primevue/core/api'; import { FilterMatchMode, FilterOperator, FilterService } from '@primevue/core/api';
import { DomHandler, HelperSet, ObjectUtils, UniqueComponentId } from '@primevue/core/utils'; import { HelperSet, UniqueComponentId, getVNodeProp } from '@primevue/core/utils';
import {
getAttribute,
clearSelection,
findSingle,
isClickable,
find,
focus,
exportCSV,
getOffset,
addStyle,
getIndex,
getOuterWidth,
getHiddenElementOuterWidth,
getHiddenElementOuterHeight,
getWindowScrollTop,
getOuterHeight,
removeClass,
addClass,
setAttribute
} from '@primeuix/utils/dom';
import { resolveFieldData, localeComparator, sort, findIndexInList, equals, reorderArray, isNotEmpty, isEmpty } from '@primeuix/utils/object';
import ArrowDownIcon from '@primevue/icons/arrowdown'; import ArrowDownIcon from '@primevue/icons/arrowdown';
import ArrowUpIcon from '@primevue/icons/arrowup'; import ArrowUpIcon from '@primevue/icons/arrowup';
import SpinnerIcon from '@primevue/icons/spinner'; import SpinnerIcon from '@primevue/icons/spinner';
@ -451,7 +472,7 @@ export default {
}, },
methods: { methods: {
columnProp(col, prop) { columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop); return getVNodeProp(col, prop);
}, },
onPage(event) { onPage(event) {
this.clearEditingMetaData(); this.clearEditingMetaData();
@ -480,15 +501,15 @@ export default {
const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field'); const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
if ( if (
DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true || getAttribute(targetNode, 'data-p-sortable-column') === true ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'columntitle' || getAttribute(targetNode, 'data-pc-section') === 'columntitle' ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'columnheadercontent' || getAttribute(targetNode, 'data-pc-section') === 'columnheadercontent' ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' || getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' || getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' ||
DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' || getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' ||
(targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="columnfilterbutton"]') && !DomHandler.isClickable(event.target)) (targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="columnfilterbutton"]') && !isClickable(event.target))
) { ) {
DomHandler.clearSelection(); clearSelection();
if (this.sortMode === 'single') { if (this.sortMode === 'single') {
if (this.d_sortField === columnField) { if (this.d_sortField === columnField) {
@ -540,16 +561,16 @@ export default {
let resolvedFieldData = new Map(); let resolvedFieldData = new Map();
for (let item of data) { for (let item of data) {
resolvedFieldData.set(item, ObjectUtils.resolveFieldData(item, this.d_sortField)); resolvedFieldData.set(item, resolveFieldData(item, this.d_sortField));
} }
const comparer = ObjectUtils.localeComparator(); const comparer = localeComparator();
data.sort((data1, data2) => { data.sort((data1, data2) => {
let value1 = resolvedFieldData.get(data1); let value1 = resolvedFieldData.get(data1);
let value2 = resolvedFieldData.get(data2); let value2 = resolvedFieldData.get(data2);
return ObjectUtils.sort(value1, value2, this.d_sortOrder, comparer, this.d_nullSortOrder); return sort(value1, value2, this.d_sortOrder, comparer, this.d_nullSortOrder);
}); });
return data; return data;
@ -576,15 +597,15 @@ export default {
return data; return data;
}, },
multisortField(data1, data2, index) { multisortField(data1, data2, index) {
const value1 = ObjectUtils.resolveFieldData(data1, this.d_multiSortMeta[index].field); const value1 = resolveFieldData(data1, this.d_multiSortMeta[index].field);
const value2 = ObjectUtils.resolveFieldData(data2, this.d_multiSortMeta[index].field); const value2 = resolveFieldData(data2, this.d_multiSortMeta[index].field);
const comparer = ObjectUtils.localeComparator(); const comparer = localeComparator();
if (value1 === value2) { if (value1 === value2) {
return this.d_multiSortMeta.length - 1 > index ? this.multisortField(data1, data2, index + 1) : 0; return this.d_multiSortMeta.length - 1 > index ? this.multisortField(data1, data2, index + 1) : 0;
} }
return ObjectUtils.sort(value1, value2, this.d_multiSortMeta[index].order, comparer, this.d_nullSortOrder); return sort(value1, value2, this.d_multiSortMeta[index].order, comparer, this.d_nullSortOrder);
}, },
addMultiSortField(field) { addMultiSortField(field) {
let index = this.d_multiSortMeta.findIndex((meta) => meta.field === field); let index = this.d_multiSortMeta.findIndex((meta) => meta.field === field);
@ -667,7 +688,7 @@ export default {
for (let j = 0; j < globalFilterFieldsArray.length; j++) { for (let j = 0; j < globalFilterFieldsArray.length; j++) {
let globalFilterField = globalFilterFieldsArray[j]; let globalFilterField = globalFilterFieldsArray[j];
globalMatch = FilterService.filters[activeFilters['global'].matchMode || FilterMatchMode.CONTAINS](ObjectUtils.resolveFieldData(data[i], globalFilterField), activeFilters['global'].value, this.filterLocale); globalMatch = FilterService.filters[activeFilters['global'].matchMode || FilterMatchMode.CONTAINS](resolveFieldData(data[i], globalFilterField), activeFilters['global'].value, this.filterLocale);
if (globalMatch) { if (globalMatch) {
break; break;
@ -705,7 +726,7 @@ export default {
executeLocalFilter(field, rowData, filterMeta) { executeLocalFilter(field, rowData, filterMeta) {
let filterValue = filterMeta.value; let filterValue = filterMeta.value;
let filterMatchMode = filterMeta.matchMode || FilterMatchMode.STARTS_WITH; let filterMatchMode = filterMeta.matchMode || FilterMatchMode.STARTS_WITH;
let dataFieldValue = ObjectUtils.resolveFieldData(rowData, field); let dataFieldValue = resolveFieldData(rowData, field);
let filterConstraint = FilterService.filters[filterMatchMode]; let filterConstraint = FilterService.filters[filterMatchMode];
return filterConstraint(dataFieldValue, filterValue, this.filterLocale); return filterConstraint(dataFieldValue, filterValue, this.filterLocale);
@ -713,9 +734,9 @@ export default {
onRowClick(e) { onRowClick(e) {
const event = e.originalEvent; const event = e.originalEvent;
const body = this.$refs.bodyRef && this.$refs.bodyRef.$el; const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
const focusedItem = DomHandler.findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]'); const focusedItem = findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
if (DomHandler.isClickable(event.target)) { if (isClickable(event.target)) {
return; return;
} }
@ -726,7 +747,7 @@ export default {
const rowIndex = this.d_first + e.index; const rowIndex = this.d_first + e.index;
if (this.isMultipleSelectionMode() && event.shiftKey && this.anchorRowIndex != null) { if (this.isMultipleSelectionMode() && event.shiftKey && this.anchorRowIndex != null) {
DomHandler.clearSelection(); clearSelection();
this.rangeRowIndex = rowIndex; this.rangeRowIndex = rowIndex;
this.selectRange(event); this.selectRange(event);
} else { } else {
@ -803,7 +824,7 @@ export default {
onRowDblClick(e) { onRowDblClick(e) {
const event = e.originalEvent; const event = e.originalEvent;
if (DomHandler.isClickable(event.target)) { if (isClickable(event.target)) {
return; return;
} }
@ -811,7 +832,7 @@ export default {
}, },
onRowRightClick(event) { onRowRightClick(event) {
if (this.contextMenu) { if (this.contextMenu) {
DomHandler.clearSelection(); clearSelection();
event.originalEvent.target.focus(); event.originalEvent.target.focus();
} }
@ -941,12 +962,12 @@ export default {
if (this.selection.length > 0) { if (this.selection.length > 0) {
let firstSelectedRowIndex, lastSelectedRowIndex; let firstSelectedRowIndex, lastSelectedRowIndex;
firstSelectedRowIndex = ObjectUtils.findIndexInList(this.selection[0], data); firstSelectedRowIndex = findIndexInList(this.selection[0], data);
lastSelectedRowIndex = ObjectUtils.findIndexInList(this.selection[this.selection.length - 1], data); lastSelectedRowIndex = findIndexInList(this.selection[this.selection.length - 1], data);
index = rowIndex <= firstSelectedRowIndex ? lastSelectedRowIndex : firstSelectedRowIndex; index = rowIndex <= firstSelectedRowIndex ? lastSelectedRowIndex : firstSelectedRowIndex;
} else { } else {
index = ObjectUtils.findIndexInList(this.selection, data); index = findIndexInList(this.selection, data);
} }
const _selection = index !== rowIndex ? data.slice(Math.min(index, rowIndex), Math.max(index, rowIndex) + 1) : rowData; const _selection = index !== rowIndex ? data.slice(Math.min(index, rowIndex), Math.max(index, rowIndex) + 1) : rowData;
@ -956,11 +977,11 @@ export default {
}, },
onTabKey(event, rowIndex) { onTabKey(event, rowIndex) {
const body = this.$refs.bodyRef && this.$refs.bodyRef.$el; const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
const rows = DomHandler.find(body, 'tr[data-p-selectable-row="true"]'); const rows = find(body, 'tr[data-p-selectable-row="true"]');
if (event.code === 'Tab' && rows && rows.length > 0) { if (event.code === 'Tab' && rows && rows.length > 0) {
const firstSelectedRow = DomHandler.findSingle(body, 'tr[data-p-selected="true"]'); const firstSelectedRow = findSingle(body, 'tr[data-p-selected="true"]');
const focusedItem = DomHandler.findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]'); const focusedItem = findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
if (firstSelectedRow) { if (firstSelectedRow) {
firstSelectedRow.tabIndex = '0'; firstSelectedRow.tabIndex = '0';
@ -975,7 +996,7 @@ export default {
let nextRow = row.nextElementSibling; let nextRow = row.nextElementSibling;
if (nextRow) { if (nextRow) {
if (DomHandler.getAttribute(nextRow, 'data-p-selectable-row') === true) return nextRow; if (getAttribute(nextRow, 'data-p-selectable-row') === true) return nextRow;
else return this.findNextSelectableRow(nextRow); else return this.findNextSelectableRow(nextRow);
} else { } else {
return null; return null;
@ -985,26 +1006,26 @@ export default {
let prevRow = row.previousElementSibling; let prevRow = row.previousElementSibling;
if (prevRow) { if (prevRow) {
if (DomHandler.getAttribute(prevRow, 'data-p-selectable-row') === true) return prevRow; if (getAttribute(prevRow, 'data-p-selectable-row') === true) return prevRow;
else return this.findPrevSelectableRow(prevRow); else return this.findPrevSelectableRow(prevRow);
} else { } else {
return null; return null;
} }
}, },
findFirstSelectableRow() { findFirstSelectableRow() {
const firstRow = DomHandler.findSingle(this.$refs.table, 'tr[data-p-selectable-row="true"]'); const firstRow = findSingle(this.$refs.table, 'tr[data-p-selectable-row="true"]');
return firstRow; return firstRow;
}, },
findLastSelectableRow() { findLastSelectableRow() {
const rows = DomHandler.find(this.$refs.table, 'tr[data-p-selectable-row="true"]'); const rows = find(this.$refs.table, 'tr[data-p-selectable-row="true"]');
return rows ? rows[rows.length - 1] : null; return rows ? rows[rows.length - 1] : null;
}, },
focusRowChange(firstFocusableRow, currentFocusedRow) { focusRowChange(firstFocusableRow, currentFocusedRow) {
firstFocusableRow.tabIndex = '-1'; firstFocusableRow.tabIndex = '-1';
currentFocusedRow.tabIndex = '0'; currentFocusedRow.tabIndex = '0';
DomHandler.focus(currentFocusedRow); focus(currentFocusedRow);
}, },
toggleRowWithRadio(event) { toggleRowWithRadio(event) {
const rowData = event.data; const rowData = event.data;
@ -1060,7 +1081,7 @@ export default {
isSelected(rowData) { isSelected(rowData) {
if (rowData && this.selection) { if (rowData && this.selection) {
if (this.dataKey) { if (this.dataKey) {
return this.d_selectionKeys ? this.d_selectionKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false; return this.d_selectionKeys ? this.d_selectionKeys[resolveFieldData(rowData, this.dataKey)] !== undefined : false;
} else { } else {
if (this.selection instanceof Array) return this.findIndexInSelection(rowData) > -1; if (this.selection instanceof Array) return this.findIndexInSelection(rowData) > -1;
else return this.equals(rowData, this.selection); else return this.equals(rowData, this.selection);
@ -1091,10 +1112,10 @@ export default {
if (Array.isArray(selection)) { if (Array.isArray(selection)) {
for (let data of selection) { for (let data of selection) {
this.d_selectionKeys[String(ObjectUtils.resolveFieldData(data, this.dataKey))] = 1; this.d_selectionKeys[String(resolveFieldData(data, this.dataKey))] = 1;
} }
} else { } else {
this.d_selectionKeys[String(ObjectUtils.resolveFieldData(selection, this.dataKey))] = 1; this.d_selectionKeys[String(resolveFieldData(selection, this.dataKey))] = 1;
} }
}, },
updateEditingRowKeys(editingRows) { updateEditingRowKeys(editingRows) {
@ -1102,14 +1123,14 @@ export default {
this.d_editingRowKeys = {}; this.d_editingRowKeys = {};
for (let data of editingRows) { for (let data of editingRows) {
this.d_editingRowKeys[String(ObjectUtils.resolveFieldData(data, this.dataKey))] = 1; this.d_editingRowKeys[String(resolveFieldData(data, this.dataKey))] = 1;
} }
} else { } else {
this.d_editingRowKeys = null; this.d_editingRowKeys = null;
} }
}, },
equals(data1, data2) { equals(data1, data2) {
return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.dataKey); return this.compareSelectionBy === 'equals' ? data1 === data2 : equals(data1, data2, this.dataKey);
}, },
selectRange(event) { selectRange(event) {
let rangeStart, rangeEnd; let rangeStart, rangeEnd;
@ -1179,7 +1200,7 @@ export default {
if (rowInitiated) csv += this.csvSeparator; if (rowInitiated) csv += this.csvSeparator;
else rowInitiated = true; else rowInitiated = true;
let cellData = ObjectUtils.resolveFieldData(record, this.columnProp(column, 'field')); let cellData = resolveFieldData(record, this.columnProp(column, 'field'));
if (cellData != null) { if (cellData != null) {
if (this.exportFunction) { if (this.exportFunction) {
@ -1212,14 +1233,14 @@ export default {
} }
} }
DomHandler.exportCSV(csv, this.exportFilename); exportCSV(csv, this.exportFilename);
}, },
resetPage() { resetPage() {
this.d_first = 0; this.d_first = 0;
this.$emit('update:first', this.d_first); this.$emit('update:first', this.d_first);
}, },
onColumnResizeStart(event) { onColumnResizeStart(event) {
let containerLeft = DomHandler.getOffset(this.$el).left; let containerLeft = getOffset(this.$el).left;
this.resizeColumnElement = event.target.parentElement; this.resizeColumnElement = event.target.parentElement;
this.columnResizing = true; this.columnResizing = true;
@ -1228,10 +1249,10 @@ export default {
this.bindColumnResizeEvents(); this.bindColumnResizeEvents();
}, },
onColumnResize(event) { onColumnResize(event) {
let containerLeft = DomHandler.getOffset(this.$el).left; let containerLeft = getOffset(this.$el).left;
this.$el.setAttribute('data-p-unselectable-text', 'true'); this.$el.setAttribute('data-p-unselectable-text', 'true');
!this.isUnstyled && DomHandler.addStyles(this.$el, { 'user-select': 'none' }); !this.isUnstyled && addStyle(this.$el, { 'user-select': 'none' });
this.$refs.resizeHelper.style.height = this.$el.offsetHeight + 'px'; this.$refs.resizeHelper.style.height = this.$el.offsetHeight + 'px';
this.$refs.resizeHelper.style.top = 0 + 'px'; this.$refs.resizeHelper.style.top = 0 + 'px';
this.$refs.resizeHelper.style.left = event.pageX - containerLeft + this.$el.scrollLeft + 'px'; this.$refs.resizeHelper.style.left = event.pageX - containerLeft + this.$el.scrollLeft + 'px';
@ -1290,11 +1311,11 @@ export default {
} }
}, },
resizeTableCells(newColumnWidth, nextColumnWidth) { resizeTableCells(newColumnWidth, nextColumnWidth) {
let colIndex = DomHandler.index(this.resizeColumnElement); let colIndex = getIndex(this.resizeColumnElement);
let widths = []; let widths = [];
let headers = DomHandler.find(this.$refs.table, 'thead[data-pc-section="thead"] > tr > th'); let headers = find(this.$refs.table, 'thead[data-pc-section="thead"] > tr > th');
headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header))); headers.forEach((header) => widths.push(getOuterWidth(header)));
this.destroyStyleElement(); this.destroyStyleElement();
this.createStyleElement(); this.createStyleElement();
@ -1351,7 +1372,7 @@ export default {
const column = e.column; const column = e.column;
if (this.reorderableColumns && this.columnProp(column, 'reorderableColumn') !== false) { if (this.reorderableColumns && this.columnProp(column, 'reorderableColumn') !== false) {
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.getAttribute(event.target, '[data-pc-section="columnresizer"]')) event.currentTarget.draggable = false; if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || getAttribute(event.target, '[data-pc-section="columnresizer"]')) event.currentTarget.draggable = false;
else event.currentTarget.draggable = true; else event.currentTarget.draggable = true;
} }
}, },
@ -1364,8 +1385,8 @@ export default {
return; return;
} }
this.colReorderIconWidth = DomHandler.getHiddenElementOuterWidth(this.$refs.reorderIndicatorUp); this.colReorderIconWidth = getHiddenElementOuterWidth(this.$refs.reorderIndicatorUp);
this.colReorderIconHeight = DomHandler.getHiddenElementOuterHeight(this.$refs.reorderIndicatorUp); this.colReorderIconHeight = getHiddenElementOuterHeight(this.$refs.reorderIndicatorUp);
this.draggedColumn = column; this.draggedColumn = column;
this.draggedColumnElement = this.findParentHeader(event.target); this.draggedColumnElement = this.findParentHeader(event.target);
@ -1377,8 +1398,8 @@ export default {
if (this.reorderableColumns && this.draggedColumnElement && dropHeader && !this.columnProp(column, 'frozen')) { if (this.reorderableColumns && this.draggedColumnElement && dropHeader && !this.columnProp(column, 'frozen')) {
event.preventDefault(); event.preventDefault();
let containerOffset = DomHandler.getOffset(this.$el); let containerOffset = getOffset(this.$el);
let dropHeaderOffset = DomHandler.getOffset(dropHeader); let dropHeaderOffset = getOffset(dropHeader);
if (this.draggedColumnElement !== dropHeader) { if (this.draggedColumnElement !== dropHeader) {
let targetLeft = dropHeaderOffset.left - containerOffset.left; let targetLeft = dropHeaderOffset.left - containerOffset.left;
@ -1417,8 +1438,8 @@ export default {
event.preventDefault(); event.preventDefault();
if (this.draggedColumnElement) { if (this.draggedColumnElement) {
let dragIndex = DomHandler.index(this.draggedColumnElement); let dragIndex = getIndex(this.draggedColumnElement);
let dropIndex = DomHandler.index(this.findParentHeader(event.target)); let dropIndex = getIndex(this.findParentHeader(event.target));
let allowDrop = dragIndex !== dropIndex; let allowDrop = dragIndex !== dropIndex;
if (allowDrop && ((dropIndex - dragIndex === 1 && this.dropPosition === -1) || (dropIndex - dragIndex === -1 && this.dropPosition === 1))) { if (allowDrop && ((dropIndex - dragIndex === 1 && this.dropPosition === -1) || (dropIndex - dragIndex === -1 && this.dropPosition === 1))) {
@ -1431,9 +1452,9 @@ export default {
let dragColIndex = this.columns.findIndex((child) => isSameColumn(child, this.draggedColumn)); let dragColIndex = this.columns.findIndex((child) => isSameColumn(child, this.draggedColumn));
let dropColIndex = this.columns.findIndex((child) => isSameColumn(child, column)); let dropColIndex = this.columns.findIndex((child) => isSameColumn(child, column));
let widths = []; let widths = [];
let headers = DomHandler.find(this.$el, 'thead[data-pc-section="thead"] > tr > th'); let headers = find(this.$el, 'thead[data-pc-section="thead"] > tr > th');
headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header))); headers.forEach((header) => widths.push(getOuterWidth(header)));
const movedItem = widths.find((_, index) => index === dragColIndex); const movedItem = widths.find((_, index) => index === dragColIndex);
const remainingItems = widths.filter((_, index) => index !== dragColIndex); const remainingItems = widths.filter((_, index) => index !== dragColIndex);
const reorderedWidths = [...remainingItems.slice(0, dropColIndex), movedItem, ...remainingItems.slice(dropColIndex)]; const reorderedWidths = [...remainingItems.slice(0, dropColIndex), movedItem, ...remainingItems.slice(dropColIndex)];
@ -1448,7 +1469,7 @@ export default {
dropColIndex--; dropColIndex--;
} }
ObjectUtils.reorderArray(this.columns, dragColIndex, dropColIndex); reorderArray(this.columns, dragColIndex, dropColIndex);
this.updateReorderableColumns(); this.updateReorderableColumns();
this.$emit('column-reorder', { this.$emit('column-reorder', {
@ -1494,7 +1515,7 @@ export default {
return null; return null;
}, },
onRowMouseDown(event) { onRowMouseDown(event) {
if (DomHandler.getAttribute(event.target, 'data-pc-section') === 'reorderablerowhandle' || DomHandler.getAttribute(event.target.parentElement, 'data-pc-section') === 'reorderablerowhandle') event.currentTarget.draggable = true; if (getAttribute(event.target, 'data-pc-section') === 'reorderablerowhandle' || getAttribute(event.target.parentElement, 'data-pc-section') === 'reorderablerowhandle') event.currentTarget.draggable = true;
else event.currentTarget.draggable = false; else event.currentTarget.draggable = false;
}, },
onRowDragStart(e) { onRowDragStart(e) {
@ -1511,36 +1532,36 @@ export default {
if (this.rowDragging && this.draggedRowIndex !== index) { if (this.rowDragging && this.draggedRowIndex !== index) {
let rowElement = event.currentTarget; let rowElement = event.currentTarget;
let rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop(); let rowY = getOffset(rowElement).top + getWindowScrollTop();
let pageY = event.pageY; let pageY = event.pageY;
let rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2; let rowMidY = rowY + getOuterHeight(rowElement) / 2;
let prevRowElement = rowElement.previousElementSibling; let prevRowElement = rowElement.previousElementSibling;
if (pageY < rowMidY) { if (pageY < rowMidY) {
rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false'); rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
!this.isUnstyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom'); !this.isUnstyled && removeClass(rowElement, 'p-datatable-dragpoint-bottom');
this.droppedRowIndex = index; this.droppedRowIndex = index;
if (prevRowElement) { if (prevRowElement) {
prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true'); prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
!this.isUnstyled && DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom'); !this.isUnstyled && addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
} else { } else {
rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true'); rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
!this.isUnstyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); !this.isUnstyled && addClass(rowElement, 'p-datatable-dragpoint-top');
} }
} else { } else {
if (prevRowElement) { if (prevRowElement) {
prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false'); prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
!this.isUnstyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); !this.isUnstyled && removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
} else { } else {
rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true'); rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
!this.isUnstyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); !this.isUnstyled && addClass(rowElement, 'p-datatable-dragpoint-top');
} }
this.droppedRowIndex = index + 1; this.droppedRowIndex = index + 1;
rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true'); rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
!this.isUnstyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom'); !this.isUnstyled && addClass(rowElement, 'p-datatable-dragpoint-bottom');
} }
event.preventDefault(); event.preventDefault();
@ -1552,13 +1573,13 @@ export default {
if (prevRowElement) { if (prevRowElement) {
prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false'); prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
!this.isUnstyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); !this.isUnstyled && removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
} }
rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false'); rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
!this.isUnstyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom'); !this.isUnstyled && removeClass(rowElement, 'p-datatable-dragpoint-bottom');
rowElement.setAttribute('data-p-datatable-dragpoint-top', 'false'); rowElement.setAttribute('data-p-datatable-dragpoint-top', 'false');
!this.isUnstyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top'); !this.isUnstyled && removeClass(rowElement, 'p-datatable-dragpoint-top');
}, },
onRowDragEnd(event) { onRowDragEnd(event) {
this.rowDragging = false; this.rowDragging = false;
@ -1571,7 +1592,7 @@ export default {
let dropIndex = this.draggedRowIndex > this.droppedRowIndex ? this.droppedRowIndex : this.droppedRowIndex === 0 ? 0 : this.droppedRowIndex - 1; let dropIndex = this.draggedRowIndex > this.droppedRowIndex ? this.droppedRowIndex : this.droppedRowIndex === 0 ? 0 : this.droppedRowIndex - 1;
let processedData = [...this.processedData]; let processedData = [...this.processedData];
ObjectUtils.reorderArray(processedData, this.draggedRowIndex + this.d_first, dropIndex + this.d_first); reorderArray(processedData, this.draggedRowIndex + this.d_first, dropIndex + this.d_first);
this.$emit('row-reorder', { this.$emit('row-reorder', {
originalEvent: event, originalEvent: event,
@ -1592,7 +1613,7 @@ export default {
let expandedRows; let expandedRows;
if (this.dataKey) { if (this.dataKey) {
const value = ObjectUtils.resolveFieldData(rowData, this.dataKey); const value = resolveFieldData(rowData, this.dataKey);
expandedRows = this.expandedRows ? { ...this.expandedRows } : {}; expandedRows = this.expandedRows ? { ...this.expandedRows } : {};
expanded ? (expandedRows[value] = true) : delete expandedRows[value]; expanded ? (expandedRows[value] = true) : delete expandedRows[value];
@ -1607,7 +1628,7 @@ export default {
toggleRowGroup(e) { toggleRowGroup(e) {
const event = e.originalEvent; const event = e.originalEvent;
const data = e.data; const data = e.data;
const groupFieldValue = ObjectUtils.resolveFieldData(data, this.groupRowsBy); const groupFieldValue = resolveFieldData(data, this.groupRowsBy);
let _expandedRowGroups = this.expandedRowGroups ? [...this.expandedRowGroups] : []; let _expandedRowGroups = this.expandedRowGroups ? [...this.expandedRowGroups] : [];
if (this.isRowGroupExpanded(data)) { if (this.isRowGroupExpanded(data)) {
@ -1622,7 +1643,7 @@ export default {
}, },
isRowGroupExpanded(rowData) { isRowGroupExpanded(rowData) {
if (this.expandableRowGroups && this.expandedRowGroups) { if (this.expandableRowGroups && this.expandedRowGroups) {
let groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy); let groupFieldValue = resolveFieldData(rowData, this.groupRowsBy);
return this.expandedRowGroups.indexOf(groupFieldValue) > -1; return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
} }
@ -1754,13 +1775,13 @@ export default {
}, },
saveColumnWidths(state) { saveColumnWidths(state) {
let widths = []; let widths = [];
let headers = DomHandler.find(this.$el, 'thead[data-pc-section="thead"] > tr > th'); let headers = find(this.$el, 'thead[data-pc-section="thead"] > tr > th');
headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header))); headers.forEach((header) => widths.push(getOuterWidth(header)));
state.columnWidths = widths.join(','); state.columnWidths = widths.join(',');
if (this.columnResizeMode === 'expand') { if (this.columnResizeMode === 'expand') {
state.tableWidth = DomHandler.getOuterWidth(this.$refs.table) + 'px'; state.tableWidth = getOuterWidth(this.$refs.table) + 'px';
} }
}, },
addColumnWidthStyles(widths) { addColumnWidthStyles(widths) {
@ -1792,7 +1813,7 @@ export default {
this.$refs.table.style.minWidth = this.tableWidthState; this.$refs.table.style.minWidth = this.tableWidthState;
} }
if (ObjectUtils.isNotEmpty(widths)) { if (isNotEmpty(widths)) {
this.addColumnWidthStyles(widths); this.addColumnWidthStyles(widths);
} }
} }
@ -1901,7 +1922,7 @@ export default {
createStyleElement() { createStyleElement() {
this.styleElement = document.createElement('style'); this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css'; this.styleElement.type = 'text/css';
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce); setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.styleElement); document.head.appendChild(this.styleElement);
}, },
destroyStyleElement() { destroyStyleElement() {
@ -1925,7 +1946,7 @@ export default {
return this.$refs.virtualScroller; return this.$refs.virtualScroller;
}, },
hasSpacerStyle(style) { hasSpacerStyle(style) {
return ObjectUtils.isNotEmpty(style); return isNotEmpty(style);
} }
}, },
computed: { computed: {
@ -2007,7 +2028,7 @@ export default {
} else { } else {
const val = this.frozenValue ? [...this.frozenValue, ...this.processedData] : this.processedData; const val = this.frozenValue ? [...this.frozenValue, ...this.processedData] : this.processedData;
return ObjectUtils.isNotEmpty(val) && this.selection && Array.isArray(this.selection) && val.every((v) => this.selection.some((s) => this.equals(s, v))); return isNotEmpty(val) && this.selection && Array.isArray(this.selection) && val.every((v) => this.selection.some((s) => this.equals(s, v)));
} }
}, },
attributeSelector() { attributeSelector() {
@ -2044,7 +2065,7 @@ export default {
}; };
}, },
virtualScrollerDisabled() { virtualScrollerDisabled() {
return ObjectUtils.isEmpty(this.virtualScrollerOptions) || !this.scrollable; return isEmpty(this.virtualScrollerOptions) || !this.scrollable;
} }
}, },
components: { components: {

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

@ -7,7 +7,8 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { DomHandler, ObjectUtils } from '@primevue/core/utils'; import { getVNodeProp } from '@primevue/core/utils';
import { getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';
import { mergeProps } from 'vue'; import { mergeProps } from 'vue';
export default { export default {
@ -41,7 +42,7 @@ export default {
}, },
methods: { methods: {
columnProp(prop) { columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop); return getVNodeProp(this.column, prop);
}, },
getColumnPT(key) { getColumnPT(key) {
const columnMetaData = { const columnMetaData = {
@ -69,19 +70,19 @@ export default {
if (align === 'right') { if (align === 'right') {
let right = 0; let right = 0;
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]'); let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) { if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); right = getOuterWidth(next) + parseFloat(next.style.right || 0);
} }
this.styleObject.right = right + 'px'; this.styleObject.right = right + 'px';
} else { } else {
let left = 0; let left = 0;
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) { if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0); left = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
} }
this.styleObject.left = left + 'px'; this.styleObject.left = left + 'px';

17
packages/primevue/src/datatable/HeaderCell.vue
View File

@ -85,7 +85,8 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { DomHandler, ObjectUtils } from '@primevue/core/utils'; import { getVNodeProp } from '@primevue/core/utils';
import { getAttribute, getNextElementSibling, getOuterWidth, getPreviousElementSibling, getIndex } from '@primeuix/utils/dom';
import SortAltIcon from '@primevue/icons/sortalt'; import SortAltIcon from '@primevue/icons/sortalt';
import SortAmountDownIcon from '@primevue/icons/sortamountdown'; import SortAmountDownIcon from '@primevue/icons/sortamountdown';
import SortAmountUpAltIcon from '@primevue/icons/sortamountupalt'; import SortAmountUpAltIcon from '@primevue/icons/sortamountupalt';
@ -207,7 +208,7 @@ export default {
}, },
methods: { methods: {
columnProp(prop) { columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop); return getVNodeProp(this.column, prop);
}, },
getColumnPT(key) { getColumnPT(key) {
const columnMetaData = { const columnMetaData = {
@ -236,7 +237,7 @@ export default {
this.$emit('column-click', { originalEvent: event, column: this.column }); this.$emit('column-click', { originalEvent: event, column: this.column });
}, },
onKeyDown(event) { onKeyDown(event) {
if ((event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) { if ((event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && getAttribute(event.currentTarget, 'data-p-sortable-column')) {
this.$emit('column-click', { originalEvent: event, column: this.column }); this.$emit('column-click', { originalEvent: event, column: this.column });
event.preventDefault(); event.preventDefault();
} }
@ -279,19 +280,19 @@ export default {
if (align === 'right') { if (align === 'right') {
let right = 0; let right = 0;
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]'); let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) { if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); right = getOuterWidth(next) + parseFloat(next.style.right || 0);
} }
this.styleObject.right = right + 'px'; this.styleObject.right = right + 'px';
} else { } else {
let left = 0; let left = 0;
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]'); let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) { if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0); left = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
} }
this.styleObject.left = left + 'px'; this.styleObject.left = left + 'px';
@ -300,7 +301,7 @@ export default {
let filterRow = this.$el.parentElement.nextElementSibling; let filterRow = this.$el.parentElement.nextElementSibling;
if (filterRow) { if (filterRow) {
let index = DomHandler.index(this.$el); let index = getIndex(this.$el);
if (filterRow.children[index]) { if (filterRow.children[index]) {
filterRow.children[index].style.left = this.styleObject.left; filterRow.children[index].style.left = this.styleObject.left;

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

@ -71,7 +71,9 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { DomHandler, ObjectUtils, UniqueComponentId } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { getOuterHeight } from '@primeuix/utils/dom';
import { resolveFieldData } from '@primeuix/utils/object';
import BodyRow from './BodyRow.vue'; import BodyRow from './BodyRow.vue';
export default { export default {
@ -249,13 +251,13 @@ export default {
}, },
methods: { methods: {
getRowKey(rowData, rowIndex) { getRowKey(rowData, rowIndex) {
return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey) : rowIndex; return this.dataKey ? resolveFieldData(rowData, this.dataKey) : rowIndex;
}, },
updateFrozenRowStickyPosition() { updateFrozenRowStickyPosition() {
this.$el.style.top = DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px'; this.$el.style.top = getOuterHeight(this.$el.previousElementSibling) + 'px';
}, },
updateFrozenRowGroupHeaderStickyPosition() { updateFrozenRowGroupHeaderStickyPosition() {
let tableHeaderHeight = DomHandler.getOuterHeight(this.$el.previousElementSibling); let tableHeaderHeight = getOuterHeight(this.$el.previousElementSibling);
this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px'; this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px';
}, },

4
packages/primevue/src/datatable/TableFooter.vue
View File

@ -17,7 +17,7 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { HelperSet, ObjectUtils } from '@primevue/core/utils'; import { HelperSet, getVNodeProp } from '@primevue/core/utils';
import { mergeProps } from 'vue'; import { mergeProps } from 'vue';
import FooterCell from './FooterCell.vue'; import FooterCell from './FooterCell.vue';
@ -53,7 +53,7 @@ export default {
}, },
methods: { methods: {
columnProp(col, prop) { columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop); return getVNodeProp(col, prop);
}, },
getColumnGroupPT(key) { getColumnGroupPT(key) {
const columnGroupMetaData = { const columnGroupMetaData = {

4
packages/primevue/src/datatable/TableHeader.vue
View File

@ -133,7 +133,7 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { HelperSet, ObjectUtils } from '@primevue/core/utils'; import { HelperSet, getVNodeProp } from '@primevue/core/utils';
import { mergeProps } from 'vue'; import { mergeProps } from 'vue';
import ColumnFilter from './ColumnFilter.vue'; import ColumnFilter from './ColumnFilter.vue';
import HeaderCell from './HeaderCell.vue'; import HeaderCell from './HeaderCell.vue';
@ -257,7 +257,7 @@ export default {
}, },
methods: { methods: {
columnProp(col, prop) { columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop); return getVNodeProp(col, prop);
}, },
getColumnGroupPT(key) { getColumnGroupPT(key) {
const columnGroupMetaData = { const columnGroupMetaData = {

12
packages/primevue/src/dataview/DataView.vue
View File

@ -65,7 +65,7 @@
</template> </template>
<script> <script>
import { ObjectUtils } from '@primevue/core/utils'; import { resolveFieldData, localeComparator, sort } from '@primeuix/utils/object';
import Paginator from 'primevue/paginator'; import Paginator from 'primevue/paginator';
import BaseDataView from './BaseDataView.vue'; import BaseDataView from './BaseDataView.vue';
@ -96,7 +96,7 @@ export default {
}, },
methods: { methods: {
getKey(item, index) { getKey(item, index) {
return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index; return this.dataKey ? resolveFieldData(item, this.dataKey) : index;
}, },
onPage(event) { onPage(event) {
this.d_first = event.first; this.d_first = event.first;
@ -109,13 +109,13 @@ export default {
sort() { sort() {
if (this.value) { if (this.value) {
const value = [...this.value]; const value = [...this.value];
const comparer = ObjectUtils.localeComparator(); const comparer = localeComparator();
value.sort((data1, data2) => { value.sort((data1, data2) => {
let value1 = ObjectUtils.resolveFieldData(data1, this.sortField); let value1 = resolveFieldData(data1, this.sortField);
let value2 = ObjectUtils.resolveFieldData(data2, this.sortField); let value2 = resolveFieldData(data2, this.sortField);
return ObjectUtils.sort(value1, value2, this.sortOrder, comparer); return sort(value1, value2, this.sortOrder, comparer);
}); });
return value; return value;

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

@ -530,7 +530,10 @@
</template> </template>
<script> <script>
import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils'; import { absolutePosition, addStyle, find, findSingle, getAttribute, getFocusableElements, getIndex, getOuterWidth, isTouchDevice, relativePosition, setAttribute } from '@primeuix/utils/dom';
import { localeComparator } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import 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';
@ -674,7 +677,7 @@ export default {
} }
if (this.overlay && this.autoZIndex) { if (this.overlay && this.autoZIndex) {
ZIndexUtils.clear(this.overlay); ZIndex.clear(this.overlay);
} }
this.overlay = null; this.overlay = null;
@ -863,10 +866,10 @@ export default {
el.setAttribute(this.attributeSelector, ''); el.setAttribute(this.attributeSelector, '');
const styles = !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined; const styles = !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
DomHandler.addStyles(el, styles); addStyle(el, styles);
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay); ZIndex.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
} }
this.alignOverlay(); this.alignOverlay();
@ -879,7 +882,7 @@ export default {
}, },
onOverlayAfterLeave(el) { onOverlayAfterLeave(el) {
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.clear(el); ZIndex.clear(el);
} }
}, },
onOverlayLeave() { onOverlayLeave() {
@ -1032,7 +1035,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = () => { this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) { if (this.overlayVisible && !isTouchDevice()) {
this.overlayVisible = false; this.overlayVisible = false;
} }
}; };
@ -1076,16 +1079,16 @@ export default {
alignOverlay() { alignOverlay() {
if (this.overlay) { if (this.overlay) {
if (this.appendTo === 'self' || this.inline) { if (this.appendTo === 'self' || this.inline) {
DomHandler.relativePosition(this.overlay, this.$el); relativePosition(this.overlay, this.$el);
} else { } else {
if (this.view === 'date') { if (this.view === 'date') {
this.overlay.style.width = DomHandler.getOuterWidth(this.overlay) + 'px'; this.overlay.style.width = getOuterWidth(this.overlay) + 'px';
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px'; this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';
} else { } else {
this.overlay.style.width = DomHandler.getOuterWidth(this.$el) + 'px'; this.overlay.style.width = getOuterWidth(this.$el) + 'px';
} }
DomHandler.absolutePosition(this.overlay, this.$el); absolutePosition(this.overlay, this.$el);
} }
} }
}, },
@ -1133,7 +1136,7 @@ export default {
return; return;
} }
DomHandler.find(this.overlay, 'table td span:not([data-p-disabled="true"])').forEach((cell) => (cell.tabIndex = -1)); find(this.overlay, 'table td span:not([data-p-disabled="true"])').forEach((cell) => (cell.tabIndex = -1));
if (event) { if (event) {
event.currentTarget.focus(); event.currentTarget.focus();
@ -2007,7 +2010,7 @@ export default {
const cellContent = event.currentTarget; const cellContent = event.currentTarget;
const cell = cellContent.parentElement; const cell = cellContent.parentElement;
const cellIndex = DomHandler.index(cell); const cellIndex = getIndex(cell);
switch (event.code) { switch (event.code) {
case 'ArrowDown': { case 'ArrowDown': {
@ -2016,14 +2019,14 @@ export default {
let nextRow = cell.parentElement.nextElementSibling; let nextRow = cell.parentElement.nextElementSibling;
if (nextRow) { if (nextRow) {
let tableRowIndex = DomHandler.index(cell.parentElement); let tableRowIndex = getIndex(cell.parentElement);
const tableRows = Array.from(cell.parentElement.parentElement.children); const tableRows = Array.from(cell.parentElement.parentElement.children);
const nextTableRows = tableRows.slice(tableRowIndex + 1); const nextTableRows = tableRows.slice(tableRowIndex + 1);
let hasNextFocusableDate = nextTableRows.find((el) => { let hasNextFocusableDate = nextTableRows.find((el) => {
let focusCell = el.children[cellIndex].children[0]; let focusCell = el.children[cellIndex].children[0];
return !DomHandler.getAttribute(focusCell, 'data-p-disabled'); return !getAttribute(focusCell, 'data-p-disabled');
}); });
if (hasNextFocusableDate) { if (hasNextFocusableDate) {
@ -2054,14 +2057,14 @@ export default {
let prevRow = cell.parentElement.previousElementSibling; let prevRow = cell.parentElement.previousElementSibling;
if (prevRow) { if (prevRow) {
let tableRowIndex = DomHandler.index(cell.parentElement); let tableRowIndex = getIndex(cell.parentElement);
const tableRows = Array.from(cell.parentElement.parentElement.children); const tableRows = Array.from(cell.parentElement.parentElement.children);
const prevTableRows = tableRows.slice(0, tableRowIndex).reverse(); const prevTableRows = tableRows.slice(0, tableRowIndex).reverse();
let hasNextFocusableDate = prevTableRows.find((el) => { let hasNextFocusableDate = prevTableRows.find((el) => {
let focusCell = el.children[cellIndex].children[0]; let focusCell = el.children[cellIndex].children[0];
return !DomHandler.getAttribute(focusCell, 'data-p-disabled'); return !getAttribute(focusCell, 'data-p-disabled');
}); });
if (hasNextFocusableDate) { if (hasNextFocusableDate) {
@ -2094,7 +2097,7 @@ export default {
let hasNextFocusableDate = prevCells.find((el) => { let hasNextFocusableDate = prevCells.find((el) => {
let focusCell = el.children[0]; let focusCell = el.children[0];
return !DomHandler.getAttribute(focusCell, 'data-p-disabled'); return !getAttribute(focusCell, 'data-p-disabled');
}); });
if (hasNextFocusableDate) { if (hasNextFocusableDate) {
@ -2123,7 +2126,7 @@ export default {
let hasNextFocusableDate = nextCells.find((el) => { let hasNextFocusableDate = nextCells.find((el) => {
let focusCell = el.children[0]; let focusCell = el.children[0];
return !DomHandler.getAttribute(focusCell, 'data-p-disabled'); return !getAttribute(focusCell, 'data-p-disabled');
}); });
if (hasNextFocusableDate) { if (hasNextFocusableDate) {
@ -2170,7 +2173,7 @@ export default {
let currentRow = cell.parentElement; let currentRow = cell.parentElement;
let focusCell = currentRow.children[0].children[0]; let focusCell = currentRow.children[0].children[0];
if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) { if (getAttribute(focusCell, 'data-p-disabled')) {
this.navigateToMonth(event, true, groupIndex); this.navigateToMonth(event, true, groupIndex);
} else { } else {
focusCell.tabIndex = '0'; focusCell.tabIndex = '0';
@ -2186,7 +2189,7 @@ export default {
let currentRow = cell.parentElement; let currentRow = cell.parentElement;
let focusCell = currentRow.children[currentRow.children.length - 1].children[0]; let focusCell = currentRow.children[currentRow.children.length - 1].children[0];
if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) { if (getAttribute(focusCell, 'data-p-disabled')) {
this.navigateToMonth(event, false, groupIndex); this.navigateToMonth(event, false, groupIndex);
} else { } else {
focusCell.tabIndex = '0'; focusCell.tabIndex = '0';
@ -2231,7 +2234,7 @@ export default {
this.navBackward(event); this.navBackward(event);
} else { } else {
let prevMonthContainer = this.overlay.children[groupIndex - 1]; let prevMonthContainer = this.overlay.children[groupIndex - 1];
let cells = DomHandler.find(prevMonthContainer, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])'); let cells = find(prevMonthContainer, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
let focusCell = cells[cells.length - 1]; let focusCell = cells[cells.length - 1];
focusCell.tabIndex = '0'; focusCell.tabIndex = '0';
@ -2243,7 +2246,7 @@ export default {
this.navForward(event); this.navForward(event);
} else { } else {
let nextMonthContainer = this.overlay.children[groupIndex + 1]; let nextMonthContainer = this.overlay.children[groupIndex + 1];
let focusCell = DomHandler.findSingle(nextMonthContainer, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])'); let focusCell = findSingle(nextMonthContainer, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
focusCell.tabIndex = '0'; focusCell.tabIndex = '0';
focusCell.focus(); focusCell.focus();
@ -2259,7 +2262,7 @@ export default {
case 'ArrowDown': { case 'ArrowDown': {
cell.tabIndex = '-1'; cell.tabIndex = '-1';
var cells = cell.parentElement.children; var cells = cell.parentElement.children;
var cellIndex = DomHandler.index(cell); var cellIndex = getIndex(cell);
let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 3 : cellIndex - 3]; let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 3 : cellIndex - 3];
if (nextCell) { if (nextCell) {
@ -2353,7 +2356,7 @@ export default {
case 'ArrowDown': { case 'ArrowDown': {
cell.tabIndex = '-1'; cell.tabIndex = '-1';
var cells = cell.parentElement.children; var cells = cell.parentElement.children;
var cellIndex = DomHandler.index(cell); var cellIndex = getIndex(cell);
let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2]; let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
if (nextCell) { if (nextCell) {
@ -2452,11 +2455,11 @@ export default {
let cells; let cells;
if (this.currentView === 'month') { if (this.currentView === 'month') {
cells = DomHandler.find(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"]:not([data-p-disabled="true"])'); cells = find(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"]:not([data-p-disabled="true"])');
} else if (this.currentView === 'year') { } else if (this.currentView === 'year') {
cells = DomHandler.find(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"]:not([data-p-disabled="true"])'); cells = find(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"]:not([data-p-disabled="true"])');
} else { } else {
cells = DomHandler.find(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])'); cells = find(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
} }
if (cells && cells.length > 0) { if (cells && cells.length > 0) {
@ -2464,11 +2467,11 @@ export default {
} }
} else { } else {
if (this.currentView === 'month') { if (this.currentView === 'month') {
cell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"]:not([data-p-disabled="true"])'); cell = findSingle(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"]:not([data-p-disabled="true"])');
} else if (this.currentView === 'year') { } else if (this.currentView === 'year') {
cell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"]:not([data-p-disabled="true"])'); cell = findSingle(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"]:not([data-p-disabled="true"])');
} else { } else {
cell = DomHandler.findSingle(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])'); cell = findSingle(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
} }
} }
@ -2487,25 +2490,25 @@ export default {
let cell; let cell;
if (this.currentView === 'month') { if (this.currentView === 'month') {
let cells = DomHandler.find(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"]'); let cells = find(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"]');
let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"][data-p-selected="true"]'); let selectedCell = findSingle(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"][data-p-selected="true"]');
cells.forEach((cell) => (cell.tabIndex = -1)); cells.forEach((cell) => (cell.tabIndex = -1));
cell = selectedCell || cells[0]; cell = selectedCell || cells[0];
} else if (this.currentView === 'year') { } else if (this.currentView === 'year') {
let cells = DomHandler.find(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"]'); let cells = find(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"]');
let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"][data-p-selected="true"]'); let selectedCell = findSingle(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"][data-p-selected="true"]');
cells.forEach((cell) => (cell.tabIndex = -1)); cells.forEach((cell) => (cell.tabIndex = -1));
cell = selectedCell || cells[0]; cell = selectedCell || cells[0];
} else { } else {
cell = DomHandler.findSingle(this.overlay, 'span[data-p-selected="true"]'); cell = findSingle(this.overlay, 'span[data-p-selected="true"]');
if (!cell) { if (!cell) {
let todayCell = DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not([data-p-disabled="true"]):not([data-p-ink="true"])'); let todayCell = findSingle(this.overlay, 'td.p-datepicker-today span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
if (todayCell) cell = todayCell; if (todayCell) cell = todayCell;
else cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not([data-p-disabled="true"]):not([data-p-ink="true"])'); else cell = findSingle(this.overlay, '.p-datepicker-calendar td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
} }
} }
@ -2517,7 +2520,7 @@ export default {
}, },
trapFocus(event) { trapFocus(event) {
event.preventDefault(); event.preventDefault();
let focusableElements = DomHandler.getFocusableElements(this.overlay); let focusableElements = getFocusableElements(this.overlay);
if (focusableElements && focusableElements.length > 0) { if (focusableElements && focusableElements.length > 0) {
if (!document.activeElement) { if (!document.activeElement) {
@ -2613,7 +2616,7 @@ export default {
} }
} else if (event.code === 'Tab') { } else if (event.code === 'Tab') {
if (this.overlay) { if (this.overlay) {
DomHandler.getFocusableElements(this.overlay).forEach((el) => (el.tabIndex = '-1')); getFocusableElements(this.overlay).forEach((el) => (el.tabIndex = '-1'));
} }
if (this.overlayVisible) { if (this.overlayVisible) {
@ -2681,14 +2684,14 @@ export default {
if (!this.responsiveStyleElement) { if (!this.responsiveStyleElement) {
this.responsiveStyleElement = document.createElement('style'); this.responsiveStyleElement = document.createElement('style');
this.responsiveStyleElement.type = 'text/css'; this.responsiveStyleElement.type = 'text/css';
DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce); setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.body.appendChild(this.responsiveStyleElement); document.body.appendChild(this.responsiveStyleElement);
} }
let innerHTML = ''; let innerHTML = '';
if (this.responsiveOptions) { if (this.responsiveOptions) {
const comparer = ObjectUtils.localeComparator(); const comparer = localeComparator();
let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * comparer(o1.breakpoint, o2.breakpoint)); let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * comparer(o1.breakpoint, o2.breakpoint));
for (let i = 0; i < responsiveOptions.length; i++) { for (let i = 0; i < responsiveOptions.length; i++) {

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

@ -62,7 +62,9 @@
</template> </template>
<script> <script>
import { DomHandler, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { addClass, focus, blockBodyScroll, unblockBodyScroll, setAttribute, addStyle, getOuterWidth, getOuterHeight, getViewport } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
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';
@ -122,7 +124,7 @@ export default {
this.destroyStyle(); this.destroyStyle();
if (this.mask && this.autoZIndex) { if (this.mask && this.autoZIndex) {
ZIndexUtils.clear(this.mask); ZIndex.clear(this.mask);
} }
this.container = null; this.container = null;
@ -149,12 +151,12 @@ export default {
this.bindGlobalListeners(); this.bindGlobalListeners();
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.set('modal', this.mask, this.baseZIndex + this.$primevue.config.zIndex.modal); ZIndex.set('modal', this.mask, this.baseZIndex + this.$primevue.config.zIndex.modal);
} }
}, },
onBeforeLeave() { onBeforeLeave() {
if (this.modal) { if (this.modal) {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave'); !this.isUnstyled && addClass(this.mask, 'p-overlay-mask-leave');
} }
}, },
onLeave() { onLeave() {
@ -164,7 +166,7 @@ export default {
}, },
onAfterLeave() { onAfterLeave() {
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.clear(this.mask); ZIndex.clear(this.mask);
} }
this.containerVisible = false; this.containerVisible = false;
@ -203,7 +205,7 @@ export default {
} }
if (focusTarget) { if (focusTarget) {
DomHandler.focus(focusTarget, { focusVisible: true }); focus(focusTarget, { focusVisible: true });
} }
}, },
maximize(event) { maximize(event) {
@ -216,17 +218,17 @@ export default {
} }
if (!this.modal) { if (!this.modal) {
this.maximized ? DomHandler.blockBodyScroll() : DomHandler.unblockBodyScroll(); this.maximized ? blockBodyScroll() : unblockBodyScroll();
} }
}, },
enableDocumentSettings() { enableDocumentSettings() {
if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) { if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
DomHandler.blockBodyScroll(); blockBodyScroll();
} }
}, },
unbindDocumentState() { unbindDocumentState() {
if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) { if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
DomHandler.unblockBodyScroll(); unblockBodyScroll();
} }
}, },
onKeyDown(event) { onKeyDown(event) {
@ -271,7 +273,7 @@ export default {
if (!this.styleElement && !this.isUnstyled) { if (!this.styleElement && !this.isUnstyled) {
this.styleElement = document.createElement('style'); this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css'; this.styleElement.type = 'text/css';
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce); setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.styleElement); document.head.appendChild(this.styleElement);
let innerHTML = ''; let innerHTML = '';
@ -307,7 +309,7 @@ export default {
this.container.style.margin = '0'; this.container.style.margin = '0';
document.body.setAttribute('data-p-unselectable-text', 'true'); document.body.setAttribute('data-p-unselectable-text', 'true');
!this.isUnstyled && DomHandler.addStyles(document.body, { 'user-select': 'none' }); !this.isUnstyled && addStyle(document.body, { 'user-select': 'none' });
} }
}, },
bindGlobalListeners() { bindGlobalListeners() {
@ -328,14 +330,14 @@ export default {
bindDocumentDragListener() { bindDocumentDragListener() {
this.documentDragListener = (event) => { this.documentDragListener = (event) => {
if (this.dragging) { if (this.dragging) {
let width = DomHandler.getOuterWidth(this.container); let width = getOuterWidth(this.container);
let height = DomHandler.getOuterHeight(this.container); let height = getOuterHeight(this.container);
let deltaX = event.pageX - this.lastPageX; let deltaX = event.pageX - this.lastPageX;
let deltaY = event.pageY - this.lastPageY; let deltaY = event.pageY - this.lastPageY;
let offset = this.container.getBoundingClientRect(); let offset = this.container.getBoundingClientRect();
let leftPos = offset.left + deltaX; let leftPos = offset.left + deltaX;
let topPos = offset.top + deltaY; let topPos = offset.top + deltaY;
let viewport = DomHandler.getViewport(); let viewport = getViewport();
let containerComputedStyle = getComputedStyle(this.container); let containerComputedStyle = getComputedStyle(this.container);
let marginLeft = parseFloat(containerComputedStyle.marginLeft); let marginLeft = parseFloat(containerComputedStyle.marginLeft);
let marginTop = parseFloat(containerComputedStyle.marginTop); let marginTop = parseFloat(containerComputedStyle.marginTop);

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

@ -57,7 +57,9 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { DomHandler, ObjectUtils, UniqueComponentId } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { find, findSingle } from '@primeuix/utils/dom';
import { resolve } from '@primeuix/utils/object';
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';
@ -119,7 +121,7 @@ export default {
return `${this.id}_${index}`; return `${this.id}_${index}`;
}, },
getItemProp(processedItem, name) { getItemProp(processedItem, name) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined; return processedItem && processedItem.item ? resolve(processedItem.item[name]) : undefined;
}, },
getPTOptions(key, item, index) { getPTOptions(key, item, index) {
return this.ptm(key, { return this.ptm(key, {
@ -224,28 +226,28 @@ export default {
this.changeFocusedOptionIndex(0); this.changeFocusedOptionIndex(0);
}, },
onEndKey() { onEndKey() {
this.changeFocusedOptionIndex(DomHandler.find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]').length - 1); this.changeFocusedOptionIndex(find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]').length - 1);
}, },
onSpaceKey() { onSpaceKey() {
const element = DomHandler.findSingle(this.$refs.list, `li[id="${`${this.focusedOptionIndex}`}"]`); const element = findSingle(this.$refs.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="itemlink"]'); const anchorElement = element && findSingle(element, '[data-pc-section="itemlink"]');
anchorElement ? anchorElement.click() : element && element.click(); anchorElement ? anchorElement.click() : element && element.click();
}, },
findNextOptionIndex(index) { findNextOptionIndex(index) {
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]'); const menuitems = find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]');
const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index); const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0; return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
}, },
findPrevOptionIndex(index) { findPrevOptionIndex(index) {
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]'); const menuitems = find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]');
const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index); const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0; return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
}, },
changeFocusedOptionIndex(index) { changeFocusedOptionIndex(index) {
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]'); const menuitems = find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]');
let order = index >= menuitems.length ? menuitems.length - 1 : index < 0 ? 0 : index; let order = index >= menuitems.length ? menuitems.length - 1 : index < 0 ? 0 : index;

8
packages/primevue/src/drawer/Drawer.spec.js
View File

@ -1,7 +1,7 @@
import { addClass, removeClass } from '@primeuix/utils/dom';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import PrimeVue from 'primevue/config'; import PrimeVue from 'primevue/config';
import { describe, expect, it } from 'vitest'; import { describe, expect, it } from 'vitest';
import DomHandler from '../utils/DomHandler';
import Drawer from './Drawer.vue'; import Drawer from './Drawer.vue';
describe('Drawer.vue', () => { describe('Drawer.vue', () => {
@ -89,7 +89,7 @@ describe('Drawer.vue', () => {
}); });
it('When hide is triggered , removeClass util should be called', async () => { it('When hide is triggered , removeClass util should be called', async () => {
const removeClassSpy = vi.spyOn(DomHandler, 'removeClass'); const removeClassSpy = vi.spyOn(removeClass);
await wrapper.setProps({ blockScroll: true }); await wrapper.setProps({ blockScroll: true });
wrapper.vm.disableDocumentSettings(); wrapper.vm.disableDocumentSettings();
@ -98,7 +98,7 @@ describe('Drawer.vue', () => {
}); });
it('When onEnter is triggered , addClass util should be called', async () => { it('When onEnter is triggered , addClass util should be called', async () => {
const addClassSpy = vi.spyOn(DomHandler, 'addClass'); const addClassSpy = vi.spyOn(addClass);
await wrapper.setProps({ blockScroll: true }); await wrapper.setProps({ blockScroll: true });
wrapper.vm.enableDocumentSettings(); wrapper.vm.enableDocumentSettings();
@ -107,7 +107,7 @@ describe('Drawer.vue', () => {
}); });
it('When onBeforeLeave is triggered , addClass util should be called', async () => { it('When onBeforeLeave is triggered , addClass util should be called', async () => {
const addClassSpy = vi.spyOn(DomHandler, 'addClass'); const addClassSpy = vi.spyOn(addClass);
await wrapper.setProps({ modal: true }); await wrapper.setProps({ modal: true });
wrapper.vm.onBeforeLeave(); wrapper.vm.onBeforeLeave();

17
packages/primevue/src/drawer/Drawer.vue
View File

@ -42,7 +42,8 @@
</template> </template>
<script> <script>
import { DomHandler, ZIndexUtils } from '@primevue/core/utils'; import { addClass, focus, blockBodyScroll, unblockBodyScroll } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import TimesIcon from '@primevue/icons/times'; import TimesIcon from '@primevue/icons/times';
import Button from 'primevue/button'; import Button from 'primevue/button';
import FocusTrap from 'primevue/focustrap'; import FocusTrap from 'primevue/focustrap';
@ -76,7 +77,7 @@ export default {
this.disableDocumentSettings(); this.disableDocumentSettings();
if (this.mask && this.autoZIndex) { if (this.mask && this.autoZIndex) {
ZIndexUtils.clear(this.mask); ZIndex.clear(this.mask);
} }
this.container = null; this.container = null;
@ -92,7 +93,7 @@ export default {
this.bindDocumentKeyDownListener(); this.bindDocumentKeyDownListener();
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.set('modal', this.mask, this.baseZIndex || this.$primevue.config.zIndex.modal); ZIndex.set('modal', this.mask, this.baseZIndex || this.$primevue.config.zIndex.modal);
} }
}, },
onAfterEnter() { onAfterEnter() {
@ -100,7 +101,7 @@ export default {
}, },
onBeforeLeave() { onBeforeLeave() {
if (this.modal) { if (this.modal) {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave'); !this.isUnstyled && addClass(this.mask, 'p-overlay-mask-leave');
} }
}, },
onLeave() { onLeave() {
@ -108,7 +109,7 @@ export default {
}, },
onAfterLeave() { onAfterLeave() {
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.clear(this.mask); ZIndex.clear(this.mask);
} }
this.unbindDocumentKeyDownListener(); this.unbindDocumentKeyDownListener();
@ -140,7 +141,7 @@ export default {
} }
} }
focusTarget && DomHandler.focus(focusTarget); focusTarget && focus(focusTarget);
}, },
enableDocumentSettings() { enableDocumentSettings() {
if (this.dismissable && !this.modal) { if (this.dismissable && !this.modal) {
@ -148,14 +149,14 @@ export default {
} }
if (this.blockScroll) { if (this.blockScroll) {
DomHandler.blockBodyScroll(); blockBodyScroll();
} }
}, },
disableDocumentSettings() { disableDocumentSettings() {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
if (this.blockScroll) { if (this.blockScroll) {
DomHandler.unblockBodyScroll(); unblockBodyScroll();
} }
}, },
onKeydown(event) { onKeydown(event) {

2
packages/primevue/src/dynamicdialogeventbus/DynamicDialogEventBus.js
View File

@ -1,3 +1,3 @@
import { EventBus } from '@primevue/core/utils'; import { EventBus } from '@primeuix/utils/eventbus';
export default EventBus(); export default EventBus();

4
packages/primevue/src/editor/Editor.vue
View File

@ -48,7 +48,7 @@
</template> </template>
<script> <script>
import { DomHandler } from '@primevue/core/utils'; import { isExist } from '@primeuix/utils/dom';
import BaseEditor from './BaseEditor.vue'; import BaseEditor from './BaseEditor.vue';
const QuillJS = (function () { const QuillJS = (function () {
@ -101,7 +101,7 @@ export default {
} else { } else {
import('quill') import('quill')
.then((module) => { .then((module) => {
if (module && DomHandler.isExist(this.$refs.editorElement)) { if (module && isExist(this.$refs.editorElement)) {
if (module.default) { if (module.default) {
// webpack // webpack
this.quill = new module.default(this.$refs.editorElement, configuration); this.quill = new module.default(this.$refs.editorElement, configuration);

8
packages/primevue/src/fileupload/FileUpload.vue
View File

@ -76,7 +76,7 @@
</template> </template>
<script> <script>
import { DomHandler } from '@primevue/core/utils'; import { addClass, removeClass } from '@primeuix/utils/dom';
import PlusIcon from '@primevue/icons/plus'; import PlusIcon from '@primevue/icons/plus';
import TimesIcon from '@primevue/icons/times'; import TimesIcon from '@primevue/icons/times';
import UploadIcon from '@primevue/icons/upload'; import UploadIcon from '@primevue/icons/upload';
@ -296,7 +296,7 @@ export default {
}, },
onDragOver(event) { onDragOver(event) {
if (!this.disabled) { if (!this.disabled) {
!this.isUnstyled && DomHandler.addClass(this.$refs.content, 'p-fileupload-highlight'); !this.isUnstyled && addClass(this.$refs.content, 'p-fileupload-highlight');
this.$refs.content.setAttribute('data-p-highlight', true); this.$refs.content.setAttribute('data-p-highlight', true);
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
@ -304,13 +304,13 @@ export default {
}, },
onDragLeave() { onDragLeave() {
if (!this.disabled) { if (!this.disabled) {
!this.isUnstyled && DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight'); !this.isUnstyled && removeClass(this.$refs.content, 'p-fileupload-highlight');
this.$refs.content.setAttribute('data-p-highlight', false); this.$refs.content.setAttribute('data-p-highlight', false);
} }
}, },
onDrop(event) { onDrop(event) {
if (!this.disabled) { if (!this.disabled) {
!this.isUnstyled && DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight'); !this.isUnstyled && removeClass(this.$refs.content, 'p-fileupload-highlight');
this.$refs.content.setAttribute('data-p-highlight', false); this.$refs.content.setAttribute('data-p-highlight', false);
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();

31
packages/primevue/src/focustrap/FocusTrap.js
View File

@ -1,4 +1,5 @@
import { DomHandler, ObjectUtils } from '@primevue/core/utils'; import { createElement, focus, getFirstFocusableElement, getLastFocusableElement, isFocusableElement } from '@primeuix/utils/dom';
import { isNotEmpty } from '@primeuix/utils/object';
import BaseFocusTrap from './BaseFocusTrap'; import BaseFocusTrap from './BaseFocusTrap';
const FocusTrap = BaseFocusTrap.extend('focustrap', { const FocusTrap = BaseFocusTrap.extend('focustrap', {
@ -34,16 +35,16 @@ const FocusTrap = BaseFocusTrap.extend('focustrap', {
mutationList.forEach((mutation) => { mutationList.forEach((mutation) => {
if (mutation.type === 'childList' && !el.contains(document.activeElement)) { if (mutation.type === 'childList' && !el.contains(document.activeElement)) {
const findNextFocusableElement = (_el) => { const findNextFocusableElement = (_el) => {
const focusableElement = DomHandler.isFocusableElement(_el) const focusableElement = isFocusableElement(_el)
? DomHandler.isFocusableElement(_el, this.getComputedSelector(el.$_pfocustrap_focusableselector)) ? isFocusableElement(_el, this.getComputedSelector(el.$_pfocustrap_focusableselector))
? _el ? _el
: DomHandler.getFirstFocusableElement(el, this.getComputedSelector(el.$_pfocustrap_focusableselector)) : getFirstFocusableElement(el, this.getComputedSelector(el.$_pfocustrap_focusableselector))
: DomHandler.getFirstFocusableElement(_el); : getFirstFocusableElement(_el);
return ObjectUtils.isNotEmpty(focusableElement) ? focusableElement : _el.nextSibling && findNextFocusableElement(_el.nextSibling); return isNotEmpty(focusableElement) ? focusableElement : _el.nextSibling && findNextFocusableElement(_el.nextSibling);
}; };
DomHandler.focus(findNextFocusableElement(mutation.nextSibling)); focus(findNextFocusableElement(mutation.nextSibling));
} }
}); });
}); });
@ -69,34 +70,34 @@ const FocusTrap = BaseFocusTrap.extend('focustrap', {
}, },
autoElementFocus(el, binding) { autoElementFocus(el, binding) {
const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = binding.value || {}; const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = binding.value || {};
let focusableElement = DomHandler.getFirstFocusableElement(el, `[autofocus]${this.getComputedSelector(autoFocusSelector)}`); let focusableElement = getFirstFocusableElement(el, `[autofocus]${this.getComputedSelector(autoFocusSelector)}`);
autoFocus && !focusableElement && (focusableElement = DomHandler.getFirstFocusableElement(el, this.getComputedSelector(firstFocusableSelector))); autoFocus && !focusableElement && (focusableElement = getFirstFocusableElement(el, this.getComputedSelector(firstFocusableSelector)));
DomHandler.focus(focusableElement); focus(focusableElement);
}, },
onFirstHiddenElementFocus(event) { onFirstHiddenElementFocus(event) {
const { currentTarget, relatedTarget } = event; const { currentTarget, relatedTarget } = event;
const focusableElement = const focusableElement =
relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement || !this.$el?.contains(relatedTarget) relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement || !this.$el?.contains(relatedTarget)
? DomHandler.getFirstFocusableElement(currentTarget.parentElement, this.getComputedSelector(currentTarget.$_pfocustrap_focusableselector)) ? getFirstFocusableElement(currentTarget.parentElement, this.getComputedSelector(currentTarget.$_pfocustrap_focusableselector))
: currentTarget.$_pfocustrap_lasthiddenfocusableelement; : currentTarget.$_pfocustrap_lasthiddenfocusableelement;
DomHandler.focus(focusableElement); focus(focusableElement);
}, },
onLastHiddenElementFocus(event) { onLastHiddenElementFocus(event) {
const { currentTarget, relatedTarget } = event; const { currentTarget, relatedTarget } = event;
const focusableElement = const focusableElement =
relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement || !this.$el?.contains(relatedTarget) relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement || !this.$el?.contains(relatedTarget)
? DomHandler.getLastFocusableElement(currentTarget.parentElement, this.getComputedSelector(currentTarget.$_pfocustrap_focusableselector)) ? getLastFocusableElement(currentTarget.parentElement, this.getComputedSelector(currentTarget.$_pfocustrap_focusableselector))
: currentTarget.$_pfocustrap_firsthiddenfocusableelement; : currentTarget.$_pfocustrap_firsthiddenfocusableelement;
DomHandler.focus(focusableElement); focus(focusableElement);
}, },
createHiddenFocusableElements(el, binding) { createHiddenFocusableElements(el, binding) {
const { tabIndex = 0, firstFocusableSelector = '', lastFocusableSelector = '' } = binding.value || {}; const { tabIndex = 0, firstFocusableSelector = '', lastFocusableSelector = '' } = binding.value || {};
const createFocusableElement = (onFocus) => { const createFocusableElement = (onFocus) => {
return DomHandler.createElement('span', { return createElement('span', {
class: 'p-hidden-accessible p-hidden-focusable', class: 'p-hidden-accessible p-hidden-focusable',
tabIndex, tabIndex,
role: 'presentation', role: 'presentation',

17
packages/primevue/src/galleria/Galleria.vue
View File

@ -10,7 +10,8 @@
</template> </template>
<script> <script>
import { DomHandler, ZIndexUtils } from '@primevue/core/utils'; import { unblockBodyScroll, blockBodyScroll, addClass } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import FocusTrap from 'primevue/focustrap'; import FocusTrap from 'primevue/focustrap';
import Portal from 'primevue/portal'; import Portal from 'primevue/portal';
import BaseGalleria from './BaseGalleria.vue'; import BaseGalleria from './BaseGalleria.vue';
@ -35,32 +36,32 @@ export default {
}, },
beforeUnmount() { beforeUnmount() {
if (this.fullScreen) { if (this.fullScreen) {
DomHandler.unblockBodyScroll(); unblockBodyScroll();
} }
this.mask = null; this.mask = null;
if (this.container) { if (this.container) {
ZIndexUtils.clear(this.container); ZIndex.clear(this.container);
this.container = null; this.container = null;
} }
}, },
methods: { methods: {
onBeforeEnter(el) { onBeforeEnter(el) {
ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal); ZIndex.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal);
}, },
onEnter(el) { onEnter(el) {
this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1); this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
DomHandler.blockBodyScroll(); blockBodyScroll();
this.focus(); this.focus();
}, },
onBeforeLeave() { onBeforeLeave() {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave'); !this.isUnstyled && addClass(this.mask, 'p-overlay-mask-leave');
}, },
onAfterLeave(el) { onAfterLeave(el) {
ZIndexUtils.clear(el); ZIndex.clear(el);
this.containerVisible = false; this.containerVisible = false;
DomHandler.unblockBodyScroll(); unblockBodyScroll();
}, },
onActiveItemChange(index) { onActiveItemChange(index) {
if (this.activeIndex !== index) { if (this.activeIndex !== index) {

18
packages/primevue/src/galleria/GalleriaItem.vue
View File

@ -37,7 +37,7 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { DomHandler } from '@primevue/core/utils'; import { find, getAttribute, findSingle } 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';
@ -191,7 +191,7 @@ export default {
} }
}, },
onRightKey() { onRightKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')]; const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const activeIndex = this.findFocusedIndicatorIndex(); const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1); this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
@ -207,29 +207,29 @@ export default {
this.changedFocusedIndicator(activeIndex, 0); this.changedFocusedIndicator(activeIndex, 0);
}, },
onEndKey() { onEndKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')]; const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const activeIndex = this.findFocusedIndicatorIndex(); const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, indicators.length - 1); this.changedFocusedIndicator(activeIndex, indicators.length - 1);
}, },
onTabKey() { onTabKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')]; const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-active') === true); const highlightedIndex = indicators.findIndex((ind) => getAttribute(ind, 'data-p-active') === true);
const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]'); const activeIndicator = findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement); const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
indicators[activeIndex].children[0].tabIndex = '-1'; indicators[activeIndex].children[0].tabIndex = '-1';
indicators[highlightedIndex].children[0].tabIndex = '0'; indicators[highlightedIndex].children[0].tabIndex = '0';
}, },
findFocusedIndicatorIndex() { findFocusedIndicatorIndex() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')]; const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]'); const activeIndicator = findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
return indicators.findIndex((ind) => ind === activeIndicator.parentElement); return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
}, },
changedFocusedIndicator(prevInd, nextInd) { changedFocusedIndicator(prevInd, nextInd) {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')]; const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
indicators[prevInd].children[0].tabIndex = '-1'; indicators[prevInd].children[0].tabIndex = '-1';
indicators[nextInd].children[0].tabIndex = '0'; indicators[nextInd].children[0].tabIndex = '0';

31
packages/primevue/src/galleria/GalleriaThumbnails.vue
View File

@ -71,8 +71,9 @@
</template> </template>
<script> <script>
import { addClass, find, findSingle, getAttribute, removeClass, setAttribute } from '@primeuix/utils/dom';
import { localeComparator, sort } from '@primeuix/utils/object';
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { DomHandler, ObjectUtils } from '@primevue/core/utils';
import ChevronDownIcon from '@primevue/icons/chevrondown'; import ChevronDownIcon from '@primevue/icons/chevrondown';
import ChevronLeftIcon from '@primevue/icons/chevronleft'; import ChevronLeftIcon from '@primevue/icons/chevronleft';
import ChevronRightIcon from '@primevue/icons/chevronright'; import ChevronRightIcon from '@primevue/icons/chevronright';
@ -191,7 +192,7 @@ export default {
if (this.d_oldActiveItemIndex !== this.d_activeIndex) { if (this.d_oldActiveItemIndex !== this.d_activeIndex) {
document.body.setAttribute('data-p-items-hidden', 'false'); document.body.setAttribute('data-p-items-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden'); !this.isUnstyled && removeClass(this.$refs.itemsContainer, 'p-items-hidden');
this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s'; this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
} }
@ -228,7 +229,7 @@ export default {
if (this.$refs.itemsContainer) { if (this.$refs.itemsContainer) {
document.body.setAttribute('data-p-items-hidden', 'false'); document.body.setAttribute('data-p-items-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden'); !this.isUnstyled && removeClass(this.$refs.itemsContainer, 'p-items-hidden');
this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`; this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s'; this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
} }
@ -345,7 +346,7 @@ export default {
} }
}, },
onRightKey() { onRightKey() {
const indicators = DomHandler.find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]'); const indicators = find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]');
const activeIndex = this.findFocusedIndicatorIndex(); const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1); this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
@ -361,16 +362,16 @@ export default {
this.changedFocusedIndicator(activeIndex, 0); this.changedFocusedIndicator(activeIndex, 0);
}, },
onEndKey() { onEndKey() {
const indicators = DomHandler.find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]'); const indicators = find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]');
const activeIndex = this.findFocusedIndicatorIndex(); const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, indicators.length - 1); this.changedFocusedIndicator(activeIndex, indicators.length - 1);
}, },
onTabKey() { onTabKey() {
const indicators = [...DomHandler.find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]')]; const indicators = [...find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]')];
const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-active') === true); const highlightedIndex = indicators.findIndex((ind) => getAttribute(ind, 'data-p-active') === true);
const activeIndicator = DomHandler.findSingle(this.$refs.itemsContainer, '[tabindex="0"]'); const activeIndicator = findSingle(this.$refs.itemsContainer, '[tabindex="0"]');
const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement); const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
@ -378,13 +379,13 @@ export default {
indicators[highlightedIndex].children[0].tabIndex = '0'; indicators[highlightedIndex].children[0].tabIndex = '0';
}, },
findFocusedIndicatorIndex() { findFocusedIndicatorIndex() {
const indicators = [...DomHandler.find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]')]; const indicators = [...find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]')];
const activeIndicator = DomHandler.findSingle(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"] > [tabindex="0"]'); const activeIndicator = findSingle(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"] > [tabindex="0"]');
return indicators.findIndex((ind) => ind === activeIndicator.parentElement); return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
}, },
changedFocusedIndicator(prevInd, nextInd) { changedFocusedIndicator(prevInd, nextInd) {
const indicators = DomHandler.find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]'); const indicators = find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]');
indicators[prevInd].children[0].tabIndex = '-1'; indicators[prevInd].children[0].tabIndex = '-1';
indicators[nextInd].children[0].tabIndex = '0'; indicators[nextInd].children[0].tabIndex = '0';
@ -393,7 +394,7 @@ export default {
onTransitionEnd(e) { onTransitionEnd(e) {
if (this.$refs.itemsContainer && e.propertyName === 'transform') { if (this.$refs.itemsContainer && e.propertyName === 'transform') {
document.body.setAttribute('data-p-items-hidden', 'true'); document.body.setAttribute('data-p-items-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden'); !this.isUnstyled && addClass(this.$refs.itemsContainer, 'p-items-hidden');
this.$refs.itemsContainer.style.transition = ''; this.$refs.itemsContainer.style.transition = '';
} }
}, },
@ -435,7 +436,7 @@ export default {
if (!this.thumbnailsStyle) { if (!this.thumbnailsStyle) {
this.thumbnailsStyle = document.createElement('style'); this.thumbnailsStyle = document.createElement('style');
this.thumbnailsStyle.type = 'text/css'; this.thumbnailsStyle.type = 'text/css';
DomHandler.setAttribute(this.thumbnailsStyle, 'nonce', this.$primevue?.config?.csp?.nonce); setAttribute(this.thumbnailsStyle, 'nonce', this.$primevue?.config?.csp?.nonce);
document.body.appendChild(this.thumbnailsStyle); document.body.appendChild(this.thumbnailsStyle);
} }
@ -447,13 +448,13 @@ export default {
if (this.responsiveOptions && !this.isUnstyled) { if (this.responsiveOptions && !this.isUnstyled) {
this.sortedResponsiveOptions = [...this.responsiveOptions]; this.sortedResponsiveOptions = [...this.responsiveOptions];
const comparer = ObjectUtils.localeComparator(); const comparer = localeComparator();
this.sortedResponsiveOptions.sort((data1, data2) => { this.sortedResponsiveOptions.sort((data1, data2) => {
const value1 = data1.breakpoint; const value1 = data1.breakpoint;
const value2 = data2.breakpoint; const value2 = data2.breakpoint;
return ObjectUtils.sort(value1, value2, -1, comparer); return sort(value1, value2, -1, comparer);
}); });
for (let i = 0; i < this.sortedResponsiveOptions.length; i++) { for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {

21
packages/primevue/src/image/Image.vue
View File

@ -56,7 +56,8 @@
</template> </template>
<script> <script>
import { DomHandler, ZIndexUtils } from '@primevue/core/utils'; import { blockBodyScroll, isAttributeEquals, focus, addClass, unblockBodyScroll } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import EyeIcon from '@primevue/icons/eye'; import EyeIcon from '@primevue/icons/eye';
import RefreshIcon from '@primevue/icons/refresh'; import RefreshIcon from '@primevue/icons/refresh';
import SearchMinusIcon from '@primevue/icons/searchminus'; import SearchMinusIcon from '@primevue/icons/searchminus';
@ -83,7 +84,7 @@ export default {
}, },
beforeUnmount() { beforeUnmount() {
if (this.mask) { if (this.mask) {
ZIndexUtils.clear(this.container); ZIndex.clear(this.container);
} }
}, },
methods: { methods: {
@ -95,7 +96,7 @@ export default {
}, },
onImageClick() { onImageClick() {
if (this.preview) { if (this.preview) {
DomHandler.blockBodyScroll(); blockBodyScroll();
this.maskVisible = true; this.maskVisible = true;
setTimeout(() => { setTimeout(() => {
this.previewVisible = true; this.previewVisible = true;
@ -106,7 +107,7 @@ export default {
this.previewClick = true; this.previewClick = true;
}, },
onMaskClick(event) { onMaskClick(event) {
const isBarActionsClicked = DomHandler.isAttributeEquals(event.target, 'data-pc-section-group', 'action') || event.target.closest('[data-pc-section-group="action"]'); const isBarActionsClicked = isAttributeEquals(event.target, 'data-pc-section-group', 'action') || event.target.closest('[data-pc-section-group="action"]');
if (!this.previewClick && !isBarActionsClicked) { if (!this.previewClick && !isBarActionsClicked) {
this.previewVisible = false; this.previewVisible = false;
@ -121,7 +122,7 @@ export default {
case 'Escape': case 'Escape':
this.hidePreview(); this.hidePreview();
setTimeout(() => { setTimeout(() => {
DomHandler.focus(this.$refs.previewButton); focus(this.$refs.previewButton);
}, 200); }, 200);
event.preventDefault(); event.preventDefault();
@ -151,21 +152,21 @@ export default {
this.previewClick = true; this.previewClick = true;
}, },
onBeforeEnter() { onBeforeEnter() {
ZIndexUtils.set('modal', this.mask, this.$primevue.config.zIndex.modal); ZIndex.set('modal', this.mask, this.$primevue.config.zIndex.modal);
}, },
onEnter() { onEnter() {
this.focus(); this.focus();
this.$emit('show'); this.$emit('show');
}, },
onBeforeLeave() { onBeforeLeave() {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave'); !this.isUnstyled && addClass(this.mask, 'p-overlay-mask-leave');
}, },
onLeave() { onLeave() {
DomHandler.unblockBodyScroll(); unblockBodyScroll();
this.$emit('hide'); this.$emit('hide');
}, },
onAfterLeave(el) { onAfterLeave(el) {
ZIndexUtils.clear(el); ZIndex.clear(el);
this.maskVisible = false; this.maskVisible = false;
}, },
focus() { focus() {
@ -179,7 +180,7 @@ export default {
this.previewVisible = false; this.previewVisible = false;
this.rotate = 0; this.rotate = 0;
this.scale = 1; this.scale = 1;
DomHandler.unblockBodyScroll(); unblockBodyScroll();
} }
}, },
computed: { computed: {

8
packages/primevue/src/inputmask/InputMask.vue
View File

@ -19,7 +19,7 @@
</template> </template>
<script> <script>
import { DomHandler } from '@primevue/core/utils'; import { getUserAgent } from '@primeuix/utils/dom';
import InputText from 'primevue/inputtext'; import InputText from 'primevue/inputtext';
import BaseInputMask from './BaseInputMask.vue'; import BaseInputMask from './BaseInputMask.vue';
@ -103,7 +103,7 @@ export default {
pos, pos,
begin, begin,
end; end;
let iPhone = /iphone/i.test(DomHandler.getUserAgent()); let iPhone = /iphone/i.test(getUserAgent());
this.oldVal = this.$el.value; this.oldVal = this.$el.value;
@ -170,7 +170,7 @@ export default {
this.writeBuffer(); this.writeBuffer();
next = this.seekNext(p); next = this.seekNext(p);
if (/android/i.test(DomHandler.getUserAgent())) { if (/android/i.test(getUserAgent())) {
//Path for CSP Violation on FireFox OS 1.1 //Path for CSP Violation on FireFox OS 1.1
let proxy = () => { let proxy = () => {
this.caret(next); this.caret(next);
@ -468,7 +468,7 @@ export default {
'*': '[A-Za-z0-9]' '*': '[A-Za-z0-9]'
}; };
let ua = DomHandler.getUserAgent(); let ua = getUserAgent();
this.androidChrome = /chrome/i.test(ua) && /android/i.test(ua); this.androidChrome = /chrome/i.test(ua) && /android/i.test(ua);

13
packages/primevue/src/inputnumber/InputNumber.vue
View File

@ -72,7 +72,8 @@
</template> </template>
<script> <script>
import { DomHandler, ObjectUtils } from '@primevue/core/utils'; import { getSelection, clearSelection } from '@primeuix/utils/dom';
import { isNotEmpty } from '@primeuix/utils/object';
import AngleDownIcon from '@primevue/icons/angledown'; import AngleDownIcon from '@primevue/icons/angledown';
import AngleUpIcon from '@primevue/icons/angleup'; import AngleUpIcon from '@primevue/icons/angleup';
import InputText from 'primevue/inputtext'; import InputText from 'primevue/inputtext';
@ -501,7 +502,7 @@ export default {
case 'Home': case 'Home':
event.preventDefault(); event.preventDefault();
if (!ObjectUtils.isEmpty(this.min)) { if (isNotEmpty(this.min)) {
this.updateModel(event, this.min); this.updateModel(event, this.min);
} }
@ -510,7 +511,7 @@ export default {
case 'End': case 'End':
event.preventDefault(); event.preventDefault();
if (!ObjectUtils.isEmpty(this.max)) { if (isNotEmpty(this.max)) {
this.updateModel(event, this.max); this.updateModel(event, this.max);
} }
@ -740,7 +741,7 @@ export default {
onInputClick() { onInputClick() {
const currentValue = this.$refs.input.$el.value; const currentValue = this.$refs.input.$el.value;
if (!this.readonly && currentValue !== DomHandler.getSelection()) { if (!this.readonly && currentValue !== getSelection()) {
this.initCursor(); this.initCursor();
} }
}, },
@ -913,7 +914,7 @@ export default {
onInputFocus(event) { onInputFocus(event) {
this.focused = true; this.focused = true;
if (!this.disabled && !this.readonly && this.$refs.input.$el.value !== DomHandler.getSelection() && this.highlightOnFocus) { if (!this.disabled && !this.readonly && this.$refs.input.$el.value !== getSelection() && this.highlightOnFocus) {
event.target.select(); event.target.select();
} }
@ -932,7 +933,7 @@ export default {
this.updateModel(event, newValue); this.updateModel(event, newValue);
if (!this.disabled && !this.readonly && this.highlightOnFocus) { if (!this.disabled && !this.readonly && this.highlightOnFocus) {
DomHandler.clearSelection(); clearSelection();
} }
}, },
clearTimer() { clearTimer() {

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

@ -133,7 +133,9 @@
<script> <script>
import { FilterService } from '@primevue/core/api'; import { FilterService } from '@primevue/core/api';
import { DomHandler, ObjectUtils, UniqueComponentId } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { focus, isElement, getFirstFocusableElement, findSingle } from '@primeuix/utils/dom';
import { resolveFieldData, isPrintableCharacter, isNotEmpty, equals, findLastIndex } from '@primeuix/utils/object';
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';
@ -180,13 +182,13 @@ export default {
return this.virtualScrollerDisabled ? index : fn && fn(index)['index']; return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
}, },
getOptionLabel(option) { getOptionLabel(option) {
return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : typeof option === 'string' ? option : null; return this.optionLabel ? resolveFieldData(option, this.optionLabel) : typeof option === 'string' ? option : null;
}, },
getOptionValue(option) { getOptionValue(option) {
return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option; return this.optionValue ? resolveFieldData(option, this.optionValue) : option;
}, },
getOptionRenderKey(option, index) { getOptionRenderKey(option, index) {
return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index; return (this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
}, },
getPTOptions(option, itemOptions, index, key) { getPTOptions(option, itemOptions, index, key) {
return this.ptm(key, { return this.ptm(key, {
@ -198,38 +200,38 @@ export default {
}); });
}, },
isOptionDisabled(option) { isOptionDisabled(option) {
return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false; return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
}, },
isOptionGroup(option) { isOptionGroup(option) {
return this.optionGroupLabel && option.optionGroup && option.group; return this.optionGroupLabel && option.optionGroup && option.group;
}, },
getOptionGroupLabel(optionGroup) { getOptionGroupLabel(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel); return resolveFieldData(optionGroup, this.optionGroupLabel);
}, },
getOptionGroupChildren(optionGroup) { getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren); return resolveFieldData(optionGroup, this.optionGroupChildren);
}, },
getAriaPosInset(index) { getAriaPosInset(index) {
return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1; return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;
}, },
onFirstHiddenFocus() { onFirstHiddenFocus() {
DomHandler.focus(this.list); focus(this.list);
const firstFocusableEl = DomHandler.getFirstFocusableElement(this.$el, ':not([data-p-hidden-focusable="true"])'); const firstFocusableEl = getFirstFocusableElement(this.$el, ':not([data-p-hidden-focusable="true"])');
this.$refs.lastHiddenFocusableElement.tabIndex = DomHandler.isElement(firstFocusableEl) ? undefined : -1; this.$refs.lastHiddenFocusableElement.tabIndex = isElement(firstFocusableEl) ? undefined : -1;
this.$refs.firstHiddenFocusableElement.tabIndex = -1; this.$refs.firstHiddenFocusableElement.tabIndex = -1;
}, },
onLastHiddenFocus(event) { onLastHiddenFocus(event) {
const relatedTarget = event.relatedTarget; const relatedTarget = event.relatedTarget;
if (relatedTarget === this.list) { if (relatedTarget === this.list) {
const firstFocusableEl = DomHandler.getFirstFocusableElement(this.$el, ':not([data-p-hidden-focusable="true"])'); const firstFocusableEl = getFirstFocusableElement(this.$el, ':not([data-p-hidden-focusable="true"])');
DomHandler.focus(firstFocusableEl); focus(firstFocusableEl);
this.$refs.firstHiddenFocusableElement.tabIndex = undefined; this.$refs.firstHiddenFocusableElement.tabIndex = undefined;
} else { } else {
DomHandler.focus(this.$refs.firstHiddenFocusableElement); focus(this.$refs.firstHiddenFocusableElement);
} }
this.$refs.lastHiddenFocusableElement.tabIndex = -1; this.$refs.lastHiddenFocusableElement.tabIndex = -1;
@ -304,7 +306,7 @@ export default {
break; break;
} }
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { if (!metaKey && isPrintableCharacter(event.key)) {
this.searchOptions(event, event.key); this.searchOptions(event, event.key);
event.preventDefault(); event.preventDefault();
} }
@ -548,13 +550,13 @@ export default {
return this.isValidOption(option) && typeof this.getOptionLabel(option) === 'string' && this.getOptionLabel(option)?.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)); return this.isValidOption(option) && typeof this.getOptionLabel(option) === 'string' && this.getOptionLabel(option)?.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));
}, },
isValidOption(option) { isValidOption(option) {
return ObjectUtils.isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option)); return isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
}, },
isValidSelectedOption(option) { isValidSelectedOption(option) {
return this.isValidOption(option) && this.isSelected(option); return this.isValidOption(option) && this.isSelected(option);
}, },
isEquals(value1, value2) { isEquals(value1, value2) {
return ObjectUtils.equals(value1, value2, this.equalityKey); return equals(value1, value2, this.equalityKey);
}, },
isSelected(option) { isSelected(option) {
const optionValue = this.getOptionValue(option); const optionValue = this.getOptionValue(option);
@ -566,7 +568,7 @@ export default {
return this.visibleOptions.findIndex((option) => this.isValidOption(option)); return this.visibleOptions.findIndex((option) => this.isValidOption(option));
}, },
findLastOptionIndex() { findLastOptionIndex() {
return ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidOption(option)); return findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
}, },
findNextOptionIndex(index) { findNextOptionIndex(index) {
const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1; const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1;
@ -574,7 +576,7 @@ export default {
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index; return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
}, },
findPrevOptionIndex(index) { findPrevOptionIndex(index) {
const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1; const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : index; return matchedOptionIndex > -1 ? matchedOptionIndex : index;
}, },
@ -598,7 +600,7 @@ export default {
return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1; return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
}, },
findLastSelectedOptionIndex() { findLastSelectedOptionIndex() {
return this.hasSelectedOption ? ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidSelectedOption(option)) : -1; return this.hasSelectedOption ? findLastIndex(this.visibleOptions, (option) => this.isValidSelectedOption(option)) : -1;
}, },
findNextSelectedOptionIndex(index) { findNextSelectedOptionIndex(index) {
const matchedOptionIndex = this.hasSelectedOption && index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidSelectedOption(option)) : -1; const matchedOptionIndex = this.hasSelectedOption && index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidSelectedOption(option)) : -1;
@ -606,7 +608,7 @@ export default {
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1; return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
}, },
findPrevSelectedOptionIndex(index) { findPrevSelectedOptionIndex(index) {
const matchedOptionIndex = this.hasSelectedOption && index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidSelectedOption(option)) : -1; const matchedOptionIndex = this.hasSelectedOption && index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidSelectedOption(option)) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : -1; return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
}, },
@ -640,7 +642,7 @@ export default {
let optionIndex = -1; let optionIndex = -1;
if (ObjectUtils.isNotEmpty(this.searchValue)) { if (isNotEmpty(this.searchValue)) {
if (this.focusedOptionIndex !== -1) { if (this.focusedOptionIndex !== -1) {
optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)); optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option));
optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex; optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex;
@ -667,7 +669,7 @@ export default {
}, 500); }, 500);
}, },
removeOption(option) { removeOption(option) {
return this.modelValue.filter((val) => !ObjectUtils.equals(val, this.getOptionValue(option), this.equalityKey)); return this.modelValue.filter((val) => !equals(val, this.getOptionValue(option), this.equalityKey));
}, },
changeFocusedOptionIndex(event, index) { changeFocusedOptionIndex(event, index) {
if (this.focusedOptionIndex !== index) { if (this.focusedOptionIndex !== index) {
@ -682,7 +684,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 = DomHandler.findSingle(this.list, `li[id="${id}"]`); const element = findSingle(this.list, `li[id="${id}"]`);
if (element) { if (element) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' }); element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
@ -727,7 +729,7 @@ export default {
return this.filterValue ? FilterService.filter(options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale) : options; return this.filterValue ? FilterService.filter(options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale) : options;
}, },
hasSelectedOption() { hasSelectedOption() {
return ObjectUtils.isNotEmpty(this.modelValue); return isNotEmpty(this.modelValue);
}, },
equalityKey() { equalityKey() {
return this.optionValue ? null : this.dataKey; return this.optionValue ? null : this.dataKey;
@ -736,7 +738,7 @@ export default {
return this.filterFields || [this.optionLabel]; return this.filterFields || [this.optionLabel];
}, },
filterResultMessageText() { filterResultMessageText() {
return ObjectUtils.isNotEmpty(this.visibleOptions) ? this.filterMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptyFilterMessageText; return isNotEmpty(this.visibleOptions) ? this.filterMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptyFilterMessageText;
}, },
filterMessageText() { filterMessageText() {
return this.filterMessage || this.$primevue.config.locale.searchMessage || ''; return this.filterMessage || this.$primevue.config.locale.searchMessage || '';

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

@ -58,7 +58,10 @@
</template> </template>
<script> <script>
import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { focus, findSingle, isTouchDevice } from '@primeuix/utils/dom';
import { isNotEmpty, resolve, isPrintableCharacter, isEmpty, findLastIndex } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
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';
@ -92,7 +95,7 @@ export default {
this.id = newValue || UniqueComponentId(); this.id = newValue || UniqueComponentId();
}, },
activeItem(newItem) { activeItem(newItem) {
if (ObjectUtils.isNotEmpty(newItem)) { if (isNotEmpty(newItem)) {
this.bindOutsideClickListener(); this.bindOutsideClickListener();
this.bindResizeListener(); this.bindResizeListener();
} else { } else {
@ -113,7 +116,7 @@ export default {
}, },
methods: { methods: {
getItemProp(item, name) { getItemProp(item, name) {
return item ? ObjectUtils.getItemValue(item[name]) : undefined; return item ? resolve(item[name]) : undefined;
}, },
getItemLabel(item) { getItemLabel(item) {
return this.getItemProp(item, 'label'); return this.getItemProp(item, 'label');
@ -125,7 +128,7 @@ export default {
return this.getItemProp(item, 'visible') !== false; return this.getItemProp(item, 'visible') !== false;
}, },
isItemGroup(item) { isItemGroup(item) {
return ObjectUtils.isNotEmpty(this.getItemProp(item, 'items')); return isNotEmpty(this.getItemProp(item, 'items'));
}, },
isItemSeparator(item) { isItemSeparator(item) {
return this.getItemProp(item, 'separator'); return this.getItemProp(item, 'separator');
@ -134,16 +137,16 @@ export default {
return processedItem ? this.getItemLabel(processedItem.item) : undefined; return processedItem ? this.getItemLabel(processedItem.item) : undefined;
}, },
isProccessedItemGroup(processedItem) { isProccessedItemGroup(processedItem) {
return processedItem && ObjectUtils.isNotEmpty(processedItem.items); return processedItem && isNotEmpty(processedItem.items);
}, },
toggle(event) { toggle(event) {
if (this.mobileActive) { if (this.mobileActive) {
this.mobileActive = false; this.mobileActive = false;
ZIndexUtils.clear(this.menubar); ZIndex.clear(this.menubar);
this.hide(); this.hide();
} else { } else {
this.mobileActive = true; this.mobileActive = true;
ZIndexUtils.set('menu', this.menubar, this.$primevue.config.zIndex.menu); ZIndex.set('menu', this.menubar, this.$primevue.config.zIndex.menu);
setTimeout(() => { setTimeout(() => {
this.show(); this.show();
}, 1); }, 1);
@ -155,20 +158,20 @@ export default {
show() { show() {
this.focusedItemInfo = { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' }; this.focusedItemInfo = { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
DomHandler.focus(this.menubar); focus(this.menubar);
}, },
hide(event, isFocus) { hide(event, isFocus) {
if (this.mobileActive) { if (this.mobileActive) {
this.mobileActive = false; this.mobileActive = false;
setTimeout(() => { setTimeout(() => {
DomHandler.focus(this.$refs.menubutton); focus(this.$refs.menubutton);
}, 0); }, 0);
} }
this.activeItem = null; this.activeItem = null;
this.focusedItemInfo = { index: -1, key: '', parentKey: '' }; this.focusedItemInfo = { index: -1, key: '', parentKey: '' };
isFocus && DomHandler.focus(this.menubar); isFocus && focus(this.menubar);
this.dirty = false; this.dirty = false;
}, },
onFocus(event) { onFocus(event) {
@ -250,7 +253,7 @@ export default {
break; break;
default: default:
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { if (!metaKey && isPrintableCharacter(event.key)) {
this.searchItems(event, event.key); this.searchItems(event, event.key);
} }
@ -260,21 +263,21 @@ export default {
onItemChange(event) { onItemChange(event) {
const { processedItem, isFocus } = event; const { processedItem, isFocus } = event;
if (ObjectUtils.isEmpty(processedItem)) return; if (isEmpty(processedItem)) return;
const { index, key, parentKey, items } = processedItem; const { index, key, parentKey, items } = processedItem;
const grouped = ObjectUtils.isNotEmpty(items); const grouped = isNotEmpty(items);
grouped && (this.activeItem = processedItem); grouped && (this.activeItem = processedItem);
this.focusedItemInfo = { index, key, parentKey }; this.focusedItemInfo = { index, key, parentKey };
grouped && (this.dirty = true); grouped && (this.dirty = true);
isFocus && DomHandler.focus(this.menubar); isFocus && focus(this.menubar);
}, },
onItemClick(event) { onItemClick(event) {
const { originalEvent, processedItem } = event; const { originalEvent, processedItem } = event;
const grouped = this.isProccessedItemGroup(processedItem); const grouped = this.isProccessedItemGroup(processedItem);
const root = ObjectUtils.isEmpty(processedItem.parent); const root = isEmpty(processedItem.parent);
const selected = this.isSelected(processedItem); const selected = this.isSelected(processedItem);
if (selected) { if (selected) {
@ -284,7 +287,7 @@ export default {
this.focusedItemInfo = { index, key, parentKey }; this.focusedItemInfo = { index, key, parentKey };
this.dirty = !root; this.dirty = !root;
DomHandler.focus(this.menubar); focus(this.menubar);
} else { } else {
if (grouped) { if (grouped) {
this.onItemChange(event); this.onItemChange(event);
@ -306,7 +309,7 @@ export default {
}, },
onArrowDownKey(event) { onArrowDownKey(event) {
if (this.horizontal) { if (this.horizontal) {
if (ObjectUtils.isNotEmpty(this.activeItem) && this.activeItem.key === this.focusedItemInfo.key) { if (isNotEmpty(this.activeItem) && this.activeItem.key === this.focusedItemInfo.key) {
this.focusedItemInfo = { index: -1, key: '', parentKey: this.activeItem.key }; this.focusedItemInfo = { index: -1, key: '', parentKey: this.activeItem.key };
} else { } else {
const processedItem = this.findVisibleItem(this.focusedItemInfo.index); const processedItem = this.findVisibleItem(this.focusedItemInfo.index);
@ -331,7 +334,7 @@ export default {
const processedItem = this.findVisibleItem(this.focusedItemInfo.index); const processedItem = this.findVisibleItem(this.focusedItemInfo.index);
const grouped = this.isProccessedItemGroup(processedItem); const grouped = this.isProccessedItemGroup(processedItem);
if (!grouped && ObjectUtils.isNotEmpty(this.activeItem)) { if (!grouped && isNotEmpty(this.activeItem)) {
if (this.focusedItemInfo.index === 0) { if (this.focusedItemInfo.index === 0) {
this.focusedItemInfo = { index: this.activeItem.index, key: this.activeItem.key, parentKey: this.activeItem.parentKey }; this.focusedItemInfo = { index: this.activeItem.index, key: this.activeItem.key, parentKey: this.activeItem.parentKey };
this.activeItem = null; this.activeItem = null;
@ -360,7 +363,7 @@ export default {
this.changeFocusedItemInfo(event, itemIndex); this.changeFocusedItemInfo(event, itemIndex);
} }
} else { } else {
if (this.vertical && ObjectUtils.isNotEmpty(this.activeItem)) { if (this.vertical && isNotEmpty(this.activeItem)) {
if (processedItem.columnIndex === 0) { if (processedItem.columnIndex === 0) {
this.focusedItemInfo = { index: this.activeItem.index, key: this.activeItem.key, parentKey: this.activeItem.parentKey }; this.focusedItemInfo = { index: this.activeItem.index, key: this.activeItem.key, parentKey: this.activeItem.parentKey };
this.activeItem = null; this.activeItem = null;
@ -381,7 +384,7 @@ export default {
if (grouped) { if (grouped) {
if (this.vertical) { if (this.vertical) {
if (ObjectUtils.isNotEmpty(this.activeItem) && this.activeItem.key === processedItem.key) { if (isNotEmpty(this.activeItem) && this.activeItem.key === processedItem.key) {
this.focusedItemInfo = { index: -1, key: '', parentKey: this.activeItem.key }; this.focusedItemInfo = { index: -1, key: '', parentKey: this.activeItem.key };
} else { } else {
const processedItem = this.findVisibleItem(this.focusedItemInfo.index); const processedItem = this.findVisibleItem(this.focusedItemInfo.index);
@ -417,8 +420,8 @@ export default {
}, },
onEnterKey(event) { onEnterKey(event) {
if (this.focusedItemInfo.index !== -1) { if (this.focusedItemInfo.index !== -1) {
const element = DomHandler.findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`); const element = findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`);
const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="itemlink"]'); const anchorElement = element && findSingle(element, 'a[data-pc-section="itemlink"]');
anchorElement ? anchorElement.click() : element && element.click(); anchorElement ? anchorElement.click() : element && element.click();
@ -434,7 +437,7 @@ export default {
this.onEnterKey(event); this.onEnterKey(event);
}, },
onEscapeKey(event) { onEscapeKey(event) {
if (ObjectUtils.isNotEmpty(this.activeItem)) { if (isNotEmpty(this.activeItem)) {
this.focusedItemInfo = { index: this.activeItem.index, key: this.activeItem.key }; this.focusedItemInfo = { index: this.activeItem.index, key: this.activeItem.key };
this.activeItem = null; this.activeItem = null;
} }
@ -474,7 +477,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = (event) => { this.resizeListener = (event) => {
if (!DomHandler.isTouchDevice()) { if (!isTouchDevice()) {
this.hide(event, true); this.hide(event, true);
} }
@ -521,13 +524,13 @@ export default {
return this.isValidItem(processedItem) && this.isSelected(processedItem); return this.isValidItem(processedItem) && this.isSelected(processedItem);
}, },
isSelected(processedItem) { isSelected(processedItem) {
return ObjectUtils.isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false; return isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false;
}, },
findFirstItemIndex() { findFirstItemIndex() {
return this.visibleItems.findIndex((processedItem) => this.isValidItem(processedItem)); return this.visibleItems.findIndex((processedItem) => this.isValidItem(processedItem));
}, },
findLastItemIndex() { findLastItemIndex() {
return ObjectUtils.findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem)); return findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem));
}, },
findNextItemIndex(index) { findNextItemIndex(index) {
const matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex((processedItem) => this.isValidItem(processedItem)) : -1; const matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex((processedItem) => this.isValidItem(processedItem)) : -1;
@ -535,7 +538,7 @@ export default {
return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index; return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
}, },
findPrevItemIndex(index) { findPrevItemIndex(index) {
const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1; const matchedItemIndex = index > 0 ? findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1;
return matchedItemIndex > -1 ? matchedItemIndex : index; return matchedItemIndex > -1 ? matchedItemIndex : index;
}, },
@ -553,7 +556,7 @@ export default {
return selectedIndex < 0 ? this.findLastItemIndex() : selectedIndex; return selectedIndex < 0 ? this.findLastItemIndex() : selectedIndex;
}, },
findVisibleItem(index) { findVisibleItem(index) {
return ObjectUtils.isNotEmpty(this.visibleItems) ? this.visibleItems[index] : null; return isNotEmpty(this.visibleItems) ? this.visibleItems[index] : null;
}, },
searchItems(event, char) { searchItems(event, char) {
this.searchValue = (this.searchValue || '') + char; this.searchValue = (this.searchValue || '') + char;
@ -595,12 +598,12 @@ export default {
const processedItem = this.findVisibleItem(index); const processedItem = this.findVisibleItem(index);
this.focusedItemInfo.index = index; this.focusedItemInfo.index = index;
this.focusedItemInfo.key = ObjectUtils.isNotEmpty(processedItem) ? processedItem.key : ''; this.focusedItemInfo.key = isNotEmpty(processedItem) ? processedItem.key : '';
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;
const element = DomHandler.findSingle(this.menubar, `li[id="${id}"]`); const element = findSingle(this.menubar, `li[id="${id}"]`);
if (element) { if (element) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' }); element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
@ -641,7 +644,7 @@ export default {
return this.createProcessedItems(this.model || []); return this.createProcessedItems(this.model || []);
}, },
visibleItems() { visibleItems() {
const processedItem = ObjectUtils.isNotEmpty(this.activeItem) ? this.activeItem : null; const processedItem = isNotEmpty(this.activeItem) ? this.activeItem : null;
return processedItem && processedItem.key === this.focusedItemInfo.parentKey return processedItem && processedItem.key === this.focusedItemInfo.parentKey
? processedItem.items.reduce((items, col) => { ? processedItem.items.reduce((items, col) => {
@ -662,7 +665,7 @@ export default {
return this.orientation === 'vertical'; return this.orientation === 'vertical';
}, },
focusedItemId() { focusedItemId() {
return ObjectUtils.isNotEmpty(this.focusedItemInfo.key) ? `${this.id}_${this.focusedItemInfo.key}` : null; return isNotEmpty(this.focusedItemInfo.key) ? `${this.id}_${this.focusedItemInfo.key}` : null;
} }
}, },
components: { components: {

8
packages/primevue/src/megamenu/MegaMenuSub.vue
View File

@ -75,7 +75,7 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { ObjectUtils } from '@primevue/core/utils'; import { resolve, isNotEmpty } from '@primeuix/utils/object';
import AngleDownIcon from '@primevue/icons/angledown'; import AngleDownIcon from '@primevue/icons/angledown';
import AngleRightIcon from '@primevue/icons/angleright'; import AngleRightIcon from '@primevue/icons/angleright';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
@ -142,7 +142,7 @@ export default {
return this.getItemId(processedItem); return this.getItemId(processedItem);
}, },
getItemProp(processedItem, name, params) { getItemProp(processedItem, name, params) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined; return processedItem && processedItem.item ? resolve(processedItem.item[name], params) : undefined;
}, },
getItemLabel(processedItem) { getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label'); return this.getItemProp(processedItem, 'label');
@ -159,7 +159,7 @@ export default {
}); });
}, },
isItemActive(processedItem) { isItemActive(processedItem) {
return ObjectUtils.isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false; return isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false;
}, },
isItemVisible(processedItem) { isItemVisible(processedItem) {
return this.getItemProp(processedItem, 'visible') !== false; return this.getItemProp(processedItem, 'visible') !== false;
@ -171,7 +171,7 @@ export default {
return this.focusedItemId === this.getItemId(processedItem); return this.focusedItemId === this.getItemId(processedItem);
}, },
isItemGroup(processedItem) { isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items); return isNotEmpty(processedItem.items);
}, },
onItemClick(event, processedItem) { onItemClick(event, processedItem) {
this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item }); this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });

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

@ -65,7 +65,9 @@
</template> </template>
<script> <script>
import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils'; import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { focus, find, findSingle, addStyle, absolutePosition, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
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';
@ -116,7 +118,7 @@ export default {
this.target = null; this.target = null;
if (this.container && this.autoZIndex) { if (this.container && this.autoZIndex) {
ZIndexUtils.clear(this.container); ZIndex.clear(this.container);
} }
this.container = null; this.container = null;
@ -184,7 +186,7 @@ export default {
case 'Escape': case 'Escape':
if (this.popup) { if (this.popup) {
DomHandler.focus(this.target); focus(this.target);
this.hide(); this.hide();
} }
@ -204,7 +206,7 @@ export default {
}, },
onArrowUpKey(event) { onArrowUpKey(event) {
if (event.altKey && this.popup) { if (event.altKey && this.popup) {
DomHandler.focus(this.target); focus(this.target);
this.hide(); this.hide();
event.preventDefault(); event.preventDefault();
} else { } else {
@ -219,14 +221,14 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
onEndKey(event) { onEndKey(event) {
this.changeFocusedOptionIndex(DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]').length - 1); this.changeFocusedOptionIndex(find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]').length - 1);
event.preventDefault(); event.preventDefault();
}, },
onEnterKey(event) { onEnterKey(event) {
const element = DomHandler.findSingle(this.list, `li[id="${`${this.focusedOptionIndex}`}"]`); const element = findSingle(this.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="itemlink"]'); const anchorElement = element && findSingle(element, 'a[data-pc-section="itemlink"]');
this.popup && DomHandler.focus(this.target); this.popup && focus(this.target);
anchorElement ? anchorElement.click() : element && element.click(); anchorElement ? anchorElement.click() : element && element.click();
event.preventDefault(); event.preventDefault();
@ -235,19 +237,19 @@ export default {
this.onEnterKey(event); this.onEnterKey(event);
}, },
findNextOptionIndex(index) { findNextOptionIndex(index) {
const links = DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]'); const links = find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]');
const matchedOptionIndex = [...links].findIndex((link) => link.id === index); const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0; return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
}, },
findPrevOptionIndex(index) { findPrevOptionIndex(index) {
const links = DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]'); const links = find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]');
const matchedOptionIndex = [...links].findIndex((link) => link.id === index); const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0; return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
}, },
changeFocusedOptionIndex(index) { changeFocusedOptionIndex(index) {
const links = DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]'); const links = find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]');
let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index; let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index;
order > -1 && (this.focusedOptionIndex = links[order].getAttribute('id')); order > -1 && (this.focusedOptionIndex = links[order].getAttribute('id'));
@ -265,18 +267,18 @@ export default {
this.target = null; this.target = null;
}, },
onEnter(el) { onEnter(el) {
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' }); addStyle(el, { position: 'absolute', top: '0', left: '0' });
this.alignOverlay(); this.alignOverlay();
this.bindOutsideClickListener(); this.bindOutsideClickListener();
this.bindResizeListener(); this.bindResizeListener();
this.bindScrollListener(); this.bindScrollListener();
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.set('menu', el, this.baseZIndex + this.$primevue.config.zIndex.menu); ZIndex.set('menu', el, this.baseZIndex + this.$primevue.config.zIndex.menu);
} }
if (this.popup) { if (this.popup) {
DomHandler.focus(this.list); focus(this.list);
} }
this.$emit('show'); this.$emit('show');
@ -289,15 +291,15 @@ export default {
}, },
onAfterLeave(el) { onAfterLeave(el) {
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.clear(el); ZIndex.clear(el);
} }
}, },
alignOverlay() { alignOverlay() {
DomHandler.absolutePosition(this.container, this.target); absolutePosition(this.container, this.target);
const targetWidth = DomHandler.getOuterWidth(this.target); const targetWidth = getOuterWidth(this.target);
if (targetWidth > DomHandler.getOuterWidth(this.container)) { if (targetWidth > getOuterWidth(this.container)) {
this.container.style.minWidth = DomHandler.getOuterWidth(this.target) + 'px'; this.container.style.minWidth = getOuterWidth(this.target) + 'px';
} }
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
@ -341,7 +343,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = () => { this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) { if (this.overlayVisible && !isTouchDevice()) {
this.hide(); this.hide();
} }
}; };

4
packages/primevue/src/menu/Menuitem.vue
View File

@ -26,7 +26,7 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { ObjectUtils } from '@primevue/core/utils'; import { resolve } from '@primeuix/utils/object';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
import { mergeProps } from 'vue'; import { mergeProps } from 'vue';
@ -45,7 +45,7 @@ export default {
}, },
methods: { methods: {
getItemProp(processedItem, name) { getItemProp(processedItem, name) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined; return processedItem && processedItem.item ? resolve(processedItem.item[name]) : undefined;
}, },
getPTOptions(key) { getPTOptions(key) {
return this.ptm(key, { return this.ptm(key, {

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

@ -57,7 +57,10 @@
</template> </template>
<script> <script>
import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { focus, isTouchDevice, findSingle } from '@primeuix/utils/dom';
import { isNotEmpty, resolve, isPrintableCharacter, isEmpty, findLastIndex } from '@primeuix/utils/object';
import { 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';
import MenubarSub from './MenubarSub.vue'; import MenubarSub from './MenubarSub.vue';
@ -85,7 +88,7 @@ export default {
this.id = newValue || UniqueComponentId(); this.id = newValue || UniqueComponentId();
}, },
activeItemPath(newPath) { activeItemPath(newPath) {
if (ObjectUtils.isNotEmpty(newPath)) { if (isNotEmpty(newPath)) {
this.bindOutsideClickListener(); this.bindOutsideClickListener();
this.bindResizeListener(); this.bindResizeListener();
} else { } else {
@ -108,14 +111,14 @@ export default {
this.unbindMatchMediaListener(); this.unbindMatchMediaListener();
if (this.container) { if (this.container) {
ZIndexUtils.clear(this.container); ZIndex.clear(this.container);
} }
this.container = null; this.container = null;
}, },
methods: { methods: {
getItemProp(item, name) { getItemProp(item, name) {
return item ? ObjectUtils.getItemValue(item[name]) : undefined; return item ? resolve(item[name]) : undefined;
}, },
getItemLabel(item) { getItemLabel(item) {
return this.getItemProp(item, 'label'); return this.getItemProp(item, 'label');
@ -127,7 +130,7 @@ export default {
return this.getItemProp(item, 'visible') !== false; return this.getItemProp(item, 'visible') !== false;
}, },
isItemGroup(item) { isItemGroup(item) {
return ObjectUtils.isNotEmpty(this.getItemProp(item, 'items')); return isNotEmpty(this.getItemProp(item, 'items'));
}, },
isItemSeparator(item) { isItemSeparator(item) {
return this.getItemProp(item, 'separator'); return this.getItemProp(item, 'separator');
@ -136,16 +139,16 @@ export default {
return processedItem ? this.getItemLabel(processedItem.item) : undefined; return processedItem ? this.getItemLabel(processedItem.item) : undefined;
}, },
isProccessedItemGroup(processedItem) { isProccessedItemGroup(processedItem) {
return processedItem && ObjectUtils.isNotEmpty(processedItem.items); return processedItem && isNotEmpty(processedItem.items);
}, },
toggle(event) { toggle(event) {
if (this.mobileActive) { if (this.mobileActive) {
this.mobileActive = false; this.mobileActive = false;
ZIndexUtils.clear(this.menubar); ZIndex.clear(this.menubar);
this.hide(); this.hide();
} else { } else {
this.mobileActive = true; this.mobileActive = true;
ZIndexUtils.set('menu', this.menubar, this.$primevue.config.zIndex.menu); ZIndex.set('menu', this.menubar, this.$primevue.config.zIndex.menu);
setTimeout(() => { setTimeout(() => {
this.show(); this.show();
}, 1); }, 1);
@ -155,20 +158,20 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
show() { show() {
DomHandler.focus(this.menubar); focus(this.menubar);
}, },
hide(event, isFocus) { hide(event, isFocus) {
if (this.mobileActive) { if (this.mobileActive) {
this.mobileActive = false; this.mobileActive = false;
setTimeout(() => { setTimeout(() => {
DomHandler.focus(this.$refs.menubutton); focus(this.$refs.menubutton);
}, 0); }, 0);
} }
this.activeItemPath = []; this.activeItemPath = [];
this.focusedItemInfo = { index: -1, level: 0, parentKey: '' }; this.focusedItemInfo = { index: -1, level: 0, parentKey: '' };
isFocus && DomHandler.focus(this.menubar); isFocus && focus(this.menubar);
this.dirty = false; this.dirty = false;
}, },
onFocus(event) { onFocus(event) {
@ -238,7 +241,7 @@ export default {
break; break;
default: default:
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { if (!metaKey && isPrintableCharacter(event.key)) {
this.searchItems(event, event.key); this.searchItems(event, event.key);
} }
@ -248,10 +251,10 @@ export default {
onItemChange(event) { onItemChange(event) {
const { processedItem, isFocus } = event; const { processedItem, isFocus } = event;
if (ObjectUtils.isEmpty(processedItem)) return; if (isEmpty(processedItem)) return;
const { index, key, level, parentKey, items } = processedItem; const { index, key, level, parentKey, items } = processedItem;
const grouped = ObjectUtils.isNotEmpty(items); const grouped = isNotEmpty(items);
const activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key); const activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
grouped && activeItemPath.push(processedItem); grouped && activeItemPath.push(processedItem);
@ -260,12 +263,12 @@ export default {
this.activeItemPath = activeItemPath; this.activeItemPath = activeItemPath;
grouped && (this.dirty = true); grouped && (this.dirty = true);
isFocus && DomHandler.focus(this.menubar); isFocus && focus(this.menubar);
}, },
onItemClick(event) { onItemClick(event) {
const { originalEvent, processedItem } = event; const { originalEvent, processedItem } = event;
const grouped = this.isProccessedItemGroup(processedItem); const grouped = this.isProccessedItemGroup(processedItem);
const root = ObjectUtils.isEmpty(processedItem.parent); const root = isEmpty(processedItem.parent);
const selected = this.isSelected(processedItem); const selected = this.isSelected(processedItem);
if (selected) { if (selected) {
@ -275,7 +278,7 @@ export default {
this.focusedItemInfo = { index, level, parentKey }; this.focusedItemInfo = { index, level, parentKey };
this.dirty = !root; this.dirty = !root;
DomHandler.focus(this.menubar); focus(this.menubar);
} else { } else {
if (grouped) { if (grouped) {
this.onItemChange(event); this.onItemChange(event);
@ -286,7 +289,7 @@ export default {
this.changeFocusedItemIndex(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1); this.changeFocusedItemIndex(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
this.mobileActive = false; this.mobileActive = false;
DomHandler.focus(this.menubar); focus(this.menubar);
} }
} }
}, },
@ -308,7 +311,7 @@ export default {
}, },
onArrowDownKey(event) { onArrowDownKey(event) {
const processedItem = this.visibleItems[this.focusedItemInfo.index]; const processedItem = this.visibleItems[this.focusedItemInfo.index];
const root = processedItem ? ObjectUtils.isEmpty(processedItem.parent) : null; const root = processedItem ? isEmpty(processedItem.parent) : null;
if (root) { if (root) {
const grouped = this.isProccessedItemGroup(processedItem); const grouped = this.isProccessedItemGroup(processedItem);
@ -328,7 +331,7 @@ export default {
}, },
onArrowUpKey(event) { onArrowUpKey(event) {
const processedItem = this.visibleItems[this.focusedItemInfo.index]; const processedItem = this.visibleItems[this.focusedItemInfo.index];
const root = ObjectUtils.isEmpty(processedItem.parent); const root = isEmpty(processedItem.parent);
if (root) { if (root) {
const grouped = this.isProccessedItemGroup(processedItem); const grouped = this.isProccessedItemGroup(processedItem);
@ -402,8 +405,8 @@ export default {
}, },
onEnterKey(event) { onEnterKey(event) {
if (this.focusedItemInfo.index !== -1) { if (this.focusedItemInfo.index !== -1) {
const element = DomHandler.findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`); const element = findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`);
const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="itemlink"]'); const anchorElement = element && findSingle(element, 'a[data-pc-section="itemlink"]');
anchorElement ? anchorElement.click() : element && element.click(); anchorElement ? anchorElement.click() : element && element.click();
@ -461,7 +464,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = (event) => { this.resizeListener = (event) => {
if (!DomHandler.isTouchDevice()) { if (!isTouchDevice()) {
this.hide(event, true); this.hide(event, true);
} }
@ -514,7 +517,7 @@ export default {
return this.visibleItems.findIndex((processedItem) => this.isValidItem(processedItem)); return this.visibleItems.findIndex((processedItem) => this.isValidItem(processedItem));
}, },
findLastItemIndex() { findLastItemIndex() {
return ObjectUtils.findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem)); return findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem));
}, },
findNextItemIndex(index) { findNextItemIndex(index) {
const matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex((processedItem) => this.isValidItem(processedItem)) : -1; const matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex((processedItem) => this.isValidItem(processedItem)) : -1;
@ -522,7 +525,7 @@ export default {
return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index; return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
}, },
findPrevItemIndex(index) { findPrevItemIndex(index) {
const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1; const matchedItemIndex = index > 0 ? findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1;
return matchedItemIndex > -1 ? matchedItemIndex : index; return matchedItemIndex > -1 ? matchedItemIndex : index;
}, },
@ -583,7 +586,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 = DomHandler.findSingle(this.menubar, `li[id="${id}"]`); const element = findSingle(this.menubar, `li[id="${id}"]`);
if (element) { if (element) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' }); element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
@ -627,7 +630,7 @@ export default {
return processedItem ? processedItem.items : this.processedItems; return processedItem ? processedItem.items : this.processedItems;
}, },
focusedItemId() { focusedItemId() {
return this.focusedItemInfo.index !== -1 ? `${this.id}${ObjectUtils.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: {

6
packages/primevue/src/menubar/MenubarSub.vue
View File

@ -73,7 +73,7 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { ObjectUtils } from '@primevue/core/utils'; import { resolve, isNotEmpty } from '@primeuix/utils/object';
import AngleDownIcon from '@primevue/icons/angledown'; import AngleDownIcon from '@primevue/icons/angledown';
import AngleRightIcon from '@primevue/icons/angleright'; import AngleRightIcon from '@primevue/icons/angleright';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
@ -131,7 +131,7 @@ export default {
return this.getItemId(processedItem); return this.getItemId(processedItem);
}, },
getItemProp(processedItem, name, params) { getItemProp(processedItem, name, params) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined; return processedItem && processedItem.item ? resolve(processedItem.item[name], params) : undefined;
}, },
getItemLabel(processedItem) { getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label'); return this.getItemProp(processedItem, 'label');
@ -164,7 +164,7 @@ export default {
return this.focusedItemId === this.getItemId(processedItem); return this.focusedItemId === this.getItemId(processedItem);
}, },
isItemGroup(processedItem) { isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items); return isNotEmpty(processedItem.items);
}, },
onItemClick(event, processedItem) { onItemClick(event, processedItem) {
this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item }); this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });

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

@ -206,7 +206,10 @@
<script> <script>
import { FilterService } from '@primevue/core/api'; import { FilterService } from '@primevue/core/api';
import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils'; import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { focus, getFirstFocusableElement, getLastFocusableElement, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, getFocusableElements, findSingle } from '@primeuix/utils/dom';
import { resolveFieldData, isPrintableCharacter, equals, isNotEmpty, findLastIndex } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
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';
@ -270,7 +273,7 @@ export default {
} }
if (this.overlay) { if (this.overlay) {
ZIndexUtils.clear(this.overlay); ZIndex.clear(this.overlay);
this.overlay = null; this.overlay = null;
} }
}, },
@ -279,13 +282,13 @@ export default {
return this.virtualScrollerDisabled ? index : fn && fn(index)['index']; return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
}, },
getOptionLabel(option) { getOptionLabel(option) {
return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option; return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;
}, },
getOptionValue(option) { getOptionValue(option) {
return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option; return this.optionValue ? resolveFieldData(option, this.optionValue) : option;
}, },
getOptionRenderKey(option, index) { getOptionRenderKey(option, index) {
return this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option) + `_${index}`; return this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option) + `_${index}`;
}, },
getHeaderCheckboxPTOptions(key) { getHeaderCheckboxPTOptions(key) {
return this.ptm(key, { return this.ptm(key, {
@ -308,16 +311,16 @@ export default {
return true; return true;
} }
return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false; return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
}, },
isOptionGroup(option) { isOptionGroup(option) {
return this.optionGroupLabel && option.optionGroup && option.group; return this.optionGroupLabel && option.optionGroup && option.group;
}, },
getOptionGroupLabel(optionGroup) { getOptionGroupLabel(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel); return resolveFieldData(optionGroup, this.optionGroupLabel);
}, },
getOptionGroupChildren(optionGroup) { getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren); return resolveFieldData(optionGroup, this.optionGroupChildren);
}, },
getAriaPosInset(index) { getAriaPosInset(index) {
return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1; return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;
@ -327,7 +330,7 @@ export default {
this.overlayVisible = true; this.overlayVisible = true;
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex(); this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex();
isFocus && DomHandler.focus(this.$refs.focusInput); isFocus && focus(this.$refs.focusInput);
}, },
hide(isFocus) { hide(isFocus) {
const _hide = () => { const _hide = () => {
@ -338,7 +341,7 @@ export default {
this.searchValue = ''; this.searchValue = '';
this.resetFilterOnHide && (this.filterValue = null); this.resetFilterOnHide && (this.filterValue = null);
isFocus && DomHandler.focus(this.$refs.focusInput); isFocus && focus(this.$refs.focusInput);
}; };
setTimeout(() => { setTimeout(() => {
@ -430,7 +433,7 @@ export default {
break; break;
} }
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { if (!metaKey && isPrintableCharacter(event.key)) {
!this.overlayVisible && this.show(); !this.overlayVisible && this.show();
this.searchOptions(event); this.searchOptions(event);
event.preventDefault(); event.preventDefault();
@ -453,14 +456,14 @@ export default {
this.clicked = true; this.clicked = true;
}, },
onFirstHiddenFocus(event) { onFirstHiddenFocus(event) {
const focusableEl = event.relatedTarget === this.$refs.focusInput ? DomHandler.getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput; const focusableEl = event.relatedTarget === this.$refs.focusInput ? getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput;
DomHandler.focus(focusableEl); focus(focusableEl);
}, },
onLastHiddenFocus(event) { onLastHiddenFocus(event) {
const focusableEl = event.relatedTarget === this.$refs.focusInput ? DomHandler.getLastFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput; const focusableEl = event.relatedTarget === this.$refs.focusInput ? getLastFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput;
DomHandler.focus(focusableEl); focus(focusableEl);
}, },
onOptionSelect(event, option, index = -1, isFocus = false) { onOptionSelect(event, option, index = -1, isFocus = false) {
if (this.disabled || this.isOptionDisabled(option)) { if (this.disabled || this.isOptionDisabled(option)) {
@ -470,12 +473,12 @@ export default {
let selected = this.isSelected(option); let selected = this.isSelected(option);
let value = null; let value = null;
if (selected) value = this.modelValue.filter((val) => !ObjectUtils.equals(val, this.getOptionValue(option), this.equalityKey)); if (selected) value = this.modelValue.filter((val) => !equals(val, this.getOptionValue(option), this.equalityKey));
else value = [...(this.modelValue || []), this.getOptionValue(option)]; else value = [...(this.modelValue || []), this.getOptionValue(option)];
this.updateModel(event, value); this.updateModel(event, value);
index !== -1 && (this.focusedOptionIndex = index); index !== -1 && (this.focusedOptionIndex = index);
isFocus && DomHandler.focus(this.$refs.focusInput); isFocus && focus(this.$refs.focusInput);
}, },
onOptionMouseMove(event, index) { onOptionMouseMove(event, index) {
if (this.focusOnHover) { if (this.focusOnHover) {
@ -689,7 +692,7 @@ export default {
onTabKey(event, pressedInInputText = false) { onTabKey(event, pressedInInputText = false) {
if (!pressedInInputText) { if (!pressedInInputText) {
if (this.overlayVisible && this.hasFocusableElements()) { if (this.overlayVisible && this.hasFocusableElements()) {
DomHandler.focus(event.shiftKey ? this.$refs.lastHiddenFocusableElementOnOverlay : this.$refs.firstHiddenFocusableElementOnOverlay); focus(event.shiftKey ? this.$refs.lastHiddenFocusableElementOnOverlay : this.$refs.firstHiddenFocusableElementOnOverlay);
event.preventDefault(); event.preventDefault();
} else { } else {
@ -705,13 +708,13 @@ export default {
this.startRangeIndex = this.focusedOptionIndex; this.startRangeIndex = this.focusedOptionIndex;
}, },
onOverlayEnter(el) { onOverlayEnter(el) {
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay); ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' }); addStyle(el, { position: 'absolute', top: '0', left: '0' });
this.alignOverlay(); this.alignOverlay();
this.scrollInView(); this.scrollInView();
this.autoFilterFocus && DomHandler.focus(this.$refs.filterInput.$el); this.autoFilterFocus && focus(this.$refs.filterInput.$el);
}, },
onOverlayAfterEnter() { onOverlayAfterEnter() {
this.bindOutsideClickListener(); this.bindOutsideClickListener();
@ -729,14 +732,14 @@ export default {
this.overlay = null; this.overlay = null;
}, },
onOverlayAfterLeave(el) { onOverlayAfterLeave(el) {
ZIndexUtils.clear(el); ZIndex.clear(el);
}, },
alignOverlay() { alignOverlay() {
if (this.appendTo === 'self') { if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, this.$el); relativePosition(this.overlay, this.$el);
} else { } else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px'; this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el); absolutePosition(this.overlay, this.$el);
} }
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
@ -775,7 +778,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = () => { this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) { if (this.overlayVisible && !isTouchDevice()) {
this.hide(); this.hide();
} }
}; };
@ -794,7 +797,7 @@ export default {
}, },
getLabelByValue(value) { getLabelByValue(value) {
const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || []; const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
const matchedOption = options.find((option) => !this.isOptionGroup(option) && ObjectUtils.equals(this.getOptionValue(option), value, this.equalityKey)); const matchedOption = options.find((option) => !this.isOptionGroup(option) && equals(this.getOptionValue(option), value, this.equalityKey));
return matchedOption ? this.getOptionLabel(matchedOption) : null; return matchedOption ? this.getOptionLabel(matchedOption) : null;
}, },
@ -819,7 +822,7 @@ export default {
}, },
removeOption(event, optionValue) { removeOption(event, optionValue) {
event.stopPropagation(); event.stopPropagation();
let value = this.modelValue.filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey)); let value = this.modelValue.filter((val) => !equals(val, optionValue, this.equalityKey));
this.updateModel(event, value); this.updateModel(event, value);
}, },
@ -827,19 +830,19 @@ export default {
this.filterValue = null; this.filterValue = null;
}, },
hasFocusableElements() { hasFocusableElements() {
return DomHandler.getFocusableElements(this.overlay, ':not([data-p-hidden-focusable="true"])').length > 0; return getFocusableElements(this.overlay, ':not([data-p-hidden-focusable="true"])').length > 0;
}, },
isOptionMatched(option) { isOptionMatched(option) {
return this.isValidOption(option) && typeof this.getOptionLabel(option) === 'string' && this.getOptionLabel(option)?.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)); return this.isValidOption(option) && typeof this.getOptionLabel(option) === 'string' && this.getOptionLabel(option)?.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));
}, },
isValidOption(option) { isValidOption(option) {
return ObjectUtils.isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option)); return isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
}, },
isValidSelectedOption(option) { isValidSelectedOption(option) {
return this.isValidOption(option) && this.isSelected(option); return this.isValidOption(option) && this.isSelected(option);
}, },
isEquals(value1, value2) { isEquals(value1, value2) {
return ObjectUtils.equals(value1, value2, this.equalityKey); return equals(value1, value2, this.equalityKey);
}, },
isSelected(option) { isSelected(option) {
const optionValue = this.getOptionValue(option); const optionValue = this.getOptionValue(option);
@ -850,7 +853,7 @@ export default {
return this.visibleOptions.findIndex((option) => this.isValidOption(option)); return this.visibleOptions.findIndex((option) => this.isValidOption(option));
}, },
findLastOptionIndex() { findLastOptionIndex() {
return ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidOption(option)); return findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
}, },
findNextOptionIndex(index) { findNextOptionIndex(index) {
const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1; const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1;
@ -858,7 +861,7 @@ export default {
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index; return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
}, },
findPrevOptionIndex(index) { findPrevOptionIndex(index) {
const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1; const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : index; return matchedOptionIndex > -1 ? matchedOptionIndex : index;
}, },
@ -878,7 +881,7 @@ export default {
return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1; return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
}, },
findLastSelectedOptionIndex() { findLastSelectedOptionIndex() {
return this.hasSelectedOption ? ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidSelectedOption(option)) : -1; return this.hasSelectedOption ? findLastIndex(this.visibleOptions, (option) => this.isValidSelectedOption(option)) : -1;
}, },
findNextSelectedOptionIndex(index) { findNextSelectedOptionIndex(index) {
const matchedOptionIndex = this.hasSelectedOption && index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidSelectedOption(option)) : -1; const matchedOptionIndex = this.hasSelectedOption && index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidSelectedOption(option)) : -1;
@ -886,7 +889,7 @@ export default {
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1; return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
}, },
findPrevSelectedOptionIndex(index) { findPrevSelectedOptionIndex(index) {
const matchedOptionIndex = this.hasSelectedOption && index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidSelectedOption(option)) : -1; const matchedOptionIndex = this.hasSelectedOption && index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidSelectedOption(option)) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : -1; return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
}, },
@ -920,7 +923,7 @@ export default {
let optionIndex = -1; let optionIndex = -1;
if (ObjectUtils.isNotEmpty(this.searchValue)) { if (isNotEmpty(this.searchValue)) {
if (this.focusedOptionIndex !== -1) { if (this.focusedOptionIndex !== -1) {
optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)); optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option));
optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex; optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex;
@ -959,7 +962,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 = DomHandler.findSingle(this.list, `li[id="${id}"]`); const element = findSingle(this.list, `li[id="${id}"]`);
if (element) { if (element) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
@ -1033,7 +1036,7 @@ export default {
let label; let label;
if (this.modelValue && this.modelValue.length) { if (this.modelValue && this.modelValue.length) {
if (ObjectUtils.isNotEmpty(this.maxSelectedLabels) && this.modelValue.length > this.maxSelectedLabels) { if (isNotEmpty(this.maxSelectedLabels) && this.modelValue.length > this.maxSelectedLabels) {
return this.getSelectedItemsLabel(); return this.getSelectedItemsLabel();
} else { } else {
label = ''; label = '';
@ -1053,13 +1056,13 @@ export default {
return label; return label;
}, },
chipSelectedItems() { chipSelectedItems() {
return ObjectUtils.isNotEmpty(this.maxSelectedLabels) && this.modelValue && this.modelValue.length > this.maxSelectedLabels ? this.modelValue.slice(0, this.maxSelectedLabels) : this.modelValue; return isNotEmpty(this.maxSelectedLabels) && this.modelValue && this.modelValue.length > this.maxSelectedLabels ? this.modelValue.slice(0, this.maxSelectedLabels) : this.modelValue;
}, },
allSelected() { allSelected() {
return this.selectAll !== null ? this.selectAll : ObjectUtils.isNotEmpty(this.visibleOptions) && this.visibleOptions.every((option) => this.isOptionGroup(option) || this.isOptionDisabled(option) || this.isSelected(option)); return this.selectAll !== null ? this.selectAll : isNotEmpty(this.visibleOptions) && this.visibleOptions.every((option) => this.isOptionGroup(option) || this.isOptionDisabled(option) || this.isSelected(option));
}, },
hasSelectedOption() { hasSelectedOption() {
return ObjectUtils.isNotEmpty(this.modelValue); return isNotEmpty(this.modelValue);
}, },
equalityKey() { equalityKey() {
return this.optionValue ? null : this.dataKey; return this.optionValue ? null : this.dataKey;
@ -1071,7 +1074,7 @@ export default {
return this.selectionLimit && this.modelValue && this.modelValue.length === this.selectionLimit; return this.selectionLimit && this.modelValue && this.modelValue.length === this.selectionLimit;
}, },
filterResultMessageText() { filterResultMessageText() {
return ObjectUtils.isNotEmpty(this.visibleOptions) ? this.filterMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptyFilterMessageText; return isNotEmpty(this.visibleOptions) ? this.filterMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptyFilterMessageText;
}, },
filterMessageText() { filterMessageText() {
return this.filterMessage || this.$primevue.config.locale.searchMessage || ''; return this.filterMessage || this.$primevue.config.locale.searchMessage || '';

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

@ -67,7 +67,9 @@
</template> </template>
<script> <script>
import { DomHandler, ObjectUtils, UniqueComponentId } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { find, findSingle, scrollInView, setAttribute } from '@primeuix/utils/dom';
import { findIndexInList, isNotEmpty } from '@primeuix/utils/object';
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';
@ -145,7 +147,7 @@ export default {
for (let i = 0; i < this.d_selection.length; i++) { for (let i = 0; i < this.d_selection.length; i++) {
let selectedItem = this.d_selection[i]; let selectedItem = this.d_selection[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value); let selectedItemIndex = findIndexInList(selectedItem, value);
if (selectedItemIndex !== 0) { if (selectedItemIndex !== 0) {
let movedItem = value[selectedItemIndex]; let movedItem = value[selectedItemIndex];
@ -168,7 +170,7 @@ export default {
for (let i = 0; i < this.d_selection.length; i++) { for (let i = 0; i < this.d_selection.length; i++) {
let selectedItem = this.d_selection[i]; let selectedItem = this.d_selection[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value); let selectedItemIndex = findIndexInList(selectedItem, value);
if (selectedItemIndex !== 0) { if (selectedItemIndex !== 0) {
let movedItem = value.splice(selectedItemIndex, 1)[0]; let movedItem = value.splice(selectedItemIndex, 1)[0];
@ -189,7 +191,7 @@ export default {
for (let i = this.d_selection.length - 1; i >= 0; i--) { for (let i = this.d_selection.length - 1; i >= 0; i--) {
let selectedItem = this.d_selection[i]; let selectedItem = this.d_selection[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value); let selectedItemIndex = findIndexInList(selectedItem, value);
if (selectedItemIndex !== value.length - 1) { if (selectedItemIndex !== value.length - 1) {
let movedItem = value[selectedItemIndex]; let movedItem = value[selectedItemIndex];
@ -212,7 +214,7 @@ export default {
for (let i = this.d_selection.length - 1; i >= 0; i--) { for (let i = this.d_selection.length - 1; i >= 0; i--) {
let selectedItem = this.d_selection[i]; let selectedItem = this.d_selection[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value); let selectedItemIndex = findIndexInList(selectedItem, value);
if (selectedItemIndex !== value.length - 1) { if (selectedItemIndex !== value.length - 1) {
let movedItem = value.splice(selectedItemIndex, 1)[0]; let movedItem = value.splice(selectedItemIndex, 1)[0];
@ -228,14 +230,14 @@ export default {
} }
}, },
updateListScroll() { updateListScroll() {
this.list = DomHandler.findSingle(this.$refs.listbox.$el, '[data-pc-section="list"]'); this.list = findSingle(this.$refs.listbox.$el, '[data-pc-section="list"]');
const listItems = DomHandler.find(this.list, '[data-pc-section="item"][data-p-selected="true"]'); const listItems = find(this.list, '[data-pc-section="item"][data-p-selected="true"]');
if (listItems && listItems.length) { if (listItems && listItems.length) {
switch (this.reorderDirection) { switch (this.reorderDirection) {
case 'up': case 'up':
DomHandler.scrollInView(this.list, listItems[0]); scrollInView(this.list, listItems[0]);
break; break;
case 'top': case 'top':
@ -243,7 +245,7 @@ export default {
break; break;
case 'down': case 'down':
DomHandler.scrollInView(this.list, listItems[listItems.length - 1]); scrollInView(this.list, listItems[listItems.length - 1]);
break; break;
case 'bottom': case 'bottom':
@ -260,7 +262,7 @@ export default {
this.$el.setAttribute(this.attributeSelector, ''); this.$el.setAttribute(this.attributeSelector, '');
this.styleElement = document.createElement('style'); this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css'; this.styleElement.type = 'text/css';
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce); setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.styleElement); document.head.appendChild(this.styleElement);
let innerHTML = ` let innerHTML = `
@ -305,7 +307,7 @@ export default {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveBottom : undefined; return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveBottom : undefined;
}, },
hasSelectedOption() { hasSelectedOption() {
return ObjectUtils.isNotEmpty(this.d_selection); return isNotEmpty(this.d_selection);
} }
}, },
components: { components: {

4
packages/primevue/src/organizationchart/OrganizationChartNode.vue
View File

@ -53,7 +53,7 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { DomHandler } from '@primevue/core/utils'; import { isAttributeEquals } from '@primeuix/utils/dom';
import ChevronDownIcon from '@primevue/icons/chevrondown'; import ChevronDownIcon from '@primevue/icons/chevrondown';
import ChevronUpIcon from '@primevue/icons/chevronup'; import ChevronUpIcon from '@primevue/icons/chevronup';
@ -108,7 +108,7 @@ export default {
}); });
}, },
onNodeClick(event) { onNodeClick(event) {
if (DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglebutton') || DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglebuttonicon')) { if (isAttributeEquals(event.target, 'data-pc-section', 'nodetogglebutton') || isAttributeEquals(event.target, 'data-pc-section', 'nodetogglebuttonicon')) {
return; return;
} }

2
packages/primevue/src/overlayeventbus/OverlayEventBus.js
View File

@ -1,3 +1,3 @@
import { EventBus } from '@primevue/core/utils'; import { EventBus } from '@primeuix/utils/eventbus';
export default EventBus(); export default EventBus();

5
packages/primevue/src/paginator/Paginator.vue
View File

@ -87,7 +87,8 @@
</template> </template>
<script> <script>
import { DomHandler, UniqueComponentId } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { setAttribute } from '@primeuix/utils/dom';
import BasePaginator from './BasePaginator.vue'; import BasePaginator from './BasePaginator.vue';
import CurrrentPageReport from './CurrentPageReport.vue'; import CurrrentPageReport from './CurrentPageReport.vue';
import FirstPageLink from './FirstPageLink.vue'; import FirstPageLink from './FirstPageLink.vue';
@ -180,7 +181,7 @@ export default {
if (this.hasBreakpoints() && !this.isUnstyled) { if (this.hasBreakpoints() && !this.isUnstyled) {
this.styleElement = document.createElement('style'); this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css'; this.styleElement.type = 'text/css';
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce); setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.styleElement); document.head.appendChild(this.styleElement);
let innerHTML = ''; let innerHTML = '';

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

@ -53,7 +53,9 @@
</template> </template>
<script> <script>
import { DomHandler, ObjectUtils, UniqueComponentId } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { focus, getAttribute, findSingle } from '@primeuix/utils/dom';
import { equals, resolve } from '@primeuix/utils/object';
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';
@ -82,7 +84,7 @@ export default {
}, },
methods: { methods: {
getItemProp(item, name) { getItemProp(item, name) {
return item ? ObjectUtils.getItemValue(item[name]) : undefined; return item ? resolve(item[name]) : undefined;
}, },
getItemLabel(item) { getItemLabel(item) {
return this.getItemProp(item, 'label'); return this.getItemProp(item, 'label');
@ -98,7 +100,7 @@ export default {
}); });
}, },
isItemActive(item) { isItemActive(item) {
return this.expandedKeys ? this.expandedKeys[this.getItemProp(item, 'key')] : this.multiple ? this.activeItems.some((subItem) => ObjectUtils.equals(item, subItem)) : ObjectUtils.equals(item, this.activeItem); return this.expandedKeys ? this.expandedKeys[this.getItemProp(item, 'key')] : this.multiple ? this.activeItems.some((subItem) => equals(item, subItem)) : equals(item, this.activeItem);
}, },
isItemVisible(item) { isItemVisible(item) {
return this.getItemProp(item, 'visible') !== false; return this.getItemProp(item, 'visible') !== false;
@ -107,7 +109,7 @@ export default {
return this.getItemProp(item, 'disabled'); return this.getItemProp(item, 'disabled');
}, },
isItemFocused(item) { isItemFocused(item) {
return ObjectUtils.equals(item, this.activeItem); return equals(item, this.activeItem);
}, },
getPanelId(index) { getPanelId(index) {
return `${this.id}_${index}`; return `${this.id}_${index}`;
@ -133,7 +135,7 @@ export default {
} }
this.changeActiveItem(event, item); this.changeActiveItem(event, item);
DomHandler.focus(event.currentTarget); focus(event.currentTarget);
}, },
onHeaderKeyDown(event, item) { onHeaderKeyDown(event, item) {
switch (event.code) { switch (event.code) {
@ -164,16 +166,16 @@ export default {
} }
}, },
onHeaderArrowDownKey(event) { onHeaderArrowDownKey(event) {
const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-active') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="rootlist"]') : null; const rootList = getAttribute(event.currentTarget, 'data-p-active') === true ? findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="rootlist"]') : null;
rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: true }); rootList ? focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: true });
event.preventDefault(); event.preventDefault();
}, },
onHeaderArrowUpKey(event) { onHeaderArrowUpKey(event) {
const prevHeader = this.findPrevHeader(event.currentTarget.parentElement) || this.findLastHeader(); const prevHeader = this.findPrevHeader(event.currentTarget.parentElement) || this.findLastHeader();
const rootList = DomHandler.getAttribute(prevHeader, 'data-p-active') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="rootlist"]') : null; const rootList = getAttribute(prevHeader, 'data-p-active') === true ? findSingle(prevHeader.nextElementSibling, '[data-pc-section="rootlist"]') : null;
rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false }); rootList ? focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false });
event.preventDefault(); event.preventDefault();
}, },
onHeaderHomeKey(event) { onHeaderHomeKey(event) {
@ -185,22 +187,22 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
onHeaderEnterKey(event, item) { onHeaderEnterKey(event, item) {
const headerAction = DomHandler.findSingle(event.currentTarget, '[data-pc-section="headerlink"]'); const headerAction = findSingle(event.currentTarget, '[data-pc-section="headerlink"]');
headerAction ? headerAction.click() : this.onHeaderClick(event, item); headerAction ? headerAction.click() : this.onHeaderClick(event, item);
event.preventDefault(); event.preventDefault();
}, },
findNextHeader(panelElement, selfCheck = false) { findNextHeader(panelElement, selfCheck = false) {
const nextPanelElement = selfCheck ? panelElement : panelElement.nextElementSibling; const nextPanelElement = selfCheck ? panelElement : panelElement.nextElementSibling;
const headerElement = DomHandler.findSingle(nextPanelElement, '[data-pc-section="header"]'); const headerElement = findSingle(nextPanelElement, '[data-pc-section="header"]');
return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeader(headerElement.parentElement) : headerElement) : null; return headerElement ? (getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeader(headerElement.parentElement) : headerElement) : null;
}, },
findPrevHeader(panelElement, selfCheck = false) { findPrevHeader(panelElement, selfCheck = false) {
const prevPanelElement = selfCheck ? panelElement : panelElement.previousElementSibling; const prevPanelElement = selfCheck ? panelElement : panelElement.previousElementSibling;
const headerElement = DomHandler.findSingle(prevPanelElement, '[data-pc-section="header"]'); const headerElement = findSingle(prevPanelElement, '[data-pc-section="header"]');
return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeader(headerElement.parentElement) : headerElement) : null; return headerElement ? (getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeader(headerElement.parentElement) : headerElement) : null;
}, },
findFirstHeader() { findFirstHeader() {
return this.findNextHeader(this.$el.firstElementChild, true); return this.findNextHeader(this.$el.firstElementChild, true);
@ -211,7 +213,7 @@ export default {
updateFocusedHeader(event) { updateFocusedHeader(event) {
const { originalEvent, focusOnNext, selfCheck } = event; const { originalEvent, focusOnNext, selfCheck } = event;
const panelElement = originalEvent.currentTarget.closest('[data-pc-section="panel"]'); const panelElement = originalEvent.currentTarget.closest('[data-pc-section="panel"]');
const header = selfCheck ? DomHandler.findSingle(panelElement, '[data-pc-section="header"]') : focusOnNext ? this.findNextHeader(panelElement) : this.findPrevHeader(panelElement); const header = selfCheck ? findSingle(panelElement, '[data-pc-section="header"]') : focusOnNext ? this.findNextHeader(panelElement) : this.findPrevHeader(panelElement);
header ? this.changeFocusedHeader(originalEvent, header) : focusOnNext ? this.onHeaderHomeKey(originalEvent) : this.onHeaderEndKey(originalEvent); header ? this.changeFocusedHeader(originalEvent, header) : focusOnNext ? this.onHeaderHomeKey(originalEvent) : this.onHeaderEndKey(originalEvent);
}, },
@ -220,12 +222,12 @@ export default {
const active = this.isItemActive(item); const active = this.isItemActive(item);
const eventName = !active ? 'panel-open' : 'panel-close'; const eventName = !active ? 'panel-open' : 'panel-close';
this.activeItem = selfActive ? item : this.activeItem && ObjectUtils.equals(item, this.activeItem) ? null : item; this.activeItem = selfActive ? item : this.activeItem && equals(item, this.activeItem) ? null : item;
if (this.multiple) { if (this.multiple) {
// activeItem and activeItems should be separated because it should be only one focused root item // activeItem and activeItems should be separated because it should be only one focused root item
if (this.activeItems.some((subItem) => ObjectUtils.equals(item, subItem))) { if (this.activeItems.some((subItem) => equals(item, subItem))) {
this.activeItems = this.activeItems.filter((subItem) => !ObjectUtils.equals(item, subItem)); this.activeItems = this.activeItems.filter((subItem) => !equals(item, subItem));
} else { } else {
this.activeItems.push(item); this.activeItems.push(item);
} }
@ -246,7 +248,7 @@ export default {
} }
}, },
changeFocusedHeader(event, element) { changeFocusedHeader(event, element) {
element && DomHandler.focus(element); element && focus(element);
}, },
getMenuItemProps(item, index) { getMenuItemProps(item, index) {
return { return {

47
packages/primevue/src/panelmenu/PanelMenuList.vue
View File

@ -23,7 +23,8 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { DomHandler, ObjectUtils } from '@primevue/core/utils'; import { findSingle, focus } from '@primeuix/utils/dom';
import { resolve, isNotEmpty, isPrintableCharacter, findLast, isEmpty } from '@primeuix/utils/object';
import PanelMenuSub from './PanelMenuSub.vue'; import PanelMenuSub from './PanelMenuSub.vue';
export default { export default {
@ -68,7 +69,7 @@ export default {
}, },
methods: { methods: {
getItemProp(processedItem, name) { getItemProp(processedItem, name) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined; return processedItem && processedItem.item ? resolve(processedItem.item[name]) : undefined;
}, },
getItemLabel(processedItem) { getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label'); return this.getItemProp(processedItem, 'label');
@ -83,7 +84,7 @@ export default {
return this.activeItemPath.some((path) => path.key === processedItem.parentKey); return this.activeItemPath.some((path) => path.key === processedItem.parentKey);
}, },
isItemGroup(processedItem) { isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items); return isNotEmpty(processedItem.items);
}, },
onFocus(event) { onFocus(event) {
this.focused = true; this.focused = true;
@ -142,7 +143,7 @@ export default {
break; break;
default: default:
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { if (!metaKey && isPrintableCharacter(event.key)) {
this.searchItems(event, event.key); this.searchItems(event, event.key);
} }
@ -150,32 +151,32 @@ export default {
} }
}, },
onArrowDownKey(event) { onArrowDownKey(event) {
const processedItem = ObjectUtils.isNotEmpty(this.focusedItem) ? this.findNextItem(this.focusedItem) : this.findFirstItem(); const processedItem = isNotEmpty(this.focusedItem) ? this.findNextItem(this.focusedItem) : this.findFirstItem();
this.changeFocusedItem({ originalEvent: event, processedItem, focusOnNext: true }); this.changeFocusedItem({ originalEvent: event, processedItem, focusOnNext: true });
event.preventDefault(); event.preventDefault();
}, },
onArrowUpKey(event) { onArrowUpKey(event) {
const processedItem = ObjectUtils.isNotEmpty(this.focusedItem) ? this.findPrevItem(this.focusedItem) : this.findLastItem(); const processedItem = isNotEmpty(this.focusedItem) ? this.findPrevItem(this.focusedItem) : this.findLastItem();
this.changeFocusedItem({ originalEvent: event, processedItem, selfCheck: true }); this.changeFocusedItem({ originalEvent: event, processedItem, selfCheck: true });
event.preventDefault(); event.preventDefault();
}, },
onArrowLeftKey(event) { onArrowLeftKey(event) {
if (ObjectUtils.isNotEmpty(this.focusedItem)) { if (isNotEmpty(this.focusedItem)) {
const matched = this.activeItemPath.some((p) => p.key === this.focusedItem.key); const matched = this.activeItemPath.some((p) => p.key === this.focusedItem.key);
if (matched) { if (matched) {
this.activeItemPath = this.activeItemPath.filter((p) => p.key !== this.focusedItem.key); this.activeItemPath = this.activeItemPath.filter((p) => p.key !== this.focusedItem.key);
} else { } else {
this.focusedItem = ObjectUtils.isNotEmpty(this.focusedItem.parent) ? this.focusedItem.parent : this.focusedItem; this.focusedItem = isNotEmpty(this.focusedItem.parent) ? this.focusedItem.parent : this.focusedItem;
} }
event.preventDefault(); event.preventDefault();
} }
}, },
onArrowRightKey(event) { onArrowRightKey(event) {
if (ObjectUtils.isNotEmpty(this.focusedItem)) { if (isNotEmpty(this.focusedItem)) {
const grouped = this.isItemGroup(this.focusedItem); const grouped = this.isItemGroup(this.focusedItem);
if (grouped) { if (grouped) {
@ -201,9 +202,9 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
onEnterKey(event) { onEnterKey(event) {
if (ObjectUtils.isNotEmpty(this.focusedItem)) { if (isNotEmpty(this.focusedItem)) {
const element = DomHandler.findSingle(this.$el, `li[id="${`${this.focusedItemId}`}"]`); const element = findSingle(this.$el, `li[id="${`${this.focusedItemId}`}"]`);
const anchorElement = element && (DomHandler.findSingle(element, '[data-pc-section="itemlink"]') || DomHandler.findSingle(element, 'a,button')); const anchorElement = element && (findSingle(element, '[data-pc-section="itemlink"]') || findSingle(element, 'a,button'));
anchorElement ? anchorElement.click() : element && element.click(); anchorElement ? anchorElement.click() : element && element.click();
} }
@ -224,7 +225,7 @@ export default {
} }
this.focusedItem = processedItem; this.focusedItem = processedItem;
DomHandler.focus(this.$el); focus(this.$el);
}, },
onItemMouseMove(event) { onItemMouseMove(event) {
if (this.focused) { if (this.focused) {
@ -249,7 +250,7 @@ export default {
return this.visibleItems.find((processedItem) => this.isValidItem(processedItem)); return this.visibleItems.find((processedItem) => this.isValidItem(processedItem));
}, },
findLastItem() { findLastItem() {
return ObjectUtils.findLast(this.visibleItems, (processedItem) => this.isValidItem(processedItem)); return findLast(this.visibleItems, (processedItem) => this.isValidItem(processedItem));
}, },
findNextItem(processedItem) { findNextItem(processedItem) {
const index = this.visibleItems.findIndex((item) => item.key === processedItem.key); const index = this.visibleItems.findIndex((item) => item.key === processedItem.key);
@ -259,7 +260,7 @@ export default {
}, },
findPrevItem(processedItem) { findPrevItem(processedItem) {
const index = this.visibleItems.findIndex((item) => item.key === processedItem.key); const index = this.visibleItems.findIndex((item) => item.key === processedItem.key);
const matchedItem = index > 0 ? ObjectUtils.findLast(this.visibleItems.slice(0, index), (pItem) => this.isValidItem(pItem)) : undefined; const matchedItem = index > 0 ? findLast(this.visibleItems.slice(0, index), (pItem) => this.isValidItem(pItem)) : undefined;
return matchedItem || processedItem; return matchedItem || processedItem;
}, },
@ -269,24 +270,24 @@ export default {
let matchedItem = null; let matchedItem = null;
let matched = false; let matched = false;
if (ObjectUtils.isNotEmpty(this.focusedItem)) { if (isNotEmpty(this.focusedItem)) {
const focusedItemIndex = this.visibleItems.findIndex((processedItem) => processedItem.key === this.focusedItem.key); const focusedItemIndex = this.visibleItems.findIndex((processedItem) => processedItem.key === this.focusedItem.key);
matchedItem = this.visibleItems.slice(focusedItemIndex).find((processedItem) => this.isItemMatched(processedItem)); matchedItem = this.visibleItems.slice(focusedItemIndex).find((processedItem) => this.isItemMatched(processedItem));
matchedItem = ObjectUtils.isEmpty(matchedItem) ? this.visibleItems.slice(0, focusedItemIndex).find((processedItem) => this.isItemMatched(processedItem)) : matchedItem; matchedItem = isEmpty(matchedItem) ? this.visibleItems.slice(0, focusedItemIndex).find((processedItem) => this.isItemMatched(processedItem)) : matchedItem;
} else { } else {
matchedItem = this.visibleItems.find((processedItem) => this.isItemMatched(processedItem)); matchedItem = this.visibleItems.find((processedItem) => this.isItemMatched(processedItem));
} }
if (ObjectUtils.isNotEmpty(matchedItem)) { if (isNotEmpty(matchedItem)) {
matched = true; matched = true;
} }
if (ObjectUtils.isEmpty(matchedItem) && ObjectUtils.isEmpty(this.focusedItem)) { if (isEmpty(matchedItem) && isEmpty(this.focusedItem)) {
matchedItem = this.findFirstItem(); matchedItem = this.findFirstItem();
} }
if (ObjectUtils.isNotEmpty(matchedItem)) { if (isNotEmpty(matchedItem)) {
this.changeFocusedItem({ this.changeFocusedItem({
originalEvent: event, originalEvent: event,
processedItem: matchedItem, processedItem: matchedItem,
@ -308,7 +309,7 @@ export default {
changeFocusedItem(event) { changeFocusedItem(event) {
const { originalEvent, processedItem, focusOnNext, selfCheck, allowHeaderFocus = true } = event; const { originalEvent, processedItem, focusOnNext, selfCheck, allowHeaderFocus = true } = event;
if (ObjectUtils.isNotEmpty(this.focusedItem) && this.focusedItem.key !== processedItem.key) { if (isNotEmpty(this.focusedItem) && this.focusedItem.key !== processedItem.key) {
this.focusedItem = processedItem; this.focusedItem = processedItem;
this.scrollInView(); this.scrollInView();
} else if (allowHeaderFocus) { } else if (allowHeaderFocus) {
@ -316,7 +317,7 @@ export default {
} }
}, },
scrollInView() { scrollInView() {
const element = DomHandler.findSingle(this.$el, `li[id="${`${this.focusedItemId}`}"]`); const element = findSingle(this.$el, `li[id="${`${this.focusedItemId}`}"]`);
if (element) { if (element) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' }); element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
@ -389,7 +390,7 @@ export default {
return this.flatItems(this.processedItems); return this.flatItems(this.processedItems);
}, },
focusedItemId() { focusedItemId() {
return ObjectUtils.isNotEmpty(this.focusedItem) ? `${this.panelId}_${this.focusedItem.key}` : null; return isNotEmpty(this.focusedItem) ? `${this.panelId}_${this.focusedItem.key}` : null;
} }
}, },
components: { components: {

6
packages/primevue/src/panelmenu/PanelMenuSub.vue
View File

@ -73,7 +73,7 @@
<script> <script>
import BaseComponent from '@primevue/core/basecomponent'; import BaseComponent from '@primevue/core/basecomponent';
import { ObjectUtils } from '@primevue/core/utils'; import { resolve, isNotEmpty } from '@primeuix/utils/object';
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 Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
@ -122,7 +122,7 @@ export default {
return this.getItemId(processedItem); return this.getItemId(processedItem);
}, },
getItemProp(processedItem, name, params) { getItemProp(processedItem, name, params) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined; return processedItem && processedItem.item ? resolve(processedItem.item[name], params) : undefined;
}, },
getItemLabel(processedItem) { getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label'); return this.getItemProp(processedItem, 'label');
@ -151,7 +151,7 @@ export default {
return this.focusedItemId === this.getItemId(processedItem); return this.focusedItemId === this.getItemId(processedItem);
}, },
isItemGroup(processedItem) { isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items); return isNotEmpty(processedItem.items);
}, },
onItemClick(event, processedItem) { onItemClick(event, processedItem) {
this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item }); this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });

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

@ -64,7 +64,9 @@
</template> </template>
<script> <script>
import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils'; import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
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';
@ -112,15 +114,15 @@ export default {
} }
if (this.overlay) { if (this.overlay) {
ZIndexUtils.clear(this.overlay); ZIndex.clear(this.overlay);
this.overlay = null; this.overlay = null;
} }
}, },
methods: { methods: {
onOverlayEnter(el) { onOverlayEnter(el) {
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay); ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' }); addStyle(el, { position: 'absolute', top: '0', left: '0' });
this.alignOverlay(); this.alignOverlay();
this.bindScrollListener(); this.bindScrollListener();
this.bindResizeListener(); this.bindResizeListener();
@ -131,14 +133,14 @@ export default {
this.overlay = null; this.overlay = null;
}, },
onOverlayAfterLeave(el) { onOverlayAfterLeave(el) {
ZIndexUtils.clear(el); ZIndex.clear(el);
}, },
alignOverlay() { alignOverlay() {
if (this.appendTo === 'self') { if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, this.$refs.input.$el); relativePosition(this.overlay, this.$refs.input.$el);
} else { } else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.input.$el) + 'px'; this.overlay.style.minWidth = getOuterWidth(this.$refs.input.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$refs.input.$el); absolutePosition(this.overlay, this.$refs.input.$el);
} }
}, },
testStrength(str) { testStrength(str) {
@ -268,7 +270,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = () => { this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) { if (this.overlayVisible && !isTouchDevice()) {
this.overlayVisible = false; this.overlayVisible = false;
} }
}; };

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

@ -166,7 +166,9 @@
</template> </template>
<script> <script>
import { DomHandler, ObjectUtils, UniqueComponentId } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { find, scrollInView, setAttribute } from '@primeuix/utils/dom';
import { findIndexInList, isEmpty } from '@primeuix/utils/object';
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';
@ -266,7 +268,7 @@ export default {
for (let i = 0; i < selectionList.length; i++) { for (let i = 0; i < selectionList.length; i++) {
let selectedItem = selectionList[i]; let selectedItem = selectionList[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList); let selectedItemIndex = findIndexInList(selectedItem, valueList);
if (selectedItemIndex !== 0) { if (selectedItemIndex !== 0) {
let movedItem = valueList[selectedItemIndex]; let movedItem = valueList[selectedItemIndex];
@ -294,7 +296,7 @@ export default {
for (let i = 0; i < selectionList.length; i++) { for (let i = 0; i < selectionList.length; i++) {
let selectedItem = selectionList[i]; let selectedItem = selectionList[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList); let selectedItemIndex = findIndexInList(selectedItem, valueList);
if (selectedItemIndex !== 0) { if (selectedItemIndex !== 0) {
let movedItem = valueList.splice(selectedItemIndex, 1)[0]; let movedItem = valueList.splice(selectedItemIndex, 1)[0];
@ -320,7 +322,7 @@ export default {
for (let i = selectionList.length - 1; i >= 0; i--) { for (let i = selectionList.length - 1; i >= 0; i--) {
let selectedItem = selectionList[i]; let selectedItem = selectionList[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList); let selectedItemIndex = findIndexInList(selectedItem, valueList);
if (selectedItemIndex !== valueList.length - 1) { if (selectedItemIndex !== valueList.length - 1) {
let movedItem = valueList[selectedItemIndex]; let movedItem = valueList[selectedItemIndex];
@ -348,7 +350,7 @@ export default {
for (let i = selectionList.length - 1; i >= 0; i--) { for (let i = selectionList.length - 1; i >= 0; i--) {
let selectedItem = selectionList[i]; let selectedItem = selectionList[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList); let selectedItemIndex = findIndexInList(selectedItem, valueList);
if (selectedItemIndex !== valueList.length - 1) { if (selectedItemIndex !== valueList.length - 1) {
let movedItem = valueList.splice(selectedItemIndex, 1)[0]; let movedItem = valueList.splice(selectedItemIndex, 1)[0];
@ -376,8 +378,8 @@ export default {
for (let i = 0; i < selection.length; i++) { for (let i = 0; i < selection.length; i++) {
let selectedItem = selection[i]; let selectedItem = selection[i];
if (ObjectUtils.findIndexInList(selectedItem, targetList) == -1) { if (findIndexInList(selectedItem, targetList) == -1) {
targetList.push(sourceList.splice(ObjectUtils.findIndexInList(selectedItem, sourceList), 1)[0]); targetList.push(sourceList.splice(findIndexInList(selectedItem, sourceList), 1)[0]);
} }
} }
@ -428,8 +430,8 @@ export default {
for (let i = 0; i < selection.length; i++) { for (let i = 0; i < selection.length; i++) {
let selectedItem = selection[i]; let selectedItem = selection[i];
if (ObjectUtils.findIndexInList(selectedItem, sourceList) == -1) { if (findIndexInList(selectedItem, sourceList) == -1) {
sourceList.push(targetList.splice(ObjectUtils.findIndexInList(selectedItem, targetList), 1)[0]); sourceList.push(targetList.splice(findIndexInList(selectedItem, targetList), 1)[0]);
} }
} }
@ -476,10 +478,10 @@ export default {
this.itemTouched = false; this.itemTouched = false;
const selectionList = this.d_selection[listIndex]; const selectionList = this.d_selection[listIndex];
const selectedIndex = ObjectUtils.findIndexInList(item, selectionList); const selectedIndex = findIndexInList(item, selectionList);
const selected = selectedIndex != -1; const selected = selectedIndex != -1;
const metaSelection = this.itemTouched ? false : this.metaKeySelection; const metaSelection = this.itemTouched ? false : this.metaKeySelection;
const selectedId = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]')[index].getAttribute('id'); const selectedId = find(this.$refs[listType].$el, '[data-pc-section="item"]')[index].getAttribute('id');
this.focusedOptionIndex = selectedId; this.focusedOptionIndex = selectedId;
let _selection; let _selection;
@ -510,12 +512,12 @@ export default {
this.updateSelection(event); this.updateSelection(event);
}, },
updateListScroll(listElement) { updateListScroll(listElement) {
const listItems = DomHandler.find(listElement, '[data-pc-section="item"][data-p-selected="true"]'); const listItems = find(listElement, '[data-pc-section="item"][data-p-selected="true"]');
if (listItems && listItems.length) { if (listItems && listItems.length) {
switch (this.reorderDirection) { switch (this.reorderDirection) {
case 'up': case 'up':
DomHandler.scrollInView(listElement, listItems[0]); scrollInView(listElement, listItems[0]);
break; break;
case 'top': case 'top':
@ -523,7 +525,7 @@ export default {
break; break;
case 'down': case 'down':
DomHandler.scrollInView(listElement, listItems[listItems.length - 1]); scrollInView(listElement, listItems[listItems.length - 1]);
break; break;
case 'bottom': case 'bottom':
@ -563,7 +565,7 @@ export default {
this.$el.setAttribute(this.attributeSelector, ''); this.$el.setAttribute(this.attributeSelector, '');
this.styleElement = document.createElement('style'); this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css'; this.styleElement.type = 'text/css';
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce); setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.styleElement); document.head.appendChild(this.styleElement);
let innerHTML = ` let innerHTML = `
@ -591,7 +593,7 @@ export default {
return this.disabled ? true : this.d_selection && (!this.d_selection[index] || !this.d_selection[index].length) ? true : false; return this.disabled ? true : this.d_selection && (!this.d_selection[index] || !this.d_selection[index].length) ? true : false;
}, },
moveAllDisabled(list) { moveAllDisabled(list) {
return this.disabled ? true : ObjectUtils.isEmpty(this[list]); return this.disabled ? true : isEmpty(this[list]);
} }
}, },
computed: { computed: {

28
packages/primevue/src/popover/Popover.vue
View File

@ -14,7 +14,9 @@
</template> </template>
<script> <script>
import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils'; import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { addStyle, absolutePosition, getOffset, addClass, focus, isClient, isTouchDevice, setAttribute } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import { $dt } from '@primeuix/styled'; import { $dt } from '@primeuix/styled';
import FocusTrap from 'primevue/focustrap'; import FocusTrap from 'primevue/focustrap';
import OverlayEventBus from 'primevue/overlayeventbus'; import OverlayEventBus from 'primevue/overlayeventbus';
@ -69,7 +71,7 @@ export default {
this.target = null; this.target = null;
if (this.container && this.autoZIndex) { if (this.container && this.autoZIndex) {
ZIndexUtils.clear(this.container); ZIndex.clear(this.container);
} }
if (this.overlayEventListener) { if (this.overlayEventListener) {
@ -102,7 +104,7 @@ export default {
}, },
onEnter(el) { onEnter(el) {
this.container.setAttribute(this.attributeSelector, ''); this.container.setAttribute(this.attributeSelector, '');
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' }); addStyle(el, { position: 'absolute', top: '0', left: '0' });
this.alignOverlay(); this.alignOverlay();
if (this.dismissable) { if (this.dismissable) {
@ -113,7 +115,7 @@ export default {
this.bindResizeListener(); this.bindResizeListener();
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.set('overlay', el, this.baseZIndex + this.$primevue.config.zIndex.overlay); ZIndex.set('overlay', el, this.baseZIndex + this.$primevue.config.zIndex.overlay);
} }
this.overlayEventListener = (e) => { this.overlayEventListener = (e) => {
@ -141,14 +143,14 @@ export default {
}, },
onAfterLeave(el) { onAfterLeave(el) {
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.clear(el); ZIndex.clear(el);
} }
}, },
alignOverlay() { alignOverlay() {
DomHandler.absolutePosition(this.container, this.target, false); absolutePosition(this.container, this.target, false);
const containerOffset = DomHandler.getOffset(this.container); const containerOffset = getOffset(this.container);
const targetOffset = DomHandler.getOffset(this.target); const targetOffset = getOffset(this.target);
let arrowLeft = 0; let arrowLeft = 0;
if (containerOffset.left < targetOffset.left) { if (containerOffset.left < targetOffset.left) {
@ -159,13 +161,13 @@ export default {
if (containerOffset.top < targetOffset.top) { if (containerOffset.top < targetOffset.top) {
this.container.setAttribute('data-p-popover-flipped', 'true'); this.container.setAttribute('data-p-popover-flipped', 'true');
!this.isUnstyled && DomHandler.addClass(this.container, 'p-popover-flipped'); !this.isUnstyled && addClass(this.container, 'p-popover-flipped');
} }
}, },
onContentKeydown(event) { onContentKeydown(event) {
if (event.code === 'Escape' && this.closeOnEscape) { if (event.code === 'Escape' && this.closeOnEscape) {
this.hide(); this.hide();
DomHandler.focus(this.target); focus(this.target);
} }
}, },
onButtonKeydown(event) { onButtonKeydown(event) {
@ -205,7 +207,7 @@ export default {
} }
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
if (!this.outsideClickListener && DomHandler.isClient()) { if (!this.outsideClickListener && isClient()) {
this.outsideClickListener = (event) => { this.outsideClickListener = (event) => {
if (this.visible && !this.selfClick && !this.isTargetClicked(event)) { if (this.visible && !this.selfClick && !this.isTargetClicked(event)) {
this.visible = false; this.visible = false;
@ -243,7 +245,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = () => { this.resizeListener = () => {
if (this.visible && !DomHandler.isTouchDevice()) { if (this.visible && !isTouchDevice()) {
this.visible = false; this.visible = false;
} }
}; };
@ -267,7 +269,7 @@ export default {
if (!this.styleElement && !this.isUnstyled) { if (!this.styleElement && !this.isUnstyled) {
this.styleElement = document.createElement('style'); this.styleElement = document.createElement('style');
this.styleElement.type = 'text/css'; this.styleElement.type = 'text/css';
DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce); setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
document.head.appendChild(this.styleElement); document.head.appendChild(this.styleElement);
let innerHTML = ''; let innerHTML = '';

4
packages/primevue/src/portal/Portal.vue
View File

@ -10,7 +10,7 @@
</template> </template>
<script> <script>
import { DomHandler } from '@primevue/core/utils'; import { isClient } from '@primeuix/utils/dom';
export default { export default {
name: 'Portal', name: 'Portal',
@ -30,7 +30,7 @@ export default {
}; };
}, },
mounted() { mounted() {
this.mounted = DomHandler.isClient(); this.mounted = isClient();
}, },
computed: { computed: {
inline() { inline() {

4
packages/primevue/src/radiobutton/RadioButton.vue
View File

@ -26,7 +26,7 @@
</template> </template>
<script> <script>
import { ObjectUtils } from '@primevue/core/utils'; import { equals } from '@primeuix/utils/object';
import BaseRadioButton from './BaseRadioButton.vue'; import BaseRadioButton from './BaseRadioButton.vue';
export default { export default {
@ -62,7 +62,7 @@ export default {
}, },
computed: { computed: {
checked() { checked() {
return this.modelValue != null && (this.binary ? !!this.modelValue : ObjectUtils.equals(this.modelValue, this.value)); return this.modelValue != null && (this.binary ? !!this.modelValue : equals(this.modelValue, this.value));
} }
} }
}; };

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

@ -29,7 +29,8 @@
</template> </template>
<script> <script>
import { DomHandler, UniqueComponentId } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { getFirstFocusableElement, focus } from '@primeuix/utils/dom';
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';
@ -68,9 +69,9 @@ export default {
if (!this.readonly && !this.disabled) { if (!this.readonly && !this.disabled) {
this.onOptionSelect(event, value); this.onOptionSelect(event, value);
this.isFocusVisibleItem = false; this.isFocusVisibleItem = false;
const firstFocusableEl = DomHandler.getFirstFocusableElement(event.currentTarget); const firstFocusableEl = getFirstFocusableElement(event.currentTarget);
firstFocusableEl && DomHandler.focus(firstFocusableEl); firstFocusableEl && focus(firstFocusableEl);
} }
}, },
onFocus(event, value) { onFocus(event, value) {

24
packages/primevue/src/ripple/Ripple.js
View File

@ -1,4 +1,4 @@
import { DomHandler } from '@primevue/core/utils'; import { addClass, createElement, getAttribute, getHeight, getOffset, getOuterHeight, getOuterWidth, getWidth, removeClass } from '@primeuix/utils/dom';
import BaseRipple from './BaseRipple'; import BaseRipple from './BaseRipple';
const Ripple = BaseRipple.extend('ripple', { const Ripple = BaseRipple.extend('ripple', {
@ -29,7 +29,7 @@ const Ripple = BaseRipple.extend('ripple', {
el.removeEventListener('mousedown', this.onMouseDown.bind(this)); el.removeEventListener('mousedown', this.onMouseDown.bind(this));
}, },
createRipple(el) { createRipple(el) {
const ink = DomHandler.createElement('span', { const ink = createElement('span', {
role: 'presentation', role: 'presentation',
'aria-hidden': true, 'aria-hidden': true,
'data-p-ink': true, 'data-p-ink': true,
@ -64,29 +64,29 @@ const Ripple = BaseRipple.extend('ripple', {
return; return;
} }
!this.isUnstyled() && DomHandler.removeClass(ink, 'p-ink-active'); !this.isUnstyled() && removeClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'false'); ink.setAttribute('data-p-ink-active', 'false');
if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) { if (!getHeight(ink) && !getWidth(ink)) {
let d = Math.max(DomHandler.getOuterWidth(target), DomHandler.getOuterHeight(target)); let d = Math.max(getOuterWidth(target), getOuterHeight(target));
ink.style.height = d + 'px'; ink.style.height = d + 'px';
ink.style.width = d + 'px'; ink.style.width = d + 'px';
} }
let offset = DomHandler.getOffset(target); let offset = getOffset(target);
let x = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(ink) / 2; let x = event.pageX - offset.left + document.body.scrollTop - getWidth(ink) / 2;
let y = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(ink) / 2; let y = event.pageY - offset.top + document.body.scrollLeft - getHeight(ink) / 2;
ink.style.top = y + 'px'; ink.style.top = y + 'px';
ink.style.left = x + 'px'; ink.style.left = x + 'px';
!this.isUnstyled() && DomHandler.addClass(ink, 'p-ink-active'); !this.isUnstyled() && addClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'true'); ink.setAttribute('data-p-ink-active', 'true');
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
if (ink) { if (ink) {
!this.isUnstyled() && DomHandler.removeClass(ink, 'p-ink-active'); !this.isUnstyled() && removeClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'false'); ink.setAttribute('data-p-ink-active', 'false');
} }
}, 401); }, 401);
@ -96,11 +96,11 @@ const Ripple = BaseRipple.extend('ripple', {
clearTimeout(this.timeout); clearTimeout(this.timeout);
} }
!this.isUnstyled() && DomHandler.removeClass(event.currentTarget, 'p-ink-active'); !this.isUnstyled() && removeClass(event.currentTarget, 'p-ink-active');
event.currentTarget.setAttribute('data-p-ink-active', 'false'); event.currentTarget.setAttribute('data-p-ink-active', 'false');
}, },
getInk(el) { getInk(el) {
return el && el.children ? [...el.children].find((child) => DomHandler.getAttribute(child, 'data-pc-name') === 'ripple') : undefined; return el && el.children ? [...el.children].find((child) => getAttribute(child, 'data-pc-name') === 'ripple') : undefined;
} }
} }
}); });

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

@ -40,7 +40,8 @@
</template> </template>
<script> <script>
import { DomHandler, UniqueComponentId } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { getHeight, addClass, removeClass } from '@primeuix/utils/dom';
import BaseScrollPanel from './BaseScrollPanel.vue'; import BaseScrollPanel from './BaseScrollPanel.vue';
export default { export default {
@ -101,7 +102,7 @@ export default {
calculateContainerHeight() { calculateContainerHeight() {
let containerStyles = getComputedStyle(this.$el), let containerStyles = getComputedStyle(this.$el),
xBarStyles = getComputedStyle(this.$refs.xBar), xBarStyles = getComputedStyle(this.$refs.xBar),
pureContainerHeight = DomHandler.getHeight(this.$el) - parseInt(xBarStyles['height'], 10); pureContainerHeight = getHeight(this.$el) - parseInt(xBarStyles['height'], 10);
if (containerStyles['max-height'] !== 'none' && pureContainerHeight === 0) { if (containerStyles['max-height'] !== 'none' && pureContainerHeight === 0) {
if (this.$refs.content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) { if (this.$refs.content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
@ -132,10 +133,10 @@ export default {
if (this.$refs.xBar) { if (this.$refs.xBar) {
if (this.scrollXRatio >= 1) { if (this.scrollXRatio >= 1) {
this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true'); this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden'); !this.isUnstyled && addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
} else { } else {
this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false'); this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden'); !this.isUnstyled && removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;'; this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
} }
} }
@ -143,10 +144,10 @@ export default {
if (this.$refs.yBar) { if (this.$refs.yBar) {
if (this.scrollYRatio >= 1) { if (this.scrollYRatio >= 1) {
this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true'); this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden'); !this.isUnstyled && addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
} else { } else {
this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false'); this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden'); !this.isUnstyled && removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
this.$refs.yBar.style.cssText = this.$refs.yBar.style.cssText =
'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;'; 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
} }
@ -159,9 +160,9 @@ export default {
this.$refs.yBar.focus(); this.$refs.yBar.focus();
this.lastPageY = e.pageY; this.lastPageY = e.pageY;
this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'true'); this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'true');
!this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-grabbed'); !this.isUnstyled && addClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
document.body.setAttribute('data-p-scrollpanel-grabbed', 'true'); document.body.setAttribute('data-p-scrollpanel-grabbed', 'true');
!this.isUnstyled && DomHandler.addClass(document.body, 'p-scrollpanel-grabbed'); !this.isUnstyled && addClass(document.body, 'p-scrollpanel-grabbed');
this.bindDocumentMouseListeners(); this.bindDocumentMouseListeners();
e.preventDefault(); e.preventDefault();
@ -171,9 +172,9 @@ export default {
this.$refs.xBar.focus(); this.$refs.xBar.focus();
this.lastPageX = e.pageX; this.lastPageX = e.pageX;
this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'false'); this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-grabbed'); !this.isUnstyled && addClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
document.body.setAttribute('data-p-scrollpanel-grabbed', 'false'); document.body.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && DomHandler.addClass(document.body, 'p-scrollpanel-grabbed'); !this.isUnstyled && addClass(document.body, 'p-scrollpanel-grabbed');
this.bindDocumentMouseListeners(); this.bindDocumentMouseListeners();
e.preventDefault(); e.preventDefault();
@ -302,11 +303,11 @@ export default {
}, },
onDocumentMouseUp() { onDocumentMouseUp() {
this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'false'); this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-grabbed'); !this.isUnstyled && removeClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
this.$refs.xBar.setAttribute('data-p-scrollpanel-grabbed', 'false'); this.$refs.xBar.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-grabbed'); !this.isUnstyled && removeClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
document.body.setAttribute('data-p-scrollpanel-grabbed', 'false'); document.body.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed'); !this.isUnstyled && removeClass(document.body, 'p-scrollpanel-grabbed');
this.unbindDocumentMouseListeners(); this.unbindDocumentMouseListeners();
this.isXBarClicked = false; this.isXBarClicked = false;

11
packages/primevue/src/scrolltop/ScrollTop.vue
View File

@ -11,7 +11,8 @@
</template> </template>
<script> <script>
import { DomHandler, ZIndexUtils } from '@primevue/core/utils'; import { getWindowScrollTop } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex';
import ChevronUpIcon from '@primevue/icons/chevronup'; import ChevronUpIcon from '@primevue/icons/chevronup';
import Button from 'primevue/button'; import Button from 'primevue/button';
import { mergeProps } from 'vue'; import { mergeProps } from 'vue';
@ -37,7 +38,7 @@ export default {
else if (this.target === 'parent') this.unbindParentScrollListener(); else if (this.target === 'parent') this.unbindParentScrollListener();
if (this.container) { if (this.container) {
ZIndexUtils.clear(this.container); ZIndex.clear(this.container);
this.overlay = null; this.overlay = null;
} }
}, },
@ -63,7 +64,7 @@ export default {
}, },
bindDocumentScrollListener() { bindDocumentScrollListener() {
this.scrollListener = () => { this.scrollListener = () => {
this.checkVisibility(DomHandler.getWindowScrollTop()); this.checkVisibility(getWindowScrollTop());
}; };
window.addEventListener('scroll', this.scrollListener); window.addEventListener('scroll', this.scrollListener);
@ -81,10 +82,10 @@ export default {
} }
}, },
onEnter(el) { onEnter(el) {
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay); ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);
}, },
onAfterLeave(el) { onAfterLeave(el) {
ZIndexUtils.clear(el); ZIndex.clear(el);
}, },
containerRef(el) { containerRef(el) {
this.container = el ? el.$el : undefined; this.container = el ? el.$el : undefined;

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

@ -191,7 +191,10 @@
<script> <script>
import { FilterService } from '@primevue/core/api'; import { FilterService } from '@primevue/core/api';
import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '@primevue/core/utils'; import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
import { focus, isAndroid, getFirstFocusableElement, getLastFocusableElement, addStyle, relativePosition, getOuterWidth, absolutePosition, isTouchDevice, isVisible, getFocusableElements, findSingle } from '@primeuix/utils/dom';
import { resolveFieldData, isPrintableCharacter, isNotEmpty, equals, findLastIndex } from '@primeuix/utils/object';
import { ZIndex } from '@primeuix/utils/zindex';
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';
@ -266,7 +269,7 @@ export default {
} }
if (this.overlay) { if (this.overlay) {
ZIndexUtils.clear(this.overlay); ZIndex.clear(this.overlay);
this.overlay = null; this.overlay = null;
} }
}, },
@ -275,13 +278,13 @@ export default {
return this.virtualScrollerDisabled ? index : fn && fn(index)['index']; return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
}, },
getOptionLabel(option) { getOptionLabel(option) {
return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option; return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;
}, },
getOptionValue(option) { getOptionValue(option) {
return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option; return this.optionValue ? resolveFieldData(option, this.optionValue) : option;
}, },
getOptionRenderKey(option, index) { getOptionRenderKey(option, index) {
return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index; return (this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
}, },
getPTItemOptions(option, itemOptions, index, key) { getPTItemOptions(option, itemOptions, index, key) {
return this.ptm(key, { return this.ptm(key, {
@ -295,16 +298,16 @@ export default {
}); });
}, },
isOptionDisabled(option) { isOptionDisabled(option) {
return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false; return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
}, },
isOptionGroup(option) { isOptionGroup(option) {
return this.optionGroupLabel && option.optionGroup && option.group; return this.optionGroupLabel && option.optionGroup && option.group;
}, },
getOptionGroupLabel(optionGroup) { getOptionGroupLabel(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel); return resolveFieldData(optionGroup, this.optionGroupLabel);
}, },
getOptionGroupChildren(optionGroup) { getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren); return resolveFieldData(optionGroup, this.optionGroupChildren);
}, },
getAriaPosInset(index) { getAriaPosInset(index) {
return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1; return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;
@ -314,7 +317,7 @@ export default {
this.overlayVisible = true; this.overlayVisible = true;
this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.editable ? -1 : this.findSelectedOptionIndex(); this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.editable ? -1 : this.findSelectedOptionIndex();
isFocus && DomHandler.focus(this.$refs.focusInput); isFocus && focus(this.$refs.focusInput);
}, },
hide(isFocus) { hide(isFocus) {
const _hide = () => { const _hide = () => {
@ -325,7 +328,7 @@ export default {
this.searchValue = ''; this.searchValue = '';
this.resetFilterOnHide && (this.filterValue = null); this.resetFilterOnHide && (this.filterValue = null);
isFocus && DomHandler.focus(this.$refs.focusInput); isFocus && focus(this.$refs.focusInput);
}; };
setTimeout(() => { setTimeout(() => {
@ -354,7 +357,7 @@ export default {
this.$emit('blur', event); this.$emit('blur', event);
}, },
onKeyDown(event) { onKeyDown(event) {
if (this.disabled || DomHandler.isAndroid()) { if (this.disabled || isAndroid()) {
event.preventDefault(); event.preventDefault();
return; return;
@ -419,7 +422,7 @@ export default {
break; break;
default: default:
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) { if (!metaKey && isPrintableCharacter(event.key)) {
!this.overlayVisible && this.show(); !this.overlayVisible && this.show();
!this.editable && this.searchOptions(event, event.key); !this.editable && this.searchOptions(event, event.key);
} }
@ -439,7 +442,7 @@ export default {
this.updateModel(event, value); this.updateModel(event, value);
!this.overlayVisible && ObjectUtils.isNotEmpty(value) && this.show(); !this.overlayVisible && isNotEmpty(value) && this.show();
}, },
onContainerClick(event) { onContainerClick(event) {
if (this.disabled || this.loading) { if (this.disabled || this.loading) {
@ -459,14 +462,14 @@ export default {
this.resetFilterOnClear && (this.filterValue = null); this.resetFilterOnClear && (this.filterValue = null);
}, },
onFirstHiddenFocus(event) { onFirstHiddenFocus(event) {
const focusableEl = event.relatedTarget === this.$refs.focusInput ? DomHandler.getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput; const focusableEl = event.relatedTarget === this.$refs.focusInput ? getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput;
DomHandler.focus(focusableEl); focus(focusableEl);
}, },
onLastHiddenFocus(event) { onLastHiddenFocus(event) {
const focusableEl = event.relatedTarget === this.$refs.focusInput ? DomHandler.getLastFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput; const focusableEl = event.relatedTarget === this.$refs.focusInput ? getLastFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput;
DomHandler.focus(focusableEl); focus(focusableEl);
}, },
onOptionSelect(event, option, isHide = true) { onOptionSelect(event, option, isHide = true) {
const value = this.getOptionValue(option); const value = this.getOptionValue(option);
@ -655,7 +658,7 @@ export default {
onTabKey(event, pressedInInputText = false) { onTabKey(event, pressedInInputText = false) {
if (!pressedInInputText) { if (!pressedInInputText) {
if (this.overlayVisible && this.hasFocusableElements()) { if (this.overlayVisible && this.hasFocusableElements()) {
DomHandler.focus(this.$refs.firstHiddenFocusableElementOnOverlay); focus(this.$refs.firstHiddenFocusableElementOnOverlay);
event.preventDefault(); event.preventDefault();
} else { } else {
@ -673,13 +676,13 @@ export default {
} }
}, },
onOverlayEnter(el) { onOverlayEnter(el) {
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay); ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' }); addStyle(el, { position: 'absolute', top: '0', left: '0' });
this.alignOverlay(); this.alignOverlay();
this.scrollInView(); this.scrollInView();
this.autoFilterFocus && DomHandler.focus(this.$refs.filterInput.$el); this.autoFilterFocus && focus(this.$refs.filterInput.$el);
}, },
onOverlayAfterEnter() { onOverlayAfterEnter() {
this.bindOutsideClickListener(); this.bindOutsideClickListener();
@ -697,14 +700,14 @@ export default {
this.overlay = null; this.overlay = null;
}, },
onOverlayAfterLeave(el) { onOverlayAfterLeave(el) {
ZIndexUtils.clear(el); ZIndex.clear(el);
}, },
alignOverlay() { alignOverlay() {
if (this.appendTo === 'self') { if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, this.$el); relativePosition(this.overlay, this.$el);
} else { } else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px'; this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el); absolutePosition(this.overlay, this.$el);
} }
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
@ -743,7 +746,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = () => { this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) { if (this.overlayVisible && !isTouchDevice()) {
this.hide(); this.hide();
} }
}; };
@ -761,9 +764,9 @@ export default {
if (!this.editable && !this.labelClickListener) { if (!this.editable && !this.labelClickListener) {
const label = document.querySelector(`label[for="${this.inputId}"]`); const label = document.querySelector(`label[for="${this.inputId}"]`);
if (label && DomHandler.isVisible(label)) { if (label && isVisible(label)) {
this.labelClickListener = () => { this.labelClickListener = () => {
DomHandler.focus(this.$refs.focusInput); focus(this.$refs.focusInput);
}; };
label.addEventListener('click', this.labelClickListener); label.addEventListener('click', this.labelClickListener);
@ -774,31 +777,31 @@ export default {
if (this.labelClickListener) { if (this.labelClickListener) {
const label = document.querySelector(`label[for="${this.inputId}"]`); const label = document.querySelector(`label[for="${this.inputId}"]`);
if (label && DomHandler.isVisible(label)) { if (label && isVisible(label)) {
label.removeEventListener('click', this.labelClickListener); label.removeEventListener('click', this.labelClickListener);
} }
} }
}, },
hasFocusableElements() { hasFocusableElements() {
return DomHandler.getFocusableElements(this.overlay, ':not([data-p-hidden-focusable="true"])').length > 0; return getFocusableElements(this.overlay, ':not([data-p-hidden-focusable="true"])').length > 0;
}, },
isOptionMatched(option) { isOptionMatched(option) {
return this.isValidOption(option) && typeof this.getOptionLabel(option) === 'string' && this.getOptionLabel(option)?.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)); return this.isValidOption(option) && typeof this.getOptionLabel(option) === 'string' && this.getOptionLabel(option)?.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));
}, },
isValidOption(option) { isValidOption(option) {
return ObjectUtils.isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option)); return isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
}, },
isValidSelectedOption(option) { isValidSelectedOption(option) {
return this.isValidOption(option) && this.isSelected(option); return this.isValidOption(option) && this.isSelected(option);
}, },
isSelected(option) { isSelected(option) {
return this.isValidOption(option) && ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.equalityKey); return this.isValidOption(option) && equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
}, },
findFirstOptionIndex() { findFirstOptionIndex() {
return this.visibleOptions.findIndex((option) => this.isValidOption(option)); return this.visibleOptions.findIndex((option) => this.isValidOption(option));
}, },
findLastOptionIndex() { findLastOptionIndex() {
return ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidOption(option)); return findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
}, },
findNextOptionIndex(index) { findNextOptionIndex(index) {
const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1; const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1;
@ -806,7 +809,7 @@ export default {
return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index; return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
}, },
findPrevOptionIndex(index) { findPrevOptionIndex(index) {
const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1; const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1;
return matchedOptionIndex > -1 ? matchedOptionIndex : index; return matchedOptionIndex > -1 ? matchedOptionIndex : index;
}, },
@ -829,7 +832,7 @@ export default {
let optionIndex = -1; let optionIndex = -1;
let matched = false; let matched = false;
if (ObjectUtils.isNotEmpty(this.searchValue)) { if (isNotEmpty(this.searchValue)) {
if (this.focusedOptionIndex !== -1) { if (this.focusedOptionIndex !== -1) {
optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)); optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option));
optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex; optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex;
@ -874,7 +877,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 = DomHandler.findSingle(this.list, `li[id="${id}"]`); const element = findSingle(this.list, `li[id="${id}"]`);
if (element) { if (element) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' }); element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
@ -942,7 +945,7 @@ export default {
return options; return options;
}, },
hasSelectedOption() { hasSelectedOption() {
return ObjectUtils.isNotEmpty(this.modelValue); return isNotEmpty(this.modelValue);
}, },
label() { label() {
const selectedOptionIndex = this.findSelectedOptionIndex(); const selectedOptionIndex = this.findSelectedOptionIndex();
@ -961,7 +964,7 @@ export default {
return this.filterFields || [this.optionLabel]; return this.filterFields || [this.optionLabel];
}, },
filterResultMessageText() { filterResultMessageText() {
return ObjectUtils.isNotEmpty(this.visibleOptions) ? this.filterMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptyFilterMessageText; return isNotEmpty(this.visibleOptions) ? this.filterMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptyFilterMessageText;
}, },
filterMessageText() { filterMessageText() {
return this.filterMessage || this.$primevue.config.locale.searchMessage || ''; return this.filterMessage || this.$primevue.config.locale.searchMessage || '';

16
packages/primevue/src/selectbutton/SelectButton.vue
View File

@ -21,7 +21,7 @@
</template> </template>
<script> <script>
import { ObjectUtils } from '@primevue/core/utils'; import { resolveFieldData, equals } from '@primeuix/utils/object';
import Ripple from 'primevue/ripple'; import Ripple from 'primevue/ripple';
import ToggleButton from 'primevue/togglebutton'; import ToggleButton from 'primevue/togglebutton';
import BaseSelectButton from './BaseSelectButton.vue'; import BaseSelectButton from './BaseSelectButton.vue';
@ -33,13 +33,13 @@ export default {
emits: ['update:modelValue', 'change'], emits: ['update:modelValue', 'change'],
methods: { methods: {
getOptionLabel(option) { getOptionLabel(option) {
return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option; return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;
}, },
getOptionValue(option) { getOptionValue(option) {
return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option; return this.optionValue ? resolveFieldData(option, this.optionValue) : option;
}, },
getOptionRenderKey(option) { getOptionRenderKey(option) {
return this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option); return this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option);
}, },
getPTOptions(option, key) { getPTOptions(option, key) {
return this.ptm(key, { return this.ptm(key, {
@ -51,7 +51,7 @@ export default {
}); });
}, },
isOptionDisabled(option) { isOptionDisabled(option) {
return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false; return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
}, },
onOptionSelect(event, option, index) { onOptionSelect(event, option, index) {
if (this.disabled || this.isOptionDisabled(option)) { if (this.disabled || this.isOptionDisabled(option)) {
@ -68,7 +68,7 @@ export default {
let newValue; let newValue;
if (this.multiple) { if (this.multiple) {
if (selected) newValue = this.modelValue.filter((val) => !ObjectUtils.equals(val, optionValue, this.equalityKey)); if (selected) newValue = this.modelValue.filter((val) => !equals(val, optionValue, this.equalityKey));
else newValue = this.modelValue ? [...this.modelValue, optionValue] : [optionValue]; else newValue = this.modelValue ? [...this.modelValue, optionValue] : [optionValue];
} else { } else {
newValue = selected ? null : optionValue; newValue = selected ? null : optionValue;
@ -85,14 +85,14 @@ export default {
if (this.multiple) { if (this.multiple) {
if (this.modelValue) { if (this.modelValue) {
for (let val of this.modelValue) { for (let val of this.modelValue) {
if (ObjectUtils.equals(val, optionValue, this.equalityKey)) { if (equals(val, optionValue, this.equalityKey)) {
selected = true; selected = true;
break; break;
} }
} }
} }
} else { } else {
selected = ObjectUtils.equals(this.modelValue, optionValue, this.equalityKey); selected = equals(this.modelValue, optionValue, this.equalityKey);
} }
return selected; return selected;

8
packages/primevue/src/slider/Slider.vue
View File

@ -62,7 +62,7 @@
</template> </template>
<script> <script>
import { DomHandler } from '@primevue/core/utils'; import { getWindowScrollLeft, getWindowScrollTop, getAttribute } from '@primeuix/utils/dom';
import BaseSlider from './BaseSlider.vue'; import BaseSlider from './BaseSlider.vue';
export default { export default {
@ -85,8 +85,8 @@ export default {
updateDomData() { updateDomData() {
let rect = this.$el.getBoundingClientRect(); let rect = this.$el.getBoundingClientRect();
this.initX = rect.left + DomHandler.getWindowScrollLeft(); this.initX = rect.left + getWindowScrollLeft();
this.initY = rect.top + DomHandler.getWindowScrollTop(); this.initY = rect.top + getWindowScrollTop();
this.barWidth = this.$el.offsetWidth; this.barWidth = this.$el.offsetWidth;
this.barHeight = this.$el.offsetHeight; this.barHeight = this.$el.offsetHeight;
}, },
@ -175,7 +175,7 @@ export default {
return; return;
} }
if (DomHandler.getAttribute(event.target, 'data-pc-section') !== 'handle') { if (getAttribute(event.target, 'data-pc-section') !== 'handle') {
this.updateDomData(); this.updateDomData();
this.setValue(event); this.setValue(event);
} }

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

@ -64,7 +64,8 @@
</template> </template>
<script> <script>
import { DomHandler, UniqueComponentId } from '@primevue/core/utils'; import { UniqueComponentId } from '@primevue/core/utils';
import { findSingle, find, focus, hasClass } from '@primeuix/utils/dom';
import PlusIcon from '@primevue/icons/plus'; import PlusIcon from '@primevue/icons/plus';
import { $dt } from '@primeuix/styled'; import { $dt } from '@primeuix/styled';
import Button from 'primevue/button'; import Button from 'primevue/button';
@ -104,8 +105,8 @@ export default {
this.id = this.id || UniqueComponentId(); this.id = this.id || UniqueComponentId();
if (this.type !== 'linear') { if (this.type !== 'linear') {
const button = DomHandler.findSingle(this.container, '[data-pc-name="pcbutton"]'); const button = findSingle(this.container, '[data-pc-name="pcbutton"]');
const firstItem = DomHandler.findSingle(this.list, '[data-pc-section="item"]'); const firstItem = findSingle(this.list, '[data-pc-section="item"]');
if (button && firstItem) { if (button && firstItem) {
const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth); const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
@ -244,21 +245,21 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
onEnterKey(event) { onEnterKey(event) {
const items = DomHandler.find(this.container, '[data-pc-section="item"]'); const items = find(this.container, '[data-pc-section="item"]');
const itemIndex = [...items].findIndex((item) => item.id === this.focusedOptionIndex); const itemIndex = [...items].findIndex((item) => item.id === this.focusedOptionIndex);
const buttonEl = DomHandler.findSingle(this.container, 'button'); const buttonEl = findSingle(this.container, 'button');
this.onItemClick(event, this.model[itemIndex]); this.onItemClick(event, this.model[itemIndex]);
this.onBlur(event); this.onBlur(event);
buttonEl && DomHandler.focus(buttonEl); buttonEl && focus(buttonEl);
}, },
onEscapeKey() { onEscapeKey() {
this.hide(); this.hide();
const buttonEl = DomHandler.findSingle(this.container, 'button'); const buttonEl = findSingle(this.container, 'button');
buttonEl && DomHandler.focus(buttonEl); buttonEl && focus(buttonEl);
}, },
onArrowUp(event) { onArrowUp(event) {
if (this.direction === 'down') { if (this.direction === 'down') {
@ -327,19 +328,19 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
changeFocusedOptionIndex(index) { changeFocusedOptionIndex(index) {
const items = DomHandler.find(this.container, '[data-pc-section="item"]'); const items = find(this.container, '[data-pc-section="item"]');
const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled')); const filteredItems = [...items].filter((item) => !hasClass(findSingle(item, 'a'), 'p-disabled'));
if (filteredItems[index]) { if (filteredItems[index]) {
this.focusedOptionIndex = filteredItems[index].getAttribute('id'); this.focusedOptionIndex = filteredItems[index].getAttribute('id');
const buttonEl = DomHandler.findSingle(filteredItems[index], '[type="button"]'); const buttonEl = findSingle(filteredItems[index], '[type="button"]');
buttonEl && DomHandler.focus(buttonEl); buttonEl && focus(buttonEl);
} }
}, },
findPrevOptionIndex(index) { findPrevOptionIndex(index) {
const items = DomHandler.find(this.container, '[data-pc-section="item"]'); const items = find(this.container, '[data-pc-section="item"]');
const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled')); const filteredItems = [...items].filter((item) => !hasClass(findSingle(item, 'a'), 'p-disabled'));
const newIndex = index === -1 ? filteredItems[filteredItems.length - 1].id : index; const newIndex = index === -1 ? filteredItems[filteredItems.length - 1].id : index;
let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex); let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
@ -348,8 +349,8 @@ export default {
return matchedOptionIndex; return matchedOptionIndex;
}, },
findNextOptionIndex(index) { findNextOptionIndex(index) {
const items = DomHandler.find(this.container, '[data-pc-section="item"]'); const items = find(this.container, '[data-pc-section="item"]');
const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled')); const filteredItems = [...items].filter((item) => !hasClass(findSingle(item, 'a'), 'p-disabled'));
const newIndex = index === -1 ? filteredItems[0].id : index; const newIndex = index === -1 ? filteredItems[0].id : index;
let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex); let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);

20
packages/primevue/src/splitter/Splitter.vue
View File

@ -22,7 +22,9 @@
</template> </template>
<script> <script>
import { DomHandler, ObjectUtils } from '@primevue/core/utils'; import { getVNodeProp } from '@primevue/core/utils';
import { getWidth, getHeight, getOuterWidth, getOuterHeight } from '@primeuix/utils/dom';
import { isArray } from '@primeuix/utils/object';
import BaseSplitter from './BaseSplitter.vue'; import BaseSplitter from './BaseSplitter.vue';
export default { export default {
@ -85,7 +87,7 @@ export default {
}, },
onResizeStart(event, index, isKeyDown) { onResizeStart(event, index, isKeyDown) {
this.gutterElement = event.currentTarget || event.target.parentElement; this.gutterElement = event.currentTarget || event.target.parentElement;
this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el); this.size = this.horizontal ? getWidth(this.$el) : getHeight(this.$el);
if (!isKeyDown) { if (!isKeyDown) {
this.dragging = true; this.dragging = true;
@ -96,11 +98,11 @@ export default {
this.nextPanelElement = this.gutterElement.nextElementSibling; this.nextPanelElement = this.gutterElement.nextElementSibling;
if (isKeyDown) { if (isKeyDown) {
this.prevPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true); this.prevPanelSize = this.horizontal ? getOuterWidth(this.prevPanelElement, true) : getOuterHeight(this.prevPanelElement, true);
this.nextPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true); this.nextPanelSize = this.horizontal ? getOuterWidth(this.nextPanelElement, true) : getOuterHeight(this.nextPanelElement, true);
} else { } else {
this.prevPanelSize = (100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true))) / this.size; this.prevPanelSize = (100 * (this.horizontal ? getOuterWidth(this.prevPanelElement, true) : getOuterHeight(this.prevPanelElement, true))) / this.size;
this.nextPanelSize = (100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true))) / this.size; this.nextPanelSize = (100 * (this.horizontal ? getOuterWidth(this.nextPanelElement, true) : getOuterHeight(this.nextPanelElement, true))) / this.size;
} }
this.prevPanelIndex = index; this.prevPanelIndex = index;
@ -263,13 +265,13 @@ export default {
if (newPrevPanelSize > 100 || newPrevPanelSize < 0) return false; if (newPrevPanelSize > 100 || newPrevPanelSize < 0) return false;
if (newNextPanelSize > 100 || newNextPanelSize < 0) return false; if (newNextPanelSize > 100 || newNextPanelSize < 0) return false;
let prevPanelMinSize = ObjectUtils.getVNodeProp(this.panels[this.prevPanelIndex], 'minSize'); let prevPanelMinSize = getVNodeProp(this.panels[this.prevPanelIndex], 'minSize');
if (this.panels[this.prevPanelIndex].props && prevPanelMinSize && prevPanelMinSize > newPrevPanelSize) { if (this.panels[this.prevPanelIndex].props && prevPanelMinSize && prevPanelMinSize > newPrevPanelSize) {
return false; return false;
} }
let newPanelMinSize = ObjectUtils.getVNodeProp(this.panels[this.prevPanelIndex + 1], 'minSize'); let newPanelMinSize = getVNodeProp(this.panels[this.prevPanelIndex + 1], 'minSize');
if (this.panels[this.prevPanelIndex + 1].props && newPanelMinSize && newPanelMinSize > newNextPanelSize) { if (this.panels[this.prevPanelIndex + 1].props && newPanelMinSize && newPanelMinSize > newNextPanelSize) {
return false; return false;
@ -326,7 +328,7 @@ export default {
} }
}, },
saveState() { saveState() {
if (ObjectUtils.isArray(this.panelSizes)) { if (isArray(this.panelSizes)) {
this.getStorage().setItem(this.stateKey, JSON.stringify(this.panelSizes)); this.getStorage().setItem(this.stateKey, JSON.stringify(this.panelSizes));
} }
}, },

7
packages/primevue/src/step/Step.vue
View File

@ -12,7 +12,8 @@
</template> </template>
<script> <script>
import { DomHandler, ObjectUtils } from '@primevue/core/utils'; import { find } from '@primeuix/utils/dom';
import { findIndexInList } from '@primeuix/utils/object';
import StepperSeparator from '../stepper/StepperSeparator.vue'; import StepperSeparator from '../stepper/StepperSeparator.vue';
import BaseStep from './BaseStep.vue'; import BaseStep from './BaseStep.vue';
@ -32,8 +33,8 @@ export default {
}, },
mounted() { mounted() {
if (this.$el && this.$pcStepList) { if (this.$el && this.$pcStepList) {
let index = ObjectUtils.findIndexInList(this.$el, DomHandler.find(this.$pcStepper.$el, '[data-pc-name="step"]')); let index = findIndexInList(this.$el, find(this.$pcStepper.$el, '[data-pc-name="step"]'));
let stepLen = DomHandler.find(this.$pcStepper.$el, '[data-pc-name="step"]').length; let stepLen = find(this.$pcStepper.$el, '[data-pc-name="step"]').length;
this.isSeparatorVisible = index !== stepLen - 1; this.isSeparatorVisible = index !== stepLen - 1;
} }

9
packages/primevue/src/steppanel/StepPanel.vue
View File

@ -23,7 +23,8 @@
</template> </template>
<script> <script>
import { DomHandler, ObjectUtils } from '@primevue/core/utils'; import { find, findSingle } from '@primeuix/utils/dom';
import { findIndexInList } from '@primeuix/utils/object';
import StepperSeparator from '../stepper/StepperSeparator.vue'; import StepperSeparator from '../stepper/StepperSeparator.vue';
import BaseStepPanel from './BaseStepPanel.vue'; import BaseStepPanel from './BaseStepPanel.vue';
@ -43,9 +44,9 @@ export default {
}, },
mounted() { mounted() {
if (this.$el) { if (this.$el) {
let stepElements = DomHandler.find(this.$pcStepper.$el, '[data-pc-name="step"]'); let stepElements = find(this.$pcStepper.$el, '[data-pc-name="step"]');
let stepPanelEl = DomHandler.findSingle(this.isVertical ? this.$pcStepItem?.$el : this.$pcStepList?.$el, '[data-pc-name="step"]'); let stepPanelEl = findSingle(this.isVertical ? this.$pcStepItem?.$el : this.$pcStepList?.$el, '[data-pc-name="step"]');
let stepPanelIndex = ObjectUtils.findIndexInList(stepPanelEl, stepElements); let stepPanelIndex = findIndexInList(stepPanelEl, stepElements);
this.isSeparatorVisible = this.isVertical && stepPanelIndex !== stepElements.length - 1; this.isSeparatorVisible = this.isVertical && stepPanelIndex !== stepElements.length - 1;
} }

6
packages/primevue/src/steps/Steps.vue
View File

@ -27,7 +27,7 @@
</template> </template>
<script> <script>
import { DomHandler } from '@primevue/core/utils'; import { findSingle, find } from '@primeuix/utils/dom';
import { mergeProps } from 'vue'; import { mergeProps } from 'vue';
import BaseSteps from './BaseSteps.vue'; import BaseSteps from './BaseSteps.vue';
@ -160,12 +160,12 @@ export default {
return prevItem ? prevItem.children[0] : null; return prevItem ? prevItem.children[0] : null;
}, },
findFirstItem() { findFirstItem() {
const firstSibling = DomHandler.findSingle(this.$refs.list, '[data-pc-section="item"]'); const firstSibling = findSingle(this.$refs.list, '[data-pc-section="item"]');
return firstSibling ? firstSibling.children[0] : null; return firstSibling ? firstSibling.children[0] : null;
}, },
findLastItem() { findLastItem() {
const siblings = DomHandler.find(this.$refs.list, '[data-pc-section="item"]'); const siblings = find(this.$refs.list, '[data-pc-section="item"]');
return siblings ? siblings[siblings.length - 1].children[0] : null; return siblings ? siblings[siblings.length - 1].children[0] : null;
}, },

34
packages/primevue/src/styleclass/StyleClass.js
View File

@ -1,4 +1,4 @@
import { DomHandler } from '@primevue/core/utils'; import { addClass, hasClass, removeClass } from '@primeuix/utils/dom';
import BaseStyleClass from './BaseStyleClass'; import BaseStyleClass from './BaseStyleClass';
const StyleClass = BaseStyleClass.extend('styleclass', { const StyleClass = BaseStyleClass.extend('styleclass', {
@ -18,8 +18,8 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
el.$_pstyleclass_clicklistener = () => { el.$_pstyleclass_clicklistener = () => {
if (binding.value.toggleClass) { if (binding.value.toggleClass) {
if (DomHandler.hasClass(target, binding.value.toggleClass)) DomHandler.removeClass(target, binding.value.toggleClass); if (hasClass(target, binding.value.toggleClass)) removeClass(target, binding.value.toggleClass);
else DomHandler.addClass(target, binding.value.toggleClass); else addClass(target, binding.value.toggleClass);
} else { } else {
if (target.offsetParent === null) this.enter(target, el, binding); if (target.offsetParent === null) this.enter(target, el, binding);
else this.leave(target, binding); else this.leave(target, binding);
@ -43,23 +43,23 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
if (binding.value.enterActiveClass.includes('slidedown')) { if (binding.value.enterActiveClass.includes('slidedown')) {
target.style.height = '0px'; target.style.height = '0px';
DomHandler.removeClass(target, 'hidden'); removeClass(target, 'hidden');
target.style.maxHeight = target.scrollHeight + 'px'; target.style.maxHeight = target.scrollHeight + 'px';
DomHandler.addClass(target, 'hidden'); addClass(target, 'hidden');
target.style.height = ''; target.style.height = '';
} }
DomHandler.addClass(target, binding.value.enterActiveClass); addClass(target, binding.value.enterActiveClass);
if (binding.value.enterFromClass) { if (binding.value.enterFromClass) {
DomHandler.removeClass(target, binding.value.enterFromClass); removeClass(target, binding.value.enterFromClass);
} }
target.$p_styleclass_enterlistener = () => { target.$p_styleclass_enterlistener = () => {
DomHandler.removeClass(target, binding.value.enterActiveClass); removeClass(target, binding.value.enterActiveClass);
if (binding.value.enterToClass) { if (binding.value.enterToClass) {
DomHandler.addClass(target, binding.value.enterToClass); addClass(target, binding.value.enterToClass);
} }
target.removeEventListener('animationend', target.$p_styleclass_enterlistener); target.removeEventListener('animationend', target.$p_styleclass_enterlistener);
@ -75,11 +75,11 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
} }
} else { } else {
if (binding.value.enterFromClass) { if (binding.value.enterFromClass) {
DomHandler.removeClass(target, binding.value.enterFromClass); removeClass(target, binding.value.enterFromClass);
} }
if (binding.value.enterToClass) { if (binding.value.enterToClass) {
DomHandler.addClass(target, binding.value.enterToClass); addClass(target, binding.value.enterToClass);
} }
} }
@ -91,17 +91,17 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
if (binding.value.leaveActiveClass) { if (binding.value.leaveActiveClass) {
if (!target.$_pstyleclass_animating) { if (!target.$_pstyleclass_animating) {
target.$_pstyleclass_animating = true; target.$_pstyleclass_animating = true;
DomHandler.addClass(target, binding.value.leaveActiveClass); addClass(target, binding.value.leaveActiveClass);
if (binding.value.leaveFromClass) { if (binding.value.leaveFromClass) {
DomHandler.removeClass(target, binding.value.leaveFromClass); removeClass(target, binding.value.leaveFromClass);
} }
target.$p_styleclass_leavelistener = () => { target.$p_styleclass_leavelistener = () => {
DomHandler.removeClass(target, binding.value.leaveActiveClass); removeClass(target, binding.value.leaveActiveClass);
if (binding.value.leaveToClass) { if (binding.value.leaveToClass) {
DomHandler.addClass(target, binding.value.leaveToClass); addClass(target, binding.value.leaveToClass);
} }
target.removeEventListener('animationend', target.$p_styleclass_leavelistener); target.removeEventListener('animationend', target.$p_styleclass_leavelistener);
@ -112,11 +112,11 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
} }
} else { } else {
if (binding.value.leaveFromClass) { if (binding.value.leaveFromClass) {
DomHandler.removeClass(target, binding.value.leaveFromClass); removeClass(target, binding.value.leaveFromClass);
} }
if (binding.value.leaveToClass) { if (binding.value.leaveToClass) {
DomHandler.addClass(target, binding.value.leaveToClass); addClass(target, binding.value.leaveToClass);
} }
} }

Some files were not shown because too many files have changed in this diff Show More