wip: refactor(client): migrate paging components to composition api

This commit is contained in:
syuilo 2022-01-13 02:55:19 +09:00
parent bd1f741dad
commit ef4d78dda2
2 changed files with 30 additions and 61 deletions

View file

@ -4,31 +4,19 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { computed } from 'vue';
import * as misskey from 'misskey-js';
import { $i } from '@/account';
import XReaction from './reactions-viewer.reaction.vue';
export default defineComponent({
components: {
XReaction
},
props: {
note: {
type: Object,
required: true
},
},
data() {
return {
initialReactions: new Set(Object.keys(this.note.reactions))
};
},
computed: {
isMe(): boolean {
return this.$i && this.$i.id === this.note.userId;
},
},
});
const props = defineProps<{
note: misskey.entities.Note;
}>();
const initialReactions = new Set(Object.keys(props.note.reactions));
const isMe = computed(() => $i && $i.id === props.note.userId);
</script>
<style lang="scss" scoped>

View file

@ -1,5 +1,5 @@
<template>
<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="$emit('closed')">
<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')">
<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
<i v-if="success" class="fas fa-check icon success"></i>
<i v-else class="fas fa-spinner fa-pulse icon waiting"></i>
@ -8,49 +8,30 @@
</MkModal>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { watch, ref } from 'vue';
import MkModal from '@/components/ui/modal.vue';
export default defineComponent({
components: {
MkModal,
},
const modal = ref<InstanceType<typeof MkModal>>();
props: {
success: {
type: Boolean,
required: true,
},
showing: {
type: Boolean,
required: true,
},
text: {
type: String,
required: false,
},
},
const props = defineProps<{
success: boolean;
showing: boolean;
text?: string;
}>();
emits: ['done', 'closed'],
const emit = defineEmits<{
(e: 'done');
(e: 'closed');
}>();
data() {
return {
};
},
function done() {
emit('done');
modal.value.close();
}
watch: {
showing() {
if (!this.showing) this.done();
}
},
methods: {
done() {
this.$emit('done');
this.$refs.modal.close();
},
}
watch(() => props.showing, () => {
if (!props.showing) done();
});
</script>