vxe-pc-ui/lib/table-select/src/table-select.min.js

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0,exports.getRowUniqueId=getRowUniqueId;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_vn=require("../../ui/src/vn"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_input=_interopRequireDefault(require("../../input/src/input"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function getRowUniqueId(){return _xeUtils.default.uniqueId("row_")}function createInternalData(){return{fullRowMaps:{}}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTableSelect",props:{modelValue:[String,Number,Array],clearable:Boolean,placeholder:{type:String,default:()=>_xeUtils.default.eqNull((0,_ui.getConfig)().tableSelect.placeholder)?(0,_ui.getI18n)("vxe.base.pleaseSelect"):(0,_ui.getConfig)().tableSelect.placeholder},readonly:{type:Boolean,default:null},loading:Boolean,disabled:{type:Boolean,default:null},multiple:Boolean,className:[String,Function],prefixIcon:String,placement:String,columns:Array,options:Array,optionProps:Object,lazyOptions:Array,zIndex:Number,size:{type:String,default:()=>(0,_ui.getConfig)().tableSelect.size||(0,_ui.getConfig)().size},popupConfig:Object,gridConfig:Object,transfer:{type:Boolean,default:null}},emits:["update:modelValue","change","clear","blur","focus","click","form-submit","form-reset","form-collapse","page-change"],setup(h,e){let{emit:a,slots:C}=e,y=_ui.VxeUI.getComponent("vxe-grid"),t=(0,_vue.inject)("$xeModal",null),i=(0,_vue.inject)("$xeDrawer",null),$=(0,_vue.inject)("$xeTable",null),u=(0,_vue.inject)("$xeForm",null),n=(0,_vue.inject)("xeFormItemInfo",null);var l=_xeUtils.default.uniqueId();let V=(0,_ui.useSize)(h).computeSize,E=(0,_vue.ref)(),T=(0,_vue.ref)(),L=(0,_vue.ref)(),I=(0,_vue.ref)(),w=(0,_vue.ref)(),S=(0,_vue.reactive)({initialized:!1,tableColumns:[],fullOptionList:[],panelIndex:0,panelStyle:{},panelPlacement:null,triggerFocusPanel:!1,visiblePanel:!1,isAniVisible:!1,isActivated:!1}),s=createInternalData(),N={refElem:E},k=(0,_vue.computed)(()=>{var e=h.readonly;return null===e?!!u&&u.props.readonly:e}),U=(0,_vue.computed)(()=>{var e=h.disabled;return null===e?!!u&&u.props.disabled:e}),P=(0,_vue.computed)(()=>{var e=h.transfer,l=j.value;if(_xeUtils.default.isBoolean(l.transfer))return l.transfer;if(null===e){l=(0,_ui.getConfig)().tableSelect.transfer;if(_xeUtils.default.isBoolean(l))return l;if($||t||i||u)return!0}return e}),r=(0,_vue.computed)(()=>h.optionProps||{}),O=(0,_vue.computed)(()=>{var e=c.value;return Object.assign({},e.rowConfig,{isCurrent:!0})}),v=(0,_vue.computed)(()=>O.value.keyField||"_X_ROW_KEY"),F=(0,_vue.computed)(()=>r.value.label||"label"),d=(0,_vue.computed)(()=>r.value.value||"value"),j=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tableSelect.popupConfig,h.popupConfig)),c=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tableSelect.gridConfig,h.gridConfig,{data:void 0})),B=(0,_vue.computed)(()=>{var e=c.value;let{pagerConfig:i,proxyConfig:l}=e;if(l){var a=l.ajax;if(a&&a.query){var u=_xeUtils.default.clone(l,!0);let t=a.query;if(t){let a=l.response||l.props||{};Object.assign(u.ajax,{query(e,...l){return Promise.resolve(t(e,...l)).then(e=>{let l=[];var t;return l=i?(t=a.result,(_xeUtils.default.isFunction(t)?t({data:e,$table:null,$grid:null,$gantt:null}):_xeUtils.default.get(e,t||"result"))||[]):((t=a.list)?_xeUtils.default.isFunction(t)?t({data:e,$table:null,$grid:null,$gantt:null}):_xeUtils.default.get(e,t):e)||[],g(l||[]),e})}})}return Object.assign({},e,{proxyConfig:u})}}return e}),D=(0,_vue.computed)(()=>{let{modelValue:e,lazyOptions:t}=h;var l=S.fullOptionList;let a=s.fullRowMaps,i=d.value,u=F.value;return l?(_xeUtils.default.isArray(e)?e:[e]).map(l=>{var e=a[l];if(e)return e.item[u];if(t){e=t.find(e=>e[i]===l);if(e)return e[u]}return l}).join(", "):""}),M=(0,_vue.computed)(()=>{var{height:e,width:l}=j.value,t={};return l&&(t.width=(0,_dom.toCssUnit)(l)),e&&(t.height=(0,_dom.toCssUnit)(e)),t}),K={},q={xID:l,props:h,context:e,reactData:S,getRefMaps:()=>N,getComputeMaps:()=>K};let A={},o=(["form-submit","form-reset","form-collapse","page-change"].forEach(l=>{A[(0,_vn.getOnName)(_xeUtils.default.camelCase(l))]=e=>{o(l,e,e.$event)}}),(e,l,t)=>{a(e,(0,_ui.createEvent)(t,{$tableSelect:q},l))}),Z=e=>{a("update:modelValue",e)};l={dispatchEvent:o};let W=e=>{let l=s.fullRowMaps,t=[];return(_xeUtils.default.eqNull(e)?[]:_xeUtils.default.isArray(e)?e:[e]).forEach(e=>{e=l[e];e&&t.push(e.item)}),t},p=t=>{let a=h.multiple;(0,_vue.nextTick)(()=>{var e,l=w.value;l&&(e=W(t)).length&&(a?l.setCheckboxRow(e,!0):l.setRadioRow(e[0]))})},f=e=>{if(e&&e.length){var i=h.multiple;let l=[],t=!1,a=!1;e.forEach(e=>{t||"radio"!==e.type?a||"checkbox"!==e.type||(a=!0):t=!0,l.push(e)}),i?a||l.unshift({type:"checkbox",width:70}):t||l.unshift({type:"radio",width:70}),S.tableColumns=l}},g=e=>{var l=h.options;let u=v.value,n=d.value;var{treeConfig:t,pagerConfig:a}=c.value;let r={},o={};t||_xeUtils.default.arrayEach(e||l||[],(e,l,t)=>{let a=(e=>{e=e[v.value];return e?encodeURIComponent(e):""})(e);a=a||getRowUniqueId(),o[a]&&(0,_log.errLog)("vxe.error.repeatKey",["[table-select] "+u,a]),o[a]=!0;var i=e[n];r[i]&&(0,_log.errLog)("vxe.error.repeatKey",["[table-select] "+n,i]),r[i]={item:e,index:l,items:t,parent:null,nodes:[]}}),S.fullOptionList=e||l||[],s.fullRowMaps=a?Object.assign({},s.fullRowMaps,r):r,p(h.modelValue)},X=()=>{var e=j.value.zIndex||h.zIndex;e?S.panelIndex=_xeUtils.default.toNumber(e):S.panelIndex<(0,_utils.getLastZIndex)()&&(S.panelIndex=(0,_utils.nextZIndex)())},_=()=>{let t=h.placement,a=S.panelIndex,i=E.value,u=I.value,n=P.value,r=j.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(i,u,{placement:r.placement||t,defaultPlacement:r.defaultPlacement,teleportTo:n}),l=Object.assign(e.style,{zIndex:a});S.panelStyle=l,S.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},m=()=>{var e=h.loading,l=U.value;e||l||(s.vpTimeout&&clearTimeout(s.vpTimeout),s.hpTimeout&&clearTimeout(s.hpTimeout),S.initialized||(S.initialized=!0),S.isActivated=!0,S.isAniVisible=!0,s.vpTimeout=setTimeout(()=>{S.visiblePanel=!0,p(h.modelValue),s.vpTimeout=void 0,_()},10),X(),_())},b=()=>{S.visiblePanel=!1,s.vpTimeout&&clearTimeout(s.vpTimeout),s.hpTimeout&&clearTimeout(s.hpTimeout),s.hpTimeout=setTimeout(()=>{S.isAniVisible=!1,s.hpTimeout=void 0},350)},x=(e,l,t)=>{Z(l),l!==h.modelValue&&(o("change",{value:l,row:t,option:t},e),u)&&n&&u.triggerItemEvent(e,n.itemConfig.field,l)},Y=(e,l)=>{x(e,l,null),o("clear",{value:l},e)},G=(e,l)=>{Y(l,null),b()},H=e=>{var l=S.visiblePanel;U.value||l&&(l=I.value,((0,_dom.getEventTargetNode)(e,l).flag?_:b)())},J=e=>{var l,t,a=S.visiblePanel;U.value||(l=E.value,t=I.value,S.isActivated=(0,_dom.getEventTargetNode)(e,l).flag||(0,_dom.getEventTargetNode)(e,t).flag,a&&!S.isActivated&&b())},Q=()=>{var{visiblePanel:e,isActivated:l}=S;e&&b(),l&&(S.isActivated=!1),(e||l)&&(e=T.value)&&e.blur()},ee=()=>{var e=S.visiblePanel;e&&_()},le=e=>{U.value||S.visiblePanel||(S.triggerFocusPanel=!0,m(),setTimeout(()=>{S.triggerFocusPanel=!1},150)),o("focus",{},e)},te=e=>{z(e),o("click",{},e)},ae=e=>{S.isActivated=!1,o("blur",{},e)},z=e=>{e=e.$event;e.preventDefault(),S.triggerFocusPanel?S.triggerFocusPanel=!1:(S.visiblePanel?b:m)()},ie=e=>{var{$event:e,row:l}=e,t=l[d.value];x(e,t,l),b()},R=e=>{var{$grid:e,$event:l,row:t}=e;let a=d.value;e&&(e=e.getCheckboxRecords().map(e=>e[a]),x(l,e,t))},ue=e=>{R(e)};Object.assign(q,l,{});return(0,_vue.watch)(()=>h.options,()=>{g()}),(0,_vue.watch)(()=>h.columns,e=>{f(e)}),(0,_vue.watch)(()=>h.modelValue,e=>{p(e)}),f(h.columns),g(),(0,_vue.onMounted)(()=>{var e=h.gridConfig;e&&e.proxyConfig&&!1!==e.proxyConfig.autoLoad&&(S.initialized=!0),_ui.globalEvents.on(q,"mousewheel",H),_ui.globalEvents.on(q,"mousedown",J),_ui.globalEvents.on(q,"blur",Q),_ui.globalEvents.on(q,"resize",ee)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(q,"mousewheel"),_ui.globalEvents.off(q,"mousedown"),_ui.globalEvents.off(q,"blur"),_ui.globalEvents.off(q,"resize"),_xeUtils.default.assign(s,createInternalData())}),(0,_vue.nextTick)(()=>{y||(0,_log.errLog)("vxe.error.reqComp",["[table-select] vxe-grid"])}),(0,_vue.provide)("$xeTableSelect",q),q.renderVN=()=>{var{className:e,options:l,loading:t}=h,{initialized:a,isActivated:i,isAniVisible:u,visiblePanel:n,tableColumns:r}=S,o=V.value,s=U.value,v=D.value,d=P.value,c=k.value,p=j.value,f=B.value,g=O.value,_=M.value,m=C.header,b=C.footer;let x=C.prefix;p=p.className;return c?(0,_vue.h)("div",{ref:E,class:["vxe-table-select--readonly",e]},[(0,_vue.h)("span",{class:"vxe-table-select-label"},v)]):(0,_vue.h)("div",{ref:E,class:["vxe-table-select",e?_xeUtils.default.isFunction(e)?e({$tableSelect:q}):e:"",{["size--"+o]:o,"is--visible":n,"is--disabled":s,"is--loading":t,"is--active":i}]},[(0,_vue.h)(_input.default,{ref:T,clearable:h.clearable,placeholder:t?(0,_ui.getI18n)("vxe.select.loadingText"):h.placeholder,editable:!1,disabled:s,type:"text",prefixIcon:h.prefixIcon,suffixIcon:t?(0,_ui.getIcon)().TABLE_SELECT_LOADED:n?(0,_ui.getIcon)().TABLE_SELECT_OPEN:(0,_ui.getIcon)().TABLE_SELECT_CLOSE,modelValue:t?"":v,onClear:G,onClick:te,onFocus:le,onBlur:ae,onSuffixClick:z},x?{prefix:()=>x({})}:{}),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!d||!a},[(0,_vue.h)("div",{ref:I,class:["vxe-table--ignore-clear vxe-table-select--panel",p?_xeUtils.default.isFunction(p)?p({$tableSelect:q}):p:"",{["size--"+o]:o,"is--transfer":d,"ani--leave":!t&&u,"ani--enter":!t&&n}],placement:S.panelPlacement,style:S.panelStyle},a?[(0,_vue.h)("div",{class:"vxe-table-select--panel-wrapper"},[m?(0,_vue.h)("div",{class:"vxe-table-select--panel-header"},m({})):(0,_ui.renderEmptyElement)(q),(0,_vue.h)("div",{class:"vxe-table-select--panel-body"},[(0,_vue.h)("div",{ref:L,class:"vxe-table-select-grid--wrapper",style:_},[y?(0,_vue.h)(y,Object.assign(Object.assign(Object.assign({},f),A),{class:"vxe-table-select--grid",ref:w,rowConfig:g,data:l,columns:r.length?r:f.columns,height:"100%",autoResize:!0,onRadioChange:ie,onCheckboxChange:R,onCheckboxAll:ue}),Object.assign({},C,{header:void 0,footer:void 0,prefixSlot:void 0})):(0,_ui.renderEmptyElement)(q)])]),b?(0,_vue.h)("div",{class:"vxe-table-select--panel-footer"},b({})):(0,_ui.renderEmptyElement)(q)])]:[])])])},q},render(){return this.renderVN()}});