@progress/kendo-vue-upload/UploadAddButton.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 I, ref as d, inject as b, createVNode as o, isVNode as v } from "vue";
import { guid as g, classNames as x, setRef as B } from "@progress/kendo-vue-common";
import { provideLocalizationService as S } from "@progress/kendo-vue-intl";
import { select as l, messages as k } from "./messages/main.mjs";
import { UploadInput as y } from "./UploadInput.mjs";
import { Button as N } from "@progress/kendo-vue-buttons";
function L(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !v(e);
}
const _ = /* @__PURE__ */ I({
  name: "KendoVueUploadAddButton",
  props: {
    addButtonIndex: Number,
    navigationIndex: Number,
    notFocusedIndex: Number,
    tabIndex: Number,
    async: Object,
    multiple: Boolean,
    disabled: Boolean,
    accept: String,
    id: String,
    ariaLabelledBy: String,
    ariaDescribedBy: String
  },
  inject: {
    kendoLocalizationService: {
      default: null
    }
  },
  emits: {
    add: null,
    click: null
  },
  setup() {
    const e = d(null), t = d(null), n = b("kendoLocalizationService", {});
    return {
      elementRef: e,
      uploadInputRef: t,
      kendoLocalizationService: n
    };
  },
  created() {
    this.uploadInputId = g();
  },
  mounted() {
    this.element = this.elementRef, this.uploadInput = this.uploadInputRef;
  },
  watch: {
    navigationIndex: function(e, t) {
      this._prevNavigationIndex = t;
    }
  },
  updated() {
    const {
      navigationIndex: e,
      addButtonIndex: t,
      notFocusedIndex: n
    } = this.$props;
    e !== this._prevNavigationIndex && this._prevNavigationIndex !== n && e === t && this.element && this.element.focus();
  },
  methods: {
    focus() {
      this.element && this.element.focus();
    },
    onClick() {
      this.actionElement() && this.actionElement().click(), this.$emit("click", this.$props.addButtonIndex);
    },
    onAdd(e) {
      this.$emit("add", e);
    },
    onInputMouseDown(e) {
      this.element && (e.preventDefault(), this.element.focus());
    },
    actionElement() {
      if (this.uploadInput)
        return this.uploadInput.actionElement();
    }
  },
  render() {
    const {
      navigationIndex: e,
      addButtonIndex: t,
      tabIndex: n,
      id: s,
      async: u,
      multiple: c,
      disabled: a,
      accept: r,
      ariaLabelledBy: p,
      ariaDescribedBy: m
    } = this.$props, i = S(this).toLanguageString(l, k[l]), f = x("k-upload-button", e === t ? "k-focus" : "");
    return o("div", {
      class: "k-upload-button-wrap"
    }, [o(N, {
      id: s,
      ref: B(this, "element"),
      role: "button",
      type: "button",
      disabled: a,
      ariaLabel: i,
      class: f,
      tabIndex: n,
      "aria-labelledby": p,
      "aria-describedby": m,
      onClick: this.onClick
    }, L(i) ? i : {
      default: () => [i]
    }), o(y, {
      id: this.uploadInputId,
      async: u,
      multiple: c,
      disabled: a,
      accept: r,
      onMousedown: this.onInputMouseDown,
      onAdd: this.onAdd,
      ref: (h) => {
        this.uploadInputRef = h;
      }
    }, null)]);
  }
});
export {
  _ as UploadAddButton
};