Michcio/FoundKey-0x7f
1
1
Fork 0
forked from FoundKeyGang/FoundKey
Code Pull requests Releases Activity

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:
Andy 2022-06-18 11:39:04 +02:00 committed by Chloe Kudryavtsev
parent a0deecfdee
commit 231cd63ce2
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>