diff options
Diffstat (limited to 'src/client/components/date-separated-list.vue')
| -rw-r--r-- | src/client/components/date-separated-list.vue | 188 |
1 files changed, 0 insertions, 188 deletions
diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue deleted file mode 100644 index fa0b6d669c..0000000000 --- a/src/client/components/date-separated-list.vue +++ /dev/null @@ -1,188 +0,0 @@ -<script lang="ts"> -import { defineComponent, h, PropType, TransitionGroup } from 'vue'; -import MkAd from '@client/components/global/ad.vue'; - -export default defineComponent({ - props: { - items: { - type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>, - required: true, - }, - direction: { - type: String, - required: false, - default: 'down' - }, - reversed: { - type: Boolean, - required: false, - default: false - }, - noGap: { - type: Boolean, - required: false, - default: false - }, - ad: { - type: Boolean, - required: false, - default: false - }, - }, - - methods: { - focus() { - this.$slots.default[0].elm.focus(); - }, - - getDateText(time: string) { - const date = new Date(time).getDate(); - const month = new Date(time).getMonth() + 1; - return this.$t('monthAndDay', { - month: month.toString(), - day: date.toString() - }); - } - }, - - render() { - if (this.items.length === 0) return; - - const renderChildren = () => this.items.map((item, i) => { - const el = this.$slots.default({ - item: item - })[0]; - if (el.key == null && item.id) el.key = item.id; - - if ( - i != this.items.length - 1 && - new Date(item.createdAt).getDate() != new Date(this.items[i + 1].createdAt).getDate() - ) { - const separator = h('div', { - class: 'separator', - key: item.id + ':separator', - }, h('p', { - class: 'date' - }, [ - h('span', [ - h('i', { - class: 'fas fa-angle-up icon', - }), - this.getDateText(item.createdAt) - ]), - h('span', [ - this.getDateText(this.items[i + 1].createdAt), - h('i', { - class: 'fas fa-angle-down icon', - }) - ]) - ])); - - return [el, separator]; - } else { - if (this.ad && item._shouldInsertAd_) { - return [h(MkAd, { - class: 'a', // advertiseの意(ブロッカー対策) - key: item.id + ':ad', - prefer: ['horizontal', 'horizontal-big'], - }), el]; - } else { - return el; - } - } - }); - - return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? { - class: 'sqadhkmv' + (this.noGap ? ' noGap' : ''), - name: 'list', - tag: 'div', - 'data-direction': this.direction, - 'data-reversed': this.reversed ? 'true' : 'false', - } : { - class: 'sqadhkmv' + (this.noGap ? ' noGap' : ''), - }, { - default: renderChildren - }); - }, -}); -</script> - -<style lang="scss"> -.sqadhkmv { - > *:empty { - display: none; - } - - > *:not(:last-child) { - margin-bottom: var(--margin); - } - - > .list-move { - transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); - } - - > .list-enter-active { - transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1); - } - - &[data-direction="up"] { - > .list-enter-from { - opacity: 0; - transform: translateY(64px); - } - } - - &[data-direction="down"] { - > .list-enter-from { - opacity: 0; - transform: translateY(-64px); - } - } - - > .separator { - text-align: center; - - > .date { - display: inline-block; - position: relative; - margin: 0; - padding: 0 16px; - line-height: 32px; - text-align: center; - font-size: 12px; - color: var(--dateLabelFg); - - > span { - &:first-child { - margin-right: 8px; - - > .icon { - margin-right: 8px; - } - } - - &:last-child { - margin-left: 8px; - - > .icon { - margin-left: 8px; - } - } - } - } - } - - &.noGap { - > * { - margin: 0 !important; - border: none; - border-radius: 0; - box-shadow: none; - - &:not(:last-child) { - border-bottom: solid 0.5px var(--divider); - } - } - } -} -</style> |