johan/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki 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>
</template>
<script lang="ts">
<script lang="ts" setup>
/* eslint-disable vue/no-mutating-props */
import { defineComponent } from 'vue';
import { } from 'vue';
import XContainer from '../page-editor.container.vue';
import MkSelect from '@/components/form/select.vue';
import MkInput from '@/components/form/input.vue';
import MkSwitch from '@/components/form/switch.vue';
import * as os from '@/os';
export default defineComponent({
components: {
XContainer, MkSelect, MkInput, MkSwitch
},
props: {
withDefaults(defineProps<{
value: any,
hpml: any
}>(), {
value: {
required: true
},
hpml: {
required: true,
},
},
data() {
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;
},
text: '',
action: 'dialog',
content: null,
event: null,
message: null,
primary: false,
var: null,
fn: null
}
});
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

67
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'],
props: {
const props = withDefaults(defineProps<{
value: any,
hpml: any
}>(), {
value: {
required: true
},
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();
title: null,
children: []
}
},
});
methods: {
async rename() {
const getPageBlockList = inject<(any) => any>('getPageBlockList');
async function rename() {
const { canceled, result: title } = await os.inputText({
title: 'Enter title',
default: this.value.title
default: props.value.title
});
if (canceled) return;
this.value.title = title;
},
props.value.title = title;
}
async add() {
async function add() {
const { canceled, result: type } = await os.select({
title: this.$ts._pages.chooseBlock,
groupedItems: this.getPageBlockList()
title: i18n.ts._pages.chooseBlock,
groupedItems: getPageBlockList()
});
if (canceled) return;
const id = uuid();
this.value.children.push({ id, type });
},
props.value.children.push({ id, type });
}
onMounted(() => {
if (props.value.title == null) {
rename();
}
});
</script>

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

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

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

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

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

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

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

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

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

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