bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
75 lines (74 loc) • 3.66 kB
TypeScript
import { ComponentInternalInstance, Directive, DirectiveBinding, VNode } from 'vue';
import { BPopoverProps } from '../types/ComponentProps';
import { ElementWithPopper } from '../utils/floatingUi';
interface _ComponentInternalInstance extends ComponentInternalInstance {
provides?: Record<string, unknown>;
setupState?: any;
}
interface _VNode extends VNode {
ctx?: _ComponentInternalInstance | null;
ssContent?: VNode | null;
}
/**
* Represents per-instance state for directives using UID namespacing
*/
export interface DirectiveInstanceState {
binding: string;
destroying: boolean;
}
/**
* Gets the component instance UID from a directive binding
* @throws Error if binding.instance is not available
*/
export declare function getDirectiveUid(binding: DirectiveBinding): number;
/**
* Initializes UID-namespaced storage on an element for a directive
* @param el - The HTML element
* @param propertyName - The property name (e.g., '$__tooltip', '$__popover')
* @param uid - The component instance UID
* @param binding - The directive binding value to cache
* @returns The initialized instance state
*/
export declare function initDirectiveInstance(el: HTMLElement & Record<string, unknown>, propertyName: string, uid: number, binding: DirectiveBinding): DirectiveInstanceState;
/**
* Gets the instance state for a directive, if it exists
* @param el - The HTML element
* @param propertyName - The property name (e.g., '$__tooltip', '$__popover')
* @param uid - The component instance UID
* @returns The instance state or undefined if not found
*/
export declare function getDirectiveInstance(el: HTMLElement & Record<string, unknown>, propertyName: string, uid: number): DirectiveInstanceState | undefined;
/**
* Checks if the directive binding has changed for this instance
* @param instance - The directive instance state
* @param binding - The current directive binding
* @returns true if the binding has changed, false otherwise
*/
export declare function hasBindingChanged(instance: DirectiveInstanceState, binding: DirectiveBinding): boolean;
/**
* Updates the cached binding value for a directive instance
* @param instance - The directive instance state
* @param binding - The new directive binding
*/
export declare function updateBindingCache(instance: DirectiveInstanceState, binding: DirectiveBinding): void;
/**
* Cleans up a directive instance
* @param el - The HTML element
* @param propertyName - The property name (e.g., '$__tooltip', '$__popover')
* @param uid - The component instance UID
*/
export declare function cleanupDirectiveInstance(el: HTMLElement & Record<string, unknown>, propertyName: string, uid: number): void;
export declare function findProvides(binding: DirectiveBinding, vnode: _VNode): Record<string, unknown>;
export declare function findComponentParent(vnode: VNode, root: ComponentInternalInstance): _ComponentInternalInstance | null;
/**
* Creates a floating UI directive (tooltip or popover) with UID-namespaced state management
* @param propertyName - The property name for storing state (e.g., '$__tooltip', '$__popover')
* @param componentDefaultsKey - The key for accessing component defaults (e.g., 'BTooltip', 'BPopover')
* @param buildProps - Optional function to customize the props passed to bind()
* @returns A Vue directive object
*/
export declare function createFloatingDirective(propertyName: string, componentDefaultsKey: string, buildProps?: (text: {
title?: string;
body?: string;
}, defaults: unknown, binding: Readonly<DirectiveBinding>, el: Readonly<HTMLElement>) => BPopoverProps): Directive<ElementWithPopper>;
export {};