Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

36
packages/client/src/components/image-viewer.vue
View file

@ -1,8 +1,8 @@
<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">
<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>
<span>{{ image.type }}</span>
<span>{{ bytes(image.size) }}</span>
@ -12,31 +12,23 @@
</MkModal>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { } from 'vue';
import * as misskey from 'misskey-js';
import bytes from '@/filters/bytes';
import number from '@/filters/number';
import MkModal from '@/components/ui/modal.vue';
export default defineComponent({
components: {
MkModal,
},
props: {
image: {
type: Object,
required: true
},
},
emits: ['closed'],
methods: {
bytes,
number,
}
const props = withDefaults(defineProps<{
image: misskey.entities.DriveFile;
}>(), {
});
const emit = defineEmits<{
(e: 'closed'): void;
}>();
const modal = $ref<InstanceType<typeof MkModal>>();
</script>
<style lang="scss" scoped>

84
packages/client/src/components/img-with-blurhash.vue
View file

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

46
packages/client/src/components/signin-dialog.vue
View file

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

52
packages/client/src/components/signup-dialog.vue
View file

@ -2,7 +2,7 @@
<XModalWindow ref="dialog"
:width="366"
:height="500"
@close="$refs.dialog.close()"
@close="dialog.close()"
@closed="$emit('closed')"
>
<template #header>{{ $ts.signup }}</template>
@ -15,36 +15,30 @@
</XModalWindow>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { } from 'vue';
import XModalWindow from '@/components/ui/modal-window.vue';
import XSignup from './signup.vue';
export default defineComponent({
components: {
XSignup,
XModalWindow,
},
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 props = withDefaults(defineProps<{
autoSet?: boolean;
}>(), {
autoSet: false,
});
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>