@neatui/nuxt 1.0.7 → 1.1.0

package/package.json

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

package/src/components/basic/IRouterView.vue

@@ -3,7 +3,7 @@
     <div :class="listClass" :style="listStyle" am-view-item="list">
       <slot name="list" :mode="mode"></slot>
     </div>
-    <div :class="itemClass" :style="itemStyle" am-view-item="item" ref="itemRef" v-if="view === 'iteming' || view === 'listing' || view === 'item'">
+    <div v-if="view === 'iteming' || view === 'listing' || view === 'item'" 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>
@@ -64,17 +64,17 @@
       );
     };
   };
-  provide('onlist', evs('list', 'item'));
-  provide('onitem', evs('item', 'list'));
 
   const init = ref(0);
   const view = ref('');
   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'
     ) {
@@ -93,12 +93,17 @@
     }
   };
 
-  watch(() => route.query[props.queryName], a);
-  a();
+  if (import.meta.client) {
+    provide('onlist', evs('list', 'item'));
+    provide('onitem', evs('item', 'list'));
+    watch(() => route.query[props.queryName], a);
+    a();
+  }
 
   // 取消
-  const cancel = ({ target }: any = {}) => {
+  const cancel = () => {
     const _query = { ...route.query };
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
     delete _query[props.queryName];
     router.push({ path: route.path, query: _query });
   };
@@ -172,27 +177,27 @@
       }
     }
     &[am-view='list'] {
-      & > [am-view-item~='list'] {
+      [am-view-item~='list'] {
         flex-direction: column;
         display: flex;
         animation: am-show-default 0.35s ease both;
       }
     }
     &[am-view='listing'] {
-      & > [am-view-item~='item'] {
+      [am-view-item~='item'] {
         flex-direction: column;
         display: flex;
         animation: am-hide-default 0.3s ease-in-out both;
       }
     }
     &[am-view='item'] {
-      & > [am-view-item~='item'] {
+      [am-view-item~='item'] {
         display: flex;
         animation: am-show-default 0.35s ease both;
       }
     }
     &[am-view='iteming'] {
-      & > [am-view-item~='list'] {
+      [am-view-item~='list'] {
         display: flex;
         animation: am-hide-default 0.3s ease-in-out both;
       }
@@ -259,14 +264,14 @@
     }
     &[am-view='list'],
     &[am-view='listing'] {
-      & > [am-view-item~='item'] {
+      [am-view-item~='item'] {
         display: flex;
         animation: am-hide-preview 0.5s ease-in-out both;
       }
     }
     &[am-view='item'],
     &[am-view='iteming'] {
-      & > [am-view-item~='item'] {
+      [am-view-item~='item'] {
         display: flex;
         animation: am-show-preview 0.5s ease both;
       }
@@ -353,7 +358,7 @@
     }
     &[am-view='list'],
     &[am-view='listing'] {
-      & > [am-view-item~='item'] {
+      [am-view-item~='item'] {
         display: flex;
         opacity: 0;
         & > * {
@@ -363,7 +368,7 @@
     }
     &[am-view='item'],
     &[am-view='iteming'] {
-      & > [am-view-item~='item'] {
+      [am-view-item~='item'] {
         display: flex;
         opacity: 1;
         & > * {
@@ -372,4 +377,73 @@
       }
     }
   }
+
+  // 窗口模式
+  [am-view][am-mode~='window'] {
+    overflow: hidden;
+
+    @keyframes am-show-default {
+      0% {
+        opacity: 0;
+        transform: translate3d(1em, 0, 0);
+      }
+      100% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
+    }
+    @keyframes am-hide-default {
+      0% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
+      100% {
+        opacity: 0;
+        transform: translate3d(1em, 0, 0);
+      }
+    }
+
+    &[view-full~='1'] {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 15;
+    }
+
+    [am-view-item] {
+      display: none;
+
+      &[am-view-item~='row'] {
+        flex-direction: row !important;
+      }
+    }
+    &[am-view='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;
+        display: flex;
+        animation: am-hide-default 0s ease-in-out both;
+      }
+    }
+    &[am-view='item'] {
+      [am-view-item~='item'] {
+        display: flex;
+        animation: am-show-default 0s ease both;
+      }
+    }
+    &[am-view='iteming'] {
+      [am-view-item~='list'] {
+        display: flex;
+        animation: am-hide-default 0s ease-in-out both;
+      }
+    }
+  }
 </style>

package/src/components/basic/index.ts

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

package/src/components/loader/LayerLoader/LayerLoader.vue

@@ -103,8 +103,10 @@
 
   const ph = ref(0);
   onMounted(() => {
-    const side = document.getElementById('side-layerloader');
-    ph.value = side?.clientHeight || 0;
+    if (import.meta.client) {
+      const side = document.getElementById('side-layerloader');
+      ph.value = side?.clientHeight || 0;
+    }
   });
 
   // 计算路径
@@ -131,18 +133,20 @@
         unfoldActivePath(props.data, newActive);
 
         nextTick(() => {
-          const el = document.getElementById(`LID${newActive.replace(/\./g, '')}`);
-          if (el && !store.isMouseInLayer) {
-            scrollto({
-              el: '#side-layerloader',
-              to: {
-                y: el,
-              },
-              offset: {
-                y: -(ph.value / 2.5),
-              },
-              time: 600,
-            });
+          if (import.meta.client) {
+            const el = document.getElementById(`LID${newActive.replace(/\./g, '')}`);
+            if (el && !store.isMouseInLayer) {
+              scrollto({
+                el: '#side-layerloader',
+                to: {
+                  y: el,
+                },
+                offset: {
+                  y: -(ph.value / 2.5),
+                },
+                time: 600,
+              });
+            }
           }
         });
       },

package/src/components/loader/LimitLoader/LimitLoader@v3.vue

@@ -108,7 +108,7 @@
   watch(
     () => props.limit,
     () => {
-      const _cache = JSON.parse(localStorage.getItem(`${state.name}_limit`) || '{}');
+      const _cache = import.meta.client ? JSON.parse(localStorage.getItem(`${state.name}_limit`) || '{}') : {};
       state.limit = deepcopy(props.limit)?.map((item: any) => {
         if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_close')) {
           item._close = Number(_cache[item.field]?._close);
@@ -159,7 +159,7 @@
           }
         }
       });
-      localStorage.setItem(`${state.name}_limit`, JSON.stringify(_limit));
+      if (import.meta.client) localStorage.setItem(`${state.name}_limit`, JSON.stringify(_limit));
     },
     { deep: true },
   );

package/src/components/loader/MoveLoader/MoveLoader.vue

@@ -70,8 +70,10 @@
 
   const ph = ref(0);
   onMounted(() => {
-    const side = document.getElementById('side-layerloader');
-    ph.value = side?.clientHeight || 0;
+    if (import.meta.client) {
+      const side = document.getElementById('side-layerloader');
+      ph.value = side?.clientHeight || 0;
+    }
   });
 
   // 计算路径

package/src/components/loader/TableLoader/TableLoader.vue

@@ -264,7 +264,7 @@
   watch(
     () => props.table,
     () => {
-      const _cache = JSON.parse(localStorage.getItem(`${name}_table`) || '{}');
+      const _cache = import.meta.client ? JSON.parse(localStorage.getItem(`${name}_table`) || '{}') : {};
       state.__last = 0;
       state.table = deepcopy(props.table || [])
         ?.map((col: TableColumn, idx: number) => {
@@ -340,7 +340,7 @@
           state.__last = idx;
         }
       });
-      localStorage.setItem(`${name}_table`, JSON.stringify(_table));
+      if (import.meta.client) localStorage.setItem(`${name}_table`, JSON.stringify(_table));
     },
     { deep: true },
   );

package/src/components/tools/FormVerifyView.vue

@@ -38,7 +38,7 @@
   const props: any = defineProps({
     area: {
       type: [Object, HTMLElement],
-      default: () => (typeof document !== 'undefined' ? document.body : null),
+      default: () => (import.meta.client ? document.body : null),
     },
     data: {
       type: Object,
@@ -128,7 +128,7 @@
   );
 
   const fScrollToField = (path: any) => {
-    if (typeof document === 'undefined') return;
+    if (!import.meta.client) return;
     const dom = document.querySelector(path);
     if (dom) {
       scrollTo({

package/src/components/tools/Pagination@a.vue

@@ -210,12 +210,14 @@
   const size = (size: any) => {
     emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.pageSize || 'pageSize']: size } });
     emits('size', size);
-    window.localStorage.setItem(state.id, `${size}`);
+    if (import.meta.client) window.localStorage.setItem(state.id, `${size}`);
   };
 
   // 缓存
-  const cache = window.localStorage.getItem(state.id);
-  if (cache) {
-    size(Number(cache));
+  if (import.meta.client) {
+    const cache = window.localStorage.getItem(state.id);
+    if (cache) {
+      size(Number(cache));
+    }
   }
 </script>

package/src/components/tools/Pagination@b.vue

@@ -216,6 +216,6 @@
   const size = (size: any) => {
     emits('update:modelValue', { ...props.modelValue, ...{ pageSize: size } });
     emits('size', size);
-    window.localStorage.setItem(state.id, `${size}`);
+    if (import.meta.client) window.localStorage.setItem(state.id, `${size}`);
   };
 </script>