@progress/kendo-vue-upload
Version:
204 lines (203 loc) • 5.37 kB
JavaScript
/**
* @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 x, createVNode as y } from "vue";
import { Keys as o, canUseDOM as v } from "@progress/kendo-vue-common";
import { UploadUI as U } from "./UploadUI.mjs";
const r = -2, s = -1, F = /* @__PURE__ */ b({
name: "KendoVueUploadNavigation",
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 {};
}
},
notFocusedIndex: Number,
list: [String, Function, Object],
id: String,
ariaLabelledBy: String,
ariaDescribedBy: String,
restrictions: Object,
files: Array,
defaultFiles: Array
},
emits: {
add: null,
cancel: null,
clear: null,
upload: null,
retry: null,
remove: null
},
data() {
return {
currentNavIndex: r
};
},
updated() {
},
methods: {
actionElement() {
if (this._uploadUI)
return this._uploadUI.actionElement();
},
navIndex(t) {
if (t === void 0)
return this.currentNavIndex;
const d = this.navIndex;
this.currentNavIndex = t, t !== d && this.$forceUpdate();
},
focus() {
this._uploadUI && this._uploadUI.focus();
},
onKeyDown(t, d) {
var h;
const e = this.navIndex(), l = Object.keys(this.$props.groupedFiles), a = l.length - 1, p = this.$props.autoUpload || l.length === 0 ? a : a + 1, u = a + 1, c = u + 1, i = e === r ? s : e;
let n = e;
switch (t.keyCode) {
case o.up:
t.preventDefault(), e > -1 && (n = i - 1);
break;
case o.down:
t.preventDefault(), e < p && (n = i + 1);
break;
case o.left:
t.preventDefault(), d ? e === u && (n = i + 1) : e === c && (n = i - 1);
break;
case o.right:
t.preventDefault(), d ? e === c && (n = i - 1) : e === u && (n = i + 1);
break;
case o.enter:
(e === s || e === r) && this.actionElement() && v && ((h = document.activeElement) == null ? void 0 : h.className.indexOf("k-upload-button")) === -1 && this.actionElement().$el.click(), e >= 0 && e <= a && this.onRetry(l[e]);
break;
case o.space:
t.preventDefault(), (e === s || e === r) && this.actionElement() && this.actionElement().$el.click();
break;
case o.tab:
n = r;
break;
case o.delete:
e >= 0 && e <= a && (n = i - 1, this.onRemove(l[e]));
break;
case o.esc:
e >= 0 && e <= a && (n = i - 1, this.onCancel(l[e]));
break;
}
this.navIndex(n);
},
onCancel(t) {
this.$emit("cancel", t);
},
onClear() {
this.navIndex(s), this.$emit("clear");
},
onUpload() {
this.navIndex(s), this.$emit("upload");
},
onRetry(t) {
this.$emit("retry", t);
},
onRemove(t) {
this.navIndex(this.navIndex() > s ? this.navIndex() - 1 : s), this.$emit("remove", t);
},
onAdd(t) {
this.navIndex(s), this.$emit("add", t);
},
onClick(t) {
this.navIndex(t);
},
onFocus() {
this._blurTimeout && (clearTimeout(this._blurTimeout), this._blurTimeout = void 0);
},
onBlurTimeout() {
this.navIndex(r), this._blurTimeout = void 0;
},
onBlur() {
clearTimeout(this._blurTimeout), this._blurTimeout = window.setTimeout(this.onBlurTimeout);
}
},
mounted() {
this._uploadUI = this.uploadUIRef;
},
setup() {
return {
uploadUIRef: x(null)
};
},
render() {
const {
multiple: t,
disabled: d,
showFileList: e,
showActionButtons: l,
actionsLayout: a,
tabIndex: p,
accept: u,
groupedFiles: c,
list: i,
id: n,
ariaLabelledBy: h,
ariaDescribedBy: f,
async: m
} = this.$props;
return y(U, {
ref: (I) => {
this.uploadUIRef = I;
},
class: this.$props.className,
onKeydown: this.onKeyDown,
navigationIndex: this.currentNavIndex,
notFocusedIndex: r,
onAdd: this.onAdd,
onClear: this.onClear,
onUpload: this.onUpload,
onRemove: this.onRemove,
onRetry: this.onRetry,
onCancel: this.onCancel,
onClick: this.onClick,
onFocus: this.onFocus,
onBlur: this.onBlur,
multiple: t,
disabled: d,
showFileList: e,
showActionButtons: l,
actionsLayout: a,
tabIndex: p,
accept: u,
groupedFiles: c,
list: i,
id: n,
ariaLabelledBy: h,
ariaDescribedBy: f,
async: m
}, null);
}
});
export {
F as UploadNavigation
};