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

A vue based PC component library

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){let{emit:t,slots:I}=e,a=(0,_vue.inject)("$xeModal",null),u=(0,_vue.inject)("$xeDrawer",null),i=(0,_vue.inject)("$xeTable",null),n=(0,_vue.inject)("$xeForm",null),r=(0,_vue.inject)("xeFormItemInfo",null);var l=_xeUtils.default.uniqueId();let P=(0,_ui.useSize)(y).computeSize,T=(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:T},A=(0,_vue.computed)(()=>{var e=y.readonly;return null===e?!!n&&n.props.readonly:e}),k=(0,_vue.computed)(()=>{var e=y.disabled;return null===e?!!n&&n.props.disabled:e}),w=(0,_vue.computed)(()=>{var e=y.transfer;if(null===e){var l=(0,_ui.getConfig)().select.transfer;if(_xeUtils.default.isBoolean(l))return l;if(i||a||u||n)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)(()=>_.value),C=(0,_vue.computed)(()=>c.value.label||"label"),_=(0,_vue.computed)(()=>c.value.value||"value"),E=(0,_vue.computed)(()=>c.value.children||"children"),d=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().cascader.remoteConfig,y.remoteConfig)),L=(0,_vue.computed)(()=>{let{modelValue:e,lazyOptions:a}=y,t=v.fullNodeMaps,u=_.value,i=C.value;return(_xeUtils.default.eqNull(e)?[]:_xeUtils.default.isArray(e)?e:[e]).map(l=>{var e=t[l];if(e)return e.item[i];if(a){e=a.find(e=>e[u]===l);if(e)return e[i]}return l}).join(", ")}),j=(0,_vue.computed)(()=>{var{height:e,width:l}=z.value,a={};return l&&(a.width=(0,_dom.toCssUnit)(l)),e&&(a.height=(0,_dom.toCssUnit)(e),a.maxHeight=(0,_dom.toCssUnit)(e)),a}),D={},O={xID:l,props:y,context:e,reactData:q,internalData:v,getRefMaps:()=>s,getComputeMaps:()=>D},f=(e,l,a)=>{t(e,(0,_ui.createEvent)(a,{$cascader:O},l))},F=e=>{t("update:modelValue",e)};l={dispatchEvent:f};let m=()=>{var{transform:e,options:l}=y;let o=p.value;var a=E.value;let s=_.value,c={},d={},t=(e,l,a,t,u,i)=>{let n=(e=>{e=e[p.value];return e?encodeURIComponent(e):""})(e);n=n||getOptUniqueId(),d[n]&&(0,_log.errLog)("vxe.error.repeatKey",["[tree-select] "+o,n]),d[n]=!0;var r=e[s];c[r]&&(0,_log.errLog)("vxe.error.repeatKey",["[tree-select] "+s,r]),c[r]={item:e,index:l,items:a,parent:u,nodes:i}};l&&(e?l.forEach((e,l,a)=>{t(e,l,a,0,null,[])}):_xeUtils.default.eachTree(l,t,{children:a})),v.fullOptionList=l||[],v.fullNodeMaps=c},M=()=>{var e=y.zIndex;e?q.panelIndex=e:q.panelIndex<(0,_utils.getLastZIndex)()&&(q.panelIndex=(0,_utils.nextZIndex)())},g=()=>{let a=y.placement,t=q.panelIndex,u=T.value,i=U.value,n=w.value,r=z.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(u,i,{placement:r.placement||a,defaultPlacement:r.defaultPlacement,teleportTo:n}),l=Object.assign(e.style,{zIndex:t});q.panelStyle=l,q.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},h=()=>{var{loading:e,remote:l,filterable:a}=y,t=v.fullOptionList,u=k.value,i=d.value;e||u||(clearTimeout(v.hpTimeout),q.initialized||(q.initialized=!0),q.isActivated=!0,q.isAniVisible=!0,a&&l&&i.enabled&&i.autoLoad&&!t.length&&ae(),setTimeout(()=>{q.visiblePanel=!0,W()},10),M(),g())},x=()=>{q.visiblePanel=!1,v.hpTimeout=setTimeout(()=>{q.isAniVisible=!1},350)},b=(e,l,a)=>{l=_xeUtils.default.isArray(l)?l.map(_util.deNodeValue):(0,_util.deNodeValue)(l);F(l),l!==y.modelValue&&(f("change",{value:l,node:a,option:a},e),n)&&r&&n.triggerItemEvent(e,r.itemConfig.field,l)},$=(e,l)=>{b(e,l,null),f("clear",{value:l},e)},R=(e,l)=>{$(l,null),x()},K=e=>{let a=e.$event,{multiple:l,autoClose:t}=y;e=o.value;l&&e&&e.setAllCheckboxNode(!0).then(({checkNodeKeys:e,checkNodes:l})=>{b(a,e,l[0]),f("all-change",{value:e},a),t&&x()})},H=e=>{e=e.$event;let{multiple:l,autoClose:a}=y;var t,u=o.value;u&&(t=l?[]:null,u.clearCheckboxNode().then(()=>{a&&x()}),b(e,t,null),f("clear",{value:t},e))},Z=e=>{var l=q.visiblePanel;k.value||l&&(l=U.value,((0,_dom.getEventTargetNode)(e,l).flag?g:x)())},G=e=>{var l,a,t=q.visiblePanel;k.value||(l=T.value,a=U.value,q.isActivated=(0,_dom.getEventTargetNode)(e,l).flag||(0,_dom.getEventTargetNode)(e,a).flag,t&&!q.isActivated&&x())},J=()=>{var{visiblePanel:e,isActivated:l}=q;e&&x(),l&&(q.isActivated=!1),(e||l)&&(e=V.value)&&e.blur()},Q=()=>{var e=q.visiblePanel;e&&g()},W=()=>{y.filterable&&(0,_vue.nextTick)(()=>{var e=B.value;e&&e.focus()})},X=e=>{k.value||q.visiblePanel||(q.triggerFocusPanel=!0,h(),setTimeout(()=>{q.triggerFocusPanel=!1},150)),f("focus",{},e)},Y=e=>{S(e),f("click",{},e)},ee=e=>{q.isActivated=!1,f("blur",{},e)},le=e=>{q.searchValue=e},ae=()=>{var{modelValue:e,remote:l,remoteMethod:a}=y,t=q.searchValue,u=d.value,a=u.queryMethod||a;l&&a&&u.enabled&&(q.searchLoading=!0,Promise.resolve(a({$cascader:O,searchValue:t,value:e})).then(()=>(0,_vue.nextTick)()).catch(()=>(0,_vue.nextTick)()).finally(()=>{q.searchLoading=!1}))},S=e=>{e=e.$event;e.preventDefault(),q.triggerFocusPanel?q.triggerFocusPanel=!1:(q.visiblePanel?x:h)()};Object.assign(O,l,{});return(0,_vue.watch)(()=>y.options,()=>{m()}),m(),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(O,"mousewheel",Z),_ui.globalEvents.on(O,"mousedown",G),_ui.globalEvents.on(O,"blur",J),_ui.globalEvents.on(O,"resize",Q)}),(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:l,multiple:a,loading:t,filterable:u,showTotalButoon:i,showCheckedButoon:n,showClearButton:r}=y,{initialized:o,isActivated:s,isAniVisible:c,visiblePanel:d,searchValue:v}=q,p=P.value,_=k.value,f=L.value,m=w.value,g=A.value,h=j.value,x=I.header,b=I.footer;let C=I.prefix;var E=z.value.className;return g?(0,_vue.h)("div",{ref:T,class:["vxe-cascader--readonly",e]},[(0,_vue.h)("span",{class:"vxe-cascader-label"},f)]):(g=_xeUtils.default.eqNull(l)?[]:_xeUtils.default.isArray(l)?l:[l],(0,_vue.h)("div",{ref:T,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":t,"is--active":s}]},[(0,_vue.h)(_input.default,{ref:V,clearable:y.clearable,placeholder:t?(0,_ui.getI18n)("vxe.select.loadingText"):y.placeholder,editable:!1,disabled:_,type:"text",prefixIcon:y.prefixIcon,suffixIcon:t?(0,_ui.getIcon)().TREE_SELECT_LOADED:d?(0,_ui.getIcon)().TREE_SELECT_OPEN:(0,_ui.getIcon)().TREE_SELECT_CLOSE,modelValue:t?"":f,title:f,onClear:R,onClick:Y,onFocus:X,onBlur:ee,onSuffixClick:S},C?{prefix:()=>C({})}:{}),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!m||!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":m,"ani--leave":!t&&c,"ani--enter":!t&&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":le})]):(0,_ui.renderEmptyElement)(O),i||n&&a||r||x?(0,_vue.h)("div",{class:"vxe-cascader--panel-header"},x?x({}):[(0,_vue.h)("div",{class:"vxe-cascader--header-button"},[i?(0,_vue.h)("div",{class:"vxe-cascader--header-total"},(0,_ui.getI18n)("vxe.cascader.total",[g.length])):(0,_ui.renderEmptyElement)(O),(0,_vue.h)("div",{class:"vxe-cascader--header-btns"},[n&&a?(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.cascader.allChecked"),mode:"text",onClick:K}):(0,_ui.renderEmptyElement)(O),r?(0,_vue.h)(_button.default,{content:(0,_ui.getI18n)("vxe.cascader.clearChecked"),mode:"text",onClick:H}):(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()}});