@neatui/vue 2.15.7 → 2.15.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/vue",
-  "version": "2.15.7",
+  "version": "2.15.8",
   "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.3",
+    "@neatui/css": "^3.10.5",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

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,11 +93,13 @@
     }
   };
 
+  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 };
     delete _query[props.queryName];
     router.push({ path: route.path, query: _query });
@@ -242,9 +244,6 @@
         flex-direction: row !important;
       }
 
-      &[am-view-item~='list'] {
-        display: flex;
-      }
       &[am-view-item~='item'] {
         position: absolute;
         top: 0;
@@ -333,9 +332,6 @@
         flex-direction: row !important;
       }
 
-      &[am-view-item~='list'] {
-        display: flex;
-      }
       &[am-view-item~='item'] {
         position: fixed;
         flex-direction: column;
@@ -372,4 +368,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/tools/Pagination@a.vue

@@ -109,7 +109,7 @@
 </template>
 
 <script setup lang="ts">
-  import { reactive, computed, watch } from 'vue';
+  import { reactive, computed } from 'vue';
   import { useRoute } from 'vue-router';
 
   interface ModelValueProps {
@@ -152,11 +152,37 @@
   });
 
   const emits = defineEmits(['update:modelValue', 'page', 'size']);
+  // Auto-detect common pagination keys when `defined` is omitted.
+  const defined = computed<DefinedProps>(() => {
+    const result: DefinedProps = { ...(props.defined || {}) };
+    const ensureKey = (field: keyof DefinedProps, candidates: string[], sources: Array<Record<string, any>>) => {
+      if (result[field]) {
+        return;
+      }
+      for (const key of candidates) {
+        if (sources.some((source) => source && Object.prototype.hasOwnProperty.call(source, key))) {
+          result[field] = key;
+          return;
+        }
+      }
+      result[field] = candidates[0];
+    };
+
+    ensureKey('page', ['page', 'current', 'currentPage'], [props.modelValue, props.data]);
+    ensureKey('totalPages', ['totalPages', 'pages', 'toastPages', 'totalPage'], [props.data]);
+    ensureKey('total', ['total', 'totalCount'], [props.data]);
+    ensureKey('pageSize', ['pageSize', 'size', 'page_size'], [props.modelValue, props.data]);
+
+    return result;
+  });
+
   const state: any = reactive({
     id: computed(() => (props.id || 'PAGINATION' + route.path?.replace(/\//g, '_')).toUpperCase()),
     showTotal: true,
     list: computed(() => {
-      const _page = Number(props.data[props.defined.page || 'page'] || 1);
+      const pageKey = defined.value.page || 'page';
+      const totalPagesKey = defined.value.totalPages || 'totalPages';
+      const _page = Number(props.data[pageKey] || 1);
       const list = [_page];
       if (_page > 1) {
         list.unshift(_page - 1);
@@ -166,7 +192,7 @@
       }
       const _max = 5 - list.length;
       for (let i = 1; i <= _max; i++) {
-        if (_page + i <= props.data[props.defined.totalPages || 'totalPages']) {
+        if (_page + i <= props.data[totalPagesKey]) {
           list.push(_page + i);
         }
       }
@@ -179,8 +205,9 @@
       return list;
     }),
     lists: computed(() => {
+      const totalPagesKey = defined.value.totalPages || 'totalPages';
       const _lists: any = [];
-      for (let i = 1; i <= props.data[props.defined.totalPages || 'totalPages']; i++) {
+      for (let i = 1; i <= props.data[totalPagesKey]; i++) {
         _lists.push(i);
       }
       return _lists;
@@ -188,27 +215,32 @@
   });
 
   const prev = () => {
-    const _page = Number(props.data[props.defined.page || 'page']) - 1 < 1 ? 1 : Number(props.data[props.defined.page || 'page']) - 1;
-    emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.page || 'page']: _page } });
+    const pageKey = defined.value.page || 'page';
+    const _page = Number(props.data[pageKey]) - 1 < 1 ? 1 : Number(props.data[pageKey]) - 1;
+    emits('update:modelValue', { ...props.modelValue, ...{ [pageKey]: _page } });
     emits('page', _page);
   };
 
   const next = () => {
+    const pageKey = defined.value.page || 'page';
+    const totalPagesKey = defined.value.totalPages || 'totalPages';
     const _page =
-      Number(props.data[props.defined.page || 'page']) + 1 > props.data[props.defined.totalPages || 'totalPages']
-        ? props.data[props.defined.totalPages || 'totalPages']
-        : Number(props.data[props.defined.page || 'page']) + 1;
-    emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.page || 'page']: _page } });
+      Number(props.data[pageKey]) + 1 > props.data[totalPagesKey]
+        ? props.data[totalPagesKey]
+        : Number(props.data[pageKey]) + 1;
+    emits('update:modelValue', { ...props.modelValue, ...{ [pageKey]: _page } });
     emits('page', _page);
   };
 
   const page = (idx: any) => {
-    emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.page || 'page']: idx } });
+    const pageKey = defined.value.page || 'page';
+    emits('update:modelValue', { ...props.modelValue, ...{ [pageKey]: idx } });
     emits('page', idx);
   };
 
   const size = (size: any) => {
-    emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.pageSize || 'pageSize']: size } });
+    const pageSizeKey = defined.value.pageSize || 'pageSize';
+    emits('update:modelValue', { ...props.modelValue, ...{ [pageSizeKey]: size } });
     emits('size', size);
     window.localStorage.setItem(state.id, `${size}`);
   };

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

@@ -127,7 +127,6 @@
 <script setup lang="ts">
   import { reactive, computed } from 'vue';
   import { useRoute } from 'vue-router';
-  import { Input } from '../form';
 
   const route: any = useRoute();