limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-14 14:07:38 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(client): use composition api

Browse source
This commit is contained in:
syuilo 2022-01-28 12:30:59 +09:00
parent 50c8f699b2
commit ffa050bd55
1 changed files with 59 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
packages/client/src/pages/settings/reaction.vue
View file

@ -44,8 +44,8 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { watch } from 'vue';
import XDraggable from 'vuedraggable'; import XDraggable from 'vuedraggable';
import FormInput from '@/components/form/input.vue'; import FormInput from '@/components/form/input.vue';
import FormRadios from '@/components/form/radios.vue'; import FormRadios from '@/components/form/radios.vue';
@ -56,91 +56,70 @@ import FormSwitch from '@/components/form/switch.vue';
import * as os from '@/os'; import * as os from '@/os';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import { i18n } from '@/i18n';
export default defineComponent({ let reactions = $ref(JSON.parse(JSON.stringify(defaultStore.state.reactions)));
components: {
FormInput,
FormButton,
FromSlot,
FormRadios,
FormSection,
FormSwitch,
XDraggable,
},
emits: ['info'], const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPickerWidth'));
const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
data() { const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'));
return {
[symbols.PAGE_INFO]: { function save() {
title: this.$ts.reaction, defaultStore.set('reactions', reactions);
icon: 'fas fa-laugh', }
action: {
icon: 'fas fa-eye', function remove(reaction, ev: MouseEvent) {
handler: this.preview os.popupMenu([{
}, text: i18n.ts.remove,
bg: 'var(--bg)', action: () => {
}, reactions = reactions.filter(x => x !== reaction);
reactions: JSON.parse(JSON.stringify(this.$store.state.reactions)),
} }
}, }], ev.currentTarget ?? ev.target);
}
computed: { function preview(ev: MouseEvent) {
reactionPickerWidth: defaultStore.makeGetterSetter('reactionPickerWidth'), os.popup(import('@/components/emoji-picker-dialog.vue'), {
reactionPickerHeight: defaultStore.makeGetterSetter('reactionPickerHeight'), asReactionPicker: true,
reactionPickerUseDrawerForMobile: defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'), src: ev.currentTarget ?? ev.target,
}, }, {}, 'closed');
}
watch: { async function setDefault() {
reactions: { const { canceled } = await os.confirm({
handler() { type: 'warning',
this.save(); text: i18n.ts.resetAreYouSure,
}, });
deep: true if (canceled) return;
reactions = JSON.parse(JSON.stringify(defaultStore.def.reactions.default));
}
function chooseEmoji(ev: MouseEvent) {
os.pickEmoji(ev.currentTarget ?? ev.target, {
showPinned: false
}).then(emoji => {
if (!reactions.includes(emoji)) {
reactions.push(emoji);
} }
});
}
watch($$(reactions), () => {
save();
}, {
deep: true,
});
defineExpose({
[symbols.PAGE_INFO]: {
title: i18n.ts.reaction,
icon: 'fas fa-laugh',
action: {
icon: 'fas fa-eye',
handler: preview,
},
bg: 'var(--bg)',
}, },
methods: {
save() {
this.$store.set('reactions', this.reactions);
},
remove(reaction, ev) {
os.popupMenu([{
text: this.$ts.remove,
action: () => {
this.reactions = this.reactions.filter(x => x !== reaction)
}
}], ev.currentTarget || ev.target);
},
preview(ev) {
os.popup(import('@/components/emoji-picker-dialog.vue'), {
asReactionPicker: true,
src: ev.currentTarget || ev.target,
}, {}, 'closed');
},
async setDefault() {
const { canceled } = await os.confirm({
type: 'warning',
text: this.$ts.resetAreYouSure,
});
if (canceled) return;
this.reactions = JSON.parse(JSON.stringify(this.$store.def.reactions.default));
},
chooseEmoji(ev) {
os.pickEmoji(ev.currentTarget || ev.target, {
showPinned: false
}).then(emoji => {
if (!this.reactions.includes(emoji)) {
this.reactions.push(emoji);
}
});
}
}
}); });
</script> </script>