@progress/kendo-vue-upload/UploadDropZone.js

TODO

/**
 * @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"),E=require("@progress/kendo-vue-common"),b=require("./UploadAddButton.js"),O=require("@progress/kendo-vue-intl"),o=require("./messages/main.js"),S=require("./utils/utils.js"),y=require("./UploadStatus.js"),r=100,F=t.defineComponent({name:"KendoVueUploadDropZone",props:{addButtonIndex:Number,async:Object,multiple:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},showFileList:Boolean,showActionButtons:Boolean,actionsLayout:{type:String,default:function(){return"end"}},tabIndex:Number,accept:String,groupedFiles:{type:Object,default:function(){return{}}},navigationIndex:Number,notFocusedIndex:Number,list:[String,Function,Object],id:String,ariaLabelledBy:String,ariaDescribedBy:String,fileGroup:Object},emits:{add:null,click:null},inject:{kendoLocalizationService:{default:null}},data(){return{currentDocumentActive:!1,currentElementActive:!1}},created(){this.currentElementActive=!1},mounted(){this.uploadAddButton=this.uploadAddButtonRef,document.addEventListener("dragenter",this.onDocumentDragEnter),document.addEventListener("dragover",this.onDocumentDragOver)},unmounted(){document.removeEventListener("dragenter",this.onDocumentDragEnter),document.removeEventListener("dragover",this.onDocumentDragOver)},setup(){const e=t.ref(null),n=t.inject("kendoLocalizationService",{});return{uploadAddButtonRef:e,kendoLocalizationService:n}},computed:{dropZoneClasses(){return{"k-dropzone":!0,"k-upload-dropzone":!0,"k-active":this.currentDocumentActive,"k-hover":this.currentElementActive}}},methods:{actionElement(){if(this.uploadAddButton)return this.uploadAddButton.uploadInput},focus(){if(this.uploadAddButton)return this.uploadAddButton.focus()},onDocumentDragEnter(){if(!this.currentDocumentActive){this.currentDocumentActive=!0;const e=()=>{this.isDragOver(this._lastDocumentDragOver)&&(this.currentDocumentActive=!1,clearInterval(this._documentInterval),this._documentInterval=null,this._lastDocumentDragOver=null)};this._documentInterval=setInterval(e,r)}},onDocumentDragOver(){this._lastDocumentDragOver=new Date},onElementDragEnter(){if(!this.currentElementActive){this.currentElementActive=!0;const e=()=>{this.isDragOver(this._lastElementDragOver)&&(this.currentElementActive=!1,clearInterval(this._elementInterval),this._elementInterval=null,this._lastElementDragOver=null)};this._elementInterval=setInterval(e,r)}},onElementDragOver(e){e.preventDefault(),this._lastElementDragOver=new Date},onDrop(e){e.preventDefault();let n=e.dataTransfer.files;n.length>0&&!this.$props.disabled&&this.$emit("add",n)},isDragOver(e){return new Date().getTime()-(e||new Date).getTime()>r},onClick(e){this.$emit("click",e)},onAdd(e){this.$emit("add",e)}},render(){const{multiple:e,disabled:n,tabIndex:l,fileGroup:u,accept:c,navigationIndex:p,notFocusedIndex:m,id:v,ariaLabelledBy:h,ariaDescribedBy:g}=this.$props,i=O.provideLocalizationService(this),D=e?i.toLanguageString(o.dropFilesHere,o.messages[o.dropFilesHere]):i.toLanguageString(o.dropFileHere,o.messages[o.dropFileHere]),[a,d,s,f]=S.getFileStatus(u),I=E.classNames("k-dropzone-hint",{}),A=function(){return t.createVNode(b.UploadAddButton,{id:v,ariaLabelledBy:h,ariaDescribedBy:g,ref:B=>{this.uploadAddButtonRef=B},accept:c,async:this.async,addButtonIndex:this.addButtonIndex,navigationIndex:p,notFocusedIndex:m,tabIndex:l,multiple:e,disabled:n,onClick:this.onClick,onAdd:this.onAdd},null)};return t.createVNode("div",{class:this.dropZoneClasses,onDrop:this.onDrop,onDragenter:this.onElementDragEnter,onDragover:this.onElementDragOver},[A.call(this),a||d||s||f?t.createVNode(y.UploadStatus,{isUploading:a,isUploaded:d,isUploadFailed:s},null):t.createVNode("div",{class:I},[D])])}});exports.UploadDropZone=F;