UNPKG

vxe-pc-ui

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