@neatui/vue 2.15.10 → 2.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "2.15.10",
+  "version": "2.16.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^4.3.1",
-    "@neatui/css": "^3.10.6",
+    "@neatui/css": "^3.15.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

@@ -10,54 +10,38 @@
       class="fekit-layer"
     >
       <div :ui-flex="`col ${flex}`" :style="wrapStyle" class="fekit-layer-wrap" @animationend="anim" @click="_sys_hide">
-        <slot></slot>
+        <slot :param="_tasks[id]?.params"></slot>
       </div>
     </div>
   </Teleport>
 </template>
 <script lang="ts" setup>
-  import { onBeforeUnmount, PropType, reactive, ref, watch } from 'vue';
+  import { onBeforeUnmount, reactive, watch } from 'vue';
   import { isFunction } from '@fekit/utils';
+  import { _tasks, getActiveLayer } from './index';
 
-  // 弹层队列
-  if (!(window as any)._FEKIT_LAYER_TASKS) {
-    (window as any)._FEKIT_LAYER_TASKS = {};
+  // 类型定义
+  interface Props {
+    zIndex?: string | number;
+    area?: string;
+    id: string;
+    am?: 'aa' | 'ab' | 'ac' | 'ad' | 'ae' | 'af' | 'ag' | 'ah' | 'ai' | 'aj' | 'ak' | 'al' | 'am' | 'an' | 'ao' | 'ap' | 'aq' | 'ar' | 'as' | 'at' | (string & {});
+    flex?: string;
+    dark?: string | number;
+    darkClickClose?: boolean;
+    wrapStyle?: string;
   }
-  const _tasks: any = (window as any)._FEKIT_LAYER_TASKS;
 
   // 弹窗入参
-  const props: any = defineProps({
-    zIndex: {
-      type: [String, Number],
-      default: '',
-    },
-    area: {
-      type: String,
-      default: '#fekit',
-    },
-    id: {
-      type: String,
-    },
-    am: {
-      type: String as PropType<'aa' | 'ab' | 'ac' | 'ad' | 'ae' | 'af' | 'ag' | 'ah' | 'ai' | 'aj' | 'ak' | 'al' | 'am' | 'an' | 'ao' | 'ap' | 'aq' | 'ar' | 'as' | 'at'>,
-      default: 'as',
-    },
-    flex: {
-      type: String as PropType<'lt' | 'ct' | 'rt' | 'lm' | 'cm' | 'rm' | 'lb' | 'cb' | 'rb'>,
-      default: 'cm',
-    },
-    dark: {
-      type: [String, Number],
-      default: '',
-    },
-    darkClickClose: {
-      type: Boolean,
-      default: true,
-    },
-    wrapStyle: {
-      type: String,
-      default: '',
-    },
+  const props = withDefaults(defineProps<Props>(), {
+    zIndex: '',
+    area: '#fekit',
+    id: '',
+    am: 'as',
+    flex: 'cm',
+    dark: '',
+    darkClickClose: true,
+    wrapStyle: '',
   });
 
   const _area: any = document.querySelector(props.area);
@@ -73,14 +57,18 @@
     view: 0,
     params: {},
     top: 0,
+    sw: 0,
   });
 
   function disableScroll() {
     state.top = document.documentElement.scrollTop;
+    const sw = window.innerWidth - document.documentElement.clientWidth;
+    state.sw = sw;
     document.body.style.overflow = 'hidden';
     document.body.style.position = 'fixed';
     document.body.style.top = `-${state.top}px`;
     document.body.style.width = '100%';
+    document.body.style.paddingRight = `${sw}px`;
   }
 
   function enableScroll() {
@@ -88,17 +76,30 @@
     document.body.style.removeProperty('position');
     document.body.style.removeProperty('top');
     document.body.style.removeProperty('width');
-    window.scrollTo(0, state.top);
+    document.body.style.removeProperty('padding-right');
+    if (state.top) {
+      window.scrollTo(0, state.top);
+    }
   }
 
   watch(
     () => state.view,
     (view: any) => {
+      if (_tasks[props.id]) {
+        _tasks[props.id].view = view;
+      }
+
+      const active = getActiveLayer() || [];
+
       if (view === 2) {
-        disableScroll();
+        if (active.length === 1) {
+          disableScroll();
+        }
       }
       if (view === 0) {
-        enableScroll();
+        if (!active.length) {
+          enableScroll();
+        }
       }
     },
     { deep: true, immediate: true },
@@ -152,7 +153,14 @@
   // 关闭弹层(没有动画过程)
   const none = (_params: any = {}, then = () => {}) => {
     state.view = 0;
-    on.show.push(then);
+    on.none.push(then);
+    // 立即执行回调，因为没有动画
+    on.none.forEach((fun: any) => {
+      if (isFunction(fun)) {
+        fun();
+      }
+    });
+    on.none.length = 0;
   };
 
   // 点暗层关闭
@@ -171,6 +179,7 @@
           fun();
         }
       });
+      on.hide.length = 0; // 清空回调数组
     }
     if (state.view === 2) {
       state.view = 3;
@@ -179,6 +188,7 @@
           fun();
         }
       });
+      on.show.length = 0; // 清空回调数组
     }
   };
 
@@ -195,11 +205,14 @@
 
   // 卸载弹层
   onBeforeUnmount(() => {
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete _tasks[id];
   });
 </script>
 
 <style lang="scss">
+  @use '@neatui/css' as neatui;
+
   // 弹层
   .fekit-layer {
     position: fixed;

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

@@ -1,5 +1,12 @@
 import Layer from './Layer.vue';
+
+export const _tasks: any = {};
+export const _state: any = {};
+export const getActiveLayer = () => {
+  return Object.values(_tasks).filter((task: any) => task.view > 0);
+};
 const LayerById = (id: any) => {
-  return (window as any)._FEKIT_LAYER_TASKS[id];
+  return _tasks[id];
 };
+
 export { Layer, LayerById };