Composables

interface UseStyleOptions {
  /** Target document for style injection */
  document?: Document;
  /** Load styles immediately */
  immediate?: boolean;
  /** Manual loading control */
  manual?: boolean;
  /** Style element name */
  name?: string;
  /** Style element ID */
  id?: string;
  /** Media query for style element */
  media?: string;
  /** CSP nonce value */
  nonce?: string;
  /** Insert at beginning of head */
  first?: boolean;
  /** Callback when style is mounted */
  onMounted?: (name: string) => void;
  /** Callback when style is updated */
  onUpdated?: (name: string) => void;
  /** Callback when style is loaded */
  onLoad?: (event: Event, options: { name: string }) => void;
  /** Additional properties for style element */
  props?: Record<string, any>;
}

/**
 * Create and manage dynamic CSS styles
 * @param css - CSS content to inject
 * @param options - Configuration options
 * @returns Style management object
 */
declare function useStyle(css: string, options?: UseStyleOptions): {
  /** Style element ID */
  id: string | undefined;
  /** Style element name */
  name: string;
  /** Style element reference */
  el: Ref<HTMLStyleElement | null>;
  /** CSS content reference */
  css: Ref<string>;
  /** Load styles with optional CSS and properties */
  load: (css?: string, props?: any) => void;
  /** Remove styles from DOM */
  unload: () => void;
  /** Reactive loading state */
  isLoaded: Readonly<Ref<boolean>>;
};

import { useStyle } from '@primevue/core/usestyle';

// Basic usage
const { load, unload, isLoaded } = useStyle('.my-class { color: red; }');

// With options
const styleManager = useStyle('', {
  name: 'custom-styles',
  nonce: 'abc123',
  onMounted: (name) => console.log(`Styles ${name} mounted`),
  onUpdated: (name) => console.log(`Styles ${name} updated`)
});

// Dynamic loading
styleManager.load('.dynamic { background: blue; }');

// Conditional loading
if (condition) {
  styleManager.load('.conditional { display: none; }');
} else {
  styleManager.unload();
}

// Check loading state
watch(styleManager.isLoaded, (loaded) => {
  console.log('Styles loaded:', loaded);
});

/**
 * Generate unique component ID
 * @param initialValue - Optional initial ID value
 * @returns Unique ID string
 */
declare function useId(initialValue?: string): string;

import { useId } from '@primevue/core/useid';

// Generate unique ID
const componentId = useId(); // Returns: 'pv_id_1_2_3'

// With initial value
const customId = useId('my-component'); // Returns: 'my-component'

// In Vue component
export default {
  setup() {
    const inputId = useId();
    const labelId = useId();
    
    return {
      inputId,     // 'pv_id_1_2_3'
      labelId      // 'pv_id_4_5_6'
    };
  }
};

/**
 * Generate unique attribute selector for component styling
 * @returns Unique attribute selector string
 */
declare function useAttrSelector(): string;

import { useAttrSelector } from '@primevue/core/useattrselector';

// Generate attribute selector
const attrSelector = useAttrSelector(); // Returns: 'pc_1_2_3'

// Use in component
export default {
  setup() {
    const selector = useAttrSelector();
    
    return {
      selector, // Use as data attribute
      getScopedClass: (cls) => `[${selector}] .${cls}`
    };
  },
  
  template: `
    <div :[selector]="">
      <span class="content">Scoped content</span>
    </div>
  `
};

declare const PrimeVueService: {
  /**
   * Register event listener
   * @param event - Event name
   * @param callback - Event callback function
   */
  on(event: string, callback: Function): void;
  
  /**
   * Remove event listener
   * @param event - Event name
   * @param callback - Event callback function
   */
  off(event: string, callback: Function): void;
  
  /**
   * Emit event with data
   * @param event - Event name
   * @param data - Event data
   */
  emit(event: string, data?: any): void;
  
  /**
   * Register one-time event listener
   * @param event - Event name
   * @param callback - Event callback function
   */
  once(event: string, callback: Function): void;
  
  /**
   * Remove all listeners for event
   * @param event - Event name
   */
  removeAllListeners(event?: string): void;
};

import PrimeVueService from '@primevue/core/service';

// Listen for configuration changes
PrimeVueService.on('config:change', ({ newValue, oldValue }) => {
  console.log('Config changed:', newValue);
});

// Listen for theme changes
PrimeVueService.on('config:theme:change', ({ newValue, oldValue }) => {
  console.log('Theme changed from', oldValue, 'to', newValue);
});

// Emit custom events
PrimeVueService.emit('component:mounted', { component: 'MyComponent' });

// One-time listener
PrimeVueService.once('app:ready', () => {
  console.log('Application is ready');
});

// Remove listener
const handleConfigChange = (config) => { /* ... */ };
PrimeVueService.on('config:change', handleConfigChange);
PrimeVueService.off('config:change', handleConfigChange);

import { useStyle } from '@primevue/core/usestyle';
import { computed, watch } from 'vue';

export default {
  setup(props) {
    const { load, unload } = useStyle('', { manual: true });
    
    const styles = computed(() => {
      return props.variant === 'primary' 
        ? '.component { background: blue; }'
        : '.component { background: gray; }';
    });
    
    watch(styles, (newStyles) => {
      load(newStyles);
    }, { immediate: true });
    
    return { styles };
  }
};

import { useAttrSelector, useStyle } from '@primevue/core';

export default {
  setup() {
    const selector = useAttrSelector();
    
    const { load } = useStyle(`
      [${selector}] .component {
        /* Scoped styles */
      }
    `);
    
    return { selector };
  }
};

// Individual composable imports (recommended)
import { useStyle } from '@primevue/core/usestyle';
import { useId } from '@primevue/core/useid';
import { useAttrSelector } from '@primevue/core/useattrselector';
import PrimeVueService from '@primevue/core/service';

// Named imports from main package
import { useStyle, useId } from '@primevue/core';

// All composables
import { useStyle, useId, useAttrSelector } from '@primevue/core';