vuemoji-picker/dist/index.d.ts

Vue 2 and 3 lightweight emoji picker.

import * as vue from 'vue';
import * as emoji_picker_element_shared from 'emoji-picker-element/shared';
import { PickerConstructorOptions, EmojiClickEvent, SkinToneChangeEvent, Emoji, NativeEmoji } from 'emoji-picker-element/shared';
export { CustomEmoji, DatabaseConstructorOptions, EmojiClickEventDetail, EmojiSkin, I18n, I18nCategories, NativeEmoji, PickerConstructorOptions, SkinTone, SkinToneChangeEventDetail } from 'emoji-picker-element/shared';
import { PropType, MaybeRef } from 'vue-demi';
import Database from 'emoji-picker-element/database';
import Picker from 'emoji-picker-element/picker';

declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
    isDark: {
        type: BooleanConstructor;
        required: false;
        default: boolean;
    };
    skinToneEmoji: StringConstructor;
    customEmoji: PropType<PickerConstructorOptions["customEmoji"]>;
    dataSource: StringConstructor;
    locale: StringConstructor;
    customCategorySorting: PropType<(a: string, b: string) => number>;
    i18n: PropType<PickerConstructorOptions["i18n"]>;
    pickerStyle: PropType<VuemojiPickerStyle>;
}>, {}, {
    picker: Picker;
}, {}, {
    handleClick(event: EmojiClickEvent): void;
    handleSkinToneChange(event: SkinToneChangeEvent): void;
    updatePickerProps(): void;
    updatePickerStyle(): void;
}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("emojiClick" | "skinToneChange")[], "emojiClick" | "skinToneChange", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    isDark: {
        type: BooleanConstructor;
        required: false;
        default: boolean;
    };
    skinToneEmoji: StringConstructor;
    customEmoji: PropType<PickerConstructorOptions["customEmoji"]>;
    dataSource: StringConstructor;
    locale: StringConstructor;
    customCategorySorting: PropType<(a: string, b: string) => number>;
    i18n: PropType<PickerConstructorOptions["i18n"]>;
    pickerStyle: PropType<VuemojiPickerStyle>;
}>> & Readonly<{
    onEmojiClick?: ((...args: any[]) => any) | undefined;
    onSkinToneChange?: ((...args: any[]) => any) | undefined;
}>, {
    isDark: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

declare function useDatabase(): Database;
/**
 * Returns all emoji matching the given search query, ordered by order.
 */
declare function useEmojiBySearchQuery(query: MaybeRef<string>): {
    result: vue.Ref<({
        name: string;
        shortcodes?: string[] | undefined;
        url: string;
        category?: string | undefined;
    } | {
        annotation: string;
        emoticon?: string | undefined;
        group: number;
        name: string;
        order: number;
        shortcodes?: string[] | undefined;
        tags?: string[] | undefined;
        version: number;
        unicode: string;
        skins?: {
            tone: emoji_picker_element_shared.SkinTone;
            unicode: string;
            version: number;
        }[] | undefined;
    })[], Emoji[] | ({
        name: string;
        shortcodes?: string[] | undefined;
        url: string;
        category?: string | undefined;
    } | {
        annotation: string;
        emoticon?: string | undefined;
        group: number;
        name: string;
        order: number;
        shortcodes?: string[] | undefined;
        tags?: string[] | undefined;
        version: number;
        unicode: string;
        skins?: {
            tone: emoji_picker_element_shared.SkinTone;
            unicode: string;
            version: number;
        }[] | undefined;
    })[]>;
    loading: vue.Ref<boolean, boolean>;
};
/**
 * Returns all emoji belonging to a group, ordered by order. Only returns native emoji; custom emoji don't belong to a group.
 */
declare function useEmojiByGroup(group: MaybeRef<number>): {
    result: vue.Ref<{
        annotation: string;
        emoticon?: string | undefined;
        group: number;
        name: string;
        order: number;
        shortcodes?: string[] | undefined;
        tags?: string[] | undefined;
        version: number;
        unicode: string;
        skins?: {
            tone: emoji_picker_element_shared.SkinTone;
            unicode: string;
            version: number;
        }[] | undefined;
    }[], NativeEmoji[] | {
        annotation: string;
        emoticon?: string | undefined;
        group: number;
        name: string;
        order: number;
        shortcodes?: string[] | undefined;
        tags?: string[] | undefined;
        version: number;
        unicode: string;
        skins?: {
            tone: emoji_picker_element_shared.SkinTone;
            unicode: string;
            version: number;
        }[] | undefined;
    }[]>;
    loading: vue.Ref<boolean, boolean>;
};
/**
 * Return a single emoji matching the shortcode, or null if not found.
 */
declare function useEmojiByShortcode(shortcode: MaybeRef<string>): {
    result: vue.Ref<{
        name: string;
        shortcodes?: string[] | undefined;
        url: string;
        category?: string | undefined;
    } | {
        annotation: string;
        emoticon?: string | undefined;
        group: number;
        name: string;
        order: number;
        shortcodes?: string[] | undefined;
        tags?: string[] | undefined;
        version: number;
        unicode: string;
        skins?: {
            tone: emoji_picker_element_shared.SkinTone;
            unicode: string;
            version: number;
        }[] | undefined;
    } | null, Emoji | {
        name: string;
        shortcodes?: string[] | undefined;
        url: string;
        category?: string | undefined;
    } | {
        annotation: string;
        emoticon?: string | undefined;
        group: number;
        name: string;
        order: number;
        shortcodes?: string[] | undefined;
        tags?: string[] | undefined;
        version: number;
        unicode: string;
        skins?: {
            tone: emoji_picker_element_shared.SkinTone;
            unicode: string;
            version: number;
        }[] | undefined;
    } | null>;
    loading: vue.Ref<boolean, boolean>;
};
/**
 * Return a single native emoji matching the unicode string, or a custom emoji matching the name, or null if not found.
 */
declare function useEmojiByUnicodeOrName(unicodeOrName: MaybeRef<string>): {
    result: vue.Ref<{
        name: string;
        shortcodes?: string[] | undefined;
        url: string;
        category?: string | undefined;
    } | {
        annotation: string;
        emoticon?: string | undefined;
        group: number;
        name: string;
        order: number;
        shortcodes?: string[] | undefined;
        tags?: string[] | undefined;
        version: number;
        unicode: string;
        skins?: {
            tone: emoji_picker_element_shared.SkinTone;
            unicode: string;
            version: number;
        }[] | undefined;
    } | null, Emoji | {
        name: string;
        shortcodes?: string[] | undefined;
        url: string;
        category?: string | undefined;
    } | {
        annotation: string;
        emoticon?: string | undefined;
        group: number;
        name: string;
        order: number;
        shortcodes?: string[] | undefined;
        tags?: string[] | undefined;
        version: number;
        unicode: string;
        skins?: {
            tone: emoji_picker_element_shared.SkinTone;
            unicode: string;
            version: number;
        }[] | undefined;
    } | null>;
    loading: vue.Ref<boolean, boolean>;
};

interface VuemojiPickerStyle {
    width?: string;
    height?: string;
    background?: string;
    borderColor?: string;
    borderSize?: string;
    buttonActiveBackground?: string;
    buttonHoverBackground?: string;
    categoryEmojiPadding?: string;
    categoryEmojiSize?: string;
    categoryFontColor?: string;
    categoryFontSize?: string;
    emojiPadding?: string;
    emojiSize?: string;
    indicatorColor?: string;
    indicatorHeight?: string;
    inputBorderColor?: string;
    inputBorderRadius?: string;
    inputFontColor?: string;
    inputFontSize?: string;
    inputLineHeight?: string;
    inputPadding?: string;
    inputPlaceholderColor?: string;
    numColumns?: string;
    outlineColor?: string;
    outlineSize?: string;
    skintoneBorderRadius?: string;
}

export { _default as VuemojiPicker, type VuemojiPickerStyle, useDatabase, useEmojiByGroup, useEmojiBySearchQuery, useEmojiByShortcode, useEmojiByUnicodeOrName };