138 lines
4.4 KiB
JavaScript
138 lines
4.4 KiB
JavaScript
import {n as normalizeComponent, U as UiEditor, O as Overlay, z as UiEditorOverlay, S as Strings, A as Arrays} from "./index.js";
|
|
import "./vendor.js";
|
|
var render = function() {
|
|
var _vm = this;
|
|
var _h = _vm.$createElement;
|
|
var _c = _vm._self._c || _h;
|
|
return _c("div", {staticClass: "editor-nested", attrs: {depth: _vm.depth}}, [_vm.items.length ? _c("div", {directives: [{name: "sortable", rawName: "v-sortable", value: {onUpdate: _vm.onSortingUpdated}, expression: "{ onUpdate: onSortingUpdated }"}], staticClass: "ui-pick-previews"}, _vm._l(_vm.items, function(item, index) {
|
|
return _c("div", {key: item.id, staticClass: "ui-pick-preview"}, [_c("ui-select-button", {attrs: {icon: _vm.getIcon(item), label: _vm.getName(item), description: _vm.getDescription(item), disabled: _vm.disabled}, on: {click: function($event) {
|
|
return _vm.editItem(item);
|
|
}}}), !_vm.disabled ? _c("ui-icon-button", {attrs: {icon: "fth-x", title: "@ui.close", disabled: _vm.disabled, size: 14}, on: {click: function($event) {
|
|
return _vm.removeItem(index);
|
|
}}}) : _vm._e()], 1);
|
|
}), 0) : _vm._e(), _vm.limit > _vm.items.length ? _c("ui-select-button", {attrs: {icon: "fth-plus", label: _vm.addLabel || "@ui.add", disabled: _vm.disabled}, on: {click: _vm.addItem}}) : _vm._e()], 1);
|
|
};
|
|
var staticRenderFns = [];
|
|
const script = {
|
|
name: "UiEditorFieldNested",
|
|
components: {UiEditor},
|
|
props: {
|
|
value: [Array, Object],
|
|
meta: Object,
|
|
depth: Number,
|
|
disabled: Boolean,
|
|
editor: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
entity: Object,
|
|
limit: {
|
|
type: Number,
|
|
default: 100
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 820
|
|
},
|
|
title: String,
|
|
addLabel: String,
|
|
itemLabel: Function,
|
|
itemDescription: Function,
|
|
itemIcon: [String, Function],
|
|
template: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
deep: true,
|
|
handler(val) {
|
|
this.setup(val);
|
|
}
|
|
}
|
|
},
|
|
data: () => ({
|
|
items: [],
|
|
multiple: false
|
|
}),
|
|
mounted() {
|
|
this.setup(this.value);
|
|
},
|
|
methods: {
|
|
setup(value) {
|
|
this.items = JSON.parse(JSON.stringify(value)) || [];
|
|
this.multiple = this.limit > 1;
|
|
if (!this.multiple) {
|
|
this.items = this.items ? [this.items] : [];
|
|
}
|
|
},
|
|
getNewItem() {
|
|
return JSON.parse(JSON.stringify(this.template || {}));
|
|
},
|
|
addItem() {
|
|
if (this.limit <= this.items.length) {
|
|
return;
|
|
}
|
|
this.editItem(this.getNewItem(), true);
|
|
this.onChange();
|
|
},
|
|
editItem(item, isAdd) {
|
|
let parentModel = JSON.parse(JSON.stringify(this.entity));
|
|
if (this.meta && this.meta.parentModel) {
|
|
parentModel.parentModel = this.meta.parentModel;
|
|
}
|
|
return Overlay.open({
|
|
component: UiEditorOverlay,
|
|
display: "editor",
|
|
editor: this.editor,
|
|
title: this.title || "@ui.edit.title",
|
|
model: item,
|
|
width: this.width,
|
|
parentModel,
|
|
create: isAdd
|
|
}).then((value) => {
|
|
if (isAdd) {
|
|
this.items.push(value);
|
|
} else {
|
|
const index = this.items.indexOf(item);
|
|
this.removeItem(index);
|
|
this.items.splice(index, 0, value);
|
|
}
|
|
this.onChange();
|
|
});
|
|
},
|
|
removeItem(index) {
|
|
this.items.splice(index, 1);
|
|
this.onChange();
|
|
},
|
|
onChange() {
|
|
this.$emit("input", this.multiple ? this.items : this.items.length > 0 ? this.items[0] : null);
|
|
},
|
|
getName(item) {
|
|
let name = typeof this.itemLabel === "function" ? this.itemLabel(item) : null;
|
|
return Strings.htmlToText(name != null ? name : "@ui.item");
|
|
},
|
|
getDescription(item) {
|
|
return Strings.htmlToText(typeof this.itemDescription === "function" ? this.itemDescription(item) : "");
|
|
},
|
|
getIcon(item) {
|
|
return typeof this.itemIcon === "function" ? this.itemIcon(item) : this.itemIcon;
|
|
},
|
|
onSortingUpdated(ev) {
|
|
this.items = Arrays.move(this.items, ev.oldIndex, ev.newIndex);
|
|
this.onChange();
|
|
}
|
|
}
|
|
};
|
|
const __cssModules = {};
|
|
var component = normalizeComponent(script, render, staticRenderFns, false, injectStyles, null, null, null);
|
|
function injectStyles(context) {
|
|
for (let o in __cssModules) {
|
|
this[o] = __cssModules[o];
|
|
}
|
|
}
|
|
component.options.__file = "app/editor/fields/nested.vue";
|
|
var nested = component.exports;
|
|
export default nested;
|