Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor page-editor elements to use Composition API (#8721)

Browse source 
* refactor(client): refactor page-editor elements to use Composition API

* Apply review suggestions from @Johann150

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>
This commit is contained in:
Andreas Nedbal 2022-06-18 11:39:04 +02:00 • committed by GitHub
parent 802a35d4b6
commit 54465d36a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 214 additions and 428 deletions
Download patch file Download diff file Expand all files Collapse all files

83
packages/client/src/pages/page-editor/els/page-editor.el.section.vue
View file

@ -17,66 +17,51 @@
</XContainer>
</template>
<script lang="ts">
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { defineComponent, defineAsyncComponent } from 'vue';
import { defineAsyncComponent, inject, onMounted } from 'vue';
import { v4 as uuid } from 'uuid';
import XContainer from '../page-editor.container.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
export default defineComponent({
components: {
XContainer,
XBlocks: defineAsyncComponent(() => import('../page-editor.blocks.vue')),
},
const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
inject: ['getPageBlockList'],
const props = withDefaults(defineProps<{
value: any,
hpml: any
}>(), {
value: {
title: null,
children: []
}
});
props: {
value: {
required: true
},
hpml: {
required: true,
},
},
const getPageBlockList = inject<(any) => any>('getPageBlockList');
data() {
return {
};
},
async function rename() {
const { canceled, result: title } = await os.inputText({
title: 'Enter title',
default: props.value.title
});
if (canceled) return;
props.value.title = title;
}
created() {
if (this.value.title == null) this.value.title = null;
if (this.value.children == null) this.value.children = [];
},
async function add() {
const { canceled, result: type } = await os.select({
title: i18n.ts._pages.chooseBlock,
groupedItems: getPageBlockList()
});
if (canceled) return;
mounted() {
if (this.value.title == null) {
this.rename();
}
},
const id = uuid();
props.value.children.push({ id, type });
}
methods: {
async rename() {
const { canceled, result: title } = await os.inputText({
title: 'Enter title',
default: this.value.title
});
if (canceled) return;
this.value.title = title;
},
async add() {
const { canceled, result: type } = await os.select({
title: this.$ts._pages.chooseBlock,
groupedItems: this.getPageBlockList()
});
if (canceled) return;
const id = uuid();
this.value.children.push({ id, type });
},
onMounted(() => {
if (props.value.title == null) {
rename();
}
});
</script>