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

This commit is contained in:
syuilo 2022-01-13 02:36:51 +09:00
parent 7271fbb092
commit 2900f998b1
3 changed files with 58 additions and 84 deletions

View file

@ -8,35 +8,29 @@
</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { } from 'vue';
import * as os from '@/os';
import copyToClipboard from '@/scripts/copy-to-clipboard';
import { i18n } from '@/i18n';
export default defineComponent({
props: {
emoji: {
type: Object,
required: true,
}
},
const props = defineProps<{
emoji: Record<string, unknown>; // TODO
}>();
methods: {
menu(ev) {
os.popupMenu([{
type: 'label',
text: ':' + this.emoji.name + ':',
}, {
text: this.$ts.copy,
icon: 'fas fa-copy',
action: () => {
copyToClipboard(`:${this.emoji.name}:`);
os.success();
}
}], ev.currentTarget || ev.target);
function menu(ev) {
os.popupMenu([{
type: 'label',
text: ':' + props.emoji.name + ':',
}, {
text: i18n.locale.copy,
icon: 'fas fa-copy',
action: () => {
copyToClipboard(`:${props.emoji.name}:`);
os.success();
}
}
});
}], ev.currentTarget || ev.target);
}
</script>
<style lang="scss" scoped>

View file

@ -4,55 +4,47 @@
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
<script lang="ts" setup>
import { ref, computed } from 'vue';
import * as os from '@/os';
import * as symbols from '@/symbols';
import XCategory from './emojis.category.vue';
import { i18n } from '@/i18n';
export default defineComponent({
components: {
XCategory,
},
const tab = ref('category');
data() {
return {
[symbols.PAGE_INFO]: computed(() => ({
title: this.$ts.customEmojis,
icon: 'fas fa-laugh',
bg: 'var(--bg)',
actions: [{
icon: 'fas fa-ellipsis-h',
handler: this.menu
}],
})),
tab: 'category',
function menu(ev) {
os.popupMenu([{
icon: 'fas fa-download',
text: i18n.locale.export,
action: async () => {
os.api('export-custom-emojis', {
})
.then(() => {
os.alert({
type: 'info',
text: i18n.locale.exportRequested,
});
}).catch((e) => {
os.alert({
type: 'error',
text: e.message,
});
});
}
},
}], ev.currentTarget || ev.target);
}
methods: {
menu(ev) {
os.popupMenu([{
icon: 'fas fa-download',
text: this.$ts.export,
action: async () => {
os.api('export-custom-emojis', {
})
.then(() => {
os.alert({
type: 'info',
text: this.$ts.exportRequested,
});
}).catch((e) => {
os.alert({
type: 'error',
text: e.message,
});
});
}
}], ev.currentTarget || ev.target);
}
}
defineExpose({
[symbols.PAGE_INFO]: {
title: i18n.locale.customEmojis,
icon: 'fas fa-laugh',
bg: 'var(--bg)',
actions: [{
icon: 'fas fa-ellipsis-h',
handler: menu,
}],
},
});
</script>

View file

@ -65,26 +65,14 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { computed } from 'vue';
import MkButton from '@/components/ui/button.vue';
import { defaultStore } from '@/store';
export default defineComponent({
components: {
MkButton,
},
data() {
return {
}
},
computed: {
tutorial: {
get() { return this.$store.reactiveState.tutorial.value || 0; },
set(value) { this.$store.set('tutorial', value); }
},
},
const tutorial = computed({
get() { return defaultStore.reactiveState.tutorial.value || 0; },
set(value) { defaultStore.set('tutorial', value); }
});
</script>