yume/yumechi-no-kuni
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
Show stats Download patch file Download diff file Expand all files Collapse all files

46
packages/client/src/pages/page-editor/els/page-editor.el.button.vue
View file

@ -38,44 +38,28 @@
</XContainer> </XContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* eslint-disable vue/no-mutating-props */
import { defineComponent } from 'vue'; import { } from 'vue';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
import MkSelect from '@/components/form/select.vue'; import MkSelect from '@/components/form/select.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import MkSwitch from '@/components/form/switch.vue'; import MkSwitch from '@/components/form/switch.vue';
import * as os from '@/os';
export default defineComponent({ withDefaults(defineProps<{
components: { value: any,
XContainer, MkSelect, MkInput, MkSwitch hpml: any
}, }>(), {
props: {
value: { value: {
required: true text: '',
}, action: 'dialog',
hpml: { content: null,
required: true, event: null,
}, message: null,
}, primary: false,
var: null,
data() { fn: null
return { }
};
},
created() {
if (this.value.text == null) this.value.text = '';
if (this.value.action == null) this.value.action = 'dialog';
if (this.value.content == null) this.value.content = null;
if (this.value.event == null) this.value.event = null;
if (this.value.message == null) this.value.message = null;
if (this.value.primary == null) this.value.primary = false;
if (this.value.var == null) this.value.var = null;
if (this.value.fn == null) this.value.fn = null;
},
}); });
</script> </script>

32
packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
View file

@ -20,33 +20,19 @@
</XContainer> </XContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* eslint-disable vue/no-mutating-props */
import { defineComponent } from 'vue'; import { } from 'vue';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import * as os from '@/os';
export default defineComponent({ withDefaults(defineProps<{
components: { value: any
XContainer, MkInput }>(), {
},
props: {
value: { value: {
required: true name: '',
}, width: 300,
}, height: 200
}
data() {
return {
};
},
created() {
if (this.value.name == null) this.value.name = '';
if (this.value.width == null) this.value.width = 300;
if (this.value.height == null) this.value.height = 200;
},
}); });
</script> </script>

28
packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
View file

@ -18,31 +18,17 @@
</XContainer> </XContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* eslint-disable vue/no-mutating-props */
import { defineComponent } from 'vue'; import { } from 'vue';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import * as os from '@/os';
export default defineComponent({ withDefaults(defineProps<{
components: { value: any
XContainer, MkInput }>(), {
},
props: {
value: { value: {
required: true name: ''
}, }
},
data() {
return {
};
},
created() {
if (this.value.name == null) this.value.name = '';
},
}); });
</script> </script>

51
packages/client/src/pages/page-editor/els/page-editor.el.if.vue
View file

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

56
packages/client/src/pages/page-editor/els/page-editor.el.image.vue
View file

@ -14,54 +14,40 @@
</XContainer> </XContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* eslint-disable vue/no-mutating-props */
import { defineComponent } from 'vue'; import { onMounted } from 'vue';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue'; import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
import * as os from '@/os'; import * as os from '@/os';
export default defineComponent({ const props = withDefaults(defineProps<{
components: { value: any
XContainer, MkDriveFileThumbnail }>(), {
},
props: {
value: { value: {
required: true fileId: null
}, }
}, });
data() { let file: any = $ref(null);
return {
file: null,
};
},
created() { async function choose() {
if (this.value.fileId === undefined) this.value.fileId = null; os.selectDriveFile(false).then((fileResponse: any) => {
}, file = fileResponse;
props.value.fileId = fileResponse.id;
});
}
mounted() { onMounted(async () => {
if (this.value.fileId == null) { if (props.value.fileId == null) {
this.choose(); await choose();
} else { } else {
os.api('drive/files/show', { os.api('drive/files/show', {
fileId: this.value.fileId fileId: props.value.fileId
}).then(file => { }).then(fileResponse => {
this.file = file; file = fileResponse;
}); });
} }
},
methods: {
async choose() {
os.selectDriveFile(false).then(file => {
this.file = file;
this.value.fileId = file.id;
});
},
}
}); });
</script> </script>

49
packages/client/src/pages/page-editor/els/page-editor.el.note.vue
View file

@ -16,9 +16,9 @@
</XContainer> </XContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* eslint-disable vue/no-mutating-props */
import { defineComponent } from 'vue'; import { watch } from 'vue';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import MkSwitch from '@/components/form/switch.vue'; import MkSwitch from '@/components/form/switch.vue';
@ -26,42 +26,27 @@ import XNote from '@/components/note.vue';
import XNoteDetailed from '@/components/note-detailed.vue'; import XNoteDetailed from '@/components/note-detailed.vue';
import * as os from '@/os'; import * as os from '@/os';
export default defineComponent({ const props = withDefaults(defineProps<{
components: { value: any
XContainer, MkInput, MkSwitch, XNote, XNoteDetailed, }>(), {
},
props: {
value: { value: {
required: true
},
},
data() {
return {
id: this.value.note,
note: null, note: null,
}; detailed: false
}, }
});
watch: { let id: any = $ref(props.value.note);
id: { let note: any = $ref(null);
async handler() {
if (this.id && (this.id.startsWith('http://') || this.id.startsWith('https://'))) { watch(id, async () => {
this.value.note = this.id.endsWith('/') ? this.id.substr(0, this.id.length - 1).split('/').pop() : this.id.split('/').pop(); if (id && (id.startsWith('http://') || id.startsWith('https://'))) {
props.value.note = (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop();
} else { } else {
this.value.note = this.id; props.value.note = id;
} }
this.note = await os.api('notes/show', { noteId: this.value.note }); note = await os.api('notes/show', { noteId: props.value.note });
}, }, {
immediate: true immediate: true
},
},
created() {
if (this.value.note == null) this.value.note = null;
if (this.value.detailed == null) this.value.detailed = false;
},
}); });
</script> </script>

28
packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
View file

@ -18,31 +18,17 @@
</XContainer> </XContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* eslint-disable vue/no-mutating-props */
import { defineComponent } from 'vue'; import { } from 'vue';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import * as os from '@/os';
export default defineComponent({ withDefaults(defineProps<{
components: { value: any
XContainer, MkInput }>(), {
},
props: {
value: { value: {
required: true name: ''
}, }
},
data() {
return {
};
},
created() {
if (this.value.name == null) this.value.name = '';
},
}); });
</script> </script>

32
packages/client/src/pages/page-editor/els/page-editor.el.post.vue
View file

@ -11,35 +11,21 @@
</XContainer> </XContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* eslint-disable vue/no-mutating-props */
import { defineComponent } from 'vue'; import { } from 'vue';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
import MkTextarea from '@/components/form/textarea.vue'; import MkTextarea from '@/components/form/textarea.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import MkSwitch from '@/components/form/switch.vue'; import MkSwitch from '@/components/form/switch.vue';
import * as os from '@/os';
export default defineComponent({ withDefaults(defineProps<{
components: { value: any
XContainer, MkTextarea, MkInput, MkSwitch }>(), {
},
props: {
value: { value: {
required: true text: '',
}, attachCanvasImage: false,
}, canvasId: ''
}
data() {
return {
};
},
created() {
if (this.value.text == null) this.value.text = '';
if (this.value.attachCanvasImage == null) this.value.attachCanvasImage = false;
if (this.value.canvasId == null) this.value.canvasId = '';
},
}); });
</script> </script>

45
packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
View file

@ -12,41 +12,28 @@
</XContainer> </XContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* eslint-disable vue/no-mutating-props */
import { defineComponent } from 'vue'; import { watch } from 'vue';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
import MkTextarea from '@/components/form/textarea.vue'; import MkTextarea from '@/components/form/textarea.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import * as os from '@/os';
export default defineComponent({ const props = withDefaults(defineProps<{
components: { value: any
XContainer, MkTextarea, MkInput }>(), {
},
props: {
value: { value: {
required: true name: '',
}, title: '',
}, values: []
data() {
return {
values: '',
};
},
watch: {
values: {
handler() {
this.value.values = this.values.split('\n');
},
deep: true
} }
}, });
created() {
if (this.value.name == null) this.value.name = ''; let values: string = $ref(props.value.values.join('\n'));
if (this.value.title == null) this.value.title = '';
if (this.value.values == null) this.value.values = []; watch(values, () => {
this.values = this.value.values.join('\n'); props.value.values = values.split('\n')
}, }, {
deep: true
}); });
</script> </script>

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

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

28
packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
View file

@ -11,33 +11,19 @@
</XContainer> </XContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* eslint-disable vue/no-mutating-props */
import { defineComponent } from 'vue'; import { } from 'vue';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
import MkSwitch from '@/components/form/switch.vue'; import MkSwitch from '@/components/form/switch.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import * as os from '@/os';
export default defineComponent({ withDefaults(defineProps<{
components: { value: any
XContainer, MkSwitch, MkInput }>(), {
},
props: {
value: { value: {
required: true name: ''
}, }
},
data() {
return {
};
},
created() {
if (this.value.name == null) this.value.name = '';
},
}); });
</script> </script>

28
packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
View file

@ -11,31 +11,17 @@
</XContainer> </XContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* eslint-disable vue/no-mutating-props */
import { defineComponent } from 'vue'; import { } from 'vue';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import * as os from '@/os';
export default defineComponent({ withDefaults(defineProps<{
components: { value: any
XContainer, MkInput }>(), {
},
props: {
value: { value: {
required: true name: ''
}, }
},
data() {
return {
};
},
created() {
if (this.value.name == null) this.value.name = '';
},
}); });
</script> </script>

28
packages/client/src/pages/page-editor/els/page-editor.el.text.vue
View file

@ -9,31 +9,17 @@
</XContainer> </XContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* eslint-disable vue/no-mutating-props */
import { defineComponent } from 'vue'; import { } from 'vue';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
import * as os from '@/os';
export default defineComponent({ withDefaults(defineProps<{
components: { value: any
XContainer }>(), {
},
props: {
value: { value: {
required: true text: ''
}, }
},
data() {
return {
};
},
created() {
if (this.value.text == null) this.value.text = '';
},
}); });
</script> </script>

28
packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
View file

@ -11,32 +11,18 @@
</XContainer> </XContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* eslint-disable vue/no-mutating-props */
import { defineComponent } from 'vue'; import { } from 'vue';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
import MkTextarea from '@/components/form/textarea.vue'; import MkTextarea from '@/components/form/textarea.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import * as os from '@/os';
export default defineComponent({ withDefaults(defineProps<{
components: { value: any
XContainer, MkTextarea, MkInput }>(), {
},
props: {
value: { value: {
required: true name: ''
}, }
},
data() {
return {
};
},
created() {
if (this.value.name == null) this.value.name = '';
},
}); });
</script> </script>

28
packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
View file

@ -9,31 +9,17 @@
</XContainer> </XContainer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */ /* eslint-disable vue/no-mutating-props */
import { defineComponent } from 'vue'; import { } from 'vue';
import XContainer from '../page-editor.container.vue'; import XContainer from '../page-editor.container.vue';
import * as os from '@/os';
export default defineComponent({ withDefaults(defineProps<{
components: { value: any
XContainer }>(), {
},
props: {
value: { value: {
required: true text: ''
}, }
},
data() {
return {
};
},
created() {
if (this.value.text == null) this.value.text = '';
},
}); });
</script> </script>