{"version":3,"file":"ContainerTagsPerformance-CeCEkY0S.js","sources":["../../../app/javascript/src/pages/analysis/components/TagsPerformanceErrorHint.vue","../../../app/javascript/src/pages/analysis/components/TagsPerformanceListItem.vue","../../../app/javascript/src/pages/analysis/components/ContainerTagsPerformance.vue"],"sourcesContent":["<template>\n  <div class=\"tags-performance-error-hint\">\n    <i class=\"tags-performance-error-hint-icon icon-font-exclamation\" />\n    <span class=\"tags-performance-error-hint-description\">\n      {{ description }}\n    </span>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'TagsPerformanceErrorHint',\n  props: {\n    description: {\n      type: String,\n      default: '很抱歉，載入數據發生錯誤 ...',\n    },\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n.tags-performance-error-hint {\n  margin-top: 1.5rem;\n  padding-bottom: 2rem;\n  text-align: left;\n  @media (min-width: 768px) {\n    margin-top: 1rem;\n    padding-bottom: 1.5rem;\n    font-size: 13px;\n  }\n}\n.tags-performance-error-hint-icon {\n  display: inline-block;\n  margin-right: 10px;\n  vertical-align: middle;\n  width: 24px;\n  height: 24px;\n  line-height: 24px;\n  font-size: 12px;\n  font-weight: bold;\n  border: 3px solid;\n  text-align: center;\n  color: #939393;\n  border-radius: 50%;\n  @media (min-width: 768px) {\n    border-color: #ffe9e8;\n    background-color: #ffe9e8;\n    color: #ea5e5b;\n  }\n\n  &:before {\n    line-height: inherit;\n  }\n}\n</style>\n","<template>\n  <li :class=\"['tags-performance-list-item', diffColor]\">\n    <a\n      class=\"tags-performance-list-item-link\"\n      :href=\"item.url\"\n      target=\"_blank\"\n      @click=\"clickItemHandler(item)\"\n    >\n      <div :class=\"['tags-performance-list-item-icon', iconClassName]\">\n        {{ iconText }}\n      </div>\n      <div class=\"tags-performance-list-item-content\">\n        <div class=\"tags-performance-list-item-information\">\n          <div class=\"tags-performance-list-item-name\">\n            {{ item.name }}\n          </div>\n          <div class=\"tags-performance-list-item-diff-percentage\">\n            近一日股價\n            <b class=\"emphasis-diff-percentage\">\n              {{ diffPercentage }}\n            </b>\n          </div>\n        </div>\n        <div class=\"tags-performance-list-item-button\">\n          查看\n        </div>\n      </div>\n    </a>\n  </li>\n</template>\n\n<script>\nexport default {\n  name: 'TagsPerformanceListItem',\n  props: {\n    item: {\n      type: Object,\n      required: true,\n      validator(value) {\n        return Object.keys(value).includes('name')\n          && Object.keys(value).includes('diff_percentage')\n          && Object.keys(value).includes('url')\n      },\n    },\n    clickItemHandler: {\n      type: Function,\n      default: () => {},\n    },\n  },\n  computed: {\n    diffPercentage() {\n      if (this.item.diff_percentage > 0) {\n        return `+${this.item.diff_percentage}%`\n      }\n      if (this.item.diff_percentage < 0) {\n        return `${this.item.diff_percentage}%`\n      }\n\n      return '+0%'\n    },\n    iconText() {\n      return this.item.diff_percentage === 0 ? '-' : ''\n    },\n    iconClassName() {\n      if (this.item.diff_percentage > 0) {\n        return 'icon-font-up'\n      }\n      if (this.item.diff_percentage < 0) {\n        return 'icon-font-down'\n      }\n\n      return ''\n    },\n    diffColor() {\n      if (this.item.diff_percentage > 0) {\n        return 'color-red'\n      }\n      if (this.item.diff_percentage < 0) {\n        return 'color-green'\n      }\n\n      return ''\n    },\n  },\n}\n</script>\n\n<style scoped lang=\"scss\">\n.color-red {\n  .tags-performance-list-item-icon {\n    background-color: #ffe9e8;\n    color: #ea5e5b;\n  }\n  .emphasis-diff-percentage {\n    color: #ea5e5b;\n  }\n}\n.color-green {\n  .tags-performance-list-item-icon {\n    background-color: #e3f3e0;\n    color: #51A551;\n  }\n  .emphasis-diff-percentage {\n    color: #51A551;\n  }\n}\n\n.tags-performance-list-item {\n  &:last-child > .tags-performance-list-item-link {\n    border-bottom: none;\n    padding-bottom: 0rem;\n\n    @media (min-width: 768px) {\n      padding-bottom: 12px;\n    }\n  }\n}\n\n.tags-performance-list-item-link {\n  display: block;\n  position: relative;\n  margin-top: 1rem;\n  padding-bottom: 1rem;\n  margin-left: 54px;\n  border-bottom: 1px dotted #dfdfdf;\n  line-height: normal;\n  cursor: pointer;\n  text-decoration: none;\n  color: #434343;\n  @media (min-width: 768px) {\n    margin-top: 12px;\n    padding-bottom: 12px;\n    margin-left: 51px;\n  }\n}\n\n.tags-performance-list-item-icon {\n  position: absolute;\n  left: -54px;\n  width: 42px;\n  height: 42px;\n  line-height: 42px;\n  font-size: 18px;\n  text-align: center;\n  background-color: #f1f1f1;\n  border-radius: 6px;\n  @media (min-width: 768px) {\n    left: -51px;\n  }\n\n  &::before {\n    line-height: 42px;\n  }\n}\n.tags-performance-list-item-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.875rem;\n  @media (min-width: 768px) {\n    font-size: 13px;\n  }\n}\n\n.tags-performance-list-item-information {\n  width: 75%;\n  .tags-performance-list-item-name {\n    font-weight: bold;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  .tags-performance-list-item-diff-percentage {\n    margin-top: 3px;\n    color: #636363;\n  }\n}\n.tags-performance-list-item-button {\n  font-weight: bold;\n  padding: 6px 18px;\n  background-color: #eaf5fb;\n  color: #0386f4;\n  border-radius: 15px;\n  @media (min-width: 768px) {\n    padding: 6px 12px;\n  }\n}\n</style>\n","<template>\n  <div class=\"tags-performance-container\">\n    <h3 class=\"tags-performance-title\">\n      {{ title }}\n    </h3>\n    <p\n      v-if=\"shouldShowDescription\"\n      class=\"tags-performance-description\"\n    >\n      {{ description }}\n    </p>\n    <template v-if=\"shouldShowTagsPerformanceList\">\n      <div class=\"tags-performance-list-block\">\n        <ul class=\"tags-performance-list\">\n          <TagsPerformanceListItem\n            v-for=\"(listItem, index) in tagsPerformanceList\"\n            :key=\"index\"\n            :item=\"listItem\"\n            :click-item-handler=\"clickItemHandler\"\n          />\n        </ul>\n\n        <a\n          v-if=\"!isSignedIn\"\n          class=\"tags-performance-sign-up-hint\"\n          :href=\"maskCTALink\"\n        >\n          <div class=\"tags-performance-sign-up-hint-button\">\n            點我查看完整內容\n          </div>\n        </a>\n      </div>\n    </template>\n    <template v-else-if=\"shouldShowLoading\">\n      <CommonLoadingHint class=\"tags-performance-common-loading\" />\n    </template>\n    <template v-else>\n      <TagsPerformanceErrorHint />\n    </template>\n  </div>\n</template>\n\n<script>\nimport { CommonLoadingHint } from '@/modules/shared/components/CommonHint'\n\nimport TagsPerformanceErrorHint from './TagsPerformanceErrorHint.vue'\nimport TagsPerformanceListItem from './TagsPerformanceListItem.vue'\n\nexport default {\n  name: 'ContainerTagsPerformance',\n  components: {\n    TagsPerformanceListItem,\n    CommonLoadingHint,\n    TagsPerformanceErrorHint,\n  },\n  props: {\n    title: {\n      type: String,\n      required: true,\n    },\n    description: {\n      type: String,\n      default: '',\n    },\n    tagsPerformanceList: {\n      type: Array,\n      default: () => ([]),\n      validator(list) {\n        if (list.length === 0) return true\n        return list.length > 0 && list.every((item) => (Object.keys(item).includes('name')\n          && Object.keys(item).includes('diff_percentage')\n          && Object.keys(item).includes('url')))\n      },\n    },\n    isLoading: {\n      type: Boolean,\n      default: false,\n    },\n    hasLoadingError: {\n      type: Boolean,\n      default: false,\n    },\n    isSignedIn: {\n      type: Boolean,\n      required: true,\n    },\n    clickItemHandler: {\n      type: Function,\n      default: () => {},\n    },\n  },\n  computed: {\n    shouldShowDescription() {\n      return this.description.length > 0\n    },\n    shouldShowTagsPerformanceList() {\n      return this.tagsPerformanceList.length > 0 && !this.isLoading && !this.hasLoadingError\n    },\n    shouldShowLoading() {\n      return this.isLoading && !this.hasLoadingError\n    },\n    maskCTALink() {\n      return '/users/sign_up'\n    },\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.tags-performance-container {\n  background-color: #fff;\n  color: #434343;\n  text-align: left;\n\n  @media (min-width: 768px) {\n    margin: 6px 0;\n    padding-left: 15px;\n    padding-right: 15px;\n    border: 1px solid #dfdfdf;\n    box-shadow: none;\n    border-radius: 3px;\n  }\n}\n.tags-performance-title {\n  margin-top: 0;\n  margin-bottom: 1rem;\n  font-size: 1.5rem;\n  font-weight: bold;\n\n  @media (min-width: 768px) {\n    padding-top: 15px;\n    margin-bottom: 12px;\n    font-size: 18px;\n  }\n}\n.tags-performance-description {\n  font-size: 0.875rem;\n  line-height: 165%;\n\n  @media (min-width: 768px) {\n    font-size: 13px;\n    line-height: 180%;\n  }\n}\n\n.tags-performance-list {\n  margin: 0;\n  text-align: left;\n  list-style: none;\n\n  @media (min-width: 768px) {\n    margin-top: 3px;\n    padding-bottom: 3px;\n  }\n}\n.tags-performance-common-loading {\n  box-sizing: border-box;\n  height: 315px;\n  margin-top: 3px;\n  padding: 4.5rem 0;\n}\n\n.tags-performance-list-block {\n  position: relative;\n\n  .tags-performance-sign-up-hint {\n    display: block;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 100%;\n    cursor: pointer;\n    background-image: linear-gradient(to bottom, transparent, #fff 75%);\n\n    .tags-performance-sign-up-hint-button {\n      position: absolute;\n      bottom: 1.5rem;\n      text-align: center;\n      color: #fff;\n      font-size: 1rem;\n      font-weight: bold;\n      background-color: #0386f4;\n      width: 100%;\n      height: 44px;\n      line-height: 44px;\n      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n      border-radius: 4px;\n      cursor: pointer;\n\n      @media (min-width: 768px) {\n        font-size: 15px;\n        bottom: 15px;\n        border-radius: 6px;\n      }\n    }\n  }\n}\n</style>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_createElementVNode","_toDisplayString","$props","value","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_normalizeClass","$options","_cache","$event","_createTextVNode","TagsPerformanceListItem","CommonLoadingHint","TagsPerformanceErrorHint","list","item","_createCommentVNode","_Fragment","_renderList","listItem","index","_createBlock","_component_TagsPerformanceListItem","_component_CommonLoadingHint","_component_TagsPerformanceErrorHint"],"mappings":"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"}