various-ui/es/components/pagination/default/src/composable.mjs

This is a test version of the Vue 3 component library

import { computed } from 'vue';
import '../../../../utils/index.mjs';
import { isNumber } from 'lodash-es';

const useComposable = (define, emits) => {
  const computeds = {
    //* 分页的总数
    total: computed(() => Math.ceil(define.count / define.limit)),
    //* 统计信息
    info: computed(() => {
      if (define.count) {
        const start = (define.modelValue - 1) * define.limit + 1;
        const end = define.modelValue * define.limit;
        return `Items: ${start} to ${end > define.count ? define.count : end} of ${define.count}`;
      } else {
        return "";
      }
    }),
    //* 分页控制器
    controls: computed(() => {
      const result = [];
      if (define.skip <= 0) {
        const config = {
          start: Math.max(define.modelValue - 4, 1),
          end: Math.min(define.modelValue + 4, computeds.total.value)
        };
        config.end = Math.min(config.end + Math.max(4 - (define.modelValue - config.start), 0), computeds.total.value);
        config.start = Math.max(config.start - Math.max(9 - (config.end - config.start + 1), 0), 1);
        for (let i = config.start; i <= config.end; i++) {
          result.push({ type: "item", value: i, active: i == define.modelValue });
        }
      } else if (computeds.total.value <= 9) {
        for (let i = 1; i <= computeds.total.value; i++) {
          result.push({ type: "item", value: i, active: i == define.modelValue });
        }
      } else {
        if (define.modelValue <= 5) {
          for (let i = 1; i <= 6; i++) {
            result.push({ type: "item", value: i, active: i == define.modelValue });
          }
          result.push({ type: "skip", value: 1, active: false });
          result.push({ type: "item", value: computeds.total.value - 1, active: computeds.total.value - 1 == define.modelValue });
          result.push({ type: "item", value: computeds.total.value, active: computeds.total.value == define.modelValue });
        } else if (define.modelValue >= computeds.total.value - 3) {
          result.push({ type: "item", value: 1, active: 1 == define.modelValue });
          result.push({ type: "item", value: 2, active: 2 == define.modelValue });
          result.push({ type: "skip", value: -1, active: false });
          for (let i = computeds.total.value - 5; i <= computeds.total.value; i++) {
            result.push({ type: "item", value: i, active: i == define.modelValue });
          }
        } else {
          result.push({ type: "item", value: 1, active: 1 == define.modelValue });
          result.push({ type: "item", value: 2, active: 2 == define.modelValue });
          result.push({ type: "skip", value: -1, active: false });
          for (let i = define.modelValue - 1; i <= define.modelValue + 1; i++) {
            result.push({ type: "item", value: i, active: i == define.modelValue });
          }
          result.push({ type: "skip", value: 1, active: false });
          result.push({ type: "item", value: computeds.total.value - 1, active: computeds.total.value - 1 == define.modelValue });
          result.push({ type: "item", value: computeds.total.value, active: computeds.total.value == define.modelValue });
        }
      }
      return result;
    })
  };
  const methods = {
    //* 切换分页
    switchNumber: (_number) => {
      if (!isNumber(_number) || _number == define.modelValue) return;
      if (_number <= 0) {
        emits("update:modelValue", 1);
        emits("change", 1);
      } else if (_number > computeds.total.value) {
        emits("update:modelValue", computeds.total.value);
        emits("change", computeds.total.value);
      } else {
        emits("update:modelValue", _number);
        emits("change", _number);
      }
    },
    //* 下一页
    next: () => {
      if (define.modelValue >= computeds.total.value) return;
      else {
        methods.switchNumber(define.modelValue + 1);
      }
    },
    //* 上一页
    back: () => {
      if (define.modelValue <= 1) return;
      else {
        methods.switchNumber(define.modelValue - 1);
      }
    }
  };
  return { computeds, methods };
};

export { useComposable };
//# sourceMappingURL=composable.mjs.map