@ecomplus/widget-martan 1.1.22 → 1.2.0

package/src/widgets/reviews/CardReview.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="mt-review">
-    <div class="mt-rating__group">
-      <author-and-rating
-        v-if="review"
-        :author="review.display_name"
-        :isAnonymous="review.is_anonymous"
-        :rating="review.rating"
-        :starColor="starColor"
-      />
-
-      <is-recommended  v-if="review" :recommended="review.is_recommended" />
-
-      <verified-purchase v-if="isVerified" />
-    </div>
-
-    <thumbs-pictures
-      :review="review"
-      @onClick="(e) => $emit('openQuickview', e)"
-    />
-
-    <review-body
-      v-if="review"
-      :body="review.body"
-      :createdAt="review.created_at"
-    />
-
-    <review-reply :reply="review.reply" />
-  </div>
-</template>
-
-<script>
-import Rating from "../snippets/Rating.vue";
-import ThumbsPictures from "./ThumbsPictures.vue";
-import VerifiedPurchase from "./VerifiedPurchase.vue";
-import AuthorAndRating from "./AuthorAndRating.vue";
-import IsRecommended from "./isRecommended.vue";
-import ReviewBody from "./ReviewBody.vue";
-import ReviewReply from "./ReviewReply.vue";
-
-export default {
-  name: "CardReview",
-
-  props: {
-    review: {
-      type: Object,
-      default () {
-        return {}
-      }
-    },
-
-    starColor: {
-      type: String,
-      default: "#212529",
-    },
-  },
-
-  components: {
-    ThumbsPictures,
-    Rating,
-    VerifiedPurchase,
-    AuthorAndRating,
-    IsRecommended,
-    ReviewBody,
-    ReviewReply,
-  },
-
-  computed: {
-    isVerified: function () {
-      return this.review && this.review.verified_purchase;
-    },
-  },
-};
-</script>
-
-<style>
-.mt-reply__wrapper {
-  display: flex;
-  align-items: center;
-}
-
-@media (max-width: 580px) {
-  .body-wrapper {
-    padding: 0px;
-  }
-}
-</style>

package/src/widgets/reviews/GridView.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="mt-gridview">
-    <div class="mt-gridview__card" v-for="review in reviews.list" :key="review.id" @click="(e) => openQuickview(review)">
-      <div class="mt-gridview__thumb" v-if="getPictureURL(review)">
-        <img :src="getPictureURL(review)" :alt="review.title" @click="() => openQuickview(review)" />
-      </div>
-
-      <div class="mt-gridview__detail">
-        <span class="mt-gridview__author">{{ review.display_name.substr(0, 16) }}</span>
-        <rating :rating="review.rating" :color="starColor" />
-        <verified-purchase v-if="review.verified_purchase" />
-        <span class="mt-gridview__body">{{ review.body.substr(0, 250) }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Rating from '../snippets/Rating.vue';
-import CardReview from "./CardReview.vue";
-import VerifiedPurchase from './VerifiedPurchase.vue';
-
-export default {
-  name: "GridView",
-
-  components: {
-    CardReview,
-    Rating,
-    VerifiedPurchase,
-  },
-
-  props: {
-    starColor: {
-      type: String,
-      default: "#212529",
-    },
-
-    reviews: {
-      type: Object,
-      default: {
-        list: [],
-        orderRating: null,
-        total: 0,
-      },
-    },
-  },
-
-  methods: {
-    openQuickview: function (review) {
-      this.$emit('openQuickview', { review })
-    },
-
-    getPictureURL(review) {
-      if (review && review.pictures && review.pictures.length && review.pictures[0].normal) {
-        return review.pictures[0].normal
-      }
-
-      return false
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.mt-gridview {
-  transition: all 0.7s ease;
-  column-count: 2;
-  column-gap: 10px;
-  margin-right: auto;
-  margin-left: auto;
-
-  @media only screen and (min-width: 600px) {
-    column-count: 3;
-  }
-
-  @media only screen and (min-width: 768px) {
-    column-count: 4;
-  }
-
-  @media only screen and (min-width: 992px) {
-    column-count: 5;
-  }
-
-  &__card {
-    width: 100%;
-    border: 1px #d5d9d9 solid;
-    border-radius: 6px;
-    cursor: pointer;
-    margin: 0;
-    display: grid;
-    grid-template-rows: 1fr auto;
-    margin-bottom: 10px;
-    break-inside: avoid;
-  }
-
-  &__detail {
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  &__thumb {
-    img {
-      max-width: 250px;
-      width: 100%;
-      object-fit: contain;
-      border-top-right-radius: 5px;
-      border-top-left-radius: 5px;
-    }
-  }
-}
-</style>

package/src/widgets/reviews/HeaderExpanded.vue

@@ -1,84 +0,0 @@
-<template>
-  <div class="mt-header--expanded">
-    <average-total :average="reviews.averageTotal" />
-    <score 
-      :reviews="reviews" 
-      :starColor="starColor" 
-      @updateOrderByAverage="updateOrderBy" 
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    starColor: {
-      type: String,
-      default: '#212529'
-    },
-
-    reviews: {
-      type: Object,
-      default: {
-        list: [],
-        orderRating: null,
-        total: 0,
-        average: {
-          one: 0,
-          two: 0,
-          three: 0,
-          four: 0,
-          five: 0,
-        },
-        averageTotal: 0,
-      }
-    },
-  },
-
-  name: 'header-expanded',
-
-  components: {
-    AverageTotal: () => import("./AverageTotal.vue"),
-    AverageScore: () => import("./AverageScore.vue"),
-    Score: () => import("./Score.vue"),
-  },
-
-  methods: {
-    updateOrderBy: ({ rating }) => this.$emit('updateOrderByAverage', { rating })
-  }
-};
-</script>
-
-<style lang="scss">
-.mt-header--expanded {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #e3e3e3;
-  padding-bottom: 25px;
-
-  .mt-rating__average {
-    display: flex;
-    align-items: center;
-  }
-
-  .mt-rating__average__wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-    padding-top: 5px;
-  }
-
-  .mt-rating__average_total {
-    font-size: 48px;
-    margin: 0 18px 0 0;
-    padding: 0;
-  }
-}
-
-@media (max-width: 580px) {
-  .mt-rating__options {
-    max-width: 97%;
-  }
-}
-</style>

package/src/widgets/reviews/HeaderMinimal.vue

@@ -1,110 +0,0 @@
-<template>
-  <div class="mt-header--minimal">
-    <div class="rating">
-      <div style="display: flex; align-items: center; gap: 10px">
-        <rating :color="starColor" :rating="reviews.averageTotal" />
-
-        <span class="average" v-if="reviews.averageTotal > 0">
-          {{ reviews.averageTotal }}
-          <span class="baseado" style="font-size: 10px; opacity: 0.8"
-            >({{
-              reviews.total > 1
-                ? i19basedOn$1Reviews.replace("$1", reviews.total)
-                : i19basedOn$1Review.replace("$1", reviews.total)
-            }})</span
-          ></span
-        >
-        <span class="average" v-else>
-          {{ reviews.averageTotal }}
-          <span class="baseado" style="font-size: 10px; opacity: 0.8"
-            >({{ i19noReview }})</span
-          ></span
-        >
-      </div>
-
-      <Sort @onSort="onSort" />
-    </div>
-  </div>
-</template>
-
-<script>
-import Rating from "../snippets/Rating.vue";
-import Sort from "./Sort.vue";
-
-export default {
-  props: {
-    starColor: {
-      type: String,
-      default: "#212529",
-    },
-
-    reviews: {
-      type: Object,
-      default: {
-        list: [],
-        orderRating: null,
-        total: 0,
-        average: {
-          one: 0,
-          two: 0,
-          three: 0,
-          four: 0,
-          five: 0,
-        },
-        averageTotal: 0,
-      },
-    },
-  },
-
-  name: "header-minimal",
-
-  components: {
-    Rating,
-    Sort,
-  },
-
-  computed: {
-    i19basedOn$1Reviews: () => "Baseado em $1 avaliações",
-    i19basedOn$1Review: () => "Baseado em $1 avaliação",
-    i19noReview: () => "Nenhuma avaliação",
-  },
-
-  methods: {
-    updateOrderBy: ({ rating }) =>
-      this.$emit("updateOrderByAverage", { rating }),
-
-    onSort(value) {
-      this.$emit("onSort", value);
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.mt-header--minimal {
-  .rating {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    border-bottom: 1px solid #eee;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    padding-bottom: 10px;
-  }
-
-  .average {
-    font-size: 26px;
-    color: #6c757d;
-  }
-
-  .mt-rating__average__sort {
-    width: 100%;
-  }
-
-  .baseado {
-    @media (max-width: 580px) {
-      display: none;
-    }
-  }
-}
-</style>

package/src/widgets/reviews/ListView.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="mt-reviews__list">
-    <card-review 
-      v-for="review in reviews.list" 
-      :key="review.id" 
-      :review="review" 
-      :starColor="starColor"
-      @openQuickview="openQuickview" 
-    />
-  </div>
-</template>
-
-<script>
-import CardReview from "./CardReview.vue";
-import Quickview from "./Quickview.vue";
-
-export default {
-  name: 'ListView',
-
-  components: {
-    CardReview,
-    Quickview,
-  },
-
-  props: {
-    starColor: {
-      type: String,
-      default: "#212529",
-    },
-
-    reviews: {
-      type: Object,
-      default: {
-        list: [],
-        orderRating: null,
-        total: 0,
-      },
-    },
-  },
-
-  methods: {
-    openQuickview: function ({ review, slide }) {
-      this.$emit('openQuickview', { review, slide })
-    },
-  },
-};
-</script>