From 26eea589dea09a0cdef89d9004ecbab9a354cf8e Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Mon, 28 Jun 2021 10:56:44 +0300
Subject: [PATCH] Of text property for pagination

---
 src/components/Pagination/SPagination.vue | 15 +++++++++++++--
 src/stories/SPagination.stories.ts        |  8 ++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue
index b7044a0a..9e8f292f 100644
--- a/src/components/Pagination/SPagination.vue
+++ b/src/components/Pagination/SPagination.vue
@@ -108,7 +108,7 @@ export default class SPagination extends Mixins(BorderRadiusMixin) {
   /**
    * Text for 'Rows per page' text
    *
-   * `Per page text` by default
+   * `Rows per page` by default
    */
   @Prop({ default: 'Rows per page', type: String }) readonly perPageText!: string
   /**
@@ -117,6 +117,12 @@ export default class SPagination extends Mixins(BorderRadiusMixin) {
    * `Total` by default
    */
   @Prop({ default: 'Total', type: String }) readonly totalText!: string
+  /**
+   * Text for 'of' text
+   *
+   * `of` by default
+   */
+  @Prop({ default: 'of', type: String }) readonly ofText!: string
 
   @Ref('pagination') pagination!: any
 
@@ -147,7 +153,7 @@ export default class SPagination extends Mixins(BorderRadiusMixin) {
     if (this.totalItem) {
       if (this.total) {
         const upperNumber = this.pageSizeModel * this.currentPageModel
-        this.totalItem.textContent = `${upperNumber - this.pageSizeModel + 1}—${upperNumber > this.total ? this.total : upperNumber} of ${this.total}`
+        this.totalItem.textContent = `${upperNumber - this.pageSizeModel + 1}—${upperNumber > this.total ? this.total : upperNumber} ${this.ofText} ${this.total}`
       } else {
         this.totalItem.textContent = `${this.totalText} ${this.total}`
       }
@@ -172,6 +178,11 @@ export default class SPagination extends Mixins(BorderRadiusMixin) {
     this.renderPaginationItems()
   }
 
+  @Watch('ofText')
+  private handleOfTextChange () {
+    this.renderPaginationItems()
+  }
+
   @Watch('pageSize')
   private handlePageSizePropChange (value: number): void {
     this.pageSizeModel = value
diff --git a/src/stories/SPagination.stories.ts b/src/stories/SPagination.stories.ts
index c879d49d..1414874c 100644
--- a/src/stories/SPagination.stories.ts
+++ b/src/stories/SPagination.stories.ts
@@ -24,6 +24,7 @@ export const configurable = () => ({
                  :next-text="nextText"
                  :per-page-text="perPageText"
                  :total-text="totalText"
+                 :of-text="ofText"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  @prev-click="handlePrevClick"
@@ -57,10 +58,13 @@ export const configurable = () => ({
       default: text('Next text', '')
     },
     perPageText: {
-      default: text('Per page text', '')
+      default: text('Per page text', 'Rows per page')
     },
     totalText: {
-      default: text('Total text', '')
+      default: text('Total text', 'Total')
+    },
+    ofText: {
+      default: text('Of text', 'of')
     }
   },
   methods: {