birdpaper-ui/es/pagination/src/hook.js

一个通用的 vue3 UI组件库。A common vue3 UI component library.

import { ref, watchEffect, computed } from "vue";
import _sfc_main from "./components/prev.vue.js";
import _sfc_main$1 from "./components/next.vue.js";
import _sfc_main$2 from "./components/total.vue.js";
import _sfc_main$3 from "./components/pager.vue.js";
import _sfc_main$4 from "./components/jumper.vue.js";
import _sfc_main$5 from "./components/sizes.vue.js";
import { warn } from "../../utils/util.js";
const usePagination = (props, emits) => {
  const layoutMap = { prev: _sfc_main, next: _sfc_main$1, total: _sfc_main$2, pager: _sfc_main$3, jumper: _sfc_main$4, sizes: _sfc_main$5 };
  const currentPage = ref(props.current || 1);
  const currentPageSize = ref(props.pageSize);
  const totalPagesNum = ref(0);
  const setPage = (type, pageNum) => {
    let num = currentPage.value;
    type === "prev" ? num-- : type === "next" ? num++ : num = pageNum ?? 1;
    currentPage.value = num < 1 ? 1 : num > totalPagesNum.value ? totalPagesNum.value : num;
    return currentPage.value;
  };
  const sizeSizes = (pageSizes) => {
    currentPageSize.value = pageSizes;
    return currentPageSize.value;
  };
  watchEffect(() => {
    totalPagesNum.value = Math.ceil(props.total / currentPageSize.value);
    if (currentPage.value > totalPagesNum.value) {
      setPage("page", totalPagesNum.value);
    }
  });
  const totalComponents = computed(() => {
    return {
      bind: {
        value: props.total,
        tmpString: props.totalTmpString
      }
    };
  });
  const prevComponents = computed(() => {
    return {
      bind: {
        text: props.prevText,
        disabled: currentPage.value === 1
      },
      eventName: "click",
      event: () => {
        const pages = setPage("prev");
        emits("update:current", pages);
        emits("page-change", pages);
      }
    };
  });
  const pagerComponents = computed(() => {
    return {
      bind: {
        pages: totalPagesNum.value,
        maxPager: props.maxPager,
        currentPage: currentPage.value
      },
      eventName: "click",
      event: (page) => {
        const pages = setPage("page", page);
        emits("update:current", pages);
        emits("page-change", pages);
      }
    };
  });
  const jumperComponents = computed(() => {
    return {
      bind: {
        pages: totalPagesNum.value,
        currentPage: currentPage.value,
        tmpString: props.jumperTmpString
      },
      eventName: "change",
      event: (page) => {
        const pages = setPage("page", page);
        emits("update:current", pages);
        emits("page-change", pages);
      }
    };
  });
  const nextComponents = computed(() => {
    return {
      bind: {
        text: props.nextText,
        disabled: currentPage.value === totalPagesNum.value
      },
      eventName: "click",
      event: () => {
        const pages = setPage("next");
        emits("update:current", pages);
        emits("page-change", pages);
      }
    };
  });
  const sizesComponents = computed(() => {
    return {
      bind: {
        currentSize: currentPageSize.value,
        sizesList: props.sizesList,
        tmpString: props.sizesTmpString
      },
      eventName: "change",
      event: (size) => {
        const sizes2 = sizeSizes(size);
        emits("update:pageSize", sizes2);
        emits("size-change", sizes2);
      }
    };
  });
  const componentsList = computed(() => {
    try {
      const layoutList = props.layout.replace(/\s*/g, "").split(",") || [];
      if (layoutList.length === 0)
        return [];
      const components = [];
      const componentMap = {
        total: totalComponents.value,
        prev: prevComponents.value,
        next: nextComponents.value,
        pager: pagerComponents.value,
        jumper: jumperComponents.value,
        sizes: sizesComponents.value
      };
      layoutList.map((name) => {
        components.push({ name, component: layoutMap[name], ...componentMap[name] });
      });
      return components;
    } catch (error) {
      warn("Pagination", "Render componentsList failure");
    }
  });
  return {
    componentsList
  };
};
export {
  usePagination
};