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

This commit is contained in:
syuilo 2022-01-13 02:36:51 +09:00
parent d9572b3bfe
commit d1f1b9883e
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: ':' + props.emoji.name + ':',
text: ':' + this.emoji.name + ':', }, {
}, { text: i18n.locale.copy,
text: this.$ts.copy, icon: 'fas fa-copy',
icon: 'fas fa-copy', action: () => {
action: () => { copyToClipboard(`:${props.emoji.name}:`);
copyToClipboard(`:${this.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,55 +4,47 @@
</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 { os.popupMenu([{
[symbols.PAGE_INFO]: computed(() => ({ icon: 'fas fa-download',
title: this.$ts.customEmojis, text: i18n.locale.export,
icon: 'fas fa-laugh', action: async () => {
bg: 'var(--bg)', os.api('export-custom-emojis', {
actions: [{ })
icon: 'fas fa-ellipsis-h', .then(() => {
handler: this.menu os.alert({
}], type: 'info',
})), text: i18n.locale.exportRequested,
tab: 'category', });
}).catch((e) => {
os.alert({
type: 'error',
text: e.message,
});
});
} }
}, }], ev.currentTarget || ev.target);
}
methods: { defineExpose({
menu(ev) { [symbols.PAGE_INFO]: {
os.popupMenu([{ title: i18n.locale.customEmojis,
icon: 'fas fa-download', icon: 'fas fa-laugh',
text: this.$ts.export, bg: 'var(--bg)',
action: async () => { actions: [{
os.api('export-custom-emojis', { icon: 'fas fa-ellipsis-h',
}) handler: menu,
.then(() => { }],
os.alert({ },
type: 'info',
text: this.$ts.exportRequested,
});
}).catch((e) => {
os.alert({
type: 'error',
text: e.message,
});
});
}
}], ev.currentTarget || ev.target);
}
}
}); });
</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>