@dataloop-ai/components 0.19.122 → 0.19.124

package/package.json

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

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

@@ -7,13 +7,24 @@
             <rows-selector
                 v-if="withRowsPerPage && rowsPerPageState"
                 v-model="rowsPerPageState"
+                class="dl-pagination--sides dl-pagination--sides--left"
                 :options="rowsPerPageOptions"
                 :items-name="itemsName"
                 :disabled="disabled"
             />
+            <div
+                v-else-if="withLegend"
+                class="dl-pagination--sides dl-pagination--sides--left"
+            />
+
             <div
                 v-if="rowsPerPageState"
                 class="dl-pagination--navigation"
+                :class="
+                    withLegend || (withRowsPerPage && rowsPerPageState)
+                        ? ''
+                        : 'dl-pagination--navigation--maximized'
+                "
             >
                 <page-navigation
                     :model-value="value"
@@ -45,6 +56,11 @@
                 :to="rowTo"
                 :total="totalItems"
                 :items-name="itemsName"
+                class="dl-pagination--sides dl-pagination--sides--right"
+            />
+            <div
+                v-else-if="withRowsPerPage && rowsPerPageState"
+                class="dl-pagination--sides dl-pagination--sides--right"
             />
         </div>
     </div>
@@ -182,6 +198,7 @@ export default defineComponent({
 
     &--container {
         height: 100%;
+        width: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -189,6 +206,16 @@ export default defineComponent({
 
     &--navigation {
         display: flex;
+        flex-grow: 1;
+        width: 60%;
+        justify-content: center;
+        &--maximized {
+            width: 100%;
+        }
+    }
+
+    &--sides {
+        width: 20%;
     }
 }
 </style>

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

@@ -33,7 +33,10 @@
                 :disabled="disabled"
                 @click="setPage(min)"
             >
-                {{ min }}
+                <DlEllipsis
+                    :text="`${min}`"
+                    style="justify-content: center; padding: 0 5px"
+                />
             </button>
             <button
                 v-if="ellipsesStart"
@@ -55,7 +58,10 @@
                     :disabled="disabled"
                     @click="setPage(page)"
                 >
-                    {{ page }}
+                    <DlEllipsis
+                        :text="`${page}`"
+                        style="justify-content: center; padding: 0 5px"
+                    />
                 </button>
             </template>
             <button
@@ -71,9 +77,13 @@
                 class="dl-pagination--page_button"
                 :class="{ 'dl-pagination--active': isActivePage(max) }"
                 :disabled="disabled"
+                :data-tooltip="max"
                 @click="setPage(max)"
             >
-                {{ max }}
+                <DlEllipsis
+                    :text="`${max}`"
+                    style="justify-content: center; padding: 0 5px"
+                />
             </button>
         </div>
         <button
@@ -104,12 +114,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import { getColor } from '../../../../utils'
-import { DlIcon } from '../../../essential'
+import { DlIcon, DlEllipsis } from '../../../essential'
 
 export default defineComponent({
     name: 'PageNavigation',
     components: {
-        DlIcon
+        DlIcon,
+        DlEllipsis
     },
     model: {
         prop: 'modelValue',
@@ -173,7 +184,7 @@ export default defineComponent({
             return this.value === this.max
         },
         buttonMinWidth(): string {
-            return `${Math.max(2, String(this.max).length)}em`
+            return `3em`
         },
         cssVars(): Record<string, any> {
             return {
@@ -305,8 +316,6 @@ export default defineComponent({
         line-height: 14px;
         font-weight: 400;
         white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
     }
 
     &--active {

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

@@ -1,14 +1,21 @@
 <template>
     <div class="dl-pagination--legend">
         {{ paginationContent }}
+        <dl-tooltip v-if="longItemsLength">
+            {{ fullContent }}
+        </dl-tooltip>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
+import { DlTooltip } from '../../../shared'
 
 export default defineComponent({
     name: 'PaginationLegend',
+    components: {
+        DlTooltip
+    },
     props: {
         from: {
             type: Number,
@@ -28,11 +35,43 @@ export default defineComponent({
         }
     },
     computed: {
+        longItemsLength(): boolean {
+            return String(this.total).length > 6
+        },
         paginationContent(): string {
-            return (
-                `Showing ${this.from}-${this.to}` +
-                (this.total ? ` of ${this.total} ${this.itemsName}` : '')
-            )
+            let totalItemsLength = String(this.total)
+            if (this.longItemsLength) {
+                totalItemsLength = `${totalItemsLength.slice(
+                    0,
+                    4
+                )}...${totalItemsLength.slice(-3)}`
+            }
+
+            let toDisplayString = String(this.to)
+            if (toDisplayString.length > 3) {
+                toDisplayString = `${toDisplayString.slice(
+                    0,
+                    2
+                )}...${toDisplayString.slice(-2)}`
+            }
+
+            let fromDisplayString = String(this.from)
+            if (fromDisplayString.length > 3) {
+                fromDisplayString = `${fromDisplayString.slice(
+                    0,
+                    2
+                )}...${fromDisplayString.slice(-2)}`
+            }
+
+            const header = `Showing ${fromDisplayString} - ${toDisplayString}`
+            const footer = this.total
+                ? `of ${totalItemsLength} ${this.itemsName}`
+                : ''
+
+            return `${header} ${footer}`
+        },
+        fullContent(): string {
+            return `Showing ${this.from} - ${this.to} of ${this.total} ${this.itemsName}`
         }
     }
 })

package/src/demos/DlPaginationDemo.vue

@@ -1,6 +1,13 @@
 <template>
-    <div style="align-items: stretch">
-        <div>
+    <div
+        style="
+            align-items: stretch;
+            justify-content: center;
+            width: 100%;
+            display: flex;
+        "
+    >
+        <div style="display: flex; width: 100%; justify-content: center">
             <dl-input
                 v-model="rowsPerPage"
                 width="100px"
@@ -27,7 +34,10 @@
                 title="itemsName"
             />
         </div>
-        <div class="row">
+        <div
+            class="row"
+            style="display: flex; width: 100%; justify-content: center"
+        >
             <dl-checkbox
                 v-model="boundaryNumbers"
                 label="boundaryNumbers"
@@ -57,7 +67,7 @@
                 label="withRowsPerPage"
             />
         </div>
-        <div style="width: 700px">
+        <div style="display: flex; width: 100%; justify-content: center">
             <dl-pagination
                 v-model="page"
                 :max="max"
@@ -74,7 +84,14 @@
                 :with-rows-per-page="withRowsPerPage"
             />
         </div>
-        <div>
+        <div
+            style="
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                justify-content: center;
+            "
+        >
             <h4>case 1</h4>
             <p>with exactly 30 items, 15 per row. should be exactly 2 pages</p>
             <dl-pagination
@@ -111,7 +128,7 @@ export default defineComponent({
             boundaryNumbers: true,
             boundaryLinks: true,
             directionLinks: true,
-            total: 999,
+            total: 99,
             withQuickNavigation: true,
             disabled: false,
             itemsName: 'Rows',