@progress/kendo-vue-listbox 7.1.0-develop.5 → 7.1.0-develop.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/ListBox.js CHANGED
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "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;
8
+ "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,validator:function(s){return["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;
package/ListBox.mjs CHANGED
@@ -22,9 +22,8 @@ const I = /* @__PURE__ */ $({
22
22
  props: {
23
23
  size: {
24
24
  type: String,
25
- default: "medium",
26
25
  validator: function(s) {
27
- return [null, "small", "medium", "large"].includes(s);
26
+ return ["small", "medium", "large"].includes(s);
28
27
  }
29
28
  },
30
29
  toolbarPosition: {
@@ -90,7 +89,7 @@ const I = /* @__PURE__ */ $({
90
89
  "aria-label": "listbox-container",
91
90
  tabindex: this.tabIndex,
92
91
  onKeydown: this.handleKeyDown
93
- }, [this.$props.dataItems.map(function(t, l) {
92
+ }, [this.$props.dataItems.map(function(t, a) {
94
93
  let i = this.setSelected(t), r = v();
95
94
  const m = o("span", {
96
95
  class: "k-list-item-text"
@@ -100,7 +99,7 @@ const I = /* @__PURE__ */ $({
100
99
  defaultRendering: m,
101
100
  additionalProps: {
102
101
  dataItem: t,
103
- index: l
102
+ index: a
104
103
  }
105
104
  });
106
105
  return o("li", {
@@ -110,16 +109,16 @@ const I = /* @__PURE__ */ $({
110
109
  style: t.style,
111
110
  role: "option",
112
111
  "aria-selected": i,
113
- key: this.$props.keyField ? t[this.$props.keyField] : l,
114
- id: r + l,
115
- "data-uid": r + l,
112
+ key: this.$props.keyField ? t[this.$props.keyField] : a,
113
+ id: r + a,
114
+ "data-uid": r + a,
116
115
  draggable: this.$props.draggable,
117
- onDragstart: (a) => this.dispatchEvent("dragstart", a, t),
118
- onDragover: (a) => {
119
- a.preventDefault(), this.dispatchEvent("dragover", a, t);
116
+ onDragstart: (l) => this.dispatchEvent("dragstart", l, t),
117
+ onDragover: (l) => {
118
+ l.preventDefault(), this.dispatchEvent("dragover", l, t);
120
119
  },
121
- onDrop: (a) => this.dispatchEvent("drop", a, t),
122
- onClick: (a) => this.dispatchEvent("itemclick", a, t)
120
+ onDrop: (l) => this.dispatchEvent("drop", l, t),
121
+ onClick: (l) => this.dispatchEvent("itemclick", l, t)
123
122
  }, [b]);
124
123
  }, this)])])])]), this.$props.toolbarPosition === "bottom" && s, o("select", {
125
124
  style: {
@@ -127,10 +126,10 @@ const I = /* @__PURE__ */ $({
127
126
  },
128
127
  multiple: !0,
129
128
  "data-role": "listbox"
130
- }, [this.$props.dataItems.map(function(t, l) {
129
+ }, [this.$props.dataItems.map(function(t, a) {
131
130
  let i = t[this.$props.valueField || this.$props.textField];
132
131
  return o("option", {
133
- key: l,
132
+ key: a,
134
133
  value: i
135
134
  }, [i]);
136
135
  }, this)])]);
@@ -154,8 +153,8 @@ const I = /* @__PURE__ */ $({
154
153
  });
155
154
  },
156
155
  handleContainerDrop(e) {
157
- const s = e.target, t = s.closest(".k-list-scroller"), l = s.closest(".k-list-ul"), i = this.$props.dataItems;
158
- t && !l && this.$emit("drop", {
156
+ const s = e.target, t = s.closest(".k-list-scroller"), a = s.closest(".k-list-ul"), i = this.$props.dataItems;
157
+ t && !a && this.$emit("drop", {
159
158
  event: e,
160
159
  component: this,
161
160
  dataItem: i.length > 0 ? i[i.length - 1] : null
@@ -12,4 +12,4 @@
12
12
  * Licensed under commercial license. See LICENSE.md in the package root for more information
13
13
  *-------------------------------------------------------------------------------------------
14
14
  */
15
- !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:"7.1.0-develop.5",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}}}));
15
+ !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:"7.1.0-develop.7",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 CHANGED
@@ -18,7 +18,6 @@ import { PublicProps } from 'vue';
18
18
  export declare const ListBox: DefineComponent<ExtractPropTypes< {
19
19
  size: {
20
20
  type: PropType<"small" | "medium" | "large">;
21
- default: string;
22
21
  validator: (value: string) => boolean;
23
22
  };
24
23
  toolbarPosition: {
@@ -62,7 +61,6 @@ dragleave: any;
62
61
  }, string, PublicProps, Readonly<ExtractPropTypes< {
63
62
  size: {
64
63
  type: PropType<"small" | "medium" | "large">;
65
- default: string;
66
64
  validator: (value: string) => boolean;
67
65
  };
68
66
  toolbarPosition: {
@@ -94,7 +92,6 @@ onKeydown?: (...args: any[] | unknown[]) => any;
94
92
  onItemclick?: (...args: any[] | unknown[]) => any;
95
93
  }>, {
96
94
  draggable: boolean;
97
- size: "small" | "medium" | "large";
98
95
  toolbarPosition: string;
99
96
  dataItems: any[];
100
97
  }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -128,11 +125,10 @@ export declare interface ListBoxProps {
128
125
  * - small
129
126
  * - medium
130
127
  * - large
131
- * - null&mdash;Does not set a size `className`.
132
128
  *
133
- * @default `medium`
129
+ * @default `undefined`
134
130
  */
135
- size?: null | 'small' | 'medium' | 'large';
131
+ size?: 'small' | 'medium' | 'large';
136
132
  /**
137
133
  * Set the data of the ListBox.
138
134
  */
package/index.d.ts CHANGED
@@ -18,7 +18,6 @@ import { PublicProps } from 'vue';
18
18
  export declare const ListBox: DefineComponent<ExtractPropTypes< {
19
19
  size: {
20
20
  type: PropType<"small" | "medium" | "large">;
21
- default: string;
22
21
  validator: (value: string) => boolean;
23
22
  };
24
23
  toolbarPosition: {
@@ -62,7 +61,6 @@ dragleave: any;
62
61
  }, string, PublicProps, Readonly<ExtractPropTypes< {
63
62
  size: {
64
63
  type: PropType<"small" | "medium" | "large">;
65
- default: string;
66
64
  validator: (value: string) => boolean;
67
65
  };
68
66
  toolbarPosition: {
@@ -94,7 +92,6 @@ onKeydown?: (...args: any[] | unknown[]) => any;
94
92
  onItemclick?: (...args: any[] | unknown[]) => any;
95
93
  }>, {
96
94
  draggable: boolean;
97
- size: "small" | "medium" | "large";
98
95
  toolbarPosition: string;
99
96
  dataItems: any[];
100
97
  }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -128,11 +125,10 @@ export declare interface ListBoxProps {
128
125
  * - small
129
126
  * - medium
130
127
  * - large
131
- * - null&mdash;Does not set a size `className`.
132
128
  *
133
- * @default `medium`
129
+ * @default `undefined`
134
130
  */
135
- size?: null | 'small' | 'medium' | 'large';
131
+ size?: 'small' | 'medium' | 'large';
136
132
  /**
137
133
  * Set the data of the ListBox.
138
134
  */
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "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: 1769424806,version:"7.1.0-develop.5",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;
8
+ "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: 1770355621,version:"7.1.0-develop.7",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;
@@ -10,8 +10,8 @@ const e = {
10
10
  productName: "Kendo UI for Vue",
11
11
  productCode: "KENDOUIVUE",
12
12
  productCodes: ["KENDOUIVUE"],
13
- publishDate: 1769424806,
14
- version: "7.1.0-develop.5",
13
+ publishDate: 1770355621,
14
+ version: "7.1.0-develop.7",
15
15
  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"
16
16
  };
17
17
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-vue-listbox",
3
- "version": "7.1.0-develop.5",
3
+ "version": "7.1.0-develop.7",
4
4
  "description": "TODO",
5
5
  "author": "Progress",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -19,9 +19,9 @@
19
19
  "sideEffects": false,
20
20
  "peerDependencies": {
21
21
  "@progress/kendo-licensing": "^1.7.2",
22
- "@progress/kendo-vue-buttons": "7.1.0-develop.5",
23
- "@progress/kendo-vue-common": "7.1.0-develop.5",
24
- "@progress/kendo-vue-intl": "7.1.0-develop.5",
22
+ "@progress/kendo-vue-buttons": "7.1.0-develop.7",
23
+ "@progress/kendo-vue-common": "7.1.0-develop.7",
24
+ "@progress/kendo-vue-intl": "7.1.0-develop.7",
25
25
  "@progress/kendo-svg-icons": "^4.4.0",
26
26
  "vue": "^3.0.2"
27
27
  },
@@ -42,7 +42,7 @@
42
42
  "package": {
43
43
  "productName": "Kendo UI for Vue",
44
44
  "productCode": "KENDOUIVUE",
45
- "publishDate": 1769424806,
45
+ "publishDate": 1770355621,
46
46
  "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"
47
47
  }
48
48
  },