ShowEasyFrontEnd/FrontEnd/components/newComponent/sort/sort.vue

<template>
  <div
    class="sort xl:tw-px-[35px] xl:tw-py-[30px] xl:tw-border-solid xl:tw-border xl:tw-border-neutrals-200 xl:tw-rounded-[30px]">
    <!-- tw-mb-[26px] xl:tw-mb-[30px] -->
    <div class="">
      <span class="t20 tw-text-primary-1">{{ results
      }}<span class="tw-body-3 tw-ml-[10px] tw-text-[#757575]">{{
        $t("Results")
        }}</span></span>
    </div>
    <div class="tw-hidden xl:tw-block">
      <div class="tw-flex tw-justify-items-start tw-gap-[50px] tw-pt-[20px]">
      <div class="tw-body-3">
        {{ $t("Sort By") }}
      </div>
      <div class="tw-body-3">
        |
      </div>
      <div class="" v-for="(item, index) in sortType" :key="index">
          <button :for="item.value" class="tw-body-3 tw-text-base-secondary focus:tw-text-primary-1" @click="onClick(item)">
            {{ $t(item.name) }}
          </button>
        </div>
    </div>
    </div>
    <div class="element tw-flex tw-justify-between tw-items-cente xl:tw-hidden">
      <button class="btn-filter tw-text-transparent" @click="$emit('filter', true)">
        filter
      </button>
      <select class="tw-py-[9px] tw-rounded-[10px]" name="sort_by" v-model="sort" @change="onChnage()">
        <option value="0">{{ $t("Select option") }}</option>
        <option v-for="item in sortType" :key=item.value :value="item.value">
          {{ $t(item.name) }}
        </option>
      </select>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    results: {
      type: Number,
    },
    sortType: {
      type: Array,
    },
    sortBy: {
      type: String,
    },
  },
  data() {
    return {
      sort: this.sortBy ? this.sortBy : "0",
      options: {}
    };
  },
  watch: {
    sortBy: {
      handler: function () {
        this.sort = this.sortBy;
      },
    },
    sort: {
      handler: function () {
        this.$emit("sort", this.sort);
      },
    },
  },
  methods: {
    onClick(item) {
      this.sort = item.value;
    },
    onChnage() {
      this.$emit("sort", this.sort);
    }
  },
};
</script>
<style lang="scss" scoped>
label {
  cursor: pointer;
  transition: all 0.2s linear;
}

// input:checked+label {
//   color: #f48800 !important;
// }

select {
  background-image: url("~/assets/svg/down-arrow.svg");
  background-size: 9px 6px;
  background-position: right 20px center;
  background-repeat: no-repeat;
}

.rightBorder {
  position: relative;
  color: #757575;

  &::after {
    position: absolute;
    display: block;
    content: " ";
    width: 1px;
    height: 13px;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    background-color: #e5e5e5;
  }
}

.btn-filter {
  background-image: url("~/assets/svg/filter.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 40px;
}
</style>