@progress/kendo-vue-listbox
Version:
153 lines (152 loc) • 4.77 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 g, createVNode as i } from "vue";
import { Button as f } from "@progress/kendo-vue-buttons";
import { provideLocalizationService as I } from "@progress/kendo-vue-intl";
import { messages as b } from "./messages/main.mjs";
import { isRtl as $ } from "@progress/kendo-vue-common";
import { caretDoubleAltRightIcon as m, caretDoubleAltLeftIcon as p, caretAltRightIcon as h, caretAltLeftIcon as u, caretAltUpIcon as v, caretAltDownIcon as C, xIcon as k } from "@progress/kendo-svg-icons";
const d = [{
name: "moveUp",
iconName: "caret-alt-up",
svgIcon: v
}, {
name: "moveDown",
iconName: "caret-alt-down",
svgIcon: C
}, {
name: "transferTo",
iconName: "caret-alt-right",
svgIcon: h
}, {
name: "transferFrom",
iconName: "caret-alt-left",
svgIcon: u
}, {
name: "transferAllTo",
iconName: "caret-double-alt-right",
svgIcon: m
}, {
name: "transferAllFrom",
iconName: "caret-double-alt-left",
svgIcon: p
}, {
name: "remove",
iconName: "x",
svgIcon: k
}], D = /* @__PURE__ */ g({
name: "KendoListBoxToolbar",
props: {
dataItems: Array,
dataConnected: Array,
tools: Array,
selectedField: {
type: String,
default: "selected"
}
},
inject: {
kendoLocalizationService: {
default: null
}
},
data() {
return {
currentRtl: !1
};
},
mounted() {
this.currentRtl = $(this.$el);
},
render() {
const t = I(this);
return i("div", {
class: "k-listbox-actions"
}, [this.$props.tools && this.$props.tools.map(function(e, s) {
let l = d.findIndex((c) => c.name === e), a = d[l], o = this.isItemDisabled(a.name), r = `listbox.${a.name}`;
const n = t.toLanguageString(r, b[r]);
return i(f, {
key: s,
disabled: o,
"data-command": a.name,
title: n,
"aria-label": n,
icon: this.currentRtl ? this.getRtlFontIcon(a.iconName) : a.iconName,
svgIcon: this.currentRtl ? this.getRtlSvgIcon(a.svgIcon) : a.svgIcon,
onClick: (c) => {
c.preventDefault(), this.handleToolClick(c, a.name || null);
}
}, null);
}, this)]);
},
methods: {
getRtlSvgIcon(t) {
switch (t.name) {
case "caret-alt-right":
return u;
case "caret-alt-left":
return h;
case "caret-double-alt-right":
return p;
case "caret-double-alt-left":
return m;
}
return t;
},
getRtlFontIcon(t) {
switch (t) {
case "caret-alt-right":
return "caret-alt-left";
case "caret-alt-left":
return "caret-alt-right";
case "caret-double-alt-right":
return "caret-double-alt-left";
case "caret-double-alt-left":
return "caret-double-alt-right";
}
return t;
},
handleToolClick(t, e) {
this.$emit("toolclick", {
event: t,
component: this,
toolName: e
});
},
isItemDisabled(t) {
let e = !0, s = this.$props.selectedField || "selected", l = this.$props.dataItems.length, a = this.$props.dataConnected.length, o = this.$props.dataItems.findIndex((n) => n[s] === !0) >= 0, r = this.$props.dataConnected.findIndex((n) => n[s] === !0) >= 0;
switch (t) {
case "moveUp":
o ? e = this.$props.dataItems.length > 0 ? this.$props.dataItems[0].selected : !0 : r ? e = this.$props.dataConnected.length > 0 ? this.$props.dataConnected[0].selected : !0 : e = !0;
break;
case "moveDown":
o ? e = this.$props.dataItems[l - 1] ? this.$props.dataItems[l - 1].selectedField : !0 : r ? e = this.$props.dataConnected.length > 0 ? this.$props.dataConnected[a - 1].selected : !0 : e = !0;
break;
case "transferTo":
e = !(this.$props.dataConnected && o);
break;
case "transferFrom":
this.$props.dataConnected ? e = !(this.$props.dataConnected && r) : e = !0;
break;
case "transferAllTo":
e = !(this.$props.dataConnected && this.$props.dataItems.length > 0);
break;
case "transferAllFrom":
e = !(this.$props.dataConnected && this.$props.dataConnected.length > 0);
break;
case "remove":
e = !(o || r);
break;
}
return e;
}
}
});
export {
D as ListBoxToolbar
};