@maple-design/use 0.0.0-stage → 1.0.0

package/lib/index.js

@@ -0,0 +1,589 @@
+var __defProp = Object.defineProperty;
+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;
+};
+
+// src/useEventListener.ts
+import { isRef, onBeforeUnmount, onDeactivated, unref, watch } from "vue";
+import { inBrowser, isFunction } from "@maple-design/shared";
+
+// src/onSmartMounted.ts
+import { nextTick, onActivated, onMounted } from "vue";
+function onSmartMounted(hook) {
+  let isMounted = false;
+  onMounted(() => {
+    hook();
+    nextTick(() => {
+      isMounted = true;
+    });
+  });
+  onActivated(() => {
+    if (!isMounted) {
+      return;
+    }
+    hook();
+  });
+}
+
+// src/useEventListener.ts
+function useEventListener(target, type, listener, options = {}) {
+  if (!inBrowser()) {
+    return () => {
+    };
+  }
+  const { passive = false, capture = false } = options;
+  let boundTarget;
+  let active = false;
+  let cleaned = false;
+  let stop;
+  const resolveTarget = () => {
+    var _a;
+    return (_a = isFunction(target) ? target() : unref(target)) != null ? _a : void 0;
+  };
+  const detach = () => {
+    boundTarget == null ? void 0 : boundTarget.removeEventListener(type, listener, { capture });
+    boundTarget = void 0;
+  };
+  const bind = () => {
+    if (!active || cleaned) {
+      return;
+    }
+    const next = resolveTarget();
+    if (next === boundTarget) {
+      return;
+    }
+    detach();
+    next == null ? void 0 : next.addEventListener(type, listener, { passive, capture });
+    boundTarget = next;
+  };
+  const cleanup = () => {
+    if (cleaned) {
+      return;
+    }
+    cleaned = true;
+    active = false;
+    stop == null ? void 0 : stop();
+    detach();
+  };
+  if (isRef(target) || isFunction(target)) {
+    stop = watch(resolveTarget, bind);
+  }
+  onSmartMounted(() => {
+    active = true;
+    bind();
+  });
+  onDeactivated(() => {
+    active = false;
+    detach();
+  });
+  onBeforeUnmount(cleanup);
+  return cleanup;
+}
+
+// src/useClickOutside.ts
+import { unref as unref2 } from "vue";
+import { inBrowser as inBrowser2, isFunction as isFunction2 } from "@maple-design/shared";
+function useClickOutside(target, type, listener) {
+  if (!inBrowser2()) {
+    return;
+  }
+  const handler = (event) => {
+    const element = isFunction2(target) ? target() : unref2(target);
+    if (element && !event.composedPath().includes(element) && !element.contains(event.target)) {
+      listener(event);
+    }
+  };
+  useEventListener(document, type, handler);
+}
+
+// src/onSmartUnmounted.ts
+import { onDeactivated as onDeactivated2, onUnmounted } from "vue";
+function onSmartUnmounted(hook) {
+  let keepalive = false;
+  onDeactivated2(() => {
+    keepalive = true;
+    hook();
+  });
+  onUnmounted(() => {
+    if (keepalive) {
+      return;
+    }
+    hook();
+  });
+}
+
+// src/useParent.ts
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  nextTick as nextTick2,
+  onActivated as onActivated2,
+  onBeforeUnmount as onBeforeUnmount2,
+  onDeactivated as onDeactivated3,
+  onMounted as onMounted2
+} from "vue";
+function keyInProvides(key) {
+  const instance = getCurrentInstance();
+  return key in instance.provides;
+}
+function useParent(key) {
+  if (!keyInProvides(key)) {
+    return {
+      index: null,
+      parentProvider: null,
+      bindParent: null
+    };
+  }
+  const provider = inject(key);
+  const _a = provider, { childInstances, collect, clear } = _a, parentProvider = __objRest(_a, ["childInstances", "collect", "clear"]);
+  const childInstance = getCurrentInstance();
+  const index = computed(() => childInstances.indexOf(childInstance));
+  const bindParent = (childProvider) => {
+    let active = false;
+    let registered = false;
+    const add = () => {
+      active = true;
+      nextTick2(() => {
+        if (active && !registered) {
+          collect(childInstance, childProvider);
+          registered = true;
+        }
+      });
+    };
+    const remove = () => {
+      active = false;
+      if (registered) {
+        clear(childInstance, childProvider);
+        registered = false;
+      }
+    };
+    onMounted2(add);
+    onActivated2(add);
+    onDeactivated3(remove);
+    onBeforeUnmount2(remove);
+  };
+  return {
+    index,
+    parentProvider,
+    bindParent
+  };
+}
+
+// src/useChildren.ts
+import {
+  computed as computed2,
+  getCurrentInstance as getCurrentInstance2,
+  isVNode,
+  onUpdated,
+  provide,
+  reactive
+} from "vue";
+import { isArray, removeItem } from "@maple-design/shared";
+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 (isArray(subTree2 == null ? void 0 : subTree2.children)) {
+      subTree2.children.forEach((child) => {
+        if (isVNode(child)) {
+          vNodes.push(child);
+          flat(child);
+        }
+      });
+    }
+  };
+  flat(subTree);
+  return vNodes;
+}
+function useChildren(key) {
+  const parentInstance = getCurrentInstance2();
+  const childInstances = reactive([]);
+  const childProviders = [];
+  const length = computed2(() => childInstances.length);
+  const sortInstances = () => {
+    const vNodes = flatVNodes(parentInstance.subTree);
+    const sorted = [...childInstances].sort((a, b) => vNodes.indexOf(a.vnode) - vNodes.indexOf(b.vnode));
+    if (sorted.every((instance, index) => instance === childInstances[index])) {
+      return;
+    }
+    const providers = sorted.map((instance) => childProviders[childInstances.indexOf(instance)]);
+    childInstances.splice(0, childInstances.length, ...sorted);
+    childProviders.splice(0, childProviders.length, ...providers);
+  };
+  onUpdated(sortInstances);
+  const collect = (childInstance, childProvider) => {
+    if (childInstances.includes(childInstance)) {
+      return;
+    }
+    childInstances.push(childInstance);
+    childProviders.push(childProvider);
+    sortInstances();
+  };
+  const clear = (childInstance, childProvider) => {
+    removeItem(childInstances, childInstance);
+    removeItem(childProviders, childProvider);
+  };
+  const bindChildren = (parentProvider) => {
+    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
+import { ref, watch as watch2 } from "vue";
+function useInitialized(source, value) {
+  const initialized = ref(false);
+  watch2(
+    source,
+    (newValue) => {
+      if (value === newValue) {
+        initialized.value = true;
+      }
+    },
+    { immediate: true }
+  );
+  return initialized;
+}
+
+// src/useTouch.ts
+import { onBeforeUnmount as onBeforeUnmount3, onDeactivated as onDeactivated4, ref as ref2 } from "vue";
+import { getScrollTop } from "@maple-design/shared";
+function getDirection(x, y) {
+  if (x > y) {
+    return "horizontal";
+  }
+  if (y > x) {
+    return "vertical";
+  }
+}
+function useTouch() {
+  const startX = ref2(0);
+  const startY = ref2(0);
+  const deltaX = ref2(0);
+  const deltaY = ref2(0);
+  const offsetX = ref2(0);
+  const offsetY = ref2(0);
+  const prevX = ref2(0);
+  const prevY = ref2(0);
+  const moveX = ref2(0);
+  const moveY = ref2(0);
+  const direction = ref2();
+  const touching = ref2(false);
+  const dragging = ref2(false);
+  const startTime = ref2(0);
+  const distance = ref2(0);
+  let draggingAnimationFrame = null;
+  const cancelFrame = () => {
+    if (draggingAnimationFrame !== null && typeof window !== "undefined") {
+      window.cancelAnimationFrame(draggingAnimationFrame);
+    }
+    draggingAnimationFrame = null;
+  };
+  const resetTouch = () => {
+    cancelFrame();
+    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();
+    if (!event.touches.length) {
+      return;
+    }
+    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) => {
+    if (!event.touches.length) {
+      return;
+    }
+    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;
+    cancelFrame();
+    if (typeof window === "undefined") {
+      dragging.value = false;
+      return;
+    }
+    draggingAnimationFrame = window.requestAnimationFrame(() => {
+      draggingAnimationFrame = null;
+      dragging.value = false;
+    });
+  };
+  const isReachTop = (element) => {
+    const scrollTop = 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;
+  };
+  onBeforeUnmount3(resetTouch);
+  onDeactivated4(resetTouch);
+  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
+import * as Vue from "vue";
+import { kebabCase } from "@maple-design/shared";
+function useId2() {
+  var _a, _b;
+  const instance = Vue.getCurrentInstance();
+  const name = kebabCase((_a = instance.type.name) != null ? _a : "component");
+  const nativeId = (_b = Vue.useId) == null ? void 0 : _b();
+  const id = Vue.ref();
+  id.value = process.env.NODE_ENV === "test" ? `${name}-mock-id` : nativeId ? `${name}-${nativeId}` : void 0;
+  Vue.onMounted(() => {
+    if (id.value === void 0) {
+      id.value = `${name}-${instance.uid}`;
+    }
+  });
+  return id;
+}
+
+// src/useClientId.ts
+import { getCurrentInstance as getCurrentInstance4, onMounted as onMounted4, ref as ref4 } from "vue";
+import { kebabCase as kebabCase2 } from "@maple-design/shared";
+function useClientId() {
+  const instance = getCurrentInstance4();
+  const name = kebabCase2(instance.type.name);
+  const id = ref4(process.env.NODE_ENV === "test" ? `${name}-mock-id` : void 0);
+  onMounted4(() => {
+    if (process.env.NODE_ENV !== "test") {
+      id.value = `${name}-${instance.uid}`;
+    }
+  });
+  return id;
+}
+
+// src/useWindowSize.ts
+import { ref as ref5 } from "vue";
+import { inBrowser as inBrowser3 } from "@maple-design/shared";
+function useWindowSize(options = {}) {
+  const { initialWidth = 0, initialHeight = 0 } = options;
+  const width = ref5(initialWidth);
+  const height = ref5(initialHeight);
+  const update = () => {
+    if (!inBrowser3()) {
+      return;
+    }
+    width.value = window.innerWidth;
+    height.value = window.innerHeight;
+  };
+  onSmartMounted(update);
+  onWindowResize(update);
+  return {
+    width,
+    height
+  };
+}
+
+// src/useVModel.ts
+import { computed as computed3, nextTick as nextTick3, ref as ref6, watch as watch3 } from "vue";
+import { call } from "@maple-design/shared";
+function useVModel(props, key, options = {}) {
+  const { passive = true, eventName, defaultValue, emit } = options;
+  const event = eventName != null ? eventName : `${emit ? "update" : "onUpdate"}:${key.toString()}`;
+  const getValue = () => {
+    var _a;
+    return (_a = props[key]) != null ? _a : defaultValue;
+  };
+  if (!passive) {
+    return computed3({
+      get() {
+        return getValue();
+      },
+      set(value) {
+        emit ? emit(event, value) : call(props[event], value);
+      }
+    });
+  }
+  const proxy = ref6(getValue());
+  let shouldEmit = true;
+  watch3(
+    () => props[key],
+    () => {
+      shouldEmit = false;
+      proxy.value = getValue();
+      nextTick3(() => {
+        shouldEmit = true;
+      });
+    }
+  );
+  watch3(
+    () => proxy.value,
+    (newValue) => {
+      if (!shouldEmit) {
+        return;
+      }
+      emit ? emit(event, newValue) : call(props[event], newValue);
+    }
+  );
+  return proxy;
+}
+
+// src/useMotion.ts
+import { ref as ref7 } from "vue";
+import { isFunction as isFunction3, motion } from "@maple-design/shared";
+function useMotion(options) {
+  const value = ref7(getter(options.from));
+  const state = ref7("pending");
+  let ctx = createMotionContext();
+  function getter(value2) {
+    return isFunction3(value2) ? value2() : value2;
+  }
+  function reset() {
+    ctx.reset();
+    value.value = getter(options.from);
+    state.value = "pending";
+    ctx = createMotionContext();
+  }
+  function start() {
+    ctx.start();
+  }
+  function pause() {
+    ctx.pause();
+  }
+  function createMotionContext() {
+    return motion({
+      from: getter(options.from),
+      to: getter(options.to),
+      duration: options.duration ? getter(options.duration) : 300,
+      timingFunction: options.timingFunction,
+      onStateChange(newState) {
+        state.value = newState;
+      },
+      frame({ value: newValue, done }) {
+        var _a;
+        value.value = newValue;
+        if (done) {
+          (_a = options.onFinished) == null ? void 0 : _a.call(options, value.value);
+        }
+      }
+    });
+  }
+  return {
+    value,
+    state,
+    start,
+    pause,
+    reset
+  };
+}
+export {
+  keyInProvides,
+  onSmartMounted,
+  onSmartUnmounted,
+  onWindowResize,
+  useChildren,
+  useClickOutside,
+  useClientId,
+  useEventListener,
+  useId2 as useId,
+  useInitialized,
+  useMotion,
+  useParent,
+  useTouch,
+  useVModel,
+  useWindowSize
+};

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@maple-design/use",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "composable utils of maple",
+  "keywords": [
+    "composable",
+    "utils",
+    "maple"
+  ],
+  "bugs": {
+    "url": "https://xxx/pe.frontend/materials/maplejs/maple-design-mobile/-/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://xxx/pe.frontend/materials/maplejs/maple-design-mobile"
+  },
+  "license": "MIT",
+  "author": "shuai.meng",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs",
+      "types": "./lib/index.d.ts"
+    }
+  },
+  "main": "lib/index.cjs",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "dependencies": {
+    "@maple-design/shared": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.20",
+    "tsup": "7.2.0",
+    "typescript": "5.3.3",
+    "vue": "3.5.13"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --out-dir=lib --dts --clean",
+    "dev": "tsup src/index.ts --format esm --out-dir=lib --watch --dts"
+  }
 }

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.