CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-primevue--core

Core utilities and base functionality for PrimeVue UI component library

52

1.15x

Quality

Pending

Does it follow best practices?

Impact

52%

1.15x

Average score across 10 eval scenarios

Overview
Eval results
Files

utilities.mddocs/

Utilities

Helper classes and utility functions supporting PrimeVue component development, including scroll handlers, helper management, and VNode utilities.

Capabilities

ConnectedOverlayScrollHandler

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

HelperSet

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

UniqueComponentId (Deprecated)

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 approach

VNode Utilities

Utility 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 };
    }
  }
};

Re-exported Utilities

@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';

Usage Patterns

Overlay Management

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 };
  }
};

Helper Management

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 };
  }
};

Import Patterns

// 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--core

docs

api-services.md

base-classes.md

composables.md

configuration.md

index.md

utilities.md

tile.json