@polyv/vue-components 1.0.1

package/src/hooks/tools/use-copy-text/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 复制文本
+ * @param text 复制内容
+ */
+export declare function copyText(text: string): Promise<unknown>;
+export declare const useCopyText: () => {
+    copyText: typeof copyText;
+    toastCopySuccess: () => void;
+};

package/src/hooks/tools/use-count-down/index.d.ts

@@ -0,0 +1,39 @@
+import { SimilarResponsive } from '../../../vue-utils';
+import { IRemaining as CountDownSurplusData } from '@polyv/utils/es/countdown';
+export interface UseCountDownOptions {
+    /**
+     * 总秒数，单位秒
+     */
+    second?: SimilarResponsive<number | undefined>;
+    /**
+     * 结束的时间戳
+     */
+    endTimestamp?: SimilarResponsive<number | undefined>;
+    /**
+     * 倒计时剩余时间改变回调
+     */
+    onCountDownChange?: (surplusData: CountDownSurplusData) => void;
+    /**
+     * 倒计时结束回调
+     */
+    onCountDownFinish?: () => void;
+}
+/**
+ * 倒计时
+ */
+export declare const useCountDown: (options?: UseCountDownOptions) => {
+    surplusTime: import('vue').Ref<{
+        days: number;
+        hours: number;
+        minutes: number;
+        seconds: number;
+        totalMsecs: number;
+    }>;
+    surplusSecond: import('vue').ComputedRef<number>;
+    computedSecond: () => number;
+    initCountDown: () => void;
+    startCountDown: (options?: UseCountDownOptions, init?: boolean) => void;
+    resetSurplus: () => void;
+    stopCountDown: () => void;
+    destroyCountDown: () => void;
+};

package/src/hooks/tools/use-event-bus/index.d.ts

@@ -0,0 +1,19 @@
+import { EventEmitter } from '@polyv/utils/es/event';
+type PwcMittEvents = {
+    [key: string]: any;
+};
+export type PwcEventEmitter = EventEmitter<PwcMittEvents>;
+export declare function createEmitter(): PwcEventEmitter;
+/**
+ * 获取事件订阅器
+ */
+export declare const useEventBusEmitter: () => {
+    getEmitter: () => PwcEventEmitter;
+};
+/**
+ * 设置 eventBus 监听
+ * @param event appEvents 中的事件
+ * @param callback 回调
+ */
+export declare const useEventBusListener: (event: string, callback: (...arg: any[]) => unknown) => void;
+export {};

package/src/hooks/tools/use-event-listener/index.d.ts

@@ -0,0 +1,2 @@
+import { SimilarResponsive } from '../../../vue-utils';
+export declare const useEventListener: <E extends keyof HTMLElementEventMap>(target: SimilarResponsive<HTMLElement | undefined>, event: E, listener: (ev: HTMLElementEventMap[E]) => any, options?: AddEventListenerOptions) => void;

package/src/hooks/tools/use-link-open/index.d.ts

@@ -0,0 +1,3 @@
+export declare const useLinkOpen: () => {
+    openLink: (link: string) => void;
+};

package/src/hooks/tools/use-set-interval/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 设置定时器
+ * @param callback 回调函数
+ * @param time 时间
+ */
+export declare const useSetInterval: <A extends unknown[] = []>(callback: (...args: A) => unknown, time: number) => {
+    startInterval: (...args: A) => void;
+    closeInterval: () => void;
+};

package/src/hooks/tools/use-set-timeout/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 设置定时器
+ * @param callback 回调函数
+ * @param time 时间
+ */
+export declare const useSetTimeout: <A extends unknown[] = []>(callback: (...args: A) => unknown, time: number) => {
+    startTimeout: (...args: A) => void;
+    closeTimeout: () => void;
+};

package/src/hooks/tools/use-simple-visible/index.d.ts

@@ -0,0 +1,41 @@
+export interface UseSimpleVisibleOptions {
+    /**
+     * 是否自动关闭
+     *
+     * @default false
+     */
+    autoClose?: boolean;
+    /**
+     * 自动关闭时间
+     *
+     * @default 5 * 1000
+     */
+    autoCloseTime?: number;
+    /**
+     * 显示时回调
+     */
+    showCallback?: () => void;
+    /**
+     * 隐藏时回调
+     */
+    hideCallback?: () => void;
+    /**
+     * 隐藏延迟回调
+     */
+    hideDelayCallback?: () => void;
+    /**
+     * 更新回调
+     */
+    changeCallback?: (visible: boolean) => void;
+}
+/**
+ * 简单的显隐 hook
+ * @param defaultVisible 默认显示状态，默认：false
+ */
+export declare const useSimpleVisible: (defaultVisible?: boolean, options?: UseSimpleVisibleOptions) => {
+    visible: import('vue').Ref<boolean>;
+    setVisible: (_visible?: boolean) => void;
+    show: () => void;
+    close: () => void;
+    toggle: () => void;
+};

package/src/hooks/tools/use-target-event-emitter/index.d.ts

@@ -0,0 +1,10 @@
+import { EventEmitter, EventRelationsType, EventType, EventHandler } from '@polyv/utils/es/event';
+export type TargetEventListeners<R extends EventRelationsType, E extends EventType> = {
+    [event in E]?: EventHandler<R, event>;
+};
+/**
+ * 事件监听器
+ * @param eventEmitter 事件监听器
+ * @param listeners 监听列表
+ */
+export declare const useTargetEventEmitter: <R extends EventRelationsType, E extends EventType>(eventEmitter: EventEmitter<R, E>, listeners: TargetEventListeners<R, E>) => void;

package/src/hooks/tools/use-window-resize-listener/index.d.ts

@@ -0,0 +1,34 @@
+export interface UseWindowResizeListenerOptions {
+    /**
+     * 是否自动监听
+     *
+     * @default true
+     */
+    autoListen?: boolean;
+    /**
+     * 自动监听后立即执行回调
+     *
+     * @default false
+     */
+    immediately?: boolean;
+    /**
+     * 防抖时间
+     *
+     * @default 0
+     */
+    debounceTime?: number;
+}
+/**
+ * 监听 windows resize 事件
+ */
+export declare const useWindowResizeListener: (callback?: (data: {
+    width: number;
+    height: number;
+}) => unknown, options?: UseWindowResizeListenerOptions) => {
+    windowSize: import('vue').Ref<{
+        width: number;
+        height: number;
+    }>;
+    bindWindowResize: () => void;
+    unbindWindowResize: () => void;
+};

package/src/hooks/vue/use-model-value/index.d.ts

@@ -0,0 +1,13 @@
+import { PropUtils } from '../../../vue-utils';
+type MVProps = {
+    [PropUtils.modelValueKey]?: unknown;
+};
+/**
+ * 使用 v-model 的值
+ * @param props 组件 props
+ */
+export declare const useModelValue: <P extends MVProps>(props: P) => {
+    modelValue: import('vue').ComputedRef<P["value"]>;
+    updateModelValue: (value: P[typeof PropUtils.modelValueKey]) => void;
+};
+export {};

package/src/hooks/vue/use-vue/index.d.ts

@@ -0,0 +1,15 @@
+import { default as Vue, Component, VNode } from 'vue';
+/**
+ * 对 Vue 一些方法的简单封装
+ */
+export declare const useVue: () => {
+    getInstance: () => Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue> | undefined;
+    destroyCurrentInstance: () => void;
+    getCurrentElem: () => Element | undefined;
+    getCurrentChildrens: () => Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>[] | undefined;
+    getSlot: (slotName?: string) => VNode[];
+    createVueInstance: <Props extends Record<string, any> = {}, Emits extends Record<string, any> = {}>(vueComponent: Component, options?: {
+        props?: Props;
+        on?: Emits;
+    }) => unknown;
+};

package/src/index.d.ts

@@ -0,0 +1,6 @@
+export * from './components/exports';
+export * from './hooks/exports';
+export * from './plugins/exports';
+export * from './lang/exports';
+export * from './interface';
+export * from './vue-utils';

package/src/interface/index.d.ts

@@ -0,0 +1,4 @@
+/** 通用对象定义 */
+export type UniversalParams<V = unknown> = {
+    [key: string]: V;
+};

package/src/lang/common/en.json.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+  "common": {
+    "confirm": "Confirm",
+    "cancel": "Cancel",
+    "close": "Close",
+    "submit": "Submit",
+    "submitSuccess": "Success",
+    "known": "I know",
+    "copySuccess": "Copy success"
+  }
+}
+;
+
+export default _default;

package/src/lang/common/index.d.ts

@@ -0,0 +1,4 @@
+import { default as zhCN } from './zh-CN.json';
+import { I18nConfig } from '../types';
+export type CommonLangs = typeof zhCN;
+export declare const commonLangs: I18nConfig<typeof zhCN>;

package/src/lang/common/ja.json.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  "common": {
+    "confirm": "確認",
+    "cancel": "キャンセル",
+    "close": "閉じる",
+    "submit": "送信",
+    "submitSuccess": "送信成功",
+    "known": "わかりました",
+    "copySuccess": "コピー成功"
+  }
+};
+
+export default _default;

package/src/lang/common/ko.json.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  "common": {
+    "confirm": "확인",
+    "cancel": "취소",
+    "close": "닫기",
+    "submit": "제출",
+    "submitSuccess": "제출 성공",
+    "known": "알겠습니다",
+    "copySuccess": "복사 성공"
+  }
+};
+
+export default _default;

package/src/lang/common/ru.json.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  "common": {
+    "confirm": "Подтвердить",
+    "cancel": "Отмена",
+    "close": "Закрыть",
+    "submit": "Отправить",
+    "submitSuccess": "Успешно отправлено",
+    "known": "Понятно",
+    "copySuccess": "Скопировано успешно"
+  }
+};
+
+export default _default;

package/src/lang/common/zh-CN.json.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+  "common": {
+    "confirm": "确认",
+    "cancel": "取消",
+    "close": "关闭",
+    "submit": "提交",
+    "submitSuccess": "提交成功",
+    "known": "我知道了",
+    "copySuccess": "复制成功"
+  }
+}
+;
+
+export default _default;

package/src/lang/common/zh-TW.json.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  "common": {
+    "confirm": "確認",
+    "cancel": "取消",
+    "close": "關閉",
+    "submit": "提交",
+    "submitSuccess": "提交成功",
+    "known": "我知道了",
+    "copySuccess": "複製成功"
+  }
+};
+
+export default _default;

package/src/lang/exports.d.ts

@@ -0,0 +1,2 @@
+export * from './hook';
+export type { I18nLangs, I18nConfig } from './types';

package/src/lang/hook.d.ts

@@ -0,0 +1,12 @@
+import { CommonLangs } from './common';
+import { I18nConfig, I18nLangs, NestedKeys } from './types';
+import { UniversalParams } from '../interface';
+type LangData<C extends Record<string, unknown>> = C & CommonLangs;
+export declare function createI18n<C extends Record<string, unknown> = {}>(config?: I18nConfig<C>): {
+    useI18n: () => {
+        $t: (key: NestedKeys<LangData<C>>, options?: UniversalParams<string | number>) => string;
+        currentLang: import('vue').ComputedRef<I18nLangs>;
+        isZhCN: import('vue').ComputedRef<boolean>;
+    };
+};
+export {};

package/src/lang/internal/en.json.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+  "rewardReceive": {
+    "receiveTitleForm": "Fill in the winning information",
+    "receiveTitleView": "View information",
+    "receiveTitleQrcode": "Scan the code to receive the award",
+    "receiveTitleLink": "Open link",
+    "receiveDesc": "Please fill in your personal information, which will be used to send the prize and contact you.",
+    "overTimeDesc": "Deadline for filling in information: ",
+    "choiceAddress": "Select Region",
+    "addressDetail": "Address detail",
+    "addressPlaceholder": "Please select region",
+    "qrcodeTips": "Long press to recognize QR code",
+    "deadLine": "You have exceeded the validity period for filling in contact information",
+    "checkProtocol": "Please tick the privacy statement",
+    "error1": "Please fill in the information",
+    "error2": "Please enter the correct phone number",
+    "submitText": "Agree to submit"
+  }
+};
+
+export default _default;

package/src/lang/internal/index.d.ts

@@ -0,0 +1,34 @@
+declare const useInternalI18n: () => {
+    $t: (key: import('../types').NestedKeys<{
+        rewardReceive: {
+            receiveTitleForm: string;
+            receiveTitleView: string;
+            receiveTitleQrcode: string;
+            receiveTitleLink: string;
+            receiveDesc: string;
+            overTimeDesc: string;
+            choiceAddress: string;
+            addressDetail: string;
+            addressPlaceholder: string;
+            qrcodeTips: string;
+            deadLine: string;
+            checkProtocol: string;
+            error1: string;
+            error2: string;
+            submitText: string;
+        };
+    } & {
+        common: {
+            confirm: string;
+            cancel: string;
+            close: string;
+            submit: string;
+            submitSuccess: string;
+            known: string;
+            copySuccess: string;
+        };
+    }>, options?: import('../..').UniversalParams<string | number>) => string;
+    currentLang: import('vue').ComputedRef<import('../types').I18nLangs>;
+    isZhCN: import('vue').ComputedRef<boolean>;
+};
+export { useInternalI18n };

package/src/lang/internal/ja.json.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+  "rewardReceive": {
+    "receiveTitleForm": "当選情報の記入",
+    "receiveTitleView": "当選情報の確認",
+    "receiveTitleQrcode": "QRコードをスキャンして賞品を受け取る",
+    "receiveTitleLink": "リンクを開く",
+    "receiveDesc": "賞品の送付及びお問い合わせのため、個人情報を入力してください。",
+    "overTimeDesc": "情報記入期限：",
+    "choiceAddress": "地域を選択",
+    "addressDetail": "詳細な住所",
+    "addressPlaceholder": "地域を選択してください",
+    "qrcodeTips": "長押ししてQRコードを認識",
+    "deadLine": "連絡先情報の記入有効期限を過ぎました",
+    "checkProtocol": "プライバシー声明にチェックを入れてください",
+    "error1": "情報を入力してください",
+    "error2": "正しい電話番号を入力してください",
+    "submitText": "同意する"
+  }
+};
+
+export default _default;

package/src/lang/internal/ko.json.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+  "rewardReceive": {
+    "receiveTitleForm": "당첨 정보 작성",
+    "receiveTitleView": "당첨 정보 보기",
+    "receiveTitleQrcode": "QR 코드 스캔하여 상품 수령",
+    "receiveTitleLink": "링크 열기",
+    "receiveDesc": "상품 발송 및 문의를 위해 개인 정보를 입력해 주세요.",
+    "overTimeDesc": "정보 작성 기한: ",
+    "choiceAddress": "지역 선택",
+    "addressDetail": "상세 주소",
+    "addressPlaceholder": "지역을 선택해 주세요",
+    "qrcodeTips": "QR 코드를 길게 눌러 인식",
+    "deadLine": "연락 정보 작성 유효 기간이 초과되었습니다",
+    "checkProtocol": "개인정보 처리방침에 동의해 주세요",
+    "error1": "정보를 입력해 주세요",
+    "error2": "정확한 전화번호를 입력해 주세요",
+    "submitText": "동의하기"
+  }
+};
+
+export default _default;

package/src/lang/internal/ru.json.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+  "rewardReceive": {
+    "receiveTitleForm": "Заполните информацию",
+    "receiveTitleView": "Просмотр информации",
+    "receiveTitleQrcode": "Отсканируйте QR-код",
+    "receiveTitleLink": "Открыть ссылку",
+    "receiveDesc": "Для успешной доставки приза нам нужна ваша личная информация, пожалуйста, заполните её правильно.",
+    "overTimeDesc": "Срок заполнения: ",
+    "choiceAddress": "Выберите регион",
+    "addressDetail": "Подробный адрес",
+    "addressPlaceholder": "Выберите регион",
+    "qrcodeTips": "Нажмите и удерживайте для сканирования QR-кода",
+    "deadLine": "Вы превысили срок заполнения контактной информации",
+    "checkProtocol": "Пожалуйста, примите политику конфиденциальности",
+    "error1": "Пожалуйста, заполните информацию",
+    "error2": "Пожалуйста, введите правильный номер телефона",
+    "submitText": "Согласиться"
+  }
+} ;
+
+export default _default;

package/src/lang/internal/zh-CN.json.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+  "rewardReceive": {
+    "receiveTitleForm": "填写信息",
+    "receiveTitleView": "查看信息",
+    "receiveTitleQrcode": "扫码领奖",
+    "receiveTitleLink": "打开链接",
+    "receiveDesc": "请填写您的个人信息，用于发送奖品及联系您。",
+    "overTimeDesc": "截止填写时间：",
+    "choiceAddress": "选择地区",
+    "addressDetail": "详细地址",
+    "addressPlaceholder": "请选择地区",
+    "qrcodeTips": "长按识别二维码",
+    "deadLine": "您已超过填写联系信息的有效期",
+    "checkProtocol": "请勾选隐私声明",
+    "error1": "请完善信息",
+    "error2": "请输入正确的手机号码",
+    "submitText": "同意提交"
+  }
+};
+
+export default _default;

package/src/lang/internal/zh-TW.json.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+  "rewardReceive": {
+    "receiveTitleForm": "填寫信息",
+    "receiveTitleView": "查看信息",
+    "receiveTitleQrcode": "掃碼領獎",
+    "receiveTitleLink": "打開鏈接",
+    "receiveDesc": "為了順利送達獎品，我們需要您提供個人信息，請務必填寫正確。",
+    "overTimeDesc": "截止填寫時間：",
+    "choiceAddress": "選擇地區",
+    "addressDetail": "詳細地址",
+    "addressPlaceholder": "請選擇地區",
+    "qrcodeTips": "長按識別二維碼",
+    "deadLine": "您已超過填寫聯繫信息的有效期",
+    "checkProtocol": "請勾選隱私聲明",
+    "error1": "請完善信息",
+    "error2": "請輸入正確的手機號碼",
+    "submitText": "同意提交"
+  }
+};
+
+export default _default;

package/src/lang/types.d.ts

@@ -0,0 +1,12 @@
+export type NestedKeys<T> = {
+    [K in keyof T]: T[K] extends object ? `${K & string}` | `${K & string}.${NestedKeys<T[K]>}` : `${K & string}`;
+}[keyof T];
+export type I18nLangs = 'zh_CN' | 'zh_TW' | 'en' | 'ja' | 'ko' | 'ru';
+export interface I18nConfig<C extends Record<string, unknown>> {
+    zh_CN: C;
+    zh_TW: C;
+    en: C;
+    ja: C;
+    ko: C;
+    ru: C;
+}

package/src/lang/utils.d.ts

@@ -0,0 +1 @@
+export declare function compressObject<T extends Record<string, any>>(obj: T, prefix?: string): Record<string, any>;

package/src/plugins/async-validator/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Schema } from 'async-validator';
+export type { Rules as ValidatorRules, Rule as ValidatorRule, RuleItem as ValidatorRuleItem } from 'async-validator';
+export default Schema;

package/src/plugins/exports.d.ts

@@ -0,0 +1,2 @@
+export * from './async-validator';
+export * from './svgaplayerweb/load-svga-player';

package/src/plugins/polyv-ui/area-utils.d.ts

@@ -0,0 +1,13 @@
+import { AreaData, AreaDataJson } from './types';
+/**
+ * 通过value与级联数据获取选择中的数据
+ * @param value 绑定值
+ * @param data 地区数据
+ */
+export declare function getSelectData(value: string[], data: AreaDataJson): AreaData[];
+export declare function getAreaSelectNames(value: string[], data: AreaDataJson): string[];
+/**
+ * 判断是否选择完成
+ * @param value 已选值数组
+ */
+export declare function isSelectFinish(value: string[], data: AreaDataJson): boolean;

package/src/plugins/polyv-ui/mobile-import.d.ts

@@ -0,0 +1 @@
+export { default as PlvAreaPicker } from '@polyv/polyv-ui/lib-front-mob/area-picker';

package/src/plugins/polyv-ui/types.d.ts

@@ -0,0 +1,19 @@
+import { default as areaData } from '@polyv/polyv-ui/resources/china-area.json';
+export interface ImagePreviewOptions {
+    /** 模式显示的下标 */
+    initialIndex?: number;
+}
+export interface AreaData {
+    name: string;
+    code: string;
+    childrens?: AreaData[];
+}
+export type AreaDataJson = typeof areaData;
+export interface AreaPickerComponent {
+    /** 通过value与级联数据获取选择中的数据 */
+    getSelectData: (value: string[], areaData: object) => AreaData[];
+    /** 是否已选择完成 */
+    isSelectFinish: (value: string[], areaData: object) => boolean;
+    /** 加载中国地区数据 */
+    loadAreaDataUrl: () => Promise<AreaDataJson>;
+}

package/src/plugins/svgaplayerweb/load-svga-player.d.ts

@@ -0,0 +1,15 @@
+import { Player as SVGAPlayer, Parser as SVGAParser, VideoEntity as SVGAVideoEntity } from 'svgaplayerweb';
+export type { SVGAPlayer, SVGAParser, SVGAVideoEntity };
+export interface SVGASdk {
+    Player: typeof SVGAPlayer;
+    Parser: typeof SVGAParser;
+}
+declare global {
+    interface Window {
+        SVGA?: SVGASdk;
+    }
+}
+/**
+ * 加载 svga 播放器
+ */
+export declare function loadSvgaPlayer(): Promise<SVGASdk>;

package/src/utils/dom.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 格式化样式数值
+ * @param size 数值或数值字符串
+ */
+export declare function formatStyleSize(size?: string | number): string | undefined;

package/src/vue-utils/emit-utils.d.ts

@@ -0,0 +1,12 @@
+import { EmitFn, ObjectEmitsOptions } from 'vue/types/v3-setup-context';
+export type EmitFuncType<P = void> = (arg: P) => void;
+/**
+ * 创建 emit 配置的空函数
+ */
+export declare const emitFunc: <P = void>() => EmitFuncType<P>;
+export type VueEmit<F extends () => ObjectEmitsOptions> = EmitFn<ReturnType<F>>;
+export type UpdateEmitReturn<K extends string, P = void> = Record<`update:${K}`, EmitFuncType<P>>;
+export declare function updateModelEmit<K extends string, P>(field: K): UpdateEmitReturn<K, P>;
+export type FormatEmit<F extends () => ObjectEmitsOptions> = {
+    [K in keyof ReturnType<F>]?: (...args: ReturnType<F>[K] extends (...args: any) => any ? Parameters<ReturnType<F>[K]> : []) => void;
+};

package/src/vue-utils/index.d.ts

@@ -0,0 +1,18 @@
+import { Ref, ComputedRef, DefineComponent } from 'vue';
+export * from './emit-utils';
+export * from './props-utils';
+/** 类似响应式 */
+export type SimilarResponsive<T = unknown> = T | Ref<T>;
+/** 响应式 Ref，包括 ComputedRef 和 Ref */
+export type ResponsiveRef<T = unknown> = ComputedRef<T> | Ref<T>;
+/** 组件实例类型 */
+export type ComponentInstance<T> = T extends new (...args: any[]) => infer R ? R : T extends (...args: any[]) => infer R ? R extends {
+    __ctx?: infer K;
+} ? Exclude<K, void> extends {
+    expose: (...args: infer K) => void;
+} ? K[0] & InstanceType<DefineComponent> : any : any : any;
+/**
+ * 获取 ref 响应式对象中的 dom 节点，如果不是则返回 undefined
+ * @param targetRef 响应式对象
+ */
+export declare const getRefElem: <E extends HTMLElement>(targetRef: Ref | HTMLElement) => E | undefined;