@dataloop-ai/components 0.16.49 → 0.16.51

package/package.json

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

package/src/components/compound/DlTable/DlTable.vue

@@ -415,15 +415,18 @@
             v-if="!hideBottom"
             :class="bottomClasses"
         >
-            <div class="dl-table__control">
-                <slot
-                    v-if="nothingToDisplay && !hideNoData"
-                    name="no-data"
-                >
-                    {{ bottomMessage }}
+            <div
+                v-if="nothingToDisplay && !hideNoData"
+                class="dl-table__control"
+            >
+                <slot name="no-data">
+                    {{ noDataMessage }}
                 </slot>
             </div>
-            <div class="dl-table__control">
+            <div
+                v-else
+                class="dl-table__control"
+            >
                 <slot
                     name="bottom"
                     v-bind="marginalsScope"
@@ -438,12 +441,13 @@
                     </div>
 
                     <slot
-                        v-bind="marginalsScope"
                         name="pagination"
+                        v-bind="marginalsScope"
                     >
                         <dl-pagination
                             v-if="displayPagination"
                             v-bind="marginalsScope.pagination"
+                            total-items="rows.length"
                             @update:rowsPerPage="
                                 (v) => setPagination({ rowsPerPage: v })
                             "
@@ -699,7 +703,7 @@ export default defineComponent({
         })
         //
 
-        const bottomMessage = computed(() => {
+        const noDataMessage = computed(() => {
             if (props.loading) {
                 return props.loadingLabel
             }
@@ -1257,7 +1261,7 @@ export default defineComponent({
             bottomClasses,
             hasTopSlots,
             nothingToDisplay,
-            bottomMessage,
+            noDataMessage,
             paginationState,
             hasTopSelectionMode,
             hasBotomSelectionBanner,

package/src/demos/DlPaginationDemo.vue

@@ -1,34 +1,108 @@
 <template>
-    <div style="width: 700px">
-        <dl-pagination
-            v-model="page"
-            :max="max"
-            :boundary-numbers="boundaryNumbers"
-            :boundary-links="boundaryLinks"
-            :direction-links="directionLinks"
-            :max-pages="maxPages"
-            :disabled="disabled"
-            :with-legend="withLegend"
-            :total-items="total"
-            :items-name="itemsName"
-            :with-quick-navigation="withQuickNavigation"
-            :with-rows-per-page="withRowsPerPage"
-        />
+    <div style="align-items: stretch">
+        <div class="row">
+            <dl-input
+                v-model="rowsPerPage"
+                title="rowsPerPage"
+            />
+            <dl-input
+                v-model="total"
+                title="total items"
+            />
+            <dl-input
+                v-model="max"
+                title="max"
+            />
+            <dl-input
+                v-model="maxPages"
+                title="maxPages"
+            />
+            <dl-input
+                v-model="itemsName"
+                title="itemsName"
+            />
+        </div>
+        <div class="row">
+            <dl-checkbox
+                v-model="boundaryNumbers"
+                label="boundaryNumbers"
+            />
+            <dl-checkbox
+                v-model="boundaryLinks"
+                label="boundaryLinks"
+            />
+            <dl-checkbox
+                v-model="directionLinks"
+                label="directionLinks"
+            />
+            <dl-checkbox
+                v-model="disabled"
+                label="disabled"
+            />
+            <dl-checkbox
+                v-model="withLegend"
+                label="withLegend"
+            />
+            <dl-checkbox
+                v-model="withQuickNavigation"
+                label="withQuickNavigation"
+            />
+            <dl-checkbox
+                v-model="withRowsPerPage"
+                label="withRowsPerPage"
+            />
+        </div>
+        <div style="width: 700px">
+            <dl-pagination
+                v-model="page"
+                :max="max"
+                :rows-per-page="rowsPerPage"
+                :boundary-numbers="boundaryNumbers"
+                :boundary-links="boundaryLinks"
+                :direction-links="directionLinks"
+                :max-pages="maxPages"
+                :disabled="disabled"
+                :with-legend="withLegend"
+                :total-items="total"
+                :items-name="itemsName"
+                :with-quick-navigation="withQuickNavigation"
+                :with-rows-per-page="withRowsPerPage"
+            />
+        </div>
+        <div>
+            <h4>case 1</h4>
+            <p>with exactly 30 items, 15 per row. should be exactly 2 pages</p>
+            <dl-pagination
+                v-model="page"
+                :total-items="30"
+                :rows-per-page="15"
+            />
+            <h4>case 2</h4>
+            <p>with 31 items, 15 per row. should be exactly 3 pages</p>
+            <dl-pagination
+                v-model="page"
+                :total-items="31"
+                :rows-per-page="15"
+            />
+        </div>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import { DlPagination } from '../components'
+import DlInput from '../components/compound/DlInput/DlInput.vue'
+import DlCheckbox from '../components/essential/DlCheckbox/DlCheckbox.vue'
 
 export default defineComponent({
     name: 'DlPaginationDemo',
-    components: { DlPagination },
+    components: { DlCheckbox, DlInput, DlPagination },
     data() {
         return {
             page: 18,
             max: 119,
             maxPages: 6,
+            rowsPerPage: 10,
             boundaryNumbers: true,
             boundaryLinks: true,
             directionLinks: true,

package/src/demos/DlTableDemo.vue

@@ -241,7 +241,48 @@
                 </div>
             </div>
             <div>
-                <p>#no-data & #pagination declare together</p>
+                <h3>slots #no-data & #pagination declare together</h3>
+                <h4>case 1: table with data</h4>
+                <p>
+                    rows should appear with slot#pagination, slot#no-data should
+                    not
+                </p>
+                <DlTable
+                    :rows="tableRows"
+                    :selected="selected"
+                    :separator="separator"
+                    :columns="columns"
+                    :bordered="bordered"
+                    :draggable="draggable"
+                    :dense="dense"
+                    class="sticky-header"
+                    :filter="filter"
+                    :selection="selection"
+                    :loading="loading"
+                    :resizable="resizable"
+                    row-key="name"
+                    color="dl-color-secondary"
+                    title="Table Title"
+                    :virtual-scroll="vScroll"
+                    style="height: 200px"
+                    :rows-per-page-options="rowsPerPageOptions"
+                    @row-click="log"
+                    @update:selected="updateSeleted"
+                >
+                    <template #pagination>
+                        <div style="background-color: #4db1d3">
+                            &lt slot#pagination >
+                        </div>
+                    </template>
+                    <template #no-data>
+                        <div style="background-color: #734145">
+                            &lt slot#no-data > should not be visible
+                        </div>
+                    </template>
+                </DlTable>
+                <h4>case 2: table with no data</h4>
+                <p>slot#no-data should appear, slot#pagination not</p>
+
                 <DlTable
                     :selected="selected"
                     :separator="separator"
@@ -264,10 +305,14 @@
                     @update:selected="updateSeleted"
                 >
                     <template #pagination>
-                        pagination slot, no-data slot should be visible too
+                        <div style="background-color: #734145">
+                            &lt slot#pagination > should not be visible
+                        </div>
                     </template>
                     <template #no-data>
-                        no-data slot, pagination slot should be visible too
+                        <div style="background-color: #2f3c4b">
+                            &lt slot#no-data >
+                        </div>
                     </template>
                 </DlTable>
             </div>