From 25f4c8688abdd23b93038bf8339ac0eca0f63330 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Fri, 2 Sep 2022 00:22:31 +0900 Subject: [PATCH] refactor(client): use setup syntax --- packages/client/src/components/MkRipple.vue | 99 ++++++++++----------- packages/client/src/pages/follow.vue | 93 +++++++++---------- packages/client/src/ui/deck/tl-column.vue | 16 ---- 3 files changed, 90 insertions(+), 118 deletions(-) diff --git a/packages/client/src/components/MkRipple.vue b/packages/client/src/components/MkRipple.vue index 401e78e304..9d93211d5f 100644 --- a/packages/client/src/components/MkRipple.vue +++ b/packages/client/src/components/MkRipple.vue @@ -1,8 +1,9 @@ <template> -<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }" :class="{ active }"> +<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }"> <svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"> <circle fill="none" cx="64" cy="64"> - <animate attributeName="r" + <animate + attributeName="r" begin="0s" dur="0.5s" values="4; 32" calcMode="spline" @@ -10,7 +11,8 @@ keySplines="0.165, 0.84, 0.44, 1" repeatCount="1" /> - <animate attributeName="stroke-width" + <animate + attributeName="stroke-width" begin="0s" dur="0.5s" values="16; 0" calcMode="spline" @@ -21,7 +23,8 @@ </circle> <g fill="none" fill-rule="evenodd"> <circle v-for="(particle, i) in particles" :key="i" :fill="particle.color"> - <animate attributeName="r" + <animate + attributeName="r" begin="0s" dur="0.8s" :values="`${particle.size}; 0`" calcMode="spline" @@ -29,7 +32,8 @@ keySplines="0.165, 0.84, 0.44, 1" repeatCount="1" /> - <animate attributeName="cx" + <animate + attributeName="cx" begin="0s" dur="0.8s" :values="`${particle.xA}; ${particle.xB}`" calcMode="spline" @@ -37,7 +41,8 @@ keySplines="0.3, 0.61, 0.355, 1" repeatCount="1" /> - <animate attributeName="cy" + <animate + attributeName="cy" begin="0s" dur="0.8s" :values="`${particle.yA}; ${particle.yB}`" calcMode="spline" @@ -51,59 +56,47 @@ </div> </template> -<script lang="ts"> -import { defineComponent, onMounted } from 'vue'; +<script lang="ts" setup> +import { onMounted } from 'vue'; import * as os from '@/os'; -export default defineComponent({ - props: { - x: { - type: Number, - required: true - }, - y: { - type: Number, - required: true - }, - particle: { - type: Boolean, - required: false, - default: true, - } - }, - emits: ['end'], - setup(props, context) { - const particles = []; - const origin = 64; - const colors = ['#FF1493', '#00FFFF', '#FFE202']; +const props = withDefaults(defineProps<{ + x: number; + y: number; + particle?: boolean; +}>(), { + particle: true, +}); - if (props.particle) { - for (let i = 0; i < 12; i++) { - const angle = Math.random() * (Math.PI * 2); - const pos = Math.random() * 16; - const velocity = 16 + (Math.random() * 48); - particles.push({ - size: 4 + (Math.random() * 8), - xA: origin + (Math.sin(angle) * pos), - yA: origin + (Math.cos(angle) * pos), - xB: origin + (Math.sin(angle) * (pos + velocity)), - yB: origin + (Math.cos(angle) * (pos + velocity)), - color: colors[Math.floor(Math.random() * colors.length)] - }); - } - } +const emit = defineEmits<{ + (ev: 'end'): void; +}>(); - onMounted(() => { - window.setTimeout(() => { - context.emit('end'); - }, 1100); +const particles = []; +const origin = 64; +const colors = ['#FF1493', '#00FFFF', '#FFE202']; +const zIndex = os.claimZIndex('high'); + +if (props.particle) { + for (let i = 0; i < 12; i++) { + const angle = Math.random() * (Math.PI * 2); + const pos = Math.random() * 16; + const velocity = 16 + (Math.random() * 48); + particles.push({ + size: 4 + (Math.random() * 8), + xA: origin + (Math.sin(angle) * pos), + yA: origin + (Math.cos(angle) * pos), + xB: origin + (Math.sin(angle) * (pos + velocity)), + yB: origin + (Math.cos(angle) * (pos + velocity)), + color: colors[Math.floor(Math.random() * colors.length)], }); + } +} - return { - particles, - zIndex: os.claimZIndex('high'), - }; - }, +onMounted(() => { + window.setTimeout(() => { + emit('end'); + }, 1100); }); </script> diff --git a/packages/client/src/pages/follow.vue b/packages/client/src/pages/follow.vue index 0c1cb7733b..f44d355aac 100644 --- a/packages/client/src/pages/follow.vue +++ b/packages/client/src/pages/follow.vue @@ -3,63 +3,58 @@ </div> </template> -<script lang="ts"> -import { defineComponent } from 'vue'; +<script lang="ts" setup> +import { } from 'vue'; import * as Acct from 'misskey-js/built/acct'; import * as os from '@/os'; import { mainRouter } from '@/router'; +import { i18n } from '@/i18n'; -export default defineComponent({ - created() { - const acct = new URL(location.href).searchParams.get('acct'); - if (acct == null) return; +async function follow(user): Promise<void> { + const { canceled } = await os.confirm({ + type: 'question', + text: i18n.t('followConfirm', { name: user.name || user.username }), + }); - let promise; + if (canceled) { + window.close(); + return; + } + + os.apiWithDialog('following/create', { + userId: user.id, + }); +} - if (acct.startsWith('https://')) { - promise = os.api('ap/show', { - uri: acct, - }); - promise.then(res => { - if (res.type === 'User') { - this.follow(res.object); - } else if (res.type === 'Note') { - mainRouter.push(`/notes/${res.object.id}`); - } else { - os.alert({ - type: 'error', - text: 'Not a user', - }).then(() => { - window.close(); - }); - } - }); +const acct = new URL(location.href).searchParams.get('acct'); +if (acct == null) return; + +let promise; + +if (acct.startsWith('https://')) { + promise = os.api('ap/show', { + uri: acct, + }); + promise.then(res => { + if (res.type === 'User') { + follow(res.object); + } else if (res.type === 'Note') { + mainRouter.push(`/notes/${res.object.id}`); } else { - promise = os.api('users/show', Acct.parse(acct)); - promise.then(user => { - this.follow(user); + os.alert({ + type: 'error', + text: 'Not a user', + }).then(() => { + window.close(); }); } + }); +} else { + promise = os.api('users/show', Acct.parse(acct)); + promise.then(user => { + follow(user); + }); +} - os.promiseDialog(promise, null, null, this.$ts.fetchingAsApObject); - }, - - methods: { - async follow(user) { - const { canceled } = await os.confirm({ - type: 'question', - text: this.$t('followConfirm', { name: user.name || user.username }), - }); - - if (canceled) { - window.close(); - return; - } - - os.apiWithDialog('following/create', { - userId: user.id, - }); - }, - }, -}); +os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject); </script> diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue index a6e4ec5d57..e64ed852b2 100644 --- a/packages/client/src/ui/deck/tl-column.vue +++ b/packages/client/src/ui/deck/tl-column.vue @@ -102,22 +102,6 @@ const menu = [{ text: i18n.ts.timeline, action: setType, }]; - -/* -export default defineComponent({ - watch: { - mediaOnly() { - (this.$refs.timeline as any).reload(); - } - }, - - methods: { - focus() { - (this.$refs.timeline as any).focus(); - } - } -}); -*/ </script> <style lang="scss" scoped>