wip: refactor(client): migrate paging components to composition api
This commit is contained in:
parent
7271fbb092
commit
2900f998b1
3 changed files with 58 additions and 84 deletions
packages/client/src/pages
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue