/**
 * @license MIT
 * @module @whoj/utils-vue@2.4.0
 * @copyright (c) 2026 Jonson B.
 */

export { ComputedRefable, MaybeRef, ReadonlyRefable, Refable, refOf } from './composables/refOf.js';
import { Ref, ComputedRef, Plugin, Directive, ObjectDirective } from 'vue';
import Fuse from 'fuse.js';
export { unrefOf } from './composables/unrefOf.js';
export { ComputedRefableElement, NullableElement, RefableElement, UnRefElementReturn, VueInstance, unrefElement } from './composables/unrefOfEl.js';
export { UseLinkTagOptions, UseLinkTagReturn, useLinkTag } from './composables/useLinkTag.js';
export { UseStyleTagOptions, UseStyleTagReturn, useStyleTag } from './composables/useStyleTag.js';
export { listenEvent } from './composables/listenEvent.js';
export { tryOnMounted } from './composables/tryOnMounted.js';
export { tryOnUnmounted } from './composables/tryOnUnmounted.js';
export { tryOnScopeDispose } from './composables/tryOnScopeDispose.js';
import '@whoj/utils-types';

type FuseOptions<T> = Fuse.IFuseOptions<T>;
type FuseResult<T> = Fuse.FuseResult<T>;
type MaybeReactive<DataT> = Ref<null> | Array<DataT> | Ref<Array<DataT>> | Ref<null | Array<DataT>> | ComputedRef<Array<DataT>>;
declare class FuseJS<DataT> {
    /**
     * @type Ref
     */
    fuse: Ref<Fuse<DataT>>;
    /**
     * @type Ref
     */
    resultsRaw: Ref<FuseResult<DataT>[]>;
    /**
     * @type ComputedRef
     */
    results: ComputedRef<Array<DataT>>;
    /**
     * @type Ref
     */
    search: Ref<string>;
    /**
     * @type ComputedRef
     */
    noResults: ComputedRef<boolean>;
    /**
     * @param items
     * @param options
     */
    /**
     * It takes an array of items and an optional FuseOptions object, and then it creates a new Fuse instance with those
     * items and options, and then it runs the search with the current search value
     * @param items - DataT[] - The items to search through.
     * @param options - FuseOptions<DataT>
     */
    loadItems(items: DataT[], options?: FuseOptions<DataT>): void;
    /**
     * If there is no search string, clear the results. Otherwise, search the fuse
     * @param {string} [search] - The search string to use.
     * @returns The results of the search.
     */
    runSearch(search?: string): void;
    /**
     * We create a new Fuse instance with the list of items and options, and then we create a computed property that returns
     * the results of the search
     * @param list - This is the list of items that you want to search. It can be an array of items, or a reactive object
     * that contains an array of items.
     * @param options - FuseOptions<DataT>
     */
    constructor(list: MaybeReactive<DataT>, options?: FuseOptions<DataT>);
}
/**
 * It takes a list of data and an optional options object, and returns a FuseJS object that can be used to search the list
 * @param list - The list of data to search through.
 * @param [options] - FuseOptions<DataT>
 * @returns A new instance of the FuseJS class.
 *
 * @__NO_SIDE_EFFECTS__
 */
declare function useFuseJs<DataT>(list: MaybeReactive<DataT>, options?: FuseOptions<DataT>): FuseJS<DataT>;

type DirectiveEl = HTMLElement | HTMLButtonElement | HTMLAnchorElement;
interface RippleOptions {
    /**
     *
     * @default `rgba(0, 0, 0, 0.35)`
     */
    color?: string;
    /**
     *
     * @default `true`
     */
    enable?: boolean;
    /**
     *
     * @default `1`
     */
    zIndex?: string;
}
interface DirectiveProps {
    /**
     *
     * @default `mousedown`
     */
    event: keyof HTMLElementEventMap;
    /**
     *
     * @default `450`
     */
    transition: number;
}
declare const vRipple: Directive<DirectiveEl, string>;
/**
 * It takes an element, an optional event name, and an optional options object, and then calls the rippleHandler function
 * with the element, an object with the event name as a key and a boolean value, and the options object
 * @param {DirectiveEl | Ref<DirectiveEl>} el - The element to apply the ripple effect to.
 * @param event - The event that triggers the ripple effect.
 * @param {RippleOptions} [options] - RippleOptions
 *
 * @__NO_SIDE_EFFECTS__
 */
declare function useRipple<K extends DirectiveProps['event']>(el: DirectiveEl | Ref<DirectiveEl>, event?: K, options?: RippleOptions): void;
declare const Ripple: Plugin<[undefined | RippleOptions]>;

interface ImgFallbackOptions {
    error?: string;
    loading?: string;
}
type ImgFallbackObjDirective<T extends HTMLImageElement, V extends string | ImgFallbackOptions = ImgFallbackOptions> = ObjectDirective<T, V>;
declare const vImgFallback: ImgFallbackObjDirective<HTMLImageElement, ImgFallbackOptions>;
declare const ImgFallback: Plugin<[undefined | ImgFallbackOptions]>;

export { FuseJS, ImgFallback, Ripple, useFuseJs, useRipple, vImgFallback, vRipple };
export type { DirectiveProps, FuseOptions, FuseResult, ImgFallbackOptions, MaybeReactive, RippleOptions };