@maple-design/ui-vue 0.0.0-stage → 1.1.0

package/lib/pull-refresh/PullRefresh2.vue.js

@@ -0,0 +1,481 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const iconsVue = require("@maple-design/icons-vue");
+const sharedVue = require("@maple-design/shared-vue");
+const useVue = require("@maple-design/use-vue");
+require("../icon/index.js");
+const components = require("../utils/components.js");
+const elements = require("../utils/elements.js");
+const props = require("./props.js");
+const scrollLock = require("./scroll-lock.js");
+const Icon_vue_vue_type_script_setup_true_lang = require("../icon/Icon.vue.js");
+const { name, n, classes } = components.createNamespace("pull-refresh");
+const ICON_TRANSITION = 150;
+function safeDuration(value, fallback) {
+  const duration = typeof value === "string" && !value.trim() ? NaN : Number(value);
+  return Number.isFinite(duration) && duration >= 0 ? duration : fallback;
+}
+const _sfc_main = vue.defineComponent({
+  name,
+  components: {
+    MIconCheckboxMarkedCircleFill: iconsVue.IconCheckboxMarkedCircleFill,
+    MIconRefresh: iconsVue.IconRefresh,
+    MIconArrowDown: iconsVue.IconArrowDown,
+    MpIcon: Icon_vue_vue_type_script_setup_true_lang.default
+  },
+  props: props.pullRefreshProps,
+  emits: ["update:modelValue", "refresh"],
+  setup(props2, { emit }) {
+    const internalLoading = vue.ref(props2.defaultValue);
+    const loading = vue.computed(() => props2.modelValue ?? internalLoading.value);
+    const controlPosition = vue.ref(0);
+    const freshNode = vue.ref(null);
+    const controlNode = vue.ref(null);
+    const startPosition = vue.ref(0);
+    const distance = vue.ref("-125%");
+    const iconName = vue.ref("arrow-down");
+    const refreshStatus = vue.ref("default");
+    const isEnd = vue.ref(false);
+    const maxDistance = vue.computed(() => Math.abs(2 * controlPosition.value));
+    const animationDuration = vue.computed(() => safeDuration(props2.animationDuration, 300));
+    const successDuration = vue.computed(() => safeDuration(props2.successDuration, 2e3));
+    const isSuccess = vue.computed(() => refreshStatus.value === "success");
+    const isTouchable = vue.computed(
+      () => refreshStatus.value !== "loading" && refreshStatus.value !== "success" && !props2.disabled
+    );
+    const controlStyle = vue.computed(() => ({
+      transform: `translate3d(0px, ${sharedVue.isString(distance.value) ? distance.value : `${distance.value}px`}, 0px) translate(-50%, 0)`,
+      transition: isEnd.value ? `transform ${animationDuration.value}ms` : void 0,
+      background: isSuccess.value ? props2.successBgColor : props2.bgColor,
+      color: isSuccess.value ? props2.successColor : props2.color
+    }));
+    const { startTouch, moveTouch, endTouch, isReachTop, resetTouch, direction, deltaY } = useVue.useTouch();
+    let scroller;
+    let eventTargetScroller;
+    let active = true;
+    let disposed = false;
+    let generation = 0;
+    let pendingRefresh = false;
+    let touching = false;
+    let gestureGeneration = 0;
+    let bindingGeneration = 0;
+    let unbind;
+    const timers = /* @__PURE__ */ new Map();
+    const available = () => active && !disposed;
+    const current = (version) => available() && !props2.disabled && version === generation;
+    function cancelWork() {
+      generation += 1;
+      pendingRefresh = false;
+      const pending = [...timers];
+      timers.clear();
+      pending.forEach(([timer, cancel]) => {
+        window.clearTimeout(timer);
+        cancel?.();
+      });
+    }
+    function schedule(task, delay, version, cancel) {
+      if (!current(version)) {
+        cancel?.();
+        return;
+      }
+      const timer = window.setTimeout(() => {
+        if (!timers.has(timer)) {
+          return;
+        }
+        timers.delete(timer);
+        if (current(version)) {
+          task();
+        } else {
+          cancel?.();
+        }
+      }, delay);
+      timers.set(timer, cancel);
+    }
+    let lockOwner;
+    let releaseScrollLock;
+    function stopGesture() {
+      gestureGeneration += 1;
+      touching = false;
+      resetTouch();
+      lockEvent("remove");
+      eventTargetScroller = null;
+      if (refreshStatus.value === "pulling" || refreshStatus.value === "loosing") {
+        refreshStatus.value = "default";
+        iconName.value = "arrow-down";
+        isEnd.value = false;
+        distance.value = controlPosition.value;
+      }
+    }
+    function clearBindings() {
+      bindingGeneration += 1;
+      unbind?.();
+      unbind = void 0;
+    }
+    function bindListeners() {
+      clearBindings();
+      const element = freshNode.value;
+      if (!available() || !element) {
+        return;
+      }
+      const version = bindingGeneration;
+      const eligible = () => available() && version === bindingGeneration && freshNode.value === element;
+      const start = (event) => {
+        if (eligible()) {
+          handleTouchstart(event);
+        }
+      };
+      const move = (event) => {
+        if (eligible()) {
+          handleTouchmove(event);
+        }
+      };
+      const end = () => {
+        if (eligible()) {
+          handleTouchend();
+        }
+      };
+      const cancel = () => {
+        if (eligible()) {
+          handleTouchcancel();
+        }
+      };
+      element.addEventListener("touchstart", start, { passive: true });
+      element.addEventListener("touchmove", move, { passive: false });
+      element.addEventListener("touchend", end);
+      element.addEventListener("touchcancel", cancel);
+      unbind = () => {
+        element.removeEventListener("touchstart", start);
+        element.removeEventListener("touchmove", move);
+        element.removeEventListener("touchend", end);
+        element.removeEventListener("touchcancel", cancel);
+      };
+    }
+    function refreshBinding() {
+      cancelWork();
+      stopGesture();
+      clearBindings();
+      if (available() && freshNode.value) {
+        measureControl();
+        settleCurrentModel();
+        setScroller();
+        bindListeners();
+      }
+    }
+    function settleCurrentModel() {
+      refreshStatus.value = loading.value ? "loading" : "default";
+      iconName.value = loading.value ? "refresh" : "arrow-down";
+      isEnd.value = loading.value;
+      distance.value = loading.value ? maxDistance.value * 0.3 : controlPosition.value || "-125%";
+    }
+    function measureControl() {
+      const node = controlNode.value;
+      if (!available() || !node) {
+        return;
+      }
+      const width = sharedVue.getRect(node).width;
+      if (!Number.isFinite(width) || width <= 0) {
+        return;
+      }
+      const previous = controlPosition.value;
+      controlPosition.value = -width * 1.25;
+      if (refreshStatus.value === "loading" || refreshStatus.value === "success") {
+        distance.value = maxDistance.value * 0.3;
+      } else if (touching && typeof distance.value === "number") {
+        distance.value += controlPosition.value - previous;
+      } else {
+        distance.value = controlPosition.value;
+      }
+    }
+    vue.onDeactivated(() => {
+      active = false;
+      cancelWork();
+      stopGesture();
+      clearBindings();
+    });
+    vue.onActivated(() => {
+      if (!active) {
+        active = true;
+        settleCurrentModel();
+        refreshBinding();
+      } else {
+        bindListeners();
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      disposed = true;
+      cancelWork();
+      stopGesture();
+      clearBindings();
+    });
+    vue.watch(
+      () => props2.disabled,
+      (disabled) => {
+        if (disabled) {
+          cancelWork();
+          stopGesture();
+          settleCurrentModel();
+        }
+      },
+      { flush: "sync" }
+    );
+    vue.watch(
+      () => loading.value,
+      (newValue) => {
+        if (newValue && pendingRefresh && refreshStatus.value === "loading") {
+          return;
+        }
+        cancelWork();
+        stopGesture();
+        if (!available()) {
+          return;
+        }
+        if (props2.disabled) {
+          settleCurrentModel();
+          return;
+        }
+        if (newValue) {
+          settleCurrentModel();
+        }
+        if (newValue === false) {
+          isEnd.value = true;
+          refreshStatus.value = "success";
+          iconName.value = "checkbox-marked-circle-fill";
+          const version = generation;
+          schedule(
+            () => {
+              distance.value = controlPosition.value;
+              reset(version);
+            },
+            successDuration.value,
+            version
+          );
+        }
+      },
+      { flush: "sync" }
+    );
+    let controlObserver;
+    vue.onMounted(() => {
+      refreshBinding();
+      const node = controlNode.value;
+      const Observer = node?.ownerDocument.defaultView?.ResizeObserver;
+      if (node && Observer) {
+        controlObserver = new Observer(measureControl);
+        controlObserver.observe(node);
+      }
+    });
+    vue.onBeforeUnmount(() => controlObserver?.disconnect());
+    vue.watch(freshNode, refreshBinding, { flush: "sync" });
+    vue.watch(() => props2.target, refreshBinding, { flush: "sync" });
+    function startIconTransition(nextName, version = generation) {
+      if (iconName.value === nextName) {
+        return true;
+      }
+      iconName.value = nextName;
+      return new Promise((resolve) => {
+        schedule(
+          () => resolve(true),
+          ICON_TRANSITION,
+          version,
+          () => resolve(false)
+        );
+      });
+    }
+    function lockEvent(action) {
+      if (action === "remove") {
+        releaseScrollLock?.();
+        releaseScrollLock = void 0;
+        lockOwner = void 0;
+        return;
+      }
+      if (!scroller) {
+        return;
+      }
+      const el = "classList" in scroller ? scroller : scroller.document.body;
+      if (lockOwner !== el) {
+        lockEvent("remove");
+        const version = generation;
+        const release = scrollLock.acquireScrollLock(el, n("--lock"));
+        if (!current(version)) {
+          release();
+          return;
+        }
+        releaseScrollLock = release;
+        lockOwner = el;
+      }
+    }
+    function handleTouchstart(event) {
+      if (!available() || !isTouchable.value) {
+        return;
+      }
+      cancelWork();
+      stopGesture();
+      touching = event.touches.length > 0;
+      if (!touching) {
+        return;
+      }
+      const version = gestureGeneration;
+      const root = freshNode.value;
+      const control = controlNode.value;
+      const owner = scroller;
+      const eligible = () => available() && isTouchable.value && touching && gestureGeneration === version && freshNode.value === root && controlNode.value === control && scroller === owner;
+      startTouch(event);
+      if (controlPosition.value === 0) {
+        measureControl();
+        if (!eligible()) {
+          return;
+        }
+      }
+      const target = event.target;
+      if (!eligible()) {
+        return;
+      }
+      const targetScroller = elements.getParentScroller(target);
+      if (!eligible()) {
+        return;
+      }
+      eventTargetScroller = targetScroller;
+      distance.value = controlPosition.value;
+    }
+    function handleTouchmove(event) {
+      if (!available() || !isTouchable.value || !touching || !event.touches.length) {
+        return;
+      }
+      const version = gestureGeneration;
+      const owner = scroller;
+      const root = freshNode.value;
+      const eligible = () => available() && isTouchable.value && touching && version === gestureGeneration && scroller === owner && freshNode.value === root;
+      moveTouch(event);
+      if (direction.value !== "vertical" || deltaY.value <= 0) {
+        return;
+      }
+      if (!isTouchable.value || !eventTargetScroller) {
+        return;
+      }
+      const nestedScrollTop = eventTargetScroller !== scroller ? sharedVue.getScrollTop(eventTargetScroller) : 0;
+      if (!eligible() || nestedScrollTop > 0) {
+        return;
+      }
+      const scrollTop = sharedVue.getScrollTop(scroller);
+      if (!eligible() || scrollTop > 0) {
+        return;
+      }
+      const reachTop = isReachTop(scroller);
+      if (!eligible()) {
+        return;
+      }
+      if (reachTop) {
+        sharedVue.preventDefault(event);
+      }
+      if (!eligible()) {
+        return;
+      }
+      if (refreshStatus.value !== "pulling") {
+        refreshStatus.value = "pulling";
+        startPosition.value = event.touches[0].clientY;
+      }
+      if (reachTop && sharedVue.isNumber(distance.value) && distance.value > controlPosition.value) {
+        lockEvent("add");
+      }
+      if (!eligible()) {
+        return;
+      }
+      const moveDistance = (event.touches[0].clientY - startPosition.value) / 2 + controlPosition.value;
+      distance.value = moveDistance >= maxDistance.value ? maxDistance.value : moveDistance;
+      startIconTransition(distance.value >= maxDistance.value * 0.2 ? "refresh" : "arrow-down");
+    }
+    async function handleTouchend() {
+      if (!available() || !isTouchable.value || !touching) {
+        return;
+      }
+      if (refreshStatus.value !== "pulling") {
+        stopGesture();
+        return;
+      }
+      touching = false;
+      cancelWork();
+      const version = generation;
+      endTouch();
+      if (!isTouchable.value) {
+        return;
+      }
+      isEnd.value = true;
+      if (sharedVue.toNumber(distance.value) >= maxDistance.value * 0.2) {
+        const completed = await startIconTransition("refresh", version);
+        if (!completed || !current(version) || !isTouchable.value) {
+          return;
+        }
+        refreshStatus.value = "loading";
+        distance.value = maxDistance.value * 0.3;
+        pendingRefresh = true;
+        if (props2.modelValue === void 0) {
+          internalLoading.value = true;
+        }
+        emit("update:modelValue", true);
+        vue.nextTick(() => {
+          if (!current(version) || !pendingRefresh || props2.disabled || refreshStatus.value !== "loading") {
+            return;
+          }
+          pendingRefresh = false;
+          emit("refresh");
+        });
+        lockEvent("remove");
+      } else {
+        refreshStatus.value = "loosing";
+        iconName.value = "arrow-down";
+        distance.value = controlPosition.value;
+        schedule(
+          () => {
+            isEnd.value = false;
+            lockEvent("remove");
+          },
+          animationDuration.value,
+          version
+        );
+      }
+      eventTargetScroller = null;
+    }
+    function setScroller() {
+      const root = freshNode.value;
+      const version = generation;
+      const next = props2.target ? elements.getTarget(props2.target, name) : elements.getParentScroller(root);
+      if (available() && freshNode.value === root && generation === version) {
+        scroller = next;
+      }
+    }
+    function handleTouchcancel() {
+      if (!available() || !touching) {
+        return;
+      }
+      cancelWork();
+      stopGesture();
+    }
+    function reset(version) {
+      schedule(
+        () => {
+          refreshStatus.value = "default";
+          iconName.value = "arrow-down";
+          isEnd.value = false;
+        },
+        animationDuration.value,
+        version
+      );
+    }
+    return {
+      ICON_TRANSITION,
+      refreshStatus,
+      freshNode,
+      controlNode,
+      iconName,
+      controlStyle,
+      isSuccess,
+      n,
+      classes,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend,
+      handleTouchcancel
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/pull-refresh/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const components = require("../utils/components.js");
+const props = require("./props.js");
+const PullRefresh = require("./PullRefresh.vue.js");
+components.withInstall(PullRefresh.default);
+components.withPropsDefaultsSetter(PullRefresh.default, props.pullRefreshProps);
+const _PullRefreshComponent = PullRefresh.default;
+exports.pullRefreshProps = props.pullRefreshProps;
+exports.default = PullRefresh.default;
+exports._PullRefreshComponent = _PullRefreshComponent;

package/lib/pull-refresh/props.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const isDuration = (value) => {
+  if (typeof value === "string" && !value.trim()) {
+    return false;
+  }
+  const duration = Number(value);
+  return Number.isFinite(duration) && duration >= 0;
+};
+const pullRefreshProps = {
+  /**
+   * 是否处于刷新加载中，配合 `v-model` 使用
+   */
+  modelValue: { type: Boolean, default: void 0 },
+  /** 非受控初始刷新状态，仅创建时读取。完成异步刷新时仍应由父级设置 modelValue=false。 */
+  defaultValue: Boolean,
+  /**
+   * 是否禁用下拉刷新
+   */
+  disabled: Boolean,
+  /**
+   * 回弹到初始位置的动画时长（ms）
+   */
+  animationDuration: {
+    type: [Number, String],
+    default: 300,
+    validator: isDuration
+  },
+  /**
+   * 成功状态展示时长（ms）
+   */
+  successDuration: {
+    type: [Number, String],
+    default: 2e3,
+    validator: isDuration
+  },
+  /**
+   * 指示器背景色
+   */
+  bgColor: String,
+  /**
+   * 成功状态指示器背景色
+   */
+  successBgColor: String,
+  /**
+   * 指示器颜色
+   */
+  color: String,
+  /**
+   * 成功状态指示器颜色
+   */
+  successColor: String,
+  /**
+   * 滚动容器，未传入时监听最近的可滚动祖先
+   */
+  target: [String, Object]
+};
+exports.pullRefreshProps = pullRefreshProps;

package/lib/pull-refresh/scroll-lock.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const locks = /* @__PURE__ */ new WeakMap();
+function acquireScrollLock(element, className) {
+  let classes = locks.get(element);
+  if (!classes) {
+    classes = /* @__PURE__ */ new Map();
+    locks.set(element, classes);
+  }
+  let entry = classes.get(className);
+  if (!entry) {
+    entry = { count: 0, owned: !element.classList.contains(className) };
+    classes.set(className, entry);
+    if (entry.owned) {
+      element.classList.add(className);
+    }
+  }
+  entry.count += 1;
+  let released = false;
+  return () => {
+    if (released) {
+      return;
+    }
+    released = true;
+    entry.count -= 1;
+    if (entry.count === 0) {
+      if (entry.owned) {
+        element.classList.remove(className);
+      }
+      classes.delete(className);
+      if (classes.size === 0) {
+        locks.delete(element);
+      }
+    }
+  };
+}
+exports.acquireScrollLock = acquireScrollLock;

package/lib/pull-refresh/style/index.css

@@ -0,0 +1,51 @@
+:where([data-mp-theme]) {
+  color-scheme: var(--mp-color-scheme);
+}
+:root,
+:where([data-mp-theme]) {
+  --mp-pull-refresh-size: 40px;
+  --mp-pull-refresh-background: #fff;
+  --mp-pull-refresh-color: var(--mp-sys-color-content-brand);
+  --mp-pull-refresh-success-color: var(--mp-sys-color-content-success);
+  --mp-pull-refresh-icon-size: 25px;
+}
+.mp-pull-refresh {
+  overflow: hidden;
+  position: relative;
+  user-select: none;
+  width: 100%;
+}
+.mp-pull-refresh__control {
+  display: flex;
+  width: var(--mp-pull-refresh-size);
+  height: var(--mp-pull-refresh-size);
+  align-items: center;
+  justify-content: center;
+  background-color: var(--mp-pull-refresh-background);
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  z-index: 90;
+  color: var(--mp-pull-refresh-color);
+}
+.mp-pull-refresh__control--success {
+  color: var(--mp-pull-refresh-success-color);
+}
+.mp-pull-refresh__icon {
+  font-size: var(--mp-pull-refresh-icon-size);
+}
+.mp-pull-refresh__icon--spin {
+  transform: rotate(0deg);
+  animation: mp-pull-refresh-icon-rotate 0.6s infinite linear;
+}
+.mp-pull-refresh--lock {
+  overflow: hidden !important;
+}
+@keyframes mp-pull-refresh-icon-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/lib/pull-refresh/style/index.js

@@ -0,0 +1,3 @@
+require('../../style/index.css')
+require('../../icon/style/index.js')
+require('./index.css')