@neatui/vue 2.17.5 → 3.0.0

package/src/components/basic/IRouterView.vue

@@ -1,9 +1,9 @@
 <template>
-  <div :am-view="view" :am-mode="mode" class="iroute-view pr full" :view-full="full ? 1 : 0" @animationend="anim">
+  <div :am-view="view" :am-mode="mode" :am-animate="transitioning ? 1 : 0" class="iroute-view pr full" :view-full="full ? 1 : 0" @animationend="anim">
     <div :class="listClass" :style="listStyle" am-view-item="list">
       <slot name="list" :mode="mode"></slot>
     </div>
-    <div v-if="view === 'iteming' || view === 'listing' || view === 'item'" ref="itemRef" :class="itemClass" :style="itemStyle" am-view-item="item">
+    <div v-if="itemEverMounted" ref="itemRef" :class="itemClass" :style="itemStyle" am-view-item="item">
       <div class="iroute-view-dark" @click="cancel"></div>
       <div class="iroute-view-body" :style="mode === 'preview' || mode === 'pop-up' ? '' : 'width: 100%;'">
         <slot name="item" :mode="mode"></slot>
@@ -12,7 +12,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { deepcopy } from '@fekit/utils';
+  import { deepcopy, env } from '@fekit/utils';
   import { ref, watch, provide, reactive } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   const route = useRoute();
@@ -21,6 +21,7 @@
   interface Props {
     full?: boolean | 0 | 1;
     once?: number;
+    animate?: boolean | 0 | 1;
     mode?: 'default' | 'preview' | 'pop-up' | 'window';
     queryName?: string;
     listClass?: string;
@@ -31,6 +32,7 @@
   const props: any = withDefaults(defineProps<Props>(), {
     full: 0,
     once: 0,
+    animate: 1,
     mode: 'default',
     queryName: 'id',
     listClass: 'full',
@@ -39,64 +41,90 @@
     itemStyle: '',
   });
   const state: any = reactive({
-    first: 1,
     list: null,
     item: null,
   });
 
   const evs = (v: any = 'list', p: any = 'item') => {
     return (then: any = () => {}, param: any) => {
+      if (!env.client) return;
+      // 注册时已在目标视图、且对侧没留数据 → 视为初次挂载噪音，吞掉一次
+      // 对侧已经写入 state[v]（如 item 退出前调用了 onitem(param)）→ 不跳过，正常派发
+      let skipInitial = view.value === v && state[v] == null;
       watch(
         () => view.value,
         () => {
-          if (view.value === v) {
-            if (param) {
-              state[p] = param;
-            }
-            if (!state.first) {
-              then({ view: view.value, mode: props.mode, param: deepcopy(state[v] || {}) });
-            } else {
-              state.first = 0;
-            }
+          if (view.value !== v) return;
+          if (skipInitial) {
+            skipInitial = false;
+            // 初始 list 仍写入 state.item：item 首次进入能拿到 list 的上下文。
+            // 初始 item 不写入 state.list：避免 deep-link 仅靠 item slot 挂载
+            // 就给 list 留下假的 "edit" 信号、cancel 回 list 触发误刷新。
+            if (v === 'list' && param) state[p] = param;
+            return;
           }
+          if (param) state[p] = param;
+          then({ view: view.value, mode: props.mode, param: deepcopy(state[v] || {}) });
         },
-        { deep: true, immediate: true },
+        { immediate: true },
       );
     };
   };
 
+  const hasItemQuery = () => {
+    const value = route.query[props.queryName];
+    if (Array.isArray(value)) return value.some((item) => item !== undefined && item !== null && item !== '');
+    return value !== undefined && value !== null && value !== '';
+  };
+
   const init = ref(0);
-  const view = ref('');
+  const currentHasItem = ref(hasItemQuery());
+  const transitioning = ref(false);
+  const view = ref(currentHasItem.value ? 'item' : 'list');
+  // item slot 只在首次进入 item 视图后才挂载，之后始终保持，保留表单状态等
+  // list slot 则始终挂载（模板无 v-if），保留勾选/滚动/筛选
+  const itemEverMounted = ref(view.value === 'item' || view.value === 'iteming' || view.value === 'listing');
+  watch(
+    () => view.value,
+    (v) => {
+      if (v === 'item' || v === 'iteming' || v === 'listing') itemEverMounted.value = true;
+    },
+  );
+  const showAnimations = ['iroute-show-default', 'iroute-show-preview', 'iroute-show-pop-up', 'iroute-show-window'];
+  const hideAnimations = ['iroute-hide-default', 'iroute-hide-preview', 'iroute-hide-pop-up', 'iroute-hide-window'];
   const anim = (e: any) => {
-    if (
-      e.animationName === 'am-show-default' ||
-      e.animationName === 'am-show-window' ||
-      e.animationName === 'am-show-preview' ||
-      e.animationName === 'am-show-pop-up' ||
-      e.animationName === 'am-hide-default' ||
-      e.animationName === 'am-hide-window' ||
-      e.animationName === 'am-hide-preview' ||
-      e.animationName === 'am-hide-pop-up'
-    ) {
-      view.value = route.query[props.queryName] ? 'item' : 'list';
-    }
+    const isShow = showAnimations.includes(e.animationName);
+    const isHide = hideAnimations.includes(e.animationName);
+    if (!isShow && !isHide) return;
+
+    currentHasItem.value = hasItemQuery();
+    view.value = currentHasItem.value ? 'item' : 'list';
+    if (isShow || props.mode !== 'default') transitioning.value = false;
   };
 
   const a = () => {
+    const nextHasItem = hasItemQuery();
     if (init.value) {
       if (!props.once) {
-        view.value = route.query[props.queryName] ? 'iteming' : 'listing';
+        const shouldAnimate = !!props.animate && nextHasItem !== currentHasItem.value;
+        currentHasItem.value = nextHasItem;
+        transitioning.value = shouldAnimate;
+        view.value = shouldAnimate ? (nextHasItem ? 'iteming' : 'listing') : nextHasItem ? 'item' : 'list';
       }
     } else {
-      view.value = route.query[props.queryName] ? 'item' : 'list';
+      currentHasItem.value = nextHasItem;
+      transitioning.value = false;
+      view.value = nextHasItem ? 'item' : 'list';
       init.value = 1;
     }
   };
 
   provide('onlist', evs('list', 'item'));
   provide('onitem', evs('item', 'list'));
-  watch(() => route.query[props.queryName], a);
-  a();
+  if (env.client) {
+    watch(() => route.query[props.queryName], a);
+    a();
+  }
 
   // 取消
   const cancel = () => {
@@ -125,18 +153,15 @@
     width: 100%;
     height: 100%;
     & > * {
-      pointer-events: none;
-      & > * {
-        pointer-events: auto;
-      }
+      pointer-events: auto;
     }
   }
 
   // 默认模式
-  [am-view][am-mode~='default'] {
+  .iroute-view[am-mode~='default'] {
     overflow: hidden;
 
-    @keyframes am-show-default {
+    @keyframes iroute-show-default {
       0% {
         opacity: 0;
         transform: translate3d(1em, 0, 0);
@@ -146,7 +171,7 @@
         transform: translate3d(0, 0, 0);
       }
     }
-    @keyframes am-hide-default {
+    @keyframes iroute-hide-default {
       0% {
         opacity: 1;
         transform: translate3d(0, 0, 0);
@@ -177,39 +202,47 @@
       & > [am-view-item~='list'] {
         flex-direction: column;
         display: flex;
-        animation: am-show-default 0.35s ease both;
+      }
+    }
+    &[am-animate='1'][am-view='list'] {
+      & > [am-view-item~='list'] {
+        animation: iroute-show-default 0.35s ease both;
       }
     }
     &[am-view='listing'] {
       & > [am-view-item~='item'] {
         flex-direction: column;
         display: flex;
-        animation: am-hide-default 0.3s ease-in-out both;
+        animation: iroute-hide-default 0.3s ease-in-out both;
       }
     }
     &[am-view='item'] {
       & > [am-view-item~='item'] {
         display: flex;
-        animation: am-show-default 0.35s ease both;
+      }
+    }
+    &[am-animate='1'][am-view='item'] {
+      & > [am-view-item~='item'] {
+        animation: iroute-show-default 0.35s ease both;
       }
     }
     &[am-view='iteming'] {
       & > [am-view-item~='list'] {
         display: flex;
-        animation: am-hide-default 0.3s ease-in-out both;
+        animation: iroute-hide-default 0.3s ease-in-out both;
       }
     }
   }
 
-  // 默认模式
-  [am-view][am-mode~='preview'] {
+  // 预览模式
+  .iroute-view[am-mode~='preview'] {
     overflow: hidden;
 
     .iroute-view-body {
       justify-content: end;
     }
 
-    @keyframes am-show-preview {
+    @keyframes iroute-show-preview {
       0% {
         opacity: 0;
         transform: translate3d(110%, 0, 0);
@@ -219,7 +252,7 @@
         transform: translate3d(0, 0, 0);
       }
     }
-    @keyframes am-hide-preview {
+    @keyframes iroute-hide-preview {
       0% {
         opacity: 1;
         transform: translate3d(0, 0, 0);
@@ -256,18 +289,27 @@
         pointer-events: none;
       }
     }
-    &[am-view='list'],
+    // list 视图：item 即便始终挂载也要隐藏（无 v-if 时需 CSS 兜底）
+    &[am-view='list'] {
+      & > [am-view-item~='item'] {
+        display: none;
+      }
+    }
     &[am-view='listing'] {
       & > [am-view-item~='item'] {
         display: flex;
-        animation: am-hide-preview 0.5s ease-in-out both;
+        animation: iroute-hide-preview 0.5s ease-in-out both;
+      }
+    }
+    &[am-view='item'] {
+      & > [am-view-item~='item'] {
+        display: flex;
       }
     }
-    &[am-view='item'],
     &[am-view='iteming'] {
       & > [am-view-item~='item'] {
         display: flex;
-        animation: am-show-preview 0.5s ease both;
+        animation: iroute-show-preview 0.5s ease both;
       }
     }
 
@@ -284,7 +326,7 @@
   }
 
   // 弹出窗口
-  [am-view][am-mode~='pop-up'] {
+  .iroute-view[am-mode~='pop-up'] {
     overflow: hidden;
 
     .iroute-view-body {
@@ -297,7 +339,7 @@
       pointer-events: none;
     }
 
-    @keyframes am-show-pop-up {
+    @keyframes iroute-show-pop-up {
       0% {
         opacity: 0;
         transform: translate3d(0, 0, 0) scale(0.95);
@@ -307,7 +349,7 @@
         transform: translate3d(0, 0, 0);
       }
     }
-    @keyframes am-hide-pop-up {
+    @keyframes iroute-hide-pop-up {
       0% {
         opacity: 1;
         transform: translate3d(0, 0, 0);
@@ -347,50 +389,56 @@
         transition: all 0.35s;
       }
     }
-    &[am-view='list'],
+    // list 视图：item 即便始终挂载也要隐藏（无 v-if 时需 CSS 兜底）
+    &[am-view='list'] {
+      & > [am-view-item~='item'] {
+        display: none;
+      }
+    }
     &[am-view='listing'] {
       & > [am-view-item~='item'] {
         display: flex;
         opacity: 0;
         & > * {
-          animation: am-hide-pop-up 0.35s ease both;
+          animation: iroute-hide-pop-up 0.35s ease both;
         }
       }
     }
-    &[am-view='item'],
+    &[am-view='item'] {
+      & > [am-view-item~='item'] {
+        display: flex;
+        opacity: 1;
+      }
+    }
     &[am-view='iteming'] {
       & > [am-view-item~='item'] {
         display: flex;
         opacity: 1;
         & > * {
-          animation: am-show-pop-up 0.35s ease both;
+          animation: iroute-show-pop-up 0.35s ease both;
         }
       }
     }
   }
 
-  // 窗口模式
-  [am-view][am-mode~='window'] {
+  // 窗口模式：item 撑满整个浏览器窗口的全屏 overlay，行为类似 pop-up 但内容撑满
+  .iroute-view[am-mode~='window'] {
     overflow: hidden;
 
-    @keyframes am-show-default {
+    @keyframes iroute-show-window {
       0% {
         opacity: 0;
-        transform: translate3d(1em, 0, 0);
       }
       100% {
         opacity: 1;
-        transform: translate3d(0, 0, 0);
       }
     }
-    @keyframes am-hide-default {
+    @keyframes iroute-hide-window {
       0% {
         opacity: 1;
-        transform: translate3d(0, 0, 0);
       }
       100% {
         opacity: 0;
-        transform: translate3d(1em, 0, 0);
       }
     }
 
@@ -409,31 +457,42 @@
       &[am-view-item~='row'] {
         flex-direction: row !important;
       }
+
+      &[am-view-item~='item'] {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 100;
+        pointer-events: none;
+      }
     }
     &[am-view='list'] {
-      [am-view-item~='list'] {
+      & > [am-view-item~='list'] {
         flex-direction: column;
         display: flex;
-        animation: am-show-default 0s ease both;
       }
     }
     &[am-view='listing'] {
-      [am-view-item~='item'] {
-        flex-direction: column;
+      & > [am-view-item~='item'] {
         display: flex;
-        animation: am-hide-default 0s ease-in-out both;
+        & > * {
+          animation: iroute-hide-window 0.3s ease both;
+        }
       }
     }
     &[am-view='item'] {
-      [am-view-item~='item'] {
+      & > [am-view-item~='item'] {
         display: flex;
-        animation: am-show-default 0s ease both;
       }
     }
     &[am-view='iteming'] {
-      [am-view-item~='list'] {
+      & > [am-view-item~='item'] {
         display: flex;
-        animation: am-hide-default 0s ease-in-out both;
+        & > * {
+          animation: iroute-show-window 0.3s ease both;
+        }
       }
     }
   }

package/src/components/basic/IScrollView.vue

@@ -4,7 +4,7 @@
     :ui-scroll="`:y ${stable ? 'stable' : ''}`"
     ref="root"
   >
-    <div class="full">
+    <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">
@@ -37,7 +37,6 @@
 </template>
 <script setup lang="ts">
 import { onMounted, onBeforeUnmount, ref } from "vue";
-import PullLoad, { Easing } from "@fekit/pullload";
 const emits = defineEmits(["onpull", "onload"]);
 const props: any = defineProps({
   pull: {
@@ -54,42 +53,55 @@ const props: any = defineProps({
   },
 });
 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;
+
+const createPullLoad = async () => {
+  const { default: PullLoad, Easing } = await import("@fekit/pullload");
+  return 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);
+          },
+        }
+      : {}),
+  });
+};
+
+onMounted(async () => {
+  const pullLoad = await createPullLoad();
+  if (!alive) {
+    pullLoad?.remove?.();
+    return;
+  }
 
-onMounted(() => {
+  demo.value = pullLoad;
   if (root.value) {
-    demo.value?.listen(root.value);
+    demo.value?.listen?.(root.value);
     if (props.pull) {
-      demo.value?.ispull();
+      demo.value?.ispull?.();
     }
   }
 });
 onBeforeUnmount(() => {
-  demo.value?.remove();
+  alive = false;
+  demo.value?.remove?.();
 });
 
 const pullload = () => {
-  demo.value?.ispull();
+  demo.value?.ispull?.();
 };
 
 defineExpose({ pullload, ex: () => demo.value });

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();
   };
 
   // 快捷预设