diff options
Diffstat (limited to 'src/client/components/notes.vue')
| -rw-r--r-- | src/client/components/notes.vue | 34 |
1 files changed, 17 insertions, 17 deletions
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue index 2ae8f696f6..f2ea7e929b 100644 --- a/src/client/components/notes.vue +++ b/src/client/components/notes.vue @@ -1,42 +1,41 @@ <template> -<div class="mk-notes"> +<div class="_list_"> <div class="_fullinfo" v-if="empty"> <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/> <div>{{ $t('noNotes') }}</div> </div> - <mk-error v-if="error" @retry="init()"/> + <MkError v-if="error" @retry="init()"/> <div v-show="more && reversed" style="margin-bottom: var(--margin);"> - <button class="_panel _button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> + <button class="_loadMore" v-appear="$store.state.device.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> <template v-if="!moreFetching">{{ $t('loadMore') }}</template> - <template v-if="moreFetching"><mk-loading inline/></template> + <template v-if="moreFetching"><MkLoading inline/></template> </button> </div> - <x-list ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed"> - <x-note :note="note" @updated="updated(note, $event)" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/> - </x-list> + <XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed"> + <XNote :note="note" @update:note="updated(note, $event)" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/> + </XList> <div v-show="more && !reversed" style="margin-top: var(--margin);"> - <button class="_panel _button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> + <button class="_loadMore" v-appear="$store.state.device.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }"> <template v-if="!moreFetching">{{ $t('loadMore') }}</template> - <template v-if="moreFetching"><mk-loading inline/></template> + <template v-if="moreFetching"><MkLoading inline/></template> </button> </div> </div> </template> <script lang="ts"> -import Vue from 'vue'; -import paging from '../scripts/paging'; +import { defineComponent } from 'vue'; +import paging from '@/scripts/paging'; import XNote from './note.vue'; import XList from './date-separated-list.vue'; -import MkButton from './ui/button.vue'; -export default Vue.extend({ +export default defineComponent({ components: { - XNote, XList, MkButton + XNote, XList, }, mixins: [ @@ -68,6 +67,8 @@ export default Vue.extend({ } }, + emits: ['before', 'after'], + computed: { notes(): any[] { return this.prop ? this.items.map(item => item[this.prop]) : this.items; @@ -82,9 +83,9 @@ export default Vue.extend({ updated(oldValue, newValue) { const i = this.notes.findIndex(n => n === oldValue); if (this.prop) { - Vue.set(this.items[i], this.prop, newValue); + this.items[i][this.prop] = newValue; } else { - Vue.set(this.items, i, newValue); + this.items[i] = newValue; } }, @@ -94,4 +95,3 @@ export default Vue.extend({ } }); </script> - |