@uzum-tech/ui 2.1.4 → 2.2.1

package/es/pagination/src/Pagination.mjs

@@ -4,67 +4,14 @@ import { UBaseIcon } from "../../_internal/index.mjs";
 import { BackwardIcon, FastBackwardIcon, FastForwardIcon, ForwardIcon, MoreIcon } from "../../_internal/icons/index.mjs";
 import { useConfig, useLocale, useTheme, useThemeClass } from "../../_mixins/index.mjs";
 import { useRtl } from "../../_mixins/use-rtl.mjs";
-import { call, createKey, resolveSlot, smallerSize, useAdjustedTo, warn, warnOnce } from "../../_utils/index.mjs";
+import { call, createKey, resolveSlot, smallerSize, warn, warnOnce } from "../../_utils/index.mjs";
 import { UInput } from "../../input/index.mjs";
 import { UPopselect } from "../../popselect/index.mjs";
 import { USelect } from "../../select/index.mjs";
 import { paginationLight } from "../styles/index.mjs";
+import { paginationProps } from "./interface.mjs";
 import style from "./styles/index.cssr.mjs";
 import { createPageItemsInfo } from "./utils.mjs";
-export const paginationProps = Object.assign(Object.assign({}, useTheme.props), {
-  simple: Boolean,
-  page: Number,
-  defaultPage: {
-    type: Number,
-    default: 1
-  },
-  itemCount: Number,
-  pageCount: Number,
-  defaultPageCount: {
-    type: Number,
-    default: 1
-  },
-  showSizePicker: Boolean,
-  sizePickerLabel: String,
-  pageSize: Number,
-  defaultPageSize: Number,
-  pageSizes: {
-    type: Array,
-    default() {
-      return [10];
-    }
-  },
-  showQuickJumper: Boolean,
-  size: {
-    type: String,
-    default: 'medium'
-  },
-  disabled: Boolean,
-  pageSlot: {
-    type: Number,
-    default: 9
-  },
-  selectProps: Object,
-  prev: Function,
-  next: Function,
-  goto: Function,
-  prefix: Function,
-  suffix: Function,
-  label: Function,
-  displayOrder: {
-    type: Array,
-    default: ['size-picker', 'pages', 'quick-jumper']
-  },
-  to: useAdjustedTo.propTo,
-  'onUpdate:page': [Function, Array],
-  onUpdatePage: [Function, Array],
-  'onUpdate:pageSize': [Function, Array],
-  onUpdatePageSize: [Function, Array],
-  /** @deprecated */
-  onPageSizeChange: [Function, Array],
-  /** @deprecated */
-  onChange: [Function, Array]
-});
 export default defineComponent({
   name: 'Pagination',
   props: paginationProps,
@@ -108,7 +55,6 @@ export default defineComponent({
     const mergedPageRef = useMergedState(toRef(props, 'page'), uncontrolledPageRef);
     const mergedPageSizeRef = useMergedState(toRef(props, 'pageSize'), uncontrolledPageSizeRef);
     const mergedPageCountRef = computed(() => {
-      // item count has high priority, for it can affect prefix slot rendering
       const {
         itemCount
       } = props;
@@ -121,6 +67,20 @@ export default defineComponent({
       if (pageCount !== undefined) return Math.max(pageCount, 1);
       return 1;
     });
+    const mergedHasPrevRef = computed(() => {
+      const {
+        hasPrev
+      } = props;
+      if (hasPrev !== undefined) return hasPrev;
+      return mergedPageRef.value > 1;
+    });
+    const mergedHasNextRef = computed(() => {
+      const {
+        hasNext
+      } = props;
+      if (hasNext !== undefined) return hasNext;
+      return mergedPageRef.value < mergedPageCountRef.value;
+    });
     const jumperValueRef = ref('');
     watchEffect(() => {
       void props.simple;
@@ -256,13 +216,21 @@ export default defineComponent({
       }
     }
     function forward() {
-      if (props.disabled) return;
-      const page = Math.min(mergedPageRef.value + 1, mergedPageCountRef.value);
+      if (props.disabled || !mergedHasNextRef.value) return;
+      const page = props.hasNext === undefined ? Math.min(mergedPageRef.value + 1, mergedPageCountRef.value) : mergedPageRef.value + 1;
+      const {
+        onNext
+      } = props;
+      if (onNext) call(onNext, page);
       doUpdatePage(page);
     }
     function backward() {
-      if (props.disabled) return;
+      if (props.disabled || !mergedHasPrevRef.value) return;
       const page = Math.max(mergedPageRef.value - 1, 1);
+      const {
+        onPrev
+      } = props;
+      if (onPrev) call(onPrev, page);
       doUpdatePage(page);
     }
     function fastForward() {
@@ -428,6 +396,8 @@ export default defineComponent({
       locale: localeRef,
       selfRef,
       mergedPage: mergedPageRef,
+      mergedHasPrev: mergedHasPrevRef,
+      mergedHasNext: mergedHasNextRef,
       pageItems: computed(() => {
         return pageItemsInfo.value.items;
       }),
@@ -470,6 +440,9 @@ export default defineComponent({
       cssVars,
       mergedPage,
       mergedPageCount,
+      mergedHasPrev,
+      mergedHasNext,
+      variant,
       pageItems,
       showSizePicker,
       sizePickerLabel,
@@ -504,7 +477,7 @@ export default defineComponent({
     const renderLabel = label || $slots.label;
     return h("div", {
       ref: "selfRef",
-      class: [`${mergedClsPrefix}-pagination`, this.themeClass, this.rtlEnabled && `${mergedClsPrefix}-pagination--rtl`, disabled && `${mergedClsPrefix}-pagination--disabled`, simple && `${mergedClsPrefix}-pagination--simple`],
+      class: [`${mergedClsPrefix}-pagination`, this.themeClass, this.rtlEnabled && `${mergedClsPrefix}-pagination--rtl`, disabled && `${mergedClsPrefix}-pagination--disabled`, simple && `${mergedClsPrefix}-pagination--simple`, variant === 'cursor' && `${mergedClsPrefix}-pagination--cursor`],
       style: cssVars
     }, renderPrefix ? h("div", {
       class: `${mergedClsPrefix}-pagination-prefix`
@@ -521,7 +494,7 @@ export default defineComponent({
           return h("div", {
             class: `${mergedClsPrefix}-pagination-pages`
           }, h(Fragment, null, h("div", {
-            class: [`${mergedClsPrefix}-pagination-item`, !renderPrev && `${mergedClsPrefix}-pagination-item--button`, (mergedPage <= 1 || mergedPage > mergedPageCount || disabled) && `${mergedClsPrefix}-pagination-item--disabled`],
+            class: [`${mergedClsPrefix}-pagination-item`, !renderPrev && `${mergedClsPrefix}-pagination-item--button`, (!mergedHasPrev || disabled) && `${mergedClsPrefix}-pagination-item--disabled`],
             onClick: handleBackwardClick
           }, renderPrev ? renderPrev({
             page: mergedPage,
@@ -534,7 +507,7 @@ export default defineComponent({
             clsPrefix: mergedClsPrefix
           }, {
             default: () => this.rtlEnabled ? h(ForwardIcon, null) : h(BackwardIcon, null)
-          })), simple ? h(Fragment, null, h("div", {
+          })), variant === 'cursor' ? null : simple ? h(Fragment, null, h("div", {
             class: `${mergedClsPrefix}-pagination-quick-jumper`
           }, h(UInput, {
             value: jumperValue,
@@ -678,7 +651,7 @@ export default defineComponent({
             }
           }), h("div", {
             class: [`${mergedClsPrefix}-pagination-item`, !renderNext && `${mergedClsPrefix}-pagination-item--button`, {
-              [`${mergedClsPrefix}-pagination-item--disabled`]: mergedPage < 1 || mergedPage >= mergedPageCount || disabled
+              [`${mergedClsPrefix}-pagination-item--disabled`]: !mergedHasNext || disabled
             }],
             onClick: handleForwardClick
           }, renderNext ? renderNext({