@progress/kendo-vue-upload
Version:
120 lines (119 loc) • 4.12 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as E, ref as O, inject as Z, createVNode as t, h as a } from "vue";
import { validatePackage as b, templateRendering as i, getListeners as s, getTemplate as p, setRef as z, classNames as k, getTabIndex as I, Icon as S } from "@progress/kendo-vue-common";
import { dropZoneHint as d, messages as c, dropZoneNote as h } from "./messages/main.mjs";
import { uploadIcon as R } from "@progress/kendo-svg-icons";
import { packageMetadata as $ } from "./package-metadata.mjs";
import { provideLocalizationService as T } from "@progress/kendo-vue-intl";
const m = 100, w = /* @__PURE__ */ E({
name: "KendoVueExternalDropZone",
props: {
id: String,
tabIndex: Number,
innerStyle: Object,
uploadRef: [String, Function, Object],
disabled: Boolean,
customHint: [String, Function, Object],
customNote: [String, Function, Object]
},
inject: {
kendoLocalizationService: {
default: null
}
},
created() {
b($), this.elementInterval = null, this.elementActive = !1, this.lastElementDragOverRef = null;
},
data() {
return {
overDropZone: !1
};
},
mounted() {
this.externalDropZone = this.externalDropZoneRef;
},
methods: {
focus() {
this.externalDropZone && this.externalDropZone.focus && this.externalDropZone.focus();
},
isDragOver(e) {
return (/* @__PURE__ */ new Date()).getTime() - (e || /* @__PURE__ */ new Date()).getTime() > m;
},
handleOnDrop(e) {
e.preventDefault();
let n = e.dataTransfer.files, o = this.$parent.$refs[this.$props.uploadRef];
n.length > 0 && !this.$props.disabled && o && o.onAdd && (e.preventDefault(), o.onAdd(n));
},
handleOnElementDragEnter() {
this.elementActive = !0;
const e = () => {
this.isDragOver(this.lastElementDragOver) && (this.overDropZone = !1, this.elementActive = !1, clearInterval(this.elementInterval), this.elementInterval = null, this.lastElementDragOver = null);
};
this.elementInterval = setInterval(e, m);
},
handleOnElementDragOver(e) {
e.preventDefault(), this.lastElementDragOver = /* @__PURE__ */ new Date(), this.overDropZone = !0;
}
},
setup() {
const e = O(null), n = Z("kendoLocalizationService", {});
return {
externalDropZoneRef: e,
kendoLocalizationService: n
};
},
render() {
const {
customNote: e,
customHint: n
} = this.$props, o = T(this), u = o.toLanguageString(d, c[d]), f = o.toLanguageString(h, c[h]), g = i.call(this, n, s.call(this)), D = i.call(this, e, s.call(this));
let r;
const v = t("span", null, [u]);
r = p.call(this, {
h: a,
template: g,
defaultRendering: v
});
let l;
const x = t("span", null, [f]);
return l = p.call(this, {
h: a,
template: D,
defaultRendering: x
}), t("div", {
ref: z(this, "externalDropZone"),
id: this.$props.id,
class: k("k-external-dropzone", {
"k-external-dropzone-hover": this.overDropZone,
"k-disabled": this.$props.disabled
}, this.$props.className),
tabindex: I(this.$props.tabIndex, this.$props.disabled, void 0),
onDrop: this.handleOnDrop,
onDragenter: this.handleOnElementDragEnter,
onDragover: this.handleOnElementDragOver
}, [t("div", {
style: this.$props.innerStyle,
class: "k-dropzone-inner"
}, [t(S, {
name: "upload",
icon: R,
class: "k-dropzone-icon",
size: "xxxlarge"
}, null), t("span", {
class: "k-dropzone-hint"
}, [r]), t("span", {
class: "k-dropzone-note"
}, [l])]), t("div", {
class: "k-upload"
}, null)]);
}
});
export {
w as ExternalDropZone
};