sim1222/nca10.net
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: Composition APIへ移行 (#8121)

Browse Source 
* components/abuse-report-window.vue

* use <script setup>

* ✌️

* components/analog-clock.vue

* wip components/autocomplete.vue

* ✌️

* ✌️

* fix

* wip components/captcha.vue

* clean up

* components/channel-follow-button

* components/channel-preview.vue

* components/core-core.vue

* components/code.vue

* wip components/date-separated-list.vue

* fix

* fix autocomplete.vue

* ✌️

* remove global property

* use <script setup>

* components/dialog.vue

* clena up

* fix dialog.vue

* Resolve https://github.com/misskey-dev/misskey/pull/8121#discussion_r781250966
This commit is contained in:
tamaina
2022-01-11 00:05:18 +09:00
committed by GitHub
parent 06125e6820
commit 8855a5fffb
11 changed files with 614 additions and 756 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/client/src/components/date-separated-list.vue
View File

@ -1,6 +1,8 @@
<script lang="ts">
import { defineComponent, h, PropType, TransitionGroup } from 'vue';
import MkAd from '@/components/global/ad.vue';
import { i18n } from '@/i18n';
import { defaultStore } from '@/store';
export default defineComponent({
props: {
@ -30,29 +32,29 @@ export default defineComponent({
},
},
methods: {
getDateText(time: string) {
setup(props, { slots, expose }) {
function getDateText(time: string) {
const date = new Date(time).getDate();
const month = new Date(time).getMonth() + 1;
return this.$t('monthAndDay', {
return i18n.t('monthAndDay', {
month: month.toString(),
day: date.toString()
});
}
},
render() {
if (this.items.length === 0) return;
if (props.items.length === 0) return;
const renderChildren = () => this.items.map((item, i) => {
const el = this.$slots.default({
const renderChildren = () => props.items.map((item, i) => {
if (!slots || !slots.default) return;
const el = 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()
i != props.items.length - 1 &&
new Date(item.createdAt).getDate() != new Date(props.items[i + 1].createdAt).getDate()
) {
const separator = h('div', {
class: 'separator',
@ -64,10 +66,10 @@ export default defineComponent({
h('i', {
class: 'fas fa-angle-up icon',
}),
this.getDateText(item.createdAt)
getDateText(item.createdAt)
]),
h('span', [
this.getDateText(this.items[i + 1].createdAt),
getDateText(props.items[i + 1].createdAt),
h('i', {
class: 'fas fa-angle-down icon',
})
@ -76,7 +78,7 @@ export default defineComponent({
return [el, separator];
} else {
if (this.ad && item._shouldInsertAd_) {
if (props.ad && item._shouldInsertAd_) {
return [h(MkAd, {
class: 'a', // advertiseの意(ブロッカー対策)
key: item.id + ':ad',
@ -88,18 +90,19 @@ export default defineComponent({
}
});
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
});
},
return () => h(
defaultStore.state.animation ? TransitionGroup : 'div',
defaultStore.state.animation ? {
class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
name: 'list',
tag: 'div',
'data-direction': props.direction,
'data-reversed': props.reversed ? 'true' : 'false',
} : {
class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
},
{ default: renderChildren });
}
});
</script>