@neatui/vue 2.17.5 → 3.1.0

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 class="full">
-      <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>
+      <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,9 +66,22 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, onBeforeUnmount, ref } from "vue";
-import PullLoad, { Easing } from "@fekit/pullload";
+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,
@@ -52,47 +95,401 @@ 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(null);
-demo.value = new PullLoad({
-  easing: Easing.easeOut,
-  friction: 0.3,
-  triggerDistance: 60,
-  loadingDistance: 50,
-  ...(props.pull
-    ? {
-        onpull: async () => {
-          emits("onpull", demo.value);
-        },
-      }
-    : {}),
-  ...(props.load
-    ? {
-        onload: async () => {
-          emits("onload", demo.value);
-        },
-      }
-    : {}),
-});
+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");
+  return new PullLoad({
+    easing: Easing.easeOut,
+    friction: 0.3,
+    triggerDistance: 60,
+    loadingDistance: 50,
+    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 () => {
+  if (props.pull || props.load) {
+    await ensurePullLoad();
+  }
 
-onMounted(() => {
   if (root.value) {
-    demo.value?.listen(root.value);
+    syncPullLoadHandlers();
+    syncPullListener();
+    syncLoadListener();
     if (props.pull) {
-      demo.value?.ispull();
+      demo.value?.ispull?.();
     }
   }
 });
 onBeforeUnmount(() => {
-  demo.value?.remove();
+  alive = false;
+  removePullListener();
+  removeLoadListener();
+  pullLoadReady = null;
 });
 
-const pullload = () => {
-  demo.value?.ispull();
+const pullload = async () => {
+  if (!props.pull) return;
+  await ensurePullLoad();
+  demo.value?.ispull?.();
+};
+
+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?.();
 };
 
-defineExpose({ pullload, ex: () => demo.value });
+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">
@@ -132,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>

package/src/components/basic/LayerView/Layer.vue

@@ -1,29 +1,34 @@
 <!-- 实验性插件 -->
 <template>
-  <Teleport :to="area">
-    <div
-      v-if="state.view"
-      :am-view="am"
-      :data-key="id"
-      :style="`${`${dark}` ? 'background-color: rgba(0, 0, 0, ' + dark + ');' : ''}${zIndex ? 'z-index:' + zIndex + ';' : ''}`"
-      :view="state.view"
-      class="fekit-layer"
-    >
-      <div :ui-flex="`col ${flex}`" :style="wrapStyle" class="fekit-layer-wrap" @animationend="anim" @click="_sys_hide">
-        <slot :param="_tasks[id]?.params"></slot>
+  <div>
+    <Teleport :to="area">
+      <div
+        v-if="state.view"
+        :am-view="am"
+        :data-key="id"
+        :style="`${`${dark}` ? 'background-color: rgba(0, 0, 0, ' + dark + ');' : ''}${zIndex ? 'z-index:' + zIndex + ';' : ''}`"
+        :view="state.view"
+        class="fekit-layer"
+      >
+        <div :ui-flex="`col ${flex}`" :style="wrapStyle" class="fekit-layer-wrap" @animationend="anim" @click="_sys_hide">
+          <slot :param="_tasks[id]?.params"></slot>
+        </div>
       </div>
-    </div>
-  </Teleport>
+    </Teleport>
+  </div>
 </template>
 <script lang="ts" setup>
   import { onBeforeUnmount, reactive, watch } from 'vue';
-  import { isFunction } from '@fekit/utils';
+  import { env, isFunction } from '@fekit/utils';
 
   // 弹层队列
-  if (!(window as any)._FEKIT_LAYER_TASKS) {
-    (window as any)._FEKIT_LAYER_TASKS = {};
-  }
-  const _tasks: any = (window as any)._FEKIT_LAYER_TASKS;
+  const _tasks: any = (() => {
+    if (!env.client) return {};
+    if (!(window as any)._FEKIT_LAYER_TASKS) {
+      (window as any)._FEKIT_LAYER_TASKS = {};
+    }
+    return (window as any)._FEKIT_LAYER_TASKS;
+  })();
 
   // 获取活跃的弹层
   const getActiveLayer = () => {
@@ -54,12 +59,14 @@
     wrapStyle: '',
   });
 
-  const _area: any = document.querySelector(props.area);
-  if (!_area) {
-    const el = document.createElement('div');
-    el.id = (props.area || '#fekit').substring(1);
-    el.style.position = 'absolute';
-    document.body.appendChild(el);
+  if (env.client) {
+    const _area: any = document.querySelector(props.area);
+    if (!_area) {
+      const el = document.createElement('div');
+      el.id = (props.area || '#fekit').substring(1);
+      el.style.position = 'absolute';
+      document.body.appendChild(el);
+    }
   }
 
   // 状态管理
@@ -71,6 +78,7 @@
   });
 
   function disableScroll() {
+    if (!env.client) return;
     state.top = document.documentElement.scrollTop;
     const sw = window.innerWidth - document.documentElement.clientWidth;
     state.sw = sw;
@@ -82,6 +90,7 @@
   }
 
   function enableScroll() {
+    if (!env.client) return;
     document.body.style.removeProperty('overflow');
     document.body.style.removeProperty('position');
     document.body.style.removeProperty('top');

package/src/components/basic/LayerView/index.ts

@@ -1,5 +1,7 @@
 import Layer from './Layer.vue';
+import { env } from '@fekit/utils';
+
 const LayerById = (id: any) => {
-  return (window as any)._FEKIT_LAYER_TASKS[id];
+  return env.client ? (window as any)._FEKIT_LAYER_TASKS?.[id] : undefined;
 };
 export { Layer, LayerById };

package/src/components/form/DateView@v3.vue

@@ -217,7 +217,8 @@
   // 创建日期
   const cDate = (date: any = null) => {
     const normalized = normalizeDateInput(date);
-    return isDateString(normalized) ? new Date(normalized) : new Date();
+    // iOS 兼容：Safari 不支持 "YYYY-MM-DD" 格式，需要替换为 "YYYY/MM/DD"
+    return isDateString(normalized) ? new Date(normalized?.replace(/-/g, '/')) : new Date();
   };
 
   // 快捷预设