@type-dom/ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,35 @@
+"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

@@ -0,0 +1,39 @@
+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;
+};

package/src/hooks/use-model-toggle/index.js

@@ -0,0 +1,163 @@
+"use strict";
+// import { computed, getCurrentInstance, onMounted, watch } from 'vue'
+// import {
+//   buildProp,
+//   definePropType,
+//   isBoolean,
+//   isClient,
+//   isFunction,
+// } from '@element-plus/utils'
+// import type { ExtractPropType } from '@element-plus/utils'
+// import type { RouteLocationNormalizedLoaded } from 'vue-router'
+//
+// import type { ComponentPublicInstance, ExtractPropTypes, Ref } from 'vue'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModelToggleProps = exports.useModelToggleEmits = exports.useModelToggle = exports.createModelToggleComposable = void 0;
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const _prop = null;
+const _event = (val) => {
+    //
+};
+const createModelToggleComposable = (name) => {
+    const updateEventKey = `update:${name}`;
+    const updateEventKeyRaw = `onUpdate:${name}`;
+    const useModelToggleEmits = [updateEventKey];
+    const useModelToggleProps = {
+        [name]: _prop,
+        [updateEventKeyRaw]: _event,
+    };
+    const useModelToggle = ({ indicator, toggleReason, shouldHideWhenRouteChanges, shouldProceed, onShow, onHide, }) => {
+        const instance = (0, framework_1.getCurrentInstance)();
+        const { emit } = instance;
+        const props = instance.props;
+        const hasUpdateHandler = (0, signals_1.computed)(() => {
+            // console.warn('[useModelToggle]', ' hasUpdateHandler . updateEventKeyRaw is ', updateEventKeyRaw);
+            return (0, utils_1.isFunction)(props[updateEventKeyRaw]);
+        });
+        // when it matches the default value we say this is absent
+        // though this could be mistakenly passed from the user but we need to rule out that
+        // condition
+        // console.error('useModelToggle props[' + name + '] is ', props[name]);
+        // const isModelBindingAbsent = computed(() => props[name] === null); // visible控制显示、隐藏
+        const isModelBindingAbsent = (0, signals_1.computed)(() => !(0, signals_1.unref)(props[name]));
+        const doShow = (event) => {
+            if (indicator.get() === true) {
+                return;
+            }
+            indicator.set(true);
+            if (toggleReason) {
+                toggleReason.set(event);
+            }
+            if ((0, utils_1.isFunction)(onShow)) {
+                onShow(event);
+            }
+        };
+        const doHide = (event) => {
+            if (indicator.get() === false) {
+                return;
+            }
+            indicator.set(false);
+            if (toggleReason) {
+                toggleReason.set(event);
+            }
+            if ((0, utils_1.isFunction)(onHide)) {
+                onHide(event);
+            }
+        };
+        const show = (event) => {
+            // console.warn('[useModelToggle]', 'show .');
+            if (props.disabled === true ||
+                ((0, utils_1.isFunction)(shouldProceed) && !shouldProceed())) {
+                return;
+            }
+            const shouldEmit = hasUpdateHandler.get() && utils_1.isClient;
+            if (shouldEmit) {
+                emit(updateEventKey, true);
+            }
+            if (isModelBindingAbsent.get() || !shouldEmit) {
+                doShow(event);
+            }
+        };
+        const hide = (event) => {
+            if (props.disabled === true || !utils_1.isClient)
+                return;
+            const shouldEmit = hasUpdateHandler.get() && utils_1.isClient;
+            if (shouldEmit) {
+                emit(updateEventKey, false);
+            }
+            if (isModelBindingAbsent.get() || !shouldEmit) {
+                doHide(event);
+            }
+        };
+        const onChange = (val) => {
+            // console.warn('[useModelToggle] onChange val is ', val);
+            if (!(0, utils_1.isBoolean)(val))
+                return;
+            if (props.disabled && val) {
+                if (hasUpdateHandler.get()) {
+                    emit(updateEventKey, false);
+                }
+            }
+            else if (indicator.get() !== val) {
+                if (val) {
+                    doShow();
+                }
+                else {
+                    doHide();
+                }
+            }
+        };
+        const toggle = () => {
+            if (indicator.get()) {
+                hide();
+            }
+            else {
+                show();
+            }
+        };
+        (0, signals_1.watch)(() => (0, signals_1.unref)(props[name]), onChange);
+        // todo
+        if (shouldHideWhenRouteChanges
+        // &&
+        // instance.appContext.config.globalProperties.$route !== undefined
+        ) {
+            // watch(
+            //   () =>
+            //     ({
+            //   //     todo
+            //   //   ...(
+            //   //     instance.proxy as ComponentPublicInstance<{
+            //   //       $route: RouteLocationNormalizedLoaded
+            //   //     }>
+            //   //   ).$route,
+            //   }),
+            //   () => {
+            //     if (shouldHideWhenRouteChanges.get() && indicator.get()) {
+            //       hide()
+            //     }
+            //   }
+            // )
+        }
+        (0, framework_1.onMounted)(() => {
+            onChange((0, signals_1.unref)(props[name]));
+        });
+        return {
+            hide,
+            show,
+            toggle,
+            hasUpdateHandler,
+        };
+    };
+    return {
+        useModelToggle,
+        useModelToggleProps,
+        useModelToggleEmits,
+    };
+};
+exports.createModelToggleComposable = createModelToggleComposable;
+const { useModelToggle, useModelToggleProps, useModelToggleEmits } = (0, exports.createModelToggleComposable)('modelValue');
+exports.useModelToggle = useModelToggle;
+exports.useModelToggleProps = useModelToggleProps;
+exports.useModelToggleEmits = useModelToggleEmits;

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

@@ -0,0 +1,24 @@
+import { InjectionKey } from '@type-dom/framework';
+import { Ref } from '@type-dom/signals';
+export declare const defaultNamespace = "td";
+export declare const namespaceContextKey: InjectionKey<Ref<string | undefined>>;
+export declare const useGetDerivedNamespace: (namespaceOverrides?: Ref<string | undefined>) => import("@type-dom/signals").Computed<string>;
+export declare const useNamespace: (block: string, namespaceOverrides?: Ref<string | undefined>) => {
+    namespace: import("@type-dom/signals").Computed<string>;
+    b: (blockSuffix?: string) => string;
+    e: (element?: string) => string;
+    m: (modifier?: string) => string;
+    be: (blockSuffix?: string, element?: string) => string;
+    em: (element?: string, modifier?: string) => string;
+    bm: (blockSuffix?: string, modifier?: string) => string;
+    bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+    is: {
+        (name: string, state: boolean | "" | undefined): string;
+        (name: string): string;
+    };
+    cssVar: (object: Record<string, string>) => Record<string, string>;
+    cssVarName: (name: string) => string;
+    cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+    cssVarBlockName: (name: string) => string;
+};
+export type UseNamespaceReturn = ReturnType<typeof useNamespace>;

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

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNamespace = exports.useGetDerivedNamespace = exports.namespaceContextKey = exports.defaultNamespace = void 0;
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+exports.defaultNamespace = 'td';
+const statePrefix = 'is-';
+const _bem = (namespace, block, blockSuffix, element, modifier) => {
+    let cls = `${namespace}-${block}`;
+    if (blockSuffix) {
+        cls += `-${blockSuffix}`;
+    }
+    if (element) {
+        cls += `__${element}`;
+    }
+    if (modifier) {
+        cls += `--${modifier}`;
+    }
+    return cls;
+};
+exports.namespaceContextKey = Symbol('namespaceContextKey');
+const useGetDerivedNamespace = (namespaceOverrides) => {
+    const derivedNamespace = namespaceOverrides ||
+        ((0, framework_1.getCurrentInstance)()
+            ? (0, framework_1.inject)(exports.namespaceContextKey, (0, signals_1.signal)(exports.defaultNamespace))
+            : (0, signals_1.signal)(exports.defaultNamespace));
+    const namespace = (0, signals_1.computed)(() => {
+        return (0, signals_1.unref)(derivedNamespace) || exports.defaultNamespace;
+    });
+    return namespace;
+};
+exports.useGetDerivedNamespace = useGetDerivedNamespace;
+const useNamespace = (block, namespaceOverrides) => {
+    const namespace = (0, exports.useGetDerivedNamespace)(namespaceOverrides);
+    const b = (blockSuffix = '') => _bem(namespace.get(), block, blockSuffix, '', '');
+    const e = (element) => element ? _bem(namespace.get(), block, '', element, '') : '';
+    const m = (modifier) => modifier ? _bem(namespace.get(), block, '', '', modifier) : '';
+    const be = (blockSuffix, element) => blockSuffix && element
+        ? _bem(namespace.get(), block, blockSuffix, element, '')
+        : '';
+    const em = (element, modifier) => element && modifier
+        ? _bem(namespace.get(), block, '', element, modifier)
+        : '';
+    const bm = (blockSuffix, modifier) => blockSuffix && modifier
+        ? _bem(namespace.get(), block, blockSuffix, '', modifier)
+        : '';
+    const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier
+        ? _bem(namespace.get(), block, blockSuffix, element, modifier)
+        : '';
+    const is = (name, ...args) => {
+        const state = args.length >= 1 ? args[0] : true;
+        return name && state ? `${statePrefix}${name}` : '';
+    };
+    // for css var
+    // --el-xxx: value;
+    const cssVar = (object) => {
+        const styles = {};
+        for (const key in object) {
+            if (object[key]) {
+                styles[`--${namespace.get()}-${key}`] = object[key];
+            }
+        }
+        return styles;
+    };
+    // with block
+    const cssVarBlock = (object) => {
+        const styles = {};
+        for (const key in object) {
+            if (object[key]) {
+                styles[`--${namespace.get()}-${block}-${key}`] = object[key];
+            }
+        }
+        return styles;
+    };
+    const cssVarName = (name) => `--${namespace.get()}-${name}`;
+    const cssVarBlockName = (name) => `--${namespace.get()}-${block}-${name}`;
+    return {
+        namespace,
+        b,
+        e,
+        m,
+        be,
+        em,
+        bm,
+        bem,
+        is,
+        // css
+        cssVar,
+        cssVarName,
+        cssVarBlock,
+        cssVarBlockName,
+    };
+};
+exports.useNamespace = useNamespace;

package/src/hooks/use-ordered-children/index.d.ts

@@ -0,0 +1,8 @@
+import { TypeNode } from '@type-dom/framework';
+export declare const useOrderedChildren: <T extends {
+    uid: number;
+}>(vm: TypeNode, childComponentName: string) => {
+    children: import("@type-dom/signals").Signal<T[]>;
+    addChild: (child: T) => void;
+    removeChild: (uid: number) => void;
+};

package/src/hooks/use-ordered-children/index.js

@@ -0,0 +1,33 @@
+"use strict";
+// import { isVNode, shallowRef } from 'vue'
+// import { flattedChildren } from '@element-plus/utils'
+//
+// import type { ComponentInternalInstance, VNode } from 'vue'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOrderedChildren = void 0;
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const getOrderedChildren = (vm, childComponentName, children) => {
+    const nodes = (0, framework_1.flattedChildren)(vm.childNodes).filter((n) => (0, framework_1.isVNode)(n) && n.className === childComponentName && !!n);
+    const uids = nodes.map((n) => n.uid);
+    return uids.map((uid) => children[uid]).filter((p) => !!p);
+};
+const useOrderedChildren = (vm, childComponentName) => {
+    const children = {};
+    const orderedChildren = (0, signals_1.signal)([]);
+    // TODO: split into two functions: addChild and sortChildren
+    const addChild = (child) => {
+        children[child.uid] = child;
+        orderedChildren.set(getOrderedChildren(vm, childComponentName, children));
+    };
+    const removeChild = (uid) => {
+        delete children[uid];
+        orderedChildren.set(orderedChildren.get().filter((children) => children.uid !== uid));
+    };
+    return {
+        children: orderedChildren,
+        addChild,
+        removeChild,
+    };
+};
+exports.useOrderedChildren = useOrderedChildren;

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

@@ -0,0 +1,51 @@
+import { Ref, Computed } from '@type-dom/signals';
+import { VirtualElement, FloatingElement, Middleware, State, Instance, PopperOptions } from '@type-dom/popper';
+type ElementType = HTMLElement | undefined;
+type ReferenceElement = ElementType | VirtualElement;
+export type PartialOptions = Partial<PopperOptions & {
+    arrowMiddleware?: Middleware;
+}>;
+export declare const usePopper: (referenceElementRef: Ref<ReferenceElement>, popperElementRef: Ref<FloatingElement>, opts?: Computed<PartialOptions> | PartialOptions) => {
+    state: Computed<{
+        elements?: {
+            reference: Element | VirtualElement;
+            popper: HTMLElement;
+            arrow?: HTMLElement;
+        } | undefined;
+        options?: {
+            placement?: import("@type-dom/popper").Placement | undefined;
+            strategy?: import("@type-dom/popper").Strategy | undefined;
+            middleware?: Array<Middleware | null | undefined | false> | undefined;
+            platform?: import("@type-dom/popper").Platform | undefined;
+        } | undefined;
+        placement?: import("@type-dom/popper").Placement | undefined;
+        strategy?: import("@type-dom/popper").Strategy;
+        orderedMiddlewares?: {
+            options?: any;
+            name: string;
+            fn: (state: import("@type-dom/popper").MiddlewareState) => import("@type-dom/popper").MiddlewareReturn | Promise<import("@type-dom/popper").MiddlewareReturn>;
+        }[] | undefined;
+        scrollParents?: {
+            reference: Array<Element | Window | VisualViewport>;
+            popper: Array<Element | Window | VisualViewport>;
+        };
+        styles?: Record<string, import("dist/libs/css-type/src").IStyle<string | 0, string>> | undefined;
+        attributes?: {
+            [key: string]: {
+                [key: string]: string | boolean;
+            };
+        } | undefined;
+        middlewareData?: import("@type-dom/popper").MiddlewareData | undefined;
+        reset?: boolean;
+    }>;
+    styles: Computed<Record<string, import("dist/libs/css-type/src").IStyle<string | 0, string>>>;
+    attributes: Computed<{
+        [key: string]: {
+            [key: string]: string | boolean;
+        };
+    }>;
+    update: () => Promise<Partial<State>> | undefined;
+    forceUpdate: () => Promise<void> | undefined;
+    instanceRef: Computed<Instance | undefined>;
+};
+export {};

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

@@ -0,0 +1,140 @@
+"use strict";
+// import { computed, onBeforeUnmount, ref, shallowRef, unref, watch } from 'vue'
+// import { createPopper } from '@popperjs/core'
+// import { fromPairs } from 'lodash-unified'
+//
+// import type { Ref } from 'vue'
+// import type {
+//   Instance,
+//   Modifier,
+//   Options,
+//   State,
+//   VirtualElement,
+// } from '@popperjs/core'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopper = void 0;
+const tslib_1 = require("tslib");
+const signals_1 = require("@type-dom/signals");
+const popper_1 = require("@type-dom/popper");
+const framework_1 = require("@type-dom/framework");
+const usePopper = (referenceElementRef, popperElementRef, opts = {}) => {
+    // const stateUpdater = {
+    //   name: 'updateState',
+    //   // enabled: true,
+    //   // phase: 'write',
+    //   fn: (state ) => {
+    //     // const derivedState = deriveState(state)
+    //
+    //     // Object.assign(states.get(), derivedState)
+    //   },
+    //   // requires: ['computeStyles'],
+    // } as Middleware
+    const options = (0, signals_1.computed)(() => {
+        const { onFirstUpdate, placement, strategy, 
+        // arrowMiddleware,
+        // modifiers
+        middleware } = (0, signals_1.unref)(opts);
+        return {
+            onFirstUpdate,
+            placement: placement || 'bottom',
+            strategy: strategy || 'absolute',
+            middleware: middleware
+            // modifiers: [
+            //   ...(modifiers || []),
+            //   stateUpdater,
+            //   { name: 'applyStyles', enabled: false },
+            // ],
+        };
+    });
+    const instanceRef = (0, signals_1.signal)();
+    const states = (0, signals_1.signal)({
+        styles: {
+            popper: {
+                position: options.get().strategy,
+                left: '0',
+                top: '0'
+            },
+            arrow: {
+                position: 'absolute'
+            }
+        },
+        attributes: {}
+    });
+    const destroy = () => {
+        var _a;
+        if (!instanceRef.get())
+            return;
+        (_a = instanceRef.get()) === null || _a === void 0 ? void 0 : _a.destroy();
+        instanceRef.set(undefined);
+    };
+    (0, signals_1.watch)(options, (newOptions) => {
+        // console.warn('watch options newOption is ', newOptions);
+        const instance = (0, signals_1.unref)(instanceRef);
+        if (instance) {
+            // console.warn('watch options instance ', instance);
+            instance.setOptions(newOptions);
+        }
+    });
+    (0, signals_1.watch)(() => [referenceElementRef.get(), popperElementRef.get()], ([referenceElement, popperElement]) => {
+        // console.error('watch referenceElement and popperElement referenceElementRef.get() and popperElementRef.get() is ', referenceElementRef.get(), popperElementRef.get());
+        destroy();
+        //  popperElement 会先创建，只是没有挂载。所以还要看是否挂载了。
+        if (!referenceElement || !popperElement)
+            return;
+        // console.warn('watch referenceElement and popperElement ', referenceElement, popperElement);
+        // console.warn('watch referenceElement and popperElement options is ', options);
+        (0, framework_1.nextFrame)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+            instanceRef.set(yield (0, popper_1.createPopper)(referenceElement, popperElement, (0, signals_1.unref)(options)));
+        }));
+    });
+    (0, framework_1.onBeforeUnmount)(() => {
+        destroy();
+    });
+    return {
+        state: (0, signals_1.computed)(() => { var _a; return (Object.assign({}, (((_a = (0, signals_1.unref)(instanceRef)) === null || _a === void 0 ? void 0 : _a.state) || {}))); }),
+        styles: (0, signals_1.computed)(() => states.get().styles),
+        attributes: (0, signals_1.computed)(() => states.get().attributes),
+        update: () => { var _a; return (_a = (0, signals_1.unref)(instanceRef)) === null || _a === void 0 ? void 0 : _a.update(); },
+        forceUpdate: () => { var _a; return (_a = (0, signals_1.unref)(instanceRef)) === null || _a === void 0 ? void 0 : _a.forceUpdate(); },
+        // Preventing end users from modifying the instance.
+        instanceRef: (0, signals_1.computed)(() => (0, signals_1.unref)(instanceRef))
+    };
+};
+exports.usePopper = usePopper;
+// interface UpdateParams {
+//   arrowRef: Ref<HTMLElement | undefined>,
+//   arrowOffset: Ref<number | undefined>,
+//   contentRef: Ref<HTMLElement | undefined>,
+// }
+// 好像在新版中没有什么用
+// function deriveState(state: MiddlewareState) {
+//   const elements = Object.keys(state.elements) as unknown as Array<
+//     keyof State['elements']
+//   >;
+//
+//   // const styles = fromPairs(
+//   //   elements.map(
+//   //     (element) =>
+//   //       [element, state.styles[element] || {}] as [
+//   //         string,
+//   //         State['styles'][keyof State['styles']]
+//   //       ]
+//   //   )
+//   // )
+//
+//   // const attributes = fromPairs(
+//   //   elements.map(
+//   //     (element) =>
+//   //       [element, state.attributes[element]] as [
+//   //         string,
+//   //         State['attributes'][keyof State['attributes']]
+//   //       ]
+//   //   )
+//   // )
+//
+//   // return {
+//   //   styles,
+//   //   attributes,
+//   // }
+// }
+// export type UsePopperReturn = ReturnType<typeof usePopper>

package/src/hooks/use-popper-container/index.d.ts

@@ -0,0 +1,8 @@
+export declare const usePopperContainerId: () => {
+    id: import("@type-dom/signals").Computed<string>;
+    selector: import("@type-dom/signals").Computed<string>;
+};
+export declare const usePopperContainer: () => {
+    id: import("@type-dom/signals").Computed<string>;
+    selector: import("@type-dom/signals").Computed<string>;
+};

package/src/hooks/use-popper-container/index.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePopperContainer = exports.usePopperContainerId = void 0;
+// import { computed, onBeforeMount } from 'vue'
+// import { isClient } from '@element-plus/utils'
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const use_namespace_1 = require("../use-namespace");
+const use_id_1 = require("../use-id");
+const usePopperContainerId = () => {
+    // console.log('usePopperContainerId');
+    const namespace = (0, use_namespace_1.useGetDerivedNamespace)();
+    const idInjection = (0, use_id_1.useIdInjection)();
+    const id = (0, signals_1.computed)(() => {
+        return `${namespace.get()}-popper-container-${idInjection.prefix}`;
+    });
+    const selector = (0, signals_1.computed)(() => `#${id.get()}`);
+    return {
+        id,
+        selector,
+    };
+};
+exports.usePopperContainerId = usePopperContainerId;
+const createContainer = (id) => {
+    const container = document.createElement('div');
+    container.id = id;
+    document.body.appendChild(container);
+    return container;
+};
+const usePopperContainer = () => {
+    // console.log('usePopperContainer');
+    const { id, selector } = (0, exports.usePopperContainerId)();
+    (0, framework_1.onBeforeMount)(() => {
+        if (!utils_1.isClient)
+            return;
+        // This is for bypassing the error that when under testing env, we often encounter
+        // document.body.innerHTML = '' situation
+        // for this we need to disable the caching since it's not really needed
+        if (process.env.NODE_ENV === 'test' ||
+            !document.body.querySelector(selector.get())) {
+            createContainer(id.get());
+        }
+    });
+    return {
+        id,
+        selector,
+    };
+};
+exports.usePopperContainer = usePopperContainer;

package/src/hooks/use-prevent-global/index.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from '@type-dom/signals';
+export declare const usePreventGlobal: <E extends keyof DocumentEventMap>(indicator: Ref<boolean>, evt: E, cb: (e: DocumentEventMap[E]) => boolean) => void;