@neatui/vue 4.1.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "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.0",
     "@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,51 @@
     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];
+      if (!layer || layer.view !== 3 || layer.escClose === 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 +277,7 @@
     flex?: string;
     dark?: string | number;
     darkClickClose?: boolean;
+    escClose?: boolean;
     wrapStyle?: string;
   }
 
@@ -242,6 +290,7 @@
     flex: 'cm',
     dark: '',
     darkClickClose: true,
+    escClose: true,
     wrapStyle: '',
   });
 
@@ -268,12 +317,22 @@
       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 },
+  );
+
   // 回调合集
   const on: any = {
     show: [],
@@ -367,13 +426,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 };
+    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/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 = {}) => {