Merge branch 'hotfix-0.10.3' of https://github.com/vuestorefront/stor…

…efront-ui into hotfix-0.10.3
vuestorefront · Feb 15, 2021 · 33644a5 · 33644a5
2 parents 69a41dc + d4f3447
commit 33644a5
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 28 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/components/molecules/SfSearchBar/SfSearchBar.stories.js b/packages/vue/src/components/molecules/SfSearchBar/SfSearchBar.stories.js
@@ -50,14 +50,20 @@ export default {
       description: "Define color of the search icon",
     },
     input: { action: "Input changed", table: { category: "Events" } },
-    enter: { action: "Enter pressed", table: { category: "Events" } },
     blur: { action: "Not focus anymore", table: { category: "Events" } },
+    focus: { action: "Focus", table: { category: "Events" } },
+    click: { action: "Button click", table: { category: "Events" } },
   },
 };
 
 const Template = (args, { argTypes }) => ({
   components: { SfSearchBar },
   props: Object.keys(argTypes),
+  data() {
+    return {
+      searchValue: this.value,
+    }
+  },
   computed: {
     iconCheck() {
       return this.iconSize || this.iconColor
@@ -73,11 +79,12 @@ const Template = (args, { argTypes }) => ({
   :icon="iconCheck"
   :class="classes"
   :placeholder="placeholder"
-  @enter="enter"
-  @input="input"
+  @click="click"
   @blur="blur"
+  @focus="focus"
+  @input="input"
   aria-label="Search"
-  v-model="value"/>`,
+  v-model="searchValue"/>`,
 });
 
 export const Common = Template.bind({});
@@ -112,17 +119,21 @@ Centered.args = {
 
 export const UseIconSlot = (args, { argTypes }) => ({
   components: { SfSearchBar },
+  data() {
+    return {
+      searchValue: this.value,
+    }
+  },
   props: Object.keys(argTypes),
   template: `
   <SfSearchBar
-    :class="customClass"
     :placeholder="placeholder"
-    @click="alert(value)"
-    @enter="enter"
-    @input="input"
+    @click="click"
     @blur="blur"
+    @focus="focus"
+    @input="input"
     aria-label="Search"
-    v-model="value">
+    v-model="searchValue">
     <template #icon>👀</template>
   </SfSearchBar>`,
 });

diff --git a/packages/vue/src/components/molecules/SfSearchBar/SfSearchBar.vue b/packages/vue/src/components/molecules/SfSearchBar/SfSearchBar.vue
@@ -7,10 +7,7 @@
       :value="value"
       v-bind="$attrs"
       :placeholder="placeholder"
-      @input="$emit('input', $event.target.value)"
-      @keyup.enter="$emit('enter', $event.target.value)"
-      @keyup.esc="$emit('input', '')"
-      @blur="$emit('blur')"
+      v-on="listeners"
     />
     <!-- @slot -->
     <slot name="icon">
@@ -59,6 +56,17 @@ export default {
       default: () => ({}),
     },
   },
+  computed: {
+    listeners() {
+      return {
+        ...this.$listeners,
+        input: (event) => this.$emit("input", event.target.value),
+        "keyup.enter": (event) => this.$emit("input", event.target.value),
+        "keyup.esc": () => this.$emit("input", ""),
+        blur: () => this.$emit("blur"),
+      };
+    },
+  },
 };
 </script>
 <style lang="scss">

diff --git a/packages/vue/src/components/organisms/SfHero/SfHero.vue b/packages/vue/src/components/organisms/SfHero/SfHero.vue
@@ -94,7 +94,7 @@ export default {
     },
   },
   mounted() {
-    if (this.numberOfPages) {
+    if (this.numberOfPages > 1) {
       this.$nextTick(() => {
         if (!this.$slots.default) return;
         const glide = new Glide(this.$refs.glide, this.mergedOptions);

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
@@ -0,0 +1,12 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Releases/v0.10.3 - Latest/Change log" />
+
+# v0.10.3
+
+## 🐛 Fixes
+
+
+- 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.