@type-dom/ui 0.1.0 → 0.1.2

package/src/constants/aria.js

@@ -1,20 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ariaProps = void 0;
-exports.ariaProps = {
-    /**
-     * @description native `aria-label` attribute
-     */
-    ariaLabel: String,
-    /**
-     * @description native `aria-orientation` attribute
-     */
-    ariaOrientation: {
-        type: String,
-        values: ['horizontal', 'vertical', 'undefined'],
-    },
-    /**
-     * @description native `aria-controls` attribute
-     */
-    ariaControls: String,
+exports.EVENT_CODE = void 0;
+exports.EVENT_CODE = {
+    tab: 'Tab',
+    enter: 'Enter',
+    space: 'Space',
+    left: 'ArrowLeft', // 37
+    up: 'ArrowUp', // 38
+    right: 'ArrowRight', // 39
+    down: 'ArrowDown', // 40
+    esc: 'Escape',
+    delete: 'Delete',
+    backspace: 'Backspace',
+    numpadEnter: 'NumpadEnter',
+    pageUp: 'PageUp',
+    pageDown: 'PageDown',
+    home: 'Home',
+    end: 'End',
 };

package/src/constants/date.d.ts

@@ -0,0 +1,3 @@
+export declare const datePickTypes: readonly ["year", "years", "month", "months", "date", "dates", "week", "datetime", "datetimerange", "daterange", "monthrange", "yearrange"];
+export declare const WEEK_DAYS: readonly ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
+export type DatePickType = (typeof datePickTypes)[number];

package/src/constants/date.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WEEK_DAYS = exports.datePickTypes = void 0;
+exports.datePickTypes = [
+    'year',
+    'years',
+    'month',
+    'months',
+    'date',
+    'dates',
+    'week',
+    'datetime',
+    'datetimerange',
+    'daterange',
+    'monthrange',
+    'yearrange',
+];
+exports.WEEK_DAYS = [
+    'sun',
+    'mon',
+    'tue',
+    'wed',
+    'thu',
+    'fri',
+    'sat',
+];

package/src/constants/index.d.ts

@@ -0,0 +1,5 @@
+export * from './aria';
+export * from './date';
+export * from './event';
+export * from './key';
+export * from './size';

package/src/constants/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./aria"), exports);
+tslib_1.__exportStar(require("./date"), exports);
+tslib_1.__exportStar(require("./event"), exports);
+tslib_1.__exportStar(require("./key"), exports);
+tslib_1.__exportStar(require("./size"), exports);

package/src/constants/key.d.ts

@@ -0,0 +1 @@
+export declare const INSTALLED_KEY: unique symbol;

package/src/constants/key.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INSTALLED_KEY = void 0;
+exports.INSTALLED_KEY = Symbol('INSTALLED_KEY');

package/src/constants/size.d.ts

@@ -0,0 +1,7 @@
+export declare const componentSizes: readonly ["", "default", "small", "large"];
+export type ComponentSize = (typeof componentSizes)[number];
+export declare const componentSizeMap: {
+    readonly large: 40;
+    readonly default: 32;
+    readonly small: 24;
+};

package/src/{styles → constants}/size.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentSizes = void 0;
+exports.componentSizeMap = exports.componentSizes = void 0;
 exports.componentSizes = ['', 'default', 'small', 'large'];
-const componentSizeMap = {
+exports.componentSizeMap = {
     large: 40,
     default: 32,
     small: 24,

package/src/hooks/index.d.ts

@@ -1,4 +1,31 @@
+export * from './use-aria';
+export * from './use-attrs';
+export * from './use-calc-input-width';
+export * from './use-composition';
 export * from './use-cursor';
+export * from './use-delayed-toggle';
+export * from './use-deprecated';
+export * from './use-draggable';
+export * from './use-empty-values';
 export * from './use-escape-keydown';
+export * from './use-floating';
+export * from './use-focus-controller';
 export * from './use-forward-ref';
-export * from './use-delayed-toggle';
+export * from './use-id';
+export * from './use-intermediate-render';
+export * from './use-locale';
+export * from './use-lockscreen';
+export * from './use-modal';
+export * from './use-model-toggle';
+export * from './use-namespace';
+export * from './use-ordered-children';
+export * from './use-popper';
+export * from './use-popper-container';
+export * from './use-prevent-global';
+export * from './use-prop';
+export * from './use-same-target';
+export * from './use-size';
+export * from './use-throttle-render';
+export * from './use-timeout';
+export * from './use-transition-fallthrough';
+export * from './use-z-index';

package/src/hooks/index.js

@@ -1,7 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./use-aria"), exports);
+tslib_1.__exportStar(require("./use-attrs"), exports);
+tslib_1.__exportStar(require("./use-calc-input-width"), exports);
+tslib_1.__exportStar(require("./use-composition"), exports);
 tslib_1.__exportStar(require("./use-cursor"), exports);
+tslib_1.__exportStar(require("./use-delayed-toggle"), exports);
+tslib_1.__exportStar(require("./use-deprecated"), exports);
+tslib_1.__exportStar(require("./use-draggable"), exports);
+tslib_1.__exportStar(require("./use-empty-values"), exports);
 tslib_1.__exportStar(require("./use-escape-keydown"), exports);
+tslib_1.__exportStar(require("./use-floating"), exports);
+tslib_1.__exportStar(require("./use-focus-controller"), exports);
 tslib_1.__exportStar(require("./use-forward-ref"), exports);
-tslib_1.__exportStar(require("./use-delayed-toggle"), exports);
+tslib_1.__exportStar(require("./use-id"), exports);
+tslib_1.__exportStar(require("./use-intermediate-render"), exports);
+tslib_1.__exportStar(require("./use-locale"), exports);
+tslib_1.__exportStar(require("./use-lockscreen"), exports);
+tslib_1.__exportStar(require("./use-modal"), exports);
+tslib_1.__exportStar(require("./use-model-toggle"), exports);
+tslib_1.__exportStar(require("./use-namespace"), exports);
+tslib_1.__exportStar(require("./use-ordered-children"), exports);
+tslib_1.__exportStar(require("./use-popper"), exports);
+tslib_1.__exportStar(require("./use-popper-container"), exports);
+tslib_1.__exportStar(require("./use-prevent-global"), exports);
+tslib_1.__exportStar(require("./use-prop"), exports);
+tslib_1.__exportStar(require("./use-same-target"), exports);
+tslib_1.__exportStar(require("./use-size"), exports);
+tslib_1.__exportStar(require("./use-throttle-render"), exports);
+tslib_1.__exportStar(require("./use-timeout"), exports);
+tslib_1.__exportStar(require("./use-transition-fallthrough"), exports);
+tslib_1.__exportStar(require("./use-z-index"), exports);

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

@@ -0,0 +1,50 @@
+export declare const ariaProps: {
+    /**
+     * @description native `aria-label` attribute
+     */
+    ariaLabel: StringConstructor;
+    /**
+     * @description native `aria-orientation` attribute
+     */
+    ariaOrientation: {
+        type: StringConstructor;
+        values: string[];
+    };
+    /**
+     * @description native `aria-controls` attribute
+     */
+    ariaControls: StringConstructor;
+};
+export declare const useAriaProps: <T extends keyof typeof ariaProps>(arias: Array<T>) => T extends infer T_1 extends keyof {
+    /**
+     * @description native `aria-label` attribute
+     */
+    ariaLabel: StringConstructor;
+    /**
+     * @description native `aria-orientation` attribute
+     */
+    ariaOrientation: {
+        type: StringConstructor;
+        values: string[];
+    };
+    /**
+     * @description native `aria-controls` attribute
+     */
+    ariaControls: StringConstructor;
+} ? { [P in T_1]: {
+    /**
+     * @description native `aria-label` attribute
+     */
+    ariaLabel: StringConstructor;
+    /**
+     * @description native `aria-orientation` attribute
+     */
+    ariaOrientation: {
+        type: StringConstructor;
+        values: string[];
+    };
+    /**
+     * @description native `aria-controls` attribute
+     */
+    ariaControls: StringConstructor;
+}[P]; } : never;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAriaProps = exports.ariaProps = void 0;
+const utils_1 = require("@type-dom/utils");
+exports.ariaProps = {
+    /**
+     * @description native `aria-label` attribute
+     */
+    ariaLabel: String,
+    /**
+     * @description native `aria-orientation` attribute
+     */
+    ariaOrientation: {
+        type: String,
+        values: ['horizontal', 'vertical', 'undefined'],
+    },
+    /**
+     * @description native `aria-controls` attribute
+     */
+    ariaControls: String,
+};
+const useAriaProps = (arias) => {
+    return (0, utils_1.pick)(exports.ariaProps, arias);
+};
+exports.useAriaProps = useAriaProps;

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

@@ -0,0 +1,7 @@
+import { Computed } from '@type-dom/signals';
+interface Params {
+    excludeListeners?: boolean;
+    excludeKeys?: Computed<string[]>;
+}
+export declare const useAttrs: (params?: Params) => Computed<{}>;
+export {};

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAttrs = void 0;
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const DEFAULT_EXCLUDE_KEYS = ['class', 'style'];
+const LISTENER_PREFIX = /^on[A-Z]/;
+const useAttrs = (params = {}) => {
+    const { excludeListeners = false, excludeKeys } = params;
+    const allExcludeKeys = (0, signals_1.computed)(() => {
+        return ((excludeKeys === null || excludeKeys === void 0 ? void 0 : excludeKeys.get()) || []).concat(DEFAULT_EXCLUDE_KEYS);
+    });
+    const instance = (0, framework_1.getCurrentInstance)();
+    if (!instance) {
+        (0, utils_1.debugWarn)('use-attrs', 'getCurrentInstance() returned null. useAttrs() must be called at the top of a setup function');
+        return (0, signals_1.computed)(() => ({}));
+    }
+    return (0, signals_1.computed)(() => (0, utils_1.fromPairs)(Object.entries(instance.props.attrObj).filter(([key]) => !allExcludeKeys.get().includes(key) &&
+        !(excludeListeners && LISTENER_PREFIX.test(key)))));
+};
+exports.useAttrs = useAttrs;

package/src/hooks/use-calc-input-width/index.d.ts

@@ -0,0 +1,7 @@
+export declare function useCalcInputWidth(): {
+    calculatorRef: import("@type-dom/signals").Signal<HTMLElement>;
+    calculatorWidth: import("@type-dom/signals").Signal<number>;
+    inputStyle: import("@type-dom/signals").Computed<{
+        minWidth: string;
+    }>;
+};

package/src/hooks/use-calc-input-width/index.js

@@ -0,0 +1,25 @@
+"use strict";
+// import { computed, ref, shallowRef } from 'vue'
+// import { useResizeObserver } from '@vueuse/core'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCalcInputWidth = useCalcInputWidth;
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+function useCalcInputWidth() {
+    const calculatorRef = (0, signals_1.signal)();
+    const calculatorWidth = (0, signals_1.signal)(0);
+    const MINIMUM_INPUT_WIDTH = 11;
+    const inputStyle = (0, signals_1.computed)(() => ({
+        minWidth: `${Math.max(calculatorWidth.get(), MINIMUM_INPUT_WIDTH)}px`,
+    }));
+    const resetCalculatorWidth = () => {
+        var _a, _b;
+        calculatorWidth.set((_b = (_a = calculatorRef.get()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0);
+    };
+    (0, framework_1.useResizeObserver)(calculatorRef, resetCalculatorWidth);
+    return {
+        calculatorRef,
+        calculatorWidth,
+        inputStyle,
+    };
+}

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

@@ -0,0 +1,12 @@
+interface UseCompositionOptions {
+    afterComposition: (event?: CompositionEvent) => void;
+    emit?: ((event: 'compositionstart', evt?: CompositionEvent) => void) & ((event: 'compositionupdate', evt?: CompositionEvent) => void) & ((event: 'compositionend', evt?: CompositionEvent) => void);
+}
+export declare function useComposition({ afterComposition, emit, }: UseCompositionOptions): {
+    isComposing: import("@type-dom/signals").Signal<boolean>;
+    handleComposition: (event?: CompositionEvent) => void;
+    handleCompositionStart: (event?: CompositionEvent) => void;
+    handleCompositionUpdate: (event?: CompositionEvent) => void;
+    handleCompositionEnd: (event?: CompositionEvent) => void;
+};
+export {};

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComposition = useComposition;
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+function useComposition({ afterComposition, emit, }) {
+    const isComposing = (0, signals_1.signal)(false);
+    const handleCompositionStart = (event) => {
+        emit === null || emit === void 0 ? void 0 : emit('compositionstart', event);
+        isComposing.set(true);
+    };
+    const handleCompositionUpdate = (event) => {
+        var _a;
+        emit === null || emit === void 0 ? void 0 : emit('compositionupdate', event);
+        const text = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
+        const lastCharacter = text[text.length - 1] || '';
+        isComposing.set(!(0, utils_1.isKorean)(lastCharacter));
+    };
+    const handleCompositionEnd = (event) => {
+        emit === null || emit === void 0 ? void 0 : emit('compositionend', event);
+        if (isComposing.get()) {
+            isComposing.set(false);
+            (0, framework_1.nextTick)(() => afterComposition(event));
+        }
+    };
+    const handleComposition = (event) => {
+        (event === null || event === void 0 ? void 0 : event.type) === 'compositionend'
+            ? handleCompositionEnd(event)
+            : handleCompositionUpdate(event);
+    };
+    return {
+        isComposing,
+        handleComposition,
+        handleCompositionStart,
+        handleCompositionUpdate,
+        handleCompositionEnd,
+    };
+}

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

@@ -0,0 +1,2 @@
+import { Signal } from '@type-dom/signals';
+export declare function useCursor(input: Signal<HTMLInputElement | undefined>): [() => void, () => void];

package/src/hooks/{use-cursor.js → use-cursor/index.js}

@@ -1,39 +1,37 @@
 "use strict";
-// element plus hooks useCursor
-// Keep input cursor in the correct position when we use formatter.
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCursor = useCursor;
+// Keep input cursor in the correct position when we use formatter.
 function useCursor(input) {
-    let selectionRef;
+    let selectionInfo;
     function recordCursor() {
-        console.log('recordCursor . ');
-        if (input === undefined) {
+        if (input.get() == undefined) {
             return;
         }
-        const { selectionStart, selectionEnd, value } = input;
-        if (selectionStart === null || selectionEnd === null) {
+        const { selectionStart, selectionEnd, value } = input.get();
+        if (selectionStart == null || selectionEnd == null) {
             return;
         }
         const beforeTxt = value.slice(0, Math.max(0, selectionStart));
         const afterTxt = value.slice(Math.max(0, selectionEnd));
-        selectionRef = {
+        selectionInfo = {
             selectionStart,
             selectionEnd,
             value,
             beforeTxt,
-            afterTxt
+            afterTxt,
         };
     }
     function setCursor() {
-        console.log('setCursor . ');
-        if (input === undefined || selectionRef === undefined) {
+        var _a;
+        if (input.get() == undefined || selectionInfo == undefined) {
             return;
         }
-        const { value } = input;
-        const { beforeTxt, afterTxt, selectionStart } = selectionRef;
-        if (beforeTxt === undefined ||
-            afterTxt === undefined ||
-            selectionStart === undefined) {
+        const { value } = input.get();
+        const { beforeTxt, afterTxt, selectionStart } = selectionInfo;
+        if (beforeTxt == undefined ||
+            afterTxt == undefined ||
+            selectionStart == undefined) {
             return;
         }
         let startPos = value.length;
@@ -50,7 +48,7 @@ function useCursor(input) {
                 startPos = newIndex + 1;
             }
         }
-        input.setSelectionRange(startPos, startPos);
+        (_a = input.get()) === null || _a === void 0 ? void 0 : _a.setSelectionRange(startPos, startPos);
     }
     return [recordCursor, setCursor];
 }

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

@@ -0,0 +1,24 @@
+export declare const useDelayedToggleProps: UseDelayedToggleProps;
+export interface UseDelayedToggleProps {
+    /**
+     * @description delay of appearance, in millisecond
+     *     default: 0,
+     */
+    showAfter?: number;
+    /**
+     * @description delay of disappear, in millisecond
+     *     default: 200,
+     */
+    hideAfter?: number;
+    /**
+     * @description disappear automatically, in millisecond
+     *     default: 0,
+     */
+    autoClose?: number;
+    open?: (event?: Event) => void;
+    close?: (event?: Event) => void;
+}
+export declare const useDelayedToggle: ({ showAfter, hideAfter, autoClose, open, close, }: UseDelayedToggleProps) => {
+    onOpen: (event?: Event) => void;
+    onClose: (event?: Event) => void;
+};

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDelayedToggle = exports.useDelayedToggleProps = void 0;
+// import { unref } from 'vue'
+// import { buildProps, isNumber } from '@element-plus/utils'
+const use_timeout_1 = require("../use-timeout");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+// import type { ExtractPropTypes, ToRefs } from 'vue'
+exports.useDelayedToggleProps = {
+    showAfter: 0,
+    hideAfter: 200,
+    autoClose: 0,
+};
+const useDelayedToggle = ({ showAfter, hideAfter, autoClose, open, close, }) => {
+    const { registerTimeout } = (0, use_timeout_1.useTimeout)();
+    const { registerTimeout: registerTimeoutForAutoClose, cancelTimeout: cancelTimeoutForAutoClose, } = (0, use_timeout_1.useTimeout)();
+    const onOpen = (event) => {
+        // console.log('use-delayed-toggle onOpen');
+        registerTimeout(() => {
+            open === null || open === void 0 ? void 0 : open(event);
+            const _autoClose = (0, signals_1.unref)(autoClose);
+            if ((0, utils_1.isNumber)(_autoClose) && _autoClose > 0) {
+                registerTimeoutForAutoClose(() => {
+                    close === null || close === void 0 ? void 0 : close(event);
+                }, _autoClose);
+            }
+        }, (0, signals_1.unref)(showAfter));
+    };
+    const onClose = (event) => {
+        cancelTimeoutForAutoClose();
+        registerTimeout(() => {
+            close === null || close === void 0 ? void 0 : close(event);
+        }, (0, signals_1.unref)(hideAfter));
+    };
+    return {
+        onOpen,
+        onClose,
+    };
+};
+exports.useDelayedToggle = useDelayedToggle;

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

@@ -0,0 +1,11 @@
+import { MaybeRef } from '@type-dom/signals';
+type DeprecationParam = {
+    from: string;
+    replacement: string;
+    scope: string;
+    version: string;
+    ref: string;
+    type?: 'API' | 'Attribute' | 'Event' | 'Slot';
+};
+export declare const useDeprecated: ({ from, replacement, scope, version, ref, type }: DeprecationParam, condition: MaybeRef<boolean | undefined>) => void;
+export {};

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeprecated = void 0;
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const useDeprecated = ({ from, replacement, scope, version, ref, type = 'API' }, condition) => {
+    (0, signals_1.watch)(() => (0, signals_1.unref)(condition), (val) => {
+        if (val) {
+            (0, utils_1.debugWarn)(scope, `[${type}] ${from} is about to be deprecated in version ${version}, please use ${replacement} instead.
+For more detail, please visit: ${ref}
+`);
+        }
+    }, {
+        immediate: true,
+    });
+};
+exports.useDeprecated = useDeprecated;

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

@@ -0,0 +1,4 @@
+import { Computed, Ref } from '@type-dom/signals';
+export declare const useDraggable: (targetRef: Ref<HTMLElement | undefined>, dragRef: Ref<HTMLElement | undefined>, draggable: Computed<boolean | undefined>, overflow?: Computed<boolean | undefined>) => {
+    resetPosition: () => void;
+};

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

@@ -0,0 +1,90 @@
+"use strict";
+// import { onBeforeUnmount, onMounted, watchEffect } from 'vue'
+// import { addUnit } from '@element-plus/utils'
+// import type { ComputedRef, Ref } from 'vue'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDraggable = void 0;
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const framework_1 = require("@type-dom/framework");
+const useDraggable = (targetRef, dragRef, draggable, overflow) => {
+    let transform = {
+        offsetX: 0,
+        offsetY: 0,
+    };
+    const onMousedown = (e) => {
+        const downX = e.clientX;
+        const downY = e.clientY;
+        const { offsetX, offsetY } = transform;
+        const targetRect = (0, signals_1.unref)(targetRef).getBoundingClientRect();
+        const targetLeft = targetRect.left;
+        const targetTop = targetRect.top;
+        const targetWidth = targetRect.width;
+        const targetHeight = targetRect.height;
+        const clientWidth = document.documentElement.clientWidth;
+        const clientHeight = document.documentElement.clientHeight;
+        const minLeft = -targetLeft + offsetX;
+        const minTop = -targetTop + offsetY;
+        const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
+        const maxTop = clientHeight - targetTop - targetHeight + offsetY;
+        const onMousemove = (e) => {
+            let moveX = offsetX + e.clientX - downX;
+            let moveY = offsetY + e.clientY - downY;
+            if (!(0, signals_1.unref)(overflow)) {
+                moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
+                moveY = Math.min(Math.max(moveY, minTop), maxTop);
+            }
+            transform = {
+                offsetX: moveX,
+                offsetY: moveY,
+            };
+            if ((0, signals_1.unref)(targetRef)) {
+                (0, signals_1.unref)(targetRef).style.transform = `translate(${(0, utils_1.addUnit)(moveX)}, ${(0, utils_1.addUnit)(moveY)})`;
+            }
+        };
+        const onMouseup = () => {
+            document.removeEventListener('mousemove', onMousemove);
+            document.removeEventListener('mouseup', onMouseup);
+        };
+        document.addEventListener('mousemove', onMousemove);
+        document.addEventListener('mouseup', onMouseup);
+    };
+    const onDraggable = () => {
+        var _a;
+        if ((0, signals_1.unref)(dragRef) && (0, signals_1.unref)(targetRef)) {
+            (_a = (0, signals_1.unref)(dragRef)) === null || _a === void 0 ? void 0 : _a.addEventListener('mousedown', onMousedown);
+        }
+    };
+    const offDraggable = () => {
+        var _a;
+        if ((0, signals_1.unref)(dragRef) && (0, signals_1.unref)(targetRef)) {
+            (_a = (0, signals_1.unref)(dragRef)) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousedown', onMousedown);
+        }
+    };
+    const resetPosition = () => {
+        transform = {
+            offsetX: 0,
+            offsetY: 0,
+        };
+        if ((0, signals_1.unref)(targetRef)) {
+            (0, signals_1.unref)(targetRef).style.transform = 'none';
+        }
+    };
+    (0, framework_1.onMounted)(() => {
+        (0, signals_1.effect)(() => {
+            if ((0, signals_1.unref)(draggable)) {
+                onDraggable();
+            }
+            else {
+                offDraggable();
+            }
+        });
+    });
+    (0, framework_1.onBeforeUnmount)(() => {
+        offDraggable();
+    });
+    return {
+        resetPosition,
+    };
+};
+exports.useDraggable = useDraggable;