1196 lines
36 KiB
JavaScript
1196 lines
36 KiB
JavaScript
/*
|
||
* XmlDigitalTeaching v0.0.1
|
||
* Copyright ©Thu Jul 24 2025 15:16:57 GMT+0800 (中国标准时间) smile
|
||
* Released under the ISC License.
|
||
*/
|
||
import Vue from 'vue';
|
||
|
||
const presetBgColors = ['#ede3fc', '#ffe4d2', '#ecebb4', '#fcdff6', '#d9f0b3', '#ccf1d9', '#bef1fe', '#fee6b4', '#cdedfc', '#dce8fa'];
|
||
|
||
//
|
||
var script$1 = {
|
||
name: 'XmlLayoutRender',
|
||
props: {
|
||
//模式：preview 预览 (默认)，editor 编辑
|
||
mode: {
|
||
type: String,
|
||
default: 'editor'
|
||
},
|
||
//属性中传递过来的块儿数据
|
||
pBlockData: {},
|
||
//块儿数据名
|
||
blockDataName: String,
|
||
//页面类型，取值h5、pc、pad
|
||
pageType: {
|
||
type: String,
|
||
default: 'h5'
|
||
},
|
||
resourceBasisPath: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
//当前所处组的规则
|
||
currentRule: {
|
||
type: Object,
|
||
default: function () {
|
||
return {};
|
||
}
|
||
},
|
||
ruleIndex: Number,
|
||
extendParams: {
|
||
type: Object,
|
||
default: function () {
|
||
return {};
|
||
}
|
||
},
|
||
bindingComponents: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
blockId: 'blockId' + Math.random(),
|
||
blockData: {
|
||
//当前块儿数据，一般用不到，因为一般的块儿中不会在块儿内更改数据
|
||
height: 'auto',
|
||
rows: [1],
|
||
columns: [1, 1],
|
||
rowsUnit: 'fr',
|
||
columnsUnit: 'fr',
|
||
rowGap: 0,
|
||
columnGap: 0,
|
||
autoFlow: ['row', 'dense'],
|
||
padding: [2, 2, 2, 2],
|
||
areaBoxes: []
|
||
},
|
||
propertyComponentsName: 'xml-layout-property',
|
||
//属性组件名
|
||
presetBgColors,
|
||
refreshKey: 'mpk' + new Date().getTime()
|
||
};
|
||
},
|
||
computed: {
|
||
containerStyle() {
|
||
let {
|
||
height,
|
||
padding,
|
||
rows,
|
||
columns,
|
||
rowsUnit,
|
||
columnsUnit,
|
||
rowGap,
|
||
columnGap,
|
||
autoFlow
|
||
} = this.blockData;
|
||
let stringPadding = padding.map(item => item + 'px');
|
||
let gridTemplateRows = rows.map(item => item + rowsUnit).join(' ');
|
||
let gridTemplateColumns = columns.map(item => item + columnsUnit).join(' ');
|
||
return {
|
||
display: 'grid',
|
||
height: height === 'auto' ? 'auto' : `${height}px`,
|
||
padding: stringPadding.join(' '),
|
||
gridAutoFlow: autoFlow.join(' '),
|
||
gridTemplateRows,
|
||
gridTemplateColumns,
|
||
gap: `${rowGap}px ${columnGap}px`
|
||
};
|
||
},
|
||
injectedAreaBoxes() {
|
||
return this.blockData.areaBoxes.filter(item => !!item.injectComponent?.data);
|
||
},
|
||
spareAreaBoxes() {
|
||
return this.blockData.areaBoxes.filter(item => !item.injectComponent?.data);
|
||
},
|
||
isEmpty() {
|
||
return !(this.blockData.recordSetList && this.blockData.recordSetList.length);
|
||
}
|
||
},
|
||
watch: {
|
||
pBlockData: {
|
||
handler(newValue) {
|
||
this.$nextTick(() => {
|
||
console.log('新data', newValue);
|
||
this.blockData = Object.assign({}, this.blockData, newValue);
|
||
});
|
||
},
|
||
deep: true,
|
||
immediate: true
|
||
}
|
||
},
|
||
provide() {
|
||
return {
|
||
getCatalogList: () => ({
|
||
data: this.catalogList
|
||
}),
|
||
getCurrentRuleIndex: () => this.currentRuLeIndex,
|
||
getXmlLayoutInstance: () => this
|
||
};
|
||
},
|
||
methods: {
|
||
// getAreaBoxMainIndex(uuid) {
|
||
// return this.blockData.areaBoxes.findIndex(item => item.uuid === uuid)
|
||
// },
|
||
// genAreaBoxStyle(areaBox,index) {
|
||
// let { rowStart, rowEnd, columnStart, columnEnd } = areaBox
|
||
// let target = index % this.presetBgColors.length
|
||
|
||
// return {
|
||
// '--areabox-color': this.presetBgColors[target],
|
||
// gridRow: `${rowStart} / ${rowEnd}`,
|
||
// gridColumn: `${columnStart} / ${columnEnd}`,
|
||
// backgroundColor: `${this.presetBgColors[target]}66`, // 66透明度
|
||
// }
|
||
// },
|
||
// spareAreaBoxClick(event, item) {
|
||
// let rect = event.target.getBoundingClientRect()
|
||
// this.$EventBus.$emit('areaBoxClick', { ...item, type: 'spare', rect }, { blockId: this.blockId, ruleIndex: this.ruleIndex})
|
||
// },
|
||
// 此方法必须要，用户注册块儿点击事件
|
||
blockClick() {
|
||
this.$emit('blockclick', {
|
||
blockData: this.blockData,
|
||
dataName: this.blockDataName,
|
||
propertyComponentsName: this.propertyComponentsName,
|
||
blockId: this.blockId,
|
||
ruleIndex: this.ruleIndex
|
||
});
|
||
}
|
||
},
|
||
created() {}
|
||
};
|
||
|
||
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
||
if (typeof shadowMode !== 'boolean') {
|
||
createInjectorSSR = createInjector;
|
||
createInjector = shadowMode;
|
||
shadowMode = false;
|
||
}
|
||
// Vue.extend constructor export interop.
|
||
const options = typeof script === 'function' ? script.options : script;
|
||
// render functions
|
||
if (template && template.render) {
|
||
options.render = template.render;
|
||
options.staticRenderFns = template.staticRenderFns;
|
||
options._compiled = true;
|
||
// functional template
|
||
if (isFunctionalTemplate) {
|
||
options.functional = true;
|
||
}
|
||
}
|
||
// scopedId
|
||
if (scopeId) {
|
||
options._scopeId = scopeId;
|
||
}
|
||
let hook;
|
||
if (moduleIdentifier) {
|
||
// server build
|
||
hook = function (context) {
|
||
// 2.3 injection
|
||
context = context ||
|
||
// cached call
|
||
this.$vnode && this.$vnode.ssrContext ||
|
||
// stateful
|
||
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
|
||
// 2.2 with runInNewContext: true
|
||
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
||
context = __VUE_SSR_CONTEXT__;
|
||
}
|
||
// inject component styles
|
||
if (style) {
|
||
style.call(this, createInjectorSSR(context));
|
||
}
|
||
// register component module identifier for async chunk inference
|
||
if (context && context._registeredComponents) {
|
||
context._registeredComponents.add(moduleIdentifier);
|
||
}
|
||
};
|
||
// used by ssr in case component is cached and beforeCreate
|
||
// never gets called
|
||
options._ssrRegister = hook;
|
||
} else if (style) {
|
||
hook = shadowMode ? function (context) {
|
||
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
|
||
} : function (context) {
|
||
style.call(this, createInjector(context));
|
||
};
|
||
}
|
||
if (hook) {
|
||
if (options.functional) {
|
||
// register for functional component in vue file
|
||
const originalRender = options.render;
|
||
options.render = function renderWithStyleInjection(h, context) {
|
||
hook.call(context);
|
||
return originalRender(h, context);
|
||
};
|
||
} else {
|
||
// inject component registration as beforeCreate hook
|
||
const existing = options.beforeCreate;
|
||
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
||
}
|
||
}
|
||
return script;
|
||
}
|
||
|
||
/* script */
|
||
const __vue_script__$1 = script$1;
|
||
|
||
/* template */
|
||
var __vue_render__$1 = function () {
|
||
var _vm = this;
|
||
var _h = _vm.$createElement;
|
||
var _c = _vm._self._c || _h;
|
||
return _c(
|
||
"div",
|
||
{
|
||
staticClass: "xml-layout-container",
|
||
class: "xml-layout-container-" + _vm.pageType,
|
||
attrs: { id: _vm.blockId },
|
||
on: {
|
||
"!click": function ($event) {
|
||
return _vm.blockClick.apply(null, arguments)
|
||
},
|
||
},
|
||
},
|
||
[
|
||
_c("div", { class: ["xml-layout__wrapper", _vm.mode] }, [
|
||
_c(
|
||
"div",
|
||
{
|
||
staticClass: "xml-grid-layout xml-grid-layout__container",
|
||
style: _vm.containerStyle,
|
||
},
|
||
[
|
||
_vm._t("default"),
|
||
_vm._v(" "),
|
||
_vm._l(_vm.blockData.areaBoxes, function (item, index) {
|
||
return _c("XmlAreaBox", {
|
||
key: item.uuid,
|
||
attrs: {
|
||
injected: _vm.bindingComponents.indexOf(item.uuid) !== -1,
|
||
data: item,
|
||
ruleIndex: _vm.ruleIndex,
|
||
boxIndex: index,
|
||
mode: _vm.mode,
|
||
sign: _vm.currentRule.sign,
|
||
},
|
||
})
|
||
}),
|
||
],
|
||
2
|
||
),
|
||
]),
|
||
]
|
||
)
|
||
};
|
||
var __vue_staticRenderFns__$1 = [];
|
||
__vue_render__$1._withStripped = true;
|
||
|
||
/* style */
|
||
const __vue_inject_styles__$1 = undefined;
|
||
/* scoped */
|
||
const __vue_scope_id__$1 = undefined;
|
||
/* module identifier */
|
||
const __vue_module_identifier__$1 = undefined;
|
||
/* functional template */
|
||
const __vue_is_functional_template__$1 = false;
|
||
/* style inject */
|
||
|
||
/* style inject SSR */
|
||
|
||
/* style inject shadow dom */
|
||
|
||
|
||
|
||
const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
|
||
{ render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
|
||
__vue_inject_styles__$1,
|
||
__vue_script__$1,
|
||
__vue_scope_id__$1,
|
||
__vue_is_functional_template__$1,
|
||
__vue_module_identifier__$1,
|
||
false,
|
||
undefined,
|
||
undefined,
|
||
undefined
|
||
);
|
||
|
||
/*!
|
||
* portal-vue © Thorsten Lünborg, 2019
|
||
*
|
||
* Version: 2.1.7
|
||
*
|
||
* LICENCE: MIT
|
||
*
|
||
* https://github.com/linusborg/portal-vue
|
||
*
|
||
*/
|
||
function _typeof(obj) {
|
||
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
||
_typeof = function (obj) {
|
||
return typeof obj;
|
||
};
|
||
} else {
|
||
_typeof = function (obj) {
|
||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
||
};
|
||
}
|
||
return _typeof(obj);
|
||
}
|
||
function _toConsumableArray(arr) {
|
||
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
|
||
}
|
||
function _arrayWithoutHoles(arr) {
|
||
if (Array.isArray(arr)) {
|
||
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
|
||
return arr2;
|
||
}
|
||
}
|
||
function _iterableToArray(iter) {
|
||
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
|
||
}
|
||
function _nonIterableSpread() {
|
||
throw new TypeError("Invalid attempt to spread non-iterable instance");
|
||
}
|
||
var inBrowser = typeof window !== 'undefined';
|
||
function freeze(item) {
|
||
if (Array.isArray(item) || _typeof(item) === 'object') {
|
||
return Object.freeze(item);
|
||
}
|
||
return item;
|
||
}
|
||
function combinePassengers(transports) {
|
||
var slotProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||
return transports.reduce(function (passengers, transport) {
|
||
var temp = transport.passengers[0];
|
||
var newPassengers = typeof temp === 'function' ? temp(slotProps) : transport.passengers;
|
||
return passengers.concat(newPassengers);
|
||
}, []);
|
||
}
|
||
function stableSort(array, compareFn) {
|
||
return array.map(function (v, idx) {
|
||
return [idx, v];
|
||
}).sort(function (a, b) {
|
||
return compareFn(a[1], b[1]) || a[0] - b[0];
|
||
}).map(function (c) {
|
||
return c[1];
|
||
});
|
||
}
|
||
function pick(obj, keys) {
|
||
return keys.reduce(function (acc, key) {
|
||
if (obj.hasOwnProperty(key)) {
|
||
acc[key] = obj[key];
|
||
}
|
||
return acc;
|
||
}, {});
|
||
}
|
||
var transports = {};
|
||
var targets = {};
|
||
var sources = {};
|
||
var Wormhole = Vue.extend({
|
||
data: function data() {
|
||
return {
|
||
transports: transports,
|
||
targets: targets,
|
||
sources: sources,
|
||
trackInstances: inBrowser
|
||
};
|
||
},
|
||
methods: {
|
||
open: function open(transport) {
|
||
if (!inBrowser) return;
|
||
var to = transport.to,
|
||
from = transport.from,
|
||
passengers = transport.passengers,
|
||
_transport$order = transport.order,
|
||
order = _transport$order === void 0 ? Infinity : _transport$order;
|
||
if (!to || !from || !passengers) return;
|
||
var newTransport = {
|
||
to: to,
|
||
from: from,
|
||
passengers: freeze(passengers),
|
||
order: order
|
||
};
|
||
var keys = Object.keys(this.transports);
|
||
if (keys.indexOf(to) === -1) {
|
||
Vue.set(this.transports, to, []);
|
||
}
|
||
var currentIndex = this.$_getTransportIndex(newTransport); // Copying the array here so that the PortalTarget change event will actually contain two distinct arrays
|
||
|
||
var newTransports = this.transports[to].slice(0);
|
||
if (currentIndex === -1) {
|
||
newTransports.push(newTransport);
|
||
} else {
|
||
newTransports[currentIndex] = newTransport;
|
||
}
|
||
this.transports[to] = stableSort(newTransports, function (a, b) {
|
||
return a.order - b.order;
|
||
});
|
||
},
|
||
close: function close(transport) {
|
||
var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
||
var to = transport.to,
|
||
from = transport.from;
|
||
if (!to || !from && force === false) return;
|
||
if (!this.transports[to]) {
|
||
return;
|
||
}
|
||
if (force) {
|
||
this.transports[to] = [];
|
||
} else {
|
||
var index = this.$_getTransportIndex(transport);
|
||
if (index >= 0) {
|
||
// Copying the array here so that the PortalTarget change event will actually contain two distinct arrays
|
||
var newTransports = this.transports[to].slice(0);
|
||
newTransports.splice(index, 1);
|
||
this.transports[to] = newTransports;
|
||
}
|
||
}
|
||
},
|
||
registerTarget: function registerTarget(target, vm, force) {
|
||
if (!inBrowser) return;
|
||
if (this.trackInstances && !force && this.targets[target]) {
|
||
console.warn("[portal-vue]: Target ".concat(target, " already exists"));
|
||
}
|
||
this.$set(this.targets, target, Object.freeze([vm]));
|
||
},
|
||
unregisterTarget: function unregisterTarget(target) {
|
||
this.$delete(this.targets, target);
|
||
},
|
||
registerSource: function registerSource(source, vm, force) {
|
||
if (!inBrowser) return;
|
||
if (this.trackInstances && !force && this.sources[source]) {
|
||
console.warn("[portal-vue]: source ".concat(source, " already exists"));
|
||
}
|
||
this.$set(this.sources, source, Object.freeze([vm]));
|
||
},
|
||
unregisterSource: function unregisterSource(source) {
|
||
this.$delete(this.sources, source);
|
||
},
|
||
hasTarget: function hasTarget(to) {
|
||
return !!(this.targets[to] && this.targets[to][0]);
|
||
},
|
||
hasSource: function hasSource(to) {
|
||
return !!(this.sources[to] && this.sources[to][0]);
|
||
},
|
||
hasContentFor: function hasContentFor(to) {
|
||
return !!this.transports[to] && !!this.transports[to].length;
|
||
},
|
||
// Internal
|
||
$_getTransportIndex: function $_getTransportIndex(_ref) {
|
||
var to = _ref.to,
|
||
from = _ref.from;
|
||
for (var i in this.transports[to]) {
|
||
if (this.transports[to][i].from === from) {
|
||
return +i;
|
||
}
|
||
}
|
||
return -1;
|
||
}
|
||
}
|
||
});
|
||
var wormhole = new Wormhole(transports);
|
||
var _id = 1;
|
||
var Portal = Vue.extend({
|
||
name: 'portal',
|
||
props: {
|
||
disabled: {
|
||
type: Boolean
|
||
},
|
||
name: {
|
||
type: String,
|
||
default: function _default() {
|
||
return String(_id++);
|
||
}
|
||
},
|
||
order: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
slim: {
|
||
type: Boolean
|
||
},
|
||
slotProps: {
|
||
type: Object,
|
||
default: function _default() {
|
||
return {};
|
||
}
|
||
},
|
||
tag: {
|
||
type: String,
|
||
default: 'DIV'
|
||
},
|
||
to: {
|
||
type: String,
|
||
default: function _default() {
|
||
return String(Math.round(Math.random() * 10000000));
|
||
}
|
||
}
|
||
},
|
||
created: function created() {
|
||
var _this = this;
|
||
this.$nextTick(function () {
|
||
wormhole.registerSource(_this.name, _this);
|
||
});
|
||
},
|
||
mounted: function mounted() {
|
||
if (!this.disabled) {
|
||
this.sendUpdate();
|
||
}
|
||
},
|
||
updated: function updated() {
|
||
if (this.disabled) {
|
||
this.clear();
|
||
} else {
|
||
this.sendUpdate();
|
||
}
|
||
},
|
||
beforeDestroy: function beforeDestroy() {
|
||
wormhole.unregisterSource(this.name);
|
||
this.clear();
|
||
},
|
||
watch: {
|
||
to: function to(newValue, oldValue) {
|
||
oldValue && oldValue !== newValue && this.clear(oldValue);
|
||
this.sendUpdate();
|
||
}
|
||
},
|
||
methods: {
|
||
clear: function clear(target) {
|
||
var closer = {
|
||
from: this.name,
|
||
to: target || this.to
|
||
};
|
||
wormhole.close(closer);
|
||
},
|
||
normalizeSlots: function normalizeSlots() {
|
||
return this.$scopedSlots.default ? [this.$scopedSlots.default] : this.$slots.default;
|
||
},
|
||
normalizeOwnChildren: function normalizeOwnChildren(children) {
|
||
return typeof children === 'function' ? children(this.slotProps) : children;
|
||
},
|
||
sendUpdate: function sendUpdate() {
|
||
var slotContent = this.normalizeSlots();
|
||
if (slotContent) {
|
||
var transport = {
|
||
from: this.name,
|
||
to: this.to,
|
||
passengers: _toConsumableArray(slotContent),
|
||
order: this.order
|
||
};
|
||
wormhole.open(transport);
|
||
} else {
|
||
this.clear();
|
||
}
|
||
}
|
||
},
|
||
render: function render(h) {
|
||
var children = this.$slots.default || this.$scopedSlots.default || [];
|
||
var Tag = this.tag;
|
||
if (children && this.disabled) {
|
||
return children.length <= 1 && this.slim ? this.normalizeOwnChildren(children)[0] : h(Tag, [this.normalizeOwnChildren(children)]);
|
||
} else {
|
||
return this.slim ? h() : h(Tag, {
|
||
class: {
|
||
'v-portal': true
|
||
},
|
||
style: {
|
||
display: 'none'
|
||
},
|
||
key: 'v-portal-placeholder'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
var PortalTarget = Vue.extend({
|
||
name: 'portalTarget',
|
||
props: {
|
||
multiple: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
name: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
slim: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
slotProps: {
|
||
type: Object,
|
||
default: function _default() {
|
||
return {};
|
||
}
|
||
},
|
||
tag: {
|
||
type: String,
|
||
default: 'div'
|
||
},
|
||
transition: {
|
||
type: [String, Object, Function]
|
||
}
|
||
},
|
||
data: function data() {
|
||
return {
|
||
transports: wormhole.transports,
|
||
firstRender: true
|
||
};
|
||
},
|
||
created: function created() {
|
||
var _this = this;
|
||
this.$nextTick(function () {
|
||
wormhole.registerTarget(_this.name, _this);
|
||
});
|
||
},
|
||
watch: {
|
||
ownTransports: function ownTransports() {
|
||
this.$emit('change', this.children().length > 0);
|
||
},
|
||
name: function name(newVal, oldVal) {
|
||
/**
|
||
* TODO
|
||
* This should warn as well ...
|
||
*/
|
||
wormhole.unregisterTarget(oldVal);
|
||
wormhole.registerTarget(newVal, this);
|
||
}
|
||
},
|
||
mounted: function mounted() {
|
||
var _this2 = this;
|
||
if (this.transition) {
|
||
this.$nextTick(function () {
|
||
// only when we have a transition, because it causes a re-render
|
||
_this2.firstRender = false;
|
||
});
|
||
}
|
||
},
|
||
beforeDestroy: function beforeDestroy() {
|
||
wormhole.unregisterTarget(this.name);
|
||
},
|
||
computed: {
|
||
ownTransports: function ownTransports() {
|
||
var transports = this.transports[this.name] || [];
|
||
if (this.multiple) {
|
||
return transports;
|
||
}
|
||
return transports.length === 0 ? [] : [transports[transports.length - 1]];
|
||
},
|
||
passengers: function passengers() {
|
||
return combinePassengers(this.ownTransports, this.slotProps);
|
||
}
|
||
},
|
||
methods: {
|
||
// can't be a computed prop because it has to "react" to $slot changes.
|
||
children: function children() {
|
||
return this.passengers.length !== 0 ? this.passengers : this.$scopedSlots.default ? this.$scopedSlots.default(this.slotProps) : this.$slots.default || [];
|
||
},
|
||
// can't be a computed prop because it has to "react" to this.children().
|
||
noWrapper: function noWrapper() {
|
||
var noWrapper = this.slim && !this.transition;
|
||
if (noWrapper && this.children().length > 1) {
|
||
console.warn('[portal-vue]: PortalTarget with `slim` option received more than one child element.');
|
||
}
|
||
return noWrapper;
|
||
}
|
||
},
|
||
render: function render(h) {
|
||
var noWrapper = this.noWrapper();
|
||
var children = this.children();
|
||
var Tag = this.transition || this.tag;
|
||
return noWrapper ? children[0] : this.slim && !Tag ? h() : h(Tag, {
|
||
props: {
|
||
// if we have a transition component, pass the tag if it exists
|
||
tag: this.transition && this.tag ? this.tag : undefined
|
||
},
|
||
class: {
|
||
'vue-portal-target': true
|
||
}
|
||
}, children);
|
||
}
|
||
});
|
||
var _id$1 = 0;
|
||
var portalProps = ['disabled', 'name', 'order', 'slim', 'slotProps', 'tag', 'to'];
|
||
var targetProps = ['multiple', 'transition'];
|
||
Vue.extend({
|
||
name: 'MountingPortal',
|
||
inheritAttrs: false,
|
||
props: {
|
||
append: {
|
||
type: [Boolean, String]
|
||
},
|
||
bail: {
|
||
type: Boolean
|
||
},
|
||
mountTo: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
// Portal
|
||
disabled: {
|
||
type: Boolean
|
||
},
|
||
// name for the portal
|
||
name: {
|
||
type: String,
|
||
default: function _default() {
|
||
return 'mounted_' + String(_id$1++);
|
||
}
|
||
},
|
||
order: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
slim: {
|
||
type: Boolean
|
||
},
|
||
slotProps: {
|
||
type: Object,
|
||
default: function _default() {
|
||
return {};
|
||
}
|
||
},
|
||
tag: {
|
||
type: String,
|
||
default: 'DIV'
|
||
},
|
||
// name for the target
|
||
to: {
|
||
type: String,
|
||
default: function _default() {
|
||
return String(Math.round(Math.random() * 10000000));
|
||
}
|
||
},
|
||
// Target
|
||
multiple: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
targetSlim: {
|
||
type: Boolean
|
||
},
|
||
targetSlotProps: {
|
||
type: Object,
|
||
default: function _default() {
|
||
return {};
|
||
}
|
||
},
|
||
targetTag: {
|
||
type: String,
|
||
default: 'div'
|
||
},
|
||
transition: {
|
||
type: [String, Object, Function]
|
||
}
|
||
},
|
||
created: function created() {
|
||
if (typeof document === 'undefined') return;
|
||
var el = document.querySelector(this.mountTo);
|
||
if (!el) {
|
||
console.error("[portal-vue]: Mount Point '".concat(this.mountTo, "' not found in document"));
|
||
return;
|
||
}
|
||
var props = this.$props; // Target already exists
|
||
|
||
if (wormhole.targets[props.name]) {
|
||
if (props.bail) {
|
||
console.warn("[portal-vue]: Target ".concat(props.name, " is already mounted.\n Aborting because 'bail: true' is set"));
|
||
} else {
|
||
this.portalTarget = wormhole.targets[props.name];
|
||
}
|
||
return;
|
||
}
|
||
var append = props.append;
|
||
if (append) {
|
||
var type = typeof append === 'string' ? append : 'DIV';
|
||
var mountEl = document.createElement(type);
|
||
el.appendChild(mountEl);
|
||
el = mountEl;
|
||
} // get props for target from $props
|
||
// we have to rename a few of them
|
||
|
||
var _props = pick(this.$props, targetProps);
|
||
_props.slim = this.targetSlim;
|
||
_props.tag = this.targetTag;
|
||
_props.slotProps = this.targetSlotProps;
|
||
_props.name = this.to;
|
||
this.portalTarget = new PortalTarget({
|
||
el: el,
|
||
parent: this.$parent || this,
|
||
propsData: _props
|
||
});
|
||
},
|
||
beforeDestroy: function beforeDestroy() {
|
||
var target = this.portalTarget;
|
||
if (this.append) {
|
||
var el = target.$el;
|
||
el.parentNode.removeChild(el);
|
||
}
|
||
target.$destroy();
|
||
},
|
||
render: function render(h) {
|
||
if (!this.portalTarget) {
|
||
console.warn("[portal-vue] Target wasn't mounted");
|
||
return h();
|
||
} // if there's no "manual" scoped slot, so we create a <Portal> ourselves
|
||
|
||
if (!this.$scopedSlots.manual) {
|
||
var props = pick(this.$props, portalProps);
|
||
return h(Portal, {
|
||
props: props,
|
||
attrs: this.$attrs,
|
||
on: this.$listeners,
|
||
scopedSlots: this.$scopedSlots
|
||
}, this.$slots.default);
|
||
} // else, we render the scoped slot
|
||
|
||
var content = this.$scopedSlots.manual({
|
||
to: this.to
|
||
}); // if user used <template> for the scoped slot
|
||
// content will be an array
|
||
|
||
if (Array.isArray(content)) {
|
||
content = content[0];
|
||
}
|
||
if (!content) return h();
|
||
return content;
|
||
}
|
||
});
|
||
|
||
var iconReplace = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA2hJREFUWEe9l19oU2cYxn9vojNxCKMwRXexghPRZMw/DVpvZnGOaXGjbmNXgyJeiG2KvRJB0F7ohbKbtI6JF4JXA3WIjioq2ru4NWGMxgrqRfFCBUXc1DYpzXnlnJNzenIakxyb9tzl+97n+Z68/773E81yFqWTYN8YQlI28qcDW73n2ZKFHy65bP4W5W8DbhVkUfphv/xfjVo0gwY7u2St9EmCow52bXKiM4Sc9XFNCNwoGsbx0VOL/6p0jl/AUA0xW919n4BYrzbJVOEiMG3jJVPtyw1EXcHOllfAkLTQVk2ADrMV4bZl4xPg4D7vGm9FQptVaAV+LOMTLuZSkR+8aw0X4CWPd+W3E+YEyjpn3TCMzd5wzKkA59B4T+ECqt/bntN0biC6Zc5CUCmEaw7o8nCx8Hg6f6bzYV48YB4c7544isiRUv4M5gYi7XbJTpdhQ5LwXUlcXqb6fPKDyJr7v8jzeRMQ681/JlM8cGMvtI+kIoNzLuCLfeOfFBeE94IhbgjsZOzzh8Cq7aqNSDBrOFatD1TCx7vGOwiF/pixJ/Q0rBXX6KDEuwvHET3k2Clcvdsf2WkKuANsqkVQYb9LWvg1CC6WzN8U2GZiDNFPR1PRR6JpmllAcxAiirzA4IFsYSIILtb7X5NMLRoDDuf6IykrB4IQNMI21pP/5m4qcs2tBi+pZvhaWrjeiIPq5XA9oBnr5jpDmGZZz8t6CUy71l6Nvsq/WUU43BQElxuIDlkCdIRlFHhaKq8rkuDbIESx7vx+EU4FwZRss7aADGeAvS6BcFg2cqxewrI+Xy+oZCc6zM8I52bglHZJMFgPn09AFlV3VqyIdy4l6zIaLs11gn1TWS4pdUThtLTwpJaI8ptO28zYVsPEk3lzqrJGNzsEw3yHcMkDWlHPwY797AX8y1ImuYdgZ7Gwyztyz7kHLC9kuYHylRMC78g9PwLMXPDmQYiYbGC01uHm/qxD4OZehofAypIXMpIgMb8CsvyE8runH1xhkoPSyr2qWV02771HFXjJNWO996yB0fOdR0gzxR3ZRNovpmEhcEORpQNl5gRjG2QJsUM28KxiGdqLdT/x3nkda8bKhZPADiDi+9dlw8isWnGtJNN/+Iii9Sb80n1ivWKXtPHa9UCysBuM30A+rsXn2x96C4xUoavxY8kaAAAAAElFTkSuQmCC";
|
||
|
||
var iconSetup = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA7NJREFUWEftl2tsVEUUx/9nku7ei2AkPEQCGlSg6b3bUiuPoCGCJVGTkihUwgdIUEBt9y4hqIkfUB6+osbEvatGTfmICV1C4AspjwR5JFBeoZ0SEjQhtDXAyhdM9t4t6T1m2t2lu92227ut8YPz6U7m3Pn/zpk5M3MI/0Kbt+X+1DItWAvunUGe6JDfa8cyspSvH4o4Gz0WywSwkMHGSHzM+Lkjpr0zlF2llVrjgT8FMP+hDe2VdvBt1c8BMC13P4D6kURzxpl3yZi+s9A/ZmPydQgRByBem3sMj0+8C5mocC50VetM/GVHVP8oC2CGnZ0g+gTAHYAaUBa4IL+lzlHBDDA2LLeOCHEwAu8tbELDor19o8kHOjYf+g5tdwyAeEMfgBlJLgWLswDapK1V+RXN/BcKu68yURzgCQPFM+NHf1+B7S17VLe5D8AIuz8RYQuReL49GrhUCoC51V0JDwcATCokrua+lijH2v1NIPCv/RGw3IsApklbe6oUcSPsrKA+zzF5KHE1v/JeRQHMuzIADOCktLXlfgFCjc4yFogDNG048R9a38Kl7gUHznfX3FPZMyYAZuTBUnCv8vyJ4cS/OLUN+9rXKM+Xy5h+MpuGpuX6jkBFY3KxEKIZwOzhxD87tR3ybvkJebvimoxpkZyDyC9AKNJTw+wp8TlFrvkmGdObBi6z7yUwrJ4qYi8OwrNFiQPN0tbezN9jvgAqIynTY1ael5ci7nsPmFbqMMB1pYr7Api1rVOf4k1JzHns5iMH160vmLXZPB8i7CXtgYpG52Uh6Hi9cQgfv/TVIIBixNP3zgRpax+Oeg8YYWcHEe3+vHY36ua35AAUI54+eVXaQ9oajR7Aco8Q8ErLhtWYOek27qceRWt3NY7cqO0/XosIezrt/QGEIsm/zenXJ9Y+/Rtau57DxT8XcKo3mLnWC6Za/jqVBmA5+xi0Ljsp4zIIZ0B0VkaD6kEzYisNIJyqZ3gGSLSVIXD6ik2JERXzDEoCGK1YIfv/Af6LEXA6QfSXjGrVY7HGw82hipRAMJAAuEva+uzMQaTSZ6W0tcnjDWCEky8QiTOZA6sf4GFN8KO0tYbxhDAt9zSAF9WDVBU02cIkZLndDMwE0RsyGjw4HhBm2P0ahPeJ6Hx7NLgkex2rj/Tb7lxa+DhAt8Ce78pooAMsMJeYVG1YA+ZOGdOfzHkTZjqV7/J0Luv5hcGrxiMCYHwjY9oHg94Dgy6LralKsFcFD8+MCYgQV8Gsyr4/8uf7B8Tx9p9D/L0VAAAAAElFTkSuQmCC";
|
||
|
||
var iconRemove = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAgCAYAAAB6kdqOAAAAAXNSR0IArs4c6QAAAtdJREFUWEftmM1LFHEYxz/Pau1YSpfq0AtIdIhaJdC9GFhePHgUBEtouwSGStHLWf0DpHLWgqiQjKhDRYfyEqmHCHPUYmeVwugShHkpFXxJfWq3dl213FlnJA8NDMww3+f5feY7v3me+Y3gYAvUTzUh0uhA6kwivBHlVsQ0wssDxEmGQMO0OtFlqlGR49FW//3UOGdAXjuUJJBXtukvyRgo0ztPp0913DaNJaY4cijdAJleTwt04NxUfta8r1HQ/EyTp9Wr9tjhnKZU3apABQ0zNYreTZvYpUCRQ1HTPxRLsypQoGH6IVDpcrz04arNCafSAa3LK/0Hwm7bNMqcOPQfaAM8Mh0FGf6nj0zRdhFeCFlDs5Pf3r+7vWMiMa8KG3SP6kyVilStqNTr0adUtSYazrmnXeSylUJ8FKKUIPiAXuaJMoctR/iyorl6CiQMb9LvRwfNvDG1OAtcAPauUhNapJiLS3qZh0DjtmlsiyXXfnpQStMXp7jiI0K5FDESOxGvgESpiISNTrX4AOxzCLMomyBPypj0BEiFy9FW47xa1ALXM4aJ28oDCVLtAZCO2WbOTn1NCT5erglmMeiMB0DEW4Ja3ABOuwSy3QMJ1+xWo077GEQ47BLI/aRWpc6uNjowGE+B6UZpdgTnI4RyKqF175BqWSSUA0JXEkApkyDdjoBi89ki2eBdAylywg75nwFfN4ZDcNE2jRbt5y1KoVNX/qZz7RDKYztsVKpF+8+qG3IJNOIe6BfB/shJ4xjCTVdASps3QL+/l9XiKVCxRqjPUswuCdRPfUJk9xqTJMJmFxYWSofatvSmvjEZ5VQqJEhnDMiTHwkKT4wZu8qqLT7IAs+B7Y6BlJAEuRPv9imLxGRxcpxopXAA31yFfTV3VPtoQlj9j4nQwWYuSQGjycKYOIiBZc/hzco12zdqX/EPq0U5ShAhCPE9tnQfRBnEx4AU8Wj5Pf0AgUJM93Ow4uMAAAAASUVORK5CYII=";
|
||
|
||
//
|
||
var script = {
|
||
name: 'XmlAreaBox',
|
||
components: {
|
||
PortalTarget
|
||
},
|
||
props: {
|
||
data: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
boxIndex: Number,
|
||
// mainIndex: Number,
|
||
injected: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
sign: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
//模式：preview 预览 (默认)，editor 编辑
|
||
mode: {
|
||
type: String,
|
||
default: 'editor'
|
||
},
|
||
//属性中传递过来的块儿数据
|
||
pBlockData: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
//当前所处组的规则
|
||
currentRule: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
ruleIndex: Number
|
||
},
|
||
data() {
|
||
return {
|
||
presetBgColors,
|
||
images: {
|
||
iconReplace,
|
||
iconSetup,
|
||
iconRemove
|
||
},
|
||
clickInside: false,
|
||
refreshKey: 'apk' + new Date().getTime()
|
||
};
|
||
},
|
||
directives: {
|
||
clickInside: {
|
||
bind(el, binding, vnode) {
|
||
function clickHandler(e) {
|
||
let isInside = false;
|
||
if (el.contains(e.target)) {
|
||
isInside = true;
|
||
}
|
||
if (binding.expression) {
|
||
binding.value(isInside);
|
||
}
|
||
}
|
||
el.__vueClickOutside__ = clickHandler;
|
||
document.addEventListener('click', clickHandler);
|
||
},
|
||
update() {},
|
||
unbind(el, binding) {
|
||
document.removeEventListener('click', el.__vueClickOutside__);
|
||
delete el.__vueClickOutside__;
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
activeInjectId() {
|
||
return this.getActiveInjectId;
|
||
},
|
||
activeInjectedBoxId() {
|
||
return this.getActiveInjectedBoxId;
|
||
},
|
||
isInActive() {
|
||
return this.activeInjectId && this.activeInjectId === this.data.uuid || this.activeInjectedBoxId && this.activeInjectedBoxId === this.data.uuid;
|
||
}
|
||
},
|
||
provide() {
|
||
return {
|
||
getAreaBoxProvider: () => ({
|
||
injected: this.injected,
|
||
data: this.data,
|
||
boxIndex: this.boxIndex,
|
||
mainIndex: this.mainIndex
|
||
})
|
||
};
|
||
},
|
||
inject: {
|
||
getActiveInjectId: {
|
||
from: 'getActiveInjectId',
|
||
default: () => ''
|
||
},
|
||
getActiveInjectedBoxId: {
|
||
from: 'getActiveInjectedBoxId',
|
||
default: () => ''
|
||
}
|
||
},
|
||
methods: {
|
||
setClickInside(isInside) {
|
||
this.clickInside = isInside;
|
||
},
|
||
setupInjectComponent() {
|
||
this.$emit('injectSetup', {
|
||
...this.data,
|
||
type: 'injected',
|
||
ruleIndex: this.ruleIndex,
|
||
mainIndex: this.mainIndex
|
||
});
|
||
},
|
||
replaceInjectComponent() {
|
||
let rect = this.$el.getBoundingClientRect();
|
||
this.$EventBus.$emit('injectComponentReplace', {
|
||
...this.data,
|
||
type: 'injected',
|
||
rect,
|
||
ruleIndex: this.ruleIndex,
|
||
boxIndex: this.boxIndex,
|
||
sign: this.sign
|
||
});
|
||
},
|
||
removeInjectComponent() {
|
||
this.$EventBus.$emit('injectComponentRemove', {
|
||
...this.data,
|
||
type: 'injected',
|
||
ruleIndex: this.ruleIndex,
|
||
boxIndex: this.boxIndex
|
||
});
|
||
},
|
||
genAreaBoxStyle() {
|
||
let {
|
||
rowStart,
|
||
rowEnd,
|
||
columnStart,
|
||
columnEnd
|
||
} = this.data;
|
||
let baseStyle = {
|
||
gridRow: `${rowStart} / ${rowEnd}`,
|
||
gridColumn: `${columnStart} / ${columnEnd}`
|
||
};
|
||
if (!this.injected) {
|
||
let target = this.boxIndex % this.presetBgColors.length;
|
||
baseStyle['--areabox-color'] = this.presetBgColors[target];
|
||
baseStyle.backgroundColor = `${this.presetBgColors[target]}99`; // 66透明度
|
||
}
|
||
return baseStyle;
|
||
},
|
||
spareAreaBoxClick(event) {
|
||
if (this.injected) {
|
||
// this.$EventBus.$emit('injectedGroupProxy', { ...this.data, type: 'injected', ruleIndex: this.ruleIndex, mainIndex: this.mainIndex })
|
||
// this.$emit('areaBoxClick', { ...this.data, type: 'injected' })
|
||
this.$EventBus.$emit('areaBoxClick', {
|
||
...this.data,
|
||
type: 'injected'
|
||
}, {
|
||
ruleIndex: this.ruleIndex,
|
||
sign: this.sign
|
||
});
|
||
} else {
|
||
let rect = event.target.getBoundingClientRect();
|
||
this.$EventBus.$emit('areaBoxClick', {
|
||
...this.data,
|
||
type: 'spare',
|
||
rect
|
||
}, {
|
||
ruleIndex: this.ruleIndex,
|
||
sign: this.sign
|
||
});
|
||
}
|
||
}
|
||
},
|
||
created() {}
|
||
};
|
||
|
||
/* script */
|
||
const __vue_script__ = script;
|
||
|
||
/* template */
|
||
var __vue_render__ = function () {
|
||
var _vm = this;
|
||
var _h = _vm.$createElement;
|
||
var _c = _vm._self._c || _h;
|
||
return _c(
|
||
"section",
|
||
{
|
||
directives: [
|
||
{
|
||
name: "click-inside",
|
||
rawName: "v-click-inside",
|
||
value: _vm.setClickInside,
|
||
expression: "setClickInside",
|
||
},
|
||
],
|
||
class: [
|
||
"xml-grid-layout__area-box",
|
||
"xml-grid-layout__area-box" + (_vm.injected ? "--injected" : "--spare"),
|
||
_vm.mode === "editor" && "is-in-editor",
|
||
_vm.isInActive && "inject-active",
|
||
],
|
||
style: _vm.genAreaBoxStyle(),
|
||
on: { click: _vm.spareAreaBoxClick },
|
||
},
|
||
[
|
||
_vm.injected
|
||
? [
|
||
_c("div", { staticClass: "xml-grid-layout__control" }, [
|
||
_c("div", { staticClass: "xml-grid-layout__control-wrap" }, [
|
||
_c(
|
||
"div",
|
||
{
|
||
staticClass: "xml-grid-layout__button",
|
||
on: {
|
||
click: function ($event) {
|
||
$event.stopPropagation();
|
||
return _vm.replaceInjectComponent.apply(null, arguments)
|
||
},
|
||
},
|
||
},
|
||
[
|
||
_c(
|
||
"el-tooltip",
|
||
{
|
||
staticClass: "item",
|
||
attrs: {
|
||
effect: "dark",
|
||
content: "替换组件",
|
||
placement: "top",
|
||
},
|
||
},
|
||
[
|
||
_c("el-image", {
|
||
attrs: { src: _vm.images.iconReplace },
|
||
}),
|
||
],
|
||
1
|
||
),
|
||
],
|
||
1
|
||
),
|
||
_vm._v(" "),
|
||
_c(
|
||
"div",
|
||
{
|
||
staticClass: "xml-grid-layout__button",
|
||
on: {
|
||
click: function ($event) {
|
||
$event.stopPropagation();
|
||
return _vm.removeInjectComponent.apply(null, arguments)
|
||
},
|
||
},
|
||
},
|
||
[
|
||
_c(
|
||
"el-tooltip",
|
||
{
|
||
staticClass: "item",
|
||
attrs: {
|
||
effect: "dark",
|
||
content: "移除组件",
|
||
placement: "top",
|
||
},
|
||
},
|
||
[
|
||
_c("el-image", {
|
||
attrs: { src: _vm.images.iconRemove },
|
||
}),
|
||
],
|
||
1
|
||
),
|
||
],
|
||
1
|
||
),
|
||
]),
|
||
]),
|
||
_vm._v(" "),
|
||
_c(
|
||
"div",
|
||
{ staticClass: "xml-grid-layout__inject-wrap" },
|
||
[_c("PortalTarget", { attrs: { name: _vm.data.uuid } })],
|
||
1
|
||
),
|
||
]
|
||
: _vm._e(),
|
||
],
|
||
2
|
||
)
|
||
};
|
||
var __vue_staticRenderFns__ = [];
|
||
__vue_render__._withStripped = true;
|
||
|
||
/* style */
|
||
const __vue_inject_styles__ = undefined;
|
||
/* scoped */
|
||
const __vue_scope_id__ = undefined;
|
||
/* module identifier */
|
||
const __vue_module_identifier__ = undefined;
|
||
/* functional template */
|
||
const __vue_is_functional_template__ = false;
|
||
/* style inject */
|
||
|
||
/* style inject SSR */
|
||
|
||
/* style inject shadow dom */
|
||
|
||
|
||
|
||
const __vue_component__ = /*#__PURE__*/normalizeComponent(
|
||
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
||
__vue_inject_styles__,
|
||
__vue_script__,
|
||
__vue_scope_id__,
|
||
__vue_is_functional_template__,
|
||
__vue_module_identifier__,
|
||
false,
|
||
undefined,
|
||
undefined,
|
||
undefined
|
||
);
|
||
|
||
const components = [__vue_component__$1, __vue_component__];
|
||
var index = {
|
||
...components
|
||
};
|
||
|
||
export { index as default };
|