@openmool/mool-shared-hooks - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/browser.d.ts

+export declare function useBrowser(): {
+    browser: any;
+    onScreenChange(ev: () => void, immediate?: boolean): void;
+};

dist/browser.js

+import { useEventListener } from "@vueuse/core";
+import { reactive, watch } from "vue";
+import { getBrowser } from "../utils";
+const browser = reactive(getBrowser());
+const events = [];
+watch(() => browser.screen, () => {
+    events.forEach((ev) => ev());
+});
+useEventListener(window, "resize", () => {
+    Object.assign(browser, getBrowser());
+});
+export function useBrowser() {
+    return {
+        browser,
+        onScreenChange(ev, immediate = true) {
+            events.push(ev);
+            if (immediate) {
+                ev();
+            }
+        }
+    };
+}

dist/drag.d.ts

+declare const insertIndex: any;
+declare let sourceIndex: number | null;
+/**
+ * 开始进入拖拽排序
+ */
+declare const startDrag: (el: DragEvent, targetNode: HTMLElement, parentNode: HTMLElement) => void;
+export declare const useDrag: (sourceEl: string[], targetEl: string, option: {
+    enter?: ((el: DragEvent, sort: (el: DragEvent, targetNode: HTMLElement, parentNode: HTMLElement) => void, insertIndex: any, sourceIndex?: number | null | undefined) => void) | undefined;
+    start?: ((el: DragEvent, sourceIndex: number | null) => void) | undefined;
+    over?: ((el: DragEvent) => void) | undefined;
+    leave?: ((el: DragEvent) => void) | undefined;
+    end?: ((el: DragEvent, data: string, insertIndex: any) => void) | undefined;
+}, doc?: Document) => () => void;
+export {};

dist/drag.js

+import { ref } from "vue";
+const insertIndex = ref(null);
+let sourceIndex = null;
+let divRect = {};
+let offsetX, offsetY;
+/**
+ * 开始进入拖拽排序
+ */
+const startDrag = (el, targetNode, parentNode) => {
+    // 判断鼠标是否进入了div
+    let enterDiv = el.clientX - offsetX > divRect.left &&
+        el.clientX - offsetX < divRect.right &&
+        el.clientY - offsetY > divRect.top &&
+        el.clientY - offsetY < divRect.bottom;
+    if (enterDiv)
+        return;
+    enterDiv = true;
+    sourceIndex = Array.prototype.indexOf.call(parentNode.children, el.target);
+    insertIndex.value = Array.prototype.indexOf.call(parentNode.children, targetNode);
+    drag();
+    function drag() {
+        if (sourceIndex != -1) {
+            if (insertIndex.value <= sourceIndex) {
+                targetNode &&
+                    parentNode.insertBefore(targetNode, el.target.nextElementSibling);
+                enterDiv = false;
+            }
+            else {
+                targetNode && parentNode.insertBefore(targetNode, el.target);
+                enterDiv = false;
+            }
+            sourceIndex = Array.prototype.indexOf.call(parentNode.children, el.target);
+            insertIndex.value = Array.prototype.indexOf.call(parentNode.children, targetNode);
+            divRect = targetNode.getBoundingClientRect();
+        }
+    }
+};
+export const useDrag = (sourceEl, targetEl, option, doc = window.document) => {
+    function start(el) {
+        const target = el.currentTarget;
+        const source = Array.prototype.indexOf.call(target.parentNode?.children, target);
+        option.start && option.start(el, source);
+        // currentRowIndex.value = null;
+        el.dataTransfer?.setData("text/plain", target.dataset.type ?? "");
+        offsetX = el.offsetX;
+        offsetY = el.offsetY;
+    }
+    sourceEl.forEach((el) => {
+        document.querySelectorAll(el).forEach((element) => {
+            element.draggable = true;
+            element.addEventListener("dragstart", start);
+        });
+    });
+    function enter(el) {
+        el.dataTransfer.dropEffect = "copy";
+        option.enter && option.enter(el, startDrag, insertIndex);
+        el.preventDefault();
+    }
+    function over(el) {
+        option.over && option.over(el);
+        el.preventDefault();
+    }
+    function leave(el) {
+        el.preventDefault();
+        option.leave && option.leave(el);
+    }
+    function end(el) {
+        const data = el.dataTransfer.getData("text/plain");
+        option.end && option.end(el, data, insertIndex);
+    }
+    const EVENTLIST = { dragenter: enter, dragover: over, dragleave: leave, drop: end };
+    for (const [name, event] of Object.entries(EVENTLIST)) {
+        const eventName = name;
+        doc.querySelectorAll(targetEl).forEach((el) => {
+            console.log(el);
+            el.addEventListener(eventName, event);
+        });
+    }
+    function removeDrag() {
+        for (const [name, event] of Object.entries(EVENTLIST)) {
+            const eventName = name;
+            doc.querySelectorAll(targetEl).forEach((el) => {
+                el.removeEventListener(eventName, event);
+            });
+        }
+    }
+    return removeDrag;
+};

dist/hmr.d.ts

+export declare const hmr: {
+    data: any;
+    setData(key: string, value: any): void;
+    getData(key: string, defaultValue?: any): any;
+};

dist/hmr.js

+// 解决热更新后失效问题;
+const data = import.meta.hot?.data.getData?.() || {};
+if (import.meta.hot) {
+    import.meta.hot.data.getData = () => {
+        return data;
+    };
+}
+export const hmr = {
+    data,
+    setData(key, value) {
+        data[key] = value;
+    },
+    getData(key, defaultValue) {
+        if (defaultValue !== undefined && !data[key]) {
+            this.setData(key, defaultValue);
+        }
+        return data[key];
+    }
+};

dist/index.d.ts

+import { Ref } from 'vue';
+export declare function useRefs(): {
+    refs: any;
+    setRefs: (name: string) => (el: any) => () => any;
+};
+export declare function useParent(name: string, r: Ref): Ref;
+export declare function useMool(): {
+    refs: any;
+    setRefs: (name: string) => (el: any) => () => any;
+    browser: any;
+    onScreenChange(ev: () => void, immediate?: boolean): void;
+    route: any;
+    router: any;
+    mitt: import("mitt").Emitter<any>;
+};
+export * from './browser';
+export * from './hmr';
+export * from './mitt';
+export * from './drag';
+export * from './loading';

dist/index.js

+import { getCurrentInstance, reactive } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useBrowser } from './browser';
+import { useMitt } from './mitt';
+export function useRefs() {
+    const refs = reactive({});
+    function setRefs(name) {
+        return (el) => {
+            refs[name] = el;
+            return () => refs[name];
+        };
+    }
+    return { refs, setRefs };
+}
+export function useParent(name, r) {
+    const d = getCurrentInstance();
+    if (d) {
+        let parent = d.proxy?.$.parent;
+        if (parent) {
+            while (parent && parent.type?.name != name) {
+                parent = parent?.parent;
+            }
+            if (parent) {
+                if (parent.type.name == name) {
+                    r.value = parent.exposed;
+                }
+            }
+        }
+    }
+    return r;
+}
+export function useMool() {
+    return {
+        route: useRoute(),
+        router: useRouter(),
+        mitt: useMitt(),
+        ...useBrowser(),
+        ...useRefs(),
+    };
+}
+export * from './browser';
+export * from './hmr';
+export * from './mitt';
+export * from './drag';
+export * from './loading';

dist/loading.d.ts

+export default function useLoading(initValue?: boolean): {
+    loading: any;
+    setLoading: (value: boolean) => void;
+    toggle: () => void;
+};

dist/loading.js

+import { ref } from 'vue';
+export default function useLoading(initValue = false) {
+    const loading = ref(initValue);
+    const setLoading = (value) => {
+        loading.value = value;
+    };
+    const toggle = () => {
+        loading.value = !loading.value;
+    };
+    return {
+        loading,
+        setLoading,
+        toggle,
+    };
+}

dist/mitt.d.ts

+import { Emitter } from "mitt";
+export declare function useMitt(): Emitter<any>;

dist/mitt.js

+import Mitt from "mitt";
+import { hmr } from "./hmr";
+const mitt = hmr.getData("mitt", Mitt());
+export function useMitt() {
+    return mitt;
+}

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "esnext", // 编译目标
+    "module": "esnext", // 模块系统
+    "moduleResolution": "node", // 模块解析策略
+    "declaration": true, // 生成类型声明文件
+    "declarationDir": "./dist/", // 类型声明文件输出目录
+    "outDir": "./dist", // 输出目录
+    "strict": true, // 启用所有严格类型检查选项
+    "jsx": "preserve", // JSX 处理方式
+    "esModuleInterop": true, // 允许默认导入非 ES 模块
+    "skipLibCheck": true, // 跳过库文件的类型检查
+    "forceConsistentCasingInFileNames": true // 强制文件名一致性
+  },
+  "include": [
+    "hooks/*.ts", // 包含所有 TypeScript 文件
+  ],
+  "exclude": [
+    "node_modules", // 排除 node_modules 目录
+    "dist" // 排除输出目录
+  ]
+}

package.json

 {
   "name": "@openmool/mool-shared-hooks",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "@openmool开源产品的共享hooks函数库，可单独引入项目",
@@ -26,2 +26,5 @@ "main": "index.js",
   },
+  "scripts": {
+    "build": "tsc"
+  },
   "dependencies": {
@@ -31,4 +34,8 @@ "@vueuse/core": "^11.1.0",
   },
+  "devDependencies": {
+    "@types/node": "^18.11.18",
+    "typescript": "^4.9.3"
+  },
   "peerDependencies": {
-    "vue": "^3.2.25", 
+    "vue": "^3.2.25",
     "vue-router": "^4.0.12"
@@ -35,0 +42,0 @@ },

hooks/browser.ts

-import { useEventListener } from "@vueuse/core";
-import { reactive, watch } from "vue";
-import { getBrowser } from "../utils";
-
-const browser = reactive(getBrowser());
-const events: (() => void)[] = [];
-
-watch(
-	() => browser.screen,
-	() => {
-		events.forEach((ev) => ev());
-	}
-);
-
-useEventListener(window, "resize", () => {
-	Object.assign(browser, getBrowser());
-});
-
-export function useBrowser() {
-	return {
-		browser,
-		onScreenChange(ev: () => void, immediate = true) {
-			events.push(ev);
-
-			if (immediate) {
-				ev();
-			}
-		}
-	};
-}

hooks/drag.ts

-import { ref } from "vue";
-const insertIndex = ref<number | null>(null);
-let sourceIndex: number | null = null;
-let divRect = {} as DOMRect;
-let offsetX: number, offsetY: number;
-
-/**
- * 开始进入拖拽排序
- */
-const startDrag = (
-  el: DragEvent,
-
-  targetNode: HTMLElement,
-
-  parentNode: HTMLElement,
-) => {
-  // 判断鼠标是否进入了div
-
-  let enterDiv =
-    el.clientX - offsetX > divRect.left &&
-    el.clientX - offsetX < divRect.right &&
-    el.clientY - offsetY > divRect.top &&
-    el.clientY - offsetY < divRect.bottom;
-
-  if (enterDiv) return;
-
-  enterDiv = true;
-
-  sourceIndex = Array.prototype.indexOf.call(parentNode.children, el.target);
-
-  insertIndex.value = Array.prototype.indexOf.call(parentNode.children, targetNode);
-
-  drag();
-
-  function drag() {
-    if (sourceIndex != -1) {
-      if (insertIndex.value! <= sourceIndex!) {
-        targetNode &&
-          parentNode.insertBefore(
-            targetNode,
-
-            (el.target as HTMLElement).nextElementSibling,
-          );
-
-        enterDiv = false;
-      } else {
-        targetNode && parentNode.insertBefore(targetNode, el.target as HTMLElement);
-
-        enterDiv = false;
-      }
-
-      sourceIndex = Array.prototype.indexOf.call(
-        parentNode.children,
-
-        el.target,
-      );
-
-      insertIndex.value = Array.prototype.indexOf.call(
-        parentNode.children,
-
-        targetNode,
-      );
-
-      divRect = targetNode!.getBoundingClientRect();
-    }
-  }
-};
-
-export const useDrag = (
-  sourceEl: string[],
-
-  targetEl: string,
-
-  option: {
-    enter?: (
-      ...arg: [el: DragEvent, sort: typeof startDrag, insertIndex: typeof insertIndex, sourceIndex?: typeof sourceIndex]
-    ) => void;
-
-    start?: (el: DragEvent, sourceIndex: number | null) => void;
-
-    over?: (el: DragEvent) => void;
-
-    leave?: (el: DragEvent) => void;
-
-    end?: (...arg: [el: DragEvent, data: string, insertIndex: typeof insertIndex]) => void;
-  },
-  doc: Document = window.document,
-) => {
-  function start(el: DragEvent) {
-    const target = el.currentTarget as HTMLElement;
-
-    const source = Array.prototype.indexOf.call(
-      target.parentNode?.children,
-
-      target,
-    );
-
-    option.start && option.start(el, source);
-
-    // currentRowIndex.value = null;
-
-    el.dataTransfer?.setData("text/plain", target.dataset.type ?? "");
-
-    offsetX = el.offsetX;
-
-    offsetY = el.offsetY;
-  }
-
-  sourceEl.forEach((el) => {
-    document.querySelectorAll<HTMLElement>(el).forEach((element) => {
-      element.draggable = true;
-
-      element.addEventListener("dragstart", start);
-    });
-  });
-
-  function enter(el: DragEvent) {
-    el.dataTransfer!.dropEffect = "copy";
-
-    option.enter && option.enter(el, startDrag, insertIndex);
-
-    el.preventDefault();
-  }
-  function over(el: DragEvent) {
-    option.over && option.over(el);
-    el.preventDefault();
-  }
-  function leave(el: DragEvent) {
-    el.preventDefault();
-
-    option.leave && option.leave(el);
-  }
-  function end(el: DragEvent) {
-    const data = el.dataTransfer!.getData("text/plain");
-
-    option.end && option.end(el, data, insertIndex);
-  }
-  const EVENTLIST = { dragenter: enter, dragover: over, dragleave: leave, drop: end };
-  for (const [name, event] of Object.entries(EVENTLIST)) {
-    const eventName = name as keyof HTMLElementEventMap;
-    doc.querySelectorAll<HTMLElement>(targetEl)!.forEach((el) => {
-      console.log(el);
-      
-      el.addEventListener(eventName, event as EventListenerOrEventListenerObject);
-    });
-  }
-  function removeDrag() {
-    for (const [name, event] of Object.entries(EVENTLIST)) {
-      const eventName = name as keyof HTMLElementEventMap;
-      doc.querySelectorAll<HTMLElement>(targetEl)!.forEach((el) => {
-        el.removeEventListener(eventName, event as EventListenerOrEventListenerObject);
-      });
-    }
-  }
-
-  return removeDrag;
-};

hooks/hmr.ts

-// 解决热更新后失效问题;
-const data = import.meta.hot?.data.getData?.() || {};
-
-if (import.meta.hot) {
-	import.meta.hot.data.getData = () => {
-		return data;
-	};
-}
-
-export const hmr = {
-	data,
-
-	setData(key: string, value: any) {
-		data[key] = value;
-	},
-
-	getData(key: string, defaultValue?: any) {
-		if (defaultValue !== undefined && !data[key]) {
-			this.setData(key, defaultValue);
-		}
-		return data[key];
-	}
-};

hooks/index.ts

-import { getCurrentInstance, Ref, reactive } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useBrowser } from './browser';
-import { useMitt } from './mitt';
-import {useMagicKeys} from "@vueuse/core";
-export function useRefs() {
-  const refs = reactive<{ [key: string]: any }>({});
-
-  function setRefs(name: string) {
-    return (el: any) => {
-      refs[name] = el;
-      return () => refs[name];
-    };
-  }
-
-  return { refs, setRefs };
-}
-
-export function useParent(name: string, r: Ref) {
-  const d = getCurrentInstance();
-
-  if (d) {
-    let parent = d.proxy?.$.parent;
-
-    if (parent) {
-      while (parent && parent.type?.name != name) {
-        parent = parent?.parent;
-      }
-
-      if (parent) {
-        if (parent.type.name == name) {
-          r.value = parent.exposed;
-        }
-      }
-    }
-  }
-
-  return r;
-}
-
-export function useMool() {
-  return {
-    route: useRoute(),
-    router: useRouter(),
-    mitt: useMitt(),
-    ...useBrowser(),
-    ...useRefs(),
-  };
-}
-
-export * from './browser';
-export * from './hmr';
-export * from './mitt';
-export * from './drag';
-export * from './loading';

hooks/loading.ts

-import { ref } from 'vue';
-
-export default function useLoading(initValue = false) {
-  const loading = ref(initValue);
-  const setLoading = (value: boolean) => {
-    loading.value = value;
-  };
-  const toggle = () => {
-    loading.value = !loading.value;
-  };
-  return {
-    loading,
-    setLoading,
-    toggle,
-  };
-}

hooks/mitt.ts

-import Mitt, { Emitter } from "mitt";
-import { hmr } from "./hmr";
-
-const mitt: Emitter<any> = hmr.getData("mitt", Mitt());
-
-export function useMitt() {
-	return mitt;
-}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Improved metrics

Total package byte prevSize

10025

28.36%

Number of package files

16

77.78%

Lines of code

267

18.14%

Worsened metrics

Dev dependency count

2

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes