fix: both arrows visible and fixed links (#1693)

vuestorefront · Feb 15, 2021 · d4f3447 · d4f3447
1 parent 07581e0
commit d4f3447
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/packages/vue/src/components/molecules/SfPagination/SfPagination.vue b/packages/vue/src/components/molecules/SfPagination/SfPagination.vue
@@ -5,11 +5,12 @@
       <div v-if="hasArrows" class="sf-pagination__item prev">
         <component
           :is="componentIs"
-          v-if="canGoPrev"
           :class="{
             'sf-button--pure': !hasRouter,
+            'sf-arrow--transparent': !hasRouter && !canGoPrev,
           }"
           :link="hasRouter ? getLinkTo(getPrev) : null"
+          :disabled="!hasRouter && !canGoPrev ? true : false"
           aria-label="Go to previous page"
           @click="hasRouter ? null : go(getPrev)"
         >
@@ -75,11 +76,12 @@
       <div v-if="hasArrows" class="sf-pagination__item next">
         <component
           :is="componentIs"
-          v-if="canGoNext"
           :class="{
             'sf-button--pure': !hasRouter,
+            'sf-arrow--transparent': !hasRouter && !canGoNext,
           }"
           :link="hasRouter ? getLinkTo(getNext) : null"
+          :disabled="!hasRouter && !canGoNext ? true : false"
           aria-label="Go to previous next"
           @click="hasRouter ? null : go(getNext)"
         >
@@ -152,16 +154,20 @@ export default {
         : this.current;
     },
     getPrev() {
-      return this.currentPage - 1;
+      return this.currentPage === this.firstVisiblePageNumber
+        ? this.currentPage
+        : this.currentPage - 1;
     },
     canGoPrev() {
-      return this.getPrev > 0;
+      return this.currentPage !== this.firstVisiblePageNumber;
     },
     getNext() {
-      return this.currentPage + 1;
+      return this.currentPage === this.lastVisiblePageNumber
+        ? this.currentPage
+        : this.currentPage + 1;
     },
     canGoNext() {
-      return this.getNext <= this.total;
+      return this.currentPage !== this.lastVisiblePageNumber;
     },
     showFirst() {
       return this.firstVisiblePageNumber > 1;
@@ -202,13 +208,15 @@ export default {
       this.$emit("click", page);
     },
     getLinkTo(page) {
-      const route = {
-        name: this.$route.name,
-        params: this.$route.params,
-        query: { ...this.$route.query, page: page.toString() },
-      };
-      const linkToPage = this.$router.resolve(route).href;
-      return linkToPage.slice(1);
+      const pageNumber = page.toString();
+      if (this.hasRouter) {
+        return {
+          ...this.$route,
+          query: { ...this.$route.query, [this.pageParamName]: page },
+        };
+      } else {
+        return pageNumber;
+      }
     },
   },
 };

diff --git a/packages/vue/src/stories/releases/v0.10.2/v0.10.2.stories.mdx b/packages/vue/src/stories/releases/v0.10.2/v0.10.2.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="Releases/v0.10.2 - Latest/Change log" />
+<Meta title="Releases/v0.10.2/Change log" />
 
 # v0.10.2
 

diff --git a/packages/vue/src/stories/releases/v0.10.3/v0.10.3.stories.mdx b/packages/vue/src/stories/releases/v0.10.3/v0.10.3.stories.mdx
@@ -7,5 +7,6 @@ import { Meta } from "@storybook/addon-docs/blocks";
 ## 🐛 Fixes
 
 
-- SfSearchBar: add a possibility to pass listeners 
-- SfHero - add the condition to initialize glide.js when there is more than one item
+- SfPagination: both arrows visible and fixed returned link to page,
+- SfSearchBar: add a possibility to pass listeners, 
+- SfHero - add the condition to initialize glide.js when there is more than one item.