@varlet/use 2.20.2 → 2.20.3-alpha.1703057787821

package/lib/index.cjs

@@ -0,0 +1,483 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  keyInProvides: () => keyInProvides,
+  onSmartMounted: () => onSmartMounted,
+  onSmartUnmounted: () => onSmartUnmounted,
+  onWindowResize: () => onWindowResize,
+  useChildren: () => useChildren,
+  useClickOutside: () => useClickOutside,
+  useEventListener: () => useEventListener,
+  useId: () => useId,
+  useInitialized: () => useInitialized,
+  useParent: () => useParent,
+  useTouch: () => useTouch,
+  useVModel: () => useVModel,
+  useWindowSize: () => useWindowSize
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/useEventListener.ts
+var import_shared = require("@varlet/shared");
+var import_vue2 = require("vue");
+
+// src/onSmartMounted.ts
+var import_vue = require("vue");
+function onSmartMounted(hook) {
+  let isMounted = false;
+  (0, import_vue.onMounted)(() => {
+    hook();
+    (0, import_vue.nextTick)(() => {
+      isMounted = true;
+    });
+  });
+  (0, import_vue.onActivated)(() => {
+    if (!isMounted) {
+      return;
+    }
+    hook();
+  });
+}
+
+// src/useEventListener.ts
+function useEventListener(target, type, listener, options = {}) {
+  if (!(0, import_shared.inBrowser)()) {
+    return;
+  }
+  const { passive = false, capture = false } = options;
+  let listening = false;
+  let cleaned = false;
+  const getElement = (target2) => (0, import_shared.isFunction)(target2) ? target2() : (0, import_vue2.unref)(target2);
+  const add = (target2) => {
+    if (listening || cleaned) {
+      return;
+    }
+    const element = getElement(target2);
+    if (element) {
+      element.addEventListener(type, listener, {
+        passive,
+        capture
+      });
+      listening = true;
+    }
+  };
+  const remove = (target2) => {
+    if (!listening || cleaned) {
+      return;
+    }
+    const element = getElement(target2);
+    if (element) {
+      element.removeEventListener(type, listener, {
+        capture
+      });
+      listening = false;
+    }
+  };
+  let watchStopHandle;
+  if ((0, import_vue2.isRef)(target)) {
+    watchStopHandle = (0, import_vue2.watch)(
+      () => target.value,
+      (newValue, oldValue) => {
+        remove(oldValue);
+        add(newValue);
+      }
+    );
+  }
+  const cleanup = () => {
+    watchStopHandle == null ? void 0 : watchStopHandle();
+    remove(target);
+    cleaned = true;
+  };
+  onSmartMounted(() => {
+    add(target);
+  });
+  (0, import_vue2.onBeforeUnmount)(() => {
+    remove(target);
+  });
+  (0, import_vue2.onDeactivated)(() => {
+    remove(target);
+  });
+  return cleanup;
+}
+
+// src/useClickOutside.ts
+var import_shared2 = require("@varlet/shared");
+var import_vue3 = require("vue");
+function useClickOutside(target, type, listener) {
+  if (!(0, import_shared2.inBrowser)()) {
+    return;
+  }
+  const handler = (event) => {
+    const element = (0, import_shared2.isFunction)(target) ? target() : (0, import_vue3.unref)(target);
+    if (element && !element.contains(event.target)) {
+      listener(event);
+    }
+  };
+  useEventListener(document, type, handler);
+}
+
+// src/onSmartUnmounted.ts
+var import_vue4 = require("vue");
+function onSmartUnmounted(hook) {
+  (0, import_vue4.onUnmounted)(() => {
+    hook();
+  });
+  (0, import_vue4.onDeactivated)(() => {
+    hook();
+  });
+}
+
+// src/useParent.ts
+var import_vue5 = require("vue");
+function keyInProvides(key) {
+  const instance = (0, import_vue5.getCurrentInstance)();
+  return key in instance.provides;
+}
+function useParent(key) {
+  if (!keyInProvides(key)) {
+    return {
+      index: null,
+      parentProvider: null,
+      bindParent: null
+    };
+  }
+  const provider = (0, import_vue5.inject)(key);
+  const _a = provider, { childInstances, collect, clear } = _a, parentProvider = __objRest(_a, ["childInstances", "collect", "clear"]);
+  const childInstance = (0, import_vue5.getCurrentInstance)();
+  const index = (0, import_vue5.computed)(() => childInstances.indexOf(childInstance));
+  const bindParent = (childProvider) => {
+    (0, import_vue5.onMounted)(() => {
+      (0, import_vue5.nextTick)().then(() => {
+        collect(childInstance, childProvider);
+      });
+    });
+    (0, import_vue5.onBeforeUnmount)(() => {
+      (0, import_vue5.nextTick)().then(() => {
+        clear(childInstance, childProvider);
+      });
+    });
+  };
+  return {
+    index,
+    parentProvider,
+    bindParent
+  };
+}
+
+// src/useChildren.ts
+var import_shared3 = require("@varlet/shared");
+var import_vue6 = require("vue");
+function flatVNodes(subTree) {
+  const vNodes = [];
+  const flat = (subTree2) => {
+    if (subTree2 == null ? void 0 : subTree2.component) {
+      flat(subTree2 == null ? void 0 : subTree2.component.subTree);
+      return;
+    }
+    if (Array.isArray(subTree2 == null ? void 0 : subTree2.children)) {
+      subTree2.children.forEach((child) => {
+        if ((0, import_vue6.isVNode)(child)) {
+          vNodes.push(child);
+          flat(child);
+        }
+      });
+    }
+  };
+  flat(subTree);
+  return vNodes;
+}
+function useChildren(key) {
+  const parentInstance = (0, import_vue6.getCurrentInstance)();
+  const childInstances = (0, import_vue6.reactive)([]);
+  const childProviders = [];
+  const length = (0, import_vue6.computed)(() => childInstances.length);
+  const sortInstances = () => {
+    const vNodes = flatVNodes(parentInstance.subTree);
+    childInstances.sort((a, b) => vNodes.indexOf(a.vnode) - vNodes.indexOf(b.vnode));
+  };
+  const collect = (childInstance, childProvider) => {
+    childInstances.push(childInstance);
+    childProviders.push(childProvider);
+    sortInstances();
+  };
+  const clear = (childInstance, childProvider) => {
+    (0, import_shared3.removeItem)(childInstances, childInstance);
+    (0, import_shared3.removeItem)(childProviders, childProvider);
+  };
+  const bindChildren = (parentProvider) => {
+    (0, import_vue6.provide)(key, __spreadValues({
+      childInstances,
+      collect,
+      clear
+    }, parentProvider));
+  };
+  return {
+    length,
+    childProviders,
+    bindChildren
+  };
+}
+
+// src/onWindowResize.ts
+function onWindowResize(listener) {
+  useEventListener(() => window, "resize", listener, { passive: true });
+  useEventListener(() => window, "orientationchange", listener, { passive: true });
+}
+
+// src/useInitialized.ts
+var import_vue7 = require("vue");
+function useInitialized(source, value) {
+  const initialized = (0, import_vue7.ref)(false);
+  (0, import_vue7.watch)(
+    source,
+    (newValue) => {
+      if (value === newValue) {
+        initialized.value = true;
+      }
+    },
+    { immediate: true }
+  );
+  return initialized;
+}
+
+// src/useTouch.ts
+var import_vue8 = require("vue");
+var import_shared4 = require("@varlet/shared");
+function getDirection(x, y) {
+  if (x > y) {
+    return "horizontal";
+  }
+  if (y > x) {
+    return "vertical";
+  }
+}
+function useTouch() {
+  const startX = (0, import_vue8.ref)(0);
+  const startY = (0, import_vue8.ref)(0);
+  const deltaX = (0, import_vue8.ref)(0);
+  const deltaY = (0, import_vue8.ref)(0);
+  const offsetX = (0, import_vue8.ref)(0);
+  const offsetY = (0, import_vue8.ref)(0);
+  const prevX = (0, import_vue8.ref)(0);
+  const prevY = (0, import_vue8.ref)(0);
+  const moveX = (0, import_vue8.ref)(0);
+  const moveY = (0, import_vue8.ref)(0);
+  const direction = (0, import_vue8.ref)();
+  const touching = (0, import_vue8.ref)(false);
+  const dragging = (0, import_vue8.ref)(false);
+  const startTime = (0, import_vue8.ref)(0);
+  const distance = (0, import_vue8.ref)(0);
+  let draggingAnimationFrame = null;
+  const resetTouch = () => {
+    startX.value = 0;
+    startY.value = 0;
+    deltaX.value = 0;
+    deltaY.value = 0;
+    offsetX.value = 0;
+    offsetY.value = 0;
+    prevX.value = 0;
+    prevY.value = 0;
+    moveX.value = 0;
+    moveY.value = 0;
+    direction.value = void 0;
+    touching.value = false;
+    dragging.value = false;
+    startTime.value = 0;
+    distance.value = 0;
+  };
+  const startTouch = (event) => {
+    resetTouch();
+    const { clientX: x, clientY: y } = event.touches[0];
+    startX.value = x;
+    startY.value = y;
+    prevX.value = x;
+    prevY.value = y;
+    touching.value = true;
+    startTime.value = performance.now();
+    dragging.value = false;
+    if (draggingAnimationFrame) {
+      window.cancelAnimationFrame(draggingAnimationFrame);
+    }
+  };
+  const moveTouch = (event) => {
+    const { clientX: x, clientY: y } = event.touches[0];
+    dragging.value = true;
+    deltaX.value = x - startX.value;
+    deltaY.value = y - startY.value;
+    offsetX.value = Math.abs(deltaX.value);
+    offsetY.value = Math.abs(deltaY.value);
+    distance.value = Math.sqrt(offsetX.value ** 2 + offsetY.value ** 2);
+    moveX.value = x - prevX.value;
+    moveY.value = y - prevY.value;
+    if (!direction.value) {
+      direction.value = getDirection(offsetX.value, offsetY.value);
+    }
+    prevX.value = x;
+    prevY.value = y;
+  };
+  const endTouch = () => {
+    touching.value = false;
+    draggingAnimationFrame = window.requestAnimationFrame(() => {
+      dragging.value = false;
+    });
+  };
+  const isReachTop = (element) => {
+    const scrollTop = (0, import_shared4.getScrollTop)(element);
+    return scrollTop === 0 && deltaY.value > 0;
+  };
+  const isReachBottom = (element, offset = 1) => {
+    const { scrollHeight, clientHeight, scrollTop } = element;
+    const offsetBottom = Math.abs(scrollHeight - scrollTop - clientHeight);
+    return deltaY.value < 0 && offsetBottom <= offset;
+  };
+  return {
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    prevX,
+    prevY,
+    moveX,
+    moveY,
+    direction,
+    touching,
+    dragging,
+    startTime,
+    distance,
+    resetTouch,
+    startTouch,
+    moveTouch,
+    endTouch,
+    isReachTop,
+    isReachBottom
+  };
+}
+
+// src/useId.ts
+var import_vue9 = require("vue");
+var import_shared5 = require("@varlet/shared");
+function useId() {
+  const id = (0, import_vue9.ref)();
+  const instance = (0, import_vue9.getCurrentInstance)();
+  const name = (0, import_shared5.kebabCase)(instance.type.name);
+  id.value = process.env.NODE_ENV === "test" ? `${name}-mock-id` : `${name}-${instance.uid}`;
+  return id;
+}
+
+// src/useWindowSize.ts
+var import_shared6 = require("@varlet/shared");
+var import_vue10 = require("vue");
+function useWindowSize(options = {}) {
+  const { initialWidth = 0, initialHeight = 0 } = options;
+  const width = (0, import_vue10.ref)(initialWidth);
+  const height = (0, import_vue10.ref)(initialHeight);
+  const update = () => {
+    if (!(0, import_shared6.inBrowser)()) {
+      return;
+    }
+    width.value = window.innerWidth;
+    height.value = window.innerHeight;
+  };
+  onSmartMounted(update);
+  onWindowResize(update);
+  return {
+    width,
+    height
+  };
+}
+
+// src/useVModel.ts
+var import_shared7 = require("@varlet/shared");
+var import_vue11 = require("vue");
+function useVModel(props, key, options = {}) {
+  const { passive = true, eventName, defaultValue, emit } = options;
+  const event = eventName != null ? eventName : `onUpdate:${key.toString()}`;
+  const getValue = () => props[key] != null ? props[key] : defaultValue;
+  if (!passive) {
+    return (0, import_vue11.computed)({
+      get() {
+        return getValue();
+      },
+      set(value) {
+        emit ? emit(event, value) : (0, import_shared7.call)(props[event], value);
+      }
+    });
+  }
+  const proxy = (0, import_vue11.ref)(getValue());
+  (0, import_vue11.watch)(
+    () => props[key],
+    () => {
+      proxy.value = getValue();
+    }
+  );
+  (0, import_vue11.watch)(
+    () => proxy.value,
+    (newValue) => {
+      emit ? emit(event, newValue) : (0, import_shared7.call)(props[event], newValue);
+    }
+  );
+  return proxy;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  keyInProvides,
+  onSmartMounted,
+  onSmartUnmounted,
+  onWindowResize,
+  useChildren,
+  useClickOutside,
+  useEventListener,
+  useId,
+  useInitialized,
+  useParent,
+  useTouch,
+  useVModel,
+  useWindowSize
+});

package/lib/index.d.cts

@@ -0,0 +1,89 @@
+import * as vue from 'vue';
+import { Ref, ComponentInternalInstance, ComputedRef, WatchSource, WritableComputedRef } from 'vue';
+
+type UseEventListenerTarget = EventTarget | Ref<EventTarget | undefined | null> | (() => EventTarget);
+interface UseEventListenerOptions {
+    capture?: boolean;
+    passive?: boolean;
+}
+declare function useEventListener<T extends keyof DocumentEventMap>(target: UseEventListenerTarget, type: T, listener: (event: DocumentEventMap[T]) => void, options?: UseEventListenerOptions): () => void;
+declare function useEventListener(target: UseEventListenerTarget, type: string, listener: EventListener, options?: UseEventListenerOptions): () => void;
+
+type UseClickOutsideTarget = Element | Ref<Element | undefined | null> | (() => Element);
+declare function useClickOutside(target: UseClickOutsideTarget, type: string, listener: EventListener): void;
+
+declare function onSmartMounted(hook: () => void): void;
+
+declare function onSmartUnmounted(hook: () => void): void;
+
+interface UseChildrenBaseProvider<C> {
+    childInstances: ComponentInternalInstance[];
+    collect(instance: ComponentInternalInstance, childProvider: C): void;
+    clear(instance: ComponentInternalInstance, childProvider: C): void;
+}
+declare function useChildren<P, C>(key: symbol | string): {
+    length: ComputedRef<number>;
+    childProviders: C[];
+    bindChildren: (parentProvider: P) => void;
+};
+
+declare function keyInProvides(key: symbol | string): boolean;
+declare function useParent<P, C>(key: symbol | string): {
+    index: null;
+    parentProvider: null;
+    bindParent: null;
+} | {
+    index: ComputedRef<number>;
+    parentProvider: Omit<P & UseChildrenBaseProvider<C>, "childInstances" | "collect" | "clear">;
+    bindParent: (childProvider: C) => void;
+};
+
+declare function onWindowResize(listener: EventListener): void;
+
+declare function useInitialized<T>(source: WatchSource<T>, value: T): vue.Ref<boolean>;
+
+type TouchDirection = 'horizontal' | 'vertical';
+declare function useTouch(): {
+    startX: vue.Ref<number>;
+    startY: vue.Ref<number>;
+    deltaX: vue.Ref<number>;
+    deltaY: vue.Ref<number>;
+    offsetX: vue.Ref<number>;
+    offsetY: vue.Ref<number>;
+    prevX: vue.Ref<number>;
+    prevY: vue.Ref<number>;
+    moveX: vue.Ref<number>;
+    moveY: vue.Ref<number>;
+    direction: vue.Ref<TouchDirection | undefined>;
+    touching: vue.Ref<boolean>;
+    dragging: vue.Ref<boolean>;
+    startTime: vue.Ref<number>;
+    distance: vue.Ref<number>;
+    resetTouch: () => void;
+    startTouch: (event: TouchEvent) => void;
+    moveTouch: (event: TouchEvent) => void;
+    endTouch: () => void;
+    isReachTop: (element: Element | Window) => boolean;
+    isReachBottom: (element: Element, offset?: number) => boolean;
+};
+
+declare function useId(): vue.Ref<string | undefined>;
+
+interface UseWindowSizeOptions {
+    initialWidth?: number;
+    initialHeight?: number;
+}
+declare function useWindowSize(options?: UseWindowSizeOptions): {
+    width: vue.Ref<number>;
+    height: vue.Ref<number>;
+};
+
+interface UseVModelOptions<P, K extends keyof P> {
+    passive?: boolean;
+    eventName?: string;
+    defaultValue?: P[K];
+    emit?: (event: string, value: P[K]) => void;
+}
+declare function useVModel<P extends Record<string, any>, K extends keyof P>(props: P, key: K, options?: UseVModelOptions<P, K>): WritableComputedRef<P[K]> | Ref<P[K]>;
+
+export { TouchDirection, UseChildrenBaseProvider, UseClickOutsideTarget, UseEventListenerOptions, UseEventListenerTarget, UseVModelOptions, UseWindowSizeOptions, keyInProvides, onSmartMounted, onSmartUnmounted, onWindowResize, useChildren, useClickOutside, useEventListener, useId, useInitialized, useParent, useTouch, useVModel, useWindowSize };

package/package.json

@@ -1,9 +1,18 @@
 {
   "name": "@varlet/use",
-  "version": "2.20.2",
+  "version": "2.20.3-alpha.1703057787821",
   "type": "module",
-  "main": "lib/index.js",
+  "main": "lib/index.cjs",
   "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs",
+      "types": "./lib/index.d.ts"
+    },
+    "./*": "./*"
+  },
   "description": "composable utils of varlet",
   "keywords": [
     "composable",
@@ -24,7 +33,7 @@
     "url": "https://github.com/varletjs/varlet/issues"
   },
   "dependencies": {
-    "@varlet/shared": "2.20.2"
+    "@varlet/shared": "2.20.3-alpha.1703057787821"
   },
   "devDependencies": {
     "@types/node": "^18.7.18",
@@ -37,6 +46,6 @@
   },
   "scripts": {
     "dev": "tsup src/index.ts --format esm --out-dir=lib --watch --dts",
-    "build": "tsup src/index.ts --format esm --out-dir=lib --dts --clean"
+    "build": "tsup src/index.ts --format esm,cjs --out-dir=lib --dts --clean"
   }
 }