@progress/kendo-vue-upload
Version:
9 lines (8 loc) • 3.37 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
*-------------------------------------------------------------------------------------------
*/
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),n=require("@progress/kendo-vue-common"),a=require("./messages/main.js"),g=require("@progress/kendo-svg-icons"),v=require("./package-metadata.js"),D=require("@progress/kendo-vue-intl"),i=100,f=t.defineComponent({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(){n.validatePackage(v.packageMetadata),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 new Date().getTime()-(e||new Date).getTime()>i},handleOnDrop(e){e.preventDefault();let o=e.dataTransfer.files,r=this.$parent.$refs[this.$props.uploadRef];o.length>0&&!this.$props.disabled&&r&&r.onAdd&&(e.preventDefault(),r.onAdd(o))},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,i)},handleOnElementDragOver(e){e.preventDefault(),this.lastElementDragOver=new Date,this.overDropZone=!0}},setup(){const e=t.ref(null),o=t.inject("kendoLocalizationService",{});return{externalDropZoneRef:e,kendoLocalizationService:o}},render(){const{customNote:e,customHint:o}=this.$props,r=D.provideLocalizationService(this),d=r.toLanguageString(a.dropZoneHint,a.messages[a.dropZoneHint]),c=r.toLanguageString(a.dropZoneNote,a.messages[a.dropZoneNote]),p=n.templateRendering.call(this,o,n.getListeners.call(this)),h=n.templateRendering.call(this,e,n.getListeners.call(this));let l;const u=t.createVNode("span",null,[d]);l=n.getTemplate.call(this,{h:t.h,template:p,defaultRendering:u});let s;const m=t.createVNode("span",null,[c]);return s=n.getTemplate.call(this,{h:t.h,template:h,defaultRendering:m}),t.createVNode("div",{ref:n.setRef(this,"externalDropZone"),id:this.$props.id,class:n.classNames("k-external-dropzone",{"k-external-dropzone-hover":this.overDropZone,"k-disabled":this.$props.disabled},this.$props.className),tabindex:n.getTabIndex(this.$props.tabIndex,this.$props.disabled,void 0),onDrop:this.handleOnDrop,onDragenter:this.handleOnElementDragEnter,onDragover:this.handleOnElementDragOver},[t.createVNode("div",{style:this.$props.innerStyle,class:"k-dropzone-inner"},[t.createVNode(n.Icon,{name:"upload",icon:g.uploadIcon,class:"k-dropzone-icon",size:"xxxlarge"},null),t.createVNode("span",{class:"k-dropzone-hint"},[l]),t.createVNode("span",{class:"k-dropzone-note"},[s])]),t.createVNode("div",{class:"k-upload"},null)])}});exports.ExternalDropZone=f;