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