@progress/kendo-vue-dropdowns 6.4.1 → 6.4.2-develop.3
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/AutoComplete/AutoComplete.mjs +5 -5
- package/ComboBox/ComboBox.js +1 -1
- package/ComboBox/ComboBox.mjs +51 -48
- package/DropDownList/DropDownList.mjs +18 -18
- package/DropDownTree/DropDownTree.mjs +18 -18
- package/MultiSelect/MultiSelect.mjs +14 -14
- package/MultiSelect/TagList.mjs +5 -5
- package/MultiSelectTree/MultiSelectTree.mjs +15 -15
- package/common/ClearButton.mjs +1 -1
- package/common/List.mjs +5 -5
- package/common/ListFilter.mjs +4 -4
- package/common/SearchBar.mjs +6 -6
- package/dist/cdn/js/kendo-vue-dropdowns.js +1 -1
- package/index.d.mts +1 -0
- package/index.d.ts +1 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +10 -10
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { defineComponent as E,
|
|
8
|
+
import { defineComponent as E, createVNode as u, ref as M, h as R } from "vue";
|
|
9
9
|
import { SearchBar as _ } from "../common/SearchBar.mjs";
|
|
10
10
|
import { ListContainer as q } from "../common/ListContainer.mjs";
|
|
11
11
|
import { List as z } from "../common/List.mjs";
|
|
12
12
|
import W from "../common/DropDownBase.mjs";
|
|
13
13
|
import { GroupStickyHeader as U } from "../common/GroupStickyHeader.mjs";
|
|
14
14
|
import { ClearButton as J } from "../common/ClearButton.mjs";
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
15
|
+
import { areSame as D, getFocusedItem as T, itemIndexStartsWith as Q, getItemValue as O } from "../common/utils.mjs";
|
|
16
|
+
import { setRef as X, classNames as B, kendoThemeMaps as Y, Keys as c, getRef as H, guid as L, templateRendering as S, getListeners as v, getTemplate as A } from "@progress/kendo-vue-common";
|
|
17
17
|
const {
|
|
18
18
|
sizeMap: N,
|
|
19
19
|
roundedMap: Z
|
|
@@ -149,7 +149,7 @@ const {
|
|
|
149
149
|
};
|
|
150
150
|
},
|
|
151
151
|
created() {
|
|
152
|
-
this.valueDuringOnChange = void 0, this.currentText = void 0, this.currentValue = void 0, this.currentFocused = void 0, this.currentOpened = void 0, this.base = new W(this), this.anchor =
|
|
152
|
+
this.valueDuringOnChange = void 0, this.currentText = void 0, this.currentValue = void 0, this.currentFocused = void 0, this.currentOpened = void 0, this.base = new W(this), this.anchor = L(), this.inputId = L();
|
|
153
153
|
},
|
|
154
154
|
setup() {
|
|
155
155
|
const e = M(null), t = M(null);
|
|
@@ -159,7 +159,7 @@ const {
|
|
|
159
159
|
};
|
|
160
160
|
},
|
|
161
161
|
mounted() {
|
|
162
|
-
this.hasMounted = !0, this.input = this.inputRef.input, this.base.wrapper =
|
|
162
|
+
this.hasMounted = !0, this.input = this.inputRef.input, this.base.wrapper = H(this, "kendoAnchor"), this.element = H(this, "kendoAnchor"), this.base.didMount(), this.setValidity();
|
|
163
163
|
},
|
|
164
164
|
watch: {
|
|
165
165
|
currentOpened: function(e, t) {
|
package/ComboBox/ComboBox.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 n=require("vue"),he=require("../common/DropDownBase.js"),z=require("../common/GroupStickyHeader.js"),o=require("@progress/kendo-vue-common"),G=require("@progress/kendo-vue-buttons"),d=require("../common/utils.js"),ge=require("../common/SearchBar.js"),fe=require("../common/ListContainer.js"),me=require("../common/List.js"),ve=require("../common/ClearButton.js"),be=require("@progress/kendo-vue-intl"),K=require("../messages/main.js"),_=require("@progress/kendo-svg-icons"),W=require("../common/constants.js"),Se=require("@progress/kendo-vue-layout"),ye=require("../common/ListFilter.js"),{sizeMap:P,roundedMap:Ie}=o.kendoThemeMaps;function ke(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const Ve="Please enter a valid value!",xe=n.defineComponent({name:"KendoComboBox",model:{event:"changemodel"},emits:{changemodel:null,"update:modelValue":null,filterchange:null,pagechange:null,change:null,focus:null,blur:null,open:null,close:null,scroll:null},props:{id:String,dataItemKey:{type:[Object,String]},defaultValue:{type:[String,Object,Number,Boolean],default:void 0},name:String,modelValue:{type:[String,Object,Number,Boolean],default:void 0},value:{type:[String,Object,Number,Boolean],default:void 0},label:{type:String},placeholder:String,required:{type:Boolean,default:!1},valid:{type:Boolean,default:void 0},validationMessage:{type:String,default:void 0},validityStyles:{type:Boolean,default:!0},iconClassName:String,opened:{type:Boolean,default:void 0},disabled:Boolean,dir:{type:String,default:void 0},tabIndex:{type:Number,default:0},accessKey:String,dataItems:Array,textField:String,className:String,loading:Boolean,popupSettings:{type:Object,default:function(){return{animate:!0,height:"200px",anchor:""}}},itemRender:[String,Function,Object],groupHeaderItemRender:[String,Function,Object],groupStickyHeaderItemRender:[String,Function,Object],listNoDataRender:[String,Function,Object],focusedItemIndex:Function,header:[String,Function,Object],footer:[String,Function,Object],filterable:Boolean,filter:{type:String,default:void 0},virtual:{type:Object,default:void 0},suggest:{type:Boolean,default:!1},allowCustom:{type:Boolean,default:!1},clearButton:{type:Boolean,default:!0},ariaLabel:{type:String,default:void 0},ariaLabelledBy:String,ariaDescribedBy:String,valueField:String,valuePrimitive:Boolean,rounded:{type:String,default:"medium",validator:function(e){return["small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,default:"medium",validator:function(e){return["small","medium","large"].includes(e)}},groupField:{type:String},adaptive:{type:Boolean,default:void 0},adaptiveTitle:{type:String,default:void 0},onFilterchange:Function,inputAttributes:Object},inject:{kendoLocalizationService:{default:null},adaptiveModeBreakpoints:{default:{small:W.MOBILE_SMALL_DEVICE,medium:W.MOBILE_MEDIUM_DEVICE}}},data(){return{hasMounted:!1,currentText:"",currentValue:"",currentFocused:!1,currentOpened:!1,searchState:{word:"",last:""},_skipFocusEvent:!1,valueDuringOnChange:{},_navigated:!1,suggested:"",group:void 0,isScrolling:!1,itemHeight:0,state:void 0,popupWidth:void 0,windowWidth:0}},created(){this.observer=null,this.valueDuringOnChange=void 0,this.currentText=void 0,this.currentValue=void 0,this.currentFocused=void 0,this.currentOpened=void 0,this.prevCurrentValue=this.computedValue(),this.base=new he(this),this.anchor=o.guid(),this.inputId=o.guid()},setup(){const e=n.ref(null),t=n.ref(null),s=n.ref(null),i=n.inject("kendoLocalizationService",{});return{inputRef:e,elementRef:t,kendoAnchorRef:s,kendoLocalizationService:i}},mounted(){this.observer=o.canUseDOM&&window.ResizeObserver&&new ResizeObserver(this.calculateMedia),document!=null&&document.body&&this.observer&&this.observer.observe(document.body),this.hasMounted=!0,this.input=this.inputRef.input,this.base.wrapper=o.getRef(this,"kendoAnchor"),this.element=o.getRef(this,"kendoAnchor"),this.base.didMount(),this.setValidity()},updated(){var v;const{dataItems:e=[],dataItemKey:t,virtual:s,groupField:i,textField:a}=this.$props,r=this.isOpen,l=this.prevOpened!==void 0?this.prevOpened:this.prevCurrentOpened,u=!l&&r,c=this.$refs.list,p=this.$refs.scrollElement,f=this.computedValue();if(this.valueOnDidUpdate=f,c&&(this.base.vs.list=c.list,this.base.list=c.list),p&&(this.base.vs.scrollElement=p),c&&e.length&&this.base.vs.scrollerRef(c.$el),s&&this.virtualTotalHasChanged)this.base.vs.calcScrollElementHeight(),this.base.vs.reset(),this.virtualTotalHasChanged=!1;else{const b=this.prevCurrentValue;let y=e.findIndex(x=>d.areSame(x,f,t));i&&(y=(v=this.base.getGroupedDataModernMode(e,i))==null?void 0:v.indexOf(f));const O=!d.areSame(b,f,t);if(u&&s)this.base.scrollToVirtualItem(s,y),this.prevCurrentOpened=!0;else if(u&&!s)e&&e.length!==0&&this.base.resetGroupStickyHeader(e[0][i],this),this.base.scrollToItem(y),this.prevCurrentOpened=!0;else if(r&&l&&f&&O)this.base.scrollToItem(y);else if(r&&!f&&!this.isScrolling){let x=0;if(i&&this.getFocusedIndex()!==-1&&e.length>0){const C=e[this.getFocusedIndex()][a],B=this.base.getGroupedDataModernMode(e,i),L=B.findIndex(k=>k[a]===C);x=B.slice(0,L).filter(k=>Object.keys(k).length===1).length}this.base.scrollToItem(this.getFocusedIndex()+x)}}u&&this.input&&this.input.focus(),this.prevCurrentValue=this.computedValue(),this.setValidity()},watch:{currentOpened:function(e,t){this.prevCurrentOpened=t},opened:function(e,t){this.prevOpened=t},virtual:function(e,t){e&&t&&e.total!==t.total&&(this.virtualTotalHasChanged=!0),this.virtualHasChanged=!0},isOpen:function(){setTimeout(()=>{const e=document.querySelector(".k-list-item");this.itemHeight=this.base.getListItemHeight(e)},100)}},computed:{index(){const{dataItems:e=[],dataItemKey:t}=this.$props,s=this.computedValue();return e.findIndex(i=>d.areSame(i,s,t))},spanClassNames(){const e=!this.hasMounted||!this.$props.validityStyles||this.validity().valid;return{"k-floating-label-container":!0,"k-focus":this.currentFocused,"k-empty":!this.computedValue(),"k-invalid":!e&&e!==void 0,"k-rtl":this.$props.dir==="rtl"}},isOpen(){return this.$props.opened!==void 0?this.$props.opened:this.currentOpened},animationStyles(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?{top:0,width:"100%",height:"100%"}:void 0},classNameAdaptive(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"},adaptiveState(){return this.windowWidth<=this.adaptiveModeBreakpoints.medium&&this.$props.adaptive}},methods:{focus(){this.input&&this.input.focus()},computedValue(){let e;return this.valueDuringOnChange!==void 0?e=this.valueDuringOnChange:this.$props.value!==void 0?e=this.$props.value:this.$props.modelValue!==void 0?e=this.$props.modelValue:this.currentValue!==void 0?e=this.currentValue:this.$props.defaultValue!==void 0&&(e=this.$props.defaultValue),this.valuePrimitive&&this.findByFieldValue(this.valueField,e)||e},findByFieldValue(e,t){const s=this.dataItems.findIndex(i=>d.getItemValue(i,e)===t);return this.dataItems[s]},primitiveValue(){const e=this.computedValue();return this.valuePrimitive?d.getItemValue(e,this.valueField):e},validity(){const e=this.$props.validationMessage!==void 0,t=!this.$props.required||this.computedValue()!==null&&this.computedValue()!==""&&this.computedValue()!==void 0,s=this.$props.valid!==void 0?this.$props.valid:t;return{customError:e,valid:s,valueMissing:this.computedValue()===null}},handleItemSelect(e,t){const{dataItems:s=[],virtual:i,dataItemKey:a}=this.$props,r=i?i.skip:0,l=s[e-r],u=!d.areSame(l,this.computedValue(),a);this.triggerOnChange(l,t),this.currentText!==void 0&&(t.data.currentText=void 0),u&&this.base.triggerPageChangeCornerItems(l,t)},onNavigate(e,t){const{dataItems:s=[],virtual:i={skip:0}}=this.$props,a=this.$props.filter?this.$props.filter:this.currentText,r=this.getFocusedIndex(),l=this.base.vs,u=this.computedValue();if(this.suggested="",r!==-1&&!d.isPresent(u))this.handleItemSelect(r,e);else if(a==="")this.handleItemSelect(0,e);else{let c=i.skip+r;const p=this.base.navigation.navigate({keyCode:t,current:c,max:(l.enabled?l.total:s.length)-1,min:0});p!==void 0&&this.handleItemSelect(p,e)}},toggleBtnClick(e){const t=this.base.initState(),s=this.isOpen,i=this.adaptiveState;t.event=e,this.base.togglePopup(t),!s&&i&&this.base.filterChanged("",t),this.applyState(t)},applyValueOnEnter(e,t){const{dataItems:s=[],textField:i,allowCustom:a}=this.$props,r=this.isOpen,u=d.getItemValue(this.computedValue(),i)===e?this.index:d.getItemIndexByText(s,e,i),c=u!==-1;let p;if(this.suggested="",c)p=s[u];else if(a)p=i!==void 0?{[i]:e}:e;else return this.selectFocusedItem(e,t);this.triggerOnChange(p,t),r&&this.base.togglePopup(t),this.$props.filter===void 0&&this.currentText!==void 0&&(t.data.currentText=void 0),this.applyState(t)},applyValueOnRejectSuggestions(e,t){const{dataItems:s=[],textField:i,allowCustom:a}=this.$props,r=this.isOpen,l=d.getItemValue(this.computedValue(),i);if(this.suggested="",e===l||e===""&&!d.isPresent(l))return r&&!this.adaptiveState&&this.base.togglePopup(t),this.applyState(t);const u=d.getItemIndexByText(s,e,i,!0),c=u!==-1;let p=null;c?p=s[u]:a&&(p=e?i?{[i]:e}:e:null),this.triggerOnChange(p,t),this.currentText!==void 0&&(t.data.currentText=void 0,this.base.filterChanged("",t)),r&&!this.adaptiveState&&this.base.togglePopup(t),this.applyState(t)},selectFocusedItem(e,t){const s=this.isOpen,{dataItems:i=[],textField:a,virtual:r={skip:0},focusedItemIndex:l=d.itemIndexStartsWith}=this.$props,u=r.skip,c=e===""&&u===0?0:l(i,e,a);return c!==-1?this.handleItemSelect(c+u,t):(this.triggerOnChange(null,t),this.currentText!==void 0&&(t.data.currentText=void 0)),s&&this.base.togglePopup(t),this.applyState(t)},handleItemClick(e,t){this.base.handleItemClick(e,t),this.valueDuringOnChange=void 0},handleFocus(e){this.$emit("focus",e)},handleBlur(e){if(this.currentFocused){const t=this.base.initState();t.data.currentFocused=!1,t.events.push({type:"blur"}),t.event=e,this.applyValueOnRejectSuggestions(e.currentTarget.value,t)}},onInputKeyDown(e){this.isScrolling&&(this.isScrolling=!1);const t=e.keyCode,s=this.isOpen,i=this.base.initState();if(i.event=e,!e.altKey&&(t===o.Keys.up||t===o.Keys.down)){e.preventDefault(),this.onNavigate(i,t),this.applyState(i);return}const a=()=>{e.preventDefault(),this.base.togglePopup(i),this.applyState(i)};s?e.altKey&&t===o.Keys.up?a():t===o.Keys.enter?(e.preventDefault(),this.applyValueOnEnter(e.currentTarget.value,i)):t===o.Keys.esc&&(this.adaptiveState&&this.toggleBtnClick(e),a()):e.altKey&&t===o.Keys.down?a():t===o.Keys.esc&&this.applyValueOnRejectSuggestions(e.currentTarget.value,i)},inputOnChange(e){const t=this.base.initState();t.event=e;const s=this.isOpen,i=e.currentTarget,a=i.value;if(this.$props.suggest){const r=i.selectionEnd===a.length;let l=this.$props.filter!==void 0?this.$props.filter:this.currentText;d.isPresent(l)||(l=d.getItemValue(this.computedValue(),this.$props.textField)||"");const u=l&&l===a,c=l&&l.length>a.length;u||c||!r?this.suggested="":this.suggestValue(a)}this.$props.filter===void 0&&(t.data.currentText=a),this.currentFocusedItem!==void 0&&(t.data.focusedItem=void 0),s||this.base.togglePopup(t),this.base.filterChanged(a,t),this.$props.filterable&&(t.data.group=void 0),this.applyState(t)},clearButtonClick(e){const t=this.base.initState();t.event=e,e.stopPropagation(),this.suggested="",this.base.filterChanged("",t),this.$props.filter===void 0&&this.currentText!==void 0&&(t.data.currentText=void 0),this.triggerOnChange(null,t),this.isOpen&&this.base.togglePopup(t),this.applyState(t)},getFocusedIndex(){const e=this.computedValue(),{dataItems:t=[],textField:s,dataItemKey:i,virtual:a={skip:0},focusedItemIndex:r=d.itemIndexStartsWith}=this.$props,l=this.$props.filter?this.$props.filter:this.currentText;return d.isPresent(e)&&l===void 0?t.findIndex(u=>d.areSame(u,e,i)):l?r(t,l,s):a.skip===0?0:-1},suggestValue(e){const{dataItems:t,textField:s}=this.$props;this.suggested=d.suggestValue(e,t,s)},setValidity(){this.input&&this.input.setCustomValidity&&this.input.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||Ve)},triggerOnChange(e,t){const s=this.computedValue();!d.isPresent(s)&&!d.isPresent(e)||d.areSame(s,e,this.$props.dataItemKey)||(this.$props.value===void 0&&(this.currentValue=e),this.valueDuringOnChange=e,t.events.push({type:"change"}))},applyState(e){this.base.applyState(e),this.valueDuringOnChange=void 0},calculateMedia(e){for(let t of e)this.windowWidth=t.target.clientWidth},repositionPopup(){this.base.repositionPopup()},onScroll(e){this.isScrolling=!0;const{vs:t,list:s}=this.base;t.scrollHandler(e);const i=this.base.initState(),{groupField:a}=this.$props;let{dataItems:r=[]}=this.$props,l;if(!a||!r.length)return;const u=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:s?s.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*u;a&&(r=this.base.getGroupedDataModernMode(r,a),l=r[0][a]);for(let f=1;f<r.length&&!(u*f>p);f++)r[f]&&r[f][a]&&(l=r[f][a]);l!==this.group&&(i.data.group=l,this.applyState(i))}},render(){let{dir:e,disabled:t,clearButton:s,label:i,textField:a,className:r,style:l,loading:u,icon:c,svgIcon:p,iconClassName:f,virtual:v,size:b,fillMode:y,rounded:O,adaptiveTitle:x,header:C,footer:B,groupStickyHeaderItemRender:L,placeholder:k,inputAttributes:U}=this.$props;const Y=this.currentFocused,J=!this.$props.validityStyles||this.validity().valid,D=this.$props.filter!==void 0?this.$props.filter:this.currentText,E=d.getItemValue(this.computedValue(),a),j=d.isPresent(D)?D:E,Q=s&&(!!j||d.isPresent(this.computedValue())),V=this.base,I=V.vs,R=this.$props.id||this.inputId,M=Object.assign({},{animate:!0,height:"200px"},this.$props.popupSettings),X=be.provideLocalizationService(this).toLanguageString(K.expandButton,K.messages[K.expandButton]),F=this.isOpen,T=this.adaptiveState;I.enabled=v!==void 0,v!==void 0&&(I.skip=v.skip,I.total=v.total,I.pageSize=v.pageSize),this.group===void 0&&this.$props.groupField!==void 0&&(this.group=d.getItemValue(this.$props.dataItems[0],this.$props.groupField));const Z=h=>{const g=this.base.initState();g.event=h;const m=h.event.target.value;g.data.text=m,this.base.filterChanged(m,g),this.applyState(g)},ee=()=>[n.createVNode("div",{class:"k-actionsheet-titlebar-group k-hbox"},[n.createVNode("div",{class:"k-actionsheet-title"},[n.createVNode("div",{class:"k-text-center"},[x]),k&&n.createVNode("div",{class:"k-actionsheet-subtitle k-text-center"},[k])]),n.createVNode("div",{class:"k-actionsheet-actions"},[n.createVNode(G.Button,{tabIndex:5,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.toggleBtnClick,icon:"x",svgIcon:_.xIcon},null)])]),n.createVNode("div",{class:"k-actionsheet-titlebar-group k-actionsheet-filter"},[ae.call(this)])],te=o.templateRendering.call(this,ee,o.getListeners.call(this)),ie=()=>{const h=V.getTemplateDef.call(this,C,n.h),g=V.getTemplateDef.call(this,B,n.h),m=o.templateRendering.call(this,L,o.getListeners.call(this)),S=this.$props.dataItems||[];return n.createVNode("div",{class:"k-list-container"},[h&&n.createVNode("div",{class:"k-list-header"},[h]),n.createVNode("div",{class:o.classNames("k-list",{[`k-list-${P[b]||b}`]:T?!1:b,"k-list-lg":!!T,"k-virtual-list":I.enabled})},[C&&n.createVNode("div",{class:"k-list-header"},[C]),this.group&&S.length!==0&&n.createVNode(z.GroupStickyHeader,{group:this.group,render:m},null),A.call(this),g&&n.createVNode("div",{class:"k-list-footer"},[g])])])},se=o.templateRendering.call(this,ie,o.getListeners.call(this)),ne=function(){return n.createVNode(Se.ActionSheet,{expand:F,animation:!0,animationStyles:this.animationStyles,className:this.classNameAdaptive,contentClassName:"!k-overflow-hidden",header:te,content:se,onClose:this.toggleBtnClick,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},ae=function(){const g=this.base.initState().data.text;return n.createVNode(ye.ListFilter,{adaptiveMode:!0,value:g,ref:"filterInput",onChange:m=>Z(m),onKeydown:this.onInputKeyDown,size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode},null)},A=function(){let h;const{dataItemKey:g,groupField:m}=this.$props;let S=this.$props.dataItems||[];const $=o.templateRendering.call(this,this.$props.itemRender,o.getListeners.call(this)),w=o.templateRendering.call(this,this.$props.groupHeaderItemRender,o.getListeners.call(this)),H=o.templateRendering.call(this,this.$props.listNoDataRender,o.getListeners.call(this));v||(v={skip:0});const N=v.skip,ue=`translateY(${I.translate}px)`,ce=F?this.getFocusedIndex():void 0,pe=d.isPresent(D)&&D!==E?null:this.computedValue();return m&&(S=this.base.getGroupedDataModernMode(S,m)),n.createVNode(me.List,{id:V.listBoxId,show:F,dataItems:S,focusedIndex:ce,value:pe,textField:a,valueField:g,optionsGuid:V.guid,ref:"list",wrapperStyle:{maxHeight:T?void 0:M.height},wrapperCssClass:o.classNames("k-list-content",{"k-list-scroller":!this.$props.virtual}),listStyle:I.enabled?{transform:ue}:void 0,key:"listkey",skip:N,onListclick:this.handleItemClick,itemRender:$,groupHeaderItemRender:w,noDataRender:H,groupField:m,onScroll:this.onScroll},ke(h=le.call(this))?h:{default:()=>[h]})},le=function(){return I.enabled&&n.createVNode("div",{ref:"scrollElement",key:"scrollElementKey"},null)},oe=function(){const h=o.templateRendering.call(this,this.$props.groupStickyHeaderItemRender,o.getListeners.call(this)),g=V.getTemplateDef.call(this,C),m=V.getTemplateDef.call(this,B),S=this.$props.dataItems||[];return this.group===void 0&&this.$props.groupField!==void 0&&(this.group=d.getItemValue(S[0],this.$props.groupField)),n.createVNode(fe.ListContainer,{ref:"container",onMousedown:$=>$.preventDefault(),width:this.popupWidth,popupSettings:{...M,anchor:this.anchor,show:F,popupClass:o.classNames(M.popupClass,"k-list",{[`k-list-${P[b]||b}`]:b,"k-virtual-list":this.base.vs.enabled}),className:o.classNames("k-list-container",M.className)},dir:e!==void 0?e:this.base.dirCalculated},{default:()=>[g&&n.createVNode("div",{class:"k-list-header"},[g]),this.group&&S.length!==0&&n.createVNode(z.GroupStickyHeader,{group:this.group,render:h},null),A.call(this),m&&n.createVNode("div",{class:"k-list-footer"},[m])]})},re=function(h,g){const{tabIndex:m,dataItems:S=[],dataItemKey:$}=this.$props;v||(v={skip:0});const w=this.computedValue(),H=Math.max(0,S.findIndex(N=>d.areSame(N,w,$)));return this.suggested&&!d.areSame(this.valueOnDidUpdate,w,$)&&(this.suggested=""),n.createVNode(ge.SearchBar,{id:g,placeholder:k,tabIndex:m||void 0,accessKey:this.$props.accessKey,value:h+this.suggested,suggestedText:this.suggested,ref:N=>{this.inputRef=N},onKeydown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:t,expanded:F,owns:this.base.listBoxId,activedescendant:this.base.guid+"-"+(H+v.skip),ariaLabelledBy:this.$props.ariaLabelledBy,ariaDescribedBy:this.$props.ariaDescribedBy,ariaLabel:this.$props.ariaLabel,inputAttributes:U},null)},de=function(){return n.createVNode("span",{class:o.classNames("k-combobox k-input",{[`k-input-${P[b]||b}`]:b,[`k-rounded-${Ie[O]||O}`]:O,[`k-input-${y}`]:y,"k-invalid":!J,"k-loading":u,"k-required":this.required,"k-disabled":t,"k-focus":Y&&!t},r),ref:o.setRef(this,"kendoAnchor"),style:i?{...l,width:void 0}:l,dir:e},[re.call(this,j||"",R),Q&&!u&&n.createVNode(ve.ClearButton,{onClearclick:this.clearButtonClick,key:"clearbutton"},null),u&&n.createVNode(o.Icon,{name:"loading",class:"k-input-loading-icon",key:"loading"},null),n.createVNode(G.Button,{type:"button",tabIndex:-1,"aria-label":X,size:b,fillMode:y,rounded:null,class:"k-input-button",icon:c||"caret-alt-down",svgIcon:p||_.caretAltDownIcon,iconClass:f,onClick:this.toggleBtnClick,onMousedown:h=>h.preventDefault()},null),!T&&oe.call(this)])},q=[n.h(de.call(this),{...this.$attrs}),T&&ne.call(this)];return i?n.createVNode("span",{class:this.spanClassNames,onFocusin:this.handleFocus,dir:this.$props.dir},[q,this.$props.label?R?n.createVNode("label",{for:R,class:"k-floating-label"},[this.$props.label]):n.createVNode("span",{class:"k-label"},[this.$props.label]):null]):q}});exports.ComboBox=xe;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),he=require("../common/DropDownBase.js"),z=require("../common/GroupStickyHeader.js"),o=require("@progress/kendo-vue-common"),G=require("@progress/kendo-vue-buttons"),d=require("../common/utils.js"),ge=require("../common/SearchBar.js"),fe=require("../common/ListContainer.js"),me=require("../common/List.js"),ve=require("../common/ClearButton.js"),be=require("@progress/kendo-vue-intl"),K=require("../messages/main.js"),_=require("@progress/kendo-svg-icons"),W=require("../common/constants.js"),Se=require("@progress/kendo-vue-layout"),ye=require("../common/ListFilter.js"),{sizeMap:P,roundedMap:Ie}=o.kendoThemeMaps;function ke(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const Ve="Please enter a valid value!",xe=n.defineComponent({name:"KendoComboBox",model:{event:"changemodel"},emits:{changemodel:null,"update:modelValue":null,filterchange:null,pagechange:null,change:null,focus:null,blur:null,open:null,close:null,scroll:null},props:{id:String,dataItemKey:{type:[Object,String]},defaultValue:{type:[String,Object,Number,Boolean],default:void 0},name:String,modelValue:{type:[String,Object,Number,Boolean],default:void 0},value:{type:[String,Object,Number,Boolean],default:void 0},label:{type:String},placeholder:String,required:{type:Boolean,default:!1},valid:{type:Boolean,default:void 0},validationMessage:{type:String,default:void 0},validityStyles:{type:Boolean,default:!0},iconClassName:String,opened:{type:Boolean,default:void 0},disabled:Boolean,dir:{type:String,default:void 0},tabIndex:{type:Number,default:0},accessKey:String,dataItems:Array,textField:String,className:String,loading:Boolean,popupSettings:{type:Object,default:function(){return{animate:!0,height:"200px",anchor:""}}},itemRender:[String,Function,Object],groupHeaderItemRender:[String,Function,Object],groupStickyHeaderItemRender:[String,Function,Object],listNoDataRender:[String,Function,Object],focusedItemIndex:Function,header:[String,Function,Object],footer:[String,Function,Object],filterable:Boolean,filter:{type:String,default:void 0},virtual:{type:Object,default:void 0},suggest:{type:Boolean,default:!1},allowCustom:{type:Boolean,default:!1},clearButton:{type:Boolean,default:!0},ariaLabel:{type:String,default:void 0},ariaLabelledBy:String,ariaDescribedBy:String,valueField:String,valuePrimitive:Boolean,rounded:{type:String,default:"medium",validator:function(e){return["small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return["solid","flat","outline"].includes(e)}},size:{type:String,default:"medium",validator:function(e){return["small","medium","large"].includes(e)}},groupField:{type:String},adaptive:{type:Boolean,default:void 0},adaptiveTitle:{type:String,default:void 0},onFilterchange:Function,inputAttributes:Object},inject:{kendoLocalizationService:{default:null},adaptiveModeBreakpoints:{default:{small:W.MOBILE_SMALL_DEVICE,medium:W.MOBILE_MEDIUM_DEVICE}}},data(){return{hasMounted:!1,currentText:"",currentValue:"",currentFocused:!1,currentOpened:!1,searchState:{word:"",last:""},_skipFocusEvent:!1,valueDuringOnChange:{},_navigated:!1,suggested:"",group:void 0,isScrolling:!1,itemHeight:0,state:void 0,popupWidth:void 0,windowWidth:0}},created(){this.observer=null,this.valueDuringOnChange=void 0,this.currentText=void 0,this.currentValue=void 0,this.currentFocused=void 0,this.currentOpened=void 0,this.prevCurrentValue=this.computedValue(),this.base=new he(this),this.anchor=o.guid(),this.inputId=o.guid()},setup(){const e=n.ref(null),t=n.ref(null),s=n.ref(null),i=n.inject("kendoLocalizationService",{});return{inputRef:e,elementRef:t,kendoAnchorRef:s,kendoLocalizationService:i}},mounted(){this.observer=o.canUseDOM&&window.ResizeObserver&&new ResizeObserver(this.calculateMedia),document!=null&&document.body&&this.observer&&this.observer.observe(document.body),this.hasMounted=!0,this.input=this.inputRef.input,this.base.wrapper=o.getRef(this,"kendoAnchor"),this.element=o.getRef(this,"kendoAnchor"),this.base.didMount(),this.setValidity()},updated(){var v;const{dataItems:e=[],dataItemKey:t,virtual:s,groupField:i,textField:a}=this.$props,r=this.isOpen,l=this.prevOpened!==void 0?this.prevOpened:this.prevCurrentOpened,u=!l&&r,c=this.$refs.list,p=this.$refs.scrollElement,f=this.computedValue();if(this.valueOnDidUpdate=f,c&&(this.base.vs.list=c.list,this.base.list=c.list),p&&(this.base.vs.scrollElement=p),c&&e.length&&this.base.vs.scrollerRef(c.$el),s&&this.virtualTotalHasChanged)this.base.vs.calcScrollElementHeight(),this.base.vs.reset(),this.virtualTotalHasChanged=!1;else{const b=this.prevCurrentValue;let y=e.findIndex(x=>d.areSame(x,f,t));i&&(y=(v=this.base.getGroupedDataModernMode(e,i))==null?void 0:v.indexOf(f));const O=!d.areSame(b,f,t);if(u&&s)this.base.scrollToVirtualItem(s,y),this.prevCurrentOpened=!0;else if(u&&!s)e&&e.length!==0&&this.base.resetGroupStickyHeader(e[0][i],this),this.base.scrollToItem(y),this.prevCurrentOpened=!0;else if(r&&l&&f&&O)this.base.scrollToItem(y);else if(r&&!f&&!this.isScrolling){let x=0;if(i&&this.getFocusedIndex()!==-1&&e.length>0){const C=e[this.getFocusedIndex()][a],B=this.base.getGroupedDataModernMode(e,i),w=B.findIndex(k=>k[a]===C);x=B.slice(0,w).filter(k=>Object.keys(k).length===1).length}this.base.scrollToItem(this.getFocusedIndex()+x)}}u&&this.input&&this.input.focus(),this.prevCurrentValue=this.computedValue(),this.setValidity()},watch:{currentOpened:function(e,t){this.prevCurrentOpened=t},opened:function(e,t){this.prevOpened=t},virtual:function(e,t){e&&t&&e.total!==t.total&&(this.virtualTotalHasChanged=!0),this.virtualHasChanged=!0},isOpen:function(){setTimeout(()=>{const e=document.querySelector(".k-list-item");this.itemHeight=this.base.getListItemHeight(e)},100)}},computed:{index(){const{dataItems:e=[],dataItemKey:t}=this.$props,s=this.computedValue();return e.findIndex(i=>d.areSame(i,s,t))},spanClassNames(){const e=!this.hasMounted||!this.$props.validityStyles||this.validity().valid;return{"k-floating-label-container":!0,"k-focus":this.currentFocused,"k-empty":!this.computedValue(),"k-invalid":!e&&e!==void 0,"k-rtl":this.$props.dir==="rtl"}},isOpen(){return this.$props.opened!==void 0?this.$props.opened:this.currentOpened},animationStyles(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?{top:0,width:"100%",height:"100%"}:void 0},classNameAdaptive(){return this.windowWidth<=this.adaptiveModeBreakpoints.small?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"},adaptiveState(){return this.windowWidth<=this.adaptiveModeBreakpoints.medium&&this.$props.adaptive}},methods:{focus(){this.input&&this.input.focus()},computedValue(){let e;return this.valueDuringOnChange!==void 0?e=this.valueDuringOnChange:this.$props.value!==void 0?e=this.$props.value:this.$props.modelValue!==void 0?e=this.$props.modelValue:this.currentValue!==void 0?e=this.currentValue:this.$props.defaultValue!==void 0&&(e=this.$props.defaultValue),this.valuePrimitive&&this.findByFieldValue(this.valueField,e)||e},findByFieldValue(e,t){const s=this.dataItems.findIndex(i=>d.getItemValue(i,e)===t);return this.dataItems[s]},primitiveValue(){const e=this.computedValue();return this.valuePrimitive?d.getItemValue(e,this.valueField):e},validity(){const e=this.$props.validationMessage!==void 0,t=!this.$props.required||this.computedValue()!==null&&this.computedValue()!==""&&this.computedValue()!==void 0,s=this.$props.valid!==void 0?this.$props.valid:t;return{customError:e,valid:s,valueMissing:this.computedValue()===null}},handleItemSelect(e,t){const{dataItems:s=[],virtual:i,dataItemKey:a}=this.$props,r=i?i.skip:0,l=s[e-r],u=!d.areSame(l,this.computedValue(),a);this.triggerOnChange(l,t),this.currentText!==void 0&&(t.data.currentText=void 0),u&&this.base.triggerPageChangeCornerItems(l,t)},onNavigate(e,t){const{dataItems:s=[],virtual:i={skip:0}}=this.$props,a=this.$props.filter?this.$props.filter:this.currentText,r=this.getFocusedIndex(),l=this.base.vs,u=this.computedValue();if(this.suggested="",r!==-1&&!d.isPresent(u))this.handleItemSelect(r,e);else if(a==="")this.handleItemSelect(0,e);else{let c=i.skip+r;const p=this.base.navigation.navigate({keyCode:t,current:c,max:(l.enabled?l.total:s.length)-1,min:0});p!==void 0&&this.handleItemSelect(p,e)}},toggleBtnClick(e){const t=this.base.initState(),s=this.isOpen,i=this.adaptiveState;t.event=e,this.base.togglePopup(t),!s&&i&&this.base.filterChanged("",t),this.applyState(t)},applyValueOnEnter(e,t){const{dataItems:s=[],textField:i,allowCustom:a}=this.$props,r=this.isOpen,u=d.getItemValue(this.computedValue(),i)===e?this.index:d.getItemIndexByText(s,e,i),c=u!==-1;let p;if(this.suggested="",c)p=s[u];else if(a)p=i!==void 0?{[i]:e}:e;else return this.selectFocusedItem(e,t);this.triggerOnChange(p,t),r&&this.base.togglePopup(t),this.$props.filter===void 0&&this.currentText!==void 0&&(t.data.currentText=void 0),this.applyState(t)},applyValueOnRejectSuggestions(e,t){const{dataItems:s=[],textField:i,allowCustom:a}=this.$props,r=this.isOpen,l=d.getItemValue(this.computedValue(),i);if(this.suggested="",e===l||e===""&&!d.isPresent(l))return r&&!this.adaptiveState&&this.base.togglePopup(t),this.applyState(t);const u=d.getItemIndexByText(s,e,i,!0),c=u!==-1;let p=null;c?p=s[u]:a&&(p=e?i?{[i]:e}:e:null),this.triggerOnChange(p,t),this.currentText!==void 0&&(t.data.currentText=void 0,this.base.filterChanged("",t)),r&&!this.adaptiveState&&this.base.togglePopup(t),this.applyState(t)},selectFocusedItem(e,t){const s=this.isOpen,{dataItems:i=[],textField:a,virtual:r={skip:0},focusedItemIndex:l=d.itemIndexStartsWith}=this.$props,u=r.skip,c=e===""&&u===0?0:l(i,e,a);return c!==-1?this.handleItemSelect(c+u,t):(this.triggerOnChange(null,t),this.currentText!==void 0&&(t.data.currentText=void 0)),s&&this.base.togglePopup(t),this.applyState(t)},handleItemClick(e,t){this.base.handleItemClick(e,t),this.valueDuringOnChange=void 0},handleFocus(e){this.$emit("focus",e)},handleBlur(e){if(this.currentFocused){const t=this.base.initState();t.data.currentFocused=!1,t.events.push({type:"blur"}),t.event=e,this.applyValueOnRejectSuggestions(e.currentTarget.value,t)}},onInputKeyDown(e){this.isScrolling&&(this.isScrolling=!1);const t=e.keyCode,s=this.isOpen,i=this.base.initState();if(i.event=e,!e.altKey&&(t===o.Keys.up||t===o.Keys.down)){e.preventDefault(),this.onNavigate(i,t),this.applyState(i);return}const a=()=>{e.preventDefault(),this.base.togglePopup(i),this.applyState(i)};s?e.altKey&&t===o.Keys.up?a():t===o.Keys.enter?(e.preventDefault(),this.applyValueOnEnter(e.currentTarget.value,i)):t===o.Keys.esc&&(this.adaptiveState&&this.toggleBtnClick(e),a()):e.altKey&&t===o.Keys.down?a():t===o.Keys.esc&&this.applyValueOnRejectSuggestions(e.currentTarget.value,i)},inputOnChange(e){const t=this.base.initState();t.event=e;const s=this.isOpen,i=e.currentTarget,a=i.value;if(this.$props.suggest){const r=i.selectionEnd===a.length;let l=this.$props.filter!==void 0?this.$props.filter:this.currentText;d.isPresent(l)||(l=d.getItemValue(this.computedValue(),this.$props.textField)||"");const u=l&&l===a,c=l&&l.length>a.length;u||c||!r?this.suggested="":this.suggestValue(a)}this.$props.filter===void 0&&(t.data.currentText=a),this.currentFocusedItem!==void 0&&(t.data.focusedItem=void 0),s||this.base.togglePopup(t),this.base.filterChanged(a,t),this.$props.filterable&&(t.data.group=void 0),this.applyState(t)},clearButtonClick(e){const t=this.base.initState();t.event=e,e.stopPropagation(),this.suggested="",this.base.filterChanged("",t),this.$props.filter===void 0&&this.currentText!==void 0&&(t.data.currentText=void 0),this.triggerOnChange(null,t),this.isOpen&&this.base.togglePopup(t),this.applyState(t)},getFocusedIndex(){const e=this.computedValue(),{dataItems:t=[],textField:s,dataItemKey:i,virtual:a={skip:0},focusedItemIndex:r=d.itemIndexStartsWith}=this.$props,l=this.$props.filter?this.$props.filter:this.currentText;return d.isPresent(e)&&l===void 0?t.findIndex(u=>d.areSame(u,e,i)):l?r(t,l,s):a.skip===0?0:-1},suggestValue(e){const{dataItems:t,textField:s}=this.$props;this.suggested=d.suggestValue(e,t,s)},setValidity(){this.input&&this.input.setCustomValidity&&this.input.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||Ve)},triggerOnChange(e,t){const s=this.computedValue();!d.isPresent(s)&&!d.isPresent(e)||d.areSame(s,e,this.$props.dataItemKey)||(this.$props.value===void 0&&(this.currentValue=e),this.valueDuringOnChange=e,t.events.push({type:"change"}))},applyState(e){this.base.applyState(e),this.valueDuringOnChange=void 0},calculateMedia(e){for(let t of e)this.windowWidth=t.target.clientWidth},repositionPopup(){this.base.repositionPopup()},onScroll(e){this.isScrolling=!0;const{vs:t,list:s}=this.base;t.scrollHandler(e);const i=this.base.initState(),{groupField:a}=this.$props;let{dataItems:r=[]}=this.$props,l;if(!a||!r.length)return;const u=this.itemHeight=this.itemHeight||(t.enabled?t.itemHeight:s?s.children[0].offsetHeight:0),p=e.target.scrollTop-t.skip*u;a&&(r=this.base.getGroupedDataModernMode(r,a),l=r[0][a]);for(let f=1;f<r.length&&!(u*f>p);f++)r[f]&&r[f][a]&&(l=r[f][a]);l!==this.group&&(i.data.group=l,this.applyState(i))},getInputText(e,t){return d.isPresent(e)&&e!==""?String(e):d.isPresent(t)?String(t):""}},render(){let{dir:e,disabled:t,clearButton:s,label:i,textField:a,className:r,style:l,loading:u,icon:c,svgIcon:p,iconClassName:f,virtual:v,size:b,fillMode:y,rounded:O,adaptiveTitle:x,header:C,footer:B,groupStickyHeaderItemRender:w,placeholder:k,inputAttributes:U}=this.$props;const Y=this.currentFocused,J=!this.$props.validityStyles||this.validity().valid,L=this.$props.filter!==void 0?this.$props.filter:this.currentText,E=d.getItemValue(this.computedValue(),a),j=this.getInputText(L,E),Q=s&&(!!j||d.isPresent(this.computedValue())),V=this.base,I=V.vs,R=this.$props.id||this.inputId,D=Object.assign({},{animate:!0,height:"200px"},this.$props.popupSettings),X=be.provideLocalizationService(this).toLanguageString(K.expandButton,K.messages[K.expandButton]),F=this.isOpen,T=this.adaptiveState;I.enabled=v!==void 0,v!==void 0&&(I.skip=v.skip,I.total=v.total,I.pageSize=v.pageSize),this.group===void 0&&this.$props.groupField!==void 0&&(this.group=d.getItemValue(this.$props.dataItems[0],this.$props.groupField));const Z=h=>{const g=this.base.initState();g.event=h;const m=h.event.target.value;g.data.text=m,this.base.filterChanged(m,g),this.applyState(g)},ee=()=>[n.createVNode("div",{class:"k-actionsheet-titlebar-group k-hbox"},[n.createVNode("div",{class:"k-actionsheet-title"},[n.createVNode("div",{class:"k-text-center"},[x]),k&&n.createVNode("div",{class:"k-actionsheet-subtitle k-text-center"},[k])]),n.createVNode("div",{class:"k-actionsheet-actions"},[n.createVNode(G.Button,{tabIndex:5,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.toggleBtnClick,icon:"x",svgIcon:_.xIcon},null)])]),n.createVNode("div",{class:"k-actionsheet-titlebar-group k-actionsheet-filter"},[ae.call(this)])],te=o.templateRendering.call(this,ee,o.getListeners.call(this)),ie=()=>{const h=V.getTemplateDef.call(this,C,n.h),g=V.getTemplateDef.call(this,B,n.h),m=o.templateRendering.call(this,w,o.getListeners.call(this)),S=this.$props.dataItems||[];return n.createVNode("div",{class:"k-list-container"},[h&&n.createVNode("div",{class:"k-list-header"},[h]),n.createVNode("div",{class:o.classNames("k-list",{[`k-list-${P[b]||b}`]:T?!1:b,"k-list-lg":!!T,"k-virtual-list":I.enabled})},[C&&n.createVNode("div",{class:"k-list-header"},[C]),this.group&&S.length!==0&&n.createVNode(z.GroupStickyHeader,{group:this.group,render:m},null),A.call(this),g&&n.createVNode("div",{class:"k-list-footer"},[g])])])},se=o.templateRendering.call(this,ie,o.getListeners.call(this)),ne=function(){return n.createVNode(Se.ActionSheet,{expand:F,animation:!0,animationStyles:this.animationStyles,className:this.classNameAdaptive,contentClassName:"!k-overflow-hidden",header:te,content:se,onClose:this.toggleBtnClick,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},ae=function(){const g=this.base.initState().data.text;return n.createVNode(ye.ListFilter,{adaptiveMode:!0,value:g,ref:"filterInput",onChange:m=>Z(m),onKeydown:this.onInputKeyDown,size:this.$props.size,rounded:this.$props.rounded,fillMode:this.$props.fillMode},null)},A=function(){let h;const{dataItemKey:g,groupField:m}=this.$props;let S=this.$props.dataItems||[];const $=o.templateRendering.call(this,this.$props.itemRender,o.getListeners.call(this)),M=o.templateRendering.call(this,this.$props.groupHeaderItemRender,o.getListeners.call(this)),H=o.templateRendering.call(this,this.$props.listNoDataRender,o.getListeners.call(this));v||(v={skip:0});const N=v.skip,ue=`translateY(${I.translate}px)`,ce=F?this.getFocusedIndex():void 0,pe=d.isPresent(L)&&L!==E?null:this.computedValue();return m&&(S=this.base.getGroupedDataModernMode(S,m)),n.createVNode(me.List,{id:V.listBoxId,show:F,dataItems:S,focusedIndex:ce,value:pe,textField:a,valueField:g,optionsGuid:V.guid,ref:"list",wrapperStyle:{maxHeight:T?void 0:D.height},wrapperCssClass:o.classNames("k-list-content",{"k-list-scroller":!this.$props.virtual}),listStyle:I.enabled?{transform:ue}:void 0,key:"listkey",skip:N,onListclick:this.handleItemClick,itemRender:$,groupHeaderItemRender:M,noDataRender:H,groupField:m,onScroll:this.onScroll},ke(h=le.call(this))?h:{default:()=>[h]})},le=function(){return I.enabled&&n.createVNode("div",{ref:"scrollElement",key:"scrollElementKey"},null)},oe=function(){const h=o.templateRendering.call(this,this.$props.groupStickyHeaderItemRender,o.getListeners.call(this)),g=V.getTemplateDef.call(this,C),m=V.getTemplateDef.call(this,B),S=this.$props.dataItems||[];return this.group===void 0&&this.$props.groupField!==void 0&&(this.group=d.getItemValue(S[0],this.$props.groupField)),n.createVNode(fe.ListContainer,{ref:"container",onMousedown:$=>$.preventDefault(),width:this.popupWidth,popupSettings:{...D,anchor:this.anchor,show:F,popupClass:o.classNames(D.popupClass,"k-list",{[`k-list-${P[b]||b}`]:b,"k-virtual-list":this.base.vs.enabled}),className:o.classNames("k-list-container",D.className)},dir:e!==void 0?e:this.base.dirCalculated},{default:()=>[g&&n.createVNode("div",{class:"k-list-header"},[g]),this.group&&S.length!==0&&n.createVNode(z.GroupStickyHeader,{group:this.group,render:h},null),A.call(this),m&&n.createVNode("div",{class:"k-list-footer"},[m])]})},re=function(h,g){const{tabIndex:m,dataItems:S=[],dataItemKey:$}=this.$props;v||(v={skip:0});const M=this.computedValue(),H=Math.max(0,S.findIndex(N=>d.areSame(N,M,$)));return this.suggested&&!d.areSame(this.valueOnDidUpdate,M,$)&&(this.suggested=""),n.createVNode(ge.SearchBar,{id:g,placeholder:k,tabIndex:m||void 0,accessKey:this.$props.accessKey,value:h+this.suggested,suggestedText:this.suggested,ref:N=>{this.inputRef=N},onKeydown:this.onInputKeyDown,onChange:this.inputOnChange,onFocus:this.base.handleFocus,onBlur:this.handleBlur,disabled:t,expanded:F,owns:this.base.listBoxId,activedescendant:this.base.guid+"-"+(H+v.skip),ariaLabelledBy:this.$props.ariaLabelledBy,ariaDescribedBy:this.$props.ariaDescribedBy,ariaLabel:this.$props.ariaLabel,inputAttributes:U},null)},de=function(){return n.createVNode("span",{class:o.classNames("k-combobox k-input",{[`k-input-${P[b]||b}`]:b,[`k-rounded-${Ie[O]||O}`]:O,[`k-input-${y}`]:y,"k-invalid":!J,"k-loading":u,"k-required":this.required,"k-disabled":t,"k-focus":Y&&!t},r),ref:o.setRef(this,"kendoAnchor"),style:i?{...l,width:void 0}:l,dir:e},[re.call(this,j||"",R),Q&&!u&&n.createVNode(ve.ClearButton,{onClearclick:this.clearButtonClick,key:"clearbutton"},null),u&&n.createVNode(o.Icon,{name:"loading",class:"k-input-loading-icon",key:"loading"},null),n.createVNode(G.Button,{type:"button",tabIndex:-1,"aria-label":X,size:b,fillMode:y,rounded:null,class:"k-input-button",icon:c||"caret-alt-down",svgIcon:p||_.caretAltDownIcon,iconClass:f,onClick:this.toggleBtnClick,onMousedown:h=>h.preventDefault()},null),!T&&oe.call(this)])},q=[n.h(de.call(this),{...this.$attrs}),T&&ne.call(this)];return i?n.createVNode("span",{class:this.spanClassNames,onFocusin:this.handleFocus,dir:this.$props.dir},[q,this.$props.label?R?n.createVNode("label",{for:R,class:"k-floating-label"},[this.$props.label]):n.createVNode("span",{class:"k-label"},[this.$props.label]):null]):q}});exports.ComboBox=xe;
|
package/ComboBox/ComboBox.mjs
CHANGED
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { defineComponent as Ie,
|
|
8
|
+
import { defineComponent as Ie, h as z, createVNode as o, ref as _, inject as ke, isVNode as xe } from "vue";
|
|
9
9
|
import Ce from "../common/DropDownBase.mjs";
|
|
10
10
|
import { GroupStickyHeader as J } from "../common/GroupStickyHeader.mjs";
|
|
11
|
-
import {
|
|
11
|
+
import { templateRendering as $, getListeners as O, Keys as V, canUseDOM as $e, getRef as Q, guid as X, classNames as L, kendoThemeMaps as Oe, setRef as Ve, Icon as Fe } from "@progress/kendo-vue-common";
|
|
12
12
|
import { Button as Z } from "@progress/kendo-vue-buttons";
|
|
13
|
-
import {
|
|
13
|
+
import { getItemValue as I, isPresent as b, areSame as k, suggestValue as Te, itemIndexStartsWith as ee, getItemIndexByText as te } from "../common/utils.mjs";
|
|
14
14
|
import { SearchBar as Be } from "../common/SearchBar.mjs";
|
|
15
15
|
import { ListContainer as De } from "../common/ListContainer.mjs";
|
|
16
16
|
import { List as we } from "../common/List.mjs";
|
|
@@ -18,13 +18,13 @@ import { ClearButton as Me } from "../common/ClearButton.mjs";
|
|
|
18
18
|
import { provideLocalizationService as Re } from "@progress/kendo-vue-intl";
|
|
19
19
|
import { expandButton as ie, messages as He } from "../messages/main.mjs";
|
|
20
20
|
import { xIcon as Le, caretAltDownIcon as Ee } from "@progress/kendo-svg-icons";
|
|
21
|
-
import {
|
|
21
|
+
import { MOBILE_MEDIUM_DEVICE as Ne, MOBILE_SMALL_DEVICE as Ae } from "../common/constants.mjs";
|
|
22
22
|
import { ActionSheet as je } from "@progress/kendo-vue-layout";
|
|
23
23
|
import { ListFilter as Ke } from "../common/ListFilter.mjs";
|
|
24
24
|
const {
|
|
25
25
|
sizeMap: G,
|
|
26
26
|
roundedMap: Pe
|
|
27
|
-
} =
|
|
27
|
+
} = Oe;
|
|
28
28
|
function ze(e) {
|
|
29
29
|
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !xe(e);
|
|
30
30
|
}
|
|
@@ -189,8 +189,8 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
189
189
|
},
|
|
190
190
|
adaptiveModeBreakpoints: {
|
|
191
191
|
default: {
|
|
192
|
-
small:
|
|
193
|
-
medium:
|
|
192
|
+
small: Ae,
|
|
193
|
+
medium: Ne
|
|
194
194
|
}
|
|
195
195
|
}
|
|
196
196
|
},
|
|
@@ -218,10 +218,10 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
218
218
|
};
|
|
219
219
|
},
|
|
220
220
|
created() {
|
|
221
|
-
this.observer = null, this.valueDuringOnChange = void 0, this.currentText = void 0, this.currentValue = void 0, this.currentFocused = void 0, this.currentOpened = void 0, this.prevCurrentValue = this.computedValue(), this.base = new Ce(this), this.anchor =
|
|
221
|
+
this.observer = null, this.valueDuringOnChange = void 0, this.currentText = void 0, this.currentValue = void 0, this.currentFocused = void 0, this.currentOpened = void 0, this.prevCurrentValue = this.computedValue(), this.base = new Ce(this), this.anchor = X(), this.inputId = X();
|
|
222
222
|
},
|
|
223
223
|
setup() {
|
|
224
|
-
const e =
|
|
224
|
+
const e = _(null), t = _(null), s = _(null), i = ke("kendoLocalizationService", {});
|
|
225
225
|
return {
|
|
226
226
|
inputRef: e,
|
|
227
227
|
elementRef: t,
|
|
@@ -230,7 +230,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
230
230
|
};
|
|
231
231
|
},
|
|
232
232
|
mounted() {
|
|
233
|
-
this.observer = $e && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.hasMounted = !0, this.input = this.inputRef.input, this.base.wrapper =
|
|
233
|
+
this.observer = $e && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.hasMounted = !0, this.input = this.inputRef.input, this.base.wrapper = Q(this, "kendoAnchor"), this.element = Q(this, "kendoAnchor"), this.base.didMount(), this.setValidity();
|
|
234
234
|
},
|
|
235
235
|
updated() {
|
|
236
236
|
var g;
|
|
@@ -245,9 +245,9 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
245
245
|
this.base.vs.calcScrollElementHeight(), this.base.vs.reset(), this.virtualTotalHasChanged = !1;
|
|
246
246
|
else {
|
|
247
247
|
const m = this.prevCurrentValue;
|
|
248
|
-
let S = e.findIndex((F) =>
|
|
248
|
+
let S = e.findIndex((F) => k(F, h, t));
|
|
249
249
|
i && (S = (g = this.base.getGroupedDataModernMode(e, i)) == null ? void 0 : g.indexOf(h));
|
|
250
|
-
const D = !
|
|
250
|
+
const D = !k(m, h, t);
|
|
251
251
|
if (r && s)
|
|
252
252
|
this.base.scrollToVirtualItem(s, S), this.prevCurrentOpened = !0;
|
|
253
253
|
else if (r && !s)
|
|
@@ -257,8 +257,8 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
257
257
|
else if (l && !h && !this.isScrolling) {
|
|
258
258
|
let F = 0;
|
|
259
259
|
if (i && this.getFocusedIndex() !== -1 && e.length > 0) {
|
|
260
|
-
const T = e[this.getFocusedIndex()][n], w = this.base.getGroupedDataModernMode(e, i),
|
|
261
|
-
F = w.slice(0,
|
|
260
|
+
const T = e[this.getFocusedIndex()][n], w = this.base.getGroupedDataModernMode(e, i), A = w.findIndex((x) => x[n] === T);
|
|
261
|
+
F = w.slice(0, A).filter((x) => Object.keys(x).length === 1).length;
|
|
262
262
|
}
|
|
263
263
|
this.base.scrollToItem(this.getFocusedIndex() + F);
|
|
264
264
|
}
|
|
@@ -288,7 +288,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
288
288
|
dataItems: e = [],
|
|
289
289
|
dataItemKey: t
|
|
290
290
|
} = this.$props, s = this.computedValue();
|
|
291
|
-
return e.findIndex((i) =>
|
|
291
|
+
return e.findIndex((i) => k(i, s, t));
|
|
292
292
|
},
|
|
293
293
|
spanClassNames() {
|
|
294
294
|
const e = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
|
|
@@ -326,12 +326,12 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
326
326
|
return this.valueDuringOnChange !== void 0 ? e = this.valueDuringOnChange : this.$props.value !== void 0 ? e = this.$props.value : this.$props.modelValue !== void 0 ? e = this.$props.modelValue : this.currentValue !== void 0 ? e = this.currentValue : this.$props.defaultValue !== void 0 && (e = this.$props.defaultValue), this.valuePrimitive && this.findByFieldValue(this.valueField, e) || e;
|
|
327
327
|
},
|
|
328
328
|
findByFieldValue(e, t) {
|
|
329
|
-
const s = this.dataItems.findIndex((i) =>
|
|
329
|
+
const s = this.dataItems.findIndex((i) => I(i, e) === t);
|
|
330
330
|
return this.dataItems[s];
|
|
331
331
|
},
|
|
332
332
|
primitiveValue() {
|
|
333
333
|
const e = this.computedValue();
|
|
334
|
-
return this.valuePrimitive ?
|
|
334
|
+
return this.valuePrimitive ? I(e, this.valueField) : e;
|
|
335
335
|
},
|
|
336
336
|
validity() {
|
|
337
337
|
const e = this.$props.validationMessage !== void 0, t = !this.$props.required || this.computedValue() !== null && this.computedValue() !== "" && this.computedValue() !== void 0, s = this.$props.valid !== void 0 ? this.$props.valid : t;
|
|
@@ -346,7 +346,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
346
346
|
dataItems: s = [],
|
|
347
347
|
virtual: i,
|
|
348
348
|
dataItemKey: n
|
|
349
|
-
} = this.$props, l = i ? i.skip : 0, a = s[e - l], r = !
|
|
349
|
+
} = this.$props, l = i ? i.skip : 0, a = s[e - l], r = !k(a, this.computedValue(), n);
|
|
350
350
|
this.triggerOnChange(a, t), this.currentText !== void 0 && (t.data.currentText = void 0), r && this.base.triggerPageChangeCornerItems(a, t);
|
|
351
351
|
},
|
|
352
352
|
onNavigate(e, t) {
|
|
@@ -380,7 +380,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
380
380
|
dataItems: s = [],
|
|
381
381
|
textField: i,
|
|
382
382
|
allowCustom: n
|
|
383
|
-
} = this.$props, l = this.isOpen, r =
|
|
383
|
+
} = this.$props, l = this.isOpen, r = I(this.computedValue(), i) === e ? this.index : te(s, e, i), d = r !== -1;
|
|
384
384
|
let u;
|
|
385
385
|
if (this.suggested = "", d)
|
|
386
386
|
u = s[r];
|
|
@@ -397,10 +397,10 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
397
397
|
dataItems: s = [],
|
|
398
398
|
textField: i,
|
|
399
399
|
allowCustom: n
|
|
400
|
-
} = this.$props, l = this.isOpen, a =
|
|
400
|
+
} = this.$props, l = this.isOpen, a = I(this.computedValue(), i);
|
|
401
401
|
if (this.suggested = "", e === a || e === "" && !b(a))
|
|
402
402
|
return l && !this.adaptiveState && this.base.togglePopup(t), this.applyState(t);
|
|
403
|
-
const r =
|
|
403
|
+
const r = te(s, e, i, !0), d = r !== -1;
|
|
404
404
|
let u = null;
|
|
405
405
|
d ? u = s[r] : n && (u = e ? i ? {
|
|
406
406
|
[i]: e
|
|
@@ -413,7 +413,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
413
413
|
virtual: l = {
|
|
414
414
|
skip: 0
|
|
415
415
|
},
|
|
416
|
-
focusedItemIndex: a =
|
|
416
|
+
focusedItemIndex: a = ee
|
|
417
417
|
} = this.$props, r = l.skip, d = e === "" && r === 0 ? 0 : a(i, e, n);
|
|
418
418
|
return d !== -1 ? this.handleItemSelect(d + r, t) : (this.triggerOnChange(null, t), this.currentText !== void 0 && (t.data.currentText = void 0)), s && this.base.togglePopup(t), this.applyState(t);
|
|
419
419
|
},
|
|
@@ -434,14 +434,14 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
434
434
|
onInputKeyDown(e) {
|
|
435
435
|
this.isScrolling && (this.isScrolling = !1);
|
|
436
436
|
const t = e.keyCode, s = this.isOpen, i = this.base.initState();
|
|
437
|
-
if (i.event = e, !e.altKey && (t ===
|
|
437
|
+
if (i.event = e, !e.altKey && (t === V.up || t === V.down)) {
|
|
438
438
|
e.preventDefault(), this.onNavigate(i, t), this.applyState(i);
|
|
439
439
|
return;
|
|
440
440
|
}
|
|
441
441
|
const n = () => {
|
|
442
442
|
e.preventDefault(), this.base.togglePopup(i), this.applyState(i);
|
|
443
443
|
};
|
|
444
|
-
s ? e.altKey && t ===
|
|
444
|
+
s ? e.altKey && t === V.up ? n() : t === V.enter ? (e.preventDefault(), this.applyValueOnEnter(e.currentTarget.value, i)) : t === V.esc && (this.adaptiveState && this.toggleBtnClick(e), n()) : e.altKey && t === V.down ? n() : t === V.esc && this.applyValueOnRejectSuggestions(e.currentTarget.value, i);
|
|
445
445
|
},
|
|
446
446
|
inputOnChange(e) {
|
|
447
447
|
const t = this.base.initState();
|
|
@@ -450,7 +450,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
450
450
|
if (this.$props.suggest) {
|
|
451
451
|
const l = i.selectionEnd === n.length;
|
|
452
452
|
let a = this.$props.filter !== void 0 ? this.$props.filter : this.currentText;
|
|
453
|
-
b(a) || (a =
|
|
453
|
+
b(a) || (a = I(this.computedValue(), this.$props.textField) || "");
|
|
454
454
|
const r = a && a === n, d = a && a.length > n.length;
|
|
455
455
|
r || d || !l ? this.suggested = "" : this.suggestValue(n);
|
|
456
456
|
}
|
|
@@ -468,9 +468,9 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
468
468
|
virtual: n = {
|
|
469
469
|
skip: 0
|
|
470
470
|
},
|
|
471
|
-
focusedItemIndex: l =
|
|
471
|
+
focusedItemIndex: l = ee
|
|
472
472
|
} = this.$props, a = this.$props.filter ? this.$props.filter : this.currentText;
|
|
473
|
-
return b(e) && a === void 0 ? t.findIndex((r) =>
|
|
473
|
+
return b(e) && a === void 0 ? t.findIndex((r) => k(r, e, i)) : a ? l(t, a, s) : n.skip === 0 ? 0 : -1;
|
|
474
474
|
},
|
|
475
475
|
suggestValue(e) {
|
|
476
476
|
const {
|
|
@@ -484,7 +484,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
484
484
|
},
|
|
485
485
|
triggerOnChange(e, t) {
|
|
486
486
|
const s = this.computedValue();
|
|
487
|
-
!b(s) && !b(e) ||
|
|
487
|
+
!b(s) && !b(e) || k(s, e, this.$props.dataItemKey) || (this.$props.value === void 0 && (this.currentValue = e), this.valueDuringOnChange = e, t.events.push({
|
|
488
488
|
type: "change"
|
|
489
489
|
}));
|
|
490
490
|
},
|
|
@@ -518,6 +518,9 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
518
518
|
for (let h = 1; h < l.length && !(r * h > u); h++)
|
|
519
519
|
l[h] && l[h][n] && (a = l[h][n]);
|
|
520
520
|
a !== this.group && (i.data.group = a, this.applyState(i));
|
|
521
|
+
},
|
|
522
|
+
getInputText(e, t) {
|
|
523
|
+
return b(e) && e !== "" ? String(e) : b(t) ? String(t) : "";
|
|
521
524
|
}
|
|
522
525
|
},
|
|
523
526
|
render() {
|
|
@@ -540,15 +543,15 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
540
543
|
adaptiveTitle: F,
|
|
541
544
|
header: T,
|
|
542
545
|
footer: w,
|
|
543
|
-
groupStickyHeaderItemRender:
|
|
546
|
+
groupStickyHeaderItemRender: A,
|
|
544
547
|
placeholder: x,
|
|
545
548
|
inputAttributes: se
|
|
546
549
|
} = this.$props;
|
|
547
|
-
const ne = this.currentFocused, ae = !this.$props.validityStyles || this.validity().valid,
|
|
550
|
+
const ne = this.currentFocused, ae = !this.$props.validityStyles || this.validity().valid, j = this.$props.filter !== void 0 ? this.$props.filter : this.currentText, W = I(this.computedValue(), n), q = this.getInputText(j, W), le = s && (!!q || b(this.computedValue())), C = this.base, y = C.vs, K = this.$props.id || this.inputId, E = Object.assign({}, {
|
|
548
551
|
animate: !0,
|
|
549
552
|
height: "200px"
|
|
550
553
|
}, this.$props.popupSettings), oe = Re(this).toLanguageString(ie, He[ie]), M = this.isOpen, R = this.adaptiveState;
|
|
551
|
-
y.enabled = g !== void 0, g !== void 0 && (y.skip = g.skip, y.total = g.total, y.pageSize = g.pageSize), this.group === void 0 && this.$props.groupField !== void 0 && (this.group =
|
|
554
|
+
y.enabled = g !== void 0, g !== void 0 && (y.skip = g.skip, y.total = g.total, y.pageSize = g.pageSize), this.group === void 0 && this.$props.groupField !== void 0 && (this.group = I(this.$props.dataItems[0], this.$props.groupField));
|
|
552
555
|
const re = (p) => {
|
|
553
556
|
const c = this.base.initState();
|
|
554
557
|
c.event = p;
|
|
@@ -575,8 +578,8 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
575
578
|
svgIcon: Le
|
|
576
579
|
}, null)])]), o("div", {
|
|
577
580
|
class: "k-actionsheet-titlebar-group k-actionsheet-filter"
|
|
578
|
-
}, [fe.call(this)])], ue =
|
|
579
|
-
const p = C.getTemplateDef.call(this, T,
|
|
581
|
+
}, [fe.call(this)])], ue = $.call(this, de, O.call(this)), pe = () => {
|
|
582
|
+
const p = C.getTemplateDef.call(this, T, z), c = C.getTemplateDef.call(this, w, z), f = $.call(this, A, O.call(this)), v = this.$props.dataItems || [];
|
|
580
583
|
return o("div", {
|
|
581
584
|
class: "k-list-container"
|
|
582
585
|
}, [p && o("div", {
|
|
@@ -595,7 +598,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
595
598
|
}, null), U.call(this), c && o("div", {
|
|
596
599
|
class: "k-list-footer"
|
|
597
600
|
}, [c])])]);
|
|
598
|
-
}, ce =
|
|
601
|
+
}, ce = $.call(this, pe, O.call(this)), he = function() {
|
|
599
602
|
return o(je, {
|
|
600
603
|
expand: M,
|
|
601
604
|
animation: !0,
|
|
@@ -626,11 +629,11 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
626
629
|
groupField: f
|
|
627
630
|
} = this.$props;
|
|
628
631
|
let v = this.$props.dataItems || [];
|
|
629
|
-
const B =
|
|
632
|
+
const B = $.call(this, this.$props.itemRender, O.call(this)), N = $.call(this, this.$props.groupHeaderItemRender, O.call(this)), P = $.call(this, this.$props.listNoDataRender, O.call(this));
|
|
630
633
|
g || (g = {
|
|
631
634
|
skip: 0
|
|
632
635
|
});
|
|
633
|
-
const H = g.skip, be = `translateY(${y.translate}px)`, Se = M ? this.getFocusedIndex() : void 0, ye = b(
|
|
636
|
+
const H = g.skip, be = `translateY(${y.translate}px)`, Se = M ? this.getFocusedIndex() : void 0, ye = b(j) && j !== W ? null : this.computedValue();
|
|
634
637
|
return f && (v = this.base.getGroupedDataModernMode(v, f)), o(we, {
|
|
635
638
|
id: C.listBoxId,
|
|
636
639
|
show: M,
|
|
@@ -642,7 +645,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
642
645
|
optionsGuid: C.guid,
|
|
643
646
|
ref: "list",
|
|
644
647
|
wrapperStyle: {
|
|
645
|
-
maxHeight: R ? void 0 :
|
|
648
|
+
maxHeight: R ? void 0 : E.height
|
|
646
649
|
},
|
|
647
650
|
wrapperCssClass: L("k-list-content", {
|
|
648
651
|
"k-list-scroller": !this.$props.virtual
|
|
@@ -654,7 +657,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
654
657
|
skip: H,
|
|
655
658
|
onListclick: this.handleItemClick,
|
|
656
659
|
itemRender: B,
|
|
657
|
-
groupHeaderItemRender:
|
|
660
|
+
groupHeaderItemRender: N,
|
|
658
661
|
noDataRender: P,
|
|
659
662
|
groupField: f,
|
|
660
663
|
onScroll: this.onScroll
|
|
@@ -667,20 +670,20 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
667
670
|
key: "scrollElementKey"
|
|
668
671
|
}, null);
|
|
669
672
|
}, me = function() {
|
|
670
|
-
const p =
|
|
671
|
-
return this.group === void 0 && this.$props.groupField !== void 0 && (this.group =
|
|
673
|
+
const p = $.call(this, this.$props.groupStickyHeaderItemRender, O.call(this)), c = C.getTemplateDef.call(this, T), f = C.getTemplateDef.call(this, w), v = this.$props.dataItems || [];
|
|
674
|
+
return this.group === void 0 && this.$props.groupField !== void 0 && (this.group = I(v[0], this.$props.groupField)), o(De, {
|
|
672
675
|
ref: "container",
|
|
673
676
|
onMousedown: (B) => B.preventDefault(),
|
|
674
677
|
width: this.popupWidth,
|
|
675
678
|
popupSettings: {
|
|
676
|
-
...
|
|
679
|
+
...E,
|
|
677
680
|
anchor: this.anchor,
|
|
678
681
|
show: M,
|
|
679
|
-
popupClass: L(
|
|
682
|
+
popupClass: L(E.popupClass, "k-list", {
|
|
680
683
|
[`k-list-${G[m] || m}`]: m,
|
|
681
684
|
"k-virtual-list": this.base.vs.enabled
|
|
682
685
|
}),
|
|
683
|
-
className: L("k-list-container",
|
|
686
|
+
className: L("k-list-container", E.className)
|
|
684
687
|
},
|
|
685
688
|
dir: e !== void 0 ? e : this.base.dirCalculated
|
|
686
689
|
}, {
|
|
@@ -702,8 +705,8 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
702
705
|
g || (g = {
|
|
703
706
|
skip: 0
|
|
704
707
|
});
|
|
705
|
-
const
|
|
706
|
-
return this.suggested && !
|
|
708
|
+
const N = this.computedValue(), P = Math.max(0, v.findIndex((H) => k(H, N, B)));
|
|
709
|
+
return this.suggested && !k(this.valueOnDidUpdate, N, B) && (this.suggested = ""), o(Be, {
|
|
707
710
|
id: c,
|
|
708
711
|
placeholder: x,
|
|
709
712
|
tabIndex: f || void 0,
|
|
@@ -726,7 +729,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
726
729
|
ariaLabel: this.$props.ariaLabel,
|
|
727
730
|
inputAttributes: se
|
|
728
731
|
}, null);
|
|
729
|
-
}, Y = [
|
|
732
|
+
}, Y = [z(function() {
|
|
730
733
|
return o("span", {
|
|
731
734
|
class: L("k-combobox k-input", {
|
|
732
735
|
[`k-input-${G[m] || m}`]: m,
|
|
@@ -738,7 +741,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
738
741
|
"k-disabled": t,
|
|
739
742
|
"k-focus": ne && !t
|
|
740
743
|
}, l),
|
|
741
|
-
ref:
|
|
744
|
+
ref: Ve(this, "kendoAnchor"),
|
|
742
745
|
style: i ? {
|
|
743
746
|
...a,
|
|
744
747
|
width: void 0
|
|
@@ -747,7 +750,7 @@ const _e = "Please enter a valid value!", rt = /* @__PURE__ */ Ie({
|
|
|
747
750
|
}, [ve.call(this, q || "", K), le && !r && o(Me, {
|
|
748
751
|
onClearclick: this.clearButtonClick,
|
|
749
752
|
key: "clearbutton"
|
|
750
|
-
}, null), r && o(
|
|
753
|
+
}, null), r && o(Fe, {
|
|
751
754
|
name: "loading",
|
|
752
755
|
class: "k-input-loading-icon",
|
|
753
756
|
key: "loading"
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { defineComponent as Se,
|
|
9
|
-
import {
|
|
8
|
+
import { defineComponent as Se, createVNode as n, h as T, ref as N, isVNode as $e } from "vue";
|
|
9
|
+
import { kendoThemeMaps as Ce, templateRendering as C, getListeners as x, getTemplate as xe, Keys as f, canUseDOM as Oe, getRef as A, guid as W, classNames as B, noop as G, getTabIndex as we, setRef as q, Icon as Fe } from "@progress/kendo-vue-common";
|
|
10
10
|
import { Button as U } from "@progress/kendo-vue-buttons";
|
|
11
11
|
import { ListContainer as De } from "../common/ListContainer.mjs";
|
|
12
12
|
import { ListFilter as Ve } from "../common/ListFilter.mjs";
|
|
@@ -16,14 +16,14 @@ import Be from "../common/DropDownBase.mjs";
|
|
|
16
16
|
import { GroupStickyHeader as Y } from "../common/GroupStickyHeader.mjs";
|
|
17
17
|
import { selectButton as J, messages as Le } from "../messages/main.mjs";
|
|
18
18
|
import { provideLocalizationService as Re } from "@progress/kendo-vue-intl";
|
|
19
|
-
import {
|
|
19
|
+
import { MOBILE_MEDIUM_DEVICE as Ne, MOBILE_SMALL_DEVICE as Ee } from "../common/constants.mjs";
|
|
20
20
|
import { ActionSheet as Ke } from "@progress/kendo-vue-layout";
|
|
21
|
-
import { areSame as y, isPresent as Q,
|
|
21
|
+
import { getItemValue as F, areSame as y, isPresent as Q, getFocusedItem as He, sameCharsOnly as Pe, shuffleData as _e, matchText as X, preventDefaultNonInputs as Z } from "../common/utils.mjs";
|
|
22
22
|
import { xIcon as je, caretAltDownIcon as ze } from "@progress/kendo-svg-icons";
|
|
23
23
|
const {
|
|
24
24
|
sizeMap: E,
|
|
25
25
|
roundedMap: Ae
|
|
26
|
-
} =
|
|
26
|
+
} = Ce;
|
|
27
27
|
function We(e) {
|
|
28
28
|
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !$e(e);
|
|
29
29
|
}
|
|
@@ -178,8 +178,8 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
|
|
|
178
178
|
},
|
|
179
179
|
adaptiveModeBreakpoints: {
|
|
180
180
|
default: {
|
|
181
|
-
small:
|
|
182
|
-
medium:
|
|
181
|
+
small: Ee,
|
|
182
|
+
medium: Ne
|
|
183
183
|
}
|
|
184
184
|
}
|
|
185
185
|
},
|
|
@@ -223,7 +223,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
|
|
|
223
223
|
}
|
|
224
224
|
},
|
|
225
225
|
created() {
|
|
226
|
-
this.observer = null, this.valueDuringOnChange = void 0, this.currentText = void 0, this.currentValue = void 0, this.prevCurrentValue = this.computedValue(), this.currentFocused = void 0, this.currentOpened = void 0, this.base = new Be(this), this.anchor =
|
|
226
|
+
this.observer = null, this.valueDuringOnChange = void 0, this.currentText = void 0, this.currentValue = void 0, this.prevCurrentValue = this.computedValue(), this.currentFocused = void 0, this.currentOpened = void 0, this.base = new Be(this), this.anchor = W(), this.inputId = W();
|
|
227
227
|
},
|
|
228
228
|
setup() {
|
|
229
229
|
const e = N(null), t = N(null), s = N(null);
|
|
@@ -234,7 +234,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
|
|
|
234
234
|
};
|
|
235
235
|
},
|
|
236
236
|
mounted() {
|
|
237
|
-
this.observer =
|
|
237
|
+
this.observer = Oe && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.observer && this.observer.observe(document.body), this.hasMounted = !0, this.select = A(this, "select"), this.base.wrapper = A(this, "kendoAnchor"), this.base.didMount(), this.setValidity();
|
|
238
238
|
},
|
|
239
239
|
updated() {
|
|
240
240
|
var I;
|
|
@@ -357,12 +357,12 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
|
|
|
357
357
|
item: v,
|
|
358
358
|
itemIndex: D
|
|
359
359
|
}));
|
|
360
|
-
const o = this.searchState.word, i = this.searchState.last, r =
|
|
360
|
+
const o = this.searchState.word, i = this.searchState.last, r = Pe(o, i);
|
|
361
361
|
let a = l.length, d = Math.max(0, t.findIndex((v) => y(v, this.computedValue(), s))), h;
|
|
362
362
|
this.$props.defaultItem && (h = {
|
|
363
363
|
item: this.$props.defaultItem,
|
|
364
364
|
itemIndex: -1
|
|
365
|
-
}, a += 1, d += 1), d += r ? 1 : 0, l =
|
|
365
|
+
}, a += 1, d += 1), d += r ? 1 : 0, l = _e(l, d, h);
|
|
366
366
|
let u, I, g, m = 0;
|
|
367
367
|
const {
|
|
368
368
|
textField: p,
|
|
@@ -456,7 +456,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
|
|
|
456
456
|
textField: o,
|
|
457
457
|
focusedItemIndex: i
|
|
458
458
|
} = this.$props, r = this.computedValue(), d = !(t.findIndex((h) => y(h, r, l)) < 0 && !this.$props.defaultItem);
|
|
459
|
-
return !d && e && s.skip === 0 ? i ? i(t, e, o) : t.indexOf(
|
|
459
|
+
return !d && e && s.skip === 0 ? i ? i(t, e, o) : t.indexOf(He(t, e, o)) : !d && s.skip === 0 ? 0 : void 0;
|
|
460
460
|
},
|
|
461
461
|
focusElement(e) {
|
|
462
462
|
this._skipFocusEvent = !0, e.focus(), setTimeout(() => this._skipFocusEvent = !1, 30);
|
|
@@ -551,7 +551,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
|
|
|
551
551
|
return n("select", {
|
|
552
552
|
name: this.$props.name,
|
|
553
553
|
id: L,
|
|
554
|
-
ref:
|
|
554
|
+
ref: q(this, "select"),
|
|
555
555
|
tabindex: -1,
|
|
556
556
|
"aria-hidden": !0,
|
|
557
557
|
title: this.$props.label,
|
|
@@ -717,7 +717,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
|
|
|
717
717
|
this.$props.virtual !== void 0 && (S.vs.skip = o.skip, S.vs.total = o.total, S.vs.pageSize = o.pageSize);
|
|
718
718
|
const z = [T(function() {
|
|
719
719
|
return n("span", {
|
|
720
|
-
ref:
|
|
720
|
+
ref: q(this, "kendoAnchor"),
|
|
721
721
|
class: B("k-dropdownlist k-picker", t, {
|
|
722
722
|
[`k-picker-${E[i] || i}`]: i,
|
|
723
723
|
[`k-rounded-${Ae[r] || r}`]: r,
|
|
@@ -733,15 +733,15 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
|
|
|
733
733
|
width: void 0
|
|
734
734
|
} : e,
|
|
735
735
|
dir: l,
|
|
736
|
-
onMousedown: O ? Z :
|
|
736
|
+
onMousedown: O ? Z : G,
|
|
737
737
|
onFocusin: this.handleFocus,
|
|
738
738
|
onFocusout: this.handleBlur,
|
|
739
|
-
tabindex:
|
|
739
|
+
tabindex: we(I, u),
|
|
740
740
|
accesskey: this.$props.accessKey,
|
|
741
741
|
onKeydown: this.handleKeyDown,
|
|
742
742
|
onKeypress: this.handleKeyPress,
|
|
743
743
|
role: "combobox",
|
|
744
|
-
onClick: u ?
|
|
744
|
+
onClick: u ? G : this.handleWrapperClick,
|
|
745
745
|
"aria-disabled": u || void 0,
|
|
746
746
|
"aria-haspopup": !0,
|
|
747
747
|
"aria-expanded": O || !1,
|
|
@@ -751,7 +751,7 @@ const Ge = "Please select a value from the list!", dt = /* @__PURE__ */ Se({
|
|
|
751
751
|
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
752
752
|
"aria-describedBy": this.dropDownListId,
|
|
753
753
|
title: this.$props.title
|
|
754
|
-
}, [re, g && n(
|
|
754
|
+
}, [re, g && n(Fe, {
|
|
755
755
|
name: "loading",
|
|
756
756
|
class: "k-input-loading-icon",
|
|
757
757
|
key: "loading"
|