@progress/kendo-vue-listbox/ListBox.js

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),a=require("@progress/kendo-vue-common"),d=require("./interfaces/Enums.js"),u=require("./package-metadata.js"),g=o.defineComponent({name:"KendoListBox",emits:{dragstart:null,itemclick:null,drop:null,dragover:null,keydown:null,dragleave:null},props:{size:{type:String,default:"medium",validator:function(s){return[null,"small","medium","large"].includes(s)}},toolbarPosition:{type:String,default:d.toolbarPosition.RIGHT,validator:function(s){return["none","top","bottom","left","right"].includes(s)}},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(){a.validatePackage(u.packageMetadata)},computed:{wrapperClass(){const e=this.$props.toolbarPosition===d.toolbarPosition.NONE||this.$props.toolbar===void 0;return{"k-listbox":!0,[`k-listbox-actions-${this.$props.toolbarPosition}`]:!e}}},render(){const e=a.templateRendering.call(this,this.$props.toolbar,a.getListeners.call(this)),s=a.getTemplate.call(this,{h:o.h,template:e});return o.createVNode("div",{class:this.wrapperClass,unselectable:"on"},[this.$props.toolbarPosition!=="bottom"&&s,o.createVNode("div",{class:"k-list-scroller k-selectable","data-role":"selectable",onDragover:t=>t.preventDefault(),onDrop:this.handleContainerDrop,onDragleave:this.handleOnDragLeave},[o.createVNode("div",{class:a.classNames("k-list",{[`k-list-${a.kendoThemeMaps.sizeMap[this.$props.size]||this.$props.size}`]:this.$props.size})},[o.createVNode("div",{class:"k-list-content"},[o.createVNode("ul",{class:"k-list-ul",role:"listbox","aria-label":"listbox-container",tabindex:this.tabIndex,onKeydown:this.handleKeyDown},[this.$props.dataItems.map(function(t,l){let i=this.setSelected(t),n=a.guid();const p=o.createVNode("span",{class:"k-list-item-text"},[this.$props.textField?t[this.$props.textField]:t.toString()]),c=a.templateRendering.call(this,this.$props.item,a.getListeners.call(this)),h=a.getTemplate.call(this,{h:o.h,template:c,defaultRendering:p,additionalProps:{dataItem:t,index:l}});return o.createVNode("li",{class:a.classNames("k-list-item",{"k-selected":i},t.class),style:t.style,role:"option","aria-selected":i,key:this.$props.keyField?t[this.$props.keyField]:l,id:n+l,"data-uid":n+l,draggable:this.$props.draggable,onDragstart:r=>this.dispatchEvent("dragstart",r,t),onDragover:r=>{r.preventDefault(),this.dispatchEvent("dragover",r,t)},onDrop:r=>this.dispatchEvent("drop",r,t),onClick:r=>this.dispatchEvent("itemclick",r,t)},[h])},this)])])])]),this.$props.toolbarPosition==="bottom"&&s,o.createVNode("select",{style:{display:"none"},multiple:!0,"data-role":"listbox"},[this.$props.dataItems.map(function(t,l){let i=t[this.$props.valueField||this.$props.textField];return o.createVNode("option",{key:l,value:i},[i])},this)])])},methods:{dispatchEvent(e,s,t){this.$emit(e,{event:s,component:this,dataItem:t})},setSelected(e){if(this.$props.selectedField)return!!e[this.$props.selectedField]},handleKeyDown(e){this.$emit("keydown",{event:e,component:this})},handleContainerDrop(e){const s=e.target,t=s.closest(".k-list-scroller"),l=s.closest(".k-list-ul"),i=this.$props.dataItems;t&&!l&&this.$emit("drop",{event:e,component:this,dataItem:i.length>0?i[i.length-1]:null})},handleOnDragLeave(e){e.target.classList.contains("k-list-content")&&this.$emit("dragleave",{event:e,component:this})}}});exports.ListBox=g;