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

TODO

/**
 * @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 B, inject as b, createVNode as n } from "vue";
import { classNames as O } from "@progress/kendo-vue-common";
import { UploadAddButton as S } from "./UploadAddButton.mjs";
import { provideLocalizationService as _ } from "@progress/kendo-vue-intl";
import { dropFilesHere as l, messages as y } from "./messages/main.mjs";
import L from "./utils/utils.mjs";
import { UploadStatus as k } from "./UploadStatus.mjs";
const o = 100, T = /* @__PURE__ */ E({
  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 = B(null), t = b("kendoLocalizationService", {});
    return {
      uploadAddButtonRef: e,
      kendoLocalizationService: t
    };
  },
  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, o);
      }
    },
    onDocumentDragOver() {
      this._lastDocumentDragOver = /* @__PURE__ */ 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, o);
      }
    },
    onElementDragOver(e) {
      e.preventDefault(), this._lastElementDragOver = /* @__PURE__ */ new Date();
    },
    onDrop(e) {
      e.preventDefault();
      let t = e.dataTransfer.files;
      t.length > 0 && !this.$props.disabled && this.$emit("add", t);
    },
    isDragOver(e) {
      return (/* @__PURE__ */ new Date()).getTime() - (e || /* @__PURE__ */ new Date()).getTime() > o;
    },
    onClick(e) {
      this.$emit("click", e);
    },
    onAdd(e) {
      this.$emit("add", e);
    }
  },
  render() {
    const {
      multiple: e,
      disabled: t,
      tabIndex: d,
      fileGroup: s,
      accept: u,
      navigationIndex: c,
      notFocusedIndex: m,
      id: p,
      ariaLabelledBy: v,
      ariaDescribedBy: h
    } = this.$props, D = _(this).toLanguageString(l, y[l]), [r, i, a, g] = L.getFileStatus(s), f = O("k-dropzone-hint", {
      // Unsure about that, since it hides the "Drop Files Message" when we remove all uploaded components.
      // 'k-hidden': this.isDragged && !this.elementActive
    }), I = function() {
      return n(S, {
        id: p,
        ariaLabelledBy: v,
        ariaDescribedBy: h,
        ref: (A) => {
          this.uploadAddButtonRef = A;
        },
        accept: u,
        async: this.async,
        addButtonIndex: this.addButtonIndex,
        navigationIndex: c,
        notFocusedIndex: m,
        tabIndex: d,
        multiple: e,
        disabled: t,
        onClick: this.onClick,
        onAdd: this.onAdd
      }, null);
    };
    return n("div", {
      class: this.dropZoneClasses,
      onDrop: this.onDrop,
      onDragenter: this.onElementDragEnter,
      onDragover: this.onElementDragOver
    }, [I.call(this), r || i || a || g ? n(k, {
      isUploading: r,
      isUploaded: i,
      isUploadFailed: a
    }, null) : n("div", {
      class: f
    }, [D])]);
  }
});
export {
  T as UploadDropZone
};