vxe-pc-ui 4.20.24 → 4.20.26

package/es/pager/src/pager.js

@@ -1,7 +1,7 @@
 import { h, computed, inject, ref, reactive, nextTick, watch } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
 import XEUtils from "xe-utils";
-import { VxeUI } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { createComponentLog } from "../../ui/src/log";
 import VxeSelectComponent from "../../select";
 import VxeNumberInputComponent from "../../number-input";
@@ -86,11 +86,7 @@ var pager_default = defineVxeComponent({
     iconHomePage: String,
     iconEndPage: String
   },
-  emits: [
-    "update:pageSize",
-    "update:currentPage",
-    "page-change"
-  ],
+  emits: ["update:pageSize", "update:currentPage", "page-change"],
   setup(props, context) {
     const { slots, emit } = context;
     const xID = XEUtils.uniqueId();
@@ -232,140 +228,206 @@ var pager_default = defineVxeComponent({
       const homeSlot = slots.home;
       const pageCount = computePageCount.value;
       if (homeSlot) {
-        return h("span", {
-          class: "vxe-pager--custom-home-btn"
-        }, homeSlot({ $pager: $xePager, total, currentPage, pageCount }));
+        return h(
+          "span",
+          {
+            class: "vxe-pager--custom-home-btn"
+          },
+          homeSlot({ $pager: $xePager, total, currentPage, pageCount })
+        );
       }
-      return h("button", {
-        class: ["vxe-pager--home-btn", {
-          "is--disabled": currentPage <= 1
-        }],
-        type: "button",
-        title: getI18n("vxe.pager.homePageTitle"),
-        onClick: handleHomePage
-      }, [
-        h("i", {
-          class: ["vxe-pager--btn-icon", props.iconHomePage || getIcon().PAGER_HOME]
-        })
-      ]);
+      return h(
+        "button",
+        {
+          class: [
+            "vxe-pager--home-btn",
+            {
+              "is--disabled": currentPage <= 1
+            }
+          ],
+          type: "button",
+          title: getI18n("vxe.pager.homePageTitle"),
+          onClick: handleHomePage
+        },
+        [
+          h("i", {
+            class: ["vxe-pager--btn-icon", props.iconHomePage || getIcon().PAGER_HOME]
+          })
+        ]
+      );
     };
     const renderPrevPage = () => {
       const { currentPage, total } = props;
       const prevPageSlot = slots.prevPage || slots["prev-page"];
       const pageCount = computePageCount.value;
       if (prevPageSlot) {
-        return h("span", {
-          class: "vxe-pager--custom-prev-btn"
-        }, prevPageSlot({ $pager: $xePager, total, currentPage, pageCount }));
+        return h(
+          "span",
+          {
+            class: "vxe-pager--custom-prev-btn"
+          },
+          prevPageSlot({ $pager: $xePager, total, currentPage, pageCount })
+        );
       }
-      return h("button", {
-        class: ["vxe-pager--prev-btn", {
-          "is--disabled": currentPage <= 1
-        }],
-        type: "button",
-        title: getI18n("vxe.pager.prevPageTitle"),
-        onClick: handlePrevPage
-      }, [
-        h("i", {
-          class: ["vxe-pager--btn-icon", props.iconPrevPage || getIcon().PAGER_PREV_PAGE]
-        })
-      ]);
+      return h(
+        "button",
+        {
+          class: [
+            "vxe-pager--prev-btn",
+            {
+              "is--disabled": currentPage <= 1
+            }
+          ],
+          type: "button",
+          title: getI18n("vxe.pager.prevPageTitle"),
+          onClick: handlePrevPage
+        },
+        [
+          h("i", {
+            class: ["vxe-pager--btn-icon", props.iconPrevPage || getIcon().PAGER_PREV_PAGE]
+          })
+        ]
+      );
     };
     const renderPrevJump = (tagName) => {
       const { currentPage, total } = props;
       const prevJumpSlot = slots.prevJump || slots["prev-jump"];
       const pageCount = computePageCount.value;
       if (prevJumpSlot) {
-        return h("span", {
-          class: "vxe-pager--custom-jump-prev"
-        }, prevJumpSlot({ $pager: $xePager, total, currentPage, pageCount }));
+        return h(
+          "span",
+          {
+            class: "vxe-pager--custom-jump-prev"
+          },
+          prevJumpSlot({ $pager: $xePager, total, currentPage, pageCount })
+        );
       }
-      return h(tagName || "button", {
-        class: ["vxe-pager--jump-prev", {
-          "is--fixed": !tagName,
-          "is--disabled": currentPage <= 1
-        }],
-        type: "button",
-        title: getI18n("vxe.pager.prevJumpTitle"),
-        onClick: handlePrevJump
-      }, [
-        tagName ? h("i", {
-          class: ["vxe-pager--jump-more-icon", props.iconJumpMore || getIcon().PAGER_JUMP_MORE]
-        }) : null,
-        h("i", {
-          class: ["vxe-pager--jump-icon", props.iconJumpPrev || getIcon().PAGER_JUMP_PREV]
-        })
-      ]);
+      return h(
+        tagName || "button",
+        {
+          class: [
+            "vxe-pager--jump-prev",
+            {
+              "is--fixed": !tagName,
+              "is--disabled": currentPage <= 1
+            }
+          ],
+          type: "button",
+          title: getI18n("vxe.pager.prevJumpTitle"),
+          onClick: handlePrevJump
+        },
+        [
+          tagName ? h("i", {
+            class: ["vxe-pager--jump-more-icon", props.iconJumpMore || getIcon().PAGER_JUMP_MORE]
+          }) : null,
+          h("i", {
+            class: ["vxe-pager--jump-icon", props.iconJumpPrev || getIcon().PAGER_JUMP_PREV]
+          })
+        ]
+      );
     };
     const renderNextJump = (tagName) => {
       const { currentPage, total } = props;
       const nextJumpSlot = slots.nextJump || slots["next-jump"];
       const pageCount = computePageCount.value;
       if (nextJumpSlot) {
-        return h("span", {
-          class: "vxe-pager--custom-jump-next"
-        }, nextJumpSlot({ $pager: $xePager, total, currentPage, pageCount }));
+        return h(
+          "span",
+          {
+            class: "vxe-pager--custom-jump-next"
+          },
+          nextJumpSlot({ $pager: $xePager, total, currentPage, pageCount })
+        );
       }
-      return h(tagName || "button", {
-        class: ["vxe-pager--jump-next", {
-          "is--fixed": !tagName,
-          "is--disabled": currentPage >= pageCount
-        }],
-        type: "button",
-        title: getI18n("vxe.pager.nextJumpTitle"),
-        onClick: handleNextJump
-      }, [
-        tagName ? h("i", {
-          class: ["vxe-pager--jump-more-icon", props.iconJumpMore || getIcon().PAGER_JUMP_MORE]
-        }) : null,
-        h("i", {
-          class: ["vxe-pager--jump-icon", props.iconJumpNext || getIcon().PAGER_JUMP_NEXT]
-        })
-      ]);
+      return h(
+        tagName || "button",
+        {
+          class: [
+            "vxe-pager--jump-next",
+            {
+              "is--fixed": !tagName,
+              "is--disabled": currentPage >= pageCount
+            }
+          ],
+          type: "button",
+          title: getI18n("vxe.pager.nextJumpTitle"),
+          onClick: handleNextJump
+        },
+        [
+          tagName ? h("i", {
+            class: ["vxe-pager--jump-more-icon", props.iconJumpMore || getIcon().PAGER_JUMP_MORE]
+          }) : null,
+          h("i", {
+            class: ["vxe-pager--jump-icon", props.iconJumpNext || getIcon().PAGER_JUMP_NEXT]
+          })
+        ]
+      );
     };
     const renderNextPage = () => {
       const { currentPage, total } = props;
       const nextPageSlot = slots.nextPage || slots["next-page"];
       const pageCount = computePageCount.value;
       if (nextPageSlot) {
-        return h("span", {
-          class: "vxe-pager--custom-next-btn"
-        }, nextPageSlot({ $pager: $xePager, total, currentPage, pageCount }));
+        return h(
+          "span",
+          {
+            class: "vxe-pager--custom-next-btn"
+          },
+          nextPageSlot({ $pager: $xePager, total, currentPage, pageCount })
+        );
       }
-      return h("button", {
-        class: ["vxe-pager--next-btn", {
-          "is--disabled": currentPage >= pageCount
-        }],
-        type: "button",
-        title: getI18n("vxe.pager.nextPageTitle"),
-        onClick: handleNextPage
-      }, [
-        h("i", {
-          class: ["vxe-pager--btn-icon", props.iconNextPage || getIcon().PAGER_NEXT_PAGE]
-        })
-      ]);
+      return h(
+        "button",
+        {
+          class: [
+            "vxe-pager--next-btn",
+            {
+              "is--disabled": currentPage >= pageCount
+            }
+          ],
+          type: "button",
+          title: getI18n("vxe.pager.nextPageTitle"),
+          onClick: handleNextPage
+        },
+        [
+          h("i", {
+            class: ["vxe-pager--btn-icon", props.iconNextPage || getIcon().PAGER_NEXT_PAGE]
+          })
+        ]
+      );
     };
     const renderEndPage = () => {
       const { currentPage, total } = props;
       const endSlot = slots.end;
       const pageCount = computePageCount.value;
       if (endSlot) {
-        return h("span", {
-          class: "vxe-pager--custom-end-btn"
-        }, endSlot({ $pager: $xePager, total, currentPage, pageCount }));
+        return h(
+          "span",
+          {
+            class: "vxe-pager--custom-end-btn"
+          },
+          endSlot({ $pager: $xePager, total, currentPage, pageCount })
+        );
       }
-      return h("button", {
-        class: ["vxe-pager--end-btn", {
-          "is--disabled": currentPage >= pageCount
-        }],
-        type: "button",
-        title: getI18n("vxe.pager.endPageTitle"),
-        onClick: handleEndPage
-      }, [
-        h("i", {
-          class: ["vxe-pager--btn-icon", props.iconEndPage || getIcon().PAGER_END]
-        })
-      ]);
+      return h(
+        "button",
+        {
+          class: [
+            "vxe-pager--end-btn",
+            {
+              "is--disabled": currentPage >= pageCount
+            }
+          ],
+          type: "button",
+          title: getI18n("vxe.pager.endPageTitle"),
+          onClick: handleEndPage
+        },
+        [
+          h("i", {
+            class: ["vxe-pager--btn-icon", props.iconEndPage || getIcon().PAGER_END]
+          })
+        ]
+      );
     };
     const renderNumber = (showJump) => {
       const { currentPage, total, pagerCount } = props;
@@ -389,11 +451,15 @@ var pager_default = defineVxeComponent({
       if (showJump && isLt) {
         restList.push(1);
         nums.push(
-          h("button", {
-            class: "vxe-pager--num-btn",
-            type: "button",
-            onClick: (evnt) => handleJumpPageEvent(evnt, 1)
-          }, "1"),
+          h(
+            "button",
+            {
+              class: "vxe-pager--num-btn",
+              type: "button",
+              onClick: (evnt) => handleJumpPageEvent(evnt, 1)
+            },
+            "1"
+          ),
           renderPrevJump("span")
         );
       }
@@ -402,14 +468,21 @@ var pager_default = defineVxeComponent({
         if (number <= pageCount) {
           restList.push(number);
           nums.push(
-            h("button", {
-              key: number,
-              class: ["vxe-pager--num-btn", {
-                "is--active": currentPage === number
-              }],
-              type: "button",
-              onClick: (evnt) => handleJumpPageEvent(evnt, number)
-            }, `${number}`)
+            h(
+              "button",
+              {
+                key: number,
+                class: [
+                  "vxe-pager--num-btn",
+                  {
+                    "is--active": currentPage === number
+                  }
+                ],
+                type: "button",
+                onClick: (evnt) => handleJumpPageEvent(evnt, number)
+              },
+              `${number}`
+            )
           );
         }
       });
@@ -417,21 +490,33 @@ var pager_default = defineVxeComponent({
         restList.push(pageCount);
         nums.push(
           renderNextJump("button"),
-          h("button", {
-            class: "vxe-pager--num-btn",
-            type: "button",
-            onClick: (evnt) => handleJumpPageEvent(evnt, pageCount)
-          }, pageCount)
+          h(
+            "button",
+            {
+              class: "vxe-pager--num-btn",
+              type: "button",
+              onClick: (evnt) => handleJumpPageEvent(evnt, pageCount)
+            },
+            pageCount
+          )
         );
       }
       if (numberSlot) {
-        return h("span", {
-          class: "vxe-pager--custom-btn-wrapper"
-        }, numberSlot({ $pager: $xePager, total, numList: restList, currentPage, pageCount }));
+        return h(
+          "span",
+          {
+            class: "vxe-pager--custom-btn-wrapper"
+          },
+          numberSlot({ $pager: $xePager, total, numList: restList, currentPage, pageCount })
+        );
       }
-      return h("span", {
-        class: "vxe-pager--btn-wrapper"
-      }, nums);
+      return h(
+        "span",
+        {
+          class: "vxe-pager--btn-wrapper"
+        },
+        nums
+      );
     };
     const renderJumpNumber = () => {
       return renderNumber(true);
@@ -442,9 +527,13 @@ var pager_default = defineVxeComponent({
       const sizeList = computeSizeList.value;
       const pageCount = computePageCount.value;
       if (sizesSlot) {
-        return h("span", {
-          class: "vxe-pager--custom-sizes"
-        }, sizesSlot({ $pager: $xePager, total, currentPage, pageCount, pageSize, options: sizeList }));
+        return h(
+          "span",
+          {
+            class: "vxe-pager--custom-sizes"
+          },
+          sizesSlot({ $pager: $xePager, total, currentPage, pageCount, pageSize, options: sizeList })
+        );
       }
       return h(VxeSelectComponent, {
         class: "vxe-pager--sizes",
@@ -462,36 +551,52 @@ var pager_default = defineVxeComponent({
       const jumpSlot = isFull ? slots.fullJump || slots["full-jump"] : slots.jump;
       const pageCount = computePageCount.value;
       if (jumpSlot) {
-        return h("span", {
-          class: "vxe-pager--custom-jump"
-        }, jumpSlot({ $pager: $xePager, total, currentPage: inpCurrPage, pageCount }));
+        return h(
+          "span",
+          {
+            class: "vxe-pager--custom-jump"
+          },
+          jumpSlot({ $pager: $xePager, total, currentPage: inpCurrPage, pageCount })
+        );
       }
-      return h("span", {
-        class: "vxe-pager--jump"
-      }, [
-        isFull ? h("span", {
-          class: "vxe-pager--goto-text"
-        }, getI18n("vxe.pager.goto")) : null,
-        h(VxeNumberInputComponent, {
-          class: "vxe-pager--goto",
-          modelValue: reactData.inpCurrPage,
-          placeholder: getI18n("vxe.pager.gotoTitle"),
-          align: "center",
-          type: "integer",
-          max: pageCount,
-          min: 1,
-          controls: false,
-          clearable: false,
-          onKeydown: jumpKeydownEvent,
-          onBlur: triggerJumpEvent,
-          "onUpdate:modelValue"(val) {
-            reactData.inpCurrPage = val;
-          }
-        }),
-        isFull ? h("span", {
-          class: "vxe-pager--classifier-text"
-        }, getI18n("vxe.pager.pageClassifier")) : null
-      ]);
+      return h(
+        "span",
+        {
+          class: "vxe-pager--jump"
+        },
+        [
+          isFull ? h(
+            "span",
+            {
+              class: "vxe-pager--goto-text"
+            },
+            getI18n("vxe.pager.goto")
+          ) : null,
+          h(VxeNumberInputComponent, {
+            class: "vxe-pager--goto",
+            modelValue: reactData.inpCurrPage,
+            placeholder: getI18n("vxe.pager.gotoTitle"),
+            align: "center",
+            type: "integer",
+            max: pageCount,
+            min: 1,
+            controls: false,
+            clearable: false,
+            onKeydown: jumpKeydownEvent,
+            onBlur: triggerJumpEvent,
+            "onUpdate:modelValue"(val) {
+              reactData.inpCurrPage = val;
+            }
+          }),
+          isFull ? h(
+            "span",
+            {
+              class: "vxe-pager--classifier-text"
+            },
+            getI18n("vxe.pager.pageClassifier")
+          ) : null
+        ]
+      );
     };
     const renderFullJump = () => {
       return renderJump(true);
@@ -501,31 +606,47 @@ var pager_default = defineVxeComponent({
       const pageCountSlot = slots.pageCount || slots["page-count"];
       const pageCount = computePageCount.value;
       if (pageCountSlot) {
-        return h("span", {
-          class: "vxe-pager--custom-count"
-        }, pageCountSlot({ $pager: $xePager, total, currentPage, pageCount }));
+        return h(
+          "span",
+          {
+            class: "vxe-pager--custom-count"
+          },
+          pageCountSlot({ $pager: $xePager, total, currentPage, pageCount })
+        );
       }
-      return h("span", {
-        class: "vxe-pager--count"
-      }, [
-        h("span", {
-          class: "vxe-pager--separator"
-        }),
-        h("span", pageCount)
-      ]);
+      return h(
+        "span",
+        {
+          class: "vxe-pager--count"
+        },
+        [
+          h("span", {
+            class: "vxe-pager--separator"
+          }),
+          h("span", pageCount)
+        ]
+      );
     };
     const renderTotal = () => {
       const { currentPage, total } = props;
       const totalSlot = slots.total;
       const pageCount = computePageCount.value;
       if (totalSlot) {
-        return h("span", {
-          class: "vxe-pager--custom-total"
-        }, totalSlot({ $pager: $xePager, total, currentPage, pageCount }));
+        return h(
+          "span",
+          {
+            class: "vxe-pager--custom-total"
+          },
+          totalSlot({ $pager: $xePager, total, currentPage, pageCount })
+        );
       }
-      return h("span", {
-        class: "vxe-pager--total"
-      }, getI18n("vxe.pager.total", [total]));
+      return h(
+        "span",
+        {
+          class: "vxe-pager--total"
+        },
+        getI18n("vxe.pager.total", [total])
+      );
     };
     const pagerMethods = {
       dispatchEvent,
@@ -605,9 +726,12 @@ var pager_default = defineVxeComponent({
       handleNextJump
     };
     Object.assign($xePager, pagerMethods, pagerPrivateMethods);
-    watch(() => props.currentPage, (value) => {
-      reactData.inpCurrPage = value;
-    });
+    watch(
+      () => props.currentPage,
+      (value) => {
+        reactData.inpCurrPage = value;
+      }
+    );
     const renderVN = () => {
       const { align, layouts, className } = props;
       const childNodes = [];
@@ -615,9 +739,13 @@ var pager_default = defineVxeComponent({
       const pageCount = computePageCount.value;
       if (slots.left) {
         childNodes.push(
-          h("span", {
-            class: "vxe-pager--left-wrapper"
-          }, slots.left({ $grid: $xeGrid }))
+          h(
+            "span",
+            {
+              class: "vxe-pager--left-wrapper"
+            },
+            slots.left({ $grid: $xeGrid })
+          )
         );
       }
       layouts.forEach((name) => {
@@ -671,27 +799,43 @@ var pager_default = defineVxeComponent({
       });
       if (slots.right) {
         childNodes.push(
-          h("span", {
-            class: "vxe-pager--right-wrapper"
-          }, slots.right({ $grid: $xeGrid }))
+          h(
+            "span",
+            {
+              class: "vxe-pager--right-wrapper"
+            },
+            slots.right({ $grid: $xeGrid })
+          )
         );
       }
-      return h("div", {
-        ref: refElem,
-        class: ["vxe-pager", className ? XEUtils.isFunction(className) ? className({ $pager: $xePager }) : className : "", {
-          [`size--${vSize}`]: vSize,
-          [`align--${align}`]: align,
-          "is--border": props.border,
-          "is--background": props.background,
-          "is--perfect": props.perfect,
-          "is--hidden": props.autoHidden && pageCount === 1,
-          "is--loading": props.loading
-        }]
-      }, [
-        h("div", {
-          class: "vxe-pager--wrapper"
-        }, childNodes)
-      ]);
+      return h(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-pager",
+            className ? XEUtils.isFunction(className) ? className({ $pager: $xePager }) : className : "",
+            {
+              [`size--${vSize}`]: vSize,
+              [`align--${align}`]: align,
+              "is--border": props.border,
+              "is--background": props.background,
+              "is--perfect": props.perfect,
+              "is--hidden": props.autoHidden && pageCount === 1,
+              "is--loading": props.loading
+            }
+          ]
+        },
+        [
+          h(
+            "div",
+            {
+              class: "vxe-pager--wrapper"
+            },
+            childNodes
+          )
+        ]
+      );
     };
     $xePager.renderVN = renderVN;
     return $xePager;