refactor(client): use composition api

This commit is contained in:
syuilo 2022-01-07 15:02:25 +09:00
parent f06ded9433
commit 6558cd2f27
6 changed files with 43 additions and 97 deletions

View File

@ -5,28 +5,17 @@
</span> </span>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import * as misskey from 'misskey-js';
import { toUnicode } from 'punycode/'; import { toUnicode } from 'punycode/';
import { host } from '@/config'; import { host as hostRaw } from '@/config';
export default defineComponent({ defineProps<{
props: { user: misskey.entities.UserDetailed;
user: { detail?: boolean;
type: Object, }>();
required: true
}, const host = toUnicode(hostRaw);
detail: {
type: Boolean,
default: false
},
},
data() {
return {
host: toUnicode(host),
};
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -8,19 +8,8 @@
</transition> </transition>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
export default defineComponent({
components: {
MkButton,
},
data() {
return {
};
},
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -22,26 +22,16 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { ref } from 'vue';
import * as os from '@/os'; import * as misskey from 'misskey-js';
import { defaultStore } from '@/store';
export default defineComponent({ const props = defineProps<{
props: { video: misskey.entities.DriveFile;
video: { }>();
type: Object,
required: true const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
}
},
data() {
return {
hide: true,
};
},
created() {
this.hide = (this.$store.state.nsfw === 'force') ? true : this.video.isSensitive && (this.$store.state.nsfw !== 'ignore');
},
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mk-toast"> <div class="mk-toast">
<transition name="toast" appear @after-leave="$emit('closed')"> <transition name="toast" appear @after-leave="emit('closed')">
<div v-if="showing" class="body _acrylic" :style="{ zIndex }"> <div v-if="showing" class="body _acrylic" :style="{ zIndex }">
<div class="message"> <div class="message">
{{ message }} {{ message }}
@ -10,29 +10,25 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { onMounted, ref } from 'vue';
import * as os from '@/os'; import * as os from '@/os';
export default defineComponent({ defineProps<{
props: { message: string;
message: { }>();
type: String,
required: true, const emit = defineEmits<{
}, (e: 'closed'): void;
}, }>();
emits: ['closed'],
data() { const showing = ref(true);
return { const zIndex = os.claimZIndex('high');
showing: true,
zIndex: os.claimZIndex('high'), onMounted(() => {
}; setTimeout(() => {
}, showing.value = false;
mounted() { }, 4000);
setTimeout(() => {
this.showing = false;
}, 4000);
}
}); });
</script> </script>

View File

@ -76,7 +76,7 @@ export default defineComponent({
tweetExpanded: this.detail, tweetExpanded: this.detail,
embedId: `embed${Math.random().toString().replace(/\D/,'')}`, embedId: `embed${Math.random().toString().replace(/\D/,'')}`,
tweetHeight: 150, tweetHeight: 150,
tweetLeft: 0, tweetLeft: 0,
playerEnabled: false, playerEnabled: false,
self: self, self: self,
attr: self ? 'to' : 'href', attr: self ? 'to' : 'href',

View File

@ -27,32 +27,14 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import * as misskey from 'misskey-js';
import MkFollowButton from './follow-button.vue'; import MkFollowButton from './follow-button.vue';
import { userPage } from '@/filters/user'; import { userPage } from '@/filters/user';
export default defineComponent({ defineProps<{
components: { user: misskey.entities.UserDetailed;
MkFollowButton }>();
},
props: {
user: {
type: Object,
required: true
},
},
data() {
return {
};
},
methods: {
userPage,
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>