@progress/kendo-vue-dropdowns 5.3.0-dev.202410141143 → 5.3.0-develop.1

package/DropDownTree/DropDownTree.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),t=require("@progress/kendo-vue-common"),se=require("@progress/kendo-vue-popup"),ne=require("@progress/kendo-vue-intl"),O=require("@progress/kendo-vue-treeview"),oe=require("../package-metadata.js"),b=require("../common/utils.js"),ae=require("./ListNoData.js"),c=require("../messages/main.js"),le=require("@progress/kendo-vue-labels"),T=require("../common/ListFilter.js"),E=require("@progress/kendo-vue-buttons"),k=require("@progress/kendo-svg-icons"),w=require("../common/constants.js"),re=require("@progress/kendo-vue-layout"),de=require("../common/DropDownBase.js");function K(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!s.isVNode(e)}const{sizeMap:ue,roundedMap:ce}=t.kendoThemeMaps,pe="Please select a value from the list!",B=e=>e.split("_").map(i=>parseInt(i,10)),S=(e,i)=>{const{validationMessage:n,valid:o,required:a}=e;return{customError:n!==void 0,valid:!!(o!==void 0?o:!a||i),valueMissing:!i}},he=s.defineComponent({name:"KendoDropDownTree",model:{event:"changemodel"},emits:{open:null,close:null,focus:null,blur:null,change:null,filterchange:null,expandchange:null,changemodel:null,"update:modelValue":null},props:{opened:{type:Boolean,default:void 0},disabled:Boolean,dir:String,tabIndex:Number,accessKey:String,dataItems:{type:Array,default:function(){return[]}},value:{type:[Object,String,Number,Boolean],default:function(){}},modelValue:{type:[Object,String,Number,Boolean],default:function(){}},valueMap:Function,placeholder:String,dataItemKey:{type:String,required:!0},textField:{type:String,required:!0},selectField:{type:String,default:"selected"},expandField:String,subItemsField:{type:String,default:"items"},className:String,label:String,validationMessage:String,validityStyles:{type:Boolean,default:!0},valid:{type:Boolean,default:void 0},required:Boolean,name:String,id:String,ariaLabel:{type:String,default:void 0},ariaLabelledBy:String,ariaDescribedBy:String,filterable:Boolean,filter:String,loading:Boolean,popupSettings:{type:Object,default:function(){return{animate:!0,height:"200px",anchor:""}}},size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},rounded:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return[null,"flat","outline","solid"].includes(e)}},item:[String,Function,Object],header:[String,Function,Object],footer:[String,Function,Object],valueRender:[String,Function,Object],listNoData:[String,Function,Object],adaptive:{type:Boolean,default:void 0},adaptiveTitle:{type:String,default:void 0}},inject:{kendoLocalizationService:{default:null}},created(){this.observer=null,t.validatePackage(oe.packageMetadata),this.base=new de(this),this.componentGuid=t.guid(),this.anchor=t.guid()},data(){return{currentOpened:!1,focused:!1,filterState:"",currentValue:void 0,popupWidth:"200px",windowWidth:0,initialAdaptiveRenderingValues:void 0}},computed:{wrapperClass(){const{validationMessage:e,valid:i,required:n,validityStyles:o}=this.$props,a=S({validationMessage:e,valid:i,required:n},this.hasValue),d=!o||a.valid,{size:r,rounded:l,fillMode:u}=this.$props;return{"k-dropdowntree":!0,"k-picker":!0,[this.$props.className]:this.$props.className,[`k-picker-${ue[r]||r}`]:r,[`k-rounded-${ce[l]||l}`]:l,[`k-picker-${u}`]:u,"k-focus":this.focused,"k-invalid":!d,"k-loading":this.$props.loading,"k-required":n,"k-disabled":this.$props.disabled}},animationStyles(){return this.windowWidth<=w.MOBILE_SMALL_DEVICE?{top:0,width:"100%",height:"100%"}:void 0},classNameAdaptive(){return this.windowWidth<=w.MOBILE_SMALL_DEVICE?"k-adaptive-actionsheet k-actionsheet-fullscreen":"k-adaptive-actionsheet k-actionsheet-bottom"},adaptiveState(){return this.windowWidth<=w.MOBILE_MEDIUM_DEVICE&&this.$props.adaptive},isOpen(){return this.opened!==void 0?this.opened:this.currentOpened},computedValue(){return this.value!==void 0?this.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue},hasValue(){return b.isPresent(this.computedValue)},currentValueText(){return this.hasValue?b.getItemValue(this.computedValue,this.$props.textField):""}},watch:{isOpen:function(e){e&&this.value?this.initialAdaptiveRenderingValues=[...this.value]:this.initialAdaptiveRenderingValues=void 0}},mounted(){this.observer=t.canUseDOM&&window.ResizeObserver&&new ResizeObserver(this.calculateMedia),document!=null&&document.body&&this.observer&&this.observer.observe(document.body),this.elementRef=t.getRef(this,"kendoAnchor"),this.inputRef=t.getRef(this,"input"),this.selectRef=t.getRef(this,"select"),this.treeViewRef=t.getRef(this,"treeView"),this.skipFocusRef=!1,this.popupRef=t.getRef(this,"popup"),this.calculatePopupWidth()},updated(){this.inputRef=t.getRef(this,"input"),this.treeViewRef=t.getRef(this,"treeView"),this.popupRef&&this.isOpen&&this.hasValue&&this.popupRef.reposition(),this.setValidity(),this.calculatePopupWidth()},render(){let e;const i=this.$props.id||this.componentGuid,{dataItems:n,dataItemKey:o,popupSettings:a,disabled:d,placeholder:r,label:l,name:u,selectField:R,subItemsField:$,validationMessage:L,valid:q,required:F,validityStyles:P,adaptiveTitle:W}=this.$props,g=t.getTabIndex(this.$props.tabIndex,d),x=ne.provideLocalizationService(this),A=S({validationMessage:L,valid:q,required:F},this.hasValue),I=this.adaptiveState,p=this.$props.dir,N=t.templateRendering.call(this,this.item,t.getListeners.call(this)),z=t.templateRendering.call(this,this.valueRender,t.getListeners.call(this)),j=t.templateRendering.call(this,this.$props.header,t.getListeners.call(this)),_=t.templateRendering.call(this,this.$props.footer,t.getListeners.call(this)),v=t.getTemplate.call(this,{h:s.h,template:j}),y=t.getTemplate.call(this,{h:s.h,template:_}),G=t.templateRendering.call(this,this.$props.listNoData,t.getListeners.call(this)),H=s.createVNode(ae.ListNoData,null,K(e=x.toLanguageString(c.nodata,c.messages[c.nodata]))?e:{default:()=>[e]}),D=t.getTemplate.call(this,{h:s.h,defaultRendering:H,template:G}),U=s.createVNode("span",{class:"k-input-value-text"},[this.currentValueText||r]),J=t.getTemplate.call(this,{h:s.h,defaultRendering:U,template:z,additionalProps:{value:this.computedValue}}),Q=()=>[s.createVNode("div",{class:"k-actionsheet-titlebar-group k-hbox"},[s.createVNode("div",{class:"k-actionsheet-title"},[s.createVNode("div",{class:"k-text-center"},[W]),s.createVNode("div",{class:"k-actionsheet-subtitle k-text-center"},[r])]),s.createVNode("div",{class:"k-actionsheet-actions"},[s.createVNode(E.Button,{tabIndex:1,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",onClick:this.onWrapperClick,icon:"x",svgIcon:k.xIcon},null)])]),s.createVNode("div",{class:"k-actionsheet-titlebar-group k-actionsheet-filter"},[this.$props.filterable&&s.createVNode(T.ListFilter,{tabIndex:0,value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:t.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,size:h,rounded:C,fillMode:V,onFocus:this.onFocus,onBlur:this.onBlur},null)])],X=t.templateRendering.call(this,Q,t.getListeners.call(this)),Y=()=>{const m=this.base.getTemplateDef.call(this,v,s.h),M=this.base.getTemplateDef.call(this,y,s.h);return[m&&s.createVNode("div",{class:"k-list-header"},[m]),n.length>0?s.createVNode(O.TreeView,{ref:t.setRef(this,"treeView"),tabIndex:g,dataItems:n,focusIdField:o,textField:this.$props.textField,selectField:R,expandField:this.$props.expandField,childrenField:$,expandIcons:!0,onItemclick:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,size:"large",item:N},null):D,M&&s.createVNode("div",{class:"k-list-footer"},[M])]},Z=t.templateRendering.call(this,Y,t.getListeners.call(this)),ee=function(){return s.createVNode(re.ActionSheet,{expand:this.isOpen,animation:!0,animationStyles:this.animationStyles,className:this.classNameAdaptive,header:X,content:Z,contentClassName:"!k-overflow-hidden",onClose:this.onWrapperClick,navigatableElements:["input.k-input-inner",".k-actionsheet-actions > button"]},null)},te=!P||A.valid,{size:h,rounded:C,fillMode:V}=this.$props,ie=function(){return s.createVNode("span",{class:this.wrapperClass,tabindex:g,accesskey:this.$props.accessKey,id:i,dir:p,ref:t.setRef(this,"kendoAnchor"),onKeydown:this.onWrapperKeyDown,onClick:this.onWrapperClick,onMousedown:this.onWrapperMouseDown,onFocusin:this.onFocus,onFocusout:this.onBlur,role:"combobox","aria-haspopup":"tree","aria-expanded":this.isOpen,"aria-disabled":d,"aria-label":l||this.$props.ariaLabel,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-required":F},[s.createVNode("span",{class:"k-input-inner"},[J]),this.$props.loading&&s.createVNode(t.Icon,{class:"k-input-loading-icon",name:"loading"},null),this.hasValue&&!d&&s.createVNode("span",{onClick:this.onClear,class:"k-clear-value",title:x.toLanguageString(c.clear,c.messages[c.clear]),role:"button",tabindex:-1,onMousedown:m=>m.preventDefault()},[s.createVNode(t.Icon,{name:"x",icon:k.xIcon},null)]),s.createVNode(E.Button,{tabIndex:-1,type:"button","aria-label":"select",class:"k-input-button",size:h,fillMode:V,themeColor:"base",rounded:null,icon:"caret-alt-down",svgIcon:k.caretAltDownIcon},null),s.createVNode("select",{name:u,ref:t.setRef(this,"select"),tabindex:-1,"aria-hidden":!0,title:l,style:{opacity:0,width:1,border:0,zIndex:-1,position:"absolute",left:"50%"}},[s.createVNode("option",{value:this.$props.valueMap?this.$props.valueMap.call(void 0,this.computedValue):this.computedValue},null)]),!I&&s.createVNode(se.Popup,{style:{width:this.popupWidth,direction:p},ref:t.setRef(this,"popup"),class:t.classNames(a.className,{"k-rtl":p==="rtl"}),popupClass:t.classNames(a.popupClass,"k-dropdowntree-popup","popup-"+this.componentGuid),animate:a.animate,anchor:this.anchor,show:this.isOpen,onOpen:this.onPopupOpened,onClose:this.onPopupClosed,appendTo:a.appendTo},{default:()=>[this.$props.filterable&&s.createVNode(T.ListFilter,{value:this.$props.filter===void 0?this.filterState:this.$props.filter,ref:t.setRef(this,"input"),onChange:this.onFilterChange,onKeydown:this.onInputKeyDown,onBlur:this.onBlur,size:h,rounded:C,fillMode:V},null),v&&s.createVNode("div",{class:"k-list-header"},[v]),n.length>0?s.createVNode(O.TreeView,{ref:t.setRef(this,"treeView"),tabIndex:g,dataItems:n,focusIdField:o,textField:this.$props.textField,selectField:R,expandField:this.$props.expandField,childrenField:$,expandIcons:!0,onItemclick:this.onChange,onExpandchange:this.onExpand,onFocus:this.onFocus,onBlur:this.onBlur,onKeydown:this.onWrapperKeyDown,size:h,item:N},null):D,y&&s.createVNode("div",{class:"k-list-footer"},[y])]})])},f=[s.h(ie.call(this),{...this.$attrs}),I&&ee.call(this)];return l?s.createVNode(le.FloatingLabel,{label:l,editorValue:this.currentValueText,editorPlaceholder:r,editorValid:te,editorDisabled:d,editorId:i,focused:this.focused,dir:p},K(f)?f:{default:()=>[f]}):f},methods:{calculateMedia(e){for(let i of e)this.windowWidth=i.target.clientWidth},calculatePopupWidth(){this.elementRef&&(this.popupWidth=this.popupSettings.width!==void 0?this.popupSettings.width:this.elementRef.offsetWidth+"px")},focus(){this.$el&&this.$el.focus()},setValidity(){if(this.selectRef&&this.selectRef.setCustomValidity){const{validationMessage:e,valid:i,required:n}=this.$props,o=S({validationMessage:e,valid:i,required:n},this.hasValue);this.selectRef.setCustomValidity(o.valid?"":this.validationMessage===void 0?pe:this.validationMessage)}},openPopup(e){if(!this.isOpen){const i={...e};this.$emit("open",i),this.currentOpened=!0}},closePopup(e){if(this.isOpen){const i={...e};this.$emit("close",i),this.currentOpened=!1}},onWrapperClick(e){if(this.onFilterChange({...e,target:{value:""}}),!e.defaultPrevented&&this.$el){this.focused=!0;const i={event:e,target:this};(this.isOpen?this.closePopup:this.openPopup)(i)}},switchFocus(e){this.skipFocusRef=!0,e(),window.setTimeout(()=>this.skipFocusRef=!1,0)},onWrapperKeyDown(e){const{keyCode:i,altKey:n}=e,o=this.treeViewRef&&this.treeViewRef.$el,a=this.inputRef&&this.inputRef.input;if(this.$props.disabled||e.defaultPrevented&&a===e.target)return;const d={event:e,target:this};if(this.isOpen)if(i===t.Keys.esc||n&&i===t.Keys.up)e.preventDefault(),this.closePopup(d);else if(o&&o.querySelector(".k-focus")&&(i===t.Keys.up||i===t.Keys.down||i===t.Keys.left||i===t.Keys.right||i===t.Keys.home||i===t.Keys.end)){if(i===t.Keys.up&&a){const r=Array.from(o.querySelectorAll(".k-treeview-item")),l=[...r].reverse().find(u=>!!(u&&u.querySelector(".k-focus")));if(l&&r.indexOf(l)===0)return this.switchFocus(()=>{this.focusElement(a)})}this.switchFocus(t.noop)}else i===t.Keys.down&&this.switchFocus(()=>{this.focusElement(a||o)});else n&&i===t.Keys.down&&(e.preventDefault(),this.openPopup(d))},onInputKeyDown(e){const{keyCode:i,altKey:n}=e;if(i===t.Keys.esc)this.onWrapperClick(e);else if(n||i!==t.Keys.up&&i!==t.Keys.down)return;e.preventDefault(),this.switchFocus(i===t.Keys.up?()=>{this.focusElement(this.elementRef)}:()=>{this.focusElement(this.treeViewRef&&this.treeViewRef.$el)})},focusElement(e){e&&this.switchFocus(()=>e.focus())},onPopupOpened(){if(!this.focused&&this.isOpen&&!this.currentOpened)this.closePopup({target:this});else if(this.$props.filterable){const e=this.inputRef&&this.inputRef.input;this.focusElement(e)}else this.focusElement(this.treeViewRef&&this.treeViewRef.$el)},onPopupClosed(){this.focused&&this.focusElement(this.elementRef)},onFocus(e){if(!this.focused&&!this.skipFocusRef){this.focused=!0;const i={event:e,target:this};this.$emit("focus",i)}},onBlur(e){if(this.focused&&!this.skipFocusRef){this.focused=!1;const i={event:e,target:this},n={...i};(!e.relatedTarget||!e.relatedTarget.closest(".popup-"+this.componentGuid))&&!this.adaptiveState&&(this.$emit("blur",n),this.closePopup(i))}},onWrapperMouseDown(){this.focused&&this.switchFocus(t.noop)},changeValue(e,i,n){const o={value:i,level:n?B(n):[],...e};this.$emit("changemodel",i),this.$emit("update:modelValue",i),this.$emit("change",o),this.currentValue=i},onChange(e){if(b.areSame(e.item,this.computedValue,this.dataItemKey)||!this.$el)return;const{item:i,itemHierarchicalIndex:n,event:o}=e,a={event:o,target:this};this.changeValue(a,i,n),this.closePopup(a)},onClear(e){const i={event:e,target:this};this.changeValue(i,null),this.closePopup(i),e.preventDefault()},onExpand(e){const{item:i,itemHierarchicalIndex:n,event:o}=e,a={level:B(n),item:i,event:o,target:this};this.$emit("expandchange",a)},onFilterChange(e){const n={filter:{field:this.$props.textField,operator:"contains",value:e.target.value},event:e,target:this};this.$emit("filterchange",n),this.$props.filter===void 0&&(this.filterState=e.target.value)}}});exports.DropDownTree=he;