@neatui/nuxt 1.0.7 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/nuxt",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "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';