@progress/kendo-vue-listbox
Version:
153 lines (152 loc) • 4.72 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as v, createVNode as i } from "vue";
import { Button as g } from "@progress/kendo-vue-buttons";
import { provideLocalizationService as f } from "@progress/kendo-vue-intl";
import { messages as I } from "./messages/main.mjs";
import { isRtl as b } from "@progress/kendo-vue-common";
import { chevronDoubleRightIcon as h, chevronDoubleLeftIcon as m, chevronRightIcon as p, chevronLeftIcon as u, chevronUpIcon as $, chevronDownIcon as C, xIcon as k } from "@progress/kendo-svg-icons";
const d = [{
name: "moveUp",
iconName: "chevron-up",
svgIcon: $
}, {
name: "moveDown",
iconName: "chevron-down",
svgIcon: C
}, {
name: "transferTo",
iconName: "chevron-right",
svgIcon: p
}, {
name: "transferFrom",
iconName: "chevron-left",
svgIcon: u
}, {
name: "transferAllTo",
iconName: "chevron-double-right",
svgIcon: h
}, {
name: "transferAllFrom",
iconName: "chevron-double-left",
svgIcon: m
}, {
name: "remove",
iconName: "x",
svgIcon: k
}], L = /* @__PURE__ */ v({
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 = b(this.$el);
},
render() {
const t = f(this);
return i("div", {
class: "k-listbox-actions"
}, [this.$props.tools && this.$props.tools.map(function(e, a) {
let c = d.findIndex((l) => l.name === e), o = d[c], r = this.isItemDisabled(o.name), n = `listbox.${o.name}`;
const s = t.toLanguageString(n, I[n]);
return i(g, {
key: a,
disabled: r,
"data-command": o.name,
title: s,
"aria-label": s,
icon: this.currentRtl ? this.getRtlFontIcon(o.iconName) : o.iconName,
svgIcon: this.currentRtl ? this.getRtlSvgIcon(o.svgIcon) : o.svgIcon,
onClick: (l) => {
l.preventDefault(), this.handleToolClick(l, o.name || null);
}
}, null);
}, this)]);
},
methods: {
getRtlSvgIcon(t) {
switch (t.name) {
case "chevron-right":
return u;
case "chevron-left":
return p;
case "chevron-double-right":
return m;
case "chevron-double-left":
return h;
}
return t;
},
getRtlFontIcon(t) {
switch (t) {
case "chevron-right":
return "chevron-left";
case "chevron-left":
return "chevron-right";
case "chevron-double-right":
return "chevron-double-left";
case "chevron-double-left":
return "chevron-double-right";
}
return t;
},
handleToolClick(t, e) {
this.$emit("toolclick", {
event: t,
component: this,
toolName: e
});
},
isItemDisabled(t) {
let e = !0, a = this.$props.selectedField || "selected", c = this.$props.dataItems.length, o = this.$props.dataConnected.length, r = this.$props.dataItems.findIndex((s) => s[a] === !0) >= 0, n = this.$props.dataConnected.findIndex((s) => s[a] === !0) >= 0;
switch (t) {
case "moveUp":
r ? e = this.$props.dataItems.length > 0 ? this.$props.dataItems[0].selected : !0 : n ? e = this.$props.dataConnected.length > 0 ? this.$props.dataConnected[0].selected : !0 : e = !0;
break;
case "moveDown":
r ? e = this.$props.dataItems[c - 1] ? this.$props.dataItems[c - 1].selectedField : !0 : n ? e = this.$props.dataConnected.length > 0 ? this.$props.dataConnected[o - 1].selected : !0 : e = !0;
break;
case "transferTo":
e = !(this.$props.dataConnected && r);
break;
case "transferFrom":
this.$props.dataConnected ? e = !(this.$props.dataConnected && n) : 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 = !(r || n);
break;
}
return e;
}
}
});
export {
L as ListBoxToolbar
};