@neatui/vue 2.17.3 → 3.0.0

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

@@ -2,8 +2,8 @@
   <div ui-pagination="@a" class="w-full pading" ui-flex="row rm">
     <div class="ml-sl ar mob-ac" ui-flex="row rm">
       <div class="mx-ss-sub" ui-flex="row">
-        <div v-if="state.showTotal" ui-flex="row cm" ui-hide="<pad">共 {{ data[defined.total || 'total'] || 0 }} 条</div>
-        <button :ui-btn="`@a s read :border :square ${data[defined.page || 'page'] > 1 ? '' : ':disabled'}`" @click="prev">
+        <div v-if="state.showTotal" ui-flex="row cm" ui-hide="<pad">共 {{ total }} 条</div>
+        <button :ui-btn="`@a s read :border :square ${currentPage > 1 ? '' : ':disabled'}`" :disabled="currentPage <= 1" @click="prev">
           <svg
             style="width: 1em; height: 1em"
             t="1701228540398"
@@ -23,7 +23,7 @@
         </button>
         <div ui-tips="@a co:well ux:hover">
           <div ui-btn="@a s read :border">
-            <code>{{ data[defined.page || 'page'] || 0 }}/{{ data[defined.totalPages || 'totalPages'] || 0 }}</code>
+            <code>{{ displayPage }}/{{ totalPages }}</code>
             <svg
               style="width: 1em; height: 1em"
               t="1701229420486"
@@ -45,7 +45,7 @@
             <div class="w-mm max-h-ls" ui-scroll=":y s">
               <ul class="n-sl n-ss-sub dib-sub">
                 <li v-for="item in state.lists" :key="item">
-                  <button :ui-btn="`@a s ${item === data[defined.page || 'page'] ? 'main' : 'read :border'}`" @click="page(item)">
+                  <button :ui-btn="`@a s ${item === currentPage ? 'main' : 'read :border'}`" @click="page(item)">
                     <code>{{ item }}</code>
                   </button>
                 </li>
@@ -53,7 +53,11 @@
             </div>
           </div>
         </div>
-        <button :ui-btn="`@a s read :border :square ${data[defined.page || 'page'] < data[defined.totalPages || 'totalPages'] ? '' : ':disabled'}`" @click="next">
+        <button
+          :ui-btn="`@a s read :border :square ${currentPage < totalPages ? '' : ':disabled'}`"
+          :disabled="currentPage >= totalPages"
+          @click="next"
+        >
           <svg style="width: 1em; height: 1em" class="icon co-read" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2426" width="64" height="64">
             <path
               d="M341.63640988 781.41564784c20.63742578 21.22981847 54.12571728 21.22981847 74.81456101 0l265.95100164-273.75421824c20.62728703-21.26747667 20.62728703-55.75008988 0-76.97556317l-265.95100164-273.74407946c-20.68449855-21.26747667-54.17423844-21.26747667-74.81456101 0-20.67291141 21.23706043-20.67291142 55.71170748 0 76.98497771l228.55639458 235.24869384-228.55567038 235.22117436c-20.67218722 21.26747667-20.67146302 55.74357212 0 77.02263594l0 0z"
@@ -94,10 +98,9 @@
               <li>
                 <h6 class="fs-xs o-mm nowrap">每页显示数量</h6>
                 <ul>
-                  <li @click="size(10)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 10 ? 'co-main' : ''}`">10条/页</code></li>
-                  <li @click="size(20)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 20 ? 'co-main' : ''}`">20条/页</code></li>
-                  <li @click="size(50)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 50 ? 'co-main' : ''}`">50条/页</code></li>
-                  <li @click="size(100)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 100 ? 'co-main' : ''}`">100条/页</code></li>
+                  <li v-for="item in pageSizeOptions" :key="item" @click="size(item)" class="ux-hover r-sm">
+                    <code :class="`${pageSize === item ? 'co-main' : ''}`">{{ item }}条/页</code>
+                  </li>
                 </ul>
               </li>
             </ul>
@@ -111,6 +114,7 @@
 <script setup lang="ts">
   import { reactive, computed } from 'vue';
   import { useRoute } from 'vue-router';
+  import { env } from '@fekit/utils';
 
   interface ModelValueProps {
     pageSize?: number;
@@ -141,6 +145,8 @@
     modelValue: ModelValueProps;
     data: DataProps;
     defined?: DefinedProps;
+    pageSizes?: number[];
+    pageSizeOptions?: number[];
   }
 
   const route: any = useRoute();
@@ -149,9 +155,16 @@
     modelValue: () => ({}),
     data: () => ({}),
     defined: () => ({}),
+    pageSizes: () => [],
+    pageSizeOptions: () => [10, 20, 50, 100],
   });
 
   const emits = defineEmits(['update:modelValue', 'page', 'size']);
+  const toNumber = (value: any, fallback = 0) => {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : fallback;
+  };
+
   // Auto-detect common pagination keys when `defined` is omitted.
   const defined = computed<DefinedProps>(() => {
     const result: DefinedProps = { ...(props.defined || {}) };
@@ -175,14 +188,48 @@
 
     return result;
   });
+  const fields = computed(() => ({
+    page: defined.value.page || 'page',
+    totalPages: defined.value.totalPages || 'totalPages',
+    total: defined.value.total || 'total',
+    pageSize: defined.value.pageSize || 'pageSize',
+  }));
+
+  const totalPages = computed(() => Math.max(0, Math.floor(toNumber(props.data[fields.value.totalPages], 0))));
+  const total = computed(() => Math.max(0, Math.floor(toNumber(props.data[fields.value.total], 0))));
+  const currentPage = computed(() => {
+    const page = Math.max(1, Math.floor(toNumber(props.data[fields.value.page] ?? props.modelValue[fields.value.page], 1)));
+    return totalPages.value > 0 ? Math.min(page, totalPages.value) : 1;
+  });
+  const displayPage = computed(() => (totalPages.value > 0 ? currentPage.value : 0));
+  const pageSize = computed(() => Math.max(0, Math.floor(toNumber(props.modelValue[fields.value.pageSize] ?? props.data[fields.value.pageSize], 0))));
+  const pageSizeOptions = computed(() => {
+    const options = Array.isArray(props.pageSizes) && props.pageSizes.length ? props.pageSizes : props.pageSizeOptions;
+    return options.filter((item: any) => Number.isFinite(Number(item)) && Number(item) > 0).map((item: any) => Number(item));
+  });
+
+  const normalizePage = (value: any) => {
+    const page = Math.max(1, Math.floor(toNumber(value, currentPage.value)));
+    return totalPages.value > 0 ? Math.min(page, totalPages.value) : page;
+  };
+
+  const emitPage = (value: any) => {
+    if (totalPages.value <= 0) {
+      return;
+    }
+    const nextPage = normalizePage(value);
+    emits('update:modelValue', { ...props.modelValue, [fields.value.page]: nextPage });
+    emits('page', nextPage);
+  };
 
   const state: any = reactive({
     id: computed(() => (props.id || 'PAGINATION' + route.path?.replace(/\//g, '_')).toUpperCase()),
     showTotal: true,
     list: computed(() => {
-      const pageKey = defined.value.page || 'page';
-      const totalPagesKey = defined.value.totalPages || 'totalPages';
-      const _page = Number(props.data[pageKey] || 1);
+      if (totalPages.value <= 0) {
+        return [];
+      }
+      const _page = currentPage.value;
       const list = [_page];
       if (_page > 1) {
         list.unshift(_page - 1);
@@ -192,7 +239,7 @@
       }
       const _max = 5 - list.length;
       for (let i = 1; i <= _max; i++) {
-        if (_page + i <= props.data[totalPagesKey]) {
+        if (_page + i <= totalPages.value) {
           list.push(_page + i);
         }
       }
@@ -205,9 +252,8 @@
       return list;
     }),
     lists: computed(() => {
-      const totalPagesKey = defined.value.totalPages || 'totalPages';
       const _lists: any = [];
-      for (let i = 1; i <= props.data[totalPagesKey]; i++) {
+      for (let i = 1; i <= totalPages.value; i++) {
         _lists.push(i);
       }
       return _lists;
@@ -215,39 +261,29 @@
   });
 
   const prev = () => {
-    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);
+    emitPage(currentPage.value - 1);
   };
 
   const next = () => {
-    const pageKey = defined.value.page || 'page';
-    const totalPagesKey = defined.value.totalPages || 'totalPages';
-    const _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);
+    emitPage(currentPage.value + 1);
   };
 
   const page = (idx: any) => {
-    const pageKey = defined.value.page || 'page';
-    emits('update:modelValue', { ...props.modelValue, ...{ [pageKey]: idx } });
-    emits('page', idx);
+    emitPage(idx);
   };
 
-  const size = (size: any) => {
-    const pageSizeKey = defined.value.pageSize || 'pageSize';
-    emits('update:modelValue', { ...props.modelValue, ...{ [pageSizeKey]: size } });
-    emits('size', size);
-    window.localStorage.setItem(state.id, `${size}`);
+  const size = (value: any) => {
+    const nextSize = Math.max(1, Math.floor(toNumber(value, pageSize.value || 10)));
+    emits('update:modelValue', { ...props.modelValue, [fields.value.pageSize]: nextSize });
+    emits('size', nextSize);
+    if (env.client) window.localStorage.setItem(state.id, `${nextSize}`);
   };
 
   // 缓存
-  const cache = window.localStorage.getItem(state.id);
-  if (cache) {
-    size(Number(cache));
+  if (env.client) {
+    const cache = window.localStorage.getItem(state.id);
+    if (cache) {
+      size(Number(cache));
+    }
   }
 </script>

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

@@ -127,6 +127,7 @@
 <script setup lang="ts">
   import { reactive, computed } from 'vue';
   import { useRoute } from 'vue-router';
+  import { env } from '@fekit/utils';
 
   const route: any = useRoute();
 
@@ -215,6 +216,6 @@
   const size = (size: any) => {
     emits('update:modelValue', { ...props.modelValue, ...{ pageSize: size } });
     emits('size', size);
-    window.localStorage.setItem(state.id, `${size}`);
+    if (env.client) window.localStorage.setItem(state.id, `${size}`);
   };
 </script>

package/src/store/frame.ts

@@ -1,14 +1,22 @@
 import { defineStore } from 'pinia';
+import { env } from '@fekit/utils';
+
+const getStorageItem = (key: string) => (env.client ? window.localStorage.getItem(key) : null);
+const setStorageItem = (key: string, value: string) => {
+  if (env.client) {
+    window.localStorage.setItem(key, value);
+  }
+};
 
 // 基础数据
 export const useFrameStore = defineStore('frame', {
   state: () => {
     return {
-      full: localStorage.getItem('neatui_full') || 0,
+      full: getStorageItem('neatui_full') || 0,
       // 字号
-      size: localStorage.getItem('neatui_size') || document?.documentElement?.getAttribute('size') || 'm',
+      size: getStorageItem('neatui_size') || (env.client ? document.documentElement.getAttribute('size') : null) || 'm',
       // 主题
-      theme: localStorage.getItem('neatui_theme') || document?.documentElement?.getAttribute('theme') || 'auto',
+      theme: getStorageItem('neatui_theme') || (env.client ? document.documentElement.getAttribute('theme') : null) || 'auto',
       // 侧边
       side: 1,
     };
@@ -19,30 +27,30 @@ export const useFrameStore = defineStore('frame', {
     async setfull(then = (res: any) => {}) {
       const full = this.full ? 0 : 1;
       this.full = full;
-      localStorage.setItem('neatui_full', `${full}`);
+      setStorageItem('neatui_full', `${full}`);
       then(full);
     },
     // 设置系统主题
     async settheme(theme: any = '', then = (res: any) => {}) {
       if (theme) {
-        localStorage.setItem('neatui_theme', theme);
+        setStorageItem('neatui_theme', theme);
         this.theme = theme;
-        document.documentElement.setAttribute('theme', theme);
+        if (env.client) document.documentElement.setAttribute('theme', theme);
         then(theme);
       } else {
-        document.documentElement.setAttribute('theme', this.theme);
+        if (env.client) document.documentElement.setAttribute('theme', this.theme);
         then(this.theme);
       }
     },
     // 设置系统字号
     async setsize(size: any = '', then = (res: any) => {}) {
       if (size) {
-        localStorage.setItem('neatui_size', size);
+        setStorageItem('neatui_size', size);
         this.size = size;
-        document.documentElement.setAttribute('size', size);
+        if (env.client) document.documentElement.setAttribute('size', size);
         then(size);
       } else {
-        document.documentElement.setAttribute('size', this.size);
+        if (env.client) document.documentElement.setAttribute('size', this.size);
         then(this.size);
       }
     },

package/src/utils/theme.ts

@@ -1,5 +1,8 @@
+import { env } from '@fekit/utils';
+
 // 主题
 export const theme = (then: (theme: string) => void = () => {}) => {
+  if (!env.client) return;
   // 自动设置主题
   const auto = (scheme: any) => {
     const _theme = window.localStorage.getItem('theme') || (scheme.matches ? 'dark' : 'light');

package/src/components/basic/follow.ts

@@ -1,133 +0,0 @@
-import ResizeObserver from 'resize-observer-polyfill';
-import raf from 'raf';
-
-class Follow {
-  box: any[];
-  dom: any;
-  tip: any;
-  ing: any;
-  sub: any;
-  obs: any;
-  fun: (status: any) => void;
-  private css: () => void;
-  z: number;
-  constructor(dom: any, tip: any, fun = (_status: any) => {}) {
-    this.dom = dom;
-    this.tip = tip;
-    this.box = [];
-    this.css = this.setcss.bind(this);
-    this.fun = fun;
-    this.sub = this.tip.firstElementChild;
-    this.z = 0;
-  }
-  setcss() {
-    if (!this.ing) {
-      raf(() => {
-        this.ing = false;
-        const dr = this.dom?.getBoundingClientRect() || { width: 0, height: 0, top: 0, bottom: 0, left: 0, right: 0 };
-        const sr = this.sub?.getBoundingClientRect() || { height: 0 };
-        this.tip.style.inset = `${dr.top}px auto auto ${dr.left}px`;
-        this.tip.style.width = dr.width + 'px';
-        this.tip.style.height = dr.height + 'px';
-        this.fun('');
-        this.box.forEach((e: any) => {
-          const _ar = { top: 0, bottom: window.innerHeight, left: 0, right: window.innerWidth };
-          const ar = e === window ? _ar : e?.getBoundingClientRect() || _ar;
-          if (dr.bottom < ar.top || dr.top > ar.bottom || dr.right < ar.left || dr.left > ar.right) {
-            this.tip.style.opacity = '0';
-            this.sub.style.pointerEvents = 'none';
-          } else {
-            this.tip.style.opacity = '';
-            this.sub.style.pointerEvents = '';
-          }
-          if (dr.bottom + sr.height + 10 > ar.bottom) {
-            this.fun('b');
-          }
-        });
-        const tr = this.tip?.getBoundingClientRect() || { left: 0 };
-        const x = this.sub.offsetLeft + tr.left;
-        const arrow = this.sub.querySelector('[ui-tips-arrow]');
-        if (x < 0) {
-          this.sub.style.transform = `translate3d(${-x}px,0,0)`;
-          if (arrow && arrow.style) {
-            arrow.style.transform = `translateX(${x}px) rotate(45deg)`;
-          }
-        } else {
-          this.sub.style.transform = '';
-          if (arrow && arrow.style) {
-            arrow.style.transform = '';
-          }
-        }
-      });
-      this.ing = true;
-    }
-  }
-  listen() {
-    // 向上查询有滚动条的元素
-    const _find = (e: any) => {
-      // 判断是否为DOM节点
-      if (e) {
-        if (e.nodeType === 1) {
-          const css: any = window.getComputedStyle(e);
-          // 查询所有父组节点的最高层级
-          if (!isNaN(css.zIndex) && css.zIndex >= this.z) {
-            this.z = Number(css.zIndex) + 10;
-          } else {
-            this.z += 1;
-          }
-          // 节点是否有滚动条
-          if (
-            (css.overflowY === 'auto' || css.overflowY === 'scroll' || css.overflowX === 'auto' || css.overflowX === 'scroll') &&
-            (e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth)
-          ) {
-            this.box.push(e);
-          }
-          _find(e.parentNode);
-        } else if (e.nodeType === 9) {
-          console.log(42, e, e.nodeType);
-          this.box.push(window);
-        }
-      }
-    };
-    _find(this.dom);
-
-    // 自动层级
-    if (window.getComputedStyle(this.tip).zIndex) {
-      this.tip.style.zIndex = `${this.z}`;
-    }
-
-    this.css();
-    // 监听窗口尺寸变化
-    window.addEventListener('resize', this.css);
-    window.addEventListener('click', this.css);
-    // 监听滚动条的元素
-    this.box.forEach((e: any) => {
-      e.addEventListener('scroll', this.css);
-    });
-    // 监听移入事件
-    this.dom?.addEventListener('mouseenter', this.css);
-    // 监听参考元素变化
-    this.obs = new ResizeObserver(this.css);
-    if (this.dom) {
-      this.obs?.observe(this.dom);
-    }
-    if (this.sub) {
-      this.obs?.observe(this.sub);
-    }
-  }
-  remove() {
-    // console.log('移除监听');
-    // 清除窗口尺寸变化事件监听器
-    window.removeEventListener('resize', this.css);
-    window.removeEventListener('click', this.css);
-    // 清除滚动条元素的事件监听器
-    this.box.forEach((e: any) => {
-      e.removeEventListener('scroll', this.css);
-    });
-    // 清除鼠标移入事件监听器
-    this.dom?.removeEventListener('mouseenter', this.css);
-    // 清除监听参考元素变化
-    this.obs?.disconnect();
-  }
-}
-export default Follow;