Vue Framework Adapter

/**
 * Unified composition API hooks that work across Vue 2 and Vue 3
 */
interface AdapterHooks {
  /** Create a reactive reference */
  ref<T>(value: T): Ref<T>;
  /** Create a computed property */
  computed<T>(getter: () => T): ComputedRef<T>;
  /** Watch for changes in reactive data */
  watch<T>(source: T, callback: (newVal: T, oldVal: T) => void): void;
  /** Lifecycle hook - component mounted */
  onMounted(callback: () => void): void;
  /** Lifecycle hook - before component unmounts */
  onBeforeUnmount(callback: () => void): void;
  /** Get current component instance */
  getCurrentInstance(): any;
  /** Provide value to child components */
  provide<T>(key: string | symbol, value: T): void;
  /** Inject value from parent components */
  inject<T>(key: string | symbol, defaultValue?: T): T;
}

const hooks: AdapterHooks;

/**
 * Access Vue Router instance and current route
 */
function useRouter(instance?: any): {
  route: any;
  router: any;
};

/**
 * Create an event emitter instance
 */
function emitter(): any;

/**
 * Process Vue directives for cross-framework compatibility
 */
function directive(directives: any): any;

/**
 * Create a component instance with design configuration
 */
function createComponent(config: {
  component: any;
  propsData?: any;
  el: any;
}): any;

/**
 * Get element status class from class definitions
 */
function getElementStatusClass(classes: Record<string, string>, key: string): string;

/**
 * Vue 3 Teleport component (null in Vue 2)
 */
const Teleport: any;

/**
 * Vue KeepAlive component
 */
const KeepAlive: any;

import { hooks } from "@opentiny/vue-common";

// Create reactive state
const count = hooks.ref(0);
const doubled = hooks.computed(() => count.value * 2);

// Watch for changes
hooks.watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`);
});

// Use lifecycle hooks
hooks.onMounted(() => {
  console.log('Component mounted');
});

hooks.onBeforeUnmount(() => {
  console.log('Component unmounting');
});

/** True when running in Vue 2 environment */
const isVue2: boolean;

/** True when running in Vue 3 environment */
const isVue3: boolean;

/**
 * Define a component that works across Vue versions
 * @param options - Component options object
 * @returns Component constructor
 */
function defineComponent<T>(options: T): DefineComponent;

/**
 * Define an async component with lazy loading
 * @param loader - Function that returns a Promise resolving to component
 * @returns Async component constructor
 */
function defineAsyncComponent(loader: () => Promise<any>): DefineComponent;

/**
 * Hyperscript render function (h function)
 * @param tag - Element tag or component
 * @param props - Element props/attributes  
 * @param children - Child elements or text
 * @returns Virtual node
 */
function h(tag: any, props?: any, children?: any): any;

/**
 * Mark object as non-reactive (Vue 3) or pass-through (Vue 2)
 * @param obj - Object to mark as raw
 * @returns Raw object
 */
function markRaw<T>(obj: T): T;

/**
 * Parse and normalize virtual nodes across Vue versions
 * @param vnode - Virtual node to parse
 * @returns Normalized vnode
 */
function parseVnode(vnode: any): any;

/**
 * Check if a virtual node is empty
 * @param vnode - Virtual node to check
 * @returns True if vnode is empty
 */
function isEmptyVnode(vnode: any): boolean;

/**
 * Type guard for virtual nodes
 * @param vnode - Value to check
 * @returns True if value is a vnode
 */
function isVnode(vnode: any): boolean;

/**
 * Teleport/Portal component for rendering content in different DOM location
 * Vue 3: Uses native Teleport
 * Vue 2: Uses custom implementation
 */
const Teleport: DefineComponent;

/**
 * KeepAlive component for caching component instances
 */
const KeepAlive: DefineComponent;

/**
 * Normalize directive lifecycle hooks across Vue versions
 * @param directives - Directive definition object
 * @returns Normalized directives
 */
function directive(directives: any): any;

/**
 * Create component with design system integration
 * @param design - Design system configuration
 * @returns Component creation function
 */
function createComponentFn(design: any): (config: any) => DefineComponent;

/**
 * Unified component rendering function
 * @param config - Render configuration
 * @returns Rendered component
 */
function renderComponent(config: {
  view?: any;
  component?: any;
  props: any;
  context: any;
  extend?: any;
  customDesignProps?: any;
}): any;

/**
 * Get application context
 * @returns Vue application context
 */
function appContext(): any;

/**
 * Get global application properties
 * @returns Global properties object
 */
function appProperties(): any;

/**
 * Get root configuration from context
 * @param context - Component context
 * @returns Root configuration object
 */
function rootConfig(context?: any): any;

/**
 * Create an event emitter instance
 * @returns Event emitter with emit, on, once, off methods
 */
function emitter(): {
  emit(event: string, ...args: any[]): void;
  on(event: string, callback: (...args: any[]) => void): void;
  once(event: string, callback: (...args: any[]) => void): void;
  off(event: string, callback?: (...args: any[]) => void): void;
};

/**
 * Get router instance and current route
 * @param instance - Component instance (optional)
 * @returns Object with route and router
 */
function useRouter(instance?: any): {
  route: any;
  router: any;
};

/**
 * Get current or parent component name
 * @returns Component name string
 */
function getComponentName(): string;

/**
 * Get custom component properties
 * @returns Custom properties object
 */
function getCustomProps(): any;

/**
 * Filter and combine props and attributes
 * @param props - Component props
 * @param attrs - Component attributes  
 * @returns Filtered props object
 */
function bindFilter(props: any, attrs: any): any;

/**
 * Get CSS classes based on key patterns
 * @param classes - Classes object
 * @param key - Key to lookup
 * @returns CSS class string
 */
function getElementCssClass(classes: any, key: string): string;

/**
 * Generate status-specific class names
 * @param className - Base class name
 * @param status - Status identifier
 * @returns Status-specific class name
 */
function getElementStatusClass(className: string, status: string): string;

/**
 * Get comprehensive framework toolkit
 * @param context - Component context
 * @param mode - Component mode (pc/mobile/mobile-first)
 * @returns Tools object with utilities
 */
function tools(context: any, mode: string): {
  framework: 'vue2' | 'vue2.7' | 'vue3';
  isPCMode: boolean;
  isMobileMode: boolean;
  vm: any;
  emit: (...args: any[]) => void;
  emitter: any;
  refs: any;
  slots: any;
  scopedSlots: any;
  attrs: any;
  parent: any;
  route: any;
  router: any;
  dispatch: (componentName: string, eventName: string, params?: any) => void;
  broadcast: (componentName: string, eventName: string, params?: any) => void;
  parentHandler: (condition: any) => any;
  childrenHandler: (condition: any) => any;
  i18n: any;
  nextTick: (callback: () => void) => void;
  constants: any;
  mode: string;
  service: any;
  getService: () => any;
  setParentAttribute: (config: { name: string; value: any }) => void;
  defineInstanceProperties: (props: any) => void;
  defineParentInstanceProperties: (props: any) => void;
};