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

View file

@ -4,44 +4,26 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, computed } from 'vue'; import { ref, computed } from 'vue';
import * as os from '@/os'; import * as os from '@/os';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import XCategory from './emojis.category.vue'; import XCategory from './emojis.category.vue';
import { i18n } from '@/i18n';
export default defineComponent({ const tab = ref('category');
components: {
XCategory,
},
data() { function menu(ev) {
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',
}
},
methods: {
menu(ev) {
os.popupMenu([{ os.popupMenu([{
icon: 'fas fa-download', icon: 'fas fa-download',
text: this.$ts.export, text: i18n.locale.export,
action: async () => { action: async () => {
os.api('export-custom-emojis', { os.api('export-custom-emojis', {
}) })
.then(() => { .then(() => {
os.alert({ os.alert({
type: 'info', type: 'info',
text: this.$ts.exportRequested, text: i18n.locale.exportRequested,
}); });
}).catch((e) => { }).catch((e) => {
os.alert({ os.alert({
@ -51,8 +33,18 @@ export default defineComponent({
}); });
} }
}], ev.currentTarget || ev.target); }], 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> </script>

View file

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