cnhis-design-vue 3.3.3-beta.19 → 3.3.3-beta.22

package/es/components/iho-chat/src/components/MultipleVideo.vue2.js

@@ -1,7 +1,7 @@
-import { createElementVNode, defineComponent, ref, computed, onBeforeUnmount, openBlock, createElementBlock, withDirectives, toDisplayString, unref, vShow, createVNode, withCtx, Fragment, renderList, createCommentVNode, createTextVNode, nextTick } from 'vue';
-import { NButton, NIcon } from 'naive-ui';
+import { createElementVNode, defineComponent, ref, computed, watch, onBeforeUnmount, openBlock, createElementBlock, Fragment, withDirectives, normalizeStyle, unref, toDisplayString, vShow, createVNode, withCtx, renderList, createCommentVNode, createTextVNode, nextTick } from 'vue';
+import { NButton, NIcon, NAvatar } from 'naive-ui';
 import ChatAdd from './ChatAdd.vue.js';
-import { Close, Mic, MicOff, Videocam, VideocamOff, Call, PersonAdd } from '@vicons/ionicons5';
+import { Close, Mic, MicOff, Videocam, VideocamOff, Call, PersonAdd, ResizeOutline } from '@vicons/ionicons5';
 import { getUserDetailApi } from '../api/index.js';
 import '@vueuse/core';
 import { $message } from '../utils/index.js';
@@ -16,32 +16,30 @@ import '../../../../shared/hooks/useScrollLoading.js';
 import 'stompjs';
 import 'sockjs-client/dist/sockjs.min.js';
 import { useVideo } from '../hooks/useVideo.js';
+import { useDraggable } from '../hooks/useDraggable.js';
 import TRTC from 'trtc-sdk-v5';
 
 const _hoisted_1 = {
-  class: "video-wrapper video-wrapper--multiple"
+  class: "top-right-btns"
 };
 const _hoisted_2 = {
-  class: "video-header"
-};
-const _hoisted_3 = {
   key: 0,
   class: "video-main"
 };
-const _hoisted_4 = {
+const _hoisted_3 = {
   class: "video-main__left"
 };
-const _hoisted_5 = ["data-name"];
-const _hoisted_6 = {
+const _hoisted_4 = ["data-name"];
+const _hoisted_5 = {
   class: "video-bottom"
 };
-const _hoisted_7 = {
+const _hoisted_6 = {
   class: "btn-group"
 };
-const _hoisted_8 = {
+const _hoisted_7 = {
   class: "btn"
 };
-const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", {
+const _hoisted_8 = /* @__PURE__ */ createElementVNode("span", {
   class: "text"
 }, function() {
   var _a, _b, _c;
@@ -51,10 +49,10 @@ const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", {
     return "\u9759\u97F3";
   }
 }(), -1);
-const _hoisted_10 = {
+const _hoisted_9 = {
   class: "btn"
 };
-const _hoisted_11 = /* @__PURE__ */ createElementVNode("span", {
+const _hoisted_10 = /* @__PURE__ */ createElementVNode("span", {
   class: "text"
 }, function() {
   var _a, _b, _c;
@@ -64,7 +62,7 @@ const _hoisted_11 = /* @__PURE__ */ createElementVNode("span", {
     return "\u6444\u50CF\u5934";
   }
 }(), -1);
-const _hoisted_12 = /* @__PURE__ */ createElementVNode("span", {
+const _hoisted_11 = /* @__PURE__ */ createElementVNode("span", {
   class: "text"
 }, function() {
   var _a, _b, _c;
@@ -74,10 +72,10 @@ const _hoisted_12 = /* @__PURE__ */ createElementVNode("span", {
     return "\u7ED3\u675F\u4F1A\u8BCA";
   }
 }(), -1);
-const _hoisted_13 = {
+const _hoisted_12 = {
   class: "btn"
 };
-const _hoisted_14 = /* @__PURE__ */ createElementVNode("span", {
+const _hoisted_13 = /* @__PURE__ */ createElementVNode("span", {
   class: "text"
 }, function() {
   var _a, _b, _c;
@@ -87,35 +85,35 @@ const _hoisted_14 = /* @__PURE__ */ createElementVNode("span", {
     return "\u6DFB\u52A0\u53C2\u4F1A\u4EBA";
   }
 }(), -1);
-const _hoisted_15 = {
+const _hoisted_14 = {
   class: "video-main__right"
 };
-const _hoisted_16 = ["id", "data-name"];
-const _hoisted_17 = {
+const _hoisted_15 = ["id", "data-name"];
+const _hoisted_16 = {
   class: "user"
 };
-const _hoisted_18 = {
+const _hoisted_17 = {
   class: "name"
 };
-const _hoisted_19 = {
+const _hoisted_18 = {
   key: 0,
   class: "tip"
 };
-const _hoisted_20 = {
+const _hoisted_19 = {
   key: 0,
   class: "calling-box"
 };
-const _hoisted_21 = {
+const _hoisted_20 = {
   class: "btn-box"
 };
-const _hoisted_22 = {
+const _hoisted_21 = {
   key: 1,
   class: "opt-btn"
 };
-const _hoisted_23 = {
+const _hoisted_22 = {
   class: "btn"
 };
-const _hoisted_24 = /* @__PURE__ */ createElementVNode("span", null, function() {
+const _hoisted_23 = /* @__PURE__ */ createElementVNode("span", null, function() {
   var _a, _b, _c;
   try {
     return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.113")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.113")) || "\u62D2\u63A5";
@@ -123,10 +121,10 @@ const _hoisted_24 = /* @__PURE__ */ createElementVNode("span", null, function()
     return "\u62D2\u63A5";
   }
 }(), -1);
-const _hoisted_25 = {
+const _hoisted_24 = {
   class: "btn"
 };
-const _hoisted_26 = /* @__PURE__ */ createElementVNode("span", null, function() {
+const _hoisted_25 = /* @__PURE__ */ createElementVNode("span", null, function() {
   var _a, _b, _c;
   try {
     return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.114")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.114")) || "\u63A5\u542C";
@@ -134,6 +132,12 @@ const _hoisted_26 = /* @__PURE__ */ createElementVNode("span", null, function()
     return "\u63A5\u542C";
   }
 }(), -1);
+const _hoisted_26 = {
+  class: "header"
+};
+const _hoisted_27 = {
+  class: "content"
+};
 var _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MultipleVideo",
   setup(__props) {
@@ -158,6 +162,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       uninstallEventHandlers
     } = useVideo();
     const isConnect = ref(false);
+    const wrapperRef = ref(null);
+    const handleRef = ref(null);
+    const isMaxSize = ref(true);
+    const miniWrapperRef = ref(null);
     const callUser = computed(() => isCall.value ? state.userInfo.name : state.currentAVMsg.sendName);
     const title = computed(() => {
       if (!isConnect.value)
@@ -165,6 +173,24 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       const count = isCall.value ? `\uFF08${remoteUsers.value.length + 1}/${state.currentAVMsg.checkedIds.length + 1}\uFF09` : "";
       return `${callUser.value}\u53D1\u8D77\u7684${messageTypeText.value}\u4F1A\u8BCA${count} ${timing.value}`;
     });
+    const {
+      style,
+      changePosition
+    } = useDraggable(wrapperRef, {
+      initialPosition: "center",
+      handle: handleRef
+    });
+    const {
+      style: miniStyle,
+      changePosition: changeMiniPosition
+    } = useDraggable(miniWrapperRef);
+    watch(() => isMaxSize.value, (val) => {
+      if (val) {
+        changePosition("center");
+      } else {
+        changeMiniPosition("top-right");
+      }
+    });
     function handleAddPerson({
       checkedIds,
       checkedOptions
@@ -315,24 +341,38 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       handleExit();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [withDirectives(createElementVNode("span", {
+      return openBlock(), createElementBlock(Fragment, null, [withDirectives(createElementVNode("div", {
+        class: "video-wrapper video-wrapper--multiple",
+        ref_key: "wrapperRef",
+        ref: wrapperRef,
+        style: normalizeStyle(unref(style))
+      }, [createElementVNode("div", {
+        class: "video-header",
+        ref_key: "handleRef",
+        ref: handleRef
+      }, [withDirectives(createElementVNode("span", {
         class: "title"
-      }, toDisplayString(unref(title)), 513), [[vShow, isConnect.value]]), createVNode(unref(NButton), {
+      }, toDisplayString(unref(title)), 513), [[vShow, isConnect.value]]), createElementVNode("div", _hoisted_1, [createVNode(unref(NButton), {
         quaternary: "",
-        circle: "",
+        size: "tiny",
+        class: "custom-btn",
+        onClick: _cache[0] || (_cache[0] = () => isMaxSize.value = false)
+      }), createVNode(unref(NButton), {
+        text: "",
         color: "#ffffffcc",
         onClick: handleExit
       }, {
-        icon: withCtx(() => [createVNode(unref(NIcon), {
+        default: withCtx(() => [createVNode(unref(NIcon), {
+          size: "18",
           component: unref(Close)
         }, null, 8, ["component"])]),
         _: 1
-      })]), isConnect.value ? (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [createElementVNode("div", {
+      })])], 512), isConnect.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createElementVNode("div", {
         ref_key: "selfVideoRef",
         ref: selfVideoRef,
         class: "video-view",
         "data-name": unref(state).userInfo.name
-      }, null, 8, _hoisted_5), createElementVNode("div", _hoisted_6, [createElementVNode("div", _hoisted_7, [createElementVNode("div", _hoisted_8, [createVNode(unref(NButton), {
+      }, null, 8, _hoisted_4), createElementVNode("div", _hoisted_5, [createElementVNode("div", _hoisted_6, [createElementVNode("div", _hoisted_7, [createVNode(unref(NButton), {
         text: "",
         color: !unref(voiceClose) ? "#fff" : "#000",
         onClick: unref(toggleAudio)
@@ -341,7 +381,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: !unref(voiceClose) ? unref(Mic) : unref(MicOff)
         }, null, 8, ["component"])]),
         _: 1
-      }, 8, ["color", "onClick"]), _hoisted_9]), createElementVNode("div", _hoisted_10, [createVNode(unref(NButton), {
+      }, 8, ["color", "onClick"]), _hoisted_8]), createElementVNode("div", _hoisted_9, [createVNode(unref(NButton), {
         text: "",
         color: !unref(videocamClose) ? "#fff" : "#000",
         disabled: unref(isAudio),
@@ -351,7 +391,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: !unref(videocamClose) ? unref(Videocam) : unref(VideocamOff)
         }, null, 8, ["component"])]),
         _: 1
-      }, 8, ["color", "disabled", "onClick"]), _hoisted_11]), createElementVNode("div", {
+      }, 8, ["color", "disabled", "onClick"]), _hoisted_10]), createElementVNode("div", {
         class: "btn",
         onClick: handleExit
       }, [createVNode(unref(NButton), {
@@ -363,11 +403,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: unref(Call)
         }, null, 8, ["component"])]),
         _: 1
-      }), _hoisted_12]), createVNode(ChatAdd, {
+      }), _hoisted_11]), createVNode(ChatAdd, {
         onComfirm: handleAddPerson,
         disabledIds: unref(state).currentAVMsg.checkedIds
       }, {
-        trigger: withCtx(() => [createElementVNode("div", _hoisted_13, [createVNode(unref(NButton), {
+        trigger: withCtx(() => [createElementVNode("div", _hoisted_12, [createVNode(unref(NButton), {
           text: "",
           color: "#fff"
         }, {
@@ -375,18 +415,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             component: unref(PersonAdd)
           }, null, 8, ["component"])]),
           _: 1
-        }), _hoisted_14])]),
+        }), _hoisted_13])]),
         _: 1
-      }, 8, ["disabledIds"])])])]), createElementVNode("div", _hoisted_15, [(openBlock(true), createElementBlock(Fragment, null, renderList(remoteUsers.value, (user) => {
+      }, 8, ["disabledIds"])])])]), createElementVNode("div", _hoisted_14, [(openBlock(true), createElementBlock(Fragment, null, renderList(remoteUsers.value, (user) => {
         return openBlock(), createElementBlock("div", {
           key: user.id,
           id: user.id,
           class: "video-view",
           "data-name": user.name
-        }, null, 8, _hoisted_16);
+        }, null, 8, _hoisted_15);
       }), 128))])])) : (openBlock(), createElementBlock(Fragment, {
         key: 1
-      }, [createElementVNode("div", _hoisted_17, [createElementVNode("span", _hoisted_18, toDisplayString(unref(callUser)) + function() {
+      }, [createElementVNode("div", _hoisted_16, [createElementVNode("span", _hoisted_17, toDisplayString(unref(callUser)) + function() {
         var _a, _b, _c;
         try {
           return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.108")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.108")) || "\u53D1\u8D77\u7684";
@@ -400,7 +440,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         } catch (e) {
           return "\u4F1A\u8BAE";
         }
-      }(), 1), !unref(isCall) ? (openBlock(), createElementBlock("span", _hoisted_19, function() {
+      }(), 1), !unref(isCall) ? (openBlock(), createElementBlock("span", _hoisted_18, function() {
         var _a, _b, _c;
         try {
           return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.110")) || ((_c = (_b = window.top) == null ? void 0 : _b.getLanguageByCode) == null ? void 0 : _c.call(_b, "10010.1.110")) || "\u9080\u8BF7\u4F60\u52A0\u5165";
@@ -414,7 +454,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         } catch (e) {
           return "\u4F1A\u8BAE";
         }
-      }(), 1)) : createCommentVNode("v-if", true)]), unref(isCall) ? (openBlock(), createElementBlock("div", _hoisted_20, [createVNode(ChatAdd, {
+      }(), 1)) : createCommentVNode("v-if", true)]), unref(isCall) ? (openBlock(), createElementBlock("div", _hoisted_19, [createVNode(ChatAdd, {
         onComfirm: handleAddPerson,
         disabledIds: unref(state).currentAVMsg.checkedIds
       }, {
@@ -459,10 +499,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           }
         }())]),
         _: 1
-      }), createElementVNode("div", _hoisted_21, [createVNode(unref(NButton), {
+      }), createElementVNode("div", _hoisted_20, [createVNode(unref(NButton), {
         color: "#000",
         round: "",
-        onClick: _cache[0] || (_cache[0] = ($event) => voiceClose.value = !unref(voiceClose))
+        onClick: _cache[1] || (_cache[1] = ($event) => voiceClose.value = !unref(voiceClose))
       }, {
         icon: withCtx(() => [createVNode(unref(NIcon), {
           component: unref(voiceClose) ? unref(MicOff) : unref(Mic)
@@ -471,25 +511,25 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }), createVNode(unref(NButton), {
         color: "#000",
         round: "",
-        onClick: _cache[1] || (_cache[1] = ($event) => videocamClose.value = !unref(videocamClose)),
+        onClick: _cache[2] || (_cache[2] = ($event) => videocamClose.value = !unref(videocamClose)),
         disabled: unref(isAudio)
       }, {
         icon: withCtx(() => [createVNode(unref(NIcon), {
           component: unref(videocamClose) ? unref(VideocamOff) : unref(Videocam)
         }, null, 8, ["component"])]),
         _: 1
-      }, 8, ["disabled"])])])) : (openBlock(), createElementBlock("div", _hoisted_22, [createElementVNode("div", _hoisted_23, [createVNode(unref(NButton), {
+      }, 8, ["disabled"])])])) : (openBlock(), createElementBlock("div", _hoisted_21, [createElementVNode("div", _hoisted_22, [createVNode(unref(NButton), {
         circle: "",
         color: "#f17568",
         class: "btn--rotate",
-        onClick: _cache[2] || (_cache[2] = () => unref(state).showMultipleVideo = false)
+        onClick: _cache[3] || (_cache[3] = () => unref(state).showMultipleVideo = false)
       }, {
         icon: withCtx(() => [createVNode(unref(NIcon), {
           size: "30",
           component: unref(Call)
         }, null, 8, ["component"])]),
         _: 1
-      }), _hoisted_24]), createElementVNode("div", _hoisted_25, [createVNode(unref(NButton), {
+      }), _hoisted_23]), createElementVNode("div", _hoisted_24, [createVNode(unref(NButton), {
         circle: "",
         color: "#2ac98b",
         onClick: handleEnter
@@ -499,7 +539,26 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           component: unref(Call)
         }, null, 8, ["component"])]),
         _: 1
-      }), _hoisted_26])]))], 64))]);
+      }), _hoisted_25])]))], 64))], 4), [[vShow, isMaxSize.value]]), withDirectives(createElementVNode("div", {
+        class: "video-wrapper video-wrapper--mini",
+        ref_key: "miniWrapperRef",
+        ref: miniWrapperRef,
+        style: normalizeStyle(unref(miniStyle))
+      }, [createElementVNode("div", _hoisted_26, [createVNode(unref(NButton), {
+        text: "",
+        color: "#ffffffcc",
+        onClick: _cache[4] || (_cache[4] = () => isMaxSize.value = true)
+      }, {
+        default: withCtx(() => [createVNode(unref(NIcon), {
+          size: "18",
+          component: unref(ResizeOutline)
+        }, null, 8, ["component"])]),
+        _: 1
+      })]), createElementVNode("div", _hoisted_27, [createVNode(unref(NAvatar), {
+        round: "",
+        size: 48,
+        src: unref(state).userInfo.avatar
+      }, null, 8, ["src"])])], 4), [[vShow, !isMaxSize.value]])], 64);
     };
   }
 });

package/es/components/iho-chat/src/components/PersonProfile.vue2.js

@@ -225,7 +225,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           round: "",
           size: 100,
           onClickCapture: _cache[0] || (_cache[0] = ($event) => showLargeAvatar.value = true)
-        }, null, 8, ["src"]), createCommentVNode(' <n-upload abstract accept="image/*" @change="onChange">\r\n							<n-upload-trigger #="{ handleClick }" abstract>\r\n								<n-button\r\n									circle\r\n									secondary\r\n									class="edit-avatar"\r\n									v-show="userDetail.id === state.userInfo.id"\r\n									@click="handleClick"\r\n								>\r\n									<template #icon>\r\n										<n-icon size="16" color="#666666" :component="Camera" />\r\n									</template>\r\n								</n-button>\r\n							</n-upload-trigger>\r\n						</n-upload> '), createElementVNode("div", _hoisted_4, [createElementVNode("h4", null, [createElementVNode("label", _hoisted_5, toDisplayString(userDetail.name), 1), withDirectives(createElementVNode("label", {
+        }, null, 8, ["src"]), createCommentVNode(' <n-upload abstract accept="image/*" @change="onChange">\n							<n-upload-trigger #="{ handleClick }" abstract>\n								<n-button\n									circle\n									secondary\n									class="edit-avatar"\n									v-show="userDetail.id === state.userInfo.id"\n									@click="handleClick"\n								>\n									<template #icon>\n										<n-icon size="16" color="#666666" :component="Camera" />\n									</template>\n								</n-button>\n							</n-upload-trigger>\n						</n-upload> '), createElementVNode("div", _hoisted_4, [createElementVNode("h4", null, [createElementVNode("label", _hoisted_5, toDisplayString(userDetail.name), 1), withDirectives(createElementVNode("label", {
           class: normalizeClass(["iho-chatRole", unref(isDoctorRole)(userDetail.roleInfo) ? "isDoctor" : ""])
         }, toDisplayString(unref(getRoleName)(userDetail.roleInfo)), 3), [[vShow, unref(getRoleName)(userDetail.roleInfo)]])]), createElementVNode("p", null, toDisplayString(userDetail.orgName), 1)]), createVNode(unref(NButton), {
           strong: "",

package/es/components/iho-chat/src/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from './useData';
 export * from './useWebSocket';
 export * from './useVideo';
+export * from './useDraggable';

package/es/components/iho-chat/src/hooks/index.js

@@ -1,3 +1,4 @@
 export { InjectionIChatData, initData, useData } from './useData.js';
 export { useWebSocket } from './useWebSocket.js';
 export { useVideo } from './useVideo.js';
+export { useDraggable } from './useDraggable.js';

package/es/components/iho-chat/src/hooks/useDraggable.d.ts

@@ -0,0 +1,25 @@
+import { type Ref } from 'vue';
+interface Position {
+    x: number;
+    y: number;
+}
+type PositionStr = 'center' | 'top-right';
+interface UseDraggableOptions {
+    handle?: Ref<HTMLElement | null>;
+    initialPosition?: PositionStr;
+    onDragStart?: (position: Position) => void;
+    onDrag?: (position: Position) => void;
+    onDragEnd?: (position: Position) => void;
+}
+export declare function useDraggable(target: Ref<HTMLElement | null>, options?: UseDraggableOptions): {
+    style: Ref<{
+        left: string;
+        top: string;
+    }>;
+    position: {
+        x: Ref<number>;
+        y: Ref<number>;
+    };
+    changePosition: (position?: PositionStr) => void;
+};
+export {};

package/es/components/iho-chat/src/hooks/useDraggable.js

@@ -0,0 +1,151 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+function useDraggable(target, options = {}) {
+  const x = ref(0);
+  const y = ref(0);
+  const isDragging = ref(false);
+  const startPos = ref({
+    x: 0,
+    y: 0
+  });
+  const startMousePos = ref({
+    x: 0,
+    y: 0
+  });
+  const style = ref({
+    left: `${x.value}px`,
+    top: `${y.value}px`
+  });
+  const updatePosition = () => {
+    style.value = {
+      left: `${x.value}px`,
+      top: `${y.value}px`
+    };
+  };
+  const centerElement = () => {
+    if (!target.value)
+      return;
+    const {
+      width: width1,
+      height: height1
+    } = target.value.getBoundingClientRect();
+    const {
+      width: width2,
+      height: height2
+    } = getHiddenElementRect(target.value);
+    const width = width1 || width2 || 0;
+    const height = height1 || height2 || 0;
+    x.value = window.innerWidth / 2 - width / 2;
+    y.value = window.innerHeight / 2 - height / 2;
+    updatePosition();
+  };
+  const topRightElement = () => {
+    if (!target.value)
+      return;
+    const {
+      width: width1
+    } = target.value.getBoundingClientRect();
+    const {
+      width: width2
+    } = getHiddenElementRect(target.value);
+    const width = width1 || width2 || 0;
+    x.value = window.innerWidth - width - 20;
+    y.value = 20;
+    updatePosition();
+  };
+  const handlePosition = () => {
+    changePosition(options.initialPosition);
+  };
+  const changePosition = (position) => {
+    if (!position)
+      return;
+    if (position === "center") {
+      centerElement();
+    } else if (position === "top-right") {
+      topRightElement();
+    }
+  };
+  const onMouseDown = (e) => {
+    var _a;
+    if (!target.value)
+      return;
+    isDragging.value = true;
+    startMousePos.value = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    startPos.value = {
+      x: x.value,
+      y: y.value
+    };
+    (_a = options.onDragStart) == null ? void 0 : _a.call(options, {
+      x: x.value,
+      y: y.value
+    });
+    e.preventDefault();
+    document.body.style.userSelect = "none";
+  };
+  const onMouseMove = (e) => {
+    var _a;
+    if (!isDragging.value)
+      return;
+    const dx = e.clientX - startMousePos.value.x;
+    const dy = e.clientY - startMousePos.value.y;
+    x.value = startPos.value.x + dx;
+    y.value = startPos.value.y + dy;
+    updatePosition();
+    (_a = options.onDrag) == null ? void 0 : _a.call(options, {
+      x: x.value,
+      y: y.value
+    });
+  };
+  const onMouseUp = () => {
+    var _a;
+    if (!isDragging.value)
+      return;
+    isDragging.value = false;
+    document.body.style.userSelect = "";
+    (_a = options.onDragEnd) == null ? void 0 : _a.call(options, {
+      x: x.value,
+      y: y.value
+    });
+  };
+  onMounted(() => {
+    var _a, _b;
+    const handle = (_b = (_a = options.handle) == null ? void 0 : _a.value) != null ? _b : target.value;
+    if (!handle)
+      return;
+    handlePosition();
+    handle.addEventListener("mousedown", onMouseDown);
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    window.addEventListener("resize", handlePosition);
+  });
+  onBeforeUnmount(() => {
+    var _a, _b;
+    const handle = (_b = (_a = options.handle) == null ? void 0 : _a.value) != null ? _b : target.value;
+    if (!handle)
+      return;
+    handle.removeEventListener("mousedown", onMouseDown);
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+    window.removeEventListener("resize", handlePosition);
+  });
+  return {
+    style,
+    position: {
+      x,
+      y
+    },
+    changePosition
+  };
+}
+function getHiddenElementRect(element) {
+  const styles = window.getComputedStyle(element);
+  return {
+    width: parseFloat(styles.width),
+    height: parseFloat(styles.height)
+  };
+}
+
+export { useDraggable };