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 08:49:27 +09:00
parent 133b5c6391
commit 689e75e10a
2 changed files with 40 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/client/src/components/post-form.vue
View file

@ -384,14 +384,14 @@ function setVisibility() {
currentLocalOnly: localOnly, currentLocalOnly: localOnly,
src: visibilityButton, src: visibilityButton,
}, { }, {
changeVisibility: visibility => { changeVisibility: v => {
visibility = visibility; visibility = v;
if (defaultStore.state.rememberNoteVisibility) { if (defaultStore.state.rememberNoteVisibility) {
defaultStore.set('visibility', visibility); defaultStore.set('visibility', visibility);
} }
}, },
changeLocalOnly: localOnly => { changeLocalOnly: v => {
localOnly = localOnly; localOnly = v;
if (defaultStore.state.rememberNoteVisibility) { if (defaultStore.state.rememberNoteVisibility) {
defaultStore.set('localOnly', localOnly); defaultStore.set('localOnly', localOnly);
} }

81
packages/client/src/components/visibility-picker.vue
View file

@ -1,28 +1,28 @@
<template> <template>
<MkModal ref="modal" :z-priority="'high'" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')"> <MkModal ref="modal" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
<div class="gqyayizv _popup"> <div class="gqyayizv _popup">
<button key="public" class="_button" :class="{ active: v == 'public' }" data-index="1" @click="choose('public')"> <button key="public" class="_button" :class="{ active: v === 'public' }" data-index="1" @click="choose('public')">
<div><i class="fas fa-globe"></i></div> <div><i class="fas fa-globe"></i></div>
<div> <div>
<span>{{ $ts._visibility.public }}</span> <span>{{ $ts._visibility.public }}</span>
<span>{{ $ts._visibility.publicDescription }}</span> <span>{{ $ts._visibility.publicDescription }}</span>
</div> </div>
</button> </button>
<button key="home" class="_button" :class="{ active: v == 'home' }" data-index="2" @click="choose('home')"> <button key="home" class="_button" :class="{ active: v === 'home' }" data-index="2" @click="choose('home')">
<div><i class="fas fa-home"></i></div> <div><i class="fas fa-home"></i></div>
<div> <div>
<span>{{ $ts._visibility.home }}</span> <span>{{ $ts._visibility.home }}</span>
<span>{{ $ts._visibility.homeDescription }}</span> <span>{{ $ts._visibility.homeDescription }}</span>
</div> </div>
</button> </button>
<button key="followers" class="_button" :class="{ active: v == 'followers' }" data-index="3" @click="choose('followers')"> <button key="followers" class="_button" :class="{ active: v === 'followers' }" data-index="3" @click="choose('followers')">
<div><i class="fas fa-unlock"></i></div> <div><i class="fas fa-unlock"></i></div>
<div> <div>
<span>{{ $ts._visibility.followers }}</span> <span>{{ $ts._visibility.followers }}</span>
<span>{{ $ts._visibility.followersDescription }}</span> <span>{{ $ts._visibility.followersDescription }}</span>
</div> </div>
</button> </button>
<button key="specified" :disabled="localOnly" class="_button" :class="{ active: v == 'specified' }" data-index="4" @click="choose('specified')"> <button key="specified" :disabled="localOnly" class="_button" :class="{ active: v === 'specified' }" data-index="4" @click="choose('specified')">
<div><i class="fas fa-envelope"></i></div> <div><i class="fas fa-envelope"></i></div>
<div> <div>
<span>{{ $ts._visibility.specified }}</span> <span>{{ $ts._visibility.specified }}</span>
@ -42,49 +42,40 @@
</MkModal> </MkModal>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { nextTick, watch } from 'vue';
import * as misskey from 'misskey-js';
import MkModal from '@/components/ui/modal.vue'; import MkModal from '@/components/ui/modal.vue';
export default defineComponent({ const modal = $ref<InstanceType<typeof MkModal>>();
components: {
MkModal, const props = withDefaults(defineProps<{
}, currentVisibility: typeof misskey.noteVisibilities[number];
props: { currentLocalOnly: boolean;
currentVisibility: { src?: HTMLElement;
type: String, }>(), {
required: true
},
currentLocalOnly: {
type: Boolean,
required: true
},
src: {
required: false
},
},
emits: ['change-visibility', 'change-local-only', 'closed'],
data() {
return {
v: this.currentVisibility,
localOnly: this.currentLocalOnly,
}
},
watch: {
localOnly() {
this.$emit('change-local-only', this.localOnly);
}
},
methods: {
choose(visibility) {
this.v = visibility;
this.$emit('change-visibility', visibility);
this.$nextTick(() => {
this.$refs.modal.close();
});
},
}
}); });
const emit = defineEmits<{
(e: 'changeVisibility', v: typeof misskey.noteVisibilities[number]): void;
(e: 'changeLocalOnly', v: boolean): void;
(e: 'closed'): void;
}>();
let v = $ref(props.currentVisibility);
let localOnly = $ref(props.currentLocalOnly);
watch($$(localOnly), () => {
emit('changeLocalOnly', localOnly);
});
function choose(visibility: typeof misskey.noteVisibilities[number]): void {
v = visibility;
emit('changeVisibility', visibility);
nextTick(() => {
modal.close();
});
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>