@neatui/vue 3.0.0 → 4.0.0

package/README.md

@@ -2,7 +2,7 @@
 
 NeatUI Vue component package for Vue 3 and Nuxt projects.
 
-`@neatui/vue` is the maintained component package. `@neatui/nuxt` has stopped maintenance as of 2026-05-26; Nuxt users should use `@neatui/vue` directly.
+Nuxt users should use `@neatui/vue` directly.
 
 ## Installation
 
@@ -71,15 +71,6 @@ const data = reactive({
 </script>
 ```
 
-## Migration From @neatui/nuxt
-
-```diff
-- import { Input, FormLoader, Pagination } from '@neatui/nuxt';
-+ import { Input, FormLoader, Pagination } from '@neatui/vue';
-```
-
-`@neatui/nuxt` should be removed from new Nuxt projects.
-
 ## Documentation
 
 [http://neatui.fekit.cn](http://neatui.fekit.cn)

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@neatui/vue",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
   "author": "xiaojunbo",
   "peerDependencies": {
+    "pinia": "^3.0.3",
     "vue": "^3.2.0",
     "vue-router": "^4.0.0"
   },
@@ -15,9 +16,11 @@
   "devDependencies": {
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/sortablejs": "^1.15.8",
+    "pinia": "^3.0.3",
     "postcss-scss": "^4.0.9",
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.80.7",
     "typescript": "^5.1.6",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
@@ -31,7 +34,7 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^6.0.0",
-    "@neatui/css": "^3.15.0",
+    "@neatui/css": "^4.0.0",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

package/rollup.config.js

@@ -3,14 +3,40 @@ const commonjs = require('@rollup/plugin-commonjs');
 const vue = require('rollup-plugin-vue');
 const postcss = require('rollup-plugin-postcss');
 const typescript = require('@rollup/plugin-typescript');
+const ts = require('typescript');
+const path = require('path');
+const { pathToFileURL } = require('url');
 const { terser } = require('rollup-plugin-terser');
 const scss = require('postcss-scss');
 
+const vueTypeScript = () => ({
+  name: 'vue-typescript',
+  transform(code, id) {
+    if (!/\.vue\?.*type=script.*lang\.ts$/.test(id)) return null;
+
+    const result = ts.transpileModule(code, {
+      fileName: id,
+      compilerOptions: {
+        target: ts.ScriptTarget.ESNext,
+        module: ts.ModuleKind.ESNext,
+        sourceMap: true
+      }
+    });
+
+    return {
+      code: result.outputText,
+      map: result.sourceMapText ? JSON.parse(result.sourceMapText) : null
+    };
+  }
+});
+
 module.exports = {
   input: 'src/components/loader/index.ts',
   output: {
     file: 'dist/bundle.js',
-    format: 'es'
+    format: 'es',
+    inlineDynamicImports: true,
+    sourcemap: true
   },
   plugins: [
     resolve({
@@ -19,8 +45,22 @@ module.exports = {
     commonjs(),
     vue({
       css: false,
-      compileTemplate: true
+      compileTemplate: true,
+      preprocessStyles: true,
+      preprocessOptions: {
+        scss: {
+          importers: [
+            {
+              findFileUrl(url) {
+                if (url !== '@neatui/css') return null;
+                return pathToFileURL(path.resolve(__dirname, '../css/neatui.scss'));
+              }
+            }
+          ]
+        }
+      }
     }),
+    vueTypeScript(),
     postcss({
       extensions: ['.css', '.scss'],
       extract: true,

package/src/components/basic/IDraggable@b.vue

@@ -4,7 +4,7 @@
       v-for="(item, idx) in list || []"
       :key="idx"
       style="user-select: none"
-      class="drag-move-item b-solid bk-line b-xs n-sm"
+      class="drag-move-item b-solid b-line b-xs n-sm"
       :data-move-ing="state.__moveing"
       @mousedown="fMoveSta($event, list, idx)"
       @mousemove="fMoveIng($event, list, idx)"

package/src/components/basic/IFollowView.vue

@@ -18,11 +18,11 @@
       >
         <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle">
           <div ui-hide=">mob" class="mob-follow-tips w-full n-ss" ui-flex="row xm">
-            <div class="w-sm"></div>
+            <div class="w-xs*s"></div>
             <div>
               <h5 class="bold">{{ title }}</h5>
             </div>
-            <div class="w-sm" ui-flex="row rm">
+            <div class="w-xs*s" ui-flex="row rm">
               <button ui-btn="@a none s :square" @click="toggle">
                 <i class="icon icon-close"></i>
               </button>

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>