# ivyforms/1.1.1/frontend/src/composables/useMultiPageComponents.ts

The Innovative Form Builder – IvyForms, version 1.1.1. 118 lines.

- Page: https://pluginprobe.com/plugins/ivyforms/1.1.1/code/frontend/src/composables/useMultiPageComponents.ts
- Raw: https://pluginprobe.com/plugins/ivyforms/1.1.1/raw/frontend/src/composables/useMultiPageComponents.ts
- Modified: 2026-06-08T12:18:46+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ivyforms/1.1.1/code/frontend/src/composables/useMultiPageComponents.ts#L10-L20`.

```typescript
import { computed, type ComputedRef } from 'vue'
import type { Component } from 'vue'
import type { IvyFormAPIHooks } from '@/composables/IvyFormAPI'

export type MultiPageComponentKey =
  | 'progressIndicator'
  | 'pageNavigation'
  | 'progressSettings'
  | 'navigationSettings'

const MULTI_PAGE_COMPONENT_HOOKS: Record<MultiPageComponentKey, string> = {
  progressIndicator: 'ivyforms/multi_page/filter/progress_indicator_component',
  pageNavigation: 'ivyforms/multi_page/filter/page_navigation_component',
  progressSettings: 'ivyforms/multi_page/filter/progress_settings_component',
  navigationSettings: 'ivyforms/multi_page/filter/navigation_settings_component',
}

const MULTI_PAGE_COMPONENT_REGISTRY_KEYS: Record<MultiPageComponentKey, string> = {
  progressIndicator: 'IvyFormProgressIndicator',
  pageNavigation: 'IvyFormPageNavigation',
  progressSettings: 'ProgressSettings',
  navigationSettings: 'NavigationSettings',
}

const isVueComponent = (value: unknown): value is Component =>
  !!value &&
  (typeof value === 'function' || typeof value === 'object') &&
  ('render' in (value as Record<string, unknown>) ||
    'setup' in (value as Record<string, unknown>) ||
    '__hmrId' in (value as Record<string, unknown>) ||
    '__name' in (value as Record<string, unknown>))

const getHooks = (): IvyFormAPIHooks | undefined => {
  const liteHooks = window.IvyForms?.hooks
  const apiHooks = window.IvyForms?.api?.hooks

  if (liteHooks?.applyFilters) {
    return liteHooks
  }

  if (apiHooks?.applyFilters) {
    return apiHooks
  }

  return undefined
}

const resolveFromRegistry = (key: MultiPageComponentKey): Component | null => {
  const registry = window.IvyForms?.components
  const name = MULTI_PAGE_COMPONENT_REGISTRY_KEYS[key]

  if (!registry || !name) {
    return null
  }

  if (typeof registry === 'function') {
    try {
      const res = registry(name)
      if (isVueComponent(res)) return res
      if (res && typeof res === 'object') {
        const c = (res as Record<string, unknown>)[name]
        if (isVueComponent(c)) return c
      }
    } catch {
      // noop
    }

    try {
      const map = registry()
      if (map && typeof map === 'object') {
        const c = (map as Record<string, unknown>)[name]
        if (isVueComponent(c)) return c
      }
    } catch {
      // noop
    }
  }

  if (typeof registry === 'object') {
    const c = (registry as Record<string, unknown>)[name]
    if (isVueComponent(c)) return c
  }

  return null
}

export const resolveMultiPageComponent = (key: MultiPageComponentKey): Component | null => {
  const hooks = getHooks()
  if (hooks?.applyFilters) {
    const resolved = hooks.applyFilters<Component | null>(MULTI_PAGE_COMPONENT_HOOKS[key], null)
    if (isVueComponent(resolved)) {
      return resolved
    }
  }

  return resolveFromRegistry(key)
}

const useResolvedComponent = (key: MultiPageComponentKey): ComputedRef<Component | null> => {
  return computed(() => {
    const hooks = getHooks()

    // Establish reactive dependency so components update when Pro registers filters later.
    void hooks?.updateCounter?.value

    return resolveMultiPageComponent(key)
  })
}

export function useMultiPageComponents() {
  return {
    progressIndicator: useResolvedComponent('progressIndicator'),
    pageNavigation: useResolvedComponent('pageNavigation'),
    progressSettings: useResolvedComponent('progressSettings'),
    navigationSettings: useResolvedComponent('navigationSettings'),
  }
}

```