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"),_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_")}var _default=exports.default=(0,_vue.defineComponent)({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,size:{type:String,default:()=>(0,_ui.getConfig)().select.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:a,slots:C}=e,T=_ui.VxeUI.getComponent("VxeGrid"),l=(0,_vue.inject)("$xeModal",null),i=(0,_vue.inject)("$xeDrawer",null),o=(0,_vue.inject)("$xeTable",null),u=(0,_vue.inject)("$xeForm",null),n=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();const L=(0,_ui.useSize)(h)["computeSize"],E=(0,_vue.ref)(),N=(0,_vue.ref)(),k=(0,_vue.ref)(),y=(0,_vue.ref)(),w=(0,_vue.ref)(),I=(0,_vue.reactive)({initialized:!1,tableColumns:[],fullOptionList:[],fullRowMaps:{},panelIndex:0,panelStyle:{},panelPlacement:null,triggerFocusPanel:!1,visiblePanel:!1,isAniVisible:!1,isActivated:!1}),r={},z={refElem:E},$=(0,_vue.computed)(()=>{var e=h["readonly"];return null===e?!!u&&u.props.readonly:e}),S=(0,_vue.computed)(()=>{var e=h["disabled"];return null===e?!!u&&u.props.disabled:e}),A=(0,_vue.computed)(()=>{var e=h["transfer"];if(null===e){var t=(0,_ui.getConfig)().select.transfer;if(_xeUtils.default.isBoolean(t))return t;if(o||l||i||u)return!0}return e}),s=(0,_vue.computed)(()=>h.optionProps||{}),O=(0,_vue.computed)(()=>{var e=R.value;return Object.assign({},e.rowConfig,{isCurrent:!0})}),v=(0,_vue.computed)(()=>{return O.value.keyField||"_X_ROW_KEY"}),F=(0,_vue.computed)(()=>{return s.value.label||"label"}),c=(0,_vue.computed)(()=>{return s.value.value||"value"}),P=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tableSelect.popupConfig,h.popupConfig)),R=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().tableSelect.gridConfig,h.gridConfig,{data:void 0,columns:void 0})),B=(0,_vue.computed)(()=>{var e=h["modelValue"];const l=I["fullRowMaps"],i=F.value;return(_xeUtils.default.isArray(e)?e:[e]).map(e=>{var t=l[e];return t?t.item[i]:e}).join(", ")}),M=(0,_vue.computed)(()=>{var{height:e,width:t}=P.value,l={};return t&&(l.width=(0,_dom.toCssUnit)(t)),e&&(l.height=(0,_dom.toCssUnit)(e)),l}),D={},U={xID:t,props:h,context:e,reactData:I,getRefMaps:()=>z,getComputeMaps:()=>D};const q={},d=(["form-submit","form-reset","form-collapse","page-change"].forEach(t=>{q[(0,_vn.getOnName)(_xeUtils.default.camelCase(t))]=e=>{d(t,e,e.$event)}}),(e,t,l)=>{a(e,(0,_ui.createEvent)(l,{$tableSelect:U},t))});t={dispatchEvent:d};const W=e=>{const t=I["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 i=h["multiple"];(0,_vue.nextTick)(()=>{var e,t=w.value;t&&(e=W(l)).length&&(i?t.setCheckboxRow(e,!0):t.setRadioRow(e[0]))})},_=e=>{var t=h["multiple"],l=[];l.push(t?{type:"checkbox",width:70}:{type:"radio",width:70}),I.tableColumns=l.concat(e||[])},g=()=>{var e=h["options"];const o=v.value,u=c.value;var t=R.value["treeConfig"];const n={},r={};t||_xeUtils.default.arrayEach(e||[],(e,t,l)=>{let i=(e=>{e=e[v.value];return e?encodeURIComponent(e):""})(e);i=i||getRowUniqueId(),r[i]&&(0,_log.errLog)("vxe.error.repeatKey",[o,i]),r[i]=!0;var a=e[u];n[a]&&(0,_log.errLog)("vxe.error.repeatKey",[u,a]),n[a]={item:e,index:t,items:l,parent:null,nodes:[]}}),I.fullOptionList=e||[],I.fullRowMaps=n,p(h.modelValue)},f=()=>(0,_vue.nextTick)().then(()=>{var i=h["placement"],a=I["panelIndex"],o=E.value,u=y.value,e=A.value;if(u&&o){var n=o.offsetHeight,r=o.offsetWidth,s=u.offsetHeight,u=u.offsetWidth,a={zIndex:a},{boundingTop:o,boundingLeft:v,visibleHeight:c,visibleWidth:d}=(0,_dom.getAbsolutePos)(o);let l="bottom";if(e){let e=v,t=o+n;"top"===i?(l="top",t=o-s):i||(t+s+5>c&&(l="top",t=o-s),t<5&&(l="bottom",t=o+n)),e+u+5>d&&(e-=e+u+5-d),e<5&&(e=5),Object.assign(a,{left:e+"px",top:t+"px",minWidth:r+"px"})}else"top"===i?(l="top",a.bottom=n+"px"):i||c<o+n+s&&5<o-n-s&&(l="top",a.bottom=n+"px");return I.panelStyle=a,I.panelPlacement=l,(0,_vue.nextTick)()}}),m=()=>{var e=h["loading"],t=S.value;e||t||(r.vpTimeout&&clearTimeout(r.vpTimeout),r.hpTimeout&&clearTimeout(r.hpTimeout),I.initialized||(I.initialized=!0),I.isActivated=!0,I.isAniVisible=!0,r.vpTimeout=setTimeout(()=>{I.visiblePanel=!0,p(h.modelValue),r.vpTimeout=void 0},10),I.panelIndex<(0,_utils.getLastZIndex)()&&(I.panelIndex=(0,_utils.nextZIndex)()),f())},b=()=>{I.visiblePanel=!1,r.vpTimeout&&clearTimeout(r.vpTimeout),r.hpTimeout&&clearTimeout(r.hpTimeout),r.hpTimeout=setTimeout(()=>{I.isAniVisible=!1,r.hpTimeout=void 0},350)},x=(e,t)=>{var l,i=I["fullRowMaps"];l=t,a("update:modelValue",l),t!==h.modelValue&&(l=i[t],d("change",{value:t,row:l?l.item:null},e),u)&&n&&u.triggerItemEvent(e,n.itemConfig.field,t)},H=(e,t)=>{x(e,t),d("clear",{value:t},e)},K=(e,t)=>{H(t,null),b()},Z=e=>{var t=I["visiblePanel"];S.value||t&&(t=y.value,((0,_dom.getEventTargetNode)(e,t).flag?f:b)())},G=e=>{var t,l,i=I["visiblePanel"];S.value||(t=E.value,l=y.value,I.isActivated=(0,_dom.getEventTargetNode)(e,t).flag||(0,_dom.getEventTargetNode)(e,l).flag,i&&!I.isActivated&&b())},X=()=>{b()},Y=e=>{S.value||I.visiblePanel||(I.triggerFocusPanel=!0,m(),setTimeout(()=>{I.triggerFocusPanel=!1},150)),d("focus",{},e)},J=e=>{j(e),d("click",{},e)},Q=e=>{I.isActivated=!1,d("blur",{},e)},j=e=>{e=e.$event;e.preventDefault(),I.triggerFocusPanel?I.triggerFocusPanel=!1:(I.visiblePanel?b:m)()},ee=e=>{var{$event:e,row:t}=e,t=t[c.value];x(e,t),b()},V=e=>{var{$grid:e,$event:t}=e;const l=c.value;e&&(e=e.getCheckboxRecords().map(e=>e[l]),x(t,e))},te=e=>{V(e)};Object.assign(U,t,{});return(0,_vue.watch)(()=>h.options,()=>{g()}),(0,_vue.watch)(()=>h.columns,e=>{_(e||[])}),(0,_vue.watch)(()=>h.modelValue,e=>{p(e)}),_(h.columns||[]),g(),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(U,"mousewheel",Z),_ui.globalEvents.on(U,"mousedown",G),_ui.globalEvents.on(U,"blur",X)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(U,"mousewheel"),_ui.globalEvents.off(U,"mousedown"),_ui.globalEvents.off(U,"blur")}),"development"===process.env.NODE_ENV&&(0,_vue.nextTick)(()=>{T||(0,_log.errLog)("vxe.error.reqComp",["vxe-grid"])}),(0,_vue.provide)("$xeTableSelect",U),U.renderVN=()=>{var{className:e,options:t,loading:l}=h,{initialized:i,isActivated:a,isAniVisible:o,visiblePanel:u,tableColumns:n}=I,r=L.value,s=S.value,v=B.value,c=A.value,d=$.value,p=P.value["className"],_=R.value,g=O.value,f=M.value,m=C.header,b=C.footer;const x=C.prefix;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:U}):e:"",{["size--"+r]:r,"is--visible":u,"is--disabled":s,"is--loading":l,"is--active":a}]},[(0,_vue.h)(_input.default,{ref:N,clearable:h.clearable,placeholder:l?(0,_ui.getI18n)("vxe.select.loadingText"):h.placeholder,readonly:!0,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:K,onClick:J,onFocus:Y,onBlur:Q,onSuffixClick:j},x?{prefix:()=>x({})}:{}),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!c||!i},[(0,_vue.h)("div",{ref:y,class:["vxe-table--ignore-clear vxe-table-select--panel",p?_xeUtils.default.isFunction(p)?p({$tableSelect:U}):p:"",{["size--"+r]:r,"is--transfer":c,"ani--leave":!l&&o,"ani--enter":!l&&u}],placement:I.panelPlacement,style:I.panelStyle},i?[(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)(U),(0,_vue.h)("div",{class:"vxe-table-select--panel-body"},[(0,_vue.h)("div",{ref:k,class:"vxe-table-select-grid--wrapper",style:f},[T?(0,_vue.h)(T,Object.assign(Object.assign(Object.assign({},_),q),{class:"vxe-table-select--grid",ref:w,rowConfig:g,data:t,columns:n,height:"100%",autoResize:!0,onRadioChange:ee,onCheckboxChange:V,onCheckboxAll:te}),Object.assign({},C,{header:void 0,footer:void 0,prefixSlot:void 0})):(0,_ui.renderEmptyElement)(U)])]),b?(0,_vue.h)("div",{class:"vxe-table-select--panel-footer"},b({})):(0,_ui.renderEmptyElement)(U)])]:[])])])},U},render(){return this.renderVN()}});