Core utilities and base functionality for PrimeVue UI component library
52
Quality
Pending
Does it follow best practices?
Impact
52%
1.15xAverage score across 10 eval scenarios
Helper classes and utility functions supporting PrimeVue component development, including scroll handlers, helper management, and VNode utilities.
Scroll event handler for connected overlay components like dropdowns and popups.
declare class ConnectedOverlayScrollHandler {
/**
* Create scroll handler for connected overlay
* @param element - Target DOM element
* @param listener - Optional scroll event callback
*/
constructor(element: any, listener?: () => void);
/**
* Bind scroll event listeners to relevant elements
*/
bindScrollListener(): void;
/**
* Remove scroll event listeners
*/
unbindScrollListener(): void;
/**
* Clean up handler and remove all listeners
*/
destroy(): void;
}Usage Examples:
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
// Create scroll handler for dropdown
const dropdown = document.getElementById('dropdown');
const scrollHandler = new ConnectedOverlayScrollHandler(dropdown, () => {
// Handle scroll event - typically close dropdown
dropdown.style.display = 'none';
});
// Bind listeners when showing dropdown
function showDropdown() {
dropdown.style.display = 'block';
scrollHandler.bindScrollListener();
}
// Unbind when hiding dropdown
function hideDropdown() {
dropdown.style.display = 'none';
scrollHandler.unbindScrollListener();
}
// Clean up on component unmount
onUnmounted(() => {
scrollHandler.destroy();
});Manager for component helper instances and collections.
declare class HelperSet {
/**
* Create helper set with configuration
* @param options - Configuration options
*/
constructor(options: { init?: any; type?: string });
/**
* Add instance to helper set
* @param instance - Instance to add
*/
add(instance: any): void;
/**
* Update helper set state
*/
update(): void;
/**
* Remove instance from helper set
* @param instance - Instance to remove
*/
delete(instance: any): void;
/**
* Clear all instances from helper set
*/
clear(): void;
/**
* Get instances from helper set
* @param parentInstance - Optional parent instance filter
* @param slots - Optional slots parameter
* @returns Array of instances or null/undefined
*/
get(parentInstance?: any, slots?: any): any[] | null | undefined;
}Usage Examples:
import { HelperSet } from '@primevue/core/utils';
// Create helper set for managing child components
const childHelpers = new HelperSet({
type: 'child-component',
init: { active: false }
});
// Add child instances
childHelpers.add(childInstance1);
childHelpers.add(childInstance2);
// Get all children
const children = childHelpers.get();
// Get children for specific parent
const parentChildren = childHelpers.get(parentInstance);
// Update helper state
childHelpers.update();
// Remove child
childHelpers.delete(childInstance1);
// Clear all
childHelpers.clear();Generate unique component IDs (deprecated in favor of useId composable).
/**
* @deprecated since v4.3.0. Use `uuid` from @primeuix/utils instead.
* Generate unique component ID with optional prefix
* @param prefix - Optional ID prefix
* @returns Unique ID string
*/
declare function UniqueComponentId(prefix?: string): string;Usage Examples:
import { UniqueComponentId } from '@primevue/core/utils';
// Generate unique ID (deprecated - use useId instead)
const id = UniqueComponentId(); // Returns: 'pv_id_1'
const prefixedId = UniqueComponentId('button'); // Returns: 'button_1'
// Recommended alternative
import { useId } from '@primevue/core/useid';
const newId = useId(); // Preferred approachUtility functions for working with Vue Virtual Nodes.
/**
* Extract property value from VNode
* @param vnode - Vue VNode instance
* @param prop - Property name to extract
* @returns Property value or null
*/
declare function getVNodeProp(vnode: any, prop: string): any;Usage Examples:
import { getVNodeProp } from '@primevue/core/utils';
// In component render function or setup
export default {
setup(props, { slots }) {
const defaultSlot = slots.default?.();
if (defaultSlot?.[0]) {
const vnode = defaultSlot[0];
// Extract props from child VNode
const childLabel = getVNodeProp(vnode, 'label');
const childDisabled = getVNodeProp(vnode, 'disabled');
// Handle kebab-case props
const ariaLabel = getVNodeProp(vnode, 'ariaLabel'); // Also checks 'aria-label'
return { childLabel, childDisabled, ariaLabel };
}
}
};@primevue/core re-exports all utilities from @primeuix/utils for convenience:
// Object utilities
export * from '@primeuix/utils/object';
// DOM utilities
export * from '@primeuix/utils/dom';
// Event utilities
export * from '@primeuix/utils/eventbus';
// UUID utilities
export * from '@primeuix/utils/uuid';
// And many more utility functions...Common Re-exported Utilities:
// From @primeuix/utils (available via @primevue/core/utils)
import {
// Object utilities
isNotEmpty,
isEmpty,
isFunction,
isString,
isArray,
resolve,
equals,
// DOM utilities
isClient,
getElement,
findSingle,
addClass,
removeClass,
// Other utilities
uuid,
EventBus
} from '@primevue/core/utils';import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import { ref, onMounted, onUnmounted } from 'vue';
export default {
setup() {
const overlayRef = ref();
const isVisible = ref(false);
let scrollHandler;
const show = () => {
isVisible.value = true;
scrollHandler?.bindScrollListener();
};
const hide = () => {
isVisible.value = false;
scrollHandler?.unbindScrollListener();
};
onMounted(() => {
scrollHandler = new ConnectedOverlayScrollHandler(
overlayRef.value,
hide
);
});
onUnmounted(() => {
scrollHandler?.destroy();
});
return { overlayRef, isVisible, show, hide };
}
};import { HelperSet } from '@primevue/core/utils';
import { onUnmounted } from 'vue';
export default {
setup() {
const helpers = new HelperSet({ type: 'tab' });
const addTab = (tabInstance) => {
helpers.add(tabInstance);
helpers.update();
};
const removeTab = (tabInstance) => {
helpers.delete(tabInstance);
helpers.update();
};
const getAllTabs = () => helpers.get();
onUnmounted(() => {
helpers.clear();
});
return { addTab, removeTab, getAllTabs };
}
};// All utilities (includes re-exports from @primeuix/utils)
import * as Utils from '@primevue/core/utils';
// Specific utility classes
import {
ConnectedOverlayScrollHandler,
HelperSet,
getVNodeProp
} from '@primevue/core/utils';
// From main package
import { ConnectedOverlayScrollHandler } from '@primevue/core';
// Re-exported utilities
import { uuid, isNotEmpty, findSingle } from '@primevue/core/utils';Install with Tessl CLI
npx tessl i tessl/npm-primevue--coreevals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10