@progress/kendo-vue-upload/UploadUI.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 b, ref as s, createVNode as t } from "vue";
import { classNames as x, setRef as g } from "@progress/kendo-vue-common";
import { UploadList as C } from "./UploadList.mjs";
import { UploadActionButtons as D } from "./UploadActionButtons.mjs";
import { UploadDropZone as k } from "./UploadDropZone.mjs";
const R = -1, w = /* @__PURE__ */ b({
  name: "KendoVueUploadUI",
  props: {
    async: Object,
    className: String,
    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
  },
  computed: {
    groupsCount() {
      return Object.keys(this.$props.groupedFiles).length;
    },
    lastGroupIndex() {
      return this.groupsCount - 1;
    },
    addButtonIndex() {
      return R;
    },
    clearButtonIndex() {
      return this.lastGroupIndex + 1;
    },
    uploadButtonIndex() {
      return this.lastGroupIndex + 2;
    },
    isRtl() {
      return this._container && getComputedStyle(this._container).direction === "rtl" || !1;
    }
  },
  methods: {
    actionElement() {
      if (this.uploadDropZone)
        return this.uploadDropZone.actionElement();
    },
    focus() {
      if (this.uploadDropZone)
        return this.uploadDropZone.focus();
    },
    onAdd(e) {
      this.$emit("add", e);
    },
    onRetry(e) {
      this.$emit("retry", e);
    },
    onCancel(e) {
      this.$emit("cancel", e);
    },
    onClear() {
      this.$emit("clear");
    },
    onUpload() {
      this.$emit("upload");
    },
    onRemove(e) {
      this.$emit("remove", e);
    },
    onKeyDown(e) {
      this.$emit("keydown", e, this.isRtl);
    },
    onFocus(e) {
      this.$emit("focus", e);
    },
    onBlur(e) {
      this.$emit("blur", e);
    },
    onClick(e) {
      this.$emit("click", e);
    }
  },
  emits: {
    add: null,
    retry: null,
    cancel: null,
    clear: null,
    upload: null,
    remove: null,
    keydown: null,
    click: null,
    focus: null,
    blur: null
  },
  mounted() {
    this._container = this.containerRef, this.uploadDropZone = this.uploadDropZoneRef;
  },
  setup() {
    const e = s(null), n = s(null);
    return {
      containerRef: e,
      uploadDropZoneRef: n
    };
  },
  render() {
    const {
      multiple: e,
      disabled: n,
      tabIndex: a,
      accept: r,
      showFileList: d,
      groupedFiles: i,
      navigationIndex: o,
      showActionButtons: u,
      actionsLayout: c,
      notFocusedIndex: p,
      list: h,
      id: m,
      ariaLabelledBy: f,
      ariaDescribedBy: y,
      async: l
    } = this.$props, B = x("k-upload", "k-upload-async", this.$props.className, n ? "k-disabled" : "");
    return t("div", {
      ref: g(this, "container"),
      class: B,
      onKeydown: this.onKeyDown,
      onFocus: this.onFocus,
      onBlur: this.onBlur
    }, [t(k, {
      id: m,
      ariaLabelledBy: f,
      ariaDescribedBy: y,
      ref: (I) => {
        this.uploadDropZoneRef = I;
      },
      accept: r,
      async: l,
      addButtonIndex: this.addButtonIndex,
      navigationIndex: o,
      notFocusedIndex: p,
      tabIndex: a,
      multiple: e,
      onClick: this.onClick,
      onAdd: this.onAdd,
      fileGroup: i,
      disabled: n
    }, null), d ? t(C, {
      groupedFiles: i,
      disabled: n,
      async: l,
      navigationIndex: o,
      list: h,
      onCancel: this.onCancel,
      onRemove: this.onRemove,
      onRetry: this.onRetry,
      onClick: this.onClick
    }, null) : void 0, u ? t(D, {
      disabled: n,
      navigationIndex: o,
      clearButtonIndex: this.clearButtonIndex,
      uploadButtonIndex: this.uploadButtonIndex,
      actionsLayout: c,
      onUpload: this.onUpload,
      onClear: this.onClear,
      onClick: this.onClick
    }, null) : void 0]);
  }
});
export {
  w as UploadUI
};