@dataloop-ai/components 0.18.125 → 0.18.127

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.125",
+  "version": "0.18.127",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlPagination/DlPagination.vue

@@ -19,7 +19,7 @@
                     :model-value="value"
                     :min="min"
                     :max="max"
-                    :max-pages="maxPages"
+                    :max-display-range="maxDisplayRange"
                     :disabled="disabled"
                     :boundary-numbers="boundaryNumbers"
                     :boundary-links="boundaryLinks"
@@ -79,9 +79,9 @@ export default defineComponent({
             type: Number,
             default: 1
         },
-        maxPages: {
+        maxDisplayRange: {
             type: Number,
-            default: 0,
+            default: 7,
             validator: (v: number) => v >= 0
         },
         rowsPerPage: {

package/src/components/compound/DlPagination/components/PageNavigation.vue

@@ -129,9 +129,9 @@ export default defineComponent({
             type: Number,
             required: true
         },
-        maxPages: {
+        maxDisplayRange: {
             type: Number,
-            default: 0,
+            default: 7,
             validator: (v: number) => v >= 0
         },
         disabled: Boolean,
@@ -235,26 +235,32 @@ export default defineComponent({
             this.ellipsesStart = false
             this.ellipsesEnd = false
 
-            let maxPages = Math.max(
-                this.maxPages,
+            let maxDisplayRange = Math.max(
+                this.maxDisplayRange,
                 3 + (this.boundaryNumbers ? 2 : 0)
             )
 
             this.pgFrom = this.boundaryNumbers ? this.min + 1 : this.min
             this.pgTo = this.boundaryNumbers ? this.max - 1 : this.max
 
-            if (this.maxPages && maxPages < this.max - this.min + 1) {
-                maxPages = 1 + Math.floor(maxPages / 2) * 2
+            if (
+                this.maxDisplayRange &&
+                maxDisplayRange < this.max - this.min + 1
+            ) {
+                maxDisplayRange = 1 + Math.floor(maxDisplayRange / 2) * 2
 
                 this.pgFrom = Math.max(
                     this.min,
                     Math.min(
-                        this.max - maxPages + 1,
-                        this.value - Math.floor(maxPages / 2)
+                        this.max - maxDisplayRange + 1,
+                        this.value - Math.floor(maxDisplayRange / 2)
                     )
                 )
 
-                this.pgTo = Math.min(this.max, this.pgFrom + maxPages - 1)
+                this.pgTo = Math.min(
+                    this.max,
+                    this.pgFrom + maxDisplayRange - 1
+                )
 
                 if (this.boundaryNumbers) {
                     this.pgFrom += 1

package/src/components/compound/DlTable/hooks/tablePagination.ts

@@ -16,7 +16,7 @@ export type TablePagination = {
     page?: number
     rowsPerPage?: number
     rowsNumber?: number
-    maxPages?: number
+    maxDisplayRange?: number
 }
 
 function samePagination(oldPag: TablePagination, newPag: TablePagination) {
@@ -69,7 +69,7 @@ export function useTablePaginationState(
                     ? rowsPerPageOptions.value[0]
                     : 5,
                 min: 1,
-                maxPages: 0,
+                maxDisplayRange: 7,
                 boundaryNumbers: true,
                 boundaryLinks: true,
                 directionLinks: true,

package/src/components/compound/DlTable/types.ts

@@ -50,13 +50,9 @@ export type DlTableSortMethod = (
     descending: boolean
 ) => DlTableRow[]
 
-export type DlTablePagination = {
-    page: number
-    rowsPerPage: number
-    rowsNumber?: number
-    sortBy?: string | null
-    descending?: boolean
-}
+import { TablePagination } from './hooks/tablePagination'
+
+export type DlTablePagination = TablePagination
 
 export type DlTableRequestProp = {
     pagination: DlTablePagination

package/src/demos/DlDatasetBrowserLayoutDemo/components/DatasetFooter.vue

@@ -13,7 +13,7 @@
                 :boundary-numbers="boundaryNumbers"
                 :boundary-links="boundaryLinks"
                 :direction-links="directionLinks"
-                :max-pages="maxPages"
+                :max-display-range="maxDisplayRange"
                 :disabled="disabled"
                 :with-legend="withLegend"
                 :total-items="total"
@@ -41,7 +41,7 @@ export default defineComponent({
         const boundaryNumbers = ref(true)
         const boundaryLinks = ref(true)
         const directionLinks = ref(true)
-        const maxPages = ref(6)
+        const maxDisplayRange = ref(6)
         const disabled = ref(false)
         const withLegend = ref(true)
         const total = ref(200)
@@ -55,7 +55,7 @@ export default defineComponent({
             boundaryNumbers,
             boundaryLinks,
             directionLinks,
-            maxPages,
+            maxDisplayRange,
             disabled,
             withLegend,
             total,

package/src/demos/DlPaginationDemo.vue

@@ -14,8 +14,8 @@
                 title="max"
             />
             <dl-input
-                v-model="maxPages"
-                title="maxPages"
+                v-model="maxDisplayRange"
+                title="maxDisplayRange"
             />
             <dl-input
                 v-model="itemsName"
@@ -60,7 +60,7 @@
                 :boundary-numbers="boundaryNumbers"
                 :boundary-links="boundaryLinks"
                 :direction-links="directionLinks"
-                :max-pages="maxPages"
+                :max-display-range="maxDisplayRange"
                 :disabled="disabled"
                 :with-legend="withLegend"
                 :total-items="total"
@@ -101,7 +101,7 @@ export default defineComponent({
         return {
             page: 18,
             max: 119,
-            maxPages: 6,
+            maxDisplayRange: 6,
             rowsPerPage: 10,
             boundaryNumbers: true,
             boundaryLinks: true,

package/src/demos/DlTableDemo.vue

@@ -446,6 +446,7 @@ import {
 } from '../components'
 import { defineComponent, ref, computed, nextTick } from 'vue-demi'
 import { times, cloneDeep, isNumber } from 'lodash'
+import { DlTablePagination } from '../types'
 
 const columns = [
     {
@@ -591,7 +592,7 @@ const rows = [
         calcium: '12%',
         iron: '6%'
     },
-    ...times(100, (index) => ({
+    ...times(1000, (index) => ({
         name: 'KitKat' + index,
         calories: 518,
         fat: 26.0,
@@ -681,11 +682,12 @@ export default defineComponent({
             }
         }
 
-        const pagination = ref({
+        const pagination = ref<DlTablePagination>({
             sortBy: 'desc',
             descending: false,
             page: 2,
-            rowsPerPage: 3
+            rowsPerPage: 3,
+            maxDisplayRange: 9
             // rowsNumber: xx if getting data from a server
         })