Your IP : 216.73.216.220
import Vue from 'vue';
import draggable from 'vuedraggable';
import fieldRow from './field-row.js';
export default Vue.component(
'nested-draggable',
{
props: {
fields: Array,
icons: Object,
global: Object,
depth: Number,
index: Number,
move: Function,
sort: Function,
fieldHasError: Function,
validateKey: Function,
language: Object,
loadMultiUse: Function,
multiUseElements: Object,
existingFieldKeyFields: Array,
keyWithoutMask: Function,
isRoot: Function
},
components: {
draggable,
fieldRow
},
methods: {
uuid(e) {
if (e.uid) {
return e.uid;
}
const key = Math.random()
.toString(16)
.slice(2);
this.$set(e, 'uid', key);
// Auto set key on structural fields
if ((e.key === this.global.maskPrefix || e.key === '') && this.global.structuralFields.includes(e.name)) {
this.$set(e, 'key', this.global.maskPrefix + key);
}
return e.uid;
},
onAdd: function (e) {
if (e.pullMode !== 'clone') {
return;
}
this.global.activeField = this.global.clonedField;
this.global.currentTab = 'general';
if (this.depth > 0) {
this.global.activeField.parent = this.$parent.list[this.index];
} else {
this.global.activeField.parent = {};
}
this.validateKey(this.global.activeField);
},
removeField: function (index) {
if (this.fields[index - 1]) {
this.global.activeField = this.fields[index - 1];
} else if (this.fields[index + 1]) {
this.global.activeField = this.fields[index + 1];
}
this.global.deletedFields.push(this.fields[index]);
if (this.existingFieldKeyFields.includes(this.fields[index])) {
let errorIndex = this.existingFieldKeyFields.indexOf(this.fields[index]);
this.existingFieldKeyFields.splice(errorIndex, 1);
}
this.fields.splice(index, 1);
if (this.fields.length === 0) {
if (this.depth > 0) {
this.$emit('set-parent-active', this.index);
} else {
this.global.activeField = {};
}
}
// Reset current tab
this.global.currentTab = 'general';
this.validateKey(this.global.activeField);
},
setParentActive(index) {
this.global.activeField = this.fields[index];
},
isParentField: function (field) {
return ['inline', 'palette'].includes(field.name);
}
},
template: `
<draggable
tag="ul"
class="dragtarget"
:list="fields"
group="fieldTypes"
ghost-class="ghost"
@add="onAdd"
:move="move"
@sort="sort"
>
<li v-for="(field, index) in fields" :key="uuid(field)" class="mask-field" :class="[{active: global.activeField == field}, 'mask-field--' + field.name, {'has-error': fieldHasError(field)}]">
<field-row
:global="global"
:fields="fields"
:field="field"
:language="language"
:icons="icons"
:index="index"
:load-multi-use="loadMultiUse"
:multi-use-elements="multiUseElements"
:field-key="uuid(field)"
@remove-field="removeField($event)"
:key-without-mask="keyWithoutMask"
:is-root="isRoot"
></field-row>
<div class="mask-field__dragarea" v-if="isParentField(field)">
<nested-draggable
@set-parent-active="setParentActive($event)"
:depth="depth + 1"
:index="index"
:fields="field.fields"
:icons="icons"
:global="global"
:move="move"
:sort="sort"
:field-has-error="fieldHasError"
:validate-key="validateKey"
:language="language"
:load-multi-use="loadMultiUse"
:multi-use-elements="multiUseElements"
:existing-field-key-fields="existingFieldKeyFields"
:key-without-mask="keyWithoutMask"
:is-root="isRoot"
/>
</div>
</li>
</draggable>
`
}
);