@maple-design/use 0.0.0-stage → 1.0.0

package/lib/index.cjs

@@ -0,0 +1,621 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+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,
+  useClientId: () => useClientId,
+  useEventListener: () => useEventListener,
+  useId: () => useId2,
+  useInitialized: () => useInitialized,
+  useMotion: () => useMotion,
+  useParent: () => useParent,
+  useTouch: () => useTouch,
+  useVModel: () => useVModel,
+  useWindowSize: () => useWindowSize
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/useEventListener.ts
+var import_vue2 = require("vue");
+var import_shared = require("@maple-design/shared");
+
+// 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 boundTarget;
+  let active = false;
+  let cleaned = false;
+  let stop;
+  const resolveTarget = () => {
+    var _a;
+    return (_a = (0, import_shared.isFunction)(target) ? target() : (0, import_vue2.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 ((0, import_vue2.isRef)(target) || (0, import_shared.isFunction)(target)) {
+    stop = (0, import_vue2.watch)(resolveTarget, bind);
+  }
+  onSmartMounted(() => {
+    active = true;
+    bind();
+  });
+  (0, import_vue2.onDeactivated)(() => {
+    active = false;
+    detach();
+  });
+  (0, import_vue2.onBeforeUnmount)(cleanup);
+  return cleanup;
+}
+
+// src/useClickOutside.ts
+var import_vue3 = require("vue");
+var import_shared2 = require("@maple-design/shared");
+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 && !event.composedPath().includes(element) && !element.contains(event.target)) {
+      listener(event);
+    }
+  };
+  useEventListener(document, type, handler);
+}
+
+// src/onSmartUnmounted.ts
+var import_vue4 = require("vue");
+function onSmartUnmounted(hook) {
+  let keepalive = false;
+  (0, import_vue4.onDeactivated)(() => {
+    keepalive = true;
+    hook();
+  });
+  (0, import_vue4.onUnmounted)(() => {
+    if (keepalive) {
+      return;
+    }
+    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) => {
+    let active = false;
+    let registered = false;
+    const add = () => {
+      active = true;
+      (0, import_vue5.nextTick)(() => {
+        if (active && !registered) {
+          collect(childInstance, childProvider);
+          registered = true;
+        }
+      });
+    };
+    const remove = () => {
+      active = false;
+      if (registered) {
+        clear(childInstance, childProvider);
+        registered = false;
+      }
+    };
+    (0, import_vue5.onMounted)(add);
+    (0, import_vue5.onActivated)(add);
+    (0, import_vue5.onDeactivated)(remove);
+    (0, import_vue5.onBeforeUnmount)(remove);
+  };
+  return {
+    index,
+    parentProvider,
+    bindParent
+  };
+}
+
+// src/useChildren.ts
+var import_vue6 = require("vue");
+var import_shared3 = require("@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 ((0, import_shared3.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);
+    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);
+  };
+  (0, import_vue6.onUpdated)(sortInstances);
+  const collect = (childInstance, childProvider) => {
+    if (childInstances.includes(childInstance)) {
+      return;
+    }
+    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("@maple-design/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 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 = (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;
+  };
+  (0, import_vue8.onBeforeUnmount)(resetTouch);
+  (0, import_vue8.onDeactivated)(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
+var Vue = __toESM(require("vue"), 1);
+var import_shared5 = require("@maple-design/shared");
+function useId2() {
+  var _a, _b;
+  const instance = Vue.getCurrentInstance();
+  const name = (0, import_shared5.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
+var import_vue9 = require("vue");
+var import_shared6 = require("@maple-design/shared");
+function useClientId() {
+  const instance = (0, import_vue9.getCurrentInstance)();
+  const name = (0, import_shared6.kebabCase)(instance.type.name);
+  const id = (0, import_vue9.ref)(process.env.NODE_ENV === "test" ? `${name}-mock-id` : void 0);
+  (0, import_vue9.onMounted)(() => {
+    if (process.env.NODE_ENV !== "test") {
+      id.value = `${name}-${instance.uid}`;
+    }
+  });
+  return id;
+}
+
+// src/useWindowSize.ts
+var import_vue10 = require("vue");
+var import_shared7 = require("@maple-design/shared");
+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_shared7.inBrowser)()) {
+      return;
+    }
+    width.value = window.innerWidth;
+    height.value = window.innerHeight;
+  };
+  onSmartMounted(update);
+  onWindowResize(update);
+  return {
+    width,
+    height
+  };
+}
+
+// src/useVModel.ts
+var import_vue11 = require("vue");
+var import_shared8 = require("@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 (0, import_vue11.computed)({
+      get() {
+        return getValue();
+      },
+      set(value) {
+        emit ? emit(event, value) : (0, import_shared8.call)(props[event], value);
+      }
+    });
+  }
+  const proxy = (0, import_vue11.ref)(getValue());
+  let shouldEmit = true;
+  (0, import_vue11.watch)(
+    () => props[key],
+    () => {
+      shouldEmit = false;
+      proxy.value = getValue();
+      (0, import_vue11.nextTick)(() => {
+        shouldEmit = true;
+      });
+    }
+  );
+  (0, import_vue11.watch)(
+    () => proxy.value,
+    (newValue) => {
+      if (!shouldEmit) {
+        return;
+      }
+      emit ? emit(event, newValue) : (0, import_shared8.call)(props[event], newValue);
+    }
+  );
+  return proxy;
+}
+
+// src/useMotion.ts
+var import_vue12 = require("vue");
+var import_shared9 = require("@maple-design/shared");
+function useMotion(options) {
+  const value = (0, import_vue12.ref)(getter(options.from));
+  const state = (0, import_vue12.ref)("pending");
+  let ctx = createMotionContext();
+  function getter(value2) {
+    return (0, import_shared9.isFunction)(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 (0, import_shared9.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
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  keyInProvides,
+  onSmartMounted,
+  onSmartUnmounted,
+  onWindowResize,
+  useChildren,
+  useClickOutside,
+  useClientId,
+  useEventListener,
+  useId,
+  useInitialized,
+  useMotion,
+  useParent,
+  useTouch,
+  useVModel,
+  useWindowSize
+});