vxe-pc-ui/lib/slider/src/slider.min.js

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeSlider",props:{modelValue:[String,Number,Array],vertical:Boolean,max:{type:[String,Number],default:()=>(0,_ui.getConfig)().slider.max},min:{type:[String,Number],default:()=>(0,_ui.getConfig)().slider.min},step:{type:[String,Number],default:()=>(0,_ui.getConfig)().slider.step},size:{type:String,default:()=>(0,_ui.getConfig)().slider.size||(0,_ui.getConfig)().size},range:{type:Boolean,default:()=>(0,_ui.getConfig)().slider.range},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null}},emits:["update:modelValue","change","track-dragstart","track-dragover","track-dragend"],setup(u,e){let a=e.emit,r=(0,_vue.inject)("$xeForm",null),i=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();let n=(0,_ui.useSize)(u).computeSize,d=(0,_vue.ref)(),s=(0,_vue.ref)(),o=(0,_vue.ref)(),v=(0,_vue.ref)(),f=(0,_vue.ref)(),_=(0,_vue.reactive)({startValue:0,endValue:0}),l={refElem:d},m=(0,_vue.computed)(()=>{var e=u.readonly;return null===e?!!r&&r.props.readonly:e}),c=(0,_vue.computed)(()=>{var e=u.disabled;return null===e?!!r&&r.props.disabled:e}),p=(0,_vue.computed)(()=>_xeUtils.default.toNumber(u.max||0)),x=(0,_vue.computed)(()=>_xeUtils.default.toNumber(u.min||0)),g={},V={xID:t,props:u,context:e,reactData:_,getRefMaps:()=>l,getComputeMaps:()=>g},b=e=>{a("update:modelValue",e)},y=(e,t,l)=>{a(e,(0,_ui.createEvent)(l,{$slider:V},t))};t={dispatchEvent:y};let U=e=>{var t=u.range,l=p.value,a=x.value;return t?_xeUtils.default.floor((e-a)/_xeUtils.default.toNumber(l-a)*100):0},h=(e,t)=>{var l=u.range,a=p.value,r=x.value;return _xeUtils.default.floor((t-(l?e:0)-r)/_xeUtils.default.toNumber(a-r)*100)},N=()=>{var e,t,l=u.modelValue;_xeUtils.default.isArray(l)?([e,t]=_xeUtils.default.clone(l,!0).sort(),_.startValue=_xeUtils.default.floor(_xeUtils.default.toNumber(e||0)),_.endValue=_xeUtils.default.floor(_xeUtils.default.toNumber(t||0))):(_.startValue=0,_.endValue=_xeUtils.default.floor(_xeUtils.default.toNumber(l||0)))},M=()=>{var{startValue:e,endValue:t}=_,l=o.value,a=v.value,r=f.value;let u=0,i=0;i=t<e?(u=U(t),h(t,e)):(u=U(e),h(e,t)),l&&(l.style.left=u+"%",l.style.width=i+"%"),a&&(a.style.left=u+"%"),r&&(r.style.left=_xeUtils.default.floor(u+i)+"%")},C=e=>{var t=u.range,{startValue:l,endValue:a}=_,t=t?[l,a].sort():a;b(t),y("change",{value:t},e),r&&i&&r.triggerItemEvent(e,i.itemConfig.field,t)},E=(e,a)=>{var t=m.value,l=c.value;let r=p.value,u=x.value;t||l||(e.preventDefault(),document.onmousemove=e=>{e.preventDefault();var t=d.value,l=s.value;t&&l&&(t=l.getBoundingClientRect(),l=(e.clientX-t.left)/t.width,a?_.endValue=_xeUtils.default.floor(Math.max(u,Math.min(r,l*(r-u)+u))):_.startValue=_xeUtils.default.floor(Math.max(u,Math.min(r,l*(r-u)))),y("track-dragover",{startValue:_.startValue,endValue:_.endValue},e)),M()},document.onmouseup=e=>{document.onmousemove=null,document.onmouseup=null,y("track-dragend",{startValue:_.startValue,endValue:_.endValue},e),C(e),M()},y("track-dragstart",{startValue:_.startValue,endValue:_.endValue},e))},S=e=>{var t=f.value,l=e.currentTarget;E(e,!!t&&t.offsetLeft<l.offsetLeft)},k=e=>{var t=v.value,l=e.currentTarget;E(e,!t||l.offsetLeft>t.offsetLeft)};Object.assign(V,t,{});return(0,_vue.watch)(()=>u.modelValue,()=>{N()}),(0,_vue.onMounted)(()=>{M()}),N(),V.renderVN=()=>{var{vertical:e,range:t}=u,l=n.value,a=m.value,r=c.value;return(0,_vue.h)("div",{ref:d,class:["vxe-slider",{["size--"+l]:l,"is--vertical":e,"is--readonly":a,"is--disabled":r}]},[(0,_vue.h)("div",{class:"vxe-slider--inner"},[(0,_vue.h)("div",{ref:s,class:"vxe-slider--bar-wrapper"}),(0,_vue.h)("div",{ref:o,class:"vxe-slider--bar-track"}),a||!t?(0,_ui.renderEmptyElement)(V):(0,_vue.h)("div",{ref:v,class:"vxe-slider--bar-btn vxe-slider--start-btn",onMousedown:S}),a?(0,_ui.renderEmptyElement)(V):(0,_vue.h)("div",{ref:f,class:"vxe-slider--bar-btn vxe-slider--end-btn",onMousedown:k})])])},V},render(){return this.renderVN()}});