0
# Utilities
1

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

4
## Capabilities
5

6
### ConnectedOverlayScrollHandler
7

8
Scroll event handler for connected overlay components like dropdowns and popups.
9

10
```typescript { .api }
11
declare class ConnectedOverlayScrollHandler {
12
  /**
13
   * Create scroll handler for connected overlay
14
   * @param element - Target DOM element
15
   * @param listener - Optional scroll event callback
16
   */
17
  constructor(element: any, listener?: () => void);
18
  
19
  /**
20
   * Bind scroll event listeners to relevant elements
21
   */
22
  bindScrollListener(): void;
23
  
24
  /**
25
   * Remove scroll event listeners
26
   */
27
  unbindScrollListener(): void;
28
  
29
  /**
30
   * Clean up handler and remove all listeners
31
   */
32
  destroy(): void;
33
}
34
```
35

36
**Usage Examples:**
37

38
```typescript
39
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
40

41
// Create scroll handler for dropdown
42
const dropdown = document.getElementById('dropdown');
43
const scrollHandler = new ConnectedOverlayScrollHandler(dropdown, () => {
44
  // Handle scroll event - typically close dropdown
45
  dropdown.style.display = 'none';
46
});
47

48
// Bind listeners when showing dropdown
49
function showDropdown() {
50
  dropdown.style.display = 'block';
51
  scrollHandler.bindScrollListener();
52
}
53

54
// Unbind when hiding dropdown
55
function hideDropdown() {
56
  dropdown.style.display = 'none';
57
  scrollHandler.unbindScrollListener();
58
}
59

60
// Clean up on component unmount
61
onUnmounted(() => {
62
  scrollHandler.destroy();
63
});
64
```
65

66
### HelperSet
67

68
Manager for component helper instances and collections.
69

70
```typescript { .api }
71
declare class HelperSet {
72
  /**
73
   * Create helper set with configuration
74
   * @param options - Configuration options
75
   */
76
  constructor(options: { init?: any; type?: string });
77
  
78
  /**
79
   * Add instance to helper set
80
   * @param instance - Instance to add
81
   */
82
  add(instance: any): void;
83
  
84
  /**
85
   * Update helper set state
86
   */
87
  update(): void;
88
  
89
  /**
90
   * Remove instance from helper set
91
   * @param instance - Instance to remove
92
   */
93
  delete(instance: any): void;
94
  
95
  /**
96
   * Clear all instances from helper set
97
   */
98
  clear(): void;
99
  
100
  /**
101
   * Get instances from helper set
102
   * @param parentInstance - Optional parent instance filter
103
   * @param slots - Optional slots parameter
104
   * @returns Array of instances or null/undefined
105
   */
106
  get(parentInstance?: any, slots?: any): any[] | null | undefined;
107
}
108
```
109

110
**Usage Examples:**
111

112
```typescript
113
import { HelperSet } from '@primevue/core/utils';
114

115
// Create helper set for managing child components
116
const childHelpers = new HelperSet({
117
  type: 'child-component',
118
  init: { active: false }
119
});
120

121
// Add child instances
122
childHelpers.add(childInstance1);
123
childHelpers.add(childInstance2);
124

125
// Get all children
126
const children = childHelpers.get();
127

128
// Get children for specific parent
129
const parentChildren = childHelpers.get(parentInstance);
130

131
// Update helper state
132
childHelpers.update();
133

134
// Remove child
135
childHelpers.delete(childInstance1);
136

137
// Clear all
138
childHelpers.clear();
139
```
140

141
### UniqueComponentId (Deprecated)
142

143
Generate unique component IDs (deprecated in favor of useId composable).
144

145
```typescript { .api }
146
/**
147
 * @deprecated since v4.3.0. Use `uuid` from @primeuix/utils instead.
148
 * Generate unique component ID with optional prefix
149
 * @param prefix - Optional ID prefix
150
 * @returns Unique ID string
151
 */
152
declare function UniqueComponentId(prefix?: string): string;
153
```
154

155
**Usage Examples:**
156

157
```typescript
158
import { UniqueComponentId } from '@primevue/core/utils';
159

160
// Generate unique ID (deprecated - use useId instead)
161
const id = UniqueComponentId(); // Returns: 'pv_id_1'
162
const prefixedId = UniqueComponentId('button'); // Returns: 'button_1'
163

164
// Recommended alternative
165
import { useId } from '@primevue/core/useid';
166
const newId = useId(); // Preferred approach
167
```
168

169
### VNode Utilities
170

171
Utility functions for working with Vue Virtual Nodes.
172

173
```typescript { .api }
174
/**
175
 * Extract property value from VNode
176
 * @param vnode - Vue VNode instance
177
 * @param prop - Property name to extract
178
 * @returns Property value or null
179
 */
180
declare function getVNodeProp(vnode: any, prop: string): any;
181
```
182

183
**Usage Examples:**
184

185
```typescript
186
import { getVNodeProp } from '@primevue/core/utils';
187

188
// In component render function or setup
189
export default {
190
  setup(props, { slots }) {
191
    const defaultSlot = slots.default?.();
192
    
193
    if (defaultSlot?.[0]) {
194
      const vnode = defaultSlot[0];
195
      
196
      // Extract props from child VNode
197
      const childLabel = getVNodeProp(vnode, 'label');
198
      const childDisabled = getVNodeProp(vnode, 'disabled');
199
      
200
      // Handle kebab-case props
201
      const ariaLabel = getVNodeProp(vnode, 'ariaLabel'); // Also checks 'aria-label'
202
      
203
      return { childLabel, childDisabled, ariaLabel };
204
    }
205
  }
206
};
207
```
208

209
## Re-exported Utilities
210

211
@primevue/core re-exports all utilities from @primeuix/utils for convenience:
212

213
```typescript { .api }
214
// Object utilities
215
export * from '@primeuix/utils/object';
216

217
// DOM utilities  
218
export * from '@primeuix/utils/dom';
219

220
// Event utilities
221
export * from '@primeuix/utils/eventbus';
222

223
// UUID utilities
224
export * from '@primeuix/utils/uuid';
225

226
// And many more utility functions...
227
```
228

229
**Common Re-exported Utilities:**
230

231
```typescript
232
// From @primeuix/utils (available via @primevue/core/utils)
233
import { 
234
  // Object utilities
235
  isNotEmpty, 
236
  isEmpty, 
237
  isFunction, 
238
  isString, 
239
  isArray,
240
  resolve,
241
  equals,
242
  
243
  // DOM utilities
244
  isClient,
245
  getElement,
246
  findSingle,
247
  addClass,
248
  removeClass,
249
  
250
  // Other utilities
251
  uuid,
252
  EventBus
253
} from '@primevue/core/utils';
254
```
255

256
## Usage Patterns
257

258
### Overlay Management
259

260
```typescript
261
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
262
import { ref, onMounted, onUnmounted } from 'vue';
263

264
export default {
265
  setup() {
266
    const overlayRef = ref();
267
    const isVisible = ref(false);
268
    let scrollHandler;
269
    
270
    const show = () => {
271
      isVisible.value = true;
272
      scrollHandler?.bindScrollListener();
273
    };
274
    
275
    const hide = () => {
276
      isVisible.value = false;
277
      scrollHandler?.unbindScrollListener();
278
    };
279
    
280
    onMounted(() => {
281
      scrollHandler = new ConnectedOverlayScrollHandler(
282
        overlayRef.value,
283
        hide
284
      );
285
    });
286
    
287
    onUnmounted(() => {
288
      scrollHandler?.destroy();
289
    });
290
    
291
    return { overlayRef, isVisible, show, hide };
292
  }
293
};
294
```
295

296
### Helper Management
297

298
```typescript
299
import { HelperSet } from '@primevue/core/utils';
300
import { onUnmounted } from 'vue';
301

302
export default {
303
  setup() {
304
    const helpers = new HelperSet({ type: 'tab' });
305
    
306
    const addTab = (tabInstance) => {
307
      helpers.add(tabInstance);
308
      helpers.update();
309
    };
310
    
311
    const removeTab = (tabInstance) => {
312
      helpers.delete(tabInstance);
313
      helpers.update();
314
    };
315
    
316
    const getAllTabs = () => helpers.get();
317
    
318
    onUnmounted(() => {
319
      helpers.clear();
320
    });
321
    
322
    return { addTab, removeTab, getAllTabs };
323
  }
324
};
325
```
326

327
## Import Patterns
328

329
```typescript
330
// All utilities (includes re-exports from @primeuix/utils)
331
import * as Utils from '@primevue/core/utils';
332

333
// Specific utility classes
334
import { 
335
  ConnectedOverlayScrollHandler, 
336
  HelperSet, 
337
  getVNodeProp 
338
} from '@primevue/core/utils';
339

340
// From main package
341
import { ConnectedOverlayScrollHandler } from '@primevue/core';
342

343
// Re-exported utilities
344
import { uuid, isNotEmpty, findSingle } from '@primevue/core/utils';
345
```