@progress/kendo-vue-listbox 8.0.3-develop.1 → 8.0.3-develop.3

package/ListBox.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { toolbarPosition } from './interfaces/Enums';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+declare const ListBox: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+    toolbarPosition: {
+        type: PropType<string>;
+        default: toolbarPosition;
+        validator: (value: string) => boolean;
+    };
+    textField: PropType<string>;
+    valueField: PropType<string>;
+    keyField: PropType<string>;
+    selectedField: PropType<string>;
+    item: PropType<string | object | Function>;
+    toolbar: PropType<string | object | Function>;
+    tabIndex: PropType<number>;
+    dataItems: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
+    draggable: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}>, {}, {}, {
+    wrapperClass(): {
+        [x: string]: boolean;
+        'k-listbox': boolean;
+    };
+}, {
+    dispatchEvent(eventName: string, event: any, item: any): void;
+    setSelected(item: any): boolean;
+    handleKeyDown(event: any): void;
+    handleContainerDrop(event: any): void;
+    handleOnDragLeave(event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    dragstart: any;
+    itemclick: any;
+    drop: any;
+    dragover: any;
+    keydown: any;
+    dragleave: any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+    toolbarPosition: {
+        type: PropType<string>;
+        default: toolbarPosition;
+        validator: (value: string) => boolean;
+    };
+    textField: PropType<string>;
+    valueField: PropType<string>;
+    keyField: PropType<string>;
+    selectedField: PropType<string>;
+    item: PropType<string | object | Function>;
+    toolbar: PropType<string | object | Function>;
+    tabIndex: PropType<number>;
+    dataItems: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
+    draggable: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onDragleave?: (...args: any[] | unknown[]) => any;
+    onDragover?: (...args: any[] | unknown[]) => any;
+    onDragstart?: (...args: any[] | unknown[]) => any;
+    onDrop?: (...args: any[] | unknown[]) => any;
+    onKeydown?: (...args: any[] | unknown[]) => any;
+    onItemclick?: (...args: any[] | unknown[]) => any;
+}>, {
+    draggable: boolean;
+    toolbarPosition: string;
+    dataItems: any[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { ListBox };

package/ListBoxToolbar.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+declare const ListBoxToolbar: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    dataItems: PropType<any[]>;
+    dataConnected: PropType<any[]>;
+    tools: PropType<string[]>;
+    selectedField: {
+        type: PropType<string>;
+        default: string;
+    };
+}>, {}, {
+    currentRtl: boolean;
+}, {}, {
+    getRtlSvgIcon(toolIcon: any): any;
+    getRtlFontIcon(toolIcon: any): any;
+    handleToolClick(event: any, name: any): void;
+    isItemDisabled(tool: string): boolean;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    dataItems: PropType<any[]>;
+    dataConnected: PropType<any[]>;
+    tools: PropType<string[]>;
+    selectedField: {
+        type: PropType<string>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    selectedField: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { ListBoxToolbar };

package/dist/cdn/js/kendo-vue-listbox.js

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("@progress/kendo-vue-common"),require("@progress/kendo-vue-buttons"),require("@progress/kendo-vue-intl"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-vue-common","@progress/kendo-vue-buttons","@progress/kendo-vue-intl","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoVueListbox={},e.Vue,e.KendoVueCommon,e.KendoVueButtons,e.KendoVueIntl,e.KendoSVGIcons)}(this,(function(e,t,o,s,a,n){"use strict";let r=function(e){return e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e}({});const l={name:"@progress/kendo-vue-listbox",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:1672219056,version:"8.0.3-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"},i=t.defineComponent({name:"KendoListBox",emits:{dragstart:null,itemclick:null,drop:null,dragover:null,keydown:null,dragleave:null},props:{size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},toolbarPosition:{type:String,default:r.RIGHT,validator:function(e){return["none","top","bottom","left","right"].includes(e)}},textField:String,valueField:String,keyField:String,selectedField:String,item:[String,Object,Function],toolbar:[String,Object,Function],tabIndex:Number,dataItems:{type:Array,default:function(){return[]}},draggable:{type:Boolean,default:!1}},created(){o.validatePackage(l)},computed:{wrapperClass(){const e=this.$props.toolbarPosition===r.NONE||void 0===this.$props.toolbar;return{"k-listbox":!0,[`k-listbox-actions-${this.$props.toolbarPosition}`]:!e}}},render(){const e=o.templateRendering.call(this,this.$props.toolbar,o.getListeners.call(this)),s=o.getTemplate.call(this,{h:t.h,template:e});return t.createVNode("div",{class:this.wrapperClass,unselectable:"on"},["bottom"!==this.$props.toolbarPosition&&s,t.createVNode("div",{class:"k-list-scroller k-selectable","data-role":"selectable",onDragover:e=>e.preventDefault(),onDrop:this.handleContainerDrop,onDragleave:this.handleOnDragLeave},[t.createVNode("div",{class:o.classNames("k-list",{[`k-list-${o.kendoThemeMaps.sizeMap[this.$props.size]||this.$props.size}`]:this.$props.size})},[t.createVNode("div",{class:"k-list-content"},[t.createVNode("ul",{class:"k-list-ul",role:"listbox","aria-label":"listbox-container",tabindex:this.tabIndex,onKeydown:this.handleKeyDown},[this.$props.dataItems.map((function(e,s){let a=this.setSelected(e),n=o.guid();const r=t.createVNode("span",{class:"k-list-item-text"},[this.$props.textField?e[this.$props.textField]:e.toString()]),l=o.templateRendering.call(this,this.$props.item,o.getListeners.call(this)),i=o.getTemplate.call(this,{h:t.h,template:l,defaultRendering:r,additionalProps:{dataItem:e,index:s}});return t.createVNode("li",{class:o.classNames("k-list-item",{"k-selected":a},e.class),style:e.style,role:"option","aria-selected":a,key:this.$props.keyField?e[this.$props.keyField]:s,id:n+s,"data-uid":n+s,draggable:this.$props.draggable,onDragstart:t=>this.dispatchEvent("dragstart",t,e),onDragover:t=>{t.preventDefault(),this.dispatchEvent("dragover",t,e)},onDrop:t=>this.dispatchEvent("drop",t,e),onClick:t=>this.dispatchEvent("itemclick",t,e)},[i])}),this)])])])]),"bottom"===this.$props.toolbarPosition&&s,t.createVNode("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},[this.$props.dataItems.map((function(e,o){let s=e[this.$props.valueField||this.$props.textField];return t.createVNode("option",{key:o,value:s},[s])}),this)])])},methods:{dispatchEvent(e,t,o){this.$emit(e,{event:t,component:this,dataItem:o})},setSelected(e){if(this.$props.selectedField)return!!e[this.$props.selectedField]},handleKeyDown(e){this.$emit("keydown",{event:e,component:this})},handleContainerDrop(e){const t=e.target,o=t.closest(".k-list-scroller"),s=t.closest(".k-list-ul"),a=this.$props.dataItems;o&&!s&&this.$emit("drop",{event:e,component:this,dataItem:a.length>0?a[a.length-1]:null})},handleOnDragLeave(e){e.target.classList.contains("k-list-content")&&this.$emit("dragleave",{event:e,component:this})}}}),c="listbox.moveUp",d="listbox.moveDown",p="listbox.transferTo",u="listbox.transferFrom",h="listbox.transferAllTo",m="listbox.transferAllFrom",g="listbox.remove",f={[c]:"Move Up",[d]:"Move Down",[p]:"Transfer To",[u]:"Transfer From",[h]:"Transfer All To",[m]:"Transfer All From",[g]:"Delete"},v=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:n.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:n.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:n.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:n.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:n.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:n.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:n.xIcon}],b=t.defineComponent({name:"KendoListBoxToolbar",props:{dataItems:Array,dataConnected:Array,tools:Array,selectedField:{type:String,default:"selected"}},inject:{kendoLocalizationService:{default:null}},data:()=>({currentRtl:!1}),mounted(){this.currentRtl=o.isRtl(this.$el)},render(){const e=a.provideLocalizationService(this);return t.createVNode("div",{class:"k-listbox-actions"},[this.$props.tools&&this.$props.tools.map((function(o,a){let n=v.findIndex((e=>e.name===o)),r=v[n],l=this.isItemDisabled(r.name),i=`listbox.${r.name}`;const c=e.toLanguageString(i,f[i]);return t.createVNode(s.Button,{key:a,disabled:l,"data-command":r.name,title:c,"aria-label":c,icon:this.currentRtl?this.getRtlFontIcon(r.iconName):r.iconName,svgIcon:this.currentRtl?this.getRtlSvgIcon(r.svgIcon):r.svgIcon,onClick:e=>{e.preventDefault(),this.handleToolClick(e,r.name||null)}},null)}),this)])},methods:{getRtlSvgIcon(e){switch(e.name){case"caret-alt-right":return n.caretAltLeftIcon;case"caret-alt-left":return n.caretAltRightIcon;case"caret-double-alt-right":return n.caretDoubleAltLeftIcon;case"caret-double-alt-left":return n.caretDoubleAltRightIcon}return e},getRtlFontIcon(e){switch(e){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 e},handleToolClick(e,t){this.$emit("toolclick",{event:e,component:this,toolName:t})},isItemDisabled(e){let t=!0,o=this.$props.selectedField||"selected",s=this.$props.dataItems.length,a=this.$props.dataConnected.length,n=this.$props.dataItems.findIndex((e=>!0===e[o]))>=0,r=this.$props.dataConnected.findIndex((e=>!0===e[o]))>=0;switch(e){case"moveUp":t=n?!(this.$props.dataItems.length>0)||this.$props.dataItems[0].selected:!r||(!(this.$props.dataConnected.length>0)||this.$props.dataConnected[0].selected);break;case"moveDown":t=n?!this.$props.dataItems[s-1]||this.$props.dataItems[s-1].selectedField:!r||(!(this.$props.dataConnected.length>0)||this.$props.dataConnected[a-1].selected);break;case"transferTo":t=!(this.$props.dataConnected&&n);break;case"transferFrom":t=!this.$props.dataConnected||!(this.$props.dataConnected&&r);break;case"transferAllTo":t=!(this.$props.dataConnected&&this.$props.dataItems.length>0);break;case"transferAllFrom":t=!(this.$props.dataConnected&&this.$props.dataConnected.length>0);break;case"remove":t=!(n||r)}return t}}}),x=(e,t,o)=>{let s=o.splice(e,1)[0];return o.splice(t,0,s),o};e.ListBox=i,e.ListBoxToolbar=b,e.moveItem=x,e.processListBoxData=(e=[],t=[],o,s)=>{let a=[],n=[],r=[],l={listBoxOneData:e,listBoxTwoData:t};switch(o){case"moveUp":a=[...e],a.forEach(((e,t)=>{e[s]&&(a=x(t,t-1,a))})),r=[...t],r.forEach(((e,t)=>{e[s]&&(r=x(t,t-1,r))})),l.listBoxOneData=a,l.listBoxTwoData=r;break;case"moveDown":a=e.reverse(),a.forEach(((e,t)=>{e[s]&&(a=x(t,t-1,a))})),r=t.reverse(),r.forEach(((e,t)=>{e[s]&&(r=x(t,t-1,r))})),l.listBoxOneData=[...a].reverse(),l.listBoxTwoData=[...r].reverse();break;case"transferTo":a=e.filter((e=>!e[s])),n=e.filter((e=>e[s])),r=t.concat(n),l.listBoxOneData=a,l.listBoxTwoData=r;break;case"transferFrom":r=t.filter((e=>!e[s])),n=t.filter((e=>e[s])),a=e.concat(n),l.listBoxOneData=a,l.listBoxTwoData=r;break;case"transferAllTo":l.listBoxOneData=[],l.listBoxTwoData=t.concat(e);break;case"transferAllFrom":l.listBoxOneData=t.concat(e),l.listBoxTwoData=[];break;case"remove":r=t.filter((e=>!e[s])),a=e.filter((e=>!e[s])),l.listBoxOneData=a,l.listBoxTwoData=r}return l},e.processListBoxDragAndDrop=(e=[],t=[],o,s,a)=>{let n=e.findIndex((e=>e[a]===o[a])),r=t.findIndex((e=>e[a]===o[a])),l=null!==s?e.findIndex((e=>e[a]===s[a])):-1,i=null!==s?t.findIndex((e=>e[a]===s[a])):-1,c=n>=0,d=r>=0,p=l>=0,u=i>=0,h=[...e],m=[...t];return c&&p?{listBoxOneData:x(n,l,e),listBoxTwoData:t}:d&&u?{listBoxOneData:e,listBoxTwoData:x(r,i,t)}:c&&(u||null===s)?(null===s?m.push(e[n]):m.splice(i+1,0,e[n]),h.splice(n,1),{listBoxOneData:h,listBoxTwoData:m}):d&&(p||null===s)?(null===s?h.push(t[r]):h.splice(l+1,0,t[r]),m.splice(r,1),{listBoxOneData:h,listBoxTwoData:m}):{listBoxOneData:e,listBoxTwoData:t}}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("@progress/kendo-vue-common"),require("@progress/kendo-vue-buttons"),require("@progress/kendo-vue-intl"),require("@progress/kendo-svg-icons")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-vue-common","@progress/kendo-vue-buttons","@progress/kendo-vue-intl","@progress/kendo-svg-icons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoVueListbox={},e.Vue,e.KendoVueCommon,e.KendoVueButtons,e.KendoVueIntl,e.KendoSVGIcons)}(this,function(e,t,o,s,a,n){"use strict";let r=function(e){return e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e}({});const l={name:"@progress/kendo-vue-listbox",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:1672219056,version:"8.0.3-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"},i=t.defineComponent({name:"KendoListBox",emits:{dragstart:null,itemclick:null,drop:null,dragover:null,keydown:null,dragleave:null},props:{size:{type:String,validator:function(e){return["small","medium","large"].includes(e)}},toolbarPosition:{type:String,default:r.RIGHT,validator:function(e){return["none","top","bottom","left","right"].includes(e)}},textField:String,valueField:String,keyField:String,selectedField:String,item:[String,Object,Function],toolbar:[String,Object,Function],tabIndex:Number,dataItems:{type:Array,default:function(){return[]}},draggable:{type:Boolean,default:!1}},created(){o.validatePackage(l)},computed:{wrapperClass(){const e=this.$props.toolbarPosition===r.NONE||void 0===this.$props.toolbar;return{"k-listbox":!0,[`k-listbox-actions-${this.$props.toolbarPosition}`]:!e}}},render(){const e=o.templateRendering.call(this,this.$props.toolbar,o.getListeners.call(this)),s=o.getTemplate.call(this,{h:t.h,template:e});return t.createVNode("div",{class:this.wrapperClass,unselectable:"on"},["bottom"!==this.$props.toolbarPosition&&s,t.createVNode("div",{class:"k-list-scroller k-selectable","data-role":"selectable",onDragover:e=>e.preventDefault(),onDrop:this.handleContainerDrop,onDragleave:this.handleOnDragLeave},[t.createVNode("div",{class:o.classNames("k-list",{[`k-list-${o.kendoThemeMaps.sizeMap[this.$props.size]||this.$props.size}`]:this.$props.size})},[t.createVNode("div",{class:"k-list-content"},[t.createVNode("ul",{class:"k-list-ul",role:"listbox","aria-label":"listbox-container",tabindex:this.tabIndex,onKeydown:this.handleKeyDown},[this.$props.dataItems.map(function(e,s){let a=this.setSelected(e),n=o.guid();const r=t.createVNode("span",{class:"k-list-item-text"},[this.$props.textField?e[this.$props.textField]:e.toString()]),l=o.templateRendering.call(this,this.$props.item,o.getListeners.call(this)),i=o.getTemplate.call(this,{h:t.h,template:l,defaultRendering:r,additionalProps:{dataItem:e,index:s}});return t.createVNode("li",{class:o.classNames("k-list-item",{"k-selected":a},e.class),style:e.style,role:"option","aria-selected":a,key:this.$props.keyField?e[this.$props.keyField]:s,id:n+s,"data-uid":n+s,draggable:this.$props.draggable,onDragstart:t=>this.dispatchEvent("dragstart",t,e),onDragover:t=>{t.preventDefault(),this.dispatchEvent("dragover",t,e)},onDrop:t=>this.dispatchEvent("drop",t,e),onClick:t=>this.dispatchEvent("itemclick",t,e)},[i])},this)])])])]),"bottom"===this.$props.toolbarPosition&&s,t.createVNode("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},[this.$props.dataItems.map(function(e,o){let s=e[this.$props.valueField||this.$props.textField];return t.createVNode("option",{key:o,value:s},[s])},this)])])},methods:{dispatchEvent(e,t,o){this.$emit(e,{event:t,component:this,dataItem:o})},setSelected(e){if(this.$props.selectedField)return!!e[this.$props.selectedField]},handleKeyDown(e){this.$emit("keydown",{event:e,component:this})},handleContainerDrop(e){const t=e.target,o=t.closest(".k-list-scroller"),s=t.closest(".k-list-ul"),a=this.$props.dataItems;o&&!s&&this.$emit("drop",{event:e,component:this,dataItem:a.length>0?a[a.length-1]:null})},handleOnDragLeave(e){e.target.classList.contains("k-list-content")&&this.$emit("dragleave",{event:e,component:this})}}}),c="listbox.moveUp",d="listbox.moveDown",p="listbox.transferTo",u="listbox.transferFrom",h="listbox.transferAllTo",m="listbox.transferAllFrom",g="listbox.remove",f={[c]:"Move Up",[d]:"Move Down",[p]:"Transfer To",[u]:"Transfer From",[h]:"Transfer All To",[m]:"Transfer All From",[g]:"Delete"},v=[{name:"moveUp",iconName:"caret-alt-up",svgIcon:n.caretAltUpIcon},{name:"moveDown",iconName:"caret-alt-down",svgIcon:n.caretAltDownIcon},{name:"transferTo",iconName:"caret-alt-right",svgIcon:n.caretAltRightIcon},{name:"transferFrom",iconName:"caret-alt-left",svgIcon:n.caretAltLeftIcon},{name:"transferAllTo",iconName:"caret-double-alt-right",svgIcon:n.caretDoubleAltRightIcon},{name:"transferAllFrom",iconName:"caret-double-alt-left",svgIcon:n.caretDoubleAltLeftIcon},{name:"remove",iconName:"x",svgIcon:n.xIcon}],b=t.defineComponent({name:"KendoListBoxToolbar",props:{dataItems:Array,dataConnected:Array,tools:Array,selectedField:{type:String,default:"selected"}},inject:{kendoLocalizationService:{default:null}},data:()=>({currentRtl:!1}),mounted(){this.currentRtl=o.isRtl(this.$el)},render(){const e=a.provideLocalizationService(this);return t.createVNode("div",{class:"k-listbox-actions"},[this.$props.tools&&this.$props.tools.map(function(o,a){let n=v.findIndex(e=>e.name===o),r=v[n],l=this.isItemDisabled(r.name),i=`listbox.${r.name}`;const c=e.toLanguageString(i,f[i]);return t.createVNode(s.Button,{key:a,disabled:l,"data-command":r.name,title:c,"aria-label":c,icon:this.currentRtl?this.getRtlFontIcon(r.iconName):r.iconName,svgIcon:this.currentRtl?this.getRtlSvgIcon(r.svgIcon):r.svgIcon,onClick:e=>{e.preventDefault(),this.handleToolClick(e,r.name||null)}},null)},this)])},methods:{getRtlSvgIcon(e){switch(e.name){case"caret-alt-right":return n.caretAltLeftIcon;case"caret-alt-left":return n.caretAltRightIcon;case"caret-double-alt-right":return n.caretDoubleAltLeftIcon;case"caret-double-alt-left":return n.caretDoubleAltRightIcon}return e},getRtlFontIcon(e){switch(e){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 e},handleToolClick(e,t){this.$emit("toolclick",{event:e,component:this,toolName:t})},isItemDisabled(e){let t=!0,o=this.$props.selectedField||"selected",s=this.$props.dataItems.length,a=this.$props.dataConnected.length,n=this.$props.dataItems.findIndex(e=>!0===e[o])>=0,r=this.$props.dataConnected.findIndex(e=>!0===e[o])>=0;switch(e){case"moveUp":t=n?!(this.$props.dataItems.length>0)||this.$props.dataItems[0].selected:!r||(!(this.$props.dataConnected.length>0)||this.$props.dataConnected[0].selected);break;case"moveDown":t=n?!this.$props.dataItems[s-1]||this.$props.dataItems[s-1].selectedField:!r||(!(this.$props.dataConnected.length>0)||this.$props.dataConnected[a-1].selected);break;case"transferTo":t=!(this.$props.dataConnected&&n);break;case"transferFrom":t=!this.$props.dataConnected||!(this.$props.dataConnected&&r);break;case"transferAllTo":t=!(this.$props.dataConnected&&this.$props.dataItems.length>0);break;case"transferAllFrom":t=!(this.$props.dataConnected&&this.$props.dataConnected.length>0);break;case"remove":t=!(n||r)}return t}}}),x=(e,t,o)=>{let s=o.splice(e,1)[0];return o.splice(t,0,s),o};e.ListBox=i,e.ListBoxToolbar=b,e.moveItem=x,e.processListBoxData=(e=[],t=[],o,s)=>{let a=[],n=[],r=[],l={listBoxOneData:e,listBoxTwoData:t};switch(o){case"moveUp":a=[...e],a.forEach((e,t)=>{e[s]&&(a=x(t,t-1,a))}),r=[...t],r.forEach((e,t)=>{e[s]&&(r=x(t,t-1,r))}),l.listBoxOneData=a,l.listBoxTwoData=r;break;case"moveDown":a=e.reverse(),a.forEach((e,t)=>{e[s]&&(a=x(t,t-1,a))}),r=t.reverse(),r.forEach((e,t)=>{e[s]&&(r=x(t,t-1,r))}),l.listBoxOneData=[...a].reverse(),l.listBoxTwoData=[...r].reverse();break;case"transferTo":a=e.filter(e=>!e[s]),n=e.filter(e=>e[s]),r=t.concat(n),l.listBoxOneData=a,l.listBoxTwoData=r;break;case"transferFrom":r=t.filter(e=>!e[s]),n=t.filter(e=>e[s]),a=e.concat(n),l.listBoxOneData=a,l.listBoxTwoData=r;break;case"transferAllTo":l.listBoxOneData=[],l.listBoxTwoData=t.concat(e);break;case"transferAllFrom":l.listBoxOneData=t.concat(e),l.listBoxTwoData=[];break;case"remove":r=t.filter(e=>!e[s]),a=e.filter(e=>!e[s]),l.listBoxOneData=a,l.listBoxTwoData=r}return l},e.processListBoxDragAndDrop=(e=[],t=[],o,s,a)=>{let n=e.findIndex(e=>e[a]===o[a]),r=t.findIndex(e=>e[a]===o[a]),l=null!==s?e.findIndex(e=>e[a]===s[a]):-1,i=null!==s?t.findIndex(e=>e[a]===s[a]):-1,c=n>=0,d=r>=0,p=l>=0,u=i>=0,h=[...e],m=[...t];return c&&p?{listBoxOneData:x(n,l,e),listBoxTwoData:t}:d&&u?{listBoxOneData:e,listBoxTwoData:x(r,i,t)}:c&&(u||null===s)?(null===s?m.push(e[n]):m.splice(i+1,0,e[n]),h.splice(n,1),{listBoxOneData:h,listBoxTwoData:m}):d&&(p||null===s)?(null===s?h.push(t[r]):h.splice(l+1,0,t[r]),m.splice(r,1),{listBoxOneData:h,listBoxTwoData:m}):{listBoxOneData:e,listBoxTwoData:t}}});

package/index.d.mts

@@ -5,308 +5,11 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { ComponentOptionsMixin } from 'vue';
-import { ComponentProvideOptions } from 'vue';
-import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { PropType } from 'vue';
-import { PublicProps } from 'vue';
-
-/**
- * @hidden
- */
-export declare const ListBox: DefineComponent<ExtractPropTypes<    {
-size: {
-type: PropType<"small" | "medium" | "large">;
-validator: (value: string) => boolean;
-};
-toolbarPosition: {
-type: PropType<string>;
-default: toolbarPosition;
-validator: (value: string) => boolean;
-};
-textField: PropType<string>;
-valueField: PropType<string>;
-keyField: PropType<string>;
-selectedField: PropType<string>;
-item: PropType<string | object | Function>;
-toolbar: PropType<string | object | Function>;
-tabIndex: PropType<number>;
-dataItems: {
-type: PropType<any[]>;
-default: () => any[];
-};
-draggable: {
-type: PropType<boolean>;
-default: boolean;
-};
-}>, {}, {}, {
-wrapperClass(): {
-[x: string]: boolean;
-'k-listbox': boolean;
-};
-}, {
-dispatchEvent(eventName: string, event: any, item: any): void;
-setSelected(item: any): boolean;
-handleKeyDown(event: any): void;
-handleContainerDrop(event: any): void;
-handleOnDragLeave(event: any): void;
-}, ComponentOptionsMixin, ComponentOptionsMixin, {
-dragstart: any;
-itemclick: any;
-drop: any;
-dragover: any;
-keydown: any;
-dragleave: any;
-}, string, PublicProps, Readonly<ExtractPropTypes<    {
-size: {
-type: PropType<"small" | "medium" | "large">;
-validator: (value: string) => boolean;
-};
-toolbarPosition: {
-type: PropType<string>;
-default: toolbarPosition;
-validator: (value: string) => boolean;
-};
-textField: PropType<string>;
-valueField: PropType<string>;
-keyField: PropType<string>;
-selectedField: PropType<string>;
-item: PropType<string | object | Function>;
-toolbar: PropType<string | object | Function>;
-tabIndex: PropType<number>;
-dataItems: {
-type: PropType<any[]>;
-default: () => any[];
-};
-draggable: {
-type: PropType<boolean>;
-default: boolean;
-};
-}>> & Readonly<{
-onDragleave?: (...args: any[] | unknown[]) => any;
-onDragover?: (...args: any[] | unknown[]) => any;
-onDragstart?: (...args: any[] | unknown[]) => any;
-onDrop?: (...args: any[] | unknown[]) => any;
-onKeydown?: (...args: any[] | unknown[]) => any;
-onItemclick?: (...args: any[] | unknown[]) => any;
-}>, {
-draggable: boolean;
-toolbarPosition: string;
-dataItems: any[];
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-
-export declare interface ListBoxDragEvent {
-    dataItem?: any;
-}
-
-declare interface ListBoxDragLeaveEvent {
-}
-
-export declare interface ListBoxItemClickEvent {
-    dataItem?: any;
-}
-
-export declare interface ListBoxKeyDownEvent {
-}
-
-/**
- * Represents the props of the [Kendo UI for Vue ListBox component]({% slug overview_listbox %}).
- */
-export declare interface ListBoxProps {
-    /**
-     * Sets a class of the Tooltip animation container.
-     */
-    className?: string;
-    /**
-     * Configures the `size` of the ListBox.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     *
-     * @default `undefined`
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Set the data of the ListBox.
-     */
-    dataItems: Array<any>;
-    /**
-     * Makes the items of the ListBox draggable.
-     */
-    draggable?: boolean;
-    /**
-     * Set the selected field of the ListBox. Based on that value of that field, an item will be selected or not.
-     */
-    selectedField?: string;
-    /**
-     * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
-     */
-    textField: string;
-    /**
-     * The field that be used during form submit. Defaults to the textField if not set.
-     */
-    valueField?: string;
-    /**
-     * The field that is used for rendering key of the items.
-     */
-    keyField?: string;
-    /**
-     * Sets the position of the toolbar of the ListBox if one is set. The ListBox may have no toolbar.
-     * * The possible values are:
-     * * `top`
-     * * `bottom`
-     * * `left`
-     * * `right` (Default)
-     * * `none`
-     */
-    toolbarPosition?: toolbarPosition | string;
-    /**
-     * Renders a toolbar component next to the ListBox.
-     */
-    toolbar?: string | object | Function;
-    /**
-     * Sets the `tabIndex` attribute of the ListBox.
-     */
-    tabIndex?: number;
-    /**
-     * Defines the component that will be rendered for each item of the data collection.
-     */
-    item?: string | object | Function;
-    /**
-     * Fires when an item from the ListBox is clicked. Contains the clicked item.
-     */
-    onItemclick?: (event: ListBoxItemClickEvent) => void;
-    /**
-     * Fires on keydown over the ListBox list items. It can be use to add keyboard extra keyboard navigation option.
-     */
-    onKeydown?: (event: ListBoxKeyDownEvent) => void;
-    /**
-     * Fires when an the user start to drag an item from the ListBox. The event contains information for the item that is being dragged.
-     */
-    onDragstart?: (event: ListBoxDragEvent) => void;
-    /**
-     * Fires when an the user drags over an item from the ListBox. The event contains information for the item that is dragged over.
-     */
-    onDragover?: (event: ListBoxDragEvent) => void;
-    /**
-     * Fires when an the user drops an item. The event contains information for the drop target item.
-     */
-    onDrop?: (event: ListBoxDragEvent) => void;
-    /**
-     * Fires when a dragged element or text selection leaves the ListBox element.
-     */
-    onDragleave?: (event: ListBoxDragLeaveEvent) => void;
-}
-
-/**
- * @hidden
- */
-export declare const ListBoxToolbar: DefineComponent<ExtractPropTypes<    {
-dataItems: PropType<any[]>;
-dataConnected: PropType<any[]>;
-tools: PropType<string[]>;
-selectedField: {
-type: PropType<string>;
-default: string;
-};
-}>, {}, {
-currentRtl: boolean;
-}, {}, {
-getRtlSvgIcon(toolIcon: any): any;
-getRtlFontIcon(toolIcon: any): any;
-handleToolClick(event: any, name: any): void;
-isItemDisabled(tool: string): boolean;
-}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
-dataItems: PropType<any[]>;
-dataConnected: PropType<any[]>;
-tools: PropType<string[]>;
-selectedField: {
-type: PropType<string>;
-default: string;
-};
-}>> & Readonly<{}>, {
-selectedField: string;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-
-export declare interface ListBoxToolbarClickEvent {
-    toolName?: string;
-}
-
-export declare interface ListBoxToolbarProps {
-    /**
-     * Sets the tools of the ListBoxToolbar. By default, the ListBoxToolbar renders no tools.
-     * The built-in tools are:
-     * * `moveUp`
-     * * `moveDown`
-     * * `transferTo`
-     * * `transferFrom`
-     * * `transferAllTo`
-     * * `transferAllFrom`
-     * * `remove`
-     */
-    tools?: Array<string>;
-    /**
-     * The data of the main ListBox.
-     */
-    dataItems: Array<any>;
-    /**
-     * The data of the connected ListBox.
-     */
-    dataConnected: Array<any>;
-    /**
-     * Set the selected field of the ListBoxToolbar.
-     * Based on that value of that field the ListBoxToolbar will determine which actions are allowed and which disabled.
-     */
-    selectedField?: string;
-    /**
-     * Fires when one of the ListBoxToolbar tools is clicked.
-     */
-    onToolclick?: (event: ListBoxToolbarClickEvent) => void;
-}
-
-/**
- * @hidden
- */
-export declare const moveItem: (from: number, to: number, data: Array<any>) => any[];
-
-/**
- * Process the data collection/s based on the clicked ListBoxToolbar tool.
- *
- * @param {T[]} listBoxOneData - The first data collection.
- * @param {T[]} listBoxTwoData - The second data collection. Pass an empty array if there is only one ListBox.
- * @param {string} toolName - The tool that was clicked.
- * @param {string} selectedField - The field that contains the selected information in the data object.
- * @returns {{listBoxOneData: T[], listBoxTwoData: t[]}} - The object that contains the new data collections.
- */
-export declare const processListBoxData: (listBoxOneData: Array<any>, listBoxTwoData: Array<any>, toolName: string, selectedField: string) => {
-    listBoxOneData: any[];
-    listBoxTwoData: any[];
-};
-
-/**
- * Process the data collection/s based on the dragged and drop item.
- *
- * @param {T[]} listBoxOneData - The first data collection.
- * @param {T[]} listBoxTwoData - The second data collection. Pass an empty array if there is only one ListBox.
- * @param {any} dragItem - The item that was dragged.
- * @param {any} dropItem - The drop target item.
- * @param {string} valueField - The field which points to the unique value of each data item.
- * @returns {{listBoxOneData: T[], listBoxTwoData: t[]}} - The object that contains the new data collections.
- */
-export declare const processListBoxDragAndDrop: (listBoxOneData: Array<any>, listBoxTwoData: Array<any>, dragItem: any, dropItem: any, valueField: string) => {
-    listBoxOneData: any[];
-    listBoxTwoData: any[];
-};
-
-declare enum toolbarPosition {
-    TOP = "top",
-    BOTTOM = "bottom",
-    LEFT = "left",
-    RIGHT = "right",
-    NONE = "none"
-}
-
-export { }
+import { ListBox } from './ListBox.js';
+import { ListBoxProps } from './interfaces/ListBoxProps.js';
+import { ListBoxToolbar } from './ListBoxToolbar.js';
+import { ListBoxToolbarProps } from './interfaces/ListBoxToolBarProps.js';
+import { processListBoxData, moveItem, processListBoxDragAndDrop } from './utils.js';
+import { ListBoxDragEvent, ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxToolbarClickEvent } from './interfaces/ListBoxEvents.js';
+export { ListBox, ListBoxToolbar, processListBoxData, moveItem, processListBoxDragAndDrop };
+export type { ListBoxProps, ListBoxToolbarProps, ListBoxDragEvent, ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxToolbarClickEvent };

package/index.d.ts

@@ -5,308 +5,11 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { ComponentOptionsMixin } from 'vue';
-import { ComponentProvideOptions } from 'vue';
-import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { PropType } from 'vue';
-import { PublicProps } from 'vue';
-
-/**
- * @hidden
- */
-export declare const ListBox: DefineComponent<ExtractPropTypes<    {
-size: {
-type: PropType<"small" | "medium" | "large">;
-validator: (value: string) => boolean;
-};
-toolbarPosition: {
-type: PropType<string>;
-default: toolbarPosition;
-validator: (value: string) => boolean;
-};
-textField: PropType<string>;
-valueField: PropType<string>;
-keyField: PropType<string>;
-selectedField: PropType<string>;
-item: PropType<string | object | Function>;
-toolbar: PropType<string | object | Function>;
-tabIndex: PropType<number>;
-dataItems: {
-type: PropType<any[]>;
-default: () => any[];
-};
-draggable: {
-type: PropType<boolean>;
-default: boolean;
-};
-}>, {}, {}, {
-wrapperClass(): {
-[x: string]: boolean;
-'k-listbox': boolean;
-};
-}, {
-dispatchEvent(eventName: string, event: any, item: any): void;
-setSelected(item: any): boolean;
-handleKeyDown(event: any): void;
-handleContainerDrop(event: any): void;
-handleOnDragLeave(event: any): void;
-}, ComponentOptionsMixin, ComponentOptionsMixin, {
-dragstart: any;
-itemclick: any;
-drop: any;
-dragover: any;
-keydown: any;
-dragleave: any;
-}, string, PublicProps, Readonly<ExtractPropTypes<    {
-size: {
-type: PropType<"small" | "medium" | "large">;
-validator: (value: string) => boolean;
-};
-toolbarPosition: {
-type: PropType<string>;
-default: toolbarPosition;
-validator: (value: string) => boolean;
-};
-textField: PropType<string>;
-valueField: PropType<string>;
-keyField: PropType<string>;
-selectedField: PropType<string>;
-item: PropType<string | object | Function>;
-toolbar: PropType<string | object | Function>;
-tabIndex: PropType<number>;
-dataItems: {
-type: PropType<any[]>;
-default: () => any[];
-};
-draggable: {
-type: PropType<boolean>;
-default: boolean;
-};
-}>> & Readonly<{
-onDragleave?: (...args: any[] | unknown[]) => any;
-onDragover?: (...args: any[] | unknown[]) => any;
-onDragstart?: (...args: any[] | unknown[]) => any;
-onDrop?: (...args: any[] | unknown[]) => any;
-onKeydown?: (...args: any[] | unknown[]) => any;
-onItemclick?: (...args: any[] | unknown[]) => any;
-}>, {
-draggable: boolean;
-toolbarPosition: string;
-dataItems: any[];
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-
-export declare interface ListBoxDragEvent {
-    dataItem?: any;
-}
-
-declare interface ListBoxDragLeaveEvent {
-}
-
-export declare interface ListBoxItemClickEvent {
-    dataItem?: any;
-}
-
-export declare interface ListBoxKeyDownEvent {
-}
-
-/**
- * Represents the props of the [Kendo UI for Vue ListBox component]({% slug overview_listbox %}).
- */
-export declare interface ListBoxProps {
-    /**
-     * Sets a class of the Tooltip animation container.
-     */
-    className?: string;
-    /**
-     * Configures the `size` of the ListBox.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     *
-     * @default `undefined`
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Set the data of the ListBox.
-     */
-    dataItems: Array<any>;
-    /**
-     * Makes the items of the ListBox draggable.
-     */
-    draggable?: boolean;
-    /**
-     * Set the selected field of the ListBox. Based on that value of that field, an item will be selected or not.
-     */
-    selectedField?: string;
-    /**
-     * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
-     */
-    textField: string;
-    /**
-     * The field that be used during form submit. Defaults to the textField if not set.
-     */
-    valueField?: string;
-    /**
-     * The field that is used for rendering key of the items.
-     */
-    keyField?: string;
-    /**
-     * Sets the position of the toolbar of the ListBox if one is set. The ListBox may have no toolbar.
-     * * The possible values are:
-     * * `top`
-     * * `bottom`
-     * * `left`
-     * * `right` (Default)
-     * * `none`
-     */
-    toolbarPosition?: toolbarPosition | string;
-    /**
-     * Renders a toolbar component next to the ListBox.
-     */
-    toolbar?: string | object | Function;
-    /**
-     * Sets the `tabIndex` attribute of the ListBox.
-     */
-    tabIndex?: number;
-    /**
-     * Defines the component that will be rendered for each item of the data collection.
-     */
-    item?: string | object | Function;
-    /**
-     * Fires when an item from the ListBox is clicked. Contains the clicked item.
-     */
-    onItemclick?: (event: ListBoxItemClickEvent) => void;
-    /**
-     * Fires on keydown over the ListBox list items. It can be use to add keyboard extra keyboard navigation option.
-     */
-    onKeydown?: (event: ListBoxKeyDownEvent) => void;
-    /**
-     * Fires when an the user start to drag an item from the ListBox. The event contains information for the item that is being dragged.
-     */
-    onDragstart?: (event: ListBoxDragEvent) => void;
-    /**
-     * Fires when an the user drags over an item from the ListBox. The event contains information for the item that is dragged over.
-     */
-    onDragover?: (event: ListBoxDragEvent) => void;
-    /**
-     * Fires when an the user drops an item. The event contains information for the drop target item.
-     */
-    onDrop?: (event: ListBoxDragEvent) => void;
-    /**
-     * Fires when a dragged element or text selection leaves the ListBox element.
-     */
-    onDragleave?: (event: ListBoxDragLeaveEvent) => void;
-}
-
-/**
- * @hidden
- */
-export declare const ListBoxToolbar: DefineComponent<ExtractPropTypes<    {
-dataItems: PropType<any[]>;
-dataConnected: PropType<any[]>;
-tools: PropType<string[]>;
-selectedField: {
-type: PropType<string>;
-default: string;
-};
-}>, {}, {
-currentRtl: boolean;
-}, {}, {
-getRtlSvgIcon(toolIcon: any): any;
-getRtlFontIcon(toolIcon: any): any;
-handleToolClick(event: any, name: any): void;
-isItemDisabled(tool: string): boolean;
-}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
-dataItems: PropType<any[]>;
-dataConnected: PropType<any[]>;
-tools: PropType<string[]>;
-selectedField: {
-type: PropType<string>;
-default: string;
-};
-}>> & Readonly<{}>, {
-selectedField: string;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-
-export declare interface ListBoxToolbarClickEvent {
-    toolName?: string;
-}
-
-export declare interface ListBoxToolbarProps {
-    /**
-     * Sets the tools of the ListBoxToolbar. By default, the ListBoxToolbar renders no tools.
-     * The built-in tools are:
-     * * `moveUp`
-     * * `moveDown`
-     * * `transferTo`
-     * * `transferFrom`
-     * * `transferAllTo`
-     * * `transferAllFrom`
-     * * `remove`
-     */
-    tools?: Array<string>;
-    /**
-     * The data of the main ListBox.
-     */
-    dataItems: Array<any>;
-    /**
-     * The data of the connected ListBox.
-     */
-    dataConnected: Array<any>;
-    /**
-     * Set the selected field of the ListBoxToolbar.
-     * Based on that value of that field the ListBoxToolbar will determine which actions are allowed and which disabled.
-     */
-    selectedField?: string;
-    /**
-     * Fires when one of the ListBoxToolbar tools is clicked.
-     */
-    onToolclick?: (event: ListBoxToolbarClickEvent) => void;
-}
-
-/**
- * @hidden
- */
-export declare const moveItem: (from: number, to: number, data: Array<any>) => any[];
-
-/**
- * Process the data collection/s based on the clicked ListBoxToolbar tool.
- *
- * @param {T[]} listBoxOneData - The first data collection.
- * @param {T[]} listBoxTwoData - The second data collection. Pass an empty array if there is only one ListBox.
- * @param {string} toolName - The tool that was clicked.
- * @param {string} selectedField - The field that contains the selected information in the data object.
- * @returns {{listBoxOneData: T[], listBoxTwoData: t[]}} - The object that contains the new data collections.
- */
-export declare const processListBoxData: (listBoxOneData: Array<any>, listBoxTwoData: Array<any>, toolName: string, selectedField: string) => {
-    listBoxOneData: any[];
-    listBoxTwoData: any[];
-};
-
-/**
- * Process the data collection/s based on the dragged and drop item.
- *
- * @param {T[]} listBoxOneData - The first data collection.
- * @param {T[]} listBoxTwoData - The second data collection. Pass an empty array if there is only one ListBox.
- * @param {any} dragItem - The item that was dragged.
- * @param {any} dropItem - The drop target item.
- * @param {string} valueField - The field which points to the unique value of each data item.
- * @returns {{listBoxOneData: T[], listBoxTwoData: t[]}} - The object that contains the new data collections.
- */
-export declare const processListBoxDragAndDrop: (listBoxOneData: Array<any>, listBoxTwoData: Array<any>, dragItem: any, dropItem: any, valueField: string) => {
-    listBoxOneData: any[];
-    listBoxTwoData: any[];
-};
-
-declare enum toolbarPosition {
-    TOP = "top",
-    BOTTOM = "bottom",
-    LEFT = "left",
-    RIGHT = "right",
-    NONE = "none"
-}
-
-export { }
+import { ListBox } from './ListBox';
+import { ListBoxProps } from './interfaces/ListBoxProps';
+import { ListBoxToolbar } from './ListBoxToolbar';
+import { ListBoxToolbarProps } from './interfaces/ListBoxToolBarProps';
+import { processListBoxData, moveItem, processListBoxDragAndDrop } from './utils';
+import { ListBoxDragEvent, ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxToolbarClickEvent } from './interfaces/ListBoxEvents';
+export { ListBox, ListBoxToolbar, processListBoxData, moveItem, processListBoxDragAndDrop };
+export type { ListBoxProps, ListBoxToolbarProps, ListBoxDragEvent, ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxToolbarClickEvent };

package/interfaces/Enums.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+export declare enum toolbarPosition {
+    TOP = "top",
+    BOTTOM = "bottom",
+    LEFT = "left",
+    RIGHT = "right",
+    NONE = "none"
+}

package/interfaces/Enums.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let t=function(e){return e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e}({});exports.toolbarPosition=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let t=(function(e){return e.TOP="top",e.BOTTOM="bottom",e.LEFT="left",e.RIGHT="right",e.NONE="none",e})({});exports.toolbarPosition=t;

package/interfaces/Enums.mjs

@@ -5,9 +5,9 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-let T = /* @__PURE__ */ function(e) {
+let T = /* @__PURE__ */ (function(e) {
   return e.TOP = "top", e.BOTTOM = "bottom", e.LEFT = "left", e.RIGHT = "right", e.NONE = "none", e;
-}({});
+})({});
 export {
   T as toolbarPosition
 };

package/interfaces/ListBoxEvents.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+export interface ListBoxItemClickEvent {
+    dataItem?: any;
+}
+export interface ListBoxKeyDownEvent {
+}
+export interface ListBoxDragLeaveEvent {
+}
+export interface ListBoxToolbarClickEvent {
+    toolName?: string;
+}
+export interface ListBoxDragEvent {
+    dataItem?: any;
+}

package/interfaces/ListBoxProps.d.ts

@@ -0,0 +1,99 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxDragEvent, ListBoxDragLeaveEvent } from './ListBoxEvents';
+import { toolbarPosition } from './Enums';
+/**
+ * Represents the props of the [Kendo UI for Vue ListBox component]({% slug overview_listbox %}).
+ */
+export interface ListBoxProps {
+    /**
+     * Sets a class of the Tooltip animation container.
+     */
+    className?: string;
+    /**
+     * Configures the `size` of the ListBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     *
+     * @default `undefined`
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Set the data of the ListBox.
+     */
+    dataItems: Array<any>;
+    /**
+     * Makes the items of the ListBox draggable.
+     */
+    draggable?: boolean;
+    /**
+     * Set the selected field of the ListBox. Based on that value of that field, an item will be selected or not.
+     */
+    selectedField?: string;
+    /**
+     * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
+     */
+    textField: string;
+    /**
+     * The field that be used during form submit. Defaults to the textField if not set.
+     */
+    valueField?: string;
+    /**
+     * The field that is used for rendering key of the items.
+     */
+    keyField?: string;
+    /**
+     * Sets the position of the toolbar of the ListBox if one is set. The ListBox may have no toolbar.
+     * * The possible values are:
+     * * `top`
+     * * `bottom`
+     * * `left`
+     * * `right` (Default)
+     * * `none`
+     */
+    toolbarPosition?: toolbarPosition | string;
+    /**
+     * Renders a toolbar component next to the ListBox.
+     */
+    toolbar?: string | object | Function;
+    /**
+     * Sets the `tabIndex` attribute of the ListBox.
+     */
+    tabIndex?: number;
+    /**
+     * Defines the component that will be rendered for each item of the data collection.
+     */
+    item?: string | object | Function;
+    /**
+     * Fires when an item from the ListBox is clicked. Contains the clicked item.
+     */
+    onItemclick?: (event: ListBoxItemClickEvent) => void;
+    /**
+     * Fires on keydown over the ListBox list items. It can be use to add keyboard extra keyboard navigation option.
+     */
+    onKeydown?: (event: ListBoxKeyDownEvent) => void;
+    /**
+     * Fires when an the user start to drag an item from the ListBox. The event contains information for the item that is being dragged.
+     */
+    onDragstart?: (event: ListBoxDragEvent) => void;
+    /**
+     * Fires when an the user drags over an item from the ListBox. The event contains information for the item that is dragged over.
+     */
+    onDragover?: (event: ListBoxDragEvent) => void;
+    /**
+     * Fires when an the user drops an item. The event contains information for the drop target item.
+     */
+    onDrop?: (event: ListBoxDragEvent) => void;
+    /**
+     * Fires when a dragged element or text selection leaves the ListBox element.
+     */
+    onDragleave?: (event: ListBoxDragLeaveEvent) => void;
+}

package/interfaces/ListBoxToolBarProps.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ListBoxToolbarClickEvent } from './ListBoxEvents';
+export interface ListBoxToolbarProps {
+    /**
+     * Sets the tools of the ListBoxToolbar. By default, the ListBoxToolbar renders no tools.
+     * The built-in tools are:
+     * * `moveUp`
+     * * `moveDown`
+     * * `transferTo`
+     * * `transferFrom`
+     * * `transferAllTo`
+     * * `transferAllFrom`
+     * * `remove`
+     */
+    tools?: Array<string>;
+    /**
+     * The data of the main ListBox.
+     */
+    dataItems: Array<any>;
+    /**
+     * The data of the connected ListBox.
+     */
+    dataConnected: Array<any>;
+    /**
+     * Set the selected field of the ListBoxToolbar.
+     * Based on that value of that field the ListBoxToolbar will determine which actions are allowed and which disabled.
+     */
+    selectedField?: string;
+    /**
+     * Fires when one of the ListBoxToolbar tools is clicked.
+     */
+    onToolclick?: (event: ListBoxToolbarClickEvent) => void;
+}

package/messages/main.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const moveUp = "listbox.moveUp";
+/**
+ * @hidden
+ */
+export declare const moveDown = "listbox.moveDown";
+/**
+ * @hidden
+ */
+export declare const transferTo = "listbox.transferTo";
+/**
+ * @hidden
+ */
+export declare const transferFrom = "listbox.transferFrom";
+/**
+ * @hidden
+ */
+export declare const transferAllTo = "listbox.transferAllTo";
+/**
+ * @hidden
+ */
+export declare const transferAllFrom = "listbox.transferAllFrom";
+/**
+ * @hidden
+ */
+export declare const remove = "listbox.remove";
+/**
+ * @hidden
+ */
+export declare const messages: {
+    "listbox.moveUp": string;
+    "listbox.moveDown": string;
+    "listbox.transferTo": string;
+    "listbox.transferFrom": string;
+    "listbox.transferAllTo": string;
+    "listbox.transferAllFrom": string;
+    "listbox.remove": string;
+};

package/package-metadata.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-vue-listbox",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1772733886,version:"8.0.3-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-vue-listbox",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1773401804,version:"8.0.3-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "Kendo UI for Vue",
   productCode: "KENDOUIVUE",
   productCodes: ["KENDOUIVUE"],
-  publishDate: 1772733886,
-  version: "8.0.3-develop.1",
+  publishDate: 1773401804,
+  version: "8.0.3-develop.3",
   licensingDocsUrl: "https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-vue-listbox",
-  "version": "8.0.3-develop.1",
+  "version": "8.0.3-develop.3",
   "description": "TODO",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -9,8 +9,14 @@
   "types": "./index.d.ts",
   "exports": {
     ".": {
-      "import": "./index.mjs",
-      "require": "./index.js"
+      "import": {
+        "types": "./index.d.mts",
+        "default": "./index.mjs"
+      },
+      "require": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      }
     },
     "./package.json": {
       "default": "./package.json"
@@ -19,9 +25,9 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-vue-buttons": "8.0.3-develop.1",
-    "@progress/kendo-vue-common": "8.0.3-develop.1",
-    "@progress/kendo-vue-intl": "8.0.3-develop.1",
+    "@progress/kendo-vue-buttons": "8.0.3-develop.3",
+    "@progress/kendo-vue-common": "8.0.3-develop.3",
+    "@progress/kendo-vue-intl": "8.0.3-develop.3",
     "@progress/kendo-svg-icons": "^4.4.0",
     "vue": "^3.0.2"
   },
@@ -42,7 +48,7 @@
     "package": {
       "productName": "Kendo UI for Vue",
       "productCode": "KENDOUIVUE",
-      "publishDate": 1772733886,
+      "publishDate": 1773401804,
       "licensingDocsUrl": "https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"
     }
   },

package/utils.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Process the data collection/s based on the clicked ListBoxToolbar tool.
+ *
+ * @param {T[]} listBoxOneData - The first data collection.
+ * @param {T[]} listBoxTwoData - The second data collection. Pass an empty array if there is only one ListBox.
+ * @param {string} toolName - The tool that was clicked.
+ * @param {string} selectedField - The field that contains the selected information in the data object.
+ * @returns {{listBoxOneData: T[], listBoxTwoData: t[]}} - The object that contains the new data collections.
+ */
+export declare const processListBoxData: (listBoxOneData: Array<any>, listBoxTwoData: Array<any>, toolName: string, selectedField: string) => {
+    listBoxOneData: any[];
+    listBoxTwoData: any[];
+};
+/**
+ * @hidden
+ */
+export declare const moveItem: (from: number, to: number, data: Array<any>) => any[];
+/**
+ * Process the data collection/s based on the dragged and drop item.
+ *
+ * @param {T[]} listBoxOneData - The first data collection.
+ * @param {T[]} listBoxTwoData - The second data collection. Pass an empty array if there is only one ListBox.
+ * @param {any} dragItem - The item that was dragged.
+ * @param {any} dropItem - The drop target item.
+ * @param {string} valueField - The field which points to the unique value of each data item.
+ * @returns {{listBoxOneData: T[], listBoxTwoData: t[]}} - The object that contains the new data collections.
+ */
+export declare const processListBoxDragAndDrop: (listBoxOneData: Array<any>, listBoxTwoData: Array<any>, dragItem: any, dropItem: any, valueField: string) => {
+    listBoxOneData: any[];
+    listBoxTwoData: any[];
+};