{"version":3,"sources":["webpack:///./src/components/miniapp/home/Trending.vue?f995","webpack:///./src/components/commons/ListItem.vue?73be","webpack:///src/components/commons/ListItem.vue","webpack:///./src/components/commons/ListItem.vue?724f","webpack:///./src/components/commons/ListItem.vue","webpack:///./src/components/commons/ListItem.vue?545c","webpack:///./src/components/miniapp/home/Trending.vue?522b","webpack:///src/components/miniapp/home/Trending.vue","webpack:///./src/components/miniapp/home/Trending.vue?6ea8","webpack:///./src/components/miniapp/home/Trending.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","class","showBadge","attrs","dataAction","dataListname","dataStockname","dataFundname","on","$event","action","query","staticClass","_v","_s","index","_e","type","goldStyle","name","_f","date","color","change","period","price","staticRenderFns","props","String","default","Number","Function","Object","Boolean","computed","methods","filters","calendar","timestamp","currency","arg1","toNumber","minimumFractionDigits","maximumFractionDigits","percent","val","parseFloat","toFixed","component","_m","_l","fund","key","id","short_code","data_date","nav","return_1d","navigateToFund","modalSize","closeModal","slot","openModal","components","Tab","Tabs","ListItem","ModalSlideUp","data","highlight","showModal","created","findStockTrendingList","findFundTrendingList","moment","format","document","documentElement","style","overflow","$router","push","navigateToMarket","decodeURIComponent","window","location","href","includes","replace"],"mappings":"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","file":"js/chunk-04b88403.9c09d648.js","sourcesContent":["import mod from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Trending.vue?vue&type=style&index=0&id=7a54fecf&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Trending.vue?vue&type=style&index=0&id=7a54fecf&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[_vm.showBadge ? 'list-item list-badge' : 'list-item'],attrs:{\"data-action\":_vm.dataAction,\"data-listname\":_vm.dataListname,\"data-stockname\":_vm.dataStockname,\"data-fundname\":_vm.dataFundname},on:{\"click\":function($event){return _vm.action(_vm.query)}}},[(_vm.index)?_c('div',{staticClass:\"index vertical-center\"},[_vm._v(_vm._s(_vm.index))]):_vm._e(),(_vm.showBadge)?_c('div',{staticClass:\"small-left vertical-center\"},[_c('div',{staticClass:\"badge\"},[_vm._v(_vm._s(_vm.query.type))])]):_vm._e(),_c('div',{staticClass:\"left vertical-center\",class:_vm.goldStyle},[_c('h3',[_vm._v(_vm._s(_vm.name))]),_c('p',[_c('i',{staticClass:\"far fa-clock\"}),_vm._v(\" \"+_vm._s(_vm._f(\"calendar\")(_vm.date))+\" \")])]),_c('div',{staticClass:\"middle vertical-center\",class:_vm.goldStyle},[_c('h4',{class:_vm.color},[_vm._v(_vm._s(_vm._f(\"percent\")(_vm.change)))]),_c('p',[_vm._v(_vm._s(_vm.period))])]),_c('div',{staticClass:\"right vertical-center\",class:_vm.goldStyle},[_c('div',{staticClass:\"row\"},[_c('h4',[_vm._v(_vm._s(_vm._f(\"currency\")(_vm.price,_vm.dataAction))+\" ฿\")]),_c('i',{staticClass:\"fas fa-chevron-right\"})])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div\n    :class=\"[showBadge ? 'list-item list-badge' : 'list-item']\"\n    :data-action=\"dataAction\"\n    :data-listname=\"dataListname\"\n    :data-stockname=\"dataStockname\"\n    :data-fundname=\"dataFundname\"\n    @click=\"action(query)\"\n  >\n    <div v-if=\"index\" class=\"index vertical-center\">{{ index }}</div>\n    <div v-if=\"showBadge\" class=\"small-left vertical-center\">\n      <div class=\"badge\">{{query.type}}</div>\n    </div>\n    <div class=\"left vertical-center\" :class=\"goldStyle\">\n      <h3>{{ name }}</h3>\n      <p>\n        <i class=\"far fa-clock\"></i>\n        {{ date | calendar }}\n      </p>\n    </div>\n    <div class=\"middle vertical-center\" :class=\"goldStyle\">\n      <h4 :class=\"color\">{{ change | percent }}</h4>\n      <p>{{ period }}</p>\n    </div>\n    <div class=\"right vertical-center\" :class=\"goldStyle\">\n      <div class=\"row\">\n        <h4>{{ price | currency(dataAction) }} ฿</h4>\n        <i class=\"fas fa-chevron-right\"></i>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport moment from \"moment\"\n\nexport default {\n  name: \"list-item\",\n  props: {\n    name: {\n      type: String,\n      default: \"loading\"\n    },\n    dataFundname: {\n      type: String,\n      default: null\n    },\n    dataStockname: {\n      type: String,\n      default: null\n    },\n    dataListname: {\n      type: String,\n      default: null\n    },\n    dataAction: {\n      type: String,\n      default: null\n    },\n    date: {\n      type: String,\n      default: null\n    },\n    change: {\n      type: [Number, String],\n      default: null\n    },\n    period: {\n      type: String,\n      default: \"\"\n    },\n    price: {\n      type: [Number, String],\n      default: null\n    },\n    action: {\n      type: Function\n    },\n    query: {\n      type: Object\n    },\n    index: {\n      type: Number\n    },\n    showBadge: {\n      type: Boolean,\n      default: false\n    },\n    goldStyle: {\n      type: String,\n      default: \"\"\n    }\n  },\n  computed: {\n    color: function() {\n      if (this.change > 0) {\n        return { green: true }\n      } else if (this.change < 0) {\n        return { red: true }\n      }\n\n      return { normal: true }\n    }\n  },\n  methods: {},\n  filters: {\n    calendar(timestamp) {\n      if (timestamp) {\n        return moment(timestamp).format(\"DD/MM/YY\")\n      }\n      return \"\"\n    },\n    currency: function(val,arg1) {\n      let toNumber = parseFloat(val)\n      if (arg1 == \"open_fund\") {\n        return toNumber\n        .toLocaleString(\"th\", {\n          minimumFractionDigits: 4,\n          maximumFractionDigits: 4\n        })\n      } else {\n        return toNumber\n        .toLocaleString(\"th\", {\n          minimumFractionDigits: 2,\n          maximumFractionDigits: 2\n        })\n        .replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")\n      }\n    },\n    percent: function(val) {\n      if (val > 0) {\n        return \"+\" + parseFloat(val).toFixed(2) + \" %\"\n      }\n\n      return parseFloat(val).toFixed(2) + \" %\"\n    }\n  }\n}\n</script>\n\n<style lang='scss' scoped>\n.list-item {\n  display: flex;\n  justify-content: space-between;\n  color: $color-normal-text;\n  height: 67px;\n  position: relative;\n  padding-left: 16px;\n  pointer-events: auto;\n\n  .badge {\n    @extend %font-size-ss;\n    text-transform: uppercase;\n    transform: rotate(-90deg);\n    color: #d1d1d1;\n    font-weight: bold;\n    pointer-events: none;\n    text-align: center;\n    width: 64px;\n    position: absolute;\n    left: -16px;\n  }\n\n  .index {\n    color: $color-secondary;\n    @extend %font-size-m;\n    pointer-events: none;\n    margin-right: 14px;\n    font-weight: bold;\n  }\n\n  border-bottom-right-radius: 4px;\n  border-bottom-left-radius: 4px;\n  box-shadow: 0 0 4px 0 rgba(186, 186, 186, 0.24), 0 0 6px 0 rgba(228, 232, 234, 0);\n  background-color: $base-white;\n\n  .vertical-center {\n    pointer-events: none;\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n  }\n\n  .small-left {\n    pointer-events: none;\n    background-color: #f9f9f9;\n    width: 10%;\n    margin-right: 16px;\n  }\n  .left {\n    pointer-events: none;\n    width: 32%;\n    p {\n      @extend %font-size-ss;\n      color: $color-secondary-text;\n    }\n  }\n\n  .middle {\n    pointer-events: none;\n    width: 20%;\n    text-align: center;\n    p {\n      color: $color-secondary-text;\n    }\n  }\n\n  .gold-style {\n    pointer-events: none;\n    h3 {\n      @extend %font-size-ss;\n    }\n    h4 {\n      @extend %font-size-ss;\n    }\n  }\n\n  .right {\n    pointer-events: none;\n    width: 38%;\n    display: flex;\n    text-align: right;\n\n    .row {\n      h4 {\n        font-weight: normal;\n        display: inline-block;\n      }\n      i {\n        font-weight: normal;\n        display: inline-block;\n        // iphone 5\n        @media screen and (device-aspect-ratio: 40/71) {\n          margin-left: 10px;\n          margin-right: 10px;\n        }\n        margin-left: 18px;\n        margin-right: 16px;\n        color: $color-light-grey-2;\n        font-size: 12px;\n      }\n    }\n  }\n}\n\nh3 {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  @extend %font-size-s;\n  margin: 0px;\n}\n\nh4 {\n  margin: 0px;\n  @extend %font-size-s;\n}\n\np {\n  margin: 0px;\n  @extend %font-size-ss;\n}\n\n.green {\n  color: $color-plus;\n}\n\n.red {\n  color: $color-minus;\n}\n\n.list-item:last-child {\n  border-bottom: none;\n}\n\n.list-badge {\n  padding-left: 0px !important;\n  margin: 16px 0;\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ListItem.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ListItem.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ListItem.vue?vue&type=template&id=64bc8952&scoped=true&\"\nimport script from \"./ListItem.vue?vue&type=script&lang=js&\"\nexport * from \"./ListItem.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ListItem.vue?vue&type=style&index=0&id=64bc8952&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"64bc8952\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ListItem.vue?vue&type=style&index=0&id=64bc8952&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ListItem.vue?vue&type=style&index=0&id=64bc8952&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"trending-container\"}},[_vm._m(0),_vm._l((_vm.getTrendingFundTopThreeList),function(fund){return _c('list-item',{key:fund.id,staticClass:\"list\",attrs:{\"data-action\":\"open_fund\",\"data-listname\":\"home_trending\",\"data-fundname\":fund.short_code,\"name\":fund.short_code,\"date\":fund.data_date,\"period\":'1 Day',\"price\":fund.nav,\"change\":fund.return_1d,\"action\":_vm.navigateToFund,\"query\":{id:fund.id}}})}),(_vm.showModal)?_c('modal-slide-up',{staticClass:\"modal\",attrs:{\"options\":{modalSize: 'tall'},\"padding\":false},on:{\"close-modal\":_vm.closeModal}},[_c('div',{attrs:{\"slot\":\"header\",\"id\":\"modal-header\"},slot:\"header\"},[_vm._v(\"กองทุนยอดนิยม\")]),_c('div',{staticClass:\"modal-item-list\",attrs:{\"slot\":\"body\"},slot:\"body\"},_vm._l((_vm.getTrendingFundList),function(fund,index){return _c('list-item',{key:fund.id,attrs:{\"data-action\":\"open_fund\",\"data-listname\":\"trending_modal\",\"data-fundname\":fund.short_code,\"index\":index + 1,\"name\":fund.short_code,\"date\":fund.data_date,\"period\":'1 Day',\"price\":fund.nav,\"change\":fund.return_1d,\"action\":_vm.navigateToFund,\"query\":{id:fund.id}}})}),1)]):_vm._e(),_c('div',{staticClass:\"footer\"},[_c('div',{attrs:{\"data-action\":\"view_all_trending\",\"id\":\"see-all-btn\"},on:{\"click\":function($event){return _vm.openModal()}}},[_vm._v(\"ดูทั้งหมด\")])])],2)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('h2',[_c('i',{staticClass:\"fas fa-poll\"}),_vm._v(\" กองทุนยอดนิยม \")])}]\n\nexport { render, staticRenderFns }","<template>\n  <div id=\"trending-container\">\n    <h2>\n      <i class=\"fas fa-poll\"></i>\n      กองทุนยอดนิยม\n    </h2>\n    <list-item class=\"list\"\n      v-for=\"fund in getTrendingFundTopThreeList\"\n      data-action=\"open_fund\"\n      data-listname=\"home_trending\"\n      :data-fundname=\"fund.short_code\"\n      :key=\"fund.id\"\n      :name=\"fund.short_code\"\n      :date=\"fund.data_date\"\n      :period=\"'1 Day'\"\n      :price=\"fund.nav\"\n      :change=\"fund.return_1d\"\n      :action=\"navigateToFund\"\n        :query=\"{id:fund.id}\"\n    />\n    <!-- <tabs class=\"list\">\n      <tab name=\"กองทุน\" data-tab=\"home_trending_fund\" :selected=\"true\">\n        <list-item\n          v-for=\"fund in getTrendingFundTopThreeList\"\n          data-action=\"open_fund\"\n          data-listname=\"home_trending\"\n          :data-fundname=\"fund.short_code\"\n          :key=\"fund.id\"\n          :name=\"fund.short_code\"\n          :date=\"fund.data_date\"\n          :period=\"'1 Day'\"\n          :price=\"fund.nav\"\n          :change=\"fund.return_1d\"\n          :action=\"navigateToFund\"\n          :query=\"{id:fund.id}\"\n        ></list-item>\n      </tab>\n      <tab name=\"หุ้น\" data-tab=\"home_trending_stock\">\n        <list-item\n          v-for=\"stock in getTrendingStockTopThreeList\"\n          data-action=\"open_stock\"\n          data-listname=\"home_trending\"\n          :data-stockname=\"stock.security_name\"\n          :key=\"stock.security_id\"\n          :name=\"stock.security_name\"\n          :date=\"stock.data_date\"\n          :period=\"'1 Day'\"\n          :price=\"stock.close\"\n          :change=\"stock.return_1d\"\n          :action=\"navigateToStock\"\n          :query=\"{name: stock.security_name}\"\n        ></list-item>\n      </tab>\n    </tabs> -->\n\n    <modal-slide-up\n      v-if=\"showModal\"\n      :options=\"{modalSize: 'tall'}\"\n      @close-modal=\"closeModal\"\n      class=\"modal\"\n      :padding=\"false\"\n    >\n      <div id=\"modal-header\" slot=\"header\">กองทุนยอดนิยม</div>\n      <div class=\"modal-item-list\" slot=\"body\">\n        <list-item\n        v-for=\"(fund,index) in getTrendingFundList\"\n        data-action=\"open_fund\"\n        data-listname=\"trending_modal\"\n        :data-fundname=\"fund.short_code\"\n        :key=\"fund.id\"\n        :index=\"index + 1\"\n        :name=\"fund.short_code\"\n        :date=\"fund.data_date\"\n        :period=\"'1 Day'\"\n        :price=\"fund.nav\"\n        :change=\"fund.return_1d\"\n        :action=\"navigateToFund\"\n        :query=\"{id:fund.id}\"\n        />\n      </div>\n      <!-- <tabs class=\"modal-item-list\" slot=\"body\">\n        <tab name=\"กองทุน\" data-tab=\"home_trending_fund\" :selected=\"true\">\n          <list-item\n            v-for=\"(fund,index) in getTrendingFundList\"\n            data-action=\"open_fund\"\n            data-listname=\"trending_modal\"\n            :data-fundname=\"fund.short_code\"\n            :key=\"fund.id\"\n            :index=\"index + 1\"\n            :name=\"fund.short_code\"\n            :date=\"fund.data_date\"\n            :period=\"'1 Day'\"\n            :price=\"fund.nav\"\n            :change=\"fund.return_1d\"\n            :action=\"navigateToFund\"\n            :query=\"{id:fund.id}\"\n          ></list-item>\n        </tab>\n        <tab name=\"หุ้น\" data-tab=\"home_trending_stock\">\n          <list-item\n            v-for=\"(stock,index) in getTrendingStockList\"\n            data-action=\"open_stock\"\n            data-listname=\"trending_modal\"\n            :data-stockname=\"stock.security_name\"\n            :index=\"index + 1\"\n            :key=\"stock.security_id\"\n            :name=\"stock.security_name\"\n            :date=\"stock.data_date\"\n            :period=\"'1 Day'\"\n            :price=\"stock.close\"\n            :change=\"stock.return_1d\"\n            :action=\"navigateToStock\"\n            :query=\"{name: stock.security_name}\"\n          ></list-item>\n        </tab>\n      </tabs> -->\n    </modal-slide-up>\n\n    <div class=\"footer\">\n      <div data-action=\"view_all_trending\" id=\"see-all-btn\" @click=\"openModal()\">ดูทั้งหมด</div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { mapActions, mapGetters } from \"vuex\"\nimport Tab from \"../../commons/Tab\"\nimport Tabs from \"../../commons/Tabs\"\nimport ListItem from \"../../commons/ListItem\"\nimport ModalSlideUp from \"../global/ModalSlideUp\"\n\nexport default {\n  components: {\n    Tab,\n    Tabs,\n    ListItem,\n    ModalSlideUp\n  },\n  data() {\n    return {\n      highlight: {},\n      showModal: false\n    }\n  },\n  created() {\n    this.findStockTrendingList()\n    this.findFundTrendingList()\n  },\n  computed: {\n    ...mapGetters(\"fund\", [\"getTrendingFundList\", \"getTrendingFundTopThreeList\"]),\n    ...mapGetters(\"stock\", [\"getTrendingStockList\", \"getTrendingStockTopThreeList\"])\n  },\n  filters: {\n    date(timestamp) {\n      return moment(timestamp).format(\"DD/MM/YY\")\n    }\n  },\n  methods: {\n    ...mapActions(\"stock\", [\"findStockTrendingList\", \"findStockQuote\"]),\n    ...mapActions(\"fund\", [\"findFundTrendingList\"]),\n    async navigateToStock(query) {\n      document.documentElement.style.overflow = null\n      const hasInfo = await this.findStockQuote(query.name)\n      hasInfo\n        ? this.$router.push({\n            name: \"miniapp-stock-quote\",\n            query: query\n          })\n        : null\n      // this.$router.push({ name: \"miniapp-stock-quote\", query: query });\n    },\n    navigateToFund(query) {\n      document.documentElement.style.overflow = null\n      this.$router.push({ name: \"miniapp-fund-quote\", query: query })\n    },\n    navigateToMarket() {\n      if (decodeURIComponent(window.location.href).includes(\"#หุ้น\")) {\n        this.$router.push({ name: \"miniapp-market-stock\" })\n      } else {\n        this.$router.push({ name: \"miniapp-market-fund\" })\n      }\n    },\n    openModal() {\n      this.showModal = true\n      this.$router.replace({\n        query: { openModal: true }\n      })\n    },\n    closeModal() {\n      this.showModal = false\n      let query = Object.assign({}, this.$route.query)\n      delete query.openModal\n      this.$router.replace({ query })\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#trending-container {\n  color: $color-normal-text;\n\n  h2 {\n    margin-bottom: 8px;\n    @extend %font-size-m;\n  }\n\n  #modal-header {\n    font-family: DBHeaventRez;\n    @extend %font-size-s;\n    width: 100%;\n    text-align: center;\n    font-weight: bold;\n  }\n\n  .modal-item-list {\n    margin: 0px;\n    min-height: 824px;\n    overflow: auto;\n  }\n\n  .list {\n    border-radius: 4px;\n    box-shadow: 0 0 4px 0 rgba(186, 186, 186, 0.24), 0 0 6px 0 rgba(228, 232, 234, 0);\n    background-color: $base-white;\n  }\n\n  .footer {\n    display: flex;\n    justify-content: center;\n    text-align: center;\n    #see-all-btn {\n      margin: 16px;\n      font-weight: bold;\n      text-align: center;\n      color: $color-secondary;\n      display: block;\n      @extend %font-size-ss;\n      border-bottom: 2px solid $color-secondary;\n    }\n  }\n}\n</style>","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Trending.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Trending.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Trending.vue?vue&type=template&id=7a54fecf&scoped=true&\"\nimport script from \"./Trending.vue?vue&type=script&lang=js&\"\nexport * from \"./Trending.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Trending.vue?vue&type=style&index=0&id=7a54fecf&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"7a54fecf\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}