@neatui/nuxt 1.2.7 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/nuxt",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "description": "NeatUI component library for Nuxt 3",
   "main": "./src/index.ts",
   "license": "MIT",

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

@@ -7,9 +7,10 @@
       :data-key="id"
       :style="`${`${dark}` ? 'background-color: rgba(0, 0, 0, ' + dark + ');' : ''}${zIndex ? 'z-index:' + zIndex + ';' : ''}`"
       :view="state.view"
-      class="fekit-layer">
+      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>
+        <slot :param="_tasks[id]?.params"></slot>
       </div>
     </div>
   </Teleport>
@@ -17,15 +18,15 @@
 <script lang="ts" setup>
   import { onBeforeUnmount, reactive, watch } from 'vue';
   import { isFunction } from '@fekit/utils';
-  import { _tasks } from './index';
+  import { _tasks, getActiveLayer } from './index';
 
   // 类型定义
   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';
-    flex?: 'lt' | 'ct' | 'rt' | 'lm' | 'cm' | 'rm' | 'lb' | 'cb' | 'rb';
+    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;
@@ -43,12 +44,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 (import.meta.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);
+    }
   }
 
   // 状态管理
@@ -56,11 +59,13 @@
     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`;
@@ -74,17 +79,29 @@
     document.body.style.removeProperty('top');
     document.body.style.removeProperty('width');
     document.body.style.removeProperty('padding-right');
-    window.scrollTo(0, state.top);
+    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 },
@@ -138,7 +155,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;
   };
 
   // 点暗层关闭
@@ -157,6 +181,7 @@
           fun();
         }
       });
+      on.hide.length = 0; // 清空回调数组
     }
     if (state.view === 2) {
       state.view = 3;
@@ -165,16 +190,19 @@
           fun();
         }
       });
+      on.show.length = 0; // 清空回调数组
     }
   };
 
   // 注册弹层
   const { id = '' }: any = { ...props };
   if (_tasks[id]) {
+    console.error('Layer 有重复 id', id);
   }
   if (id) {
     _tasks[id] = { init, show, hide, open, none };
   } else {
+    console.error('Layer 必须填写全局统一的 id');
   }
 
   // 卸载弹层
@@ -219,10 +247,10 @@
       width: 2em;
       height: 2em;
 
-      color: var(--co-vice);
+      color: var(--co-read);
       bottom: auto;
-      top: 1.5em;
-      right: 1.5em;
+      top: 0.5em;
+      right: 0.5em;
       left: auto;
       box-shadow: none;
 
@@ -232,7 +260,8 @@
       transform: scale(0.9);
       transition: all 0.2s;
       border-radius: 50%;
-      background: linear-gradient(45deg, transparent 44%, currentColor 45%, currentColor 55%, transparent 56%) no-repeat center / 50% 50%,
+      background:
+        linear-gradient(45deg, transparent 44%, currentColor 45%, currentColor 55%, transparent 56%) no-repeat center / 50% 50%,
         linear-gradient(-45deg, transparent 44%, currentColor 45%, currentColor 55%, transparent 56%) no-repeat center / 50% 50%;
 
       &:active {
@@ -249,18 +278,4 @@
       }
     }
   }
-
-  @include neatui.mob {
-    .fekit-layer-close {
-      top: 1.5em;
-      right: 1.5em;
-
-      color: var(--co-fore);
-      top: auto;
-      right: auto;
-      left: 50%;
-      bottom: -2.5rem;
-      box-shadow: 0 0 0 2px currentColor;
-    }
-  }
 </style>

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 _tasks[id];
 };
-export default LayerById;
+
+export { Layer, LayerById };

package/src/components/basic/index.ts

@@ -1,5 +1,4 @@
-import Layer from './LayerView/Layer.vue';
-import LayerById from './LayerView/index';
+import { Layer, LayerById } from './LayerView/index';
 import Icon from './Icon.vue';
 import IFollowView from './IFollowView.vue';
 import IPickerView from './IPickerView.vue';