dext5upload-vue3
Version:
Vue3 + TypeScript component for DEXT5 Upload
140 lines (139 loc) • 5.73 kB
JavaScript
/**
* @license Copyright (c) 2003-2022, RAONWIZ DevTeam. All rights reserved.
*/
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
/* eslint-disable new-cap */
import { getRaonwizComponentNamespace } from 'raonwiz-integrations-common';
import { getDEXT5UPLOAD, getDext5Upload } from '../Dext5UploadObject';
import { uuid, setUpComponentEvents } from '../Utils';
import { uploadProps } from './Dext5UploadPropTypes';
import { h, defineComponent, onMounted, ref, toRefs, nextTick, watch, onBeforeUnmount, onActivated, onDeactivated } from 'vue';
var renderComponent = function (ce, id, elementRef, tagName) {
return ce(tagName ? tagName : 'div', {
id: id,
ref: elementRef
});
};
export var Dext5Upload = defineComponent({
props: uploadProps,
setup: function (props, ctx) {
var conf = props.config ? __assign({}, props.config) : {};
var mode = toRefs(props).mode;
var element = ref(null);
var vueUpload = null;
var elementId = props.id || uuid('dext5upload-vue');
var mounting = true;
var makeComponent = function () {
var uploadId = props.id ? props.id : elementId;
// config
if (props.createMode && props.createMode.toLocaleLowerCase() == "object") {
props.config.Id = uploadId;
props.config.UploadHolder = uploadId;
// event
if (typeof getDEXT5UPLOAD()._EventHashMap === 'undefined') {
getDEXT5UPLOAD()._EventHashMap = new Map();
}
if (getDEXT5UPLOAD()._EventHashMap.has(uploadId)) {
return;
}
getDEXT5UPLOAD()._EventHashMap.set(uploadId, ctx);
setUpComponentEvents(uploadId, ctx);
var UploadConstructor = getDext5Upload();
vueUpload = new UploadConstructor(props.config);
}
else if (props.config) {
getDEXT5UPLOAD().config.UploadHolder = uploadId;
var entries = Object.entries(props.config);
var entry_1;
entries.map(function (_a) {
var _b = _a === void 0 ? entry_1 : _a, key = _b[0], val = _b[1];
getDEXT5UPLOAD().config[key] = val;
});
// event
if (typeof getDEXT5UPLOAD()._EventHashMap === 'undefined') {
getDEXT5UPLOAD()._EventHashMap = new Map();
}
if (getDEXT5UPLOAD()._EventHashMap.has(uploadId)) {
return;
}
getDEXT5UPLOAD()._EventHashMap.set(uploadId, ctx);
setUpComponentEvents(uploadId, ctx);
var UploadConstructor = getDext5Upload();
vueUpload = new UploadConstructor(uploadId);
}
mounting = false;
};
watch(mode, function (mode) {
if (vueUpload !== null) {
getDEXT5UPLOAD().SetUploadMode(mode, vueUpload.ID);
}
});
onMounted(function () {
if (getDEXT5UPLOAD() !== null) {
makeComponent();
}
else if (element.value && element.value.ownerDocument) {
var componentUrl = props.componentUrl;
if (typeof componentUrl === 'undefined') {
componentUrl = '/dext5upload/js/dext5upload.js';
}
getRaonwizComponentNamespace('DEXT5UPLOAD', componentUrl)
.then(makeComponent)
.catch(function (error) {
console.error(error);
});
}
});
onBeforeUnmount(function () {
if (getDEXT5UPLOAD() !== null) {
if (getDEXT5UPLOAD()._EventHashMap.has(vueUpload.ID)) {
getDEXT5UPLOAD()._EventHashMap.delete(vueUpload.ID);
}
if (getDEXT5UPLOAD().isLoadedUploadEx(vueUpload.ID)) {
getDEXT5UPLOAD().Destroy(vueUpload.ID);
}
}
});
onActivated(function () {
if (!mounting) {
makeComponent();
}
});
onDeactivated(function () {
if (getDEXT5UPLOAD() !== null) {
if (getDEXT5UPLOAD()._EventHashMap.has(vueUpload.ID)) {
getDEXT5UPLOAD()._EventHashMap.delete(vueUpload.ID);
}
if (getDEXT5UPLOAD().isLoadedUploadEx(vueUpload.ID)) {
getDEXT5UPLOAD().Destroy(vueUpload.ID);
}
}
});
var rerender = function (init) {
if (getDEXT5UPLOAD() !== null) {
if (getDEXT5UPLOAD()._EventHashMap.has(vueUpload.ID)) {
getDEXT5UPLOAD()._EventHashMap.delete(vueUpload.ID);
}
if (getDEXT5UPLOAD().isLoadedUploadEx(vueUpload.ID)) {
getDEXT5UPLOAD().Destroy(vueUpload.ID);
}
}
conf = __assign(__assign({}, conf), init);
nextTick(function () { return makeComponent(); });
};
ctx.expose({
rerender: rerender
});
return function () { return renderComponent(h, elementId, element, props.tagName); };
}
});