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>
<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 {
props: ['docs'],
@ -49,16 +50,16 @@ export default {
methods: {
onScroll() {
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) => {
const { top } = DomHandler.getOffset(label);
const { top } = getOffset(label);
const threshold = this.getThreshold(label);
if (top - threshold <= windowScrollTop) {
const link = DomHandler.findSingle(label, 'a');
const link = findSingle(label, 'a');
this.activeId = link.id;
}
@ -69,7 +70,7 @@ export default {
this.scrollEndTimer = setTimeout(() => {
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' });
}, 50);
@ -89,19 +90,19 @@ export default {
},
getThreshold(label) {
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) {
return section.querySelector('a').getAttribute('id');
},
scrollCurrentUrl() {
const hash = window.location.hash.substring(1);
const hasHash = ObjectUtils.isNotEmpty(hash);
const hasHash = isNotEmpty(hash);
const id = hasHash ? hash : (this.docs[0] || {}).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 = {
mounted(el, binding) {
@ -9,7 +9,7 @@ const CodeHighlight = {
else if (modifiers.css || value === 'css') el.className = 'language-css';
else el.className = 'language-markup';
if (DomHandler.isClient()) {
if (isClient()) {
window.Prism.highlightElement(el.children[0]);
el.children[0].parentElement.setAttribute('tabindex', '-1');
}

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

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

2
apps/showcase/package.json
View File

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

3
packages/core/package.json
View File

@ -48,7 +48,8 @@
"dev:link": "pnpm link --global && npm link"
},
"dependencies": {
"@primeuix/styled": "^0.0.1"
"@primeuix/utils": "^0.0.3",
"@primeuix/styled": "^0.0.3"
},
"peerDependencies": {
"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 = {
filter(value, fields, filterValue, filterMatchMode, filterLocale) {
@ -16,7 +16,7 @@ const FilterService = {
}
} else {
for (const field of fields) {
const fieldValue = ObjectUtils.resolveFieldData(item, field);
const fieldValue = resolveFieldData(item, field);
if (this.filters[filterMatchMode](fieldValue, filterValue, filterLocale)) {
filteredItems.push(item);
@ -38,8 +38,8 @@ const FilterService = {
return false;
}
let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
let filterValue = removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.slice(0, filterValue.length) === filterValue;
},
@ -52,8 +52,8 @@ const FilterService = {
return false;
}
let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
let filterValue = removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.indexOf(filterValue) !== -1;
},
@ -66,8 +66,8 @@ const FilterService = {
return false;
}
let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
let filterValue = removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
return stringValue.indexOf(filterValue) === -1;
},
@ -80,8 +80,8 @@ const FilterService = {
return false;
}
let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
let filterValue = removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
let stringValue = removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
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();
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) {
if (filter === undefined || filter === null || filter === '') {
@ -107,7 +107,7 @@ const FilterService = {
}
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) {
if (filter === undefined || filter === null || filter.length === 0) {
@ -115,7 +115,7 @@ const FilterService = {
}
for (let i = 0; i < filter.length; i++) {
if (ObjectUtils.equals(value, filter[i])) {
if (equals(value, filter[i])) {
return true;
}
}

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

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

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

@ -1,8 +1,10 @@
<script>
import Base from '@primevue/core/base';
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 { toFlatCase, isNotEmpty, getKeyValue, isString, isArray, resolve } from '@primeuix/utils/object';
import { findSingle } from '@primeuix/utils/dom';
import { mergeProps } from 'vue';
import BaseComponentStyle from './style/BaseComponentStyle';
@ -77,7 +79,7 @@ export default {
},
mounted() {
// @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) {
this.rootEl.setAttribute(this.$attrSelector, '');
@ -110,7 +112,7 @@ export default {
}
},
_mergeProps(fn, ...args) {
return ObjectUtils.isFunction(fn) ? fn(...args) : mergeProps(...args);
return isFunction(fn) ? fn(...args) : mergeProps(...args);
},
_loadStyles() {
const _load = () => {
@ -144,12 +146,12 @@ export default {
* const selfCSS = this._getPTClassValue(this.pt, 'css', this.$params);
* const defaultCSS = this._getPTClassValue(this.defaultPT, 'css', this.$params);
* 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);
ObjectUtils.isNotEmpty(globalCSS) && BaseStyle.load(globalCSS, { name: 'global', ...this.$styleOptions });
isNotEmpty(globalCSS) && BaseStyle.load(globalCSS, { name: 'global', ...this.$styleOptions });
},
_loadThemeStyles() {
if (this.isUnstyled) return;
@ -204,14 +206,7 @@ export default {
return this[name] || this._getHostInstance(this)?.[name];
},
_getOptionValue(options, key = '', params = {}) {
const fKeys = ObjectUtils.toFlatCase(key).split('.');
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);
return getKeyValue(options, key, params);
},
_getPTValue(obj = {}, key = '', params = {}, searchInDefaultPT = true) {
const searchOut = /./g.test(key) && !!params[key.split('.')[0]];
@ -230,28 +225,28 @@ export default {
},
_getPTDatasets(key = '') {
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 (
key !== 'transition' && {
...(key === 'root' && {
[`${datasetPrefix}name`]: ObjectUtils.toFlatCase(isExtended ? this.pt?.['data-pc-section'] : this.$.type.name),
...(isExtended && { [`${datasetPrefix}extend`]: ObjectUtils.toFlatCase(this.$.type.name) })
[`${datasetPrefix}name`]: toFlatCase(isExtended ? this.pt?.['data-pc-section'] : this.$.type.name),
...(isExtended && { [`${datasetPrefix}extend`]: toFlatCase(this.$.type.name) })
}),
[`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
[`${datasetPrefix}section`]: toFlatCase(key)
}
);
},
_getPTClassValue(...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) {
const getValue = (value, checkSameKey = false) => {
const computedValue = callback ? callback(value) : value;
const _key = ObjectUtils.toFlatCase(key);
const _cKey = ObjectUtils.toFlatCase(this.$name);
const _key = toFlatCase(key);
const _cKey = toFlatCase(this.$name);
return (checkSameKey ? (_key !== _cKey ? computedValue?.[_key] : undefined) : computedValue?.[_key]) ?? computedValue;
};
@ -273,8 +268,8 @@ export default {
const value = fn(pt.value);
if (originalValue === undefined && value === undefined) return undefined;
else if (ObjectUtils.isString(value)) return value;
else if (ObjectUtils.isString(originalValue)) return originalValue;
else if (isString(value)) return value;
else if (isString(originalValue)) return originalValue;
return mergeSections || (!mergeSections && value) ? (useMergeProps ? this._mergeProps(useMergeProps, originalValue, value) : { ...originalValue, ...value }) : value;
}
@ -313,10 +308,10 @@ export default {
},
computed: {
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() {
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() {
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 { getKeyValue, isArray, isEmpty, isFunction, isObject, isString, resolve, toCapitalCase, toFlatCase } from '@primeuix/utils/object';
import Base from '@primevue/core/base';
import BaseStyle from '@primevue/core/base/style';
import PrimeVueService from '@primevue/core/service';
import { ObjectUtils, UniqueComponentId } from '@primevue/core/utils';
import { UniqueComponentId } from '@primevue/core/utils';
import { mergeProps } from 'vue';
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,
_getOptionValue: (options, key = '', params = {}) => {
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);
},
_getOptionValue: getKeyValue,
_getPTValue: (instance = {}, obj = {}, key = '', params = {}, searchInDefaultPT = true) => {
const getValue = (...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 || {};
@ -36,14 +28,14 @@ const BaseDirective = {
const datasetPrefix = 'data-pc-';
return {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }),
[`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
...(key === 'root' && { [`${datasetPrefix}name`]: toFlatCase(instance.$name) }),
[`${datasetPrefix}section`]: toFlatCase(key)
};
},
_getPT: (pt, key = '', callback) => {
const getValue = (value) => {
const computedValue = callback ? callback(value) : value;
const _key = ObjectUtils.toFlatCase(key);
const _key = toFlatCase(key);
return computedValue?.[_key] ?? computedValue;
};
@ -65,8 +57,8 @@ const BaseDirective = {
const value = fn(pt.value);
if (originalValue === undefined && value === undefined) return undefined;
else if (ObjectUtils.isString(value)) return value;
else if (ObjectUtils.isString(originalValue)) return originalValue;
else if (isString(value)) return value;
else if (isString(originalValue)) return originalValue;
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);
},
_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 instance = el?.$instance;
const selfHook = BaseDirective._usePT(instance, BaseDirective._getPT(binding?.value?.pt, directiveName), BaseDirective._getOptionValue, `hooks.${name}`);
@ -153,7 +145,7 @@ const BaseDirective = {
defaultHook?.(instance, options);
},
_mergeProps(instance = {}, fn, ...args) {
return ObjectUtils.isFunction(fn) ? fn(...args) : mergeProps(...args);
return isFunction(fn) ? fn(...args) : mergeProps(...args);
},
_extend: (name, options = {}) => {
const handleHook = (hook, el, binding, vnode, prevVnode) => {
@ -161,7 +153,7 @@ const BaseDirective = {
const config = BaseDirective._getConfig(binding, vnode);
const $prevInstance = el._$instances[name] || {};
const $options = ObjectUtils.isEmpty($prevInstance) ? { ...options, ...options?.methods } : {};
const $options = isEmpty($prevInstance) ? { ...options, ...options?.methods } : {};
el._$instances[name] = {
...$prevInstance,

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

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

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();

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

@ -2,7 +2,7 @@
* Ported from useStyleTag in @vueuse/core
* 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';
function tryOnMounted(fn, sync = true) {
@ -18,7 +18,7 @@ export function useStyle(css, options = {}) {
const cssRef = ref(css);
const styleRef = ref(null);
const defaultDocument = DomHandler.isClient() ? window.document : undefined;
const defaultDocument = isClient() ? window.document : undefined;
const {
document = defaultDocument,
immediate = true,
@ -48,15 +48,15 @@ export function useStyle(css, options = {}) {
if (!styleRef.value.isConnected) {
cssRef.value = _css || css;
DomHandler.setAttributes(styleRef.value, {
setAttributes(styleRef.value, {
type: 'text/css',
id: _id,
media,
nonce: _nonce
});
first ? document.head.prepend(styleRef.value) : document.head.appendChild(styleRef.value);
DomHandler.setAttribute(styleRef.value, 'data-primevue-style-id', _name);
DomHandler.setAttributes(styleRef.value, _styleProps);
setAttribute(styleRef.value, 'data-primevue-style-id', _name);
setAttributes(styleRef.value, _styleProps);
styleRef.value.onload = (event) => onStyleLoaded?.(event, { name: _name });
onStyleMounted?.(_name);
}
@ -78,7 +78,7 @@ export function useStyle(css, options = {}) {
const unload = () => {
if (!document || !isLoaded.value) return;
stop();
DomHandler.isExist(styleRef.value) && document.head.removeChild(styleRef.value);
isExist(styleRef.value) && document.head.removeChild(styleRef.value);
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 {
constructor(element, listener = () => {}) {
@ -7,7 +7,7 @@ export default class ConnectedOverlayScrollHandler {
}
bindScrollListener() {
this.scrollableParents = DomHandler.getScrollableParents(this.element);
this.scrollableParents = getScrollableParents(this.element);
for (let i = 0; i < this.scrollableParents.length; i++) {
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 {
helpers;
@ -23,7 +23,7 @@ export default class {
const children = this._get(parentInstance, slots);
const computed = children ? this._recursive([...this.helpers], children) : null;
return ObjectUtils.isNotEmpty(computed) ? computed : null;
return isNotEmpty(computed) ? computed : null;
}
_isMatched(instance, key) {
const parent = instance?.parent;
@ -41,7 +41,7 @@ export default class {
components = components.concat(this._recursive(components, child.children));
} else if (child.type.name === this.type) {
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));
}
});

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_') {
if (!lastIds.hasOwnProperty(prefix)) {
lastIds[prefix] = 0;
}
lastIds[prefix]++;
return `${prefix}${lastIds[prefix]}`;
return uuid(prefix);
}

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

@ -1,3 +1,5 @@
export * from '@primeuix/utils';
export declare class ConnectedOverlayScrollHandler {
constructor(element: any, listener?: () => void);
bindScrollListener(): void;
@ -5,103 +7,6 @@ export declare class ConnectedOverlayScrollHandler {
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 {
constructor(options: { init?: any; type?: string });
add(instance: any): void;
@ -111,17 +16,4 @@ export declare class HelperSet {
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 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 @@
/*
* @todo - Move to @primeui/utils
*/
export * from '@primeuix/utils';
export { default as ConnectedOverlayScrollHandler } from './ConnectedOverlayScrollHandler';
export { default as HelperSet } from './HelperSet';
export { default as UniqueComponentId } from './UniqueComponentId';
import ConnectedOverlayScrollHandler from './ConnectedOverlayScrollHandler';
import DomHandler from './DomHandler';
import EventBus from './EventBus';
import HelperSet from './HelperSet';
import ObjectUtils from './ObjectUtils';
import UniqueComponentId from './UniqueComponentId';
import ZIndexUtils from './ZIndexUtils';
export function getVNodeProp(vnode, prop) {
if (vnode) {
let props = vnode.props;
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>
import { isEmpty } from '@primeuix/utils/object';
import BaseComponent from '@primevue/core/basecomponent';
import { ObjectUtils } from '@primevue/core/utils';
import BaseIconStyle from '@primevue/icons/baseicon/style';
export default {
@ -25,7 +25,7 @@ export default {
},
methods: {
pti() {
const isLabelEmpty = ObjectUtils.isEmpty(this.label);
const isLabelEmpty = isEmpty(this.label);
return {
...(!this.isUnstyled && {

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

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

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

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

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

@ -19,7 +19,7 @@ const GLOBALS = {
// externals
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];
// alias

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

@ -22,7 +22,7 @@
</template>
<script>
import { DomHandler } from '@primevue/core/utils';
import { findSingle, getAttribute, focus } from '@primeuix/utils/dom';
import ChevronDownIcon from '@primevue/icons/chevrondown';
import ChevronUpIcon from '@primevue/icons/chevronup';
import Ripple from 'primevue/ripple';
@ -101,17 +101,17 @@ export default {
return headerElement?.closest('[data-pc-name="accordionpanel"]');
},
findHeader(panelElement) {
return DomHandler.findSingle(panelElement, '[data-pc-name="accordionheader"]');
return findSingle(panelElement, '[data-pc-name="accordionheader"]');
},
findNextPanel(panelElement, selfCheck = false) {
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) {
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() {
return this.findNextPanel(this.$pcAccordion.$el.firstElementChild, true);
@ -123,7 +123,7 @@ export default {
this.$pcAccordion.updateValue(this.$pcAccordionPanel.value);
},
changeFocusedPanel(event, element) {
DomHandler.focus(this.findHeader(element));
focus(this.findHeader(element));
}
},
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';
const AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', {
@ -24,7 +24,7 @@ const AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', {
bindAnimationEvents() {
if (!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.unbindAnimationEvents();
};
@ -56,7 +56,7 @@ const AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', {
([entry]) => {
if (entry.boundingClientRect.top > 0 && !entry.isIntersecting) {
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);
}
@ -69,8 +69,8 @@ const AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', {
enter() {
if (this.animationState !== 'enter' && this.$value.enterClass) {
this.$el.style.opacity = '';
DomHandler.removeMultipleClasses(this.$el, this.$value.leaveClass);
DomHandler.addMultipleClasses(this.$el, this.$value.enterClass);
removeClass(this.$el, this.$value.leaveClass);
addClass(this.$el, this.$value.enterClass);
this.$modifiers.once && this.unbindIntersectionObserver(this.$el);
@ -81,8 +81,8 @@ const AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', {
leave() {
if (this.animationState !== 'leave' && this.$value.leaveClass) {
this.$el.style.opacity = this.$value.enterClass ? '0' : '';
DomHandler.removeMultipleClasses(this.$el, this.$value.enterClass);
DomHandler.addMultipleClasses(this.$el, this.$value.leaveClass);
removeClass(this.$el, this.$value.enterClass);
addClass(this.$el, this.$value.leaveClass);
this.bindAnimationEvents();
this.animationState = 'leave';

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

@ -180,7 +180,10 @@
</template>
<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 SpinnerIcon from '@primevue/icons/spinner';
import Chip from 'primevue/chip';
@ -247,7 +250,7 @@ export default {
}
if (this.overlay) {
ZIndexUtils.clear(this.overlay);
ZIndex.clear(this.overlay);
this.overlay = null;
}
},
@ -256,13 +259,13 @@ export default {
return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
},
getOptionLabel(option) {
return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;
},
getOptionValue(option) {
return option; // TODO: The 'optionValue' properties can be added.
},
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) {
return this.ptm(key, {
@ -274,16 +277,16 @@ export default {
});
},
isOptionDisabled(option) {
return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
},
isOptionGroup(option) {
return this.optionGroupLabel && option.optionGroup && option.group;
},
getOptionGroupLabel(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel);
return resolveFieldData(optionGroup, this.optionGroupLabel);
},
getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren);
return resolveFieldData(optionGroup, this.optionGroupChildren);
},
getAriaPosInset(index) {
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.overlayVisible = true;
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) {
const _hide = () => {
@ -303,7 +306,7 @@ export default {
this.clicked = false;
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(() => {
@ -499,7 +502,7 @@ export default {
}
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) {
@ -508,7 +511,7 @@ export default {
if (this.overlayVisible) {
this.hide(true);
} 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;
if (this.dropdownMode === 'blank') this.search(event, '', 'dropdown');
@ -593,8 +596,8 @@ export default {
this.focusedOptionIndex = -1;
if (this.multiple) {
if (ObjectUtils.isEmpty(target.value) && this.hasSelectedOption) {
DomHandler.focus(this.$refs.multiContainer);
if (isEmpty(target.value) && this.hasSelectedOption) {
focus(this.$refs.multiContainer);
this.focusedMultipleOptionIndex = this.modelValue.length;
} else {
event.stopPropagation(); // To prevent onArrowLeftKeyOnMultiple method
@ -664,7 +667,7 @@ export default {
},
onBackspaceKey(event) {
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 newValue = this.modelValue.slice(0, -1);
@ -684,7 +687,7 @@ export default {
if (this.focusedMultipleOptionIndex > this.modelValue.length - 1) {
this.focusedMultipleOptionIndex = -1;
DomHandler.focus(this.$refs.focusInput);
focus(this.$refs.focusInput);
}
},
onBackspaceKeyOnMultiple(event) {
@ -693,9 +696,9 @@ export default {
}
},
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();
},
onOverlayAfterEnter() {
@ -714,16 +717,16 @@ export default {
this.overlay = null;
},
onOverlayAfterLeave(el) {
ZIndexUtils.clear(el);
ZIndex.clear(el);
},
alignOverlay() {
let target = this.multiple ? this.$refs.multiContainer : this.$refs.focusInput.$el;
if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, target);
relativePosition(this.overlay, target);
} else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(target) + 'px';
DomHandler.absolutePosition(this.overlay, target);
this.overlay.style.minWidth = getOuterWidth(target) + 'px';
absolutePosition(this.overlay, target);
}
},
bindOutsideClickListener() {
@ -762,7 +765,7 @@ export default {
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) {
if (this.overlayVisible && !isTouchDevice()) {
this.hide();
}
};
@ -790,13 +793,13 @@ export default {
return this.isValidOption(option) && this.getOptionLabel(option)?.toLocaleLowerCase(this.searchLocale) === value.toLocaleLowerCase(this.searchLocale);
},
isValidOption(option) {
return ObjectUtils.isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
return isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
},
isValidSelectedOption(option) {
return this.isValidOption(option) && this.isSelected(option);
},
isEquals(value1, value2) {
return ObjectUtils.equals(value1, value2, this.equalityKey);
return equals(value1, value2, this.equalityKey);
},
isSelected(option) {
const optionValue = this.getOptionValue(option);
@ -807,7 +810,7 @@ export default {
return this.visibleOptions.findIndex((option) => this.isValidOption(option));
},
findLastOptionIndex() {
return ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
return findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
},
findNextOptionIndex(index) {
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;
},
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;
},
@ -854,7 +857,7 @@ export default {
this.$emit('item-unselect', { originalEvent: event, value: removedOption });
this.$emit('option-unselect', { originalEvent: event, value: removedOption });
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) {
if (this.focusedOptionIndex !== index) {
@ -869,7 +872,7 @@ export default {
scrollInView(index = -1) {
this.$nextTick(() => {
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) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
@ -915,7 +918,7 @@ export default {
return this.optionGroupLabel ? this.flatOptions(this.suggestions) : this.suggestions || [];
},
inputValue() {
if (ObjectUtils.isNotEmpty(this.modelValue)) {
if (isNotEmpty(this.modelValue)) {
if (typeof this.modelValue === 'object') {
const label = this.getOptionLabel(this.modelValue);
@ -928,13 +931,13 @@ export default {
}
},
hasSelectedOption() {
return ObjectUtils.isNotEmpty(this.modelValue);
return isNotEmpty(this.modelValue);
},
equalityKey() {
return this.dataKey; // TODO: The 'optionValue' properties can be added.
},
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() {
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 { ObjectUtils } from '@primevue/core/utils';
const theme = ({ dt }) => `
.p-autocomplete {
@ -249,7 +249,7 @@ const classes = {
'p-disabled': props.disabled,
'p-invalid': props.invalid,
'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-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 { ObjectUtils } from '@primevue/core/utils';
const theme = ({ dt }) => `
.p-badge {
@ -85,8 +85,8 @@ const classes = {
root: ({ props, instance }) => [
'p-badge p-component',
{
'p-badge-circle': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default,
'p-badge-circle': isNotEmpty(props.value) && String(props.value).length === 1,
'p-badge-dot': isEmpty(props.value) && !instance.$slots.default,
'p-badge-sm': props.size === 'small',
'p-badge-lg': props.size === 'large',
'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';
const BadgeDirective = BaseBadgeDirective.extend('badge', {
@ -6,7 +7,7 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
console.warn('Deprecated since v4. Use OverlayBadge component instead.');
const id = UniqueComponentId() + '_badge';
const badge = DomHandler.createElement('span', {
const badge = createElement('span', {
id,
class: !this.isUnstyled() && this.cx('root'),
[this.$attrSelector]: '',
@ -22,7 +23,7 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
el.$_pbadgeId = badge.getAttribute('id');
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) {
@ -31,21 +32,21 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
badge.appendChild(document.createTextNode(el.$_badgeValue));
if (String(el.$_badgeValue).length === 1 && !this.isUnstyled()) {
!this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-circle');
!this.isUnstyled() && addClass(badge, 'p-badge-circle');
}
} else {
!this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-dot');
!this.isUnstyled() && addClass(badge, 'p-badge-dot');
}
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.appendChild(badge);
this.$el = badge;
},
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');
if (binding.oldValue !== binding.value) {
@ -56,12 +57,12 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
if (!this.isUnstyled()) {
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');
else DomHandler.removeClass(badge, 'p-badge-circle');
} else if (!el.$_badgeValue && !DomHandler.hasClass(badge, 'p-badge-dot')) {
DomHandler.addClass(badge, 'p-badge-dot');
if (el.$_badgeValue.length === 1) addClass(badge, 'p-badge-circle');
else removeClass(badge, 'p-badge-circle');
} else if (!el.$_badgeValue && !hasClass(badge, 'p-badge-dot')) {
addClass(badge, 'p-badge-dot');
}
}

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

@ -5,7 +5,8 @@
</template>
<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';
export default {
@ -37,7 +38,7 @@ export default {
if (this.fullScreen) {
styleClass += ' p-blockui-mask-document';
this.mask = DomHandler.createElement('div', {
this.mask = createElement('div', {
style: {
position: 'fixed',
top: '0',
@ -50,10 +51,10 @@ export default {
});
document.body.appendChild(this.mask);
DomHandler.blockBodyScroll();
blockBodyScroll();
document.activeElement.blur();
} else {
this.mask = DomHandler.createElement('div', {
this.mask = createElement('div', {
style: {
position: 'absolute',
top: '0',
@ -68,16 +69,16 @@ export default {
}
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.$emit('block');
},
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.removeMask();
});
@ -86,11 +87,11 @@ export default {
}
},
removeMask() {
ZIndexUtils.clear(this.mask);
ZIndex.clear(this.mask);
if (this.fullScreen) {
document.body.removeChild(this.mask);
DomHandler.unblockBodyScroll();
unblockBodyScroll();
} else {
this.$refs.container.removeChild(this.mask);
}

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

@ -101,7 +101,9 @@
</template>
<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 ChevronLeftIcon from '@primevue/icons/chevronleft';
import ChevronRightIcon from '@primevue/icons/chevronright';
@ -314,7 +316,7 @@ export default {
}
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.transition = 'transform 500ms ease 0s';
}
@ -395,7 +397,7 @@ export default {
},
onTransitionEnd() {
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 = '';
if ((this.d_page === 0 || this.d_page === this.totalIndicators - 1) && this.isCircular()) {
@ -475,7 +477,7 @@ export default {
}
},
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();
this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
@ -491,29 +493,29 @@ export default {
this.changedFocusedIndicator(activeIndex, 0);
},
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();
this.changedFocusedIndicator(activeIndex, indicators.length - 1);
},
onTabKey() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-active') === true);
const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
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);
indicators[activeIndex].children[0].tabIndex = '-1';
indicators[highlightedIndex].children[0].tabIndex = '0';
},
findFocusedIndicatorIndex() {
const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
const activeIndicator = findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
},
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[nextInd].children[0].tabIndex = '0';
@ -552,7 +554,7 @@ export default {
if (!this.carouselStyle) {
this.carouselStyle = document.createElement('style');
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);
}
@ -564,13 +566,13 @@ export default {
if (this.responsiveOptions && !this.isUnstyled) {
let _responsiveOptions = [...this.responsiveOptions];
const comparer = ObjectUtils.localeComparator();
const comparer = localeComparator();
_responsiveOptions.sort((data1, data2) => {
const value1 = data1.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++) {

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

@ -86,7 +86,10 @@
</template>
<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 ChevronDownIcon from '@primevue/icons/chevrondown';
import SpinnerIcon from '@primevue/icons/spinner';
@ -139,25 +142,25 @@ export default {
}
if (this.overlay) {
ZIndexUtils.clear(this.overlay);
ZIndex.clear(this.overlay);
this.overlay = null;
}
},
methods: {
getOptionLabel(option) {
return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;
},
getOptionValue(option) {
return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option;
return this.optionValue ? resolveFieldData(option, this.optionValue) : option;
},
isOptionDisabled(option) {
return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
},
getOptionGroupLabel(optionGroup) {
return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : null;
return this.optionGroupLabel ? resolveFieldData(optionGroup, this.optionGroupLabel) : null;
},
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) {
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);
},
isProccessedOptionGroup(processedOption) {
return ObjectUtils.isNotEmpty(processedOption?.children);
return isNotEmpty(processedOption?.children);
},
show(isFocus) {
this.$emit('before-show');
this.overlayVisible = true;
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];
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: '' };
}
isFocus && DomHandler.focus(this.$refs.focusInput);
isFocus && focus(this.$refs.focusInput);
},
hide(isFocus) {
const _hide = () => {
@ -193,7 +196,7 @@ export default {
this.activeOptionPath = [];
this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' };
isFocus && DomHandler.focus(this.$refs.focusInput);
isFocus && focus(this.$refs.focusInput);
};
setTimeout(() => {
@ -275,7 +278,7 @@ export default {
break;
default:
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
if (!metaKey && isPrintableCharacter(event.key)) {
!this.overlayVisible && this.show();
this.searchOptions(event, event.key);
}
@ -288,11 +291,11 @@ export default {
onOptionChange(event) {
const { originalEvent, processedOption, isFocus, isHide } = event;
if (ObjectUtils.isEmpty(processedOption)) return;
if (isEmpty(processedOption)) return;
const { index, level, parentKey, children } = processedOption;
const grouped = ObjectUtils.isNotEmpty(children);
const root = ObjectUtils.isEmpty(processedOption.parent);
const grouped = isNotEmpty(children);
const root = isEmpty(processedOption.parent);
const selected = this.isSelected(processedOption);
if (selected) {
@ -312,7 +315,7 @@ export default {
}
grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
isFocus && DomHandler.focus(this.$refs.focusInput);
isFocus && focus(this.$refs.focusInput);
},
onOptionFocusChange(event) {
if (this.focusOnHover) {
@ -341,7 +344,7 @@ export default {
if (!this.overlay || !this.overlay.contains(event.target)) {
this.overlayVisible ? this.hide() : this.show();
DomHandler.focus(this.$refs.focusInput);
focus(this.$refs.focusInput);
}
this.clicked = true;
@ -399,7 +402,7 @@ export default {
const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
const parentOption = this.activeOptionPath.find((p) => p.key === processedOption?.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) {
this.activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== this.focusedOptionInfo.parentKey);
@ -480,9 +483,9 @@ export default {
this.overlayVisible && this.hide();
},
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.scrollInView();
},
@ -503,14 +506,14 @@ export default {
this.dirty = false;
},
onOverlayAfterLeave(el) {
ZIndexUtils.clear(el);
ZIndex.clear(el);
},
alignOverlay() {
if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, this.$el);
relativePosition(this.overlay, this.$el);
} else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';
absolutePosition(this.overlay, this.$el);
}
},
bindOutsideClickListener() {
@ -549,7 +552,7 @@ export default {
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) {
if (this.overlayVisible && !isTouchDevice()) {
this.hide();
}
};
@ -567,7 +570,7 @@ export default {
return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption)?.toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));
},
isValidOption(processedOption) {
return ObjectUtils.isNotEmpty(processedOption) && !this.isOptionDisabled(processedOption.option);
return isNotEmpty(processedOption) && !this.isOptionDisabled(processedOption.option);
},
isValidSelectedOption(processedOption) {
return this.isValidOption(processedOption) && this.isSelected(processedOption);
@ -579,7 +582,7 @@ export default {
return this.visibleOptions.findIndex((processedOption) => this.isValidOption(processedOption));
},
findLastOptionIndex() {
return ObjectUtils.findLastIndex(this.visibleOptions, (processedOption) => this.isValidOption(processedOption));
return findLastIndex(this.visibleOptions, (processedOption) => this.isValidOption(processedOption));
},
findNextOptionIndex(index) {
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;
},
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;
},
@ -608,12 +611,12 @@ export default {
processedOptions = processedOptions || (level === 0 && this.processedOptions);
if (!processedOptions) return null;
if (ObjectUtils.isEmpty(value)) return [];
if (isEmpty(value)) return [];
for (let i = 0; i < processedOptions.length; 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];
}
@ -632,7 +635,7 @@ export default {
let optionIndex = -1;
let matched = false;
if (ObjectUtils.isNotEmpty(this.searchValue)) {
if (isNotEmpty(this.searchValue)) {
if (this.focusedOptionInfo.index !== -1) {
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;
@ -677,7 +680,7 @@ export default {
scrollInView(index = -1) {
this.$nextTick(() => {
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) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
@ -723,14 +726,14 @@ export default {
},
computed: {
hasSelectedOption() {
return ObjectUtils.isNotEmpty(this.modelValue);
return isNotEmpty(this.modelValue);
},
label() {
const label = this.placeholder || 'p-emptylabel';
if (this.hasSelectedOption) {
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;
}
@ -749,7 +752,7 @@ export default {
return this.optionValue ? null : this.dataKey;
},
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() {
return this.searchMessage || this.$primevue.config.locale.searchMessage || '';
@ -770,7 +773,7 @@ export default {
return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
},
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: {

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

@ -55,7 +55,8 @@
<script>
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 Ripple from 'primevue/ripple';
@ -91,13 +92,13 @@ export default {
watch: {
isParentMount: {
handler(newValue) {
newValue && DomHandler.nestedPosition(this.container, this.level);
newValue && nestedPosition(this.container, this.level);
}
}
},
mounted() {
// 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;
},
methods: {
@ -105,10 +106,10 @@ export default {
return `${this.selectId}_${processedOption.key}`;
},
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) {
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) {
return this.ptm(key, {
@ -124,16 +125,16 @@ export default {
});
},
isOptionDisabled(processedOption) {
return this.optionDisabled ? ObjectUtils.resolveFieldData(processedOption.option, this.optionDisabled) : false;
return this.optionDisabled ? resolveFieldData(processedOption.option, this.optionDisabled) : false;
},
getOptionGroupLabel(processedOption) {
return this.optionGroupLabel ? ObjectUtils.resolveFieldData(processedOption.option, this.optionGroupLabel) : null;
return this.optionGroupLabel ? resolveFieldData(processedOption.option, this.optionGroupLabel) : null;
},
getOptionGroupChildren(processedOption) {
return processedOption.children;
},
isOptionGroup(processedOption) {
return ObjectUtils.isNotEmpty(processedOption.children);
return isNotEmpty(processedOption.children);
},
isOptionSelected(processedOption) {
return !this.isOptionGroup(processedOption) && this.isOptionActive(processedOption);

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

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

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

@ -21,7 +21,9 @@
</template>
<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 Portal from 'primevue/portal';
import BaseColorPicker from './BaseColorPicker.vue';
@ -72,7 +74,7 @@ export default {
}
if (this.picker && this.autoZIndex) {
ZIndexUtils.clear(this.picker);
ZIndex.clear(this.picker);
}
this.clearRefs();
@ -349,7 +351,7 @@ export default {
this.bindResizeListener();
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');
@ -363,12 +365,12 @@ export default {
},
onOverlayAfterLeave(el) {
if (this.autoZIndex) {
ZIndexUtils.clear(el);
ZIndex.clear(el);
}
},
alignOverlay() {
if (this.appendTo === 'self') DomHandler.relativePosition(this.picker, this.$refs.input);
else DomHandler.absolutePosition(this.picker, this.$refs.input);
if (this.appendTo === 'self') relativePosition(this.picker, this.$refs.input);
else absolutePosition(this.picker, this.$refs.input);
},
onInputClick() {
if (this.disabled) {
@ -410,7 +412,7 @@ export default {
this.colorDragging = true;
this.pickColor(event);
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();
},
onDrag(event) {
@ -428,7 +430,7 @@ export default {
this.colorDragging = false;
this.hueDragging = 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();
},
onHueMousedown(event) {
@ -446,7 +448,7 @@ export default {
this.hueDragging = true;
this.pickHue(event);
!this.isUnstyled && DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
!this.isUnstyled && addClass(this.$el, 'p-colorpicker-dragging');
},
isInputClicked(event) {
return this.$refs.input && this.$refs.input.isSameNode(event.target);
@ -495,7 +497,7 @@ export default {
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) {
if (this.overlayVisible && !isTouchDevice()) {
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();

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

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

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

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

9
packages/primevue/src/contextmenu/ContextMenuSub.vue
View File

@ -76,7 +76,8 @@
<script>
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 Ripple from 'primevue/ripple';
import { mergeProps } from 'vue';
@ -132,7 +133,7 @@ export default {
return this.getItemId(processedItem);
},
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) {
return this.getItemProp(processedItem, 'label');
@ -164,7 +165,7 @@ export default {
return this.focusedItemId === this.getItemId(processedItem);
},
isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items);
return isNotEmpty(processedItem.items);
},
onItemClick(event, processedItem) {
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;
},
onEnter() {
DomHandler.nestedPosition(this.$refs.container, this.level);
nestedPosition(this.$refs.container, this.level);
},
getMenuItemProps(processedItem, index) {
return {

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

@ -128,7 +128,9 @@
<script>
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 CheckIcon from '@primevue/icons/check';
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')))) {
setTimeout(() => {
const focusableEl = DomHandler.getFirstFocusableElement(this.$el);
const focusableEl = getFirstFocusableElement(this.$el);
focusableEl && focusableEl.focus();
}, 1);
@ -256,7 +258,7 @@ export default {
},
methods: {
columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop);
return getVNodeProp(this.column, prop);
},
getColumnPT(key) {
const columnMetaData = {
@ -279,7 +281,7 @@ export default {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
},
resolveFieldData() {
return ObjectUtils.resolveFieldData(this.rowData, this.field);
return resolveFieldData(this.rowData, this.field);
},
toggleRow(event) {
this.$emit('row-toggle', {
@ -393,7 +395,7 @@ export default {
let targetCell = this.findPreviousEditableColumn(currentCell);
if (targetCell) {
DomHandler.invokeElementMethod(targetCell, 'click');
invokeElementMethod(targetCell, 'click');
event.preventDefault();
}
},
@ -402,7 +404,7 @@ export default {
let targetCell = this.findNextEditableColumn(currentCell);
if (targetCell) {
DomHandler.invokeElementMethod(targetCell, 'click');
invokeElementMethod(targetCell, 'click');
event.preventDefault();
}
},
@ -410,7 +412,7 @@ export default {
if (element) {
let cell = element;
while (cell && !DomHandler.getAttribute(cell, 'data-p-cell-editing')) {
while (cell && !getAttribute(cell, 'data-p-cell-editing')) {
cell = cell.parentElement;
}
@ -431,7 +433,7 @@ export default {
}
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 null;
@ -449,7 +451,7 @@ export default {
}
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 null;
@ -488,19 +490,19 @@ export default {
if (align === 'right') {
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) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
right = getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
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) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
left = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
this.styleObject.left = left + 'px';

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

@ -94,7 +94,8 @@
<script>
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 ChevronRightIcon from '@primevue/icons/chevronright';
import { mergeProps } from 'vue';
@ -280,13 +281,13 @@ export default {
deep: true,
immediate: true,
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: {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
return getVNodeProp(col, prop);
},
//@todo - update this method
getColumnPT(key) {
@ -326,8 +327,8 @@ export default {
let prevRowData = this.value[this.rowIndex - 1];
if (prevRowData) {
const currentRowFieldData = ObjectUtils.resolveFieldData(this.value[this.rowIndex], field);
const previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, field);
const currentRowFieldData = resolveFieldData(this.value[this.rowIndex], field);
const previousRowFieldData = resolveFieldData(prevRowData, field);
return currentRowFieldData !== previousRowFieldData;
} else {
@ -345,7 +346,7 @@ export default {
if (this.isGrouped(column)) {
let index = this.rowIndex;
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 groupRowSpan = 0;
@ -354,7 +355,7 @@ export default {
let nextRowData = this.value[++index];
if (nextRowData) {
nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, field);
nextRowFieldData = resolveFieldData(nextRowData, field);
} else {
break;
}
@ -393,7 +394,7 @@ export default {
return index;
},
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) {
this.$emit('rowgroup-toggle', { originalEvent: event, data: this.rowData });
@ -494,7 +495,7 @@ export default {
for (let col of this.columns) {
let _selectionMode = this.columnProp(col, 'selectionMode');
if (ObjectUtils.isNotEmpty(_selectionMode) && _selectionMode === 'multiple') {
if (isNotEmpty(_selectionMode) && _selectionMode === 'multiple') {
columnSelectionMode = _selectionMode;
break;
}
@ -512,7 +513,7 @@ export default {
},
isRowEditing() {
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;
}
@ -520,7 +521,7 @@ export default {
},
isRowGroupExpanded() {
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;
}
@ -530,7 +531,7 @@ export default {
isSelected() {
if (this.rowData && this.selection) {
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 {
if (this.selection instanceof Array) return this.findIndexInSelection(this.rowData) > -1;
else return this.equals(this.rowData, this.selection);
@ -547,11 +548,11 @@ export default {
return false;
},
shouldRenderRowGroupHeader() {
const currentRowFieldData = ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy);
const currentRowFieldData = resolveFieldData(this.rowData, this.groupRowsBy);
const prevRowData = this.value[this.rowIndex - 1];
if (prevRowData) {
const previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
const previousRowFieldData = resolveFieldData(prevRowData, this.groupRowsBy);
return currentRowFieldData !== previousRowFieldData;
} else {
@ -562,11 +563,11 @@ export default {
if (this.expandableRowGroups && !this.isRowGroupExpanded) {
return false;
} else {
let currentRowFieldData = ObjectUtils.resolveFieldData(this.rowData, this.groupRowsBy);
let currentRowFieldData = resolveFieldData(this.rowData, this.groupRowsBy);
let nextRowData = this.value[this.rowIndex + 1];
if (nextRowData) {
let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
let nextRowFieldData = resolveFieldData(nextRowData, this.groupRowsBy);
return currentRowFieldData !== nextRowFieldData;
} else {

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

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

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

@ -281,7 +281,28 @@
<script>
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 ArrowUpIcon from '@primevue/icons/arrowup';
import SpinnerIcon from '@primevue/icons/spinner';
@ -451,7 +472,7 @@ export default {
},
methods: {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
return getVNodeProp(col, prop);
},
onPage(event) {
this.clearEditingMetaData();
@ -480,15 +501,15 @@ export default {
const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
if (
DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'columntitle' ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'columnheadercontent' ||
DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' ||
DomHandler.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))
getAttribute(targetNode, 'data-p-sortable-column') === true ||
getAttribute(targetNode, 'data-pc-section') === 'columntitle' ||
getAttribute(targetNode, 'data-pc-section') === 'columnheadercontent' ||
getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
getAttribute(targetNode.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"]') && !isClickable(event.target))
) {
DomHandler.clearSelection();
clearSelection();
if (this.sortMode === 'single') {
if (this.d_sortField === columnField) {
@ -540,16 +561,16 @@ export default {
let resolvedFieldData = new Map();
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) => {
let value1 = resolvedFieldData.get(data1);
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;
@ -576,15 +597,15 @@ export default {
return data;
},
multisortField(data1, data2, index) {
const value1 = ObjectUtils.resolveFieldData(data1, this.d_multiSortMeta[index].field);
const value2 = ObjectUtils.resolveFieldData(data2, this.d_multiSortMeta[index].field);
const comparer = ObjectUtils.localeComparator();
const value1 = resolveFieldData(data1, this.d_multiSortMeta[index].field);
const value2 = resolveFieldData(data2, this.d_multiSortMeta[index].field);
const comparer = localeComparator();
if (value1 === value2) {
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) {
let index = this.d_multiSortMeta.findIndex((meta) => meta.field === field);
@ -667,7 +688,7 @@ export default {
for (let j = 0; j < globalFilterFieldsArray.length; 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) {
break;
@ -705,7 +726,7 @@ export default {
executeLocalFilter(field, rowData, filterMeta) {
let filterValue = filterMeta.value;
let filterMatchMode = filterMeta.matchMode || FilterMatchMode.STARTS_WITH;
let dataFieldValue = ObjectUtils.resolveFieldData(rowData, field);
let dataFieldValue = resolveFieldData(rowData, field);
let filterConstraint = FilterService.filters[filterMatchMode];
return filterConstraint(dataFieldValue, filterValue, this.filterLocale);
@ -713,9 +734,9 @@ export default {
onRowClick(e) {
const event = e.originalEvent;
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;
}
@ -726,7 +747,7 @@ export default {
const rowIndex = this.d_first + e.index;
if (this.isMultipleSelectionMode() && event.shiftKey && this.anchorRowIndex != null) {
DomHandler.clearSelection();
clearSelection();
this.rangeRowIndex = rowIndex;
this.selectRange(event);
} else {
@ -803,7 +824,7 @@ export default {
onRowDblClick(e) {
const event = e.originalEvent;
if (DomHandler.isClickable(event.target)) {
if (isClickable(event.target)) {
return;
}
@ -811,7 +832,7 @@ export default {
},
onRowRightClick(event) {
if (this.contextMenu) {
DomHandler.clearSelection();
clearSelection();
event.originalEvent.target.focus();
}
@ -941,12 +962,12 @@ export default {
if (this.selection.length > 0) {
let firstSelectedRowIndex, lastSelectedRowIndex;
firstSelectedRowIndex = ObjectUtils.findIndexInList(this.selection[0], data);
lastSelectedRowIndex = ObjectUtils.findIndexInList(this.selection[this.selection.length - 1], data);
firstSelectedRowIndex = findIndexInList(this.selection[0], data);
lastSelectedRowIndex = findIndexInList(this.selection[this.selection.length - 1], data);
index = rowIndex <= firstSelectedRowIndex ? lastSelectedRowIndex : firstSelectedRowIndex;
} 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;
@ -956,11 +977,11 @@ export default {
},
onTabKey(event, rowIndex) {
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) {
const firstSelectedRow = DomHandler.findSingle(body, 'tr[data-p-selected="true"]');
const focusedItem = DomHandler.findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
const firstSelectedRow = findSingle(body, 'tr[data-p-selected="true"]');
const focusedItem = findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
if (firstSelectedRow) {
firstSelectedRow.tabIndex = '0';
@ -975,7 +996,7 @@ export default {
let nextRow = row.nextElementSibling;
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 null;
@ -985,26 +1006,26 @@ export default {
let prevRow = row.previousElementSibling;
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 null;
}
},
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;
},
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;
},
focusRowChange(firstFocusableRow, currentFocusedRow) {
firstFocusableRow.tabIndex = '-1';
currentFocusedRow.tabIndex = '0';
DomHandler.focus(currentFocusedRow);
focus(currentFocusedRow);
},
toggleRowWithRadio(event) {
const rowData = event.data;
@ -1060,7 +1081,7 @@ export default {
isSelected(rowData) {
if (rowData && this.selection) {
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 {
if (this.selection instanceof Array) return this.findIndexInSelection(rowData) > -1;
else return this.equals(rowData, this.selection);
@ -1091,10 +1112,10 @@ export default {
if (Array.isArray(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 {
this.d_selectionKeys[String(ObjectUtils.resolveFieldData(selection, this.dataKey))] = 1;
this.d_selectionKeys[String(resolveFieldData(selection, this.dataKey))] = 1;
}
},
updateEditingRowKeys(editingRows) {
@ -1102,14 +1123,14 @@ export default {
this.d_editingRowKeys = {};
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 {
this.d_editingRowKeys = null;
}
},
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) {
let rangeStart, rangeEnd;
@ -1179,7 +1200,7 @@ export default {
if (rowInitiated) csv += this.csvSeparator;
else rowInitiated = true;
let cellData = ObjectUtils.resolveFieldData(record, this.columnProp(column, 'field'));
let cellData = resolveFieldData(record, this.columnProp(column, 'field'));
if (cellData != null) {
if (this.exportFunction) {
@ -1212,14 +1233,14 @@ export default {
}
}
DomHandler.exportCSV(csv, this.exportFilename);
exportCSV(csv, this.exportFilename);
},
resetPage() {
this.d_first = 0;
this.$emit('update:first', this.d_first);
},
onColumnResizeStart(event) {
let containerLeft = DomHandler.getOffset(this.$el).left;
let containerLeft = getOffset(this.$el).left;
this.resizeColumnElement = event.target.parentElement;
this.columnResizing = true;
@ -1228,10 +1249,10 @@ export default {
this.bindColumnResizeEvents();
},
onColumnResize(event) {
let containerLeft = DomHandler.getOffset(this.$el).left;
let containerLeft = getOffset(this.$el).left;
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.top = 0 + 'px';
this.$refs.resizeHelper.style.left = event.pageX - containerLeft + this.$el.scrollLeft + 'px';
@ -1290,11 +1311,11 @@ export default {
}
},
resizeTableCells(newColumnWidth, nextColumnWidth) {
let colIndex = DomHandler.index(this.resizeColumnElement);
let colIndex = getIndex(this.resizeColumnElement);
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.createStyleElement();
@ -1351,7 +1372,7 @@ export default {
const column = e.column;
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;
}
},
@ -1364,8 +1385,8 @@ export default {
return;
}
this.colReorderIconWidth = DomHandler.getHiddenElementOuterWidth(this.$refs.reorderIndicatorUp);
this.colReorderIconHeight = DomHandler.getHiddenElementOuterHeight(this.$refs.reorderIndicatorUp);
this.colReorderIconWidth = getHiddenElementOuterWidth(this.$refs.reorderIndicatorUp);
this.colReorderIconHeight = getHiddenElementOuterHeight(this.$refs.reorderIndicatorUp);
this.draggedColumn = column;
this.draggedColumnElement = this.findParentHeader(event.target);
@ -1377,8 +1398,8 @@ export default {
if (this.reorderableColumns && this.draggedColumnElement && dropHeader && !this.columnProp(column, 'frozen')) {
event.preventDefault();
let containerOffset = DomHandler.getOffset(this.$el);
let dropHeaderOffset = DomHandler.getOffset(dropHeader);
let containerOffset = getOffset(this.$el);
let dropHeaderOffset = getOffset(dropHeader);
if (this.draggedColumnElement !== dropHeader) {
let targetLeft = dropHeaderOffset.left - containerOffset.left;
@ -1417,8 +1438,8 @@ export default {
event.preventDefault();
if (this.draggedColumnElement) {
let dragIndex = DomHandler.index(this.draggedColumnElement);
let dropIndex = DomHandler.index(this.findParentHeader(event.target));
let dragIndex = getIndex(this.draggedColumnElement);
let dropIndex = getIndex(this.findParentHeader(event.target));
let allowDrop = dragIndex !== dropIndex;
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 dropColIndex = this.columns.findIndex((child) => isSameColumn(child, column));
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 remainingItems = widths.filter((_, index) => index !== dragColIndex);
const reorderedWidths = [...remainingItems.slice(0, dropColIndex), movedItem, ...remainingItems.slice(dropColIndex)];
@ -1448,7 +1469,7 @@ export default {
dropColIndex--;
}
ObjectUtils.reorderArray(this.columns, dragColIndex, dropColIndex);
reorderArray(this.columns, dragColIndex, dropColIndex);
this.updateReorderableColumns();
this.$emit('column-reorder', {
@ -1494,7 +1515,7 @@ export default {
return null;
},
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;
},
onRowDragStart(e) {
@ -1511,36 +1532,36 @@ export default {
if (this.rowDragging && this.draggedRowIndex !== index) {
let rowElement = event.currentTarget;
let rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop();
let rowY = getOffset(rowElement).top + getWindowScrollTop();
let pageY = event.pageY;
let rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2;
let rowMidY = rowY + getOuterHeight(rowElement) / 2;
let prevRowElement = rowElement.previousElementSibling;
if (pageY < rowMidY) {
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;
if (prevRowElement) {
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 {
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 {
if (prevRowElement) {
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 {
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;
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();
@ -1552,13 +1573,13 @@ export default {
if (prevRowElement) {
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');
!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');
!this.isUnstyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
!this.isUnstyled && removeClass(rowElement, 'p-datatable-dragpoint-top');
},
onRowDragEnd(event) {
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 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', {
originalEvent: event,
@ -1592,7 +1613,7 @@ export default {
let expandedRows;
if (this.dataKey) {
const value = ObjectUtils.resolveFieldData(rowData, this.dataKey);
const value = resolveFieldData(rowData, this.dataKey);
expandedRows = this.expandedRows ? { ...this.expandedRows } : {};
expanded ? (expandedRows[value] = true) : delete expandedRows[value];
@ -1607,7 +1628,7 @@ export default {
toggleRowGroup(e) {
const event = e.originalEvent;
const data = e.data;
const groupFieldValue = ObjectUtils.resolveFieldData(data, this.groupRowsBy);
const groupFieldValue = resolveFieldData(data, this.groupRowsBy);
let _expandedRowGroups = this.expandedRowGroups ? [...this.expandedRowGroups] : [];
if (this.isRowGroupExpanded(data)) {
@ -1622,7 +1643,7 @@ export default {
},
isRowGroupExpanded(rowData) {
if (this.expandableRowGroups && this.expandedRowGroups) {
let groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
let groupFieldValue = resolveFieldData(rowData, this.groupRowsBy);
return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
}
@ -1754,13 +1775,13 @@ export default {
},
saveColumnWidths(state) {
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(',');
if (this.columnResizeMode === 'expand') {
state.tableWidth = DomHandler.getOuterWidth(this.$refs.table) + 'px';
state.tableWidth = getOuterWidth(this.$refs.table) + 'px';
}
},
addColumnWidthStyles(widths) {
@ -1792,7 +1813,7 @@ export default {
this.$refs.table.style.minWidth = this.tableWidthState;
}
if (ObjectUtils.isNotEmpty(widths)) {
if (isNotEmpty(widths)) {
this.addColumnWidthStyles(widths);
}
}
@ -1901,7 +1922,7 @@ export default {
createStyleElement() {
this.styleElement = document.createElement('style');
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);
},
destroyStyleElement() {
@ -1925,7 +1946,7 @@ export default {
return this.$refs.virtualScroller;
},
hasSpacerStyle(style) {
return ObjectUtils.isNotEmpty(style);
return isNotEmpty(style);
}
},
computed: {
@ -2007,7 +2028,7 @@ export default {
} else {
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() {
@ -2044,7 +2065,7 @@ export default {
};
},
virtualScrollerDisabled() {
return ObjectUtils.isEmpty(this.virtualScrollerOptions) || !this.scrollable;
return isEmpty(this.virtualScrollerOptions) || !this.scrollable;
}
},
components: {

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

@ -7,7 +7,8 @@
<script>
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';
export default {
@ -41,7 +42,7 @@ export default {
},
methods: {
columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop);
return getVNodeProp(this.column, prop);
},
getColumnPT(key) {
const columnMetaData = {
@ -69,19 +70,19 @@ export default {
if (align === 'right') {
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) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
right = getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
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) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
left = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
this.styleObject.left = left + 'px';

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

@ -85,7 +85,8 @@
<script>
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 SortAmountDownIcon from '@primevue/icons/sortamountdown';
import SortAmountUpAltIcon from '@primevue/icons/sortamountupalt';
@ -207,7 +208,7 @@ export default {
},
methods: {
columnProp(prop) {
return ObjectUtils.getVNodeProp(this.column, prop);
return getVNodeProp(this.column, prop);
},
getColumnPT(key) {
const columnMetaData = {
@ -236,7 +237,7 @@ export default {
this.$emit('column-click', { originalEvent: event, column: this.column });
},
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 });
event.preventDefault();
}
@ -279,19 +280,19 @@ export default {
if (align === 'right') {
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) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
right = getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
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) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
left = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
this.styleObject.left = left + 'px';
@ -300,7 +301,7 @@ export default {
let filterRow = this.$el.parentElement.nextElementSibling;
if (filterRow) {
let index = DomHandler.index(this.$el);
let index = getIndex(this.$el);
if (filterRow.children[index]) {
filterRow.children[index].style.left = this.styleObject.left;

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

@ -71,7 +71,9 @@
<script>
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';
export default {
@ -249,13 +251,13 @@ export default {
},
methods: {
getRowKey(rowData, rowIndex) {
return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey) : rowIndex;
return this.dataKey ? resolveFieldData(rowData, this.dataKey) : rowIndex;
},
updateFrozenRowStickyPosition() {
this.$el.style.top = DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
this.$el.style.top = getOuterHeight(this.$el.previousElementSibling) + 'px';
},
updateFrozenRowGroupHeaderStickyPosition() {
let tableHeaderHeight = DomHandler.getOuterHeight(this.$el.previousElementSibling);
let tableHeaderHeight = getOuterHeight(this.$el.previousElementSibling);
this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px';
},

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

@ -17,7 +17,7 @@
<script>
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 FooterCell from './FooterCell.vue';
@ -53,7 +53,7 @@ export default {
},
methods: {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
return getVNodeProp(col, prop);
},
getColumnGroupPT(key) {
const columnGroupMetaData = {

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

@ -133,7 +133,7 @@
<script>
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 ColumnFilter from './ColumnFilter.vue';
import HeaderCell from './HeaderCell.vue';
@ -257,7 +257,7 @@ export default {
},
methods: {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
return getVNodeProp(col, prop);
},
getColumnGroupPT(key) {
const columnGroupMetaData = {

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

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

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

@ -530,7 +530,10 @@
</template>
<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 ChevronDownIcon from '@primevue/icons/chevrondown';
import ChevronLeftIcon from '@primevue/icons/chevronleft';
@ -674,7 +677,7 @@ export default {
}
if (this.overlay && this.autoZIndex) {
ZIndexUtils.clear(this.overlay);
ZIndex.clear(this.overlay);
}
this.overlay = null;
@ -863,10 +866,10 @@ export default {
el.setAttribute(this.attributeSelector, '');
const styles = !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
DomHandler.addStyles(el, styles);
addStyle(el, styles);
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();
@ -879,7 +882,7 @@ export default {
},
onOverlayAfterLeave(el) {
if (this.autoZIndex) {
ZIndexUtils.clear(el);
ZIndex.clear(el);
}
},
onOverlayLeave() {
@ -1032,7 +1035,7 @@ export default {
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) {
if (this.overlayVisible && !isTouchDevice()) {
this.overlayVisible = false;
}
};
@ -1076,16 +1079,16 @@ export default {
alignOverlay() {
if (this.overlay) {
if (this.appendTo === 'self' || this.inline) {
DomHandler.relativePosition(this.overlay, this.$el);
relativePosition(this.overlay, this.$el);
} else {
if (this.view === 'date') {
this.overlay.style.width = DomHandler.getOuterWidth(this.overlay) + 'px';
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
this.overlay.style.width = getOuterWidth(this.overlay) + 'px';
this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';
} 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;
}
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) {
event.currentTarget.focus();
@ -2007,7 +2010,7 @@ export default {
const cellContent = event.currentTarget;
const cell = cellContent.parentElement;
const cellIndex = DomHandler.index(cell);
const cellIndex = getIndex(cell);
switch (event.code) {
case 'ArrowDown': {
@ -2016,14 +2019,14 @@ export default {
let nextRow = cell.parentElement.nextElementSibling;
if (nextRow) {
let tableRowIndex = DomHandler.index(cell.parentElement);
let tableRowIndex = getIndex(cell.parentElement);
const tableRows = Array.from(cell.parentElement.parentElement.children);
const nextTableRows = tableRows.slice(tableRowIndex + 1);
let hasNextFocusableDate = nextTableRows.find((el) => {
let focusCell = el.children[cellIndex].children[0];
return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
return !getAttribute(focusCell, 'data-p-disabled');
});
if (hasNextFocusableDate) {
@ -2054,14 +2057,14 @@ export default {
let prevRow = cell.parentElement.previousElementSibling;
if (prevRow) {
let tableRowIndex = DomHandler.index(cell.parentElement);
let tableRowIndex = getIndex(cell.parentElement);
const tableRows = Array.from(cell.parentElement.parentElement.children);
const prevTableRows = tableRows.slice(0, tableRowIndex).reverse();
let hasNextFocusableDate = prevTableRows.find((el) => {
let focusCell = el.children[cellIndex].children[0];
return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
return !getAttribute(focusCell, 'data-p-disabled');
});
if (hasNextFocusableDate) {
@ -2094,7 +2097,7 @@ export default {
let hasNextFocusableDate = prevCells.find((el) => {
let focusCell = el.children[0];
return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
return !getAttribute(focusCell, 'data-p-disabled');
});
if (hasNextFocusableDate) {
@ -2123,7 +2126,7 @@ export default {
let hasNextFocusableDate = nextCells.find((el) => {
let focusCell = el.children[0];
return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
return !getAttribute(focusCell, 'data-p-disabled');
});
if (hasNextFocusableDate) {
@ -2170,7 +2173,7 @@ export default {
let currentRow = cell.parentElement;
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);
} else {
focusCell.tabIndex = '0';
@ -2186,7 +2189,7 @@ export default {
let currentRow = cell.parentElement;
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);
} else {
focusCell.tabIndex = '0';
@ -2231,7 +2234,7 @@ export default {
this.navBackward(event);
} else {
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];
focusCell.tabIndex = '0';
@ -2243,7 +2246,7 @@ export default {
this.navForward(event);
} else {
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.focus();
@ -2259,7 +2262,7 @@ export default {
case 'ArrowDown': {
cell.tabIndex = '-1';
var cells = cell.parentElement.children;
var cellIndex = DomHandler.index(cell);
var cellIndex = getIndex(cell);
let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 3 : cellIndex - 3];
if (nextCell) {
@ -2353,7 +2356,7 @@ export default {
case 'ArrowDown': {
cell.tabIndex = '-1';
var cells = cell.parentElement.children;
var cellIndex = DomHandler.index(cell);
var cellIndex = getIndex(cell);
let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
if (nextCell) {
@ -2452,11 +2455,11 @@ export default {
let cells;
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') {
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 {
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) {
@ -2464,11 +2467,11 @@ export default {
}
} else {
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') {
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 {
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;
if (this.currentView === 'month') {
let cells = DomHandler.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 cells = find(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"]');
let selectedCell = findSingle(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"][data-p-selected="true"]');
cells.forEach((cell) => (cell.tabIndex = -1));
cell = selectedCell || cells[0];
} else if (this.currentView === 'year') {
let cells = DomHandler.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 cells = find(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"]');
let selectedCell = findSingle(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"][data-p-selected="true"]');
cells.forEach((cell) => (cell.tabIndex = -1));
cell = selectedCell || cells[0];
} else {
cell = DomHandler.findSingle(this.overlay, 'span[data-p-selected="true"]');
cell = findSingle(this.overlay, 'span[data-p-selected="true"]');
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;
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) {
event.preventDefault();
let focusableElements = DomHandler.getFocusableElements(this.overlay);
let focusableElements = getFocusableElements(this.overlay);
if (focusableElements && focusableElements.length > 0) {
if (!document.activeElement) {
@ -2613,7 +2616,7 @@ export default {
}
} else if (event.code === 'Tab') {
if (this.overlay) {
DomHandler.getFocusableElements(this.overlay).forEach((el) => (el.tabIndex = '-1'));
getFocusableElements(this.overlay).forEach((el) => (el.tabIndex = '-1'));
}
if (this.overlayVisible) {
@ -2681,14 +2684,14 @@ export default {
if (!this.responsiveStyleElement) {
this.responsiveStyleElement = document.createElement('style');
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);
}
let innerHTML = '';
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));
for (let i = 0; i < responsiveOptions.length; i++) {

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

@ -62,7 +62,9 @@
</template>
<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 WindowMaximizeIcon from '@primevue/icons/windowmaximize';
import WindowMinimizeIcon from '@primevue/icons/windowminimize';
@ -122,7 +124,7 @@ export default {
this.destroyStyle();
if (this.mask && this.autoZIndex) {
ZIndexUtils.clear(this.mask);
ZIndex.clear(this.mask);
}
this.container = null;
@ -149,12 +151,12 @@ export default {
this.bindGlobalListeners();
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() {
if (this.modal) {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave');
!this.isUnstyled && addClass(this.mask, 'p-overlay-mask-leave');
}
},
onLeave() {
@ -164,7 +166,7 @@ export default {
},
onAfterLeave() {
if (this.autoZIndex) {
ZIndexUtils.clear(this.mask);
ZIndex.clear(this.mask);
}
this.containerVisible = false;
@ -203,7 +205,7 @@ export default {
}
if (focusTarget) {
DomHandler.focus(focusTarget, { focusVisible: true });
focus(focusTarget, { focusVisible: true });
}
},
maximize(event) {
@ -216,17 +218,17 @@ export default {
}
if (!this.modal) {
this.maximized ? DomHandler.blockBodyScroll() : DomHandler.unblockBodyScroll();
this.maximized ? blockBodyScroll() : unblockBodyScroll();
}
},
enableDocumentSettings() {
if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
DomHandler.blockBodyScroll();
blockBodyScroll();
}
},
unbindDocumentState() {
if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
DomHandler.unblockBodyScroll();
unblockBodyScroll();
}
},
onKeyDown(event) {
@ -271,7 +273,7 @@ export default {
if (!this.styleElement && !this.isUnstyled) {
this.styleElement = document.createElement('style');
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);
let innerHTML = '';
@ -307,7 +309,7 @@ export default {
this.container.style.margin = '0';
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() {
@ -328,14 +330,14 @@ export default {
bindDocumentDragListener() {
this.documentDragListener = (event) => {
if (this.dragging) {
let width = DomHandler.getOuterWidth(this.container);
let height = DomHandler.getOuterHeight(this.container);
let width = getOuterWidth(this.container);
let height = getOuterHeight(this.container);
let deltaX = event.pageX - this.lastPageX;
let deltaY = event.pageY - this.lastPageY;
let offset = this.container.getBoundingClientRect();
let leftPos = offset.left + deltaX;
let topPos = offset.top + deltaY;
let viewport = DomHandler.getViewport();
let viewport = getViewport();
let containerComputedStyle = getComputedStyle(this.container);
let marginLeft = parseFloat(containerComputedStyle.marginLeft);
let marginTop = parseFloat(containerComputedStyle.marginTop);

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

@ -57,7 +57,9 @@
<script>
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 Tooltip from 'primevue/tooltip';
import { mergeProps } from 'vue';
@ -119,7 +121,7 @@ export default {
return `${this.id}_${index}`;
},
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) {
return this.ptm(key, {
@ -224,28 +226,28 @@ export default {
this.changeFocusedOptionIndex(0);
},
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() {
const element = DomHandler.findSingle(this.$refs.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="itemlink"]');
const element = findSingle(this.$refs.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
const anchorElement = element && findSingle(element, '[data-pc-section="itemlink"]');
anchorElement ? anchorElement.click() : element && element.click();
},
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);
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
},
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);
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
},
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;

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 PrimeVue from 'primevue/config';
import { describe, expect, it } from 'vitest';
import DomHandler from '../utils/DomHandler';
import Drawer from './Drawer.vue';
describe('Drawer.vue', () => {
@ -89,7 +89,7 @@ describe('Drawer.vue', () => {
});
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 });
wrapper.vm.disableDocumentSettings();
@ -98,7 +98,7 @@ describe('Drawer.vue', () => {
});
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 });
wrapper.vm.enableDocumentSettings();
@ -107,7 +107,7 @@ describe('Drawer.vue', () => {
});
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 });
wrapper.vm.onBeforeLeave();

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

@ -42,7 +42,8 @@
</template>
<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 Button from 'primevue/button';
import FocusTrap from 'primevue/focustrap';
@ -76,7 +77,7 @@ export default {
this.disableDocumentSettings();
if (this.mask && this.autoZIndex) {
ZIndexUtils.clear(this.mask);
ZIndex.clear(this.mask);
}
this.container = null;
@ -92,7 +93,7 @@ export default {
this.bindDocumentKeyDownListener();
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() {
@ -100,7 +101,7 @@ export default {
},
onBeforeLeave() {
if (this.modal) {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave');
!this.isUnstyled && addClass(this.mask, 'p-overlay-mask-leave');
}
},
onLeave() {
@ -108,7 +109,7 @@ export default {
},
onAfterLeave() {
if (this.autoZIndex) {
ZIndexUtils.clear(this.mask);
ZIndex.clear(this.mask);
}
this.unbindDocumentKeyDownListener();
@ -140,7 +141,7 @@ export default {
}
}
focusTarget && DomHandler.focus(focusTarget);
focusTarget && focus(focusTarget);
},
enableDocumentSettings() {
if (this.dismissable && !this.modal) {
@ -148,14 +149,14 @@ export default {
}
if (this.blockScroll) {
DomHandler.blockBodyScroll();
blockBodyScroll();
}
},
disableDocumentSettings() {
this.unbindOutsideClickListener();
if (this.blockScroll) {
DomHandler.unblockBodyScroll();
unblockBodyScroll();
}
},
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();

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

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

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

@ -76,7 +76,7 @@
</template>
<script>
import { DomHandler } from '@primevue/core/utils';
import { addClass, removeClass } from '@primeuix/utils/dom';
import PlusIcon from '@primevue/icons/plus';
import TimesIcon from '@primevue/icons/times';
import UploadIcon from '@primevue/icons/upload';
@ -296,7 +296,7 @@ export default {
},
onDragOver(event) {
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);
event.stopPropagation();
event.preventDefault();
@ -304,13 +304,13 @@ export default {
},
onDragLeave() {
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);
}
},
onDrop(event) {
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);
event.stopPropagation();
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';
const FocusTrap = BaseFocusTrap.extend('focustrap', {
@ -34,16 +35,16 @@ const FocusTrap = BaseFocusTrap.extend('focustrap', {
mutationList.forEach((mutation) => {
if (mutation.type === 'childList' && !el.contains(document.activeElement)) {
const findNextFocusableElement = (_el) => {
const focusableElement = DomHandler.isFocusableElement(_el)
? DomHandler.isFocusableElement(_el, this.getComputedSelector(el.$_pfocustrap_focusableselector))
const focusableElement = isFocusableElement(_el)
? isFocusableElement(_el, this.getComputedSelector(el.$_pfocustrap_focusableselector))
? _el
: DomHandler.getFirstFocusableElement(el, this.getComputedSelector(el.$_pfocustrap_focusableselector))
: DomHandler.getFirstFocusableElement(_el);
: getFirstFocusableElement(el, this.getComputedSelector(el.$_pfocustrap_focusableselector))
: 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) {
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)));
DomHandler.focus(focusableElement);
autoFocus && !focusableElement && (focusableElement = getFirstFocusableElement(el, this.getComputedSelector(firstFocusableSelector)));
focus(focusableElement);
},
onFirstHiddenElementFocus(event) {
const { currentTarget, relatedTarget } = event;
const focusableElement =
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;
DomHandler.focus(focusableElement);
focus(focusableElement);
},
onLastHiddenElementFocus(event) {
const { currentTarget, relatedTarget } = event;
const focusableElement =
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;
DomHandler.focus(focusableElement);
focus(focusableElement);
},
createHiddenFocusableElements(el, binding) {
const { tabIndex = 0, firstFocusableSelector = '', lastFocusableSelector = '' } = binding.value || {};
const createFocusableElement = (onFocus) => {
return DomHandler.createElement('span', {
return createElement('span', {
class: 'p-hidden-accessible p-hidden-focusable',
tabIndex,
role: 'presentation',

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

@ -10,7 +10,8 @@
</template>
<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 Portal from 'primevue/portal';
import BaseGalleria from './BaseGalleria.vue';
@ -35,32 +36,32 @@ export default {
},
beforeUnmount() {
if (this.fullScreen) {
DomHandler.unblockBodyScroll();
unblockBodyScroll();
}
this.mask = null;
if (this.container) {
ZIndexUtils.clear(this.container);
ZIndex.clear(this.container);
this.container = null;
}
},
methods: {
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) {
this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
DomHandler.blockBodyScroll();
blockBodyScroll();
this.focus();
},
onBeforeLeave() {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave');
!this.isUnstyled && addClass(this.mask, 'p-overlay-mask-leave');
},
onAfterLeave(el) {
ZIndexUtils.clear(el);
ZIndex.clear(el);
this.containerVisible = false;
DomHandler.unblockBodyScroll();
unblockBodyScroll();
},
onActiveItemChange(index) {
if (this.activeIndex !== index) {

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

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

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

@ -71,8 +71,9 @@
</template>
<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 { DomHandler, ObjectUtils } from '@primevue/core/utils';
import ChevronDownIcon from '@primevue/icons/chevrondown';
import ChevronLeftIcon from '@primevue/icons/chevronleft';
import ChevronRightIcon from '@primevue/icons/chevronright';
@ -191,7 +192,7 @@ export default {
if (this.d_oldActiveItemIndex !== this.d_activeIndex) {
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';
}
@ -228,7 +229,7 @@ export default {
if (this.$refs.itemsContainer) {
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.transition = 'transform 500ms ease 0s';
}
@ -345,7 +346,7 @@ export default {
}
},
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();
this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
@ -361,16 +362,16 @@ export default {
this.changedFocusedIndicator(activeIndex, 0);
},
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();
this.changedFocusedIndicator(activeIndex, indicators.length - 1);
},
onTabKey() {
const indicators = [...DomHandler.find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]')];
const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-active') === true);
const indicators = [...find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]')];
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);
@ -378,13 +379,13 @@ export default {
indicators[highlightedIndex].children[0].tabIndex = '0';
},
findFocusedIndicatorIndex() {
const indicators = [...DomHandler.find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]')];
const activeIndicator = DomHandler.findSingle(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"] > [tabindex="0"]');
const indicators = [...find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]')];
const activeIndicator = findSingle(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"] > [tabindex="0"]');
return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
},
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[nextInd].children[0].tabIndex = '0';
@ -393,7 +394,7 @@ export default {
onTransitionEnd(e) {
if (this.$refs.itemsContainer && e.propertyName === 'transform') {
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 = '';
}
},
@ -435,7 +436,7 @@ export default {
if (!this.thumbnailsStyle) {
this.thumbnailsStyle = document.createElement('style');
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);
}
@ -447,13 +448,13 @@ export default {
if (this.responsiveOptions && !this.isUnstyled) {
this.sortedResponsiveOptions = [...this.responsiveOptions];
const comparer = ObjectUtils.localeComparator();
const comparer = localeComparator();
this.sortedResponsiveOptions.sort((data1, data2) => {
const value1 = data1.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++) {

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

@ -56,7 +56,8 @@
</template>
<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 RefreshIcon from '@primevue/icons/refresh';
import SearchMinusIcon from '@primevue/icons/searchminus';
@ -83,7 +84,7 @@ export default {
},
beforeUnmount() {
if (this.mask) {
ZIndexUtils.clear(this.container);
ZIndex.clear(this.container);
}
},
methods: {
@ -95,7 +96,7 @@ export default {
},
onImageClick() {
if (this.preview) {
DomHandler.blockBodyScroll();
blockBodyScroll();
this.maskVisible = true;
setTimeout(() => {
this.previewVisible = true;
@ -106,7 +107,7 @@ export default {
this.previewClick = true;
},
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) {
this.previewVisible = false;
@ -121,7 +122,7 @@ export default {
case 'Escape':
this.hidePreview();
setTimeout(() => {
DomHandler.focus(this.$refs.previewButton);
focus(this.$refs.previewButton);
}, 200);
event.preventDefault();
@ -151,21 +152,21 @@ export default {
this.previewClick = true;
},
onBeforeEnter() {
ZIndexUtils.set('modal', this.mask, this.$primevue.config.zIndex.modal);
ZIndex.set('modal', this.mask, this.$primevue.config.zIndex.modal);
},
onEnter() {
this.focus();
this.$emit('show');
},
onBeforeLeave() {
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-overlay-mask-leave');
!this.isUnstyled && addClass(this.mask, 'p-overlay-mask-leave');
},
onLeave() {
DomHandler.unblockBodyScroll();
unblockBodyScroll();
this.$emit('hide');
},
onAfterLeave(el) {
ZIndexUtils.clear(el);
ZIndex.clear(el);
this.maskVisible = false;
},
focus() {
@ -179,7 +180,7 @@ export default {
this.previewVisible = false;
this.rotate = 0;
this.scale = 1;
DomHandler.unblockBodyScroll();
unblockBodyScroll();
}
},
computed: {

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

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

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

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

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

@ -133,7 +133,9 @@
<script>
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 CheckIcon from '@primevue/icons/check';
import SearchIcon from '@primevue/icons/search';
@ -180,13 +182,13 @@ export default {
return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
},
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) {
return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option;
return this.optionValue ? resolveFieldData(option, this.optionValue) : option;
},
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) {
return this.ptm(key, {
@ -198,38 +200,38 @@ export default {
});
},
isOptionDisabled(option) {
return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
},
isOptionGroup(option) {
return this.optionGroupLabel && option.optionGroup && option.group;
},
getOptionGroupLabel(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel);
return resolveFieldData(optionGroup, this.optionGroupLabel);
},
getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren);
return resolveFieldData(optionGroup, this.optionGroupChildren);
},
getAriaPosInset(index) {
return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;
},
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;
},
onLastHiddenFocus(event) {
const relatedTarget = event.relatedTarget;
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;
} else {
DomHandler.focus(this.$refs.firstHiddenFocusableElement);
focus(this.$refs.firstHiddenFocusableElement);
}
this.$refs.lastHiddenFocusableElement.tabIndex = -1;
@ -304,7 +306,7 @@ export default {
break;
}
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
if (!metaKey && isPrintableCharacter(event.key)) {
this.searchOptions(event, event.key);
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));
},
isValidOption(option) {
return ObjectUtils.isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
return isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
},
isValidSelectedOption(option) {
return this.isValidOption(option) && this.isSelected(option);
},
isEquals(value1, value2) {
return ObjectUtils.equals(value1, value2, this.equalityKey);
return equals(value1, value2, this.equalityKey);
},
isSelected(option) {
const optionValue = this.getOptionValue(option);
@ -566,7 +568,7 @@ export default {
return this.visibleOptions.findIndex((option) => this.isValidOption(option));
},
findLastOptionIndex() {
return ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
return findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
},
findNextOptionIndex(index) {
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;
},
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;
},
@ -598,7 +600,7 @@ export default {
return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
},
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) {
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;
},
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;
},
@ -640,7 +642,7 @@ export default {
let optionIndex = -1;
if (ObjectUtils.isNotEmpty(this.searchValue)) {
if (isNotEmpty(this.searchValue)) {
if (this.focusedOptionIndex !== -1) {
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;
@ -667,7 +669,7 @@ export default {
}, 500);
},
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) {
if (this.focusedOptionIndex !== index) {
@ -682,7 +684,7 @@ export default {
scrollInView(index = -1) {
this.$nextTick(() => {
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) {
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;
},
hasSelectedOption() {
return ObjectUtils.isNotEmpty(this.modelValue);
return isNotEmpty(this.modelValue);
},
equalityKey() {
return this.optionValue ? null : this.dataKey;
@ -736,7 +738,7 @@ export default {
return this.filterFields || [this.optionLabel];
},
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() {
return this.filterMessage || this.$primevue.config.locale.searchMessage || '';

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

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

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

@ -75,7 +75,7 @@
<script>
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 AngleRightIcon from '@primevue/icons/angleright';
import Ripple from 'primevue/ripple';
@ -142,7 +142,7 @@ export default {
return this.getItemId(processedItem);
},
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) {
return this.getItemProp(processedItem, 'label');
@ -159,7 +159,7 @@ export default {
});
},
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) {
return this.getItemProp(processedItem, 'visible') !== false;
@ -171,7 +171,7 @@ export default {
return this.focusedItemId === this.getItemId(processedItem);
},
isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items);
return isNotEmpty(processedItem.items);
},
onItemClick(event, processedItem) {
this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });

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

@ -65,7 +65,9 @@
</template>
<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 Portal from 'primevue/portal';
import BaseMenu from './BaseMenu.vue';
@ -116,7 +118,7 @@ export default {
this.target = null;
if (this.container && this.autoZIndex) {
ZIndexUtils.clear(this.container);
ZIndex.clear(this.container);
}
this.container = null;
@ -184,7 +186,7 @@ export default {
case 'Escape':
if (this.popup) {
DomHandler.focus(this.target);
focus(this.target);
this.hide();
}
@ -204,7 +206,7 @@ export default {
},
onArrowUpKey(event) {
if (event.altKey && this.popup) {
DomHandler.focus(this.target);
focus(this.target);
this.hide();
event.preventDefault();
} else {
@ -219,14 +221,14 @@ export default {
event.preventDefault();
},
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();
},
onEnterKey(event) {
const element = DomHandler.findSingle(this.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="itemlink"]');
const element = findSingle(this.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
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();
event.preventDefault();
@ -235,19 +237,19 @@ export default {
this.onEnterKey(event);
},
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);
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
},
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);
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
},
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;
order > -1 && (this.focusedOptionIndex = links[order].getAttribute('id'));
@ -265,18 +267,18 @@ export default {
this.target = null;
},
onEnter(el) {
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
addStyle(el, { position: 'absolute', top: '0', left: '0' });
this.alignOverlay();
this.bindOutsideClickListener();
this.bindResizeListener();
this.bindScrollListener();
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) {
DomHandler.focus(this.list);
focus(this.list);
}
this.$emit('show');
@ -289,15 +291,15 @@ export default {
},
onAfterLeave(el) {
if (this.autoZIndex) {
ZIndexUtils.clear(el);
ZIndex.clear(el);
}
},
alignOverlay() {
DomHandler.absolutePosition(this.container, this.target);
const targetWidth = DomHandler.getOuterWidth(this.target);
absolutePosition(this.container, this.target);
const targetWidth = getOuterWidth(this.target);
if (targetWidth > DomHandler.getOuterWidth(this.container)) {
this.container.style.minWidth = DomHandler.getOuterWidth(this.target) + 'px';
if (targetWidth > getOuterWidth(this.container)) {
this.container.style.minWidth = getOuterWidth(this.target) + 'px';
}
},
bindOutsideClickListener() {
@ -341,7 +343,7 @@ export default {
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) {
if (this.overlayVisible && !isTouchDevice()) {
this.hide();
}
};

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

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

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

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

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

@ -73,7 +73,7 @@
<script>
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 AngleRightIcon from '@primevue/icons/angleright';
import Ripple from 'primevue/ripple';
@ -131,7 +131,7 @@ export default {
return this.getItemId(processedItem);
},
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) {
return this.getItemProp(processedItem, 'label');
@ -164,7 +164,7 @@ export default {
return this.focusedItemId === this.getItemId(processedItem);
},
isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items);
return isNotEmpty(processedItem.items);
},
onItemClick(event, processedItem) {
this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });

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

@ -206,7 +206,10 @@
<script>
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 ChevronDownIcon from '@primevue/icons/chevrondown';
import SearchIcon from '@primevue/icons/search';
@ -270,7 +273,7 @@ export default {
}
if (this.overlay) {
ZIndexUtils.clear(this.overlay);
ZIndex.clear(this.overlay);
this.overlay = null;
}
},
@ -279,13 +282,13 @@ export default {
return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
},
getOptionLabel(option) {
return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;
},
getOptionValue(option) {
return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option;
return this.optionValue ? resolveFieldData(option, this.optionValue) : option;
},
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) {
return this.ptm(key, {
@ -308,16 +311,16 @@ export default {
return true;
}
return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
},
isOptionGroup(option) {
return this.optionGroupLabel && option.optionGroup && option.group;
},
getOptionGroupLabel(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel);
return resolveFieldData(optionGroup, this.optionGroupLabel);
},
getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren);
return resolveFieldData(optionGroup, this.optionGroupChildren);
},
getAriaPosInset(index) {
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.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) {
const _hide = () => {
@ -338,7 +341,7 @@ export default {
this.searchValue = '';
this.resetFilterOnHide && (this.filterValue = null);
isFocus && DomHandler.focus(this.$refs.focusInput);
isFocus && focus(this.$refs.focusInput);
};
setTimeout(() => {
@ -430,7 +433,7 @@ export default {
break;
}
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
if (!metaKey && isPrintableCharacter(event.key)) {
!this.overlayVisible && this.show();
this.searchOptions(event);
event.preventDefault();
@ -453,14 +456,14 @@ export default {
this.clicked = true;
},
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) {
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) {
if (this.disabled || this.isOptionDisabled(option)) {
@ -470,12 +473,12 @@ export default {
let selected = this.isSelected(option);
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)];
this.updateModel(event, value);
index !== -1 && (this.focusedOptionIndex = index);
isFocus && DomHandler.focus(this.$refs.focusInput);
isFocus && focus(this.$refs.focusInput);
},
onOptionMouseMove(event, index) {
if (this.focusOnHover) {
@ -689,7 +692,7 @@ export default {
onTabKey(event, pressedInInputText = false) {
if (!pressedInInputText) {
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();
} else {
@ -705,13 +708,13 @@ export default {
this.startRangeIndex = this.focusedOptionIndex;
},
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.scrollInView();
this.autoFilterFocus && DomHandler.focus(this.$refs.filterInput.$el);
this.autoFilterFocus && focus(this.$refs.filterInput.$el);
},
onOverlayAfterEnter() {
this.bindOutsideClickListener();
@ -729,14 +732,14 @@ export default {
this.overlay = null;
},
onOverlayAfterLeave(el) {
ZIndexUtils.clear(el);
ZIndex.clear(el);
},
alignOverlay() {
if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, this.$el);
relativePosition(this.overlay, this.$el);
} else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';
absolutePosition(this.overlay, this.$el);
}
},
bindOutsideClickListener() {
@ -775,7 +778,7 @@ export default {
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) {
if (this.overlayVisible && !isTouchDevice()) {
this.hide();
}
};
@ -794,7 +797,7 @@ export default {
},
getLabelByValue(value) {
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;
},
@ -819,7 +822,7 @@ export default {
},
removeOption(event, optionValue) {
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);
},
@ -827,19 +830,19 @@ export default {
this.filterValue = null;
},
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) {
return this.isValidOption(option) && typeof this.getOptionLabel(option) === 'string' && this.getOptionLabel(option)?.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));
},
isValidOption(option) {
return ObjectUtils.isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
return isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
},
isValidSelectedOption(option) {
return this.isValidOption(option) && this.isSelected(option);
},
isEquals(value1, value2) {
return ObjectUtils.equals(value1, value2, this.equalityKey);
return equals(value1, value2, this.equalityKey);
},
isSelected(option) {
const optionValue = this.getOptionValue(option);
@ -850,7 +853,7 @@ export default {
return this.visibleOptions.findIndex((option) => this.isValidOption(option));
},
findLastOptionIndex() {
return ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
return findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
},
findNextOptionIndex(index) {
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;
},
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;
},
@ -878,7 +881,7 @@ export default {
return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
},
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) {
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;
},
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;
},
@ -920,7 +923,7 @@ export default {
let optionIndex = -1;
if (ObjectUtils.isNotEmpty(this.searchValue)) {
if (isNotEmpty(this.searchValue)) {
if (this.focusedOptionIndex !== -1) {
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;
@ -959,7 +962,7 @@ export default {
scrollInView(index = -1) {
this.$nextTick(() => {
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) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
@ -1033,7 +1036,7 @@ export default {
let label;
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();
} else {
label = '';
@ -1053,13 +1056,13 @@ export default {
return label;
},
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() {
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() {
return ObjectUtils.isNotEmpty(this.modelValue);
return isNotEmpty(this.modelValue);
},
equalityKey() {
return this.optionValue ? null : this.dataKey;
@ -1071,7 +1074,7 @@ export default {
return this.selectionLimit && this.modelValue && this.modelValue.length === this.selectionLimit;
},
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() {
return this.filterMessage || this.$primevue.config.locale.searchMessage || '';

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

@ -67,7 +67,9 @@
</template>
<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 AngleDoubleUpIcon from '@primevue/icons/angledoubleup';
import AngleDownIcon from '@primevue/icons/angledown';
@ -145,7 +147,7 @@ export default {
for (let i = 0; i < this.d_selection.length; i++) {
let selectedItem = this.d_selection[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
let selectedItemIndex = findIndexInList(selectedItem, value);
if (selectedItemIndex !== 0) {
let movedItem = value[selectedItemIndex];
@ -168,7 +170,7 @@ export default {
for (let i = 0; i < this.d_selection.length; i++) {
let selectedItem = this.d_selection[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
let selectedItemIndex = findIndexInList(selectedItem, value);
if (selectedItemIndex !== 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--) {
let selectedItem = this.d_selection[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
let selectedItemIndex = findIndexInList(selectedItem, value);
if (selectedItemIndex !== value.length - 1) {
let movedItem = value[selectedItemIndex];
@ -212,7 +214,7 @@ export default {
for (let i = this.d_selection.length - 1; i >= 0; i--) {
let selectedItem = this.d_selection[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
let selectedItemIndex = findIndexInList(selectedItem, value);
if (selectedItemIndex !== value.length - 1) {
let movedItem = value.splice(selectedItemIndex, 1)[0];
@ -228,14 +230,14 @@ export default {
}
},
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) {
switch (this.reorderDirection) {
case 'up':
DomHandler.scrollInView(this.list, listItems[0]);
scrollInView(this.list, listItems[0]);
break;
case 'top':
@ -243,7 +245,7 @@ export default {
break;
case 'down':
DomHandler.scrollInView(this.list, listItems[listItems.length - 1]);
scrollInView(this.list, listItems[listItems.length - 1]);
break;
case 'bottom':
@ -260,7 +262,7 @@ export default {
this.$el.setAttribute(this.attributeSelector, '');
this.styleElement = document.createElement('style');
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);
let innerHTML = `
@ -305,7 +307,7 @@ export default {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveBottom : undefined;
},
hasSelectedOption() {
return ObjectUtils.isNotEmpty(this.d_selection);
return isNotEmpty(this.d_selection);
}
},
components: {

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

@ -53,7 +53,7 @@
<script>
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 ChevronUpIcon from '@primevue/icons/chevronup';
@ -108,7 +108,7 @@ export default {
});
},
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;
}

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();

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

@ -87,7 +87,8 @@
</template>
<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 CurrrentPageReport from './CurrentPageReport.vue';
import FirstPageLink from './FirstPageLink.vue';
@ -180,7 +181,7 @@ export default {
if (this.hasBreakpoints() && !this.isUnstyled) {
this.styleElement = document.createElement('style');
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);
let innerHTML = '';

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

@ -53,7 +53,9 @@
</template>
<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 ChevronRightIcon from '@primevue/icons/chevronright';
import { mergeProps } from 'vue';
@ -82,7 +84,7 @@ export default {
},
methods: {
getItemProp(item, name) {
return item ? ObjectUtils.getItemValue(item[name]) : undefined;
return item ? resolve(item[name]) : undefined;
},
getItemLabel(item) {
return this.getItemProp(item, 'label');
@ -98,7 +100,7 @@ export default {
});
},
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) {
return this.getItemProp(item, 'visible') !== false;
@ -107,7 +109,7 @@ export default {
return this.getItemProp(item, 'disabled');
},
isItemFocused(item) {
return ObjectUtils.equals(item, this.activeItem);
return equals(item, this.activeItem);
},
getPanelId(index) {
return `${this.id}_${index}`;
@ -133,7 +135,7 @@ export default {
}
this.changeActiveItem(event, item);
DomHandler.focus(event.currentTarget);
focus(event.currentTarget);
},
onHeaderKeyDown(event, item) {
switch (event.code) {
@ -164,16 +166,16 @@ export default {
}
},
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();
},
onHeaderArrowUpKey(event) {
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();
},
onHeaderHomeKey(event) {
@ -185,22 +187,22 @@ export default {
event.preventDefault();
},
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);
event.preventDefault();
},
findNextHeader(panelElement, selfCheck = false) {
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) {
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() {
return this.findNextHeader(this.$el.firstElementChild, true);
@ -211,7 +213,7 @@ export default {
updateFocusedHeader(event) {
const { originalEvent, focusOnNext, selfCheck } = event;
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);
},
@ -220,12 +222,12 @@ export default {
const active = this.isItemActive(item);
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) {
// activeItem and activeItems should be separated because it should be only one focused root item
if (this.activeItems.some((subItem) => ObjectUtils.equals(item, subItem))) {
this.activeItems = this.activeItems.filter((subItem) => !ObjectUtils.equals(item, subItem));
if (this.activeItems.some((subItem) => equals(item, subItem))) {
this.activeItems = this.activeItems.filter((subItem) => !equals(item, subItem));
} else {
this.activeItems.push(item);
}
@ -246,7 +248,7 @@ export default {
}
},
changeFocusedHeader(event, element) {
element && DomHandler.focus(element);
element && focus(element);
},
getMenuItemProps(item, index) {
return {

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

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

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

@ -73,7 +73,7 @@
<script>
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 ChevronRightIcon from '@primevue/icons/chevronright';
import Ripple from 'primevue/ripple';
@ -122,7 +122,7 @@ export default {
return this.getItemId(processedItem);
},
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) {
return this.getItemProp(processedItem, 'label');
@ -151,7 +151,7 @@ export default {
return this.focusedItemId === this.getItemId(processedItem);
},
isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items);
return isNotEmpty(processedItem.items);
},
onItemClick(event, processedItem) {
this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });

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

@ -64,7 +64,9 @@
</template>
<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 EyeSlashIcon from '@primevue/icons/eyeslash';
import InputText from 'primevue/inputtext';
@ -112,15 +114,15 @@ export default {
}
if (this.overlay) {
ZIndexUtils.clear(this.overlay);
ZIndex.clear(this.overlay);
this.overlay = null;
}
},
methods: {
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.bindScrollListener();
this.bindResizeListener();
@ -131,14 +133,14 @@ export default {
this.overlay = null;
},
onOverlayAfterLeave(el) {
ZIndexUtils.clear(el);
ZIndex.clear(el);
},
alignOverlay() {
if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, this.$refs.input.$el);
relativePosition(this.overlay, this.$refs.input.$el);
} else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$refs.input.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$refs.input.$el);
this.overlay.style.minWidth = getOuterWidth(this.$refs.input.$el) + 'px';
absolutePosition(this.overlay, this.$refs.input.$el);
}
},
testStrength(str) {
@ -268,7 +270,7 @@ export default {
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) {
if (this.overlayVisible && !isTouchDevice()) {
this.overlayVisible = false;
}
};

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

@ -166,7 +166,9 @@
</template>
<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 AngleDoubleLeftIcon from '@primevue/icons/angledoubleleft';
import AngleDoubleRightIcon from '@primevue/icons/angledoubleright';
@ -266,7 +268,7 @@ export default {
for (let i = 0; i < selectionList.length; i++) {
let selectedItem = selectionList[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);
let selectedItemIndex = findIndexInList(selectedItem, valueList);
if (selectedItemIndex !== 0) {
let movedItem = valueList[selectedItemIndex];
@ -294,7 +296,7 @@ export default {
for (let i = 0; i < selectionList.length; i++) {
let selectedItem = selectionList[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);
let selectedItemIndex = findIndexInList(selectedItem, valueList);
if (selectedItemIndex !== 0) {
let movedItem = valueList.splice(selectedItemIndex, 1)[0];
@ -320,7 +322,7 @@ export default {
for (let i = selectionList.length - 1; i >= 0; i--) {
let selectedItem = selectionList[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);
let selectedItemIndex = findIndexInList(selectedItem, valueList);
if (selectedItemIndex !== valueList.length - 1) {
let movedItem = valueList[selectedItemIndex];
@ -348,7 +350,7 @@ export default {
for (let i = selectionList.length - 1; i >= 0; i--) {
let selectedItem = selectionList[i];
let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);
let selectedItemIndex = findIndexInList(selectedItem, valueList);
if (selectedItemIndex !== valueList.length - 1) {
let movedItem = valueList.splice(selectedItemIndex, 1)[0];
@ -376,8 +378,8 @@ export default {
for (let i = 0; i < selection.length; i++) {
let selectedItem = selection[i];
if (ObjectUtils.findIndexInList(selectedItem, targetList) == -1) {
targetList.push(sourceList.splice(ObjectUtils.findIndexInList(selectedItem, sourceList), 1)[0]);
if (findIndexInList(selectedItem, targetList) == -1) {
targetList.push(sourceList.splice(findIndexInList(selectedItem, sourceList), 1)[0]);
}
}
@ -428,8 +430,8 @@ export default {
for (let i = 0; i < selection.length; i++) {
let selectedItem = selection[i];
if (ObjectUtils.findIndexInList(selectedItem, sourceList) == -1) {
sourceList.push(targetList.splice(ObjectUtils.findIndexInList(selectedItem, targetList), 1)[0]);
if (findIndexInList(selectedItem, sourceList) == -1) {
sourceList.push(targetList.splice(findIndexInList(selectedItem, targetList), 1)[0]);
}
}
@ -476,10 +478,10 @@ export default {
this.itemTouched = false;
const selectionList = this.d_selection[listIndex];
const selectedIndex = ObjectUtils.findIndexInList(item, selectionList);
const selectedIndex = findIndexInList(item, selectionList);
const selected = selectedIndex != -1;
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;
let _selection;
@ -510,12 +512,12 @@ export default {
this.updateSelection(event);
},
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) {
switch (this.reorderDirection) {
case 'up':
DomHandler.scrollInView(listElement, listItems[0]);
scrollInView(listElement, listItems[0]);
break;
case 'top':
@ -523,7 +525,7 @@ export default {
break;
case 'down':
DomHandler.scrollInView(listElement, listItems[listItems.length - 1]);
scrollInView(listElement, listItems[listItems.length - 1]);
break;
case 'bottom':
@ -563,7 +565,7 @@ export default {
this.$el.setAttribute(this.attributeSelector, '');
this.styleElement = document.createElement('style');
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);
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;
},
moveAllDisabled(list) {
return this.disabled ? true : ObjectUtils.isEmpty(this[list]);
return this.disabled ? true : isEmpty(this[list]);
}
},
computed: {

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

@ -14,7 +14,9 @@
</template>
<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 FocusTrap from 'primevue/focustrap';
import OverlayEventBus from 'primevue/overlayeventbus';
@ -69,7 +71,7 @@ export default {
this.target = null;
if (this.container && this.autoZIndex) {
ZIndexUtils.clear(this.container);
ZIndex.clear(this.container);
}
if (this.overlayEventListener) {
@ -102,7 +104,7 @@ export default {
},
onEnter(el) {
this.container.setAttribute(this.attributeSelector, '');
DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
addStyle(el, { position: 'absolute', top: '0', left: '0' });
this.alignOverlay();
if (this.dismissable) {
@ -113,7 +115,7 @@ export default {
this.bindResizeListener();
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) => {
@ -141,14 +143,14 @@ export default {
},
onAfterLeave(el) {
if (this.autoZIndex) {
ZIndexUtils.clear(el);
ZIndex.clear(el);
}
},
alignOverlay() {
DomHandler.absolutePosition(this.container, this.target, false);
absolutePosition(this.container, this.target, false);
const containerOffset = DomHandler.getOffset(this.container);
const targetOffset = DomHandler.getOffset(this.target);
const containerOffset = getOffset(this.container);
const targetOffset = getOffset(this.target);
let arrowLeft = 0;
if (containerOffset.left < targetOffset.left) {
@ -159,13 +161,13 @@ export default {
if (containerOffset.top < targetOffset.top) {
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) {
if (event.code === 'Escape' && this.closeOnEscape) {
this.hide();
DomHandler.focus(this.target);
focus(this.target);
}
},
onButtonKeydown(event) {
@ -205,7 +207,7 @@ export default {
}
},
bindOutsideClickListener() {
if (!this.outsideClickListener && DomHandler.isClient()) {
if (!this.outsideClickListener && isClient()) {
this.outsideClickListener = (event) => {
if (this.visible && !this.selfClick && !this.isTargetClicked(event)) {
this.visible = false;
@ -243,7 +245,7 @@ export default {
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.visible && !DomHandler.isTouchDevice()) {
if (this.visible && !isTouchDevice()) {
this.visible = false;
}
};
@ -267,7 +269,7 @@ export default {
if (!this.styleElement && !this.isUnstyled) {
this.styleElement = document.createElement('style');
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);
let innerHTML = '';

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

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

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

@ -26,7 +26,7 @@
</template>
<script>
import { ObjectUtils } from '@primevue/core/utils';
import { equals } from '@primeuix/utils/object';
import BaseRadioButton from './BaseRadioButton.vue';
export default {
@ -62,7 +62,7 @@ export default {
},
computed: {
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>
<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 StarIcon from '@primevue/icons/star';
import StarFillIcon from '@primevue/icons/starfill';
@ -68,9 +69,9 @@ export default {
if (!this.readonly && !this.disabled) {
this.onOptionSelect(event, value);
this.isFocusVisibleItem = false;
const firstFocusableEl = DomHandler.getFirstFocusableElement(event.currentTarget);
const firstFocusableEl = getFirstFocusableElement(event.currentTarget);
firstFocusableEl && DomHandler.focus(firstFocusableEl);
firstFocusableEl && focus(firstFocusableEl);
}
},
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';
const Ripple = BaseRipple.extend('ripple', {
@ -29,7 +29,7 @@ const Ripple = BaseRipple.extend('ripple', {
el.removeEventListener('mousedown', this.onMouseDown.bind(this));
},
createRipple(el) {
const ink = DomHandler.createElement('span', {
const ink = createElement('span', {
role: 'presentation',
'aria-hidden': true,
'data-p-ink': true,
@ -64,29 +64,29 @@ const Ripple = BaseRipple.extend('ripple', {
return;
}
!this.isUnstyled() && DomHandler.removeClass(ink, 'p-ink-active');
!this.isUnstyled() && removeClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'false');
if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
let d = Math.max(DomHandler.getOuterWidth(target), DomHandler.getOuterHeight(target));
if (!getHeight(ink) && !getWidth(ink)) {
let d = Math.max(getOuterWidth(target), getOuterHeight(target));
ink.style.height = d + 'px';
ink.style.width = d + 'px';
}
let offset = DomHandler.getOffset(target);
let x = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(ink) / 2;
let y = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(ink) / 2;
let offset = getOffset(target);
let x = event.pageX - offset.left + document.body.scrollTop - getWidth(ink) / 2;
let y = event.pageY - offset.top + document.body.scrollLeft - getHeight(ink) / 2;
ink.style.top = y + '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');
this.timeout = setTimeout(() => {
if (ink) {
!this.isUnstyled() && DomHandler.removeClass(ink, 'p-ink-active');
!this.isUnstyled() && removeClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'false');
}
}, 401);
@ -96,11 +96,11 @@ const Ripple = BaseRipple.extend('ripple', {
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');
},
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>
<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';
export default {
@ -101,7 +102,7 @@ export default {
calculateContainerHeight() {
let containerStyles = getComputedStyle(this.$el),
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 (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.scrollXRatio >= 1) {
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 {
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;';
}
}
@ -143,10 +144,10 @@ export default {
if (this.$refs.yBar) {
if (this.scrollYRatio >= 1) {
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 {
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 =
'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.lastPageY = e.pageY;
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');
!this.isUnstyled && DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
!this.isUnstyled && addClass(document.body, 'p-scrollpanel-grabbed');
this.bindDocumentMouseListeners();
e.preventDefault();
@ -171,9 +172,9 @@ export default {
this.$refs.xBar.focus();
this.lastPageX = e.pageX;
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');
!this.isUnstyled && DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
!this.isUnstyled && addClass(document.body, 'p-scrollpanel-grabbed');
this.bindDocumentMouseListeners();
e.preventDefault();
@ -302,11 +303,11 @@ export default {
},
onDocumentMouseUp() {
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.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');
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
!this.isUnstyled && removeClass(document.body, 'p-scrollpanel-grabbed');
this.unbindDocumentMouseListeners();
this.isXBarClicked = false;

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

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

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

@ -191,7 +191,10 @@
<script>
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 CheckIcon from '@primevue/icons/check';
import ChevronDownIcon from '@primevue/icons/chevrondown';
@ -266,7 +269,7 @@ export default {
}
if (this.overlay) {
ZIndexUtils.clear(this.overlay);
ZIndex.clear(this.overlay);
this.overlay = null;
}
},
@ -275,13 +278,13 @@ export default {
return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];
},
getOptionLabel(option) {
return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;
},
getOptionValue(option) {
return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option;
return this.optionValue ? resolveFieldData(option, this.optionValue) : option;
},
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) {
return this.ptm(key, {
@ -295,16 +298,16 @@ export default {
});
},
isOptionDisabled(option) {
return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;
},
isOptionGroup(option) {
return this.optionGroupLabel && option.optionGroup && option.group;
},
getOptionGroupLabel(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel);
return resolveFieldData(optionGroup, this.optionGroupLabel);
},
getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren);
return resolveFieldData(optionGroup, this.optionGroupChildren);
},
getAriaPosInset(index) {
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.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) {
const _hide = () => {
@ -325,7 +328,7 @@ export default {
this.searchValue = '';
this.resetFilterOnHide && (this.filterValue = null);
isFocus && DomHandler.focus(this.$refs.focusInput);
isFocus && focus(this.$refs.focusInput);
};
setTimeout(() => {
@ -354,7 +357,7 @@ export default {
this.$emit('blur', event);
},
onKeyDown(event) {
if (this.disabled || DomHandler.isAndroid()) {
if (this.disabled || isAndroid()) {
event.preventDefault();
return;
@ -419,7 +422,7 @@ export default {
break;
default:
if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
if (!metaKey && isPrintableCharacter(event.key)) {
!this.overlayVisible && this.show();
!this.editable && this.searchOptions(event, event.key);
}
@ -439,7 +442,7 @@ export default {
this.updateModel(event, value);
!this.overlayVisible && ObjectUtils.isNotEmpty(value) && this.show();
!this.overlayVisible && isNotEmpty(value) && this.show();
},
onContainerClick(event) {
if (this.disabled || this.loading) {
@ -459,14 +462,14 @@ export default {
this.resetFilterOnClear && (this.filterValue = null);
},
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) {
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) {
const value = this.getOptionValue(option);
@ -655,7 +658,7 @@ export default {
onTabKey(event, pressedInInputText = false) {
if (!pressedInInputText) {
if (this.overlayVisible && this.hasFocusableElements()) {
DomHandler.focus(this.$refs.firstHiddenFocusableElementOnOverlay);
focus(this.$refs.firstHiddenFocusableElementOnOverlay);
event.preventDefault();
} else {
@ -673,13 +676,13 @@ export default {
}
},
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.scrollInView();
this.autoFilterFocus && DomHandler.focus(this.$refs.filterInput.$el);
this.autoFilterFocus && focus(this.$refs.filterInput.$el);
},
onOverlayAfterEnter() {
this.bindOutsideClickListener();
@ -697,14 +700,14 @@ export default {
this.overlay = null;
},
onOverlayAfterLeave(el) {
ZIndexUtils.clear(el);
ZIndex.clear(el);
},
alignOverlay() {
if (this.appendTo === 'self') {
DomHandler.relativePosition(this.overlay, this.$el);
relativePosition(this.overlay, this.$el);
} else {
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
DomHandler.absolutePosition(this.overlay, this.$el);
this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';
absolutePosition(this.overlay, this.$el);
}
},
bindOutsideClickListener() {
@ -743,7 +746,7 @@ export default {
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible && !DomHandler.isTouchDevice()) {
if (this.overlayVisible && !isTouchDevice()) {
this.hide();
}
};
@ -761,9 +764,9 @@ export default {
if (!this.editable && !this.labelClickListener) {
const label = document.querySelector(`label[for="${this.inputId}"]`);
if (label && DomHandler.isVisible(label)) {
if (label && isVisible(label)) {
this.labelClickListener = () => {
DomHandler.focus(this.$refs.focusInput);
focus(this.$refs.focusInput);
};
label.addEventListener('click', this.labelClickListener);
@ -774,31 +777,31 @@ export default {
if (this.labelClickListener) {
const label = document.querySelector(`label[for="${this.inputId}"]`);
if (label && DomHandler.isVisible(label)) {
if (label && isVisible(label)) {
label.removeEventListener('click', this.labelClickListener);
}
}
},
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) {
return this.isValidOption(option) && typeof this.getOptionLabel(option) === 'string' && this.getOptionLabel(option)?.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));
},
isValidOption(option) {
return ObjectUtils.isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
return isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
},
isValidSelectedOption(option) {
return this.isValidOption(option) && this.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() {
return this.visibleOptions.findIndex((option) => this.isValidOption(option));
},
findLastOptionIndex() {
return ObjectUtils.findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
return findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));
},
findNextOptionIndex(index) {
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;
},
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;
},
@ -829,7 +832,7 @@ export default {
let optionIndex = -1;
let matched = false;
if (ObjectUtils.isNotEmpty(this.searchValue)) {
if (isNotEmpty(this.searchValue)) {
if (this.focusedOptionIndex !== -1) {
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;
@ -874,7 +877,7 @@ export default {
scrollInView(index = -1) {
this.$nextTick(() => {
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) {
element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
@ -942,7 +945,7 @@ export default {
return options;
},
hasSelectedOption() {
return ObjectUtils.isNotEmpty(this.modelValue);
return isNotEmpty(this.modelValue);
},
label() {
const selectedOptionIndex = this.findSelectedOptionIndex();
@ -961,7 +964,7 @@ export default {
return this.filterFields || [this.optionLabel];
},
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() {
return this.filterMessage || this.$primevue.config.locale.searchMessage || '';

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

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

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

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

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

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

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

@ -22,7 +22,9 @@
</template>
<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';
export default {
@ -85,7 +87,7 @@ export default {
},
onResizeStart(event, index, isKeyDown) {
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) {
this.dragging = true;
@ -96,11 +98,11 @@ export default {
this.nextPanelElement = this.gutterElement.nextElementSibling;
if (isKeyDown) {
this.prevPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true);
this.nextPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true);
this.prevPanelSize = this.horizontal ? getOuterWidth(this.prevPanelElement, true) : getOuterHeight(this.prevPanelElement, true);
this.nextPanelSize = this.horizontal ? getOuterWidth(this.nextPanelElement, true) : getOuterHeight(this.nextPanelElement, true);
} else {
this.prevPanelSize = (100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true))) / this.size;
this.nextPanelSize = (100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true))) / this.size;
this.prevPanelSize = (100 * (this.horizontal ? getOuterWidth(this.prevPanelElement, true) : getOuterHeight(this.prevPanelElement, true))) / this.size;
this.nextPanelSize = (100 * (this.horizontal ? getOuterWidth(this.nextPanelElement, true) : getOuterHeight(this.nextPanelElement, true))) / this.size;
}
this.prevPanelIndex = index;
@ -263,13 +265,13 @@ export default {
if (newPrevPanelSize > 100 || newPrevPanelSize < 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) {
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) {
return false;
@ -326,7 +328,7 @@ export default {
}
},
saveState() {
if (ObjectUtils.isArray(this.panelSizes)) {
if (isArray(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>
<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 BaseStep from './BaseStep.vue';
@ -32,8 +33,8 @@ export default {
},
mounted() {
if (this.$el && this.$pcStepList) {
let index = ObjectUtils.findIndexInList(this.$el, DomHandler.find(this.$pcStepper.$el, '[data-pc-name="step"]'));
let stepLen = DomHandler.find(this.$pcStepper.$el, '[data-pc-name="step"]').length;
let index = findIndexInList(this.$el, find(this.$pcStepper.$el, '[data-pc-name="step"]'));
let stepLen = find(this.$pcStepper.$el, '[data-pc-name="step"]').length;
this.isSeparatorVisible = index !== stepLen - 1;
}

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

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

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

@ -27,7 +27,7 @@
</template>
<script>
import { DomHandler } from '@primevue/core/utils';
import { findSingle, find } from '@primeuix/utils/dom';
import { mergeProps } from 'vue';
import BaseSteps from './BaseSteps.vue';
@ -160,12 +160,12 @@ export default {
return prevItem ? prevItem.children[0] : null;
},
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;
},
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;
},

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';
const StyleClass = BaseStyleClass.extend('styleclass', {
@ -18,8 +18,8 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
el.$_pstyleclass_clicklistener = () => {
if (binding.value.toggleClass) {
if (DomHandler.hasClass(target, binding.value.toggleClass)) DomHandler.removeClass(target, binding.value.toggleClass);
else DomHandler.addClass(target, binding.value.toggleClass);
if (hasClass(target, binding.value.toggleClass)) removeClass(target, binding.value.toggleClass);
else addClass(target, binding.value.toggleClass);
} else {
if (target.offsetParent === null) this.enter(target, el, binding);
else this.leave(target, binding);
@ -43,23 +43,23 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
if (binding.value.enterActiveClass.includes('slidedown')) {
target.style.height = '0px';
DomHandler.removeClass(target, 'hidden');
removeClass(target, 'hidden');
target.style.maxHeight = target.scrollHeight + 'px';
DomHandler.addClass(target, 'hidden');
addClass(target, 'hidden');
target.style.height = '';
}
DomHandler.addClass(target, binding.value.enterActiveClass);
addClass(target, binding.value.enterActiveClass);
if (binding.value.enterFromClass) {
DomHandler.removeClass(target, binding.value.enterFromClass);
removeClass(target, binding.value.enterFromClass);
}
target.$p_styleclass_enterlistener = () => {
DomHandler.removeClass(target, binding.value.enterActiveClass);
removeClass(target, binding.value.enterActiveClass);
if (binding.value.enterToClass) {
DomHandler.addClass(target, binding.value.enterToClass);
addClass(target, binding.value.enterToClass);
}
target.removeEventListener('animationend', target.$p_styleclass_enterlistener);
@ -75,11 +75,11 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
}
} else {
if (binding.value.enterFromClass) {
DomHandler.removeClass(target, binding.value.enterFromClass);
removeClass(target, binding.value.enterFromClass);
}
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 (!target.$_pstyleclass_animating) {
target.$_pstyleclass_animating = true;
DomHandler.addClass(target, binding.value.leaveActiveClass);
addClass(target, binding.value.leaveActiveClass);
if (binding.value.leaveFromClass) {
DomHandler.removeClass(target, binding.value.leaveFromClass);
removeClass(target, binding.value.leaveFromClass);
}
target.$p_styleclass_leavelistener = () => {
DomHandler.removeClass(target, binding.value.leaveActiveClass);
removeClass(target, binding.value.leaveActiveClass);
if (binding.value.leaveToClass) {
DomHandler.addClass(target, binding.value.leaveToClass);
addClass(target, binding.value.leaveToClass);
}
target.removeEventListener('animationend', target.$p_styleclass_leavelistener);
@ -112,11 +112,11 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
}
} else {
if (binding.value.leaveFromClass) {
DomHandler.removeClass(target, binding.value.leaveFromClass);
removeClass(target, binding.value.leaveFromClass);
}
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