UNPKG

@progress/kendo-vue-listbox

Version:

TODO

www.telerik.com/kendo-vue-ui

telerik/kendo-vue

16 lines (15 loc) • 10 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ /** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * 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:"6.4.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,default:"medium",validator:function(e){return[null,"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}}}));