@type-dom/ui 0.1.3 → 0.2.0

package/src/hooks/use-floating/index.js

@@ -1,90 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.arrowMiddleware = exports.useFloating = exports.getPositionDataWithUnit = exports.useFloatingProps = void 0;
-const tslib_1 = require("tslib");
-// import { isRef, onMounted, ref, unref, watchEffect } from 'vue'
-// import { unrefElement } from '@vueuse/core'
-// import { isNil } from 'lodash-unified'
-// import { arrow as arrowCore, computePosition } from '@floating-ui/dom'
-// import { buildProps, isClient, keysOf } from '@element-plus/utils'
-//
-// import type { Ref, ToRefs } from 'vue'
-const popper_1 = require("@type-dom/popper");
-const signals_1 = require("@type-dom/signals");
-const framework_1 = require("@type-dom/framework");
-const utils_1 = require("@type-dom/utils");
-exports.useFloatingProps = {};
-const unrefReference = (elRef) => {
-    if (!utils_1.isClient)
-        return;
-    if (!elRef)
-        return elRef;
-    const unrefEl = (0, framework_1.unrefElement)(elRef);
-    if (unrefEl)
-        return unrefEl;
-    return (0, signals_1.isRef)(elRef) ? unrefEl : elRef;
-};
-const getPositionDataWithUnit = (record, key) => {
-    const value = record === null || record === void 0 ? void 0 : record[key];
-    return (0, utils_1.isNil)(value) ? '' : `${value}px`;
-};
-exports.getPositionDataWithUnit = getPositionDataWithUnit;
-const useFloating = ({ middleware, placement, strategy, }) => {
-    const referenceRef = (0, signals_1.signal)();
-    const contentRef = (0, signals_1.signal)();
-    const x = (0, signals_1.signal)();
-    const y = (0, signals_1.signal)();
-    const middlewareData = (0, signals_1.signal)({});
-    const states = {
-        x,
-        y,
-        placement,
-        strategy,
-        middlewareData,
-    };
-    const update = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-        if (!utils_1.isClient)
-            return;
-        const referenceEl = unrefReference(referenceRef);
-        const contentEl = (0, framework_1.unrefElement)(contentRef);
-        if (!referenceEl || !contentEl)
-            return;
-        const data = yield (0, popper_1.computePosition)(referenceEl, contentEl, {
-            placement: (0, signals_1.unref)(placement),
-            strategy: (0, signals_1.unref)(strategy),
-            middleware: (0, signals_1.unref)(middleware),
-        });
-        (0, utils_1.keysOf)(states).forEach((key) => {
-            states[key].set(data[key]);
-        });
-    });
-    (0, framework_1.onMounted)(() => {
-        (0, signals_1.effect)(() => {
-            // watchEffect
-            update();
-        });
-    });
-    return Object.assign(Object.assign({}, states), { update,
-        referenceRef,
-        contentRef });
-};
-exports.useFloating = useFloating;
-const arrowMiddleware = ({ arrowRef, padding, }) => {
-    return {
-        name: 'arrow',
-        options: {
-            element: arrowRef,
-            padding,
-        },
-        fn(args) {
-            const arrowEl = (0, signals_1.unref)(arrowRef);
-            if (!arrowEl)
-                return {};
-            return (0, popper_1.arrow)({
-                element: arrowEl,
-                padding,
-            }).fn(args);
-        },
-    };
-};
-exports.arrowMiddleware = arrowMiddleware;

package/src/hooks/use-focus-controller/index.d.ts

@@ -1,25 +0,0 @@
-import { Computed, Signal } from '@type-dom/signals';
-interface UseFocusControllerOptions {
-    /**
-     * return true to cancel focus
-     * @param event FocusEvent
-     */
-    beforeFocus?: (event?: FocusEvent) => boolean | undefined;
-    afterFocus?: () => void;
-    /**
-     * return true to cancel blur
-     * @param event FocusEvent
-     */
-    beforeBlur?: (event?: FocusEvent) => boolean | undefined;
-    afterBlur?: () => void;
-}
-export declare function useFocusController<T extends {
-    focus: () => void;
-}>(target: Signal<T | undefined> | Computed<T | undefined>, { beforeFocus, afterFocus, beforeBlur, afterBlur, }?: UseFocusControllerOptions): {
-    isFocused: Signal<boolean>;
-    /** Avoid using wrapperRef and handleFocus/handleBlur together */
-    wrapperRef: Signal<HTMLElement>;
-    handleFocus: (event?: FocusEvent) => void;
-    handleBlur: (event?: FocusEvent) => void;
-};
-export {};

package/src/hooks/use-focus-controller/index.js

@@ -1,74 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFocusController = useFocusController;
-const signals_1 = require("@type-dom/signals");
-const framework_1 = require("@type-dom/framework");
-const utils_1 = require("@type-dom/utils");
-function useFocusController(target, { beforeFocus, afterFocus, beforeBlur, afterBlur, } = {}) {
-    const instance = (0, framework_1.getCurrentInstance)();
-    const { emit } = instance;
-    const wrapperRef = (0, signals_1.signal)();
-    const isFocused = (0, signals_1.signal)(false);
-    const handleFocus = (event) => {
-        // console.log('handleFocus . ');
-        const cancelFocus = (0, utils_1.isFunction)(beforeFocus) ? beforeFocus(event) : false;
-        if (cancelFocus || isFocused.get())
-            return;
-        isFocused.set(true);
-        emit('focus', event);
-        afterFocus === null || afterFocus === void 0 ? void 0 : afterFocus();
-    };
-    const handleBlur = (event) => {
-        var _a;
-        const cancelBlur = (0, utils_1.isFunction)(beforeBlur) ? beforeBlur(event) : false;
-        if (cancelBlur ||
-            ((event === null || event === void 0 ? void 0 : event.relatedTarget) &&
-                ((_a = wrapperRef.get()) === null || _a === void 0 ? void 0 : _a.contains(event === null || event === void 0 ? void 0 : event.relatedTarget))))
-            return;
-        isFocused.set(false);
-        emit('blur', event);
-        afterBlur === null || afterBlur === void 0 ? void 0 : afterBlur();
-    };
-    const handleClick = () => {
-        var _a, _b;
-        if (((_a = wrapperRef.get()) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) &&
-            wrapperRef.get() !== document.activeElement) {
-            return;
-        }
-        if (target.get() instanceof framework_1.TypeElement) {
-            target.get().dom.focus();
-        }
-        else {
-            (_b = target.get()) === null || _b === void 0 ? void 0 : _b.focus();
-        }
-    };
-    // todo
-    (0, signals_1.watch)(wrapperRef, (el) => {
-        if (el) {
-            el.setAttribute('tabindex', '-1');
-        }
-    });
-    // console.log('then listen wrapperRef ', wrapperRef.get());
-    (0, framework_1.useEventListener)(wrapperRef, 'focus', handleFocus, true);
-    (0, framework_1.useEventListener)(wrapperRef, 'blur', handleBlur, true);
-    (0, framework_1.useEventListener)(wrapperRef, 'click', handleClick, true);
-    // only for test-dts
-    if (process.env.NODE_ENV === 'test') {
-        (0, framework_1.onMounted)(() => {
-            const targetEl = (0, utils_1.isElement)(target.get())
-                ? target.get()
-                : document.querySelector('input,textarea');
-            if (targetEl) {
-                (0, framework_1.useEventListener)(targetEl, 'focus', handleFocus, true);
-                (0, framework_1.useEventListener)(targetEl, 'blur', handleBlur, true);
-            }
-        });
-    }
-    return {
-        isFocused,
-        /** Avoid using wrapperRef and handleFocus/handleBlur together */
-        wrapperRef,
-        handleFocus,
-        handleBlur,
-    };
-}

package/src/hooks/use-forward-ref/index.d.ts

@@ -1,14 +0,0 @@
-import { InjectionKey } from '@type-dom/framework';
-import { Ref } from '@type-dom/signals';
-type ForwardRefSetter = <T>(el: T) => void;
-export type ForwardRefInjectionContext = {
-    setForwardRef: ForwardRefSetter;
-};
-export declare const FORWARD_REF_INJECTION_KEY: InjectionKey<ForwardRefInjectionContext>;
-export declare const useForwardRef: <T>(forwardRef?: Ref<T | undefined>) => void;
-export declare const useForwardRefDirective: (setForwardRef: ForwardRefSetter) => {
-    mounted(el: HTMLElement): void;
-    updated(el: HTMLElement): void;
-    unmounted(): void;
-};
-export {};

package/src/hooks/use-forward-ref/index.js

@@ -1,31 +0,0 @@
-"use strict";
-// import { provide } from 'vue'
-//
-// import type { InjectionKey, ObjectDirective, Ref } from 'vue'
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useForwardRefDirective = exports.useForwardRef = exports.FORWARD_REF_INJECTION_KEY = void 0;
-const framework_1 = require("@type-dom/framework");
-exports.FORWARD_REF_INJECTION_KEY = Symbol('elForwardRef');
-const useForwardRef = (forwardRef) => {
-    const setForwardRef = (el) => {
-        forwardRef === null || forwardRef === void 0 ? void 0 : forwardRef.set(el); // el type todo check
-    };
-    (0, framework_1.provide)(exports.FORWARD_REF_INJECTION_KEY, {
-        setForwardRef,
-    });
-};
-exports.useForwardRef = useForwardRef;
-const useForwardRefDirective = (setForwardRef) => {
-    return {
-        mounted(el) {
-            setForwardRef(el);
-        },
-        updated(el) {
-            setForwardRef(el);
-        },
-        unmounted() {
-            setForwardRef(null);
-        },
-    };
-};
-exports.useForwardRefDirective = useForwardRefDirective;

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

@@ -1,9 +0,0 @@
-import { InjectionKey } from '@type-dom/framework';
-import { Computed, MaybeRef } from '@type-dom/signals';
-export type TdIdInjectionContext = {
-    prefix: number;
-    current: number;
-};
-export declare const ID_INJECTION_KEY: InjectionKey<TdIdInjectionContext>;
-export declare const useIdInjection: () => TdIdInjectionContext;
-export declare const useId: (deterministicId?: MaybeRef<string>) => Computed<string>;

package/src/hooks/use-id/index.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useId = exports.useIdInjection = exports.ID_INJECTION_KEY = void 0;
-const framework_1 = require("@type-dom/framework");
-const utils_1 = require("@type-dom/utils");
-const signals_1 = require("@type-dom/signals");
-const defaultIdInjection = {
-    prefix: Math.floor(Math.random() * 10000),
-    current: 0,
-};
-exports.ID_INJECTION_KEY = Symbol('tdIdInjection');
-const useIdInjection = () => {
-    return (0, framework_1.getCurrentInstance)()
-        ? (0, framework_1.inject)(exports.ID_INJECTION_KEY, defaultIdInjection)
-        : defaultIdInjection;
-};
-exports.useIdInjection = useIdInjection;
-const useId = (deterministicId) => {
-    // const idInjection = defaultIdInjection;
-    const idInjection = (0, exports.useIdInjection)();
-    if (!utils_1.isClient && idInjection === defaultIdInjection) {
-        console.warn('IdInjection', `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
-usage: app.provide(ID_INJECTION_KEY, {
-  prefix: number,
-  current: number,
-})`);
-    }
-    // NOTE: Here we use `computedEager` to calculate the id value immediately, avoiding inconsistent id generation due to the lazy feature of `computed` when server rendering.
-    return (0, signals_1.computed)(() => (0, signals_1.unref)(deterministicId) ||
-        `td-id-${idInjection.prefix}-${idInjection.current++}`);
-};
-exports.useId = useId;

package/src/hooks/use-intermediate-render/index.d.ts

@@ -1,11 +0,0 @@
-import { Ref } from '@type-dom/signals';
-export type UseDelayedRenderProps = {
-    indicator: Ref<boolean>;
-    intermediateIndicator: Ref<boolean>;
-    shouldSetIntermediate?: (step: 'show' | 'hide') => boolean;
-    beforeShow?: () => void;
-    beforeHide?: () => void;
-    afterShow?: () => void;
-    afterHide?: () => void;
-};
-export declare const useDelayedRender: ({ indicator, intermediateIndicator, shouldSetIntermediate, beforeShow, afterShow, afterHide, beforeHide, }: UseDelayedRenderProps) => void;

package/src/hooks/use-intermediate-render/index.js

@@ -1,43 +0,0 @@
-"use strict";
-// import { nextTick, unref, watch } from 'vue'
-//
-// import type { Ref } from 'vue'
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDelayedRender = void 0;
-const signals_1 = require("@type-dom/signals");
-const framework_1 = require("@type-dom/framework");
-const useDelayedRender = ({ indicator, intermediateIndicator, shouldSetIntermediate = () => true, beforeShow, afterShow, afterHide, beforeHide, }) => {
-    (0, signals_1.watch)(() => (0, signals_1.unref)(indicator), (val) => {
-        if (val) {
-            beforeShow === null || beforeShow === void 0 ? void 0 : beforeShow();
-            (0, framework_1.nextTick)(() => {
-                if (!(0, signals_1.unref)(indicator))
-                    return;
-                if (shouldSetIntermediate('show')) {
-                    intermediateIndicator.set(true);
-                }
-            });
-        }
-        else {
-            beforeHide === null || beforeHide === void 0 ? void 0 : beforeHide();
-            (0, framework_1.nextTick)(() => {
-                if ((0, signals_1.unref)(indicator))
-                    return;
-                if (shouldSetIntermediate('hide')) {
-                    intermediateIndicator.set(false);
-                }
-            });
-        }
-    });
-    // because we don't always set the value ourselves, so that we
-    // simply watch the value's state, then invoke the corresponding hook.
-    (0, signals_1.watch)(() => intermediateIndicator.get(), (val) => {
-        if (val) {
-            afterShow === null || afterShow === void 0 ? void 0 : afterShow();
-        }
-        else {
-            afterHide === null || afterHide === void 0 ? void 0 : afterHide();
-        }
-    });
-};
-exports.useDelayedRender = useDelayedRender;

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

@@ -1,15 +0,0 @@
-import { Ref, MaybeRef } from '@type-dom/signals';
-import { InjectionKey } from '@type-dom/framework';
-import { Language } from '../../locale';
-export type TranslatorOption = Record<string, string | number>;
-export type Translator = (path: string, option?: TranslatorOption) => string;
-export type LocaleContext = {
-    locale: Ref<Language>;
-    lang: Ref<string>;
-    t: Translator;
-};
-export declare const buildTranslator: (locale: MaybeRef<Language>) => Translator;
-export declare const translate: (path: string, option: undefined | TranslatorOption, locale: Language) => string;
-export declare const buildLocaleContext: (locale: MaybeRef<Language>) => LocaleContext;
-export declare const localeContextKey: InjectionKey<Ref<Language | undefined>>;
-export declare const useLocale: (localeOverrides?: Ref<Language | undefined>) => LocaleContext;

package/src/hooks/use-locale/index.js

@@ -1,34 +0,0 @@
-"use strict";
-// import { computed, inject, isRef, ref, unref } from 'vue'
-// import { get } from 'lodash-unified'
-// import English from '@element-plus/locale/lang/en'
-//
-// import type { MaybeRef } from '@vueuse/core'
-// import type { InjectionKey, Ref } from 'vue'
-// import type { Language } from '@element-plus/locale'
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLocale = exports.localeContextKey = exports.buildLocaleContext = exports.translate = exports.buildTranslator = void 0;
-const lodash_1 = require("lodash");
-const signals_1 = require("@type-dom/signals");
-const framework_1 = require("@type-dom/framework");
-const en_1 = require("../../locale/lang/en");
-const buildTranslator = (locale) => (path, option) => (0, exports.translate)(path, option, (0, signals_1.unref)(locale));
-exports.buildTranslator = buildTranslator;
-const translate = (path, option, locale) => (0, lodash_1.get)(locale, path, path).replace(/\{(\w+)\}/g, (_, key) => { var _a; return `${(_a = option === null || option === void 0 ? void 0 : option[key]) !== null && _a !== void 0 ? _a : `{${key}}`}`; });
-exports.translate = translate;
-const buildLocaleContext = (locale) => {
-    const lang = (0, signals_1.computed)(() => (0, signals_1.unref)(locale).name);
-    const localeRef = (0, signals_1.isRef)(locale) ? locale : (0, signals_1.signal)(locale);
-    return {
-        lang,
-        locale: localeRef,
-        t: (0, exports.buildTranslator)(locale),
-    };
-};
-exports.buildLocaleContext = buildLocaleContext;
-exports.localeContextKey = Symbol('localeContextKey');
-const useLocale = (localeOverrides) => {
-    const locale = localeOverrides || (0, framework_1.inject)(exports.localeContextKey, (0, signals_1.signal)());
-    return (0, exports.buildLocaleContext)((0, signals_1.computed)(() => locale.get() || en_1.default));
-};
-exports.useLocale = useLocale;

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

@@ -1,11 +0,0 @@
-import type { UseNamespaceReturn } from '../use-namespace';
-import { Ref } from '@type-dom/signals';
-export type UseLockScreenOptions = {
-    ns?: UseNamespaceReturn;
-};
-/**
- * Hook that monitoring the ref value to lock or unlock the screen.
- * When the trigger became true, it assumes modal is now opened and vice versa.
- * @param trigger {Ref<boolean>}
- */
-export declare const useLockscreen: (trigger: Ref<boolean>, options?: UseLockScreenOptions) => void;

package/src/hooks/use-lockscreen/index.js

@@ -1,67 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLockscreen = void 0;
-// import { computed, isRef, onScopeDispose, watch } from 'vue'
-// import {
-//   addClass,
-//   getScrollBarWidth,
-//   getStyle,
-//   hasClass,
-//   isClient,
-//   removeClass,
-//   throwError,
-// } from '@element-plus/utils'
-const use_namespace_1 = require("../use-namespace");
-const signals_1 = require("@type-dom/signals");
-const utils_1 = require("@type-dom/utils");
-/**
- * Hook that monitoring the ref value to lock or unlock the screen.
- * When the trigger became true, it assumes modal is now opened and vice versa.
- * @param trigger {Ref<boolean>}
- */
-const useLockscreen = (trigger, options = {}) => {
-    if (!(0, signals_1.isRef)(trigger)) {
-        (0, utils_1.throwError)('[useLockscreen]', 'You need to pass a ref param to this function');
-    }
-    const ns = options.ns || (0, use_namespace_1.useNamespace)('popup');
-    const hiddenCls = (0, signals_1.computed)(() => ns.bm('parent', 'hidden'));
-    if (!utils_1.isClient || (0, utils_1.hasClass)(document.body, hiddenCls.get())) {
-        return;
-    }
-    let scrollBarWidth = 0;
-    let withoutHiddenClass = false;
-    let bodyWidth = '0';
-    const cleanup = () => {
-        setTimeout(() => {
-            // When the test-dts case is running, the context environment simulated by jsdom may have been destroyed,
-            // and the document does not exist at this time.
-            if (typeof document === 'undefined')
-                return;
-            (0, utils_1.removeClass)(document === null || document === void 0 ? void 0 : document.body, hiddenCls.get());
-            if (withoutHiddenClass && document) {
-                document.body.style.width = bodyWidth;
-            }
-        }, 200);
-    };
-    (0, signals_1.watch)(trigger, (val) => {
-        if (!val) {
-            cleanup();
-            return;
-        }
-        withoutHiddenClass = !(0, utils_1.hasClass)(document.body, hiddenCls.get());
-        if (withoutHiddenClass) {
-            bodyWidth = document.body.style.width;
-        }
-        scrollBarWidth = (0, utils_1.getScrollBarWidth)(ns.namespace.get());
-        const bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
-        const bodyOverflowY = (0, utils_1.getStyle)(document.body, 'overflowY');
-        if (scrollBarWidth > 0 &&
-            (bodyHasOverflow || bodyOverflowY === 'scroll') &&
-            withoutHiddenClass) {
-            document.body.style.width = `calc(100% - ${scrollBarWidth}px)`;
-        }
-        (0, utils_1.addClass)(document.body, hiddenCls.get());
-    });
-    (0, signals_1.onScopeDispose)(() => cleanup());
-};
-exports.useLockscreen = useLockscreen;

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

@@ -1,6 +0,0 @@
-import { Ref } from '@type-dom/signals';
-type ModalInstance = {
-    handleClose: () => void;
-};
-export declare const useModal: (instance: ModalInstance, visibleRef: Ref<boolean>) => void;
-export {};

package/src/hooks/use-modal/index.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useModal = void 0;
-// import { watch } from 'vue'
-// import { isClient, useEventListener } from '@vueuse/core'
-// import { EVENT_CODE } from '@element-plus/constants'
-//
-// import type { Ref } from 'vue'
-const utils_1 = require("@type-dom/utils");
-const signals_1 = require("@type-dom/signals");
-const framework_1 = require("@type-dom/framework");
-const aria_1 = require("../../constants/aria");
-const modalStack = [];
-const closeModal = (e) => {
-    if (modalStack.length === 0)
-        return;
-    if (e.code === aria_1.EVENT_CODE.esc) {
-        e.stopPropagation();
-        const topModal = modalStack[modalStack.length - 1];
-        topModal.handleClose();
-    }
-};
-const useModal = (instance, visibleRef) => {
-    (0, signals_1.watch)(visibleRef, (val) => {
-        if (val) {
-            modalStack.push(instance);
-        }
-        else {
-            modalStack.splice(modalStack.indexOf(instance), 1);
-        }
-    });
-};
-exports.useModal = useModal;
-if (utils_1.isClient)
-    (0, framework_1.useEventListener)(document, 'keydown', closeModal);

package/src/hooks/use-model-toggle/index.d.ts

@@ -1,39 +0,0 @@
-import { Ref } from '@type-dom/signals';
-declare const _prop: boolean | null;
-declare const _event: (val: boolean) => void;
-export type UseModelTogglePropsRaw<T extends string> = {
-    [K in T]: typeof _prop;
-} & {
-    [K in `onUpdate:${T}`]: typeof _event;
-};
-export type UseModelTogglePropsGeneric<T extends string> = {
-    [K in T]: typeof _prop;
-} & {
-    [K in `onUpdate:${T}`]: typeof _event;
-};
-export declare const createModelToggleComposable: <T extends string>(name: T) => {
-    useModelToggle: ({ indicator, toggleReason, shouldHideWhenRouteChanges, shouldProceed, onShow, onHide, }: ModelToggleParams) => {
-        hide: (event?: Event) => void;
-        show: (event?: Event) => void;
-        toggle: () => void;
-        hasUpdateHandler: import("@type-dom/signals").Computed<boolean>;
-    };
-    useModelToggleProps: UseModelTogglePropsRaw<T>;
-    useModelToggleEmits: `update:${T}`[];
-};
-declare const useModelToggle: ({ indicator, toggleReason, shouldHideWhenRouteChanges, shouldProceed, onShow, onHide, }: ModelToggleParams) => {
-    hide: (event?: Event) => void;
-    show: (event?: Event) => void;
-    toggle: () => void;
-    hasUpdateHandler: import("@type-dom/signals").Computed<boolean>;
-}, useModelToggleProps: UseModelTogglePropsRaw<"modelValue">, useModelToggleEmits: "update:modelValue"[];
-export { useModelToggle, useModelToggleEmits, useModelToggleProps };
-export type UseModelToggleProps = typeof useModelToggleProps;
-export type ModelToggleParams = {
-    indicator: Ref<boolean>;
-    toggleReason?: Ref<Event | undefined>;
-    shouldHideWhenRouteChanges?: Ref<boolean>;
-    shouldProceed?: () => boolean;
-    onShow?: (event?: Event) => void;
-    onHide?: (event?: Event) => void;
-};