wip: refactor(client): migrate paging components to composition api
This commit is contained in:
parent
bd1f741dad
commit
ef4d78dda2
2 changed files with 30 additions and 61 deletions
|
@ -4,31 +4,19 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
import * as misskey from 'misskey-js';
|
||||||
|
import { $i } from '@/account';
|
||||||
import XReaction from './reactions-viewer.reaction.vue';
|
import XReaction from './reactions-viewer.reaction.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps<{
|
||||||
components: {
|
note: misskey.entities.Note;
|
||||||
XReaction
|
}>();
|
||||||
},
|
|
||||||
props: {
|
const initialReactions = new Set(Object.keys(props.note.reactions));
|
||||||
note: {
|
|
||||||
type: Object,
|
const isMe = computed(() => $i && $i.id === props.note.userId);
|
||||||
required: true
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
initialReactions: new Set(Object.keys(this.note.reactions))
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
isMe(): boolean {
|
|
||||||
return this.$i && this.$i.id === this.note.userId;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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 }">
|
<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
|
||||||
<i v-if="success" class="fas fa-check icon success"></i>
|
<i v-if="success" class="fas fa-check icon success"></i>
|
||||||
<i v-else class="fas fa-spinner fa-pulse icon waiting"></i>
|
<i v-else class="fas fa-spinner fa-pulse icon waiting"></i>
|
||||||
|
@ -8,49 +8,30 @@
|
||||||
</MkModal>
|
</MkModal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { watch, ref } from 'vue';
|
||||||
import MkModal from '@/components/ui/modal.vue';
|
import MkModal from '@/components/ui/modal.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
const modal = ref<InstanceType<typeof MkModal>>();
|
||||||
components: {
|
|
||||||
MkModal,
|
|
||||||
},
|
|
||||||
|
|
||||||
props: {
|
const props = defineProps<{
|
||||||
success: {
|
success: boolean;
|
||||||
type: Boolean,
|
showing: boolean;
|
||||||
required: true,
|
text?: string;
|
||||||
},
|
}>();
|
||||||
showing: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['done', 'closed'],
|
const emit = defineEmits<{
|
||||||
|
(e: 'done');
|
||||||
|
(e: 'closed');
|
||||||
|
}>();
|
||||||
|
|
||||||
data() {
|
function done() {
|
||||||
return {
|
emit('done');
|
||||||
};
|
modal.value.close();
|
||||||
},
|
}
|
||||||
|
|
||||||
watch: {
|
watch(() => props.showing, () => {
|
||||||
showing() {
|
if (!props.showing) done();
|
||||||
if (!this.showing) this.done();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
done() {
|
|
||||||
this.$emit('done');
|
|
||||||
this.$refs.modal.close();
|
|
||||||
},
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue