jiku-ui/lib/slider.js

A Component Library for Vue.js.

module.exports=function(t){var i={};function e(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,e),s.l=!0,s.exports}return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{enumerable:!0,get:n})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,i){if(1&i&&(t=e(t)),8&i)return t;if(4&i&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(e.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&i&&"string"!=typeof t)for(var s in t)e.d(n,s,function(i){return t[i]}.bind(null,s));return n},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},e.p="",e(e.s=81)}({0:function(t,i,e){"use strict";function n(t,i,e,n,s,r,o,a){var l,u="function"==typeof t?t.options:t;if(i&&(u.render=i,u.staticRenderFns=e,u._compiled=!0),n&&(u.functional=!0),r&&(u._scopeId="data-v-"+r),o?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},u._ssrRegister=l):s&&(l=a?function(){s.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:s),l)if(u.functional){u._injectStyles=l;var h=u.render;u.render=function(t,i){return l.call(i),h(t,i)}}else{var c=u.beforeCreate;u.beforeCreate=c?[].concat(c,l):[l]}return{exports:t,options:u}}e.d(i,"a",(function(){return n}))},24:function(t,i){t.exports=require("jiku-ui/lib/tooltip")},4:function(t,i){t.exports=require("jiku-ui/lib/mixins/emitter")},54:function(t,i){t.exports=require("jiku-ui/lib/input-number")},81:function(t,i,e){"use strict";e.r(i);var n=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{staticClass:"hn-slider",class:{"is-vertical":t.vertical,"hn-slider--with-input":t.showInput},attrs:{role:"slider","aria-valuemin":t.min,"aria-valuemax":t.max,"aria-orientation":t.vertical?"vertical":"horizontal","aria-disabled":t.sliderDisabled}},[t.showInput&&!t.range?e("hn-input-number",{ref:"input",staticClass:"hn-slider__input",attrs:{step:t.step,disabled:t.sliderDisabled,controls:t.showInputControls,min:t.min,max:t.max,debounce:t.debounce,size:t.inputSize},on:{change:t.emitChange},model:{value:t.firstValue,callback:function(i){t.firstValue=i},expression:"firstValue"}}):t._e(),e("div",{ref:"slider",staticClass:"hn-slider__runway",class:{"show-input":t.showInput,disabled:t.sliderDisabled},style:t.runwayStyle,on:{click:t.onSliderClick}},[e("div",{staticClass:"hn-slider__bar",style:t.barStyle}),e("slider-button",{ref:"button1",attrs:{vertical:t.vertical,"tooltip-class":t.tooltipClass},model:{value:t.firstValue,callback:function(i){t.firstValue=i},expression:"firstValue"}}),t.range?e("slider-button",{ref:"button2",attrs:{vertical:t.vertical,"tooltip-class":t.tooltipClass},model:{value:t.secondValue,callback:function(i){t.secondValue=i},expression:"secondValue"}}):t._e(),t._l(t.stops,(function(i,n){return t.showStops?e("div",{key:n,staticClass:"hn-slider__stop",style:t.getStopStyle(i)}):t._e()})),t.markList.length>0?[e("div",t._l(t.markList,(function(i,n){return e("div",{key:n,staticClass:"hn-slider__stop hn-slider__marks-stop",style:t.getStopStyle(i.position)})})),0),e("div",{staticClass:"hn-slider__marks"},t._l(t.markList,(function(i,n){return e("slider-marker",{key:n,style:t.getStopStyle(i.position),attrs:{mark:i.mark}})})),1)]:t._e()],2)],1)};n._withStripped=!0;var s=e(54),r=e.n(s),o=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{ref:"button",staticClass:"hn-slider__button-wrapper",class:{hover:t.hovering,dragging:t.dragging},style:t.wrapperStyle,attrs:{tabindex:"0"},on:{mouseenter:t.handleMouseEnter,mouseleave:t.handleMouseLeave,mousedown:t.onButtonDown,touchstart:t.onButtonDown,focus:t.handleMouseEnter,blur:t.handleMouseLeave,keydown:[function(i){return!i.type.indexOf("key")&&t._k(i.keyCode,"left",37,i.key,["Left","ArrowLeft"])||"button"in i&&0!==i.button?null:t.onLeftKeyDown(i)},function(i){return!i.type.indexOf("key")&&t._k(i.keyCode,"right",39,i.key,["Right","ArrowRight"])||"button"in i&&2!==i.button?null:t.onRightKeyDown(i)},function(i){return!i.type.indexOf("key")&&t._k(i.keyCode,"down",40,i.key,["Down","ArrowDown"])?null:(i.preventDefault(),t.onLeftKeyDown(i))},function(i){return!i.type.indexOf("key")&&t._k(i.keyCode,"up",38,i.key,["Up","ArrowUp"])?null:(i.preventDefault(),t.onRightKeyDown(i))}]}},[e("hn-tooltip",{ref:"tooltip",attrs:{placement:"top","popper-class":t.tooltipClass,disabled:!t.showTooltip}},[e("span",{attrs:{slot:"content"},slot:"content"},[t._v(t._s(t.formatValue))]),e("div",{staticClass:"hn-slider__button",class:{hover:t.hovering,dragging:t.dragging}})])],1)};o._withStripped=!0;var a=e(24),l={name:"HnSliderButton",components:{HnTooltip:e.n(a).a},props:{value:{type:Number,default:0},vertical:{type:Boolean,default:!1},tooltipClass:String},data:function(){return{hovering:!1,dragging:!1,isClick:!1,startX:0,currentX:0,startY:0,currentY:0,startPosition:0,newPosition:null,oldValue:this.value}},computed:{disabled:function(){return this.$parent.sliderDisabled},max:function(){return this.$parent.max},min:function(){return this.$parent.min},step:function(){return this.$parent.step},showTooltip:function(){return this.$parent.showTooltip},precision:function(){return this.$parent.precision},currentPosition:function(){return(this.value-this.min)/(this.max-this.min)*100+"%"},enableFormat:function(){return this.$parent.formatTooltip instanceof Function},formatValue:function(){return this.enableFormat&&this.$parent.formatTooltip(this.value)||this.value},wrapperStyle:function(){return this.vertical?{bottom:this.currentPosition}:{left:this.currentPosition}}},watch:{dragging:function(t){this.$parent.dragging=t}},methods:{displayTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!0)},hideTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!1)},handleMouseEnter:function(){this.hovering=!0,this.displayTooltip()},handleMouseLeave:function(){this.hovering=!1,this.hideTooltip()},onButtonDown:function(t){this.disabled||(t.preventDefault(),this.onDragStart(t),window.addEventListener("mousemove",this.onDragging),window.addEventListener("touchmove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("touchend",this.onDragEnd),window.addEventListener("contextmenu",this.onDragEnd))},onLeftKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)-this.step/(this.max-this.min)*100,this.setPosition(this.newPosition),this.$parent.emitChange())},onRightKeyDown:function(){this.disabled||(this.newPosition=parseFloat(this.currentPosition)+this.step/(this.max-this.min)*100,this.setPosition(this.newPosition),this.$parent.emitChange())},onDragStart:function(t){this.dragging=!0,this.isClick=!0,"touchstart"===t.type&&(t.clientY=t.touches[0].clientY,t.clientX=t.touches[0].clientX),this.vertical?this.startY=t.clientY:this.startX=t.clientX,this.startPosition=parseFloat(this.currentPosition),this.newPosition=this.startPosition},onDragging:function(t){if(this.dragging){this.isClick=!1,this.displayTooltip(),this.$parent.resetSize();var i=0;"touchmove"===t.type&&(t.clientY=t.touches[0].clientY,t.clientX=t.touches[0].clientX),this.vertical?(this.currentY=t.clientY,i=(this.startY-this.currentY)/this.$parent.sliderSize*100):(this.currentX=t.clientX,i=(this.currentX-this.startX)/this.$parent.sliderSize*100),this.newPosition=this.startPosition+i,this.setPosition(this.newPosition)}},onDragEnd:function(){var t=this;this.dragging&&(setTimeout((function(){t.dragging=!1,t.hideTooltip(),t.isClick||(t.setPosition(t.newPosition),t.$parent.emitChange())}),0),window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("touchmove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("touchend",this.onDragEnd),window.removeEventListener("contextmenu",this.onDragEnd))},setPosition:function(t){var i=this;if(null!==t&&!isNaN(t)){t<0?t=0:t>100&&(t=100);var e=100/((this.max-this.min)/this.step),n=Math.round(t/e)*e*(this.max-this.min)*.01+this.min;n=parseFloat(n.toFixed(this.precision)),this.$emit("input",n),this.$nextTick((function(){i.displayTooltip(),i.$refs.tooltip&&i.$refs.tooltip.updatePopper()})),this.dragging||this.value===this.oldValue||(this.oldValue=this.value)}}}},u=e(0),h=Object(u.a)(l,o,[],!1,null,null,null);h.options.__file="packages/slider/src/button.vue";var c=h.exports,d={name:"HnMarker",props:{mark:{type:[String,Object]}},render:function(){var t=arguments[0],i="string"==typeof this.mark?this.mark:this.mark.label;return t("div",{class:"hn-slider__marks-text",style:this.mark.style||{}},[i])}},m=e(4),p={name:"HnSlider",mixins:[e.n(m).a],inject:{hnForm:{default:""}},props:{min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},value:{type:[Number,Array],default:0},showInput:{type:Boolean,default:!1},showInputControls:{type:Boolean,default:!0},inputSize:{type:String,default:"small"},showStops:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:!0},formatTooltip:Function,disabled:{type:Boolean,default:!1},range:{type:Boolean,default:!1},vertical:{type:Boolean,default:!1},height:{type:String},debounce:{type:Number,default:300},label:{type:String},tooltipClass:String,marks:Object},components:{HnInputNumber:r.a,SliderButton:c,SliderMarker:d},data:function(){return{firstValue:null,secondValue:null,oldValue:null,dragging:!1,sliderSize:1}},watch:{value:function(t,i){this.dragging||Array.isArray(t)&&Array.isArray(i)&&t.every((function(t,e){return t===i[e]}))||this.setValues()},dragging:function(t){t||this.setValues()},firstValue:function(t){this.range?this.$emit("input",[this.minValue,this.maxValue]):this.$emit("input",t)},secondValue:function(){this.range&&this.$emit("input",[this.minValue,this.maxValue])},min:function(){this.setValues()},max:function(){this.setValues()}},methods:{valueChanged:function(){var t=this;return this.range?![this.minValue,this.maxValue].every((function(i,e){return i===t.oldValue[e]})):this.value!==this.oldValue},setValues:function(){if(this.min>this.max)console.error("[Heiner Error][Slider]min should not be greater than max.");else{var t=this.value;this.range&&Array.isArray(t)?t[1]<this.min?this.$emit("input",[this.min,this.min]):t[0]>this.max?this.$emit("input",[this.max,this.max]):t[0]<this.min?this.$emit("input",[this.min,t[1]]):t[1]>this.max?this.$emit("input",[t[0],this.max]):(this.firstValue=t[0],this.secondValue=t[1],this.valueChanged()&&(this.dispatch("HnFormItem","hn.form.change",[this.minValue,this.maxValue]),this.oldValue=t.slice())):this.range||"number"!=typeof t||isNaN(t)||(t<this.min?this.$emit("input",this.min):t>this.max?this.$emit("input",this.max):(this.firstValue=t,this.valueChanged()&&(this.dispatch("HnFormItem","hn.form.change",t),this.oldValue=t)))}},setPosition:function(t){var i=this.min+t*(this.max-this.min)/100;if(this.range){var e=void 0;e=Math.abs(this.minValue-i)<Math.abs(this.maxValue-i)?this.firstValue<this.secondValue?"button1":"button2":this.firstValue>this.secondValue?"button1":"button2",this.$refs[e].setPosition(t)}else this.$refs.button1.setPosition(t)},onSliderClick:function(t){if(!this.sliderDisabled&&!this.dragging){if(this.resetSize(),this.vertical){var i=this.$refs.slider.getBoundingClientRect().bottom;this.setPosition((i-t.clientY)/this.sliderSize*100)}else{var e=this.$refs.slider.getBoundingClientRect().left;this.setPosition((t.clientX-e)/this.sliderSize*100)}this.emitChange()}},resetSize:function(){this.$refs.slider&&(this.sliderSize=this.$refs.slider["client"+(this.vertical?"Height":"Width")])},emitChange:function(){var t=this;this.$nextTick((function(){t.$emit("change",t.range?[t.minValue,t.maxValue]:t.value)}))},getStopStyle:function(t){return this.vertical?{bottom:t+"%"}:{left:t+"%"}}},computed:{stops:function(){var t=this;if(!this.showStops||this.min>this.max)return[];if(0===this.step)return[];for(var i=(this.max-this.min)/this.step,e=100*this.step/(this.max-this.min),n=[],s=1;s<i;s++)n.push(s*e);return this.range?n.filter((function(i){return i<100*(t.minValue-t.min)/(t.max-t.min)||i>100*(t.maxValue-t.min)/(t.max-t.min)})):n.filter((function(i){return i>100*(t.firstValue-t.min)/(t.max-t.min)}))},markList:function(){var t=this;return this.marks?Object.keys(this.marks).map(parseFloat).sort((function(t,i){return t-i})).filter((function(i){return i<=t.max&&i>=t.min})).map((function(i){return{point:i,position:100*(i-t.min)/(t.max-t.min),mark:t.marks[i]}})):[]},minValue:function(){return Math.min(this.firstValue,this.secondValue)},maxValue:function(){return Math.max(this.firstValue,this.secondValue)},barSize:function(){return this.range?100*(this.maxValue-this.minValue)/(this.max-this.min)+"%":100*(this.firstValue-this.min)/(this.max-this.min)+"%"},barStart:function(){return this.range?100*(this.minValue-this.min)/(this.max-this.min)+"%":"0%"},precision:function(){var t=[this.min,this.max,this.step].map((function(t){var i=(""+t).split(".")[1];return i?i.length:0}));return Math.max.apply(null,t)},runwayStyle:function(){return this.vertical?{height:this.height}:{}},barStyle:function(){return this.vertical?{height:this.barSize,bottom:this.barStart}:{width:this.barSize,left:this.barStart}},sliderDisabled:function(){return this.disabled||(this.hnForm||{}).disabled}},mounted:function(){var t=void 0;this.range?(Array.isArray(this.value)?(this.firstValue=Math.max(this.min,this.value[0]),this.secondValue=Math.min(this.max,this.value[1])):(this.firstValue=this.min,this.secondValue=this.max),this.oldValue=[this.firstValue,this.secondValue],t=this.firstValue+"-"+this.secondValue):("number"!=typeof this.value||isNaN(this.value)?this.firstValue=this.min:this.firstValue=Math.min(this.max,Math.max(this.min,this.value)),this.oldValue=this.firstValue,t=this.firstValue),this.$el.setAttribute("aria-valuetext",t),this.$el.setAttribute("aria-label",this.label?this.label:"slider between "+this.min+" and "+this.max),this.resetSize(),window.addEventListener("resize",this.resetSize)},beforeDestroy:function(){window.removeEventListener("resize",this.resetSize)}},f=Object(u.a)(p,n,[],!1,null,null,null);f.options.__file="packages/slider/src/main.vue";var g=f.exports;g.install=function(t){t.component(g.name,g)};i.default=g}}).default;