vxe-pc-ui/lib/cascader/src/cascader.min.js

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_util=require("../../tree/src/util"),_log=require("../../ui/src/log"),_xeUtils=_interopRequireDefault(require("xe-utils")),_input=_interopRequireDefault(require("../../input/src/input")),_button=_interopRequireDefault(require("../../button/src/button"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function getOptUniqueId(){return _xeUtils.default.uniqueId("node_")}function createInternalData(){return{fullOptionList:[],fullNodeMaps:{}}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeCascader",props:{modelValue:[String,Number,Array],clearable:Boolean,placeholder:{type:String,default:()=>_xeUtils.default.eqNull((0,_ui.getConfig)().cascader.placeholder)?(0,_ui.getI18n)("vxe.base.pleaseSelect"):(0,_ui.getConfig)().cascader.placeholder},readonly:{type:Boolean,default:null},loading:Boolean,disabled:{type:Boolean,default:null},filterable:Boolean,filterConfig:Object,multiple:Boolean,className:[String,Function],prefixIcon:String,placement:String,transform:Boolean,lazyOptions:Array,options:Array,optionProps:Object,zIndex:Number,size:{type:String,default:()=>(0,_ui.getConfig)().cascader.size||(0,_ui.getConfig)().size},remote:Boolean,remoteConfig:Function,popupConfig:Object,autoClose:{type:Boolean,default:()=>(0,_ui.getConfig)().cascader.autoClose},showTotalButoon:{type:Boolean,default:()=>(0,_ui.getConfig)().cascader.showTotalButoon},showCheckedButoon:{type:Boolean,default:()=>(0,_ui.getConfig)().cascader.showCheckedButoon},showClearButton:{type:Boolean,default:()=>(0,_ui.getConfig)().cascader.showClearButton},transfer:{type:Boolean,default:null},remoteMethod:Function},emits:["update:modelValue","change","all-change","clear","blur","focus","click","node-click"],setup(y,e){const{emit:u,slots:I}=e,t=(0,_vue.inject)("$xeModal",null),l=(0,_vue.inject)("$xeDrawer",null),n=(0,_vue.inject)("$xeTable",null),i=(0,_vue.inject)("$xeForm",null),r=(0,_vue.inject)("xeFormItemInfo",null);var a=_xeUtils.default.uniqueId();const T=(0,_ui.useSize)(y)["computeSize"],P=(0,_vue.ref)(),V=(0,_vue.ref)(),B=(0,_vue.ref)(),N=(0,_vue.ref)(),U=(0,_vue.ref)(),o=(0,_vue.ref)(),q=(0,_vue.reactive)({initialized:!1,searchValue:"",searchLoading:!1,panelIndex:0,panelStyle:{},panelPlacement:null,triggerFocusPanel:!1,visiblePanel:!1,isAniVisible:!1,isActivated:!1}),v=createInternalData(),s={refElem:P},A=(0,_vue.computed)(()=>{var e=y["readonly"];return null===e?!!i&&i.props.readonly:e}),k=(0,_vue.computed)(()=>{var e=y["disabled"];return null===e?!!i&&i.props.disabled:e}),w=(0,_vue.computed)(()=>{var e=y["transfer"];if(null===e){var a=(0,_ui.getConfig)().select.transfer;if(_xeUtils.default.isBoolean(a))return a;if(n||t||l||i)return!0}return e}),z=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().cascader.popupConfig,y.popupConfig)),c=(0,_vue.computed)(()=>y.optionProps||{}),p=(0,_vue.computed)(()=>{return _.value}),C=(0,_vue.computed)(()=>{return c.value.label||"label"}),_=(0,_vue.computed)(()=>{return c.value.value||"value"}),E=(0,_vue.computed)(()=>{return c.value.children||"children"}),d=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().cascader.remoteConfig,y.remoteConfig)),L=(0,_vue.computed)(()=>{const{modelValue:e,lazyOptions:t}=y,l=v["fullNodeMaps"],u=_.value,n=C.value;return(_xeUtils.default.eqNull(e)?[]:_xeUtils.default.isArray(e)?e:[e]).map(a=>{var e=l[a];if(e)return e.item[n];if(t){e=t.find(e=>e[u]===a);if(e)return e[n]}return a}).join(", ")}),j=(0,_vue.computed)(()=>{var{height:e,width:a}=z.value,t={};return a&&(t.width=(0,_dom.toCssUnit)(a)),e&&(t.height=(0,_dom.toCssUnit)(e),t.maxHeight=(0,_dom.toCssUnit)(e)),t}),D={},O={xID:a,props:y,context:e,reactData:q,internalData:v,getRefMaps:()=>s,getComputeMaps:()=>D},f=(e,a,t)=>{u(e,(0,_ui.createEvent)(t,{$cascader:O},a))};a={dispatchEvent:f};const g=()=>{var{transform:e,options:a}=y;const o=p.value;var t=E.value;const s=_.value,c={},d={},l=(e,a,t,l,u,n)=>{let i=(e=>{e=e[p.value];return e?encodeURIComponent(e):""})(e);i=i||getOptUniqueId(),d[i]&&(0,_log.errLog)("vxe.error.repeatKey",["[tree-select] "+o,i]),d[i]=!0;var r=e[s];c[r]&&(0,_log.errLog)("vxe.error.repeatKey",["[tree-select] "+s,r]),c[r]={item:e,index:a,items:t,parent:u,nodes:n}};a&&(e?a.forEach((e,a,t)=>{l(e,a,t,0,null,[])}):_xeUtils.default.eachTree(a,l,{children:t})),v.fullOptionList=a||[],v.fullNodeMaps=c},m=()=>{const t=y["placement"],l=q["panelIndex"],u=P.value,n=U.value,i=w.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(u,n,{placement:t,teleportTo:i}),a=Object.assign(e.style,{zIndex:l});q.panelStyle=a,q.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},h=()=>{var{loading:e,remote:a,filterable:t}=y,l=v["fullOptionList"],u=k.value,n=d.value;e||u||(clearTimeout(v.hpTimeout),q.initialized||(q.initialized=!0),q.isActivated=!0,q.isAniVisible=!0,t&&a&&n.enabled&&n.autoLoad&&!l.length&&({modelValue:e,remote:u,remoteMethod:t}=y,a=q["searchValue"],n=d.value,l=n.queryMethod||t,u)&&l&&n.enabled&&(q.searchLoading=!0,Promise.resolve(l({$cascader:O,searchValue:a,value:e})).then(()=>(0,_vue.nextTick)()).catch(()=>(0,_vue.nextTick)()).finally(()=>{q.searchLoading=!1})),setTimeout(()=>{q.visiblePanel=!0,y.filterable&&(0,_vue.nextTick)(()=>{var e=B.value;e&&e.focus()})},10),(t=y.zIndex)?q.panelIndex=t:q.panelIndex<(0,_utils.getLastZIndex)()&&(q.panelIndex=(0,_utils.nextZIndex)()),m())},x=()=>{q.visiblePanel=!1,v.hpTimeout=setTimeout(()=>{q.isAniVisible=!1},350)},b=(e,a,t)=>{var l,a=_xeUtils.default.isArray(a)?a.map(_util.deNodeValue):(0,_util.deNodeValue)(a);l=a,u("update:modelValue",l),a!==y.modelValue&&(f("change",{value:a,node:t,option:t},e),i)&&r&&i.triggerItemEvent(e,r.itemConfig.field,a)},F=(e,a)=>{b(e,a,null),f("clear",{value:a},e)},M=(e,a)=>{F(a,null),x()},$=e=>{const t=e["$event"],{multiple:a,autoClose:l}=y;e=o.value;a&&e&&e.setAllCheckboxNode(!0).then(({checkNodeKeys:e,checkNodes:a})=>{b(t,e,a[0]),f("all-change",{value:e},t),l&&x()})},R=e=>{e=e.$event;const{multiple:a,autoClose:t}=y;var l,u=o.value;u&&(l=a?[]:null,u.clearCheckboxNode().then(()=>{t&&x()}),b(e,l,null),f("clear",{value:l},e))},K=e=>{var a=q["visiblePanel"];k.value||a&&(a=U.value,((0,_dom.getEventTargetNode)(e,a).flag?m:x)())},H=e=>{var a,t,l=q["visiblePanel"];k.value||(a=P.value,t=U.value,q.isActivated=(0,_dom.getEventTargetNode)(e,a).flag||(0,_dom.getEventTargetNode)(e,t).flag,l&&!q.isActivated&&x())},Z=()=>{var{visiblePanel:e,isActivated:a}=q;e&&x(),a&&(q.isActivated=!1),(e||a)&&(e=V.value)&&e.blur()},G=()=>{var e=q["visiblePanel"];e&&m()},J=e=>{k.value||q.visiblePanel||(q.triggerFocusPanel=!0,h(),setTimeout(()=>{q.triggerFocusPanel=!1},150)),f("focus",{},e)},Q=e=>{S(e),f("click",{},e)},W=e=>{q.isActivated=!1,f("blur",{},e)},X=e=>{q.searchValue=e},S=e=>{e=e.$event;e.preventDefault(),q.triggerFocusPanel?q.triggerFocusPanel=!1:(q.visiblePanel?x:h)()};Object.assign(O,a,{});return(0,_vue.watch)(()=>y.options,()=>{g()}),g(),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(O,"mousewheel",K),_ui.globalEvents.on(O,"mousedown",H),_ui.globalEvents.on(O,"blur",Z),_ui.globalEvents.on(O,"resize",G)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(O,"mousewheel"),_ui.globalEvents.off(O,"mousedown"),_ui.globalEvents.off(O,"blur"),_ui.globalEvents.off(O,"resize"),_xeUtils.default.assign(v,createInternalData())}),(0,_vue.provide)("$xeCascader",O),O.renderVN=()=>{var{className:e,modelValue:a,multiple:t,loading:l,filterable:u,showTotalButoon:n,showCheckedButoon:i,showClearButton:r}=y,{initialized:o,isActivated:s,isAniVisible:c,visiblePanel:d,searchValue:v}=q,p=T.value,_=k.value,f=L.value,g=w.value,m=A.value,h=j.value,x=I.header,b=I.footer;const C=I.prefix;var E=z.value.className;return m?(0,_vue.h)("div",{ref:P,class:["vxe-cascader--readonly",e]},[(0,_vue.h)("span",{class:"vxe-cascader-label"},f)]):(m=_xeUtils.default.eqNull(a)?[]:_xeUtils.default.isArray(a)?a:[a],(0,_vue.h)("div",{ref:P,class:["vxe-cascader",e?_xeUtils.default.isFunction(e)?e({$cascader:O}):e:"",{["size--"+p]:p,"is--filterable":u,"is--visible":d,"is--disabled":_,"is--loading":l,"is--active":s}]},[(0,_vue.h)(_input.default,{ref:V,clearable:y.clearable,placeholder:l?(0,_ui.getI18n)("vxe.select.loadingText"):y.placeholder,editable:!1,disabled:_,type:"text",prefixIcon:y.prefixIcon,suffixIcon:l?(0,_ui.getIcon)().TREE_SELECT_LOADED:d?(0,_ui.getIcon)().TREE_SELECT_OPEN:(0,_ui.getIcon)().TREE_SELECT_CLOSE,modelValue:l?"":f,title:f,onClear:M,onClick:Q,onFocus:J,onBlur:W,onSuffixClick:S},C?{prefix:()=>C({})}:{}),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!g||!o},[(0,_vue.h)("div",{ref:U,class:["vxe-table--ignore-clear vxe-cascader--panel",E?_xeUtils.default.isFunction(E)?E({$cascader:O}):E:"",{["size--"+p]:p,"is--transfer":g,"ani--leave":!l&&c,"ani--enter":!l&&d}],placement:q.panelPlacement,style:q.panelStyle},o?[(0,_vue.h)("div",{class:"vxe-cascader--panel-wrapper"},[u?(0,_vue.h)("div",{class:"vxe-cascader--panel-search"},[(0,_vue.h)(_input.default,{ref:B,class:"vxe-cascader-search--input",modelValue:v,clearable:!0,disabled:!1,readonly:!1,placeholder:(0,_ui.getI18n)("vxe.cascader.search"),prefixIcon:(0,_ui.getIcon)().INPUT_SEARCH,"onUpdate:modelValue":X})]):(0,_ui.renderEmptyElement)(O),n||i&&t||r||x?(0,_vue.h)("div",{class:"vxe-cascader--panel-header"},x?x({}):[(0,_vue.h)("div",{class:"vxe-cascader--header-button"},[n?(0,_vue.h)("div",{class:"vxe-cascader--header-total"},(0,_ui.getI18n)("vxe.cascader.total",[m.length])):(0,_ui.renderEmptyElement)(O),(0,_vue.h)("div",{class:"vxe-cascader--header-btns"},[i&&t?(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.cascader.allChecked"),mode:"text",onClick:$}):(0,_ui.renderEmptyElement)(O),r?(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.cascader.clearChecked"),mode:"text",onClick:R}):(0,_ui.renderEmptyElement)(O)])])]):(0,_ui.renderEmptyElement)(O),(0,_vue.h)("div",{class:"vxe-cascader--panel-body"},[(0,_vue.h)("div",{ref:N,class:"vxe-cascader-tree--wrapper",style:h},[])]),b?(0,_vue.h)("div",{class:"vxe-cascader--panel-footer"},b({})):(0,_ui.renderEmptyElement)(O)])]:[])])]))},O},render(){return this.renderVN()}});