refactor(client): use composition api
This commit is contained in:
parent
9ffab33037
commit
82e81a0984
|
@ -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'));
|
||||||
|
const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'));
|
||||||
|
|
||||||
data() {
|
function save() {
|
||||||
return {
|
defaultStore.set('reactions', reactions);
|
||||||
[symbols.PAGE_INFO]: {
|
}
|
||||||
title: this.$ts.reaction,
|
|
||||||
icon: 'fas fa-laugh',
|
|
||||||
action: {
|
|
||||||
icon: 'fas fa-eye',
|
|
||||||
handler: this.preview
|
|
||||||
},
|
|
||||||
bg: 'var(--bg)',
|
|
||||||
},
|
|
||||||
reactions: JSON.parse(JSON.stringify(this.$store.state.reactions)),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
function remove(reaction, ev: MouseEvent) {
|
||||||
reactionPickerWidth: defaultStore.makeGetterSetter('reactionPickerWidth'),
|
|
||||||
reactionPickerHeight: defaultStore.makeGetterSetter('reactionPickerHeight'),
|
|
||||||
reactionPickerUseDrawerForMobile: defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'),
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
reactions: {
|
|
||||||
handler() {
|
|
||||||
this.save();
|
|
||||||
},
|
|
||||||
deep: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
save() {
|
|
||||||
this.$store.set('reactions', this.reactions);
|
|
||||||
},
|
|
||||||
|
|
||||||
remove(reaction, ev) {
|
|
||||||
os.popupMenu([{
|
os.popupMenu([{
|
||||||
text: this.$ts.remove,
|
text: i18n.ts.remove,
|
||||||
action: () => {
|
action: () => {
|
||||||
this.reactions = this.reactions.filter(x => x !== reaction)
|
reactions = reactions.filter(x => x !== reaction);
|
||||||
}
|
}
|
||||||
}], ev.currentTarget || ev.target);
|
}], ev.currentTarget ?? ev.target);
|
||||||
},
|
}
|
||||||
|
|
||||||
preview(ev) {
|
function preview(ev: MouseEvent) {
|
||||||
os.popup(import('@/components/emoji-picker-dialog.vue'), {
|
os.popup(import('@/components/emoji-picker-dialog.vue'), {
|
||||||
asReactionPicker: true,
|
asReactionPicker: true,
|
||||||
src: ev.currentTarget || ev.target,
|
src: ev.currentTarget ?? ev.target,
|
||||||
}, {}, 'closed');
|
}, {}, 'closed');
|
||||||
},
|
}
|
||||||
|
|
||||||
async setDefault() {
|
async function setDefault() {
|
||||||
const { canceled } = await os.confirm({
|
const { canceled } = await os.confirm({
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
text: this.$ts.resetAreYouSure,
|
text: i18n.ts.resetAreYouSure,
|
||||||
});
|
});
|
||||||
if (canceled) return;
|
if (canceled) return;
|
||||||
|
|
||||||
this.reactions = JSON.parse(JSON.stringify(this.$store.def.reactions.default));
|
reactions = JSON.parse(JSON.stringify(defaultStore.def.reactions.default));
|
||||||
},
|
}
|
||||||
|
|
||||||
chooseEmoji(ev) {
|
function chooseEmoji(ev: MouseEvent) {
|
||||||
os.pickEmoji(ev.currentTarget || ev.target, {
|
os.pickEmoji(ev.currentTarget ?? ev.target, {
|
||||||
showPinned: false
|
showPinned: false
|
||||||
}).then(emoji => {
|
}).then(emoji => {
|
||||||
if (!this.reactions.includes(emoji)) {
|
if (!reactions.includes(emoji)) {
|
||||||
this.reactions.push(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)',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue