quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 13.7 kB
JavaScript
import{_ as t}from"../slicedToArray.js";import{_ as e,a as r}from"../typeof.js";import{_ as n,a,b as i,c as u,P as o,H as s,d as l,N as d,O as c,B as h}from"../index2.js";import{_ as p}from"../defineProperty.js";import{b as v,c as b}from"../index3.js";import"../unsupportedIterableToArray.js";function f(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function g(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?f(Object(r),!0).forEach((function(e){p(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):f(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function m(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var r,i=n(t);if(e){var u=n(this).constructor;r=Reflect.construct(i,arguments,u)}else r=i.apply(this,arguments);return a(this,r)}}var y=function(t){return t.getBoundingClientRect()},k=function(n){i(l,s);var a=m(l);function l(){var r;e(this,l);for(var n=arguments.length,i=new Array(n),s=0;s<n;s++)i[s]=arguments[s];return r=a.call.apply(a,[this].concat(i)),p(u(r),"min",0),p(u(r),"max",100),p(u(r),"step",1),p(u(r),"range",!1),p(u(r),"reverse",!1),p(u(r),"disabled",!1),p(u(r),"readonly",!1),p(u(r),"vertical",!1),p(u(r),"barHeight",2),p(u(r),"buttonSize",24),p(u(r),"activeColor","#1989fa"),p(u(r),"inactiveColor","#e5e5e5"),p(u(r),"value",0),p(u(r),"innerValue",0),p(u(r),"dragStatus",""),p(u(r),"buttonIndex",0),p(u(r),"current",0),p(u(r),"startValue",0),p(u(r),"startX",0),p(u(r),"startY",0),p(u(r),"deltaX",0),p(u(r),"deltaY",0),p(u(r),"rootRef",o()),p(u(r),"button0Ref",o()),p(u(r),"button1Ref",o()),p(u(r),"handleClick",(function(e){if(e.stopPropagation(),!r.disabled&&!r.readonly){r.updateStartValue();var n=y(r.rootRef.current),a=r.vertical?n.height:n.width,i=Number(r.min)+(r.vertical?r.reverse?n.bottom-e.clientY:e.clientY-n.top:r.reverse?n.right-e.clientX:e.clientX-n.left)/a*r.scope;if(r.isRange(r.innerValue)){var u=t(r.innerValue,2),o=u[0],s=u[1];i<=(o+s)/2?r.updateValue([i,s],!0):r.updateValue([o,i],!0)}else r.updateValue(i,!0)}})),p(u(r),"handleTouchStart",(function(t,e){if(!r.disabled&&!r.readonly){var n=t.touches[0];r.startX=n.clientX,r.startY=n.clientY,r.deltaX=0,r.deltaY=0,"number"==typeof e&&(r.buttonIndex=e),r.current=r.innerValue,r.updateStartValue(),r.dragStatus="start"}})),p(u(r),"handleTouchMove",(function(t){if(!r.disabled&&!r.readonly){"start"===r.dragStatus&&r.$emit("dragstart",{detail:{event:t}}),t.preventDefault(),t.stopPropagation();var e=t.touches[0];r.deltaX=e.clientX-r.startX,r.deltaY=e.clientY-r.startY,r.dragStatus="dragging";var n=y(r.rootRef.current),a=(r.vertical?r.deltaY:r.deltaX)/(r.vertical?n.height:n.width)*r.scope;if(r.reverse&&(a=-a),r.isRange(r.startValue)){var i=r.reverse?1-r.buttonIndex:r.buttonIndex;r.current[i]=r.startValue[i]+a}else r.current=r.startValue+a;r.updateValue(r.current)}})),p(u(r),"handleTouchEnd",(function(t){r.disabled||r.readonly||("dragging"===r.dragStatus&&(r.updateValue(r.current,!0),r.$emit("dragend",{detail:{value:r.innerValue,event:t}})),r.dragStatus="")})),p(u(r),"handleMouseDown",(function(t,e){r.disabled||r.readonly||(t.preventDefault(),t.stopPropagation(),r.startX=t.clientX,r.startY=t.clientY,r.deltaX=0,r.deltaY=0,"number"==typeof e&&(r.buttonIndex=e),r.current=r.innerValue,r.updateStartValue(),r.dragStatus="start")})),p(u(r),"handleMouseMove",(function(t){if(!r.disabled&&!r.readonly&&r.dragStatus){"start"===r.dragStatus&&r.$emit("dragstart",{detail:{event:t}}),t.preventDefault(),r.deltaX=t.clientX-r.startX,r.deltaY=t.clientY-r.startY,r.dragStatus="dragging";var e=y(r.rootRef.current),n=(r.vertical?r.deltaY:r.deltaX)/(r.vertical?e.height:e.width)*r.scope;if(r.reverse&&(n=-n),r.isRange(r.startValue)){var a=r.reverse?1-r.buttonIndex:r.buttonIndex;r.current[a]=r.startValue[a]+n}else r.current=r.startValue+n;r.updateValue(r.current)}})),p(u(r),"handleMouseUp",(function(t){r.disabled||r.readonly||("dragging"===r.dragStatus&&(r.updateValue(r.current,!0),r.$emit("dragend",{detail:{value:r.innerValue,event:t}})),r.dragStatus="")})),r}return r(l,[{key:"scope",get:function(){return Number(this.max)-Number(this.min)}},{key:"isRange",value:function(t){return this.range&&Array.isArray(t)}},{key:"calcMainAxis",value:function(){var t=this.innerValue,e=Number(this.min);return this.isRange(t)?"".concat(100*(t[1]-t[0])/this.scope,"%"):"".concat(100*(Number(t)-e)/this.scope,"%")}},{key:"calcOffset",value:function(){var t=this.innerValue,e=Number(this.min);return this.isRange(t)?"".concat(100*(t[0]-e)/this.scope,"%"):"0%"}},{key:"format",value:function(t){var e=Number(this.min),r=Number(this.max),n=Number(this.step);t=v(t,e,r);var a=Math.round((t-e)/n)*n;return Math.round(1e3*(e+a))/1e3}},{key:"updateStartValue",value:function(){var t=this,e=this.innerValue;this.isRange(e)?this.startValue=e.map((function(e){return t.format(e)})):this.startValue=this.format(Number(e))}},{key:"handleRangeValue",value:function(t){var e,r,n=null!==(e=t[0])&&void 0!==e?e:Number(this.min),a=null!==(r=t[1])&&void 0!==r?r:Number(this.max);return n>a?[a,n]:[n,a]}},{key:"isSameValue",value:function(t,e){return Array.isArray(t)&&Array.isArray(e)?t[0]===e[0]&&t[1]===e[1]:t===e}},{key:"updateValue",value:function(t,e){var r=this;t=this.isRange(t)?this.handleRangeValue(t).map((function(t){return r.format(t)})):this.format(Number(t)),this.isSameValue(t,this.innerValue)||(this.innerValue=t,this.$emit("change",{detail:{value:t}})),e&&!this.isSameValue(t,this.startValue)&&this.$emit("change",{detail:{value:t}})}},{key:"setValue",value:function(t){var e=this;this.isRange(t)?this.innerValue=this.handleRangeValue(t).map((function(t){return e.format(t)})):this.innerValue=this.format(Number(t))}},{key:"getValue",value:function(){return this.innerValue}},{key:"componentDidMount",value:function(){this.initValue(),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp)}},{key:"parseValue",value:function(t){if(null==t)return null;if(Array.isArray(t))return t.length>=2?[Number(t[0]),Number(t[1])]:null;if("number"==typeof t)return t;if("string"==typeof t){if(t.startsWith("["))try{var e=JSON.parse(t);if(Array.isArray(e)&&e.length>=2)return[Number(e[0]),Number(e[1])]}catch(t){}if(t.includes(",")){var r=t.split(",").map((function(t){return Number(t.trim())}));if(r.length>=2&&!isNaN(r[0])&&!isNaN(r[1]))return[r[0],r[1]]}var n=Number(t);if(!isNaN(n))return n}return null}},{key:"initValue",value:function(){var t=this,e=this.parseValue(this.value);this.range?Array.isArray(e)?this.innerValue=this.handleRangeValue(e).map((function(e){return t.format(e)})):this.innerValue=[Number(this.min),Number(this.min)]:"number"==typeof e?this.innerValue=this.format(e):Array.isArray(e)?this.innerValue=this.format(e[0]):this.innerValue=Number(this.min)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp)}},{key:"getWrapperStyle",value:function(){var t=[];return"#e5e5e5"!==this.inactiveColor&&t.push("--quark-slider-inactive-background: ".concat(this.inactiveColor)),2!==this.barHeight&&t.push("--quark-slider-bar-height: ".concat(this.barHeight,"px")),t.join("; ")}},{key:"getBarStyle",value:function(){var t=this.vertical?"height":"width",e=["".concat(t,": ").concat(this.calcMainAxis())];"#1989fa"!==this.activeColor&&e.push("background: ".concat(this.activeColor)),this.dragStatus&&e.push("transition: none");var r=this.vertical?this.reverse?"bottom":"top":this.reverse?"right":"left";return e.push("".concat(r,": ").concat(this.calcOffset())),e.join("; ")}},{key:"getButtonStyle",value:function(){var t=[];return 24!==this.buttonSize&&(t.push("width: ".concat(this.buttonSize,"px")),t.push("height: ".concat(this.buttonSize,"px"))),t.join("; ")}},{key:"getButtonClassName",value:function(t){if("number"==typeof t){return b("quark-slider-button-wrapper",p({},"quark-slider-button-wrapper-".concat(["left","right"][t]),!0))}return b("quark-slider-button-wrapper",{"quark-slider-button-wrapper-left":this.reverse,"quark-slider-button-wrapper-right":!this.reverse})}},{key:"renderButton",value:function(t){var e=this,r="number"==typeof t?this.innerValue[t]:this.innerValue;return s.h("div",{ref:0===t?this.button0Ref:this.button1Ref,role:"slider",class:this.getButtonClassName(t),tabindex:this.disabled?void 0:0,"aria-valuemin":this.min,"aria-valuenow":r,"aria-valuemax":this.max,"aria-disabled":this.disabled||void 0,"aria-readonly":this.readonly||void 0,"aria-orientation":this.vertical?"vertical":"horizontal",onTouchstart:function(r){e.handleTouchStart(r,t)},onTouchmove:this.handleTouchMove,onTouchend:this.handleTouchEnd,onTouchcancel:this.handleTouchEnd,onMousedown:function(r){e.handleMouseDown(r,t)},onClick:function(t){return t.stopPropagation()}},s.h("slot",{name:0===t?"left-button":1===t?"right-button":"button"},s.h("div",{class:"quark-slider-button",style:this.getButtonStyle()})))}},{key:"render",value:function(){var t=b("quark-slider",{"quark-slider-vertical":this.vertical,"quark-slider-disabled":this.disabled});return s.h("div",g(g({ref:this.rootRef,class:t,style:this.getWrapperStyle()},{part:"root"}),{},{onClick:this.handleClick}),s.h("div",{class:"quark-slider-bar",style:this.getBarStyle()},this.range?[this.renderButton(0),this.renderButton(1)]:this.renderButton()))}}]),l}();l([d({type:Number})],k.prototype,"min",void 0),l([d({type:Number})],k.prototype,"max",void 0),l([d({type:Number})],k.prototype,"step",void 0),l([d({type:Boolean})],k.prototype,"range",void 0),l([d({type:Boolean})],k.prototype,"reverse",void 0),l([d({type:Boolean})],k.prototype,"disabled",void 0),l([d({type:Boolean})],k.prototype,"readonly",void 0),l([d({type:Boolean})],k.prototype,"vertical",void 0),l([d({type:Number})],k.prototype,"barHeight",void 0),l([d({type:Number})],k.prototype,"buttonSize",void 0),l([d({type:String})],k.prototype,"activeColor",void 0),l([d({type:String})],k.prototype,"inactiveColor",void 0),l([d()],k.prototype,"value",void 0),l([c()],k.prototype,"innerValue",void 0),l([c()],k.prototype,"dragStatus",void 0);var q=k=l([h({tag:"quark-slider",style:":host {\n /* CSS 变量定义 */\n --quark-slider-active-background: #1989fa;\n --quark-slider-inactive-background: #e5e5e5;\n --quark-slider-disabled-opacity: 0.5;\n --quark-slider-bar-height: 0.53333vw;\n --quark-slider-button-width: 6.4vw;\n --quark-slider-button-height: 6.4vw;\n --quark-slider-button-radius: 50%;\n --quark-slider-button-background: #fff;\n --quark-slider-button-shadow: 0 1px 0.53333vw rgba(0, 0, 0, 0.5);\n --quark-slider-padding: 2.13333vw;\n\n display: block;\n width: 100%;\n user-select: none;\n touch-action: none;\n}\n\n:host([vertical]) {\n display: inline-block;\n width: auto;\n height: 100%;\n}\n\n.quark-slider {\n position: relative;\n width: 100%;\n height: var(--quark-slider-bar-height);\n background: var(--quark-slider-inactive-background);\n border-radius: 266.4vw;\n cursor: pointer;\n}\n\n/* 使用伪元素扩展点击区域 */\n.quark-slider::before {\n position: absolute;\n top: calc(var(--quark-slider-padding) * -1);\n right: 0;\n bottom: calc(var(--quark-slider-padding) * -1);\n left: 0;\n content: '';\n}\n\n.quark-slider-bar {\n position: absolute;\n height: 100%;\n background: var(--quark-slider-active-background);\n border-radius: inherit;\n transition: all 0.2s;\n}\n\n.quark-slider-button-wrapper {\n position: absolute;\n cursor: grab;\n top: 50%;\n}\n\n.quark-slider-button-wrapper:active {\n cursor: grabbing;\n}\n\n/* 水平方向按钮定位 */\n.quark-slider-button-wrapper-right {\n right: 0;\n transform: translate3d(50%, -50%, 0);\n}\n\n.quark-slider-button-wrapper-left {\n left: 0;\n transform: translate3d(-50%, -50%, 0);\n}\n\n.quark-slider-button {\n width: var(--quark-slider-button-width);\n height: var(--quark-slider-button-height);\n background: var(--quark-slider-button-background);\n border-radius: var(--quark-slider-button-radius);\n box-shadow: var(--quark-slider-button-shadow);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* 禁用状态 */\n.quark-slider-disabled {\n cursor: not-allowed;\n opacity: var(--quark-slider-disabled-opacity);\n}\n\n.quark-slider-disabled .quark-slider-button-wrapper {\n cursor: not-allowed;\n}\n\n/* 垂直模式 */\n.quark-slider-vertical {\n display: inline-block;\n width: var(--quark-slider-bar-height);\n height: 100%;\n}\n\n/* 垂直模式 bar */\n.quark-slider-vertical .quark-slider-bar {\n width: 100%;\n height: auto;\n}\n\n/* 垂直模式伪元素扩展点击区域 */\n.quark-slider-vertical::before {\n top: 0;\n right: calc(var(--quark-slider-padding) * -1);\n bottom: 0;\n left: calc(var(--quark-slider-padding) * -1);\n}\n\n/* 垂直模式按钮定位 */\n.quark-slider-vertical .quark-slider-button-wrapper {\n top: auto;\n right: 50%;\n left: auto;\n}\n\n.quark-slider-vertical .quark-slider-button-wrapper-right {\n bottom: 0;\n transform: translate3d(50%, 50%, 0);\n}\n\n.quark-slider-vertical .quark-slider-button-wrapper-left {\n top: 0;\n bottom: auto;\n transform: translate3d(50%, -50%, 0);\n}\n"})],k);export{q as default};