cnhis-design-vue 3.3.3-beta.3 → 3.3.3-beta.30

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,160 @@
+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 clamp = (val, min, max) => Math.max(min, Math.min(val, max));
+  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 || !target.value)
+      return;
+    const dx = e.clientX - startMousePos.value.x;
+    const dy = e.clientY - startMousePos.value.y;
+    const {
+      width,
+      height
+    } = target.value.getBoundingClientRect();
+    const minX = 0;
+    const minY = 0;
+    const maxX = window.innerWidth - width;
+    const maxY = window.innerHeight - height;
+    x.value = clamp(startPos.value.x + dx, minX, maxX);
+    y.value = clamp(startPos.value.y + dy, minY, maxY);
+    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 };

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

@@ -9,8 +9,7 @@ export declare function listSort(list: AnyObject[]): AnyObject[];
 export declare function transformMessage(content: AnyObject): any;
 export declare function getAVTime(msg: string): string;
 export declare function simplifyMessage(lastMessage: AnyObject): any;
-export declare function downloadFile(url: string, filename: string): void;
-export declare function getFileSize(url: string): Promise<unknown>;
+export declare function downloadFile(msg: string): void;
 export declare function base64ToFile(base64: string): Promise<File | undefined>;
 export declare function isAudioOrVideoMessage(message: AnyObject): boolean;
 export declare function formatSeconds(seconds: number): string;
@@ -18,7 +17,7 @@ export declare function isGroup(session: AnyObject): boolean;
 export declare function getForwardTitle(content: AnyObject): string | undefined;
 export declare function isDoctorRole(type: string): boolean;
 export declare function getRoleName(type: string): string;
-export declare function getFileDetails(msg: string, type: string): any;
 export declare function getFileType(msg: string): string;
 export declare function getDetail(item: AnyObject, isShowSize?: boolean): string;
 export declare function showAudioAndVideoRecord(chatMessageType: string): "语音通话" | "视频通话";
+export declare function formatJsonstr(obj: AnyObject | string, type: string): any;

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

@@ -177,44 +177,24 @@ function simplifyMessage(lastMessage) {
       return "[\u6D88\u606F]";
   }
 }
-function downloadFile(url, filename) {
+function downloadFile(msg) {
+  const fileName = formatJsonstr(msg, "fileName");
+  const fileUrl = formatJsonstr(msg, "fileUrl");
   const x = new XMLHttpRequest();
-  x.open("GET", url, true);
+  x.open("GET", fileUrl, true);
   x.responseType = "blob";
   x.onload = function(e) {
     if (x.status === 200) {
       const _url = window.URL.createObjectURL(x.response);
       const a = document.createElement("a");
       a.href = _url;
-      a.download = filename;
+      a.download = fileName;
       a.dispatchEvent(new MouseEvent("click"));
       window.URL.revokeObjectURL(_url);
     }
   };
   x.send();
 }
-function getFileSize(url) {
-  return new Promise((resolve, reject) => {
-    const x = new XMLHttpRequest();
-    x.open("HEAD", url, true);
-    x.onreadystatechange = () => {
-      var _a;
-      if (x.readyState === 4 && x.status === 200) {
-        let size = (_a = x.getResponseHeader("Content-Length")) != null ? _a : 0;
-        const _size = +size;
-        if (_size > 1024 * 1024) {
-          size = (_size / (1024 * 1024)).toFixed(2) + "M";
-        } else if (_size > 1024) {
-          size = (_size / 1024).toFixed(2) + "K";
-        } else {
-          size = size + "B";
-        }
-        resolve(size);
-      }
-    };
-    x.send();
-  });
-}
 async function base64ToFile(base64) {
   try {
     const res = await fetch(base64);
@@ -272,17 +252,6 @@ function getRoleName(type) {
   }
   return roleName;
 }
-function getFileDetails(msg, type) {
-  try {
-    const parseMsg = JSON.parse(msg);
-    if (parseMsg) {
-      return parseMsg[type];
-    }
-    return "";
-  } catch (error) {
-    return msg || "";
-  }
-}
 function getFileType(msg) {
   const dotIndex = msg.lastIndexOf(".");
   if (dotIndex !== -1) {
@@ -293,13 +262,14 @@ function getFileType(msg) {
 }
 function getDetail(item, isShowSize) {
   const {
-    size,
+    content = {},
     sendTime,
     senderName
   } = item;
   const details = `${format(new Date(sendTime), "yyyy/MM/dd HH:mm")} ${senderName}`;
   if (isShowSize) {
-    return `${size} \xB7 ${details}`;
+    const fileSize = formatJsonstr(content.msg, "fileSize");
+    return `${fileSize} \xB7 ${details}`;
   }
   return details;
 }
@@ -320,5 +290,16 @@ function showAudioAndVideoRecord(chatMessageType) {
     }
   }();
 }
+function formatJsonstr(obj, type) {
+  try {
+    if (typeof obj === "string") {
+      const objParse = JSON.parse(obj);
+      return objParse[type];
+    }
+    return obj[type];
+  } catch (error) {
+    return obj;
+  }
+}
 
-export { $message, base64ToFile, downloadFile, formatSeconds, formatTime, getAVTime, getDetail, getFileDetails, getFileSize, getFileType, getForwardTitle, getRoleName, isAudioOrVideoMessage, isDoctorRole, isGroup, listSort, showAudioAndVideoRecord, simplifyMessage, transformMessage };
+export { $message, base64ToFile, downloadFile, formatJsonstr, formatSeconds, formatTime, getAVTime, getDetail, getFileType, getForwardTitle, getRoleName, isAudioOrVideoMessage, isDoctorRole, isGroup, listSort, showAudioAndVideoRecord, simplifyMessage, transformMessage };