@neatui/vue 3.0.0 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",

package/src/components/basic/IScrollView.vue

@@ -1,34 +1,64 @@
 <template>
   <div
+    ref="root"
     class="fekit-ipull-scroll"
     :ui-scroll="`:y ${stable ? 'stable' : ''}`"
-    ref="root"
   >
     <div>
-      <div class="fs-xs co-text o-mm" fekit-pullload-head="" v-if="pull">
-        <slot name="pull-head" :state="demo.store.pull">
-          <div v-show="demo.store.pull < 2" ui-flex="row cm">
-            <i class="pulldown icon icon-pulldown" :class="`${demo.store.pull === 1 ? 'toup' : ''}`"></i>
-            <span v-show="demo.store.pull === 0">下拉刷新</span>
-            <span v-show="demo.store.pull === 1">松开加载</span>
-          </div>
-          <div v-show="demo.store.pull === 2" ui-flex="row cm">
-            <span ui-load="@d"></span>
-          </div>
-          <div v-show="demo.store.pull === 3" ui-flex="row cm">
-            <span>刷新完成</span>
-          </div>
+      <div v-if="pull" class="co-text o-mm" fekit-pullload-head="">
+        <slot name="pull-head" :state="demo.store.pull" :text="pullText()" :locale="words" :pullload="demo">
+          <slot v-if="demo.store.pull === 0" name="pull-idle" :state="demo.store.pull" :text="pullText('idle')" :locale="words" :pullload="demo">
+            <div ui-flex="row cm">
+              <i class="pulldown icon icon-pulldown"></i>
+              <span>{{ pullText("idle") }}</span>
+            </div>
+          </slot>
+          <slot v-else-if="demo.store.pull === 1" name="pull-ready" :state="demo.store.pull" :text="pullText('ready')" :locale="words" :pullload="demo">
+            <div ui-flex="row cm">
+              <i class="pulldown icon icon-pulldown toup"></i>
+              <span>{{ pullText("ready") }}</span>
+            </div>
+          </slot>
+          <slot v-else-if="demo.store.pull === 2" name="pull-loading" :state="demo.store.pull" :text="pullText('loading')" :locale="words" :pullload="demo">
+            <div ui-flex="row cm">
+              <span ui-load="@d"></span>
+              <span v-if="pullText('loading')">{{ pullText("loading") }}</span>
+            </div>
+          </slot>
+          <slot v-else-if="demo.store.pull === 3" name="pull-finished" :state="demo.store.pull" :text="pullText('finished')" :locale="words" :pullload="demo">
+            <div ui-flex="row cm">
+              <span>{{ pullText("finished") }}</span>
+            </div>
+          </slot>
         </slot>
       </div>
       <slot></slot>
-      <div class="fs-xs co-text o-mm my-sm" fekit-pullload-foot="" v-if="load">
-        <slot name="load-foot" :state="demo.store.load">
+      <div v-if="load" class="co-text o-mm my-ms" fekit-pullload-foot="">
+        <slot name="load-foot" :state="demo.store.load" :text="loadText()" :locale="words" :pullload="demo">
           <transition name="fekit-pullload-fade" mode="out-in">
-            <div v-if="demo.store.load === 2" ui-flex="row cm">
-              <span ui-load="@d"></span>
-            </div>
-            <div v-else-if="demo.store.load === 3">没有更多了</div>
-            <div v-else>&nbsp;</div>
+            <slot v-if="demo.store.load === 2" name="load-loading" :state="demo.store.load" :text="loadText('loading')" :locale="words" :pullload="demo">
+              <div ui-flex="row cm">
+                <span ui-load="@d"></span>
+                <span v-if="loadText('loading')">{{ loadText("loading") }}</span>
+              </div>
+            </slot>
+            <slot v-else-if="demo.store.load === 3" name="load-over" :state="demo.store.load" :text="loadText('over')" :locale="words" :pullload="demo">
+              <div class="fekit-pullload-over" ui-flex="row cm">
+                <span>{{ loadText("over") }}</span>
+              </div>
+            </slot>
+            <slot v-else-if="demo.store.load === 1" name="load-loaded" :state="demo.store.load" :text="loadText('loaded')" :locale="words" :pullload="demo">
+              <div ui-flex="row cm">
+                <span v-if="loadText('loaded')">{{ loadText("loaded") }}</span>
+                <span v-else>&nbsp;</span>
+              </div>
+            </slot>
+            <slot v-else name="load-idle" :state="demo.store.load" :text="loadText('idle')" :locale="words" :pullload="demo">
+              <div ui-flex="row cm">
+                <span v-if="loadText('idle')">{{ loadText("idle") }}</span>
+                <span v-else>&nbsp;</span>
+              </div>
+            </slot>
           </transition>
         </slot>
       </div>
@@ -36,8 +66,22 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, onBeforeUnmount, ref } from "vue";
+import { computed, nextTick, onMounted, onBeforeUnmount, ref, watch } from "vue";
 const emits = defineEmits(["onpull", "onload"]);
+const defaultLocale = {
+  pull: {
+    idle: "下拉刷新",
+    ready: "松开加载",
+    loading: "",
+    finished: "刷新完成",
+  },
+  load: {
+    idle: "",
+    loaded: "",
+    loading: "",
+    over: "没有更多了",
+  },
+};
 const props: any = defineProps({
   pull: {
     type: Boolean,
@@ -51,10 +95,264 @@ const props: any = defineProps({
     type: Boolean,
     default: false,
   },
+  loadPos: {
+    type: [Number, String],
+    default: null,
+  },
+  loadPosition: {
+    type: [Number, String],
+    default: null,
+  },
+  loadOffset: {
+    type: [Number, String],
+    default: null,
+  },
+  initialLoad: {
+    type: [Boolean, String],
+    default: false,
+  },
+  locale: {
+    type: Object,
+    default: () => ({}),
+  },
 });
 const root: any = ref(null);
 const demo: any = ref({ store: { pull: 0, load: 0 } });
 let alive = true;
+let removeLoadOffsetListener = () => {};
+let checkingLoad = false;
+let loadPending = false;
+let initialPreloadDone = false;
+let pullLoadListening = false;
+let removePullLoadListener = () => {};
+let resizeObserver: any = null;
+let pullLoadReady: Promise<any> | null = null;
+
+const words = computed(() => ({
+  pull: {
+    ...defaultLocale.pull,
+    ...(props.locale?.pull || {}),
+  },
+  load: {
+    ...defaultLocale.load,
+    ...(props.locale?.load || {}),
+  },
+}));
+
+const pullStatusMap: any = {
+  0: "idle",
+  1: "ready",
+  2: "loading",
+  3: "finished",
+};
+
+const loadStatusMap: any = {
+  0: "idle",
+  1: "loaded",
+  2: "loading",
+  3: "over",
+};
+
+const pullText = (status = pullStatusMap[demo.value?.store?.pull] || "idle") => {
+  return words.value.pull?.[status] ?? "";
+};
+
+const loadText = (status = loadStatusMap[demo.value?.store?.load] || "idle") => {
+  return words.value.load?.[status] ?? "";
+};
+
+const numberValue = (value: any) => {
+  const num = parseFloat(String(value ?? "").trim());
+  return Number.isFinite(num) ? num : 0;
+};
+
+const hasValue = (value: any) => value !== null && value !== undefined && value !== "";
+
+const boolValue = (value: any) => {
+  if (value === false || value === 0) return false;
+  const text = String(value ?? "").trim().toLowerCase();
+  return !["", "false", "0", "off", "no"].includes(text);
+};
+
+const clampRatio = (value: any) => {
+  const text = String(value ?? "").trim();
+  const ratio = text.endsWith("%") ? numberValue(text) / 100 : numberValue(text);
+  return Math.min(1, Math.max(0, ratio > 1 ? ratio / 100 : ratio));
+};
+
+const effectiveLoadPos = () => {
+  if (hasValue(props.loadPos)) return props.loadPos;
+  if (hasValue(props.loadPosition)) return props.loadPosition;
+  if (hasValue(props.loadOffset)) return null;
+  return 0.8;
+};
+
+const loadOffsetPx = (el: HTMLElement) => {
+  const text = String(props.loadOffset ?? "").trim();
+  const value = numberValue(text);
+  if (text.endsWith("%")) return Math.max(0, el.clientHeight * (value / 100));
+  return Math.max(0, value);
+};
+
+const isInitialLoadEnabled = () => {
+  return boolValue(props.initialLoad);
+};
+
+const shouldLoad = (el: HTMLElement) => {
+  const scrollable = el.scrollHeight - el.clientHeight;
+  if (scrollable <= 0) return false;
+  const loadPos = effectiveLoadPos();
+  if (hasValue(loadPos)) {
+    return el.scrollTop / scrollable >= clampRatio(loadPos);
+  }
+  return scrollable - el.scrollTop <= loadOffsetPx(el);
+};
+
+const shouldInitialPreload = (el: HTMLElement) => {
+  if (initialPreloadDone || !props.load || demo.value?.store?.load >= 2) return false;
+  if (!isInitialLoadEnabled()) return false;
+  return el.scrollHeight - el.clientHeight > 0;
+};
+
+const emitPull = async () => {
+  if (!props.pull) return;
+  emits("onpull", demo.value);
+};
+
+const emitLoad = async () => {
+  if (!props.load) {
+    demo.value?.loaded?.();
+    return;
+  }
+  try {
+    emits("onload", demo.value);
+  } catch (error) {
+    resetLoad();
+    throw error;
+  }
+};
+
+const syncPullLoadHandlers = () => {
+  if (!demo.value) return;
+  demo.value.onpull = props.pull ? emitPull : null;
+  demo.value.onload = props.load ? emitLoad : null;
+};
+
+const checkLoad = () => {
+  const el = root.value;
+  if (!props.load || !el || loadPending || demo.value?.store?.pull === 2 || demo.value?.store?.load >= 2) return;
+  if (shouldInitialPreload(el)) {
+    initialPreloadDone = true;
+    triggerLoad();
+    return;
+  }
+  if (shouldLoad(el)) {
+    triggerLoad();
+  }
+};
+
+const triggerLoad = () => {
+  if (loadPending || demo.value?.store?.load >= 2) return;
+  loadPending = true;
+  const run = () => {
+    if (!alive || !props.load || demo.value?.store?.load >= 2) {
+      loadPending = false;
+      return;
+    }
+    if (typeof demo.value?.isload !== "function") {
+      loadPending = false;
+      return;
+    }
+    demo.value.isload();
+  };
+  if (typeof window !== "undefined" && window.requestAnimationFrame) {
+    window.requestAnimationFrame(() => setTimeout(run, 0));
+  } else {
+    setTimeout(run, 0);
+  }
+};
+
+const requestCheckLoad = () => {
+  if (checkingLoad) return;
+  checkingLoad = true;
+  const run = () => {
+    checkingLoad = false;
+    checkLoad();
+  };
+  if (typeof window !== "undefined" && window.requestAnimationFrame) {
+    window.requestAnimationFrame(run);
+  } else {
+    setTimeout(run, 0);
+  }
+};
+
+const scheduleCheckLoad = async () => {
+  await nextTick();
+  if (!alive) return;
+  requestCheckLoad();
+};
+
+const removeLoadListener = () => {
+  removeLoadOffsetListener();
+  removeLoadOffsetListener = () => {};
+};
+
+const removePullListener = () => {
+  removePullLoadListener();
+  removePullLoadListener = () => {};
+  pullLoadListening = false;
+};
+
+const syncPullListener = () => {
+  const el = root.value;
+  if (!demo.value || !el) return;
+  if (!props.pull) {
+    removePullListener();
+    demo.value?.setcss?.(0);
+    if (demo.value?.store) {
+      demo.value.store.pull = 0;
+    }
+    return;
+  }
+  if (pullLoadListening) return;
+  demo.value?.listen?.(el);
+  removePullLoadListener = typeof demo.value?.remove === "function" ? () => demo.value.remove() : () => {};
+  pullLoadListening = true;
+};
+
+const syncLoadListener = () => {
+  removeLoadListener();
+  const el = root.value;
+  if (!props.load) {
+    loadPending = false;
+    initialPreloadDone = false;
+    if (demo.value?.store) {
+      demo.value.store.load = 0;
+    }
+    return;
+  }
+  if (!el) return;
+
+  const onChange = () => {
+    requestCheckLoad();
+  };
+  el.addEventListener("scroll", onChange, { passive: true });
+  el.addEventListener("touchmove", onChange, { passive: true });
+  removeLoadOffsetListener = () => {
+    el.removeEventListener("scroll", onChange);
+    el.removeEventListener("touchmove", onChange);
+    resizeObserver?.disconnect?.();
+    resizeObserver = null;
+  };
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(onChange);
+    resizeObserver.observe(el);
+    if (el.firstElementChild) {
+      resizeObserver.observe(el.firstElementChild);
+    }
+  }
+  scheduleCheckLoad();
+};
 
 const createPullLoad = async () => {
   const { default: PullLoad, Easing } = await import("@fekit/pullload");
@@ -63,33 +361,42 @@ const createPullLoad = async () => {
     friction: 0.3,
     triggerDistance: 60,
     loadingDistance: 50,
-    ...(props.pull
-      ? {
-          onpull: async () => {
-            emits("onpull", demo.value);
-          },
-        }
-      : {}),
-    ...(props.load
-      ? {
-          onload: async () => {
-            emits("onload", demo.value);
-          },
-        }
-      : {}),
+    onpull: props.pull ? emitPull : null,
+    // IScrollView owns the scroll threshold, so onload is attached after listen().
+    onload: null,
   });
 };
 
+const ensurePullLoad = async () => {
+  if (demo.value?.isload || demo.value?.ispull) return demo.value;
+  if (!pullLoadReady) {
+    pullLoadReady = createPullLoad()
+      .then((pullLoad) => {
+        if (!alive) {
+          pullLoad?.remove?.();
+          return null;
+        }
+        demo.value = pullLoad;
+        syncPullLoadHandlers();
+        return pullLoad;
+      })
+      .catch((error) => {
+        pullLoadReady = null;
+        throw error;
+      });
+  }
+  return pullLoadReady;
+};
+
 onMounted(async () => {
-  const pullLoad = await createPullLoad();
-  if (!alive) {
-    pullLoad?.remove?.();
-    return;
+  if (props.pull || props.load) {
+    await ensurePullLoad();
   }
 
-  demo.value = pullLoad;
   if (root.value) {
-    demo.value?.listen?.(root.value);
+    syncPullLoadHandlers();
+    syncPullListener();
+    syncLoadListener();
     if (props.pull) {
       demo.value?.ispull?.();
     }
@@ -97,14 +404,92 @@ onMounted(async () => {
 });
 onBeforeUnmount(() => {
   alive = false;
-  demo.value?.remove?.();
+  removePullListener();
+  removeLoadListener();
+  pullLoadReady = null;
 });
 
-const pullload = () => {
+const pullload = async () => {
+  if (!props.pull) return;
+  await ensurePullLoad();
   demo.value?.ispull?.();
 };
 
-defineExpose({ pullload, ex: () => demo.value });
+const loadmore = async () => {
+  if (!props.load || demo.value?.store?.load >= 2) return;
+  await ensurePullLoad();
+  demo.value?.isload?.();
+};
+
+const loaded = () => {
+  loadPending = false;
+  demo.value?.loaded?.();
+};
+
+const noMore = () => {
+  loadPending = false;
+  demo.value?.isover?.();
+};
+
+const resetLoad = () => {
+  loadPending = false;
+  if (demo.value?.store) {
+    demo.value.store.load = 0;
+  }
+  initialPreloadDone = false;
+  scheduleCheckLoad();
+};
+
+const scrollToTop = () => {
+  if (root.value) {
+    root.value.scrollTop = 0;
+  }
+};
+
+const pulled = () => {
+  demo.value?.pulled?.();
+};
+
+watch(
+  () => props.pull,
+  async () => {
+    if (props.pull) {
+      await ensurePullLoad();
+    }
+    syncPullLoadHandlers();
+    syncPullListener();
+  }
+);
+
+watch(
+  () => props.load,
+  async () => {
+    if (props.load) {
+      await ensurePullLoad();
+    }
+    syncPullLoadHandlers();
+    syncLoadListener();
+  }
+);
+
+watch(
+  () => [props.loadPos, props.loadPosition, props.loadOffset, props.initialLoad],
+  () => {
+    initialPreloadDone = false;
+    scheduleCheckLoad();
+  }
+);
+
+watch(
+  () => demo.value?.store?.load,
+  (load) => {
+    if (load !== 2) {
+      loadPending = false;
+    }
+  }
+);
+
+defineExpose({ pullload, loadmore, loaded, noMore, resetLoad, scrollToTop, pulled, ex: () => demo.value });
 </script>
 
 <style lang="scss">
@@ -144,5 +529,16 @@ defineExpose({ pullload, ex: () => demo.value });
       transform: rotate(180deg);
     }
   }
+
+  .fekit-pullload-over {
+    gap: 0.75em;
+    &::before,
+    &::after {
+      content: "";
+      width: 3em;
+      border-top: 1px solid currentColor;
+      opacity: 0.35;
+    }
+  }
 }
 </style>