limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-29 13:27:31 -07:00
Code Issues 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 c97f41c250
commit 75f996a485
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>

51
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,54 +14,40 @@
</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;
},
async function choose() {
os.selectDriveFile(false).then((fileResponse: any) => {
file = fileResponse;
props.value.fileId = fileResponse.id;
});
}
mounted() {
if (this.value.fileId == null) {
this.choose();
onMounted(async () => {
if (props.value.fileId == null) {
await choose();
} else {
os.api('drive/files/show', {
fileId: this.value.fileId
}).then(file => {
this.file = file;
fileId: props.value.fileId
}).then(fileResponse => {
file = fileResponse;
});
}
},
methods: {
async choose() {
os.selectDriveFile(false).then(file => {
this.file = file;
this.value.fileId = file.id;
});
},
}
});
</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>