feat(DataTablePagination): new meta slot

gitsindonesia · Sep 7, 2022 · a3bf32b · a3bf32b
1 parent 5270cdf
commit a3bf32b
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 7 deletions.
diff --git a/packages/table/src/VDataTablePagination.stories.ts b/packages/table/src/VDataTablePagination.stories.ts
@@ -113,3 +113,32 @@ RowsPerPageSlot.parameters = {
     },
   },
 };
+
+export const MetaSlot: Story = (args) => ({
+  components: {
+    VDataTablePagination,
+  },
+  setup() {
+    return {args};
+  },
+  template: `
+    <v-data-table-pagination v-bind="args">
+    <template #meta="{showingText, start, end, fromText, totalItems, dataText}">
+      {{ showingText }} {{ start }} to {{ end }} of {{ totalItems }} {{ dataText }}
+    </template>
+    </v-data-table-pagination>
+  `,
+});
+MetaSlot.parameters = {
+  docs: {
+    source: {
+      code: `
+<v-data-table-pagination v-bind="args">
+  <template #meta="{showingText, start, end, fromText, totalItems, dataText}">
+    {{ showingText }} {{ start }} to {{ end }} of {{ totalItems }} {{ dataText }}
+  </template>
+</v-data-table-pagination> 
+      `,
+    },
+  },
+};
diff --git a/packages/table/src/VDataTablePagination.vue b/packages/table/src/VDataTablePagination.vue
@@ -139,14 +139,20 @@ watch(
         order-2
       "
     >
-      <span class="hidden sm:inline"> {{ showingText }} </span>
-      <span class="font-semibold">{{ start }}</span>
-      <span>-</span>
-      <span class="font-semibold">{{ end }}</span>
-      <span>{{ fromText }}</span>
-      <span class="font-semibold">{{ totalItems }}</span>
-      <span class="hidden sm:inline"> {{ dataText }} </span>
+      <slot
+        name="meta"
+        v-bind="{showingText, start, end, fromText, totalItems, dataText}"
+      >
+        <span class="hidden sm:inline"> {{ showingText }} </span>
+        <span class="font-semibold">{{ start }}</span>
+        <span>-</span>
+        <span class="font-semibold">{{ end }}</span>
+        <span>{{ fromText }}</span>
+        <span class="font-semibold">{{ totalItems }}</span>
+        <span class="hidden sm:inline"> {{ dataText }} </span>
+      </slot>
     </p>
+
     <div class="flex-grow order-1 sm:order-3">&nbsp;</div>
     <div class="w-auto flex justify-center sm:justify-end order-3 sm:order-4">
       <Pagination