tanxin-ui 0.2.0

package/es/pagination/src/pagination.d.ts

@@ -0,0 +1,270 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+declare const paginationProps: {
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    current: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    showPageSize: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showPageTo: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    pageSize: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    maxButtonCount: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    pageSizeList: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    defaultPageSize: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    total: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    vertical: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showBorder: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    colorful: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    gapless: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    simple: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    hideOnSinglePage: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showTotal: PropType<boolean | ((total: number) => void)>;
+    gutter: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+};
+export declare type PaginationProps = Partial<ExtractPropTypes<typeof paginationProps>>;
+declare const _default: import("vue").DefineComponent<{
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    current: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    showPageSize: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showPageTo: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    pageSize: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    maxButtonCount: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    pageSizeList: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    defaultPageSize: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    total: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    vertical: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showBorder: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    colorful: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    gapless: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    simple: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    hideOnSinglePage: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showTotal: PropType<boolean | ((total: number) => void)>;
+    gutter: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+}, {
+    render: () => JSX.Element;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "pageSizeChange" | "update:current" | "update:page-size")[], "change" | "pageSizeChange" | "update:current" | "update:page-size", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    current: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    showPageSize: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showPageTo: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    pageSize: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    maxButtonCount: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    pageSizeList: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    defaultPageSize: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    total: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    vertical: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showBorder: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    colorful: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    gapless: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    simple: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    hideOnSinglePage: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showTotal: PropType<boolean | ((total: number) => void)>;
+    gutter: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+    onPageSizeChange?: (...args: any[]) => any;
+    "onUpdate:current"?: (...args: any[]) => any;
+    "onUpdate:page-size"?: (...args: any[]) => any;
+}, {
+    disabled: boolean;
+    size: string;
+    vertical: boolean;
+    showBorder: boolean;
+    gutter: string | number;
+    colorful: boolean;
+    current: number;
+    showPageSize: boolean;
+    showPageTo: boolean;
+    pageSize: number;
+    maxButtonCount: number;
+    pageSizeList: number[];
+    defaultPageSize: number;
+    total: number;
+    gapless: boolean;
+    simple: boolean;
+    hideOnSinglePage: boolean;
+}>;
+export default _default;

package/es/pagination/src/pagination.js

@@ -0,0 +1,350 @@
+import { defineComponent, ref, computed, createVNode, resolveComponent, createTextVNode, isVNode, watch } from "vue";
+import { useConfig } from "../../utils/hooks/useConfig.js";
+import { PropTypes, isFunction } from "../../utils/type.js";
+import "../../utils/components/icons/Checkmark.js";
+import "../../utils/components/icons/CheckmarkCircle.js";
+import "../../utils/components/icons/CheckmarkSharp.js";
+import "../../utils/components/icons/CheckmarkCircleOutline.js";
+import "../../utils/components/icons/AlertCircle.js";
+import "../../utils/components/icons/AlertCircleOutline.js";
+import "../../utils/components/icons/InformationCircle.js";
+import "../../utils/components/icons/InformationCircleOutline.js";
+import "../../utils/components/icons/CloseCircle.js";
+import "../../utils/components/icons/CloseCircleOutline.js";
+import "../../utils/components/icons/HelpCircleSharp.js";
+import "../../utils/components/icons/EyeOffOutline.js";
+import "../../utils/components/icons/EyeOutline.js";
+import "../../utils/components/icons/LoadingOutlined.js";
+import "../../utils/components/icons/Close.js";
+import "../../utils/components/icons/CloseOutline.js";
+import "../../utils/components/icons/ArrowsMaximize.js";
+import "../../utils/components/icons/ArrowsMinimize.js";
+import "../../utils/components/icons/AddOutline.js";
+import "../../utils/components/icons/RemoveOutline.js";
+import "../../utils/components/icons/ChevronUp.js";
+import "../../utils/components/icons/ChevronDown.js";
+import "../../utils/components/icons/ChevronForward.js";
+import ChevronLeft24Filled from "../../utils/components/icons/ChevronLeft24Filled.js";
+import ChevronRight24Filled from "../../utils/components/icons/ChevronRight24Filled.js";
+import ChevronDoubleLeft16Filled from "../../utils/components/icons/ChevronDoubleLeft16Filled.js";
+import ChevronDoubleRight16Filled from "../../utils/components/icons/ChevronDoubleRight16Filled.js";
+import "../../utils/components/icons/CheckmarkOutline.js";
+import "../../utils/components/icons/IosCheckmark.js";
+import "../../utils/components/icons/Empty.js";
+import "../../utils/components/icons/Bars.js";
+import "../../utils/components/icons/ArrowUpCircle.js";
+import "../../utils/components/icons/ArrowUp.js";
+import "../../utils/components/icons/ArrowForward.js";
+import "../../utils/components/icons/TimeOutline.js";
+import "../../utils/components/icons/CalendarClearOutline.js";
+import "../../utils/components/icons/KeyboardArrowLeftRound.js";
+import "../../utils/components/icons/KeyboardArrowRightRound.js";
+import "../../utils/components/icons/KeyboardDoubleArrowLeftRound.js";
+import "../../utils/components/icons/KeyboardDoubleArrowRightRound.js";
+import "../../utils/components/icons/MenuFoldOutlined.js";
+import "../../utils/components/icons/IosArrowDown.js";
+import "../../utils/components/icons/IosArrowBack.js";
+import "../../utils/components/icons/IosArrowForward.js";
+import "../../utils/components/icons/ImageSharp.js";
+import "../../utils/components/icons/Pause.js";
+import "../../utils/components/icons/Refresh.js";
+import "../../utils/components/icons/QuestionCircle24Regular.js";
+import "../../utils/components/icons/CloudUploadOutline.js";
+import "../../utils/components/icons/UploadFileFilled.js";
+import EllipsisHorizontal from "../../utils/components/icons/EllipsisHorizontal.js";
+import ArrowNext24Filled from "../../utils/components/icons/ArrowNext24Filled.js";
+import ArrowPrevious24Filled from "../../utils/components/icons/ArrowPrevious24Filled.js";
+import "../../utils/components/icons/ArrowDropDownSharp.js";
+import "../../utils/components/icons/ArrowDropUpSharp.js";
+import "../../utils/components/icons/ArrowForwardIosFilled.js";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const paginationProps = {
+  size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"]).def("md"),
+  current: PropTypes.number.def(1),
+  showPageSize: PropTypes.bool.def(false),
+  showPageTo: PropTypes.bool.def(false),
+  pageSize: PropTypes.number,
+  maxButtonCount: PropTypes.number.def(7),
+  pageSizeList: {
+    type: Array,
+    default: () => [10, 20, 30, 50, 100]
+  },
+  defaultPageSize: PropTypes.number.def(10),
+  total: PropTypes.number.def(0),
+  vertical: PropTypes.bool.def(false),
+  disabled: PropTypes.bool.def(false),
+  showBorder: PropTypes.bool.def(true),
+  colorful: PropTypes.bool.def(false),
+  gapless: PropTypes.bool.def(false),
+  simple: PropTypes.bool.def(false),
+  hideOnSinglePage: PropTypes.bool.def(false),
+  showTotal: [Boolean, Function],
+  gutter: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(16)
+};
+var Pagination = defineComponent({
+  name: "TPagination",
+  props: paginationProps,
+  emits: ["change", "pageSizeChange", "update:current", "update:page-size"],
+  setup(props, {
+    emit
+  }) {
+    var _a;
+    const {
+      prefixCls
+    } = useConfig("pagination", props);
+    const pageSize = ref((_a = props.pageSize) != null ? _a : props.defaultPageSize);
+    const currentPage = ref(props.current);
+    const pageCount = computed(() => {
+      return Math.ceil(props.total / pageSize.value);
+    });
+    const classes = computed(() => {
+      return [[`${prefixCls.value}`], {
+        [`is-disabled`]: props.disabled,
+        [`size-${props.size}`]: props.size,
+        [`is-bordered`]: props.showBorder,
+        [`is-colorful`]: props.colorful,
+        [`is-gapless`]: props.gapless,
+        [`is-simple`]: props.simple
+      }];
+    });
+    const styles = computed(() => {
+      const gutter = {
+        xs: 3,
+        sm: 4,
+        md: 6,
+        lg: 8,
+        xl: 8
+      };
+      return {
+        [`--t-pagination-section-gutter`]: `${gutter[props.size] * 2}px`,
+        [`--t-pagination-gutter`]: `${gutter[props.size]}px`,
+        marginLeft: `-${gutter[props.size] * 2}px`,
+        marginRight: `-${gutter[props.size] * 2}px`
+      };
+    });
+    const handlePageSizeChange = (newSize) => {
+      if (props.disabled)
+        return;
+      pageSize.value = newSize;
+      emit("pageSizeChange", pageSize.value);
+      emit("update:page-size", pageSize.value);
+    };
+    const pageSizeSelection = computed(() => {
+      let _slot;
+      return createVNode(resolveComponent("t-select"), {
+        "class": `${prefixCls.value}-page-size`,
+        "show-checked": false,
+        "clearable": false,
+        "value": pageSize.value,
+        "onChange": handlePageSizeChange,
+        "disabled": props.disabled,
+        "size": props.size
+      }, _isSlot(_slot = props.pageSizeList.map((item) => {
+        return createVNode(resolveComponent("t-select-option"), {
+          "value": item
+        }, {
+          default: () => [item, createTextVNode(" \u6761 / \u9875")]
+        });
+      })) ? _slot : {
+        default: () => [_slot]
+      });
+    });
+    const pageToInputElement = computed(() => {
+      return createVNode(resolveComponent("t-input-number"), {
+        "text-align": "center",
+        "show-button": false,
+        "value": currentPage.value,
+        "onChange": handlePageChange,
+        "placeholder": "",
+        "disabled": props.disabled,
+        "size": props.size,
+        "shadow": false
+      }, null);
+    });
+    const pageToElement = computed(() => {
+      return createVNode("span", {
+        "class": `${prefixCls.value}-page-to`
+      }, [createTextVNode("\u8DF3\u81F3 "), pageToInputElement.value, createTextVNode(" \u9875")]);
+    });
+    const handlePageChange = (pageNum) => {
+      console.log("pagination handlePageChange");
+      if (props.disabled)
+        return;
+      if (!pageNum)
+        return;
+      currentPage.value = Math.max(0, Math.min(pageCount.value, pageNum));
+      currentPage.value = pageNum;
+      console.log("pagination handlePageChange", currentPage.value);
+      emitCurrent();
+    };
+    const emitCurrent = () => {
+      emit("change", currentPage.value);
+      emit("update:current", currentPage.value);
+    };
+    const handleToPage = (num) => {
+      if (props.disabled)
+        return;
+      let newPageNum = currentPage.value + num;
+      if (newPageNum <= 0)
+        currentPage.value = 1;
+      else if (newPageNum > pageCount.value)
+        currentPage.value = pageCount.value;
+      else
+        currentPage.value = newPageNum;
+      emitCurrent();
+    };
+    const handleToPageNum = (num) => {
+      if (props.disabled)
+        return;
+      let newPageNum = num;
+      if (newPageNum <= 0)
+        currentPage.value = 1;
+      else if (newPageNum > pageCount.value)
+        currentPage.value = pageCount.value;
+      else
+        currentPage.value = newPageNum;
+      emitCurrent();
+    };
+    const several = computed(() => props.maxButtonCount - 2);
+    const half = computed(() => (props.maxButtonCount - 1) / 2);
+    const prevPageElement = computed(() => {
+      return createVNode("div", {
+        "class": [`${prefixCls.value}-page`, {
+          [`is-disabled`]: props.disabled || currentPage.value == 1,
+          [`is-square`]: true
+        }],
+        "onClick": () => handleToPage(-1)
+      }, [createVNode(resolveComponent("t-icon"), null, {
+        default: () => [createVNode(ChevronLeft24Filled, null, null)]
+      })]);
+    });
+    const nextPageElement = computed(() => {
+      return createVNode("div", {
+        "class": [`${prefixCls.value}-page`, {
+          [`is-disabled`]: props.disabled || currentPage.value == pageCount.value,
+          [`is-square`]: true
+        }],
+        "onClick": () => handleToPage(1)
+      }, [createVNode(resolveComponent("t-icon"), null, {
+        default: () => [createVNode(ChevronRight24Filled, null, null)]
+      })]);
+    });
+    const firstPageElement = computed(() => {
+      return createVNode("div", {
+        "class": [`${prefixCls.value}-page`, {
+          [`is-disabled`]: props.disabled || currentPage.value == 1
+        }],
+        "onClick": () => handleToPageNum(1)
+      }, [createVNode(resolveComponent("t-icon"), null, {
+        default: () => [createVNode(ArrowPrevious24Filled, null, null)]
+      })]);
+    });
+    const lastPageElement = computed(() => {
+      return createVNode("div", {
+        "class": [`${prefixCls.value}-page`, {
+          [`is-disabled`]: props.disabled || currentPage.value == pageCount.value
+        }],
+        "onClick": () => handleToPageNum(pageCount.value)
+      }, [createVNode(resolveComponent("t-icon"), null, {
+        default: () => [createVNode(ArrowNext24Filled, null, null)]
+      })]);
+    });
+    const hoverName = ref("");
+    const handleHoverChange = (name) => {
+      hoverName.value = name;
+    };
+    const prevPagesElement = computed(() => {
+      return currentPage.value > half.value + 1 && pageCount.value > props.maxButtonCount ? createVNode("div", {
+        "class": [`${prefixCls.value}-page is-several`, {
+          [`is-disabled`]: props.disabled
+        }],
+        "onClick": () => handleToPage(-several.value),
+        "onMouseenter": () => handleHoverChange("left"),
+        "onMouseleave": () => handleHoverChange("")
+      }, [createVNode(resolveComponent("t-icon"), null, {
+        default: () => [hoverName.value == "left" && !props.disabled ? createVNode(ChevronDoubleLeft16Filled, null, null) : createVNode(EllipsisHorizontal, null, null)]
+      })]) : null;
+    });
+    const nextPagesElement = computed(() => {
+      return currentPage.value < pageCount.value - half.value && pageCount.value > props.maxButtonCount ? createVNode("div", {
+        "class": [`${prefixCls.value}-page is-several`, {
+          [`is-disabled`]: props.disabled
+        }],
+        "onClick": () => handleToPage(several.value),
+        "onMouseenter": () => handleHoverChange("right"),
+        "onMouseleave": () => handleHoverChange("")
+      }, [createVNode(resolveComponent("t-icon"), null, {
+        default: () => [hoverName.value == "right" && !props.disabled ? createVNode(ChevronDoubleRight16Filled, null, null) : createVNode(EllipsisHorizontal, null, null)]
+      })]) : null;
+    });
+    const totalElement = computed(() => {
+      const range = [(currentPage.value - 1) * pageSize.value + 1, Math.min(currentPage.value * pageSize.value, props.total)];
+      return createVNode("div", {
+        "class": `${prefixCls.value}-total`
+      }, [isFunction(props.showTotal) ? props.showTotal(props.total, range) : `\u5171 ${props.total} \u6761`]);
+    });
+    const pageCountElement = computed(() => {
+      return createVNode("div", {
+        "class": `${prefixCls.value}-page-count`
+      }, [` / ${pageCount.value} \u9875`]);
+    });
+    const render = () => {
+      const renderPage = (pageNum) => {
+        return createVNode("div", {
+          "class": [`${prefixCls.value}-page`, {
+            [`is-disabled`]: props.disabled,
+            [`is-active`]: currentPage.value == pageNum
+          }],
+          "onClick": () => handlePageChange(pageNum)
+        }, [pageNum]);
+      };
+      const prevPages = ref([]);
+      const renderPrevPages = () => {
+        prevPages.value = [];
+        let fromNum = currentPage.value - half.value + 1;
+        if (currentPage.value > pageCount.value - half.value)
+          fromNum = pageCount.value - several.value;
+        for (let num = fromNum; num <= currentPage.value; num++) {
+          if (num <= 1)
+            continue;
+          if (num >= pageCount.value)
+            break;
+          prevPages.value.push(renderPage(num));
+        }
+        return prevPages.value;
+      };
+      const renderNextPages = () => {
+        const pageNumList = [];
+        for (let num = currentPage.value + 1; num <= currentPage.value + 1 + props.maxButtonCount - prevPages.value.length - 3; num++) {
+          if (num >= pageCount.value)
+            break;
+          pageNumList.push(renderPage(num));
+        }
+        return pageNumList;
+      };
+      const renderSimple = computed(() => {
+        return createVNode("div", {
+          "class": classes.value,
+          "style": styles.value
+        }, [props.showTotal ? totalElement.value : null, firstPageElement.value, prevPageElement.value, pageToInputElement.value, pageCountElement.value, nextPageElement.value, lastPageElement.value, props.showPageSize ? pageSizeSelection.value : null]);
+      });
+      return props.hideOnSinglePage && pageCount.value == 1 ? null : props.simple ? renderSimple.value : createVNode("div", {
+        "class": classes.value,
+        "style": styles.value
+      }, [props.showTotal ? totalElement.value : null, createVNode("div", {
+        "class": `${prefixCls.value}-buttons`
+      }, [prevPageElement.value, renderPage(1), prevPagesElement.value, renderPrevPages(), renderNextPages(), nextPagesElement.value, pageCount.value > 1 ? renderPage(pageCount.value) : null, nextPageElement.value]), props.showPageSize ? pageSizeSelection.value : null, props.showPageTo ? pageToElement.value : null]);
+    };
+    watch(() => props.pageSize, () => pageSize.value = props.pageSize);
+    watch(() => props.current, () => currentPage.value = props.current);
+    return {
+      render
+    };
+  },
+  render() {
+    return this.render();
+  }
+});
+export { Pagination as default };