@neatui/vue 4.1.0 → 4.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^6.0.0",
-    "@neatui/css": "^4.1.0",
+    "@neatui/css": "^4.2.1",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

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

@@ -58,6 +58,8 @@
   };
 
   const SCROLL_LOCK_STATE = Symbol.for('@neatui/vue.Layer.scrollLock');
+  const ESCAPE_STACK = Symbol.for('@neatui/vue.Layer.escapeStack');
+  const ESCAPE_LISTENER = Symbol.for('@neatui/vue.Layer.escapeListener');
 
   const getScrollLockState = (): ScrollLockState => {
     if (!_tasks[SCROLL_LOCK_STATE]) {
@@ -71,6 +73,52 @@
     return _tasks[SCROLL_LOCK_STATE];
   };
 
+  const getEscapeStack = (): string[] => {
+    if (!_tasks[ESCAPE_STACK]) {
+      Object.defineProperty(_tasks, ESCAPE_STACK, {
+        configurable: true,
+        value: [] as string[],
+      });
+    }
+    return _tasks[ESCAPE_STACK];
+  };
+
+  const pushEscapeStack = (layerId: string) => {
+    if (!layerId) return;
+    const stack = getEscapeStack();
+    const index = stack.indexOf(layerId);
+    if (index !== -1) stack.splice(index, 1);
+    stack.push(layerId);
+  };
+
+  const removeEscapeStack = (layerId: string) => {
+    if (!layerId) return;
+    const stack = getEscapeStack();
+    const index = stack.indexOf(layerId);
+    if (index !== -1) stack.splice(index, 1);
+  };
+
+  // 全局只挂一次：ESC 仅关闭最后打开且已完全显示的一层
+  const ensureEscapeListener = () => {
+    if (!env.client || _tasks[ESCAPE_LISTENER]) return;
+    const onKeydown = (ev: KeyboardEvent) => {
+      if (ev.key !== 'Escape' || ev.defaultPrevented) return;
+      const stack = getEscapeStack();
+      const topId = stack[stack.length - 1];
+      if (!topId) return;
+      const layer = _tasks[topId];
+      // 禁止 ESC：显式 escClose=false，或禁止暗层关闭时同步禁 ESC
+      if (!layer || layer.view !== 3 || layer.escClose === false || layer.darkClickClose === false) return;
+      layer.hide();
+      ev.preventDefault();
+    };
+    document.addEventListener('keydown', onKeydown);
+    Object.defineProperty(_tasks, ESCAPE_LISTENER, {
+      configurable: true,
+      value: onKeydown,
+    });
+  };
+
   const hasInlineProperty = (style: CSSStyleDeclaration, property: string) => {
     for (let index = 0; index < style.length; index += 1) {
       if (style.item(index) === property) return true;
@@ -230,6 +278,7 @@
     flex?: string;
     dark?: string | number;
     darkClickClose?: boolean;
+    escClose?: boolean;
     wrapStyle?: string;
   }
 
@@ -242,6 +291,7 @@
     flex: 'cm',
     dark: '',
     darkClickClose: true,
+    escClose: true,
     wrapStyle: '',
   });
 
@@ -268,12 +318,30 @@
       if (_tasks[props.id]) {
         _tasks[props.id].view = view;
       }
+      if (view === 2 || view === 3) pushEscapeStack(props.id);
+      else removeEscapeStack(props.id);
       if (view > 0) acquireScrollLock(scrollLockOwner);
       else releaseScrollLock(scrollLockOwner);
     },
     { deep: true, immediate: true },
   );
 
+  watch(
+    () => props.escClose,
+    (escClose) => {
+      if (_tasks[props.id]) _tasks[props.id].escClose = escClose;
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => props.darkClickClose,
+    (darkClickClose) => {
+      if (_tasks[props.id]) _tasks[props.id].darkClickClose = darkClickClose;
+    },
+    { immediate: true },
+  );
+
   // 回调合集
   const on: any = {
     show: [],
@@ -367,13 +435,15 @@
     console.error('Layer 有重复 id', id);
   }
   if (id) {
-    _tasks[id] = { init, show, hide, open, none };
+    _tasks[id] = { init, show, hide, open, none, view: state.view, escClose: props.escClose, darkClickClose: props.darkClickClose };
+    ensureEscapeListener();
   } else {
     console.error('Layer 必须填写全局统一的 id');
   }
 
   // 卸载弹层
   onBeforeUnmount(() => {
+    removeEscapeStack(id);
     releaseScrollLock(scrollLockOwner);
     delete _tasks[id];
   });

package/src/components/display/Image.vue

@@ -1,7 +1,16 @@
 <template>
   <div>
     <div :class="`mc-img ${imgClass}`" :style="imgStyle">
-      <img :src="src[srcName]" :style="`object-fit: ${fit}`" @click.stop="showPreview" />
+      <img
+        ref="imgRef"
+        :src="displaySrc"
+        :alt="alt"
+        :loading="lazy ? 'lazy' : 'eager'"
+        :decoding="decoding"
+        :class="{ 'is-loaded': isLoaded }"
+        :style="`object-fit: ${fit}`"
+        @click.stop="showPreview"
+      />
       <div v-if="tools" class="mc-img-tools">
         <slot name="tools">
           <div class="mc-img-clean co-risk" @click="delImg"></div>
@@ -14,6 +23,7 @@
   </div>
 </template>
 <script setup lang="ts">
+  import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
   import { Layer, LayerById } from '../basic';
   import PhotoViewer from './PhotoViewer.vue';
 
@@ -46,10 +56,108 @@
       type: Number,
       default: 0,
     },
+    // 是否开启懒加载
+    lazy: {
+      type: Boolean,
+      default: true,
+    },
+    // 懒加载占位图
+    placeholder: {
+      type: String,
+      default: '/assets/img/none.webp',
+    },
+    alt: {
+      type: String,
+      default: '',
+    },
+    decoding: {
+      type: String,
+      default: 'async',
+    },
+    // 提前加载边距，接近视口即触发（同 IntersectionObserver.rootMargin）
+    rootMargin: {
+      type: String,
+      default: '200px',
+    },
   });
 
   const emit = defineEmits(['delImg']);
   const layerId = Math.random().toString(36).slice(-6);
+  const imgRef = ref<HTMLImageElement | null>(null);
+  const isLoaded = ref(!props.lazy);
+  let observer: IntersectionObserver | null = null;
+
+  const realSrc = computed(() => props.src?.[props.srcName] || '');
+  const displaySrc = computed(() => {
+    if (!props.lazy || isLoaded.value) {
+      return realSrc.value || props.placeholder;
+    }
+    return props.placeholder;
+  });
+
+  const stopObserver = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  };
+
+  const startObserver = () => {
+    stopObserver();
+    if (!props.lazy || isLoaded.value) return;
+    const el = imgRef.value;
+    if (!el) {
+      isLoaded.value = true;
+      return;
+    }
+    if (typeof IntersectionObserver === 'undefined') {
+      isLoaded.value = true;
+      return;
+    }
+    observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          isLoaded.value = true;
+          stopObserver();
+        }
+      },
+      { rootMargin: props.rootMargin },
+    );
+    observer.observe(el);
+  };
+
+  onMounted(() => {
+    if (!props.lazy) {
+      isLoaded.value = true;
+      return;
+    }
+    startObserver();
+  });
+
+  watch(
+    () => props.lazy,
+    (lazy) => {
+      if (!lazy) {
+        isLoaded.value = true;
+        stopObserver();
+        return;
+      }
+      isLoaded.value = false;
+      startObserver();
+    },
+  );
+
+  watch(
+    () => props.rootMargin,
+    () => {
+      if (!props.lazy || isLoaded.value) return;
+      startObserver();
+    },
+  );
+
+  onBeforeUnmount(() => {
+    stopObserver();
+  });
 
   //预览
   const showPreview = () => {
@@ -77,6 +185,12 @@
       height: 100%;
       transform: translate3d(0, 0, 0);
       border-radius: 0.15em;
+      opacity: 0.55;
+      transition: opacity 0.25s ease;
+
+      &.is-loaded {
+        opacity: 1;
+      }
     }
 
     &-tools {

package/src/components/form/Input.vue

@@ -28,7 +28,11 @@
       />
     </slot>
     <div ui-form-suffix="">
-      <i ui-form-clean="" v-if="clearable && props.modelValue && !readonly && !preview && !disabled" @click.stop="clear"></i>
+      <i
+        v-if="clearable && !readonly && !preview && !disabled"
+        :ui-form-clean="hasClearValue ? '' : 'empty'"
+        @click.stop="hasClearValue && clear()"
+      ></i>
       <div
         class="o-ls"
         v-if="type === 'password' && cipher && !preview"
@@ -127,6 +131,8 @@
     interacted: null,
   });
 
+  const hasClearValue = computed(() => props.modelValue !== '' && props.modelValue !== null && props.modelValue !== undefined);
+
   const state: any = reactive({
     // 用户是否交互
     interacted: null,

package/src/components/form/MoreSelect.vue

@@ -60,6 +60,7 @@
   import { reactive, ref, computed, watch, nextTick } from 'vue';
   import Input from './Input.vue';
   import { IFollowView } from '../basic';
+  import { matchOptionSearch } from './optionSearch';
   const ifollow: any = ref(null);
 
   const emits = defineEmits(['update:modelValue']);
@@ -177,7 +178,7 @@
     filter: computed(() => {
       if (state.search) {
         return props.options?.filter((item: any) => {
-          return item.label?.includes(state.search);
+          return matchOptionSearch(item, state.search);
         });
       } else {
         return props.options;

package/src/components/form/SearchMoreSelect.vue

@@ -46,6 +46,7 @@
   import { reactive, ref, computed } from 'vue';
   import Input from './Input.vue';
   import { IFollowView } from '../basic';
+  import { matchOptionSearch } from './optionSearch';
   const ifollow: any = ref(null);
 
   const emits = defineEmits(['update:modelValue', 'change', 'request', 'onshow', 'onhide']);
@@ -118,7 +119,7 @@
     filter: computed(() => {
       if (state.search) {
         return props.options?.filter((item) => {
-          return item.label?.includes(state.search);
+          return matchOptionSearch(item, state.search);
         });
       } else {
         return props.options;

package/src/components/form/SearchSelect.vue

@@ -50,6 +50,7 @@
   import { reactive, ref, computed } from 'vue';
   import Input from './Input.vue';
   import { IFollowView } from '../basic';
+  import { matchOptionSearch } from './optionSearch';
   const ifollow: any = ref(null);
   console.warn('「SearchSelect」 即将废弃，建议使用「Select」 设置参数search为true，示例：<Select v-model="value" :search="true" />');
   const emits = defineEmits(['update:modelValue', 'change', 'onshow', 'onhide']);
@@ -161,7 +162,7 @@
     filter: computed(() => {
       if (state.search) {
         return props.options?.filter((item: any) => {
-          return item.label?.includes(state.search);
+          return matchOptionSearch(item, state.search);
         });
       } else {
         return props.options;

package/src/components/form/Select.vue

@@ -68,6 +68,7 @@
   import { reactive, ref, computed, watch, nextTick } from 'vue';
   import Input from './Input.vue';
   import { IFollowView } from '../basic';
+  import { matchOptionSearch } from './optionSearch';
   const ifollow: any = ref(null);
   const customInputRef: any = ref(null);
 
@@ -246,7 +247,7 @@
 
       if (state.search) {
         filteredOptions = filteredOptions.filter((item: any) => {
-          return item.label?.includes(state.search);
+          return matchOptionSearch(item, state.search);
         });
       }
 

package/src/components/form/optionSearch.ts

@@ -0,0 +1,31 @@
+/**
+ * 选项搜索：匹配 label / value，以及选项对象上可遍历的全部字段（含嵌套）
+ * 大小写不敏感
+ */
+export const matchOptionSearch = (item: any, keyword: unknown): boolean => {
+  const q = String(keyword ?? '')
+    .trim()
+    .toLowerCase();
+  if (!q) return true;
+  if (item == null) return false;
+
+  if (typeof item !== 'object') {
+    return String(item).toLowerCase().includes(q);
+  }
+
+  const seen = new WeakSet<object>();
+  const walk = (val: any): boolean => {
+    if (val == null) return false;
+    const t = typeof val;
+    if (t === 'string' || t === 'number' || t === 'boolean' || t === 'bigint') {
+      return String(val).toLowerCase().includes(q);
+    }
+    if (t !== 'object') return false;
+    if (seen.has(val)) return false;
+    seen.add(val);
+    if (Array.isArray(val)) return val.some(walk);
+    return Object.values(val).some(walk);
+  };
+
+  return walk(item);
+};

package/src/components/loader/FormLoader/FormLoader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :ui-row="rows" class="n-sl-sub">
+  <div :ui-row="rows" :class="rootClass">
     <template v-for="(col, idx) in state.form" :key="idx">
       <div v-if="!col.clear" :id="col._fid" :ui-col="col.media" :ui-flex="`${vertical ? 'col xm' : 'row lt'}`">
         <template v-if="col.label">
@@ -182,7 +182,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { watch, reactive, onBeforeUnmount, nextTick } from 'vue';
+  import { watch, reactive, onBeforeUnmount, nextTick, useAttrs, computed } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { isString, isObject, isFunction, deepcopy, isArray } from '@fekit/utils';
   import {
@@ -212,6 +212,9 @@
 
   const route = useRoute();
   const router = useRouter();
+  const attrs = useAttrs();
+  // 外部写了 class 时去掉默认根 class，由外部接管
+  const rootClass = computed(() => (attrs.class ? undefined : 'n-sl-sub'));
 
   // 计算Label行高
   const clh = ({ sz = '' }: any = {}) => {