vxe-table
Version:
一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等...
1 lines • 12.1 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.renderOption=renderOption,exports.renderOptgroup=renderOptgroup,exports.default=void 0;var _xeUtils=_interopRequireDefault(require("xe-utils")),_input=_interopRequireDefault(require("../../input/src/input")),_conf=_interopRequireDefault(require("../../v-x-e-table/src/conf")),_size=_interopRequireDefault(require("../../mixins/size")),_tools=require("../../tools");function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}function _defineProperty(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function isOptionVisible(t){return!1!==t.visible}function getOptUniqueId(){return _xeUtils.default.uniqueId("opt_")}function getOptkey(t){return t.optionId||"_XID"}function getOptid(t,e){t=e[getOptkey(t)];return t?encodeURIComponent(t):""}function findOffsetOption(t,e){var i,n,o,l,s=2<arguments.length&&void 0!==arguments[2]&&arguments[2],r=t.isGroup,a=t.visibleOptionList,u=t.visibleGroupList,p=t.valueField,f=t.groupOptionsField;if(r)for(var h=0;h<u.length;h++){var c=u[h],d=c[f],v=c.disabled;if(d)for(var b=0;b<d.length;b++){var O=d[b],g=isOptionVisible(O),m=v||O.disabled;if(i||m||(i=O),l&&g&&!m&&(o=O,!s))return{offsetOption:o};if(e===O[p]){if(l=O,s)return{offsetOption:n}}else g&&!m&&(n=O)}}else for(var x=0;x<a.length;x++){var P=a[x],_=P.disabled;if(i||_||(i=P),l&&!_&&(o=P,!s))return{offsetOption:o};if(e===P[p]){if(l=P,s)return{offsetOption:n}}else _||(n=P)}return{firstOption:i}}function findOption(t,e){var i=t.isGroup,n=t.fullOptionList,o=t.fullGroupList,l=t.valueField;if(i)for(var s=0;s<o.length;s++){var r=o[s];if(r.options)for(var a=0;a<r.options.length;a++){var u=r.options[a];if(e===u[l])return u}}return n.find(function(t){return e===t[l]})}function getSelectLabel(t,e){var i=findOption(t,e);return _xeUtils.default.toValueString(i?i[t.labelField]:e)}function renderOption(s,r,t,a){var u=r.isGroup,p=r.labelField,f=r.valueField,h=r.optionKey,c=r.value,d=r.multiple,v=r.currentValue;return t.map(function(t,e){var i=!u||isOptionVisible(t),n=a&&a.disabled||t.disabled,o=t[f],l=getOptid(r,t);return i?s("div",{key:h?l:e,class:["vxe-select-option",t.className,{"is--disabled":n,"is--selected":d?c&&-1<c.indexOf(o):c===o,"is--hover":v===o}],attrs:{optid:l},on:{mousedown:function(t){t.stopPropagation(),n||r.changeOptionEvent(t,o)},mouseenter:function(){n||r.setCurrentOption(t)}}},_tools.UtilTools.formatText(_tools.UtilTools.getFuncText(t[p]))):null})}function renderOptgroup(o,l){var s=l.optionKey,t=l.visibleGroupList,r=l.groupLabelField,a=l.groupOptionsField;return t.map(function(t,e){var i=getOptid(l,t),n=t.disabled;return o("div",{key:s?i:e,class:["vxe-optgroup",t.className,{"is--disabled":n}],attrs:{optid:i}},[o("div",{class:"vxe-optgroup--title"},_tools.UtilTools.getFuncText(t[r])),o("div",{class:"vxe-optgroup--wrapper"},renderOption(o,l,t[a],t))])})}function renderOpts(t,e){var i=e.isGroup,n=e.visibleGroupList,o=e.visibleOptionList;if(i){if(n.length)return renderOptgroup(t,e)}else if(o.length)return renderOption(t,e,o);return[t("div",{class:"vxe-select--empty-placeholder"},e.emptyText||_conf.default.i18n("vxe.select.emptyText"))]}var _default2={name:"VxeSelect",mixins:[_size.default],props:{value:null,clearable:Boolean,placeholder:String,disabled:Boolean,multiple:Boolean,multiCharOverflow:{type:[Number,String],default:function(){return _conf.default.select.multiCharOverflow}},prefixIcon:String,placement:String,options:Array,optionProps:Object,optionGroups:Array,optionGroupProps:Object,className:[String,Function],size:{type:String,default:function(){return _conf.default.select.size||_conf.default.size}},emptyText:String,optionId:{type:String,default:function(){return _conf.default.select.optionId}},optionKey:Boolean,transfer:{type:Boolean,default:function(){return _conf.default.select.transfer}}},components:{VxeInput:_input.default},provide:function(){return{$xeselect:this}},data:function(){return{inited:!1,collectOption:[],fullGroupList:[],fullOptionList:[],visibleGroupList:[],visibleOptionList:[],panelIndex:0,panelStyle:null,panelPlacement:null,currentValue:null,visiblePanel:!1,animatVisible:!1,isActivated:!1}},computed:{propsOpts:function(){return this.optionProps||{}},groupPropsOpts:function(){return this.optionGroupProps||{}},labelField:function(){return this.propsOpts.label||"label"},valueField:function(){return this.propsOpts.value||"value"},groupLabelField:function(){return this.groupPropsOpts.label||"label"},groupOptionsField:function(){return this.groupPropsOpts.options||"options"},isGroup:function(){return this.fullGroupList.some(function(t){return t.options&&t.options.length})},multiMaxCharNum:function(){return _xeUtils.default.toNumber(this.multiCharOverflow)},selectLabel:function(){var e=this,t=this.value,i=this.multiple,n=this.multiMaxCharNum;return t&&i?t.map(function(t){t=getSelectLabel(e,t);return 0<n&&t.length>n?"".concat(t.substring(0,n),"..."):t}).join(", "):getSelectLabel(this,t)}},watch:{collectOption:function(t){t.some(function(t){return t.options&&t.options.length})?(this.fullOptionList=[],this.fullGroupList=t):(this.fullGroupList=[],this.fullOptionList=t),this.updateCache()},options:function(t){this.fullGroupList=[],this.fullOptionList=t,this.updateCache()},optionGroups:function(t){this.fullOptionList=[],this.fullGroupList=t,this.updateCache()}},created:function(){var t=this.options,e=this.optionGroups;e?this.fullGroupList=e:t&&(this.fullOptionList=t),this.updateCache(),_tools.GlobalEvent.on(this,"mousewheel",this.handleGlobalMousewheelEvent),_tools.GlobalEvent.on(this,"mousedown",this.handleGlobalMousedownEvent),_tools.GlobalEvent.on(this,"keydown",this.handleGlobalKeydownEvent),_tools.GlobalEvent.on(this,"blur",this.handleGlobalBlurEvent)},beforeDestroy:function(){var t=this.$refs.panel;t&&t.parentNode&&t.parentNode.removeChild(t)},destroyed:function(){_tools.GlobalEvent.off(this,"mousewheel"),_tools.GlobalEvent.off(this,"mousedown"),_tools.GlobalEvent.off(this,"keydown"),_tools.GlobalEvent.off(this,"blur")},render:function(t){var e=this.vSize,i=this.className,n=this.inited,o=this.isActivated,l=this.disabled,s=this.visiblePanel;return t("div",{class:["vxe-select",i,(_defineProperty(i={},"size--".concat(e),e),_defineProperty(i,"is--visivle",s),_defineProperty(i,"is--disabled",l),_defineProperty(i,"is--active",o),i)]},[t("div",{class:"vxe-select-slots",ref:"hideOption"},this.$slots.default),t("vxe-input",{ref:"input",props:{clearable:this.clearable,placeholder:this.placeholder,readonly:!0,disabled:l,type:"text",prefixIcon:this.prefixIcon,suffixIcon:s?_conf.default.icon.SELECT_OPEN:_conf.default.icon.SELECT_CLOSE,value:this.selectLabel},on:{clear:this.clearEvent,click:this.togglePanelEvent,focus:this.focusEvent,blur:this.blurEvent,"suffix-click":this.togglePanelEvent}}),t("div",{ref:"panel",class:["vxe-table--ignore-clear vxe-select--panel",(_defineProperty(l={},"size--".concat(e),e),_defineProperty(l,"is--transfer",this.transfer),_defineProperty(l,"animat--leave",this.animatVisible),_defineProperty(l,"animat--enter",s),l)],attrs:{placement:this.panelPlacement},style:this.panelStyle},n?[t("div",{ref:"optWrapper",class:"vxe-select-option--wrapper"},renderOpts(t,this))]:null)])},methods:{updateCache:function(){function e(t){getOptid(i,t)||(t[l]=getOptUniqueId())}var i=this,t=this.fullOptionList,n=this.fullGroupList,o=this.groupOptionsField,l=getOptkey(this);n.length?n.forEach(function(t){e(t),t[o]&&t[o].forEach(e)}):t.length&&t.forEach(e),this.refreshOption()},refreshOption:function(){var t=this.isGroup,e=this.fullOptionList,i=this.fullGroupList;return t?this.visibleGroupList=i.filter(isOptionVisible):this.visibleOptionList=e.filter(isOptionVisible),this.$nextTick()},setCurrentOption:function(t){t&&(this.currentValue=t[this.valueField])},scrollToOption:function(n,o){var l=this;return this.$nextTick().then(function(){var t,e,i;n&&(t=(i=l.$refs).optWrapper,e=i.panel.querySelector("[optid='".concat(getOptid(l,n),"']")),t&&e&&(i=t.offsetHeight,o?e.offsetTop+e.offsetHeight-t.scrollTop>i&&(t.scrollTop=e.offsetTop+e.offsetHeight-i):(e.offsetTop+5<t.scrollTop||e.offsetTop+5>t.scrollTop+t.clientHeight)&&(t.scrollTop=e.offsetTop-5)))})},clearEvent:function(t,e){this.clearValueEvent(e,null),this.hideOptionPanel()},clearValueEvent:function(t,e){this.changeEvent(t,e),this.$emit("clear",{value:e,$event:t})},changeEvent:function(t,e){e!==this.value&&(this.$emit("input",e),this.$emit("change",{value:e,$event:t}))},changeOptionEvent:function(t,e){var i=this,n=this.value;this.multiple?(n=n?-1===n.indexOf(e)?n.concat([e]):n.filter(function(t){return t!==e}):[e],this.changeEvent(t,n)):(this.changeEvent(t,e),setTimeout(function(){i.hideOptionPanel()},50))},handleGlobalMousewheelEvent:function(t){var e=this.$refs,i=this.disabled,n=this.visiblePanel;i||n&&(_tools.DomTools.getEventTargetNode(t,e.panel).flag?this.updatePlacement():this.hideOptionPanel())},handleGlobalMousedownEvent:function(t){var e=this.$refs,i=this.$el,n=this.disabled,o=this.visiblePanel;n||(this.isActivated=_tools.DomTools.getEventTargetNode(t,i).flag||_tools.DomTools.getEventTargetNode(t,e.panel).flag,o&&!this.isActivated&&this.hideOptionPanel())},handleGlobalKeydownEvent:function(t){var e,i,n,o,l,s,r,a=this.visiblePanel,u=this.currentValue,p=this.clearable;this.disabled||(e=13===(s=t.keyCode),r=27===s,i=38===s,n=40===s,o=46===s,l=32===s,(s=9===s)&&(this.isActivated=!1),a?r||s?this.hideOptionPanel():e?(t.preventDefault(),t.stopPropagation(),this.changeOptionEvent(t,u)):i||n?(t.preventDefault(),s=(r=findOffsetOption(this,u,i)).firstOption,(r=r.offsetOption)||findOption(this,u)||(r=s),this.setCurrentOption(r),this.scrollToOption(r,n)):l&&t.preventDefault():(i||n||e||l)&&this.isActivated&&(t.preventDefault(),this.showOptionPanel()),this.isActivated&&o&&p&&this.clearValueEvent(t,null))},handleGlobalBlurEvent:function(){this.hideOptionPanel()},updateZindex:function(){this.panelIndex<_tools.UtilTools.getLastZIndex()&&(this.panelIndex=_tools.UtilTools.nextZIndex())},focusEvent:function(){this.disabled||(this.isActivated=!0)},blurEvent:function(){this.isActivated=!1},isPanelVisible:function(){return this.visiblePanel},togglePanel:function(){this.visiblePanel?this.hideOptionPanel():this.showOptionPanel(),this.$nextTick()},hidePanel:function(){this.visiblePanel&&this.hideOptionPanel(),this.$nextTick()},showPanel:function(){this.visiblePanel||this.showOptionPanel(),this.$nextTick()},togglePanelEvent:function(t){t.$event.preventDefault(),this.visiblePanel?this.hideOptionPanel():this.showOptionPanel()},showOptionPanel:function(){var i=this;this.disabled||(clearTimeout(this.hidePanelTimeout),this.inited||(this.inited=!0,this.transfer&&document.body.appendChild(this.$refs.panel)),this.isActivated=!0,this.animatVisible=!0,setTimeout(function(){var t=i.value,e=i.multiple,t=findOption(i,e&&t?t[0]:t);i.visiblePanel=!0,t&&(i.setCurrentOption(t),i.scrollToOption(t))},10),this.updateZindex(),this.updatePlacement())},hideOptionPanel:function(){var t=this;this.visiblePanel=!1,this.hidePanelTimeout=setTimeout(function(){t.animatVisible=!1},350)},updatePlacement:function(){var h=this;return this.$nextTick().then(function(){var t=h.$refs,e=h.transfer,i=h.placement,n=h.panelIndex,o=t.input.$el,l=t.panel;if(l&&o){var s=o.offsetHeight,r=o.offsetWidth,a=l.offsetHeight,u=l.offsetWidth,p={zIndex:n},f=_tools.DomTools.getAbsolutePos(o),t=f.boundingTop,l=f.boundingLeft,n=f.visibleHeight,o=f.visibleWidth,f="bottom";return e?(e=t+s,"top"===i?(f="top",e=t-a):i||(n<e+a+5&&(f="top",e=t-a),e<5&&(f="bottom",e=t+s)),o<(l=l)+u+5&&(l-=l+u+5-o),l<5&&(l=5),Object.assign(p,{left:"".concat(l,"px"),top:"".concat(e,"px"),minWidth:"".concat(r,"px")})):"top"===i?(f="top",p.bottom="".concat(s,"px")):i||n<t+s+a&&5<t-s-a&&(f="top",p.bottom="".concat(s,"px")),h.panelStyle=p,h.panelPlacement=f,h.$nextTick()}})},focus:function(){return this.isActivated=!0,this.$refs.input.focus(),this.$nextTick()},blur:function(){return this.hideOptionPanel(),this.$refs.input.blur(),this.$nextTick()}}};exports.default=_default2;