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

This commit is contained in:
syuilo 2022-01-16 11:02:27 +09:00
parent 2c36844d34
commit df61e173c1
3 changed files with 54 additions and 79 deletions

View file

@ -20,7 +20,7 @@
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Instance, instance } from '@/instance';
import { instance } from '@/instance';
import { host } from '@/config';
import MkButton from '@/components/ui/button.vue';
import { defaultStore } from '@/store';
@ -48,9 +48,9 @@ export default defineComponent({
showMenu.value = !showMenu.value;
};
const choseAd = (): Instance['ads'][number] | null => {
const choseAd = (): (typeof instance)['ads'][number] | null => {
if (props.specify) {
return props.specify as Instance['ads'][number];
return props.specify as (typeof instance)['ads'][number];
}
const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? {

View file

@ -3,61 +3,50 @@
<div class="_formRoot">
<FormInput v-model="password" type="password" class="_formBlock">
<template #prefix><i class="fas fa-lock"></i></template>
<template #label>{{ $ts.newPassword }}</template>
<template #label>{{ i18n.locale.newPassword }}</template>
</FormInput>
<FormButton primary class="_formBlock" @click="save">{{ $ts.save }}</FormButton>
<FormButton primary class="_formBlock" @click="save">{{ i18n.locale.save }}</FormButton>
</div>
</MkSpacer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { onMounted } from 'vue';
import FormInput from '@/components/form/input.vue';
import FormButton from '@/components/ui/button.vue';
import * as os from '@/os';
import * as symbols from '@/symbols';
import { i18n } from '@/i18n';
import { router } from '@/router';
export default defineComponent({
components: {
FormInput,
FormButton,
},
const props = defineProps<{
token?: string;
}>();
props: {
token: {
type: String,
required: false
let password = $ref('');
async function save() {
await os.apiWithDialog('reset-password', {
token: props.token,
password: password,
});
router.push('/');
}
},
data() {
return {
onMounted(() => {
if (props.token == null) {
os.popup(import('@/components/forgot-password.vue'), {}, {}, 'closed');
router.push('/');
}
});
defineExpose({
[symbols.PAGE_INFO]: {
title: this.$ts.resetPassword,
title: i18n.locale.resetPassword,
icon: 'fas fa-lock',
bg: 'var(--bg)',
},
password: '',
}
},
mounted() {
if (this.token == null) {
os.popup(import('@/components/forgot-password.vue'), {}, {}, 'closed');
this.$router.push('/');
}
},
methods: {
async save() {
await os.apiWithDialog('reset-password', {
token: this.token,
password: this.password,
});
this.$router.push('/');
}
}
});
</script>

View file

@ -1,50 +1,36 @@
<template>
<div>
{{ $ts.processing }}
{{ i18n.locale.processing }}
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { onMounted } from 'vue';
import * as os from '@/os';
import * as symbols from '@/symbols';
import { login } from '@/account';
import { i18n } from '@/i18n';
export default defineComponent({
components: {
const props = defineProps<{
code: string;
}>();
},
props: {
code: {
type: String,
required: true
}
},
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.signup,
icon: 'fas fa-user'
},
}
},
async mounted() {
onMounted(async () => {
await os.alert({
type: 'info',
text: this.$t('clickToFinishEmailVerification', { ok: this.$ts.gotIt }),
text: i18n.t('clickToFinishEmailVerification', { ok: i18n.locale.gotIt }),
});
const res = await os.apiWithDialog('signup-pending', {
code: this.code,
code: props.code,
});
login(res.i, '/');
});
defineExpose({
[symbols.PAGE_INFO]: {
title: i18n.locale.signup,
icon: 'fas fa-user',
},
methods: {
}
});
</script>