1 files changed, 78 insertions, 0 deletions
diff --git a/packages/client/src/pages/page-editor/page-editor.blocks.vue b/packages/client/src/pages/page-editor/page-editor.blocks.vue
new file mode 100644
index 0000000000..b91d9abae8
--- /dev/null
+++ b/packages/client/src/pages/page-editor/page-editor.blocks.vue
@@ -0,0 +1,78 @@
+<template>
+<XDraggable tag="div" v-model="blocks" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
+	<template #item="{element}">
+		<component :is="'x-' + element.type" :value="element" @update:value="updateItem" @remove="() => removeItem(element)" :hpml="hpml"/>
+	</template>
+</XDraggable>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import XSection from './els/page-editor.el.section.vue';
+import XText from './els/page-editor.el.text.vue';
+import XTextarea from './els/page-editor.el.textarea.vue';
+import XImage from './els/page-editor.el.image.vue';
+import XButton from './els/page-editor.el.button.vue';
+import XTextInput from './els/page-editor.el.text-input.vue';
+import XTextareaInput from './els/page-editor.el.textarea-input.vue';
+import XNumberInput from './els/page-editor.el.number-input.vue';
+import XSwitch from './els/page-editor.el.switch.vue';
+import XIf from './els/page-editor.el.if.vue';
+import XPost from './els/page-editor.el.post.vue';
+import XCounter from './els/page-editor.el.counter.vue';
+import XRadioButton from './els/page-editor.el.radio-button.vue';
+import XCanvas from './els/page-editor.el.canvas.vue';
+import XNote from './els/page-editor.el.note.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
+		XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote
+	},
+
+	props: {
+		modelValue: {
+			type: Array,
+			required: true
+		},
+		hpml: {
+			required: true,
+		},
+	},
+
+	emits: ['update:modelValue'],
+
+	computed: {
+		blocks: {
+			get() {
+				return this.modelValue;
+			},
+			set(value) {
+				this.$emit('update:modelValue', value);
+			}
+		}
+	},
+
+	methods: {
+		updateItem(v) {
+			const i = this.blocks.findIndex(x => x.id === v.id);
+			const newValue = [
+				...this.blocks.slice(0, i),
+				v,
+				...this.blocks.slice(i + 1)
+			];
+			this.$emit('update:modelValue', newValue);
+		},
+
+		removeItem(el) {
+			const i = this.blocks.findIndex(x => x.id === el.id);
+			const newValue = [
+				...this.blocks.slice(0, i),
+				...this.blocks.slice(i + 1)
+			];
+			this.$emit('update:modelValue', newValue);
+		},
+	}
+});
+</script>