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

A vue based PC component library

"use strict";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){const{emit:i,slots:C}=e,y=_ui.VxeUI.getComponent("vxe-grid"),l=(0,_vue.inject)("$xeModal",null),a=(0,_vue.inject)("$xeDrawer",null),$=(0,_vue.inject)("$xeTable",null),n=(0,_vue.inject)("$xeForm",null),u=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();const 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?!!n&&n.props.readonly:e}),U=(0,_vue.computed)(()=>{var e=h["disabled"];return null===e?!!n&&n.props.disabled:e}),O=(0,_vue.computed)(()=>{var e=h["transfer"],t=j.value;if(_xeUtils.default.isBoolean(t.transfer))return t.transfer;if(null===e){t=(0,_ui.getConfig)().tableSelect.transfer;if(_xeUtils.default.isBoolean(t))return t;if($||l||a||n)return!0}return e}),r=(0,_vue.computed)(()=>h.optionProps||{}),P=(0,_vue.computed)(()=>{var e=d.value;return Object.assign({},e.rowConfig,{isCurrent:!0})}),v=(0,_vue.computed)(()=>{return P.value.keyField||"_X_ROW_KEY"}),F=(0,_vue.computed)(()=>{return r.value.label||"label"}),c=(0,_vue.computed)(()=>{return r.value.value||"value"}),j=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tableSelect.popupConfig,h.popupConfig)),d=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tableSelect.gridConfig,h.gridConfig,{data:void 0})),B=(0,_vue.computed)(()=>{var e=d.value;const{pagerConfig:a,proxyConfig:t}=e;if(t){var l=t.ajax;if(l&&l.query){var i=_xeUtils.default.clone(t,!0);const n=l.query;if(n){const u=t.response||t.props||{};Object.assign(i.ajax,{query(e,...t){return Promise.resolve(n(e,...t)).then(e=>{let t=[];var l;return t=a?(l=u.result,(_xeUtils.default.isFunction(l)?l({data:e,$table:null,$grid:null,$gantt:null}):_xeUtils.default.get(e,l||"result"))||[]):((l=u.list)?_xeUtils.default.isFunction(l)?l({data:e,$table:null,$grid:null,$gantt:null}):_xeUtils.default.get(e,l):e)||[],g(t||[]),e})}})}return Object.assign({},e,{proxyConfig:i})}}return e}),D=(0,_vue.computed)(()=>{const{modelValue:e,lazyOptions:l}=h;var t=S["fullOptionList"];const a=s["fullRowMaps"],i=c.value,n=F.value;return t?(_xeUtils.default.isArray(e)?e:[e]).map(t=>{var e=a[t];if(e)return e.item[n];if(l){e=l.find(e=>e[i]===t);if(e)return e[n]}return t}).join(", "):""}),M=(0,_vue.computed)(()=>{var{height:e,width:t}=j.value,l={};return t&&(l.width=(0,_dom.toCssUnit)(t)),e&&(l.height=(0,_dom.toCssUnit)(e)),l}),K={},q={xID:t,props:h,context:e,reactData:S,getRefMaps:()=>N,getComputeMaps:()=>K};const A={},o=(["form-submit","form-reset","form-collapse","page-change"].forEach(t=>{A[(0,_vn.getOnName)(_xeUtils.default.camelCase(t))]=e=>{o(t,e,e.$event)}}),(e,t,l)=>{i(e,(0,_ui.createEvent)(l,{$tableSelect:q},t))});t={dispatchEvent:o};const Z=e=>{const t=s["fullRowMaps"],l=[];return(_xeUtils.default.eqNull(e)?[]:_xeUtils.default.isArray(e)?e:[e]).forEach(e=>{e=t[e];e&&l.push(e.item)}),l},p=l=>{const a=h["multiple"];(0,_vue.nextTick)(()=>{var e,t=w.value;t&&(e=Z(l)).length&&(a?t.setCheckboxRow(e,!0):t.setRadioRow(e[0]))})},f=e=>{if(e&&e.length){var a=h["multiple"];const i=[];let t=!1,l=!1;e.forEach(e=>{t||"radio"!==e.type?l||"checkbox"!==e.type||(l=!0):t=!0,i.push(e)}),a?l||i.unshift({type:"checkbox",width:70}):t||i.unshift({type:"radio",width:70}),S.tableColumns=i}},g=e=>{var t=h["options"];const n=v.value,u=c.value;var{treeConfig:l,pagerConfig:a}=d.value;const r={},o={};l||_xeUtils.default.arrayEach(e||t||[],(e,t,l)=>{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] "+n,a]),o[a]=!0;var i=e[u];r[i]&&(0,_log.errLog)("vxe.error.repeatKey",["[table-select] "+u,i]),r[i]={item:e,index:t,items:l,parent:null,nodes:[]}}),S.fullOptionList=e||t||[],s.fullRowMaps=a?Object.assign({},s.fullRowMaps,r):r,p(h.modelValue)},_=()=>{const l=h["placement"],a=S["panelIndex"],i=E.value,n=I.value,u=O.value,r=j.value;var e=()=>{var e=(0,_dom.updatePanelPlacement)(i,n,{placement:r.placement||l,teleportTo:u}),t=Object.assign(e.style,{zIndex:a});S.panelStyle=t,S.panelPlacement=e.placement};return e(),(0,_vue.nextTick)().then(e)},m=()=>{var e=h["loading"],t=U.value;e||t||(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),(e=j.value.zIndex||h.zIndex)?S.panelIndex=_xeUtils.default.toNumber(e):S.panelIndex<(0,_utils.getLastZIndex)()&&(S.panelIndex=(0,_utils.nextZIndex)()),_())},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,t,l)=>{var a;a=t,i("update:modelValue",a),t!==h.modelValue&&(o("change",{value:t,row:l,option:l},e),n)&&u&&n.triggerItemEvent(e,u.itemConfig.field,t)},W=(e,t)=>{x(e,t,null),o("clear",{value:t},e)},X=(e,t)=>{W(t,null),b()},Y=e=>{var t=S["visiblePanel"];U.value||t&&(t=I.value,((0,_dom.getEventTargetNode)(e,t).flag?_:b)())},G=e=>{var t,l,a=S["visiblePanel"];U.value||(t=E.value,l=I.value,S.isActivated=(0,_dom.getEventTargetNode)(e,t).flag||(0,_dom.getEventTargetNode)(e,l).flag,a&&!S.isActivated&&b())},H=()=>{var{visiblePanel:e,isActivated:t}=S;e&&b(),t&&(S.isActivated=!1),(e||t)&&(e=T.value)&&e.blur()},J=()=>{var e=S["visiblePanel"];e&&_()},Q=e=>{U.value||S.visiblePanel||(S.triggerFocusPanel=!0,m(),setTimeout(()=>{S.triggerFocusPanel=!1},150)),o("focus",{},e)},ee=e=>{z(e),o("click",{},e)},te=e=>{S.isActivated=!1,o("blur",{},e)},z=e=>{e=e.$event;e.preventDefault(),S.triggerFocusPanel?S.triggerFocusPanel=!1:(S.visiblePanel?b:m)()},le=e=>{var{$event:e,row:t}=e,l=t[c.value];x(e,l,t),b()},R=e=>{var{$grid:e,$event:t,row:l}=e;const a=c.value;e&&(e=e.getCheckboxRecords().map(e=>e[a]),x(t,e,l))},ae=e=>{R(e)};Object.assign(q,t,{});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",Y),_ui.globalEvents.on(q,"mousedown",G),_ui.globalEvents.on(q,"blur",H),_ui.globalEvents.on(q,"resize",J)}),(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:t,loading:l}=h,{initialized:a,isActivated:i,isAniVisible:n,visiblePanel:u,tableColumns:r}=S,o=V.value,s=U.value,v=D.value,c=O.value,d=k.value,p=j.value,f=B.value,g=P.value,_=M.value,m=C.header,b=C.footer;const x=C.prefix;p=p.className;return d?(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":u,"is--disabled":s,"is--loading":l,"is--active":i}]},[(0,_vue.h)(_input.default,{ref:T,clearable:h.clearable,placeholder:l?(0,_ui.getI18n)("vxe.select.loadingText"):h.placeholder,editable:!1,disabled:s,type:"text",prefixIcon:h.prefixIcon,suffixIcon:l?(0,_ui.getIcon)().TABLE_SELECT_LOADED:u?(0,_ui.getIcon)().TABLE_SELECT_OPEN:(0,_ui.getIcon)().TABLE_SELECT_CLOSE,modelValue:l?"":v,onClear:X,onClick:ee,onFocus:Q,onBlur:te,onSuffixClick:z},x?{prefix:()=>x({})}:{}),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!c||!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":c,"ani--leave":!l&&n,"ani--enter":!l&&u}],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:t,columns:r.length?r:f.columns,height:"100%",autoResize:!0,onRadioChange:le,onCheckboxChange:R,onCheckboxAll:ae}),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()}});