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