jiku-ui/lib/cascader-panel.js

A Component Library for Vue.js.

module.exports=function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=76)}({0:function(e,t,n){"use strict";function i(e,t,n,i,r,a,o,s){var c,h="function"==typeof e?e.options:e;if(t&&(h.render=t,h.staticRenderFns=n,h._compiled=!0),i&&(h.functional=!0),a&&(h._scopeId="data-v-"+a),o?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},h._ssrRegister=c):r&&(c=s?function(){r.call(this,(h.functional?this.parent:this).$root.$options.shadowRoot)}:r),c)if(h.functional){h._injectStyles=c;var u=h.render;h.render=function(e,t){return c.call(t),u(e,t)}}else{var l=h.beforeCreate;h.beforeCreate=l?[].concat(l,c):[c]}return{exports:e,options:h}}n.d(t,"a",(function(){return i}))},13:function(e,t){e.exports=require("jiku-ui/lib/scrollbar")},16:function(e,t){e.exports=require("jiku-ui/lib/utils/types")},18:function(e,t){e.exports=require("jiku-ui/lib/checkbox")},22:function(e,t){e.exports=require("babel-helper-vue-jsx-merge-props")},3:function(e,t){e.exports=require("jiku-ui/lib/utils/util")},31:function(e,t){e.exports=require("jiku-ui/lib/utils/scroll-into-view")},42:function(e,t){e.exports=require("jiku-ui/lib/utils/aria-utils")},57:function(e,t){e.exports=require("jiku-ui/lib/radio")},6:function(e,t){e.exports=require("jiku-ui/lib/mixins/locale")},76:function(e,t,n){"use strict";n.r(t);var i=function(){var e=this.$createElement,t=this._self._c||e;return t("div",{class:["hn-cascader-panel",this.border&&"is-bordered"],on:{keydown:this.handleKeyDown}},this._l(this.menus,(function(e,n){return t("cascader-menu",{key:n,ref:"menu",refInFor:!0,attrs:{index:n,nodes:e}})})),1)};i._withStripped=!0;var r=n(22),a=n.n(r),o=n(13),s=n.n(o),c=n(18),h=n.n(c),u=n(57),l=n.n(u),d=n(3),f=function(e){return e.stopPropagation()},p={inject:["panel"],components:{HnCheckbox:h.a,HnRadio:l.a},props:{node:{required:!0},nodeId:String},computed:{config:function(){return this.panel.config},isLeaf:function(){return this.node.isLeaf},isDisabled:function(){return this.node.isDisabled},checkedValue:function(){return this.panel.checkedValue},isChecked:function(){return this.node.isSameNode(this.checkedValue)},inActivePath:function(){return this.isInPath(this.panel.activePath)},inCheckedPath:function(){var e=this;return!!this.config.checkStrictly&&this.panel.checkedNodePaths.some((function(t){return e.isInPath(t)}))},value:function(){return this.node.getValueByOption()}},methods:{handleExpand:function(){var e=this,t=this.panel,n=this.node,i=this.isDisabled,r=this.config,a=r.multiple;!r.checkStrictly&&i||n.loading||(!r.lazy||n.loaded||n.isLeaf?t.handleExpand(n):t.lazyLoad(n,(function(){var t=e.isLeaf;if(t||e.handleExpand(),a){var i=!!t&&n.checked;e.handleMultiCheckChange(i)}})))},handleCheckChange:function(){var e=this.panel,t=this.value,n=this.node,i=this.config.checkStrictly;e.handleCheckChange(t),!i&&e.handleExpand(n)},handleMultiCheckChange:function(e){this.node.doCheck(e),this.panel.calculateMultiCheckedValue()},isInPath:function(e){var t=this.node;return(e[t.level-1]||{}).uid===t.uid},renderPrefix:function(e){var t=this.isLeaf,n=this.isChecked,i=this.config,r=i.checkStrictly;return i.multiple?this.renderCheckbox(e):r?this.renderRadio(e):t&&n?this.renderCheckIcon(e):null},renderPostfix:function(e){var t=this.node,n=this.isLeaf;return t.loading?this.renderLoadingIcon(e):n?null:this.renderExpandIcon(e)},renderCheckbox:function(e){var t=this.node,n=this.config,i=this.isDisabled,r={on:{change:this.handleMultiCheckChange},nativeOn:{}};return n.checkStrictly&&(r.nativeOn.click=f),e("hn-checkbox",a()([{attrs:{value:t.checked,indeterminate:t.indeterminate,disabled:i}},r]))},renderRadio:function(e){var t=this.checkedValue,n=this.value,i=this.isDisabled;return Object(d.isEqual)(n,t)&&(n=t),e("hn-radio",{attrs:{value:t,label:n,disabled:i},on:{change:this.handleCheckChange},nativeOn:{click:f}},[e("span")])},renderCheckIcon:function(e){return e("i",{class:"hn-icon-check hn-cascader-node__prefix"})},renderLoadingIcon:function(e){return e("i",{class:"hn-icon-loading hn-cascader-node__postfix"})},renderExpandIcon:function(e){return e("i",{class:"hn-icon-arrow-right hn-cascader-node__postfix"})},renderContent:function(e){var t=this.panel,n=this.node,i=t.renderLabelFn;return e("span",{class:"hn-cascader-node__label"},[(i?i({node:n,data:n.data}):null)||n.label])}},render:function(e){var t=this,n=this.inActivePath,i=this.inCheckedPath,r=this.isChecked,o=this.isLeaf,s=this.isDisabled,c=this.config,h=this.nodeId,u=c.expandTrigger,l=c.checkStrictly,d=c.multiple,f=!l&&s,p={on:{}};return"click"===u?p.on.click=this.handleExpand:(p.on.mouseenter=function(e){t.handleExpand(),t.$emit("expand",e)},p.on.focus=function(e){t.handleExpand(),t.$emit("expand",e)}),!o||s||l||d||(p.on.click=this.handleCheckChange),e("li",a()([{attrs:{role:"menuitem",id:h,"aria-expanded":n,tabindex:f?null:-1},class:{"hn-cascader-node":!0,"is-selectable":l,"in-active-path":n,"in-checked-path":i,"is-active":r,"is-disabled":f}},p]),[this.renderPrefix(e),this.renderContent(e),this.renderPostfix(e)])}},v=n(0),y=Object(v.a)(p,void 0,void 0,!1,null,null,null);y.options.__file="packages/cascader-panel/src/cascader-node.vue";var g=y.exports,b=n(6),m={name:"HnCascaderMenu",mixins:[n.n(b).a],inject:["panel"],components:{HnScrollbar:s.a,CascaderNode:g},props:{nodes:{type:Array,required:!0},index:Number},data:function(){return{activeNode:null,hoverTimer:null,id:Object(d.generateId)()}},computed:{isEmpty:function(){return!this.nodes.length},menuId:function(){return"cascader-menu-"+this.id+"-"+this.index}},methods:{handleExpand:function(e){this.activeNode=e.target},handleMouseMove:function(e){var t=this.activeNode,n=this.hoverTimer,i=this.$refs.hoverZone;if(t&&i)if(t.contains(e.target)){clearTimeout(n);var r=this.$el.getBoundingClientRect().left,a=e.clientX-r,o=this.$el,s=o.offsetWidth,c=o.offsetHeight,h=t.offsetTop,u=h+t.offsetHeight;i.innerHTML='\n          <path style="pointer-events: auto;" fill="transparent" d="M'+a+" "+h+" L"+s+" 0 V"+h+' Z" />\n          <path style="pointer-events: auto;" fill="transparent" d="M'+a+" "+u+" L"+s+" "+c+" V"+u+' Z" />\n        '}else n||(this.hoverTimer=setTimeout(this.clearHoverZone,this.panel.config.hoverThreshold))},clearHoverZone:function(){var e=this.$refs.hoverZone;e&&(e.innerHTML="")},renderEmptyText:function(e){return e("div",{class:"hn-cascader-menu__empty-text"},[this.t("hn.cascader.noData")])},renderNodeList:function(e){var t=this.menuId,n=this.panel.isHoverMenu,i={on:{}};n&&(i.on.expand=this.handleExpand);var r=this.nodes.map((function(n,r){var o=n.hasChildren;return e("cascader-node",a()([{key:n.uid,attrs:{node:n,"node-id":t+"-"+r,"aria-haspopup":o,"aria-owns":o?t:null}},i]))}));return[].concat(r,[n?e("svg",{ref:"hoverZone",class:"hn-cascader-menu__hover-zone"}):null])}},render:function(e){var t=this.isEmpty,n=this.menuId,i={nativeOn:{}};return this.panel.isHoverMenu&&(i.nativeOn.mousemove=this.handleMouseMove),e("hn-scrollbar",a()([{attrs:{tag:"ul",role:"menu",id:n,"wrap-class":"hn-cascader-menu__wrap","view-class":{"hn-cascader-menu__list":!0,"is-empty":t}},class:"hn-cascader-menu"},i]),[t?this.renderEmptyText(e):this.renderNodeList(e)])}},k=Object(v.a)(m,void 0,void 0,!1,null,null,null);k.options.__file="packages/cascader-panel/src/cascader-menu.vue";var C=k.exports,x=n(16),N=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();var S=0,_=function(){function e(t,n,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.data=t,this.config=n,this.parent=i||null,this.level=this.parent?this.parent.level+1:1,this.uid=S++,this.initState(),this.initChildren()}return e.prototype.initState=function(){var e=this.config,t=e.value,n=e.label;this.value=this.data[t],this.label=this.data[n],this.pathNodes=this.calculatePathNodes(),this.path=this.pathNodes.map((function(e){return e.value})),this.pathLabels=this.pathNodes.map((function(e){return e.label})),this.loading=!1,this.loaded=!1},e.prototype.initChildren=function(){var t=this,n=this.config,i=n.children,r=this.data[i];this.hasChildren=Array.isArray(r),this.children=(r||[]).map((function(i){return new e(i,n,t)}))},e.prototype.calculatePathNodes=function(){for(var e=[this],t=this.parent;t;)e.unshift(t),t=t.parent;return e},e.prototype.getPath=function(){return this.path},e.prototype.getValue=function(){return this.value},e.prototype.getValueByOption=function(){return this.config.emitPath?this.getPath():this.getValue()},e.prototype.getText=function(e,t){return e?this.pathLabels.join(t):this.label},e.prototype.isSameNode=function(e){var t=this.getValueByOption();return this.config.multiple&&Array.isArray(e)?e.some((function(e){return Object(d.isEqual)(e,t)})):Object(d.isEqual)(e,t)},e.prototype.broadcast=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];var r="onParent"+Object(d.capitalize)(e);this.children.forEach((function(t){t&&(t.broadcast.apply(t,[e].concat(n)),t[r]&&t[r].apply(t,n))}))},e.prototype.emit=function(e){var t=this.parent,n="onChild"+Object(d.capitalize)(e);if(t){for(var i=arguments.length,r=Array(i>1?i-1:0),a=1;a<i;a++)r[a-1]=arguments[a];t[n]&&t[n].apply(t,r),t.emit.apply(t,[e].concat(r))}},e.prototype.onParentCheck=function(e){this.isDisabled||this.setCheckState(e)},e.prototype.onChildCheck=function(){var e=this.children.filter((function(e){return!e.isDisabled})),t=!!e.length&&e.every((function(e){return e.checked}));this.setCheckState(t)},e.prototype.setCheckState=function(e){var t=this.children.length,n=this.children.reduce((function(e,t){return e+(t.checked?1:t.indeterminate?.5:0)}),0);this.checked=e,this.indeterminate=n!==t&&n>0},e.prototype.syncCheckState=function(e){var t=this.getValueByOption(),n=this.isSameNode(e,t);this.doCheck(n)},e.prototype.doCheck=function(e){this.checked!==e&&(this.config.checkStrictly?this.checked=e:(this.broadcast("check",e),this.setCheckState(e),this.emit("check")))},N(e,[{key:"isDisabled",get:function(){var e=this.data,t=this.parent,n=this.config,i=n.disabled,r=n.checkStrictly;return e[i]||!r&&t&&t.isDisabled}},{key:"isLeaf",get:function(){var e=this.data,t=this.loaded,n=this.hasChildren,i=this.children,r=this.config,a=r.lazy,o=r.leaf;if(a){var s=Object(x.isDef)(e[o])?e[o]:!!t&&!i.length;return this.hasChildren=!s,s}return!n}}]),e}();var O=function e(t,n){return t.reduce((function(t,i){return i.isLeaf?t.push(i):(!n&&t.push(i),t=t.concat(e(i.children,n))),t}),[])},V=function(){function e(t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.config=n,this.initNodes(t)}return e.prototype.initNodes=function(e){var t=this;e=Object(d.coerceTruthyValueToArray)(e),this.nodes=e.map((function(e){return new _(e,t.config)})),this.flattedNodes=this.getFlattedNodes(!1,!1),this.leafNodes=this.getFlattedNodes(!0,!1)},e.prototype.appendNode=function(e,t){var n=new _(e,this.config,t);(t?t.children:this.nodes).push(n)},e.prototype.appendNodes=function(e,t){var n=this;(e=Object(d.coerceTruthyValueToArray)(e)).forEach((function(e){return n.appendNode(e,t)}))},e.prototype.getNodes=function(){return this.nodes},e.prototype.getFlattedNodes=function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],n=e?this.leafNodes:this.flattedNodes;return t?n:O(this.nodes,e)},e.prototype.getNodeByValue=function(e){if(e){var t=this.getFlattedNodes(!1,!this.config.lazy).filter((function(t){return Object(d.valueEquals)(t.path,e)||t.value===e}));return t&&t.length?t[0]:null}return null},e}(),P=n(9),E=n.n(P),j=n(42),T=n.n(j),w=n(31),L=n.n(w),M=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},$=T.a.keys,q={expandTrigger:"click",multiple:!1,checkStrictly:!1,emitPath:!0,lazy:!1,lazyLoad:d.noop,value:"value",label:"label",children:"children",leaf:"leaf",disabled:"disabled",hoverThreshold:500},A=function(e){return!e.getAttribute("aria-owns")},I=function(e,t){var n=e.parentNode;if(n){var i=n.querySelectorAll('.hn-cascader-node[tabindex="-1"]');return i[Array.prototype.indexOf.call(i,e)+t]||null}return null},z=function(e,t){if(e){var n=e.id.split("-");return Number(n[n.length-2])}},B=function(e){e&&(e.focus(),!A(e)&&e.click())},D={name:"HnCascaderPanel",components:{CascaderMenu:C},props:{value:{},options:Array,props:Object,border:{type:Boolean,default:!0},renderLabel:Function},provide:function(){return{panel:this}},data:function(){return{checkedValue:null,checkedNodePaths:[],store:[],menus:[],activePath:[],loadCount:0}},computed:{config:function(){return E()(M({},q),this.props||{})},multiple:function(){return this.config.multiple},checkStrictly:function(){return this.config.checkStrictly},leafOnly:function(){return!this.checkStrictly},isHoverMenu:function(){return"hover"===this.config.expandTrigger},renderLabelFn:function(){return this.renderLabel||this.$scopedSlots.default}},watch:{options:{handler:function(){this.initStore()},immediate:!0,deep:!0},value:function(){this.syncCheckedValue(),this.checkStrictly&&this.calculateCheckedNodePaths()},checkedValue:function(e){Object(d.isEqual)(e,this.value)||(this.checkStrictly&&this.calculateCheckedNodePaths(),this.$emit("input",e),this.$emit("change",e))}},mounted:function(){Object(d.isEmpty)(this.value)||this.syncCheckedValue()},methods:{initStore:function(){var e=this.config,t=this.options;e.lazy&&Object(d.isEmpty)(t)?this.lazyLoad():(this.store=new V(t,e),this.menus=[this.store.getNodes()],this.syncMenuState())},syncCheckedValue:function(){var e=this.value,t=this.checkedValue;Object(d.isEqual)(e,t)||(this.checkedValue=e,this.syncMenuState())},syncMenuState:function(){var e=this.multiple,t=this.checkStrictly;this.syncActivePath(),e&&this.syncMultiCheckState(),t&&this.calculateCheckedNodePaths(),this.$nextTick(this.scrollIntoView)},syncMultiCheckState:function(){var e=this;this.getFlattedNodes(this.leafOnly).forEach((function(t){t.syncCheckState(e.checkedValue)}))},syncActivePath:function(){var e=this,t=this.store,n=this.multiple,i=this.activePath,r=this.checkedValue;if(Object(d.isEmpty)(i))if(Object(d.isEmpty)(r))this.activePath=[],this.menus=[t.getNodes()];else{var a=n?r[0]:r,o=((this.getNodeByValue(a)||{}).pathNodes||[]).slice(0,-1);this.expandNodes(o)}else{var s=i.map((function(t){return e.getNodeByValue(t.getValue())}));this.expandNodes(s)}},expandNodes:function(e){var t=this;e.forEach((function(e){return t.handleExpand(e,!0)}))},calculateCheckedNodePaths:function(){var e=this,t=this.checkedValue,n=this.multiple?Object(d.coerceTruthyValueToArray)(t):[t];this.checkedNodePaths=n.map((function(t){var n=e.getNodeByValue(t);return n?n.pathNodes:[]}))},handleKeyDown:function(e){var t=e.target;switch(e.keyCode){case $.up:var n=I(t,-1);B(n);break;case $.down:var i=I(t,1);B(i);break;case $.left:var r=this.$refs.menu[z(t)-1];if(r){var a=r.$el.querySelector('.hn-cascader-node[aria-expanded="true"]');B(a)}break;case $.right:var o=this.$refs.menu[z(t)+1];if(o){var s=o.$el.querySelector('.hn-cascader-node[tabindex="-1"]');B(s)}break;case $.enter:!function(e){if(e){var t=e.querySelector("input");t?t.click():A(e)&&e.click()}}(t);break;case $.esc:case $.tab:this.$emit("close");break;default:return}},handleExpand:function(e,t){var n=this.activePath,i=e.level,r=n.slice(0,i-1),a=this.menus.slice(0,i);if(e.isLeaf||(r.push(e),a.push(e.children)),this.activePath=r,this.menus=a,!t){var o=r.map((function(e){return e.getValue()})),s=n.map((function(e){return e.getValue()}));Object(d.valueEquals)(o,s)||(this.$emit("active-item-change",o),this.$emit("expand-change",o))}},handleCheckChange:function(e){this.checkedValue=e},lazyLoad:function(e,t){var n=this,i=this.config;e||(e=e||{root:!0,level:0},this.store=new V([],i),this.menus=[this.store.getNodes()]),e.loading=!0;i.lazyLoad(e,(function(i){var r=e.root?null:e;if(i&&i.length&&n.store.appendNodes(i,r),e.loading=!1,e.loaded=!0,Array.isArray(n.checkedValue)){var a=n.checkedValue[n.loadCount++],o=n.config.value,s=n.config.leaf;if(Array.isArray(i)&&i.filter((function(e){return e[o]===a})).length>0){var c=n.store.getNodeByValue(a);c.data[s]||n.lazyLoad(c,(function(){n.handleExpand(c)})),n.loadCount===n.checkedValue.length&&n.$parent.computePresentText()}}t&&t(i)}))},calculateMultiCheckedValue:function(){this.checkedValue=this.getCheckedNodes(this.leafOnly).map((function(e){return e.getValueByOption()}))},scrollIntoView:function(){this.$isServer||(this.$refs.menu||[]).forEach((function(e){var t=e.$el;if(t){var n=t.querySelector(".hn-scrollbar__wrap"),i=t.querySelector(".hn-cascader-node.is-active")||t.querySelector(".hn-cascader-node.in-active-path");L()(n,i)}}))},getNodeByValue:function(e){return this.store.getNodeByValue(e)},getFlattedNodes:function(e){var t=!this.config.lazy;return this.store.getFlattedNodes(e,t)},getCheckedNodes:function(e){var t=this.checkedValue;return this.multiple?this.getFlattedNodes(e).filter((function(e){return e.checked})):Object(d.isEmpty)(t)?[]:[this.getNodeByValue(t)]},clearCheckedNodes:function(){var e=this.config,t=this.leafOnly,n=e.multiple,i=e.emitPath;n?(this.getCheckedNodes(t).filter((function(e){return!e.isDisabled})).forEach((function(e){return e.doCheck(!1)})),this.calculateMultiCheckedValue()):this.checkedValue=i?[]:null}}},H=Object(v.a)(D,i,[],!1,null,null,null);H.options.__file="packages/cascader-panel/src/cascader-panel.vue";var F=H.exports;F.install=function(e){e.component(F.name,F)};t.default=F},9:function(e,t){e.exports=require("jiku-ui/lib/utils/merge")}}).default;