@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 O, ref as L, inject as S, createVNode as n } from "vue";
import { classNames as _ } from "@progress/kendo-vue-common";
import { UploadAddButton as y } from "./UploadAddButton.mjs";
import { provideLocalizationService as F } from "@progress/kendo-vue-intl";
import { dropFilesHere as d, messages as s, dropFileHere as u } from "./messages/main.mjs";
import k from "./utils/utils.mjs";
import { UploadStatus as x } from "./UploadStatus.mjs";
const o = 100, Z = /* @__PURE__ */ O({
  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 = L(null), t = S("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: c,
      fileGroup: m,
      accept: p,
      navigationIndex: v,
      notFocusedIndex: h,
      id: D,
      ariaLabelledBy: g,
      ariaDescribedBy: f
    } = this.$props, r = F(this), I = e ? r.toLanguageString(d, s[d]) : r.toLanguageString(u, s[u]), [i, a, l, A] = k.getFileStatus(m), E = _("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
    }), B = function() {
      return n(y, {
        id: D,
        ariaLabelledBy: g,
        ariaDescribedBy: f,
        ref: (b) => {
          this.uploadAddButtonRef = b;
        },
        accept: p,
        async: this.async,
        addButtonIndex: this.addButtonIndex,
        navigationIndex: v,
        notFocusedIndex: h,
        tabIndex: c,
        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
    }, [B.call(this), i || a || l || A ? n(x, {
      isUploading: i,
      isUploaded: a,
      isUploadFailed: l
    }, null) : n("div", {
      class: E
    }, [I])]);
  }
});
export {
  Z as UploadDropZone
};