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

This commit is contained in:
syuilo 2022-01-16 06:59:35 +09:00
parent c17e8fa8a4
commit 9693dfb09d
4 changed files with 88 additions and 132 deletions

View file

@ -1,8 +1,8 @@
<template> <template>
<MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')"> <MkModal ref="modal" :z-priority="'middle'" @click="modal.close()" @closed="emit('closed')">
<div class="xubzgfga"> <div class="xubzgfga">
<header>{{ image.name }}</header> <header>{{ image.name }}</header>
<img :src="image.url" :alt="image.comment" :title="image.comment" @click="$refs.modal.close()"/> <img :src="image.url" :alt="image.comment" :title="image.comment" @click="modal.close()"/>
<footer> <footer>
<span>{{ image.type }}</span> <span>{{ image.type }}</span>
<span>{{ bytes(image.size) }}</span> <span>{{ bytes(image.size) }}</span>
@ -12,31 +12,23 @@
</MkModal> </MkModal>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
import * as misskey from 'misskey-js';
import bytes from '@/filters/bytes'; import bytes from '@/filters/bytes';
import number from '@/filters/number'; import number from '@/filters/number';
import MkModal from '@/components/ui/modal.vue'; import MkModal from '@/components/ui/modal.vue';
export default defineComponent({ const props = withDefaults(defineProps<{
components: { image: misskey.entities.DriveFile;
MkModal, }>(), {
},
props: {
image: {
type: Object,
required: true
},
},
emits: ['closed'],
methods: {
bytes,
number,
}
}); });
const emit = defineEmits<{
(e: 'closed'): void;
}>();
const modal = $ref<InstanceType<typeof MkModal>>();
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View file

@ -5,67 +5,43 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { onMounted } from 'vue';
import { decode } from 'blurhash'; import { decode } from 'blurhash';
export default defineComponent({ const props = withDefaults(defineProps<{
props: { src?: string | null;
src: { hash: string;
type: String, alt?: string;
required: false, title?: string | null;
default: null size?: number;
}, cover?: boolean;
hash: { }>(), {
type: String, src: null,
required: true alt: '',
}, title: null,
alt: { size: 64,
type: String, cover: true,
required: false, });
default: '',
},
title: {
type: String,
required: false,
default: null,
},
size: {
type: Number,
required: false,
default: 64
},
cover: {
type: Boolean,
required: false,
default: true,
}
},
data() { const canvas = $ref<HTMLCanvasElement>();
return { let loaded = $ref(false);
loaded: false,
};
},
mounted() { function draw() {
this.draw(); if (props.hash == null) return;
}, const pixels = decode(props.hash, props.size, props.size);
const ctx = canvas.getContext('2d');
methods: { const imageData = ctx!.createImageData(props.size, props.size);
draw() {
if (this.hash == null) return;
const pixels = decode(this.hash, this.size, this.size);
const ctx = (this.$refs.canvas as HTMLCanvasElement).getContext('2d');
const imageData = ctx!.createImageData(this.size, this.size);
imageData.data.set(pixels); imageData.data.set(pixels);
ctx!.putImageData(imageData, 0, 0); ctx!.putImageData(imageData, 0, 0);
}, }
onLoad() { function onLoad() {
this.loaded = true; loaded = true;
} }
}
onMounted(() => {
draw();
}); });
</script> </script>

View file

@ -2,8 +2,8 @@
<XModalWindow ref="dialog" <XModalWindow ref="dialog"
:width="370" :width="370"
:height="400" :height="400"
@close="$refs.dialog.close()" @close="dialog.close()"
@closed="$emit('closed')" @closed="emit('closed')"
> >
<template #header>{{ $ts.login }}</template> <template #header>{{ $ts.login }}</template>
@ -11,32 +11,26 @@
</XModalWindow> </XModalWindow>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
import XModalWindow from '@/components/ui/modal-window.vue'; import XModalWindow from '@/components/ui/modal-window.vue';
import MkSignin from './signin.vue'; import MkSignin from './signin.vue';
export default defineComponent({ const props = withDefaults(defineProps<{
components: { autoSet?: boolean;
MkSignin, }>(), {
XModalWindow, autoSet: false,
},
props: {
autoSet: {
type: Boolean,
required: false,
default: false,
}
},
emits: ['done', 'closed'],
methods: {
onLogin(res) {
this.$emit('done', res);
this.$refs.dialog.close();
}
}
}); });
const emit = defineEmits<{
(e: 'done'): void;
(e: 'closed'): void;
}>();
const dialog = $ref<InstanceType<typeof XModalWindow>>();
function onLogin(res) {
emit('done', res);
dialog.close();
}
</script> </script>

View file

@ -2,7 +2,7 @@
<XModalWindow ref="dialog" <XModalWindow ref="dialog"
:width="366" :width="366"
:height="500" :height="500"
@close="$refs.dialog.close()" @close="dialog.close()"
@closed="$emit('closed')" @closed="$emit('closed')"
> >
<template #header>{{ $ts.signup }}</template> <template #header>{{ $ts.signup }}</template>
@ -15,36 +15,30 @@
</XModalWindow> </XModalWindow>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
import XModalWindow from '@/components/ui/modal-window.vue'; import XModalWindow from '@/components/ui/modal-window.vue';
import XSignup from './signup.vue'; import XSignup from './signup.vue';
export default defineComponent({ const props = withDefaults(defineProps<{
components: { autoSet?: boolean;
XSignup, }>(), {
XModalWindow, autoSet: false,
},
props: {
autoSet: {
type: Boolean,
required: false,
default: false,
}
},
emits: ['done', 'closed'],
methods: {
onSignup(res) {
this.$emit('done', res);
this.$refs.dialog.close();
},
onSignupEmailPending() {
this.$refs.dialog.close();
}
}
}); });
const emit = defineEmits<{
(e: 'done'): void;
(e: 'closed'): void;
}>();
const dialog = $ref<InstanceType<typeof XModalWindow>>();
function onSignup(res) {
emit('done', res);
dialog.close();
}
function onSignupEmailPending() {
dialog.close();
}
</script> </script>