Sharkey/src/client/pages/page-editor/page-editor.blocks.vue

68 lines
2 KiB
Vue
Raw Normal View History

2019-05-02 10:55:59 +02:00
<template>
2019-05-03 07:49:22 +02:00
<x-draggable tag="div" :list="blocks" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
2020-04-12 20:23:23 +02:00
<component v-for="block in blocks" :is="'x-' + block.type" :value="block" @input="updateItem" @remove="() => removeItem(block)" :key="block.id" :aoi-script="aoiScript"/>
2019-05-02 10:55:59 +02:00
</x-draggable>
</template>
<script lang="ts">
import Vue from 'vue';
import * as XDraggable from 'vuedraggable';
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';
2019-05-05 08:12:25 +02:00
import XNumberInput from './els/page-editor.el.number-input.vue';
2019-05-02 10:55:59 +02:00
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';
2019-07-10 11:30:51 +02:00
import XRadioButton from './els/page-editor.el.radio-button.vue';
2020-04-15 17:39:21 +02:00
import XCanvas from './els/page-editor.el.canvas.vue';
2019-05-02 10:55:59 +02:00
export default Vue.extend({
components: {
2020-04-15 17:39:21 +02:00
XDraggable, XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas
2019-05-02 10:55:59 +02:00
},
props: {
value: {
type: Array,
required: true
},
2020-04-12 20:23:23 +02:00
aoiScript: {
2019-05-02 10:55:59 +02:00
required: true,
},
},
computed: {
blocks() {
return this.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('input', 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('input', newValue);
},
}
});
</script>