Slider-legacy-7133cde0-1734950731618.js 16 KB

1
  1. System.register(["./index-legacy-4630884d-1734950731618.js"],(function(e,n){"use strict";var o,r,a,t,l,i,d,s,c,u,h,v,f,p,b,m,g,x,w,k,y,z,C,S,B,R,D,T,$,F,H,M;return{setters:[e=>{o=e.a5,r=e.ac,a=e.ah,t=e.af,l=e.ai,i=e.ag,d=e.dI,s=e.dV,c=e.dW,u=e.d,h=e.ab,v=e.ao,f=e.r,p=e.dJ,b=e.U,m=e.al,g=e.ak,x=e.A,w=e.p,k=e.ap,y=e.dL,z=e.dK,C=e.ad,S=e.dN,B=e.dO,R=e.dB,D=e.dQ,T=e._,$=e.dT,F=e.aw,H=e.ax,M=e.S}],execute:function(){const n={railHeight:"4px",railWidthVertical:"4px",handleSize:"18px",dotHeight:"8px",dotWidth:"8px",dotBorderRadius:"4px"},A={name:"Slider",common:o,self:e=>{const{railColor:o,primaryColor:r,baseColor:a,cardColor:t,modalColor:l,popoverColor:i,borderRadius:d,fontSize:s,opacityDisabled:c}=e;return Object.assign(Object.assign({},n),{fontSize:s,markFontSize:s,railColor:o,railColorHover:o,fillColor:r,fillColorHover:r,opacityDisabled:c,handleColor:"#FFF",dotColor:t,dotColorModal:l,dotColorPopover:i,handleBoxShadow:"0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)",handleBoxShadowHover:"0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)",handleBoxShadowActive:"0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)",handleBoxShadowFocus:"0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)",indicatorColor:"rgba(0, 0, 0, .85)",indicatorBoxShadow:"0 2px 8px 0 rgba(0, 0, 0, 0.12)",indicatorTextColor:a,indicatorBorderRadius:d,dotBorder:`2px solid ${o}`,dotBorderActive:`2px solid ${r}`,dotBoxShadow:""})}};function N(e){return window.TouchEvent&&e instanceof window.TouchEvent}function V(){const e=new Map;return r((()=>{e.clear()})),[e,n=>o=>{e.set(n,o)}]}const j=a([t("slider","\n display: block;\n padding: calc((var(--n-handle-size) - var(--n-rail-height)) / 2) 0;\n position: relative;\n z-index: 0;\n width: 100%;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n ",[l("reverse",[t("slider-handles",[t("slider-handle-wrapper","\n transform: translate(50%, -50%);\n ")]),t("slider-dots",[t("slider-dot","\n transform: translateX(50%, -50%);\n ")]),l("vertical",[t("slider-handles",[t("slider-handle-wrapper","\n transform: translate(-50%, -50%);\n ")]),t("slider-marks",[t("slider-mark","\n transform: translateY(calc(-50% + var(--n-dot-height) / 2));\n ")]),t("slider-dots",[t("slider-dot","\n transform: translateX(-50%) translateY(0);\n ")])])]),l("vertical","\n padding: 0 calc((var(--n-handle-size) - var(--n-rail-height)) / 2);\n width: var(--n-rail-width-vertical);\n height: 100%;\n ",[t("slider-handles","\n top: calc(var(--n-handle-size) / 2);\n right: 0;\n bottom: calc(var(--n-handle-size) / 2);\n left: 0;\n ",[t("slider-handle-wrapper","\n top: unset;\n left: 50%;\n transform: translate(-50%, 50%);\n ")]),t("slider-rail","\n height: 100%;\n ",[i("fill","\n top: unset;\n right: 0;\n bottom: unset;\n left: 0;\n ")]),l("with-mark","\n width: var(--n-rail-width-vertical);\n margin: 0 32px 0 8px;\n "),t("slider-marks","\n top: calc(var(--n-handle-size) / 2);\n right: unset;\n bottom: calc(var(--n-handle-size) / 2);\n left: 22px;\n font-size: var(--n-mark-font-size);\n ",[t("slider-mark","\n transform: translateY(50%);\n white-space: nowrap;\n ")]),t("slider-dots","\n top: calc(var(--n-handle-size) / 2);\n right: unset;\n bottom: calc(var(--n-handle-size) / 2);\n left: 50%;\n ",[t("slider-dot","\n transform: translateX(-50%) translateY(50%);\n ")])]),l("disabled","\n cursor: not-allowed;\n opacity: var(--n-opacity-disabled);\n ",[t("slider-handle","\n cursor: not-allowed;\n ")]),l("with-mark","\n width: 100%;\n margin: 8px 0 32px 0;\n "),a("&:hover",[t("slider-rail",{backgroundColor:"var(--n-rail-color-hover)"},[i("fill",{backgroundColor:"var(--n-fill-color-hover)"})]),t("slider-handle",{boxShadow:"var(--n-handle-box-shadow-hover)"})]),l("active",[t("slider-rail",{backgroundColor:"var(--n-rail-color-hover)"},[i("fill",{backgroundColor:"var(--n-fill-color-hover)"})]),t("slider-handle",{boxShadow:"var(--n-handle-box-shadow-hover)"})]),t("slider-marks","\n position: absolute;\n top: 18px;\n left: calc(var(--n-handle-size) / 2);\n right: calc(var(--n-handle-size) / 2);\n ",[t("slider-mark","\n position: absolute;\n transform: translateX(-50%);\n white-space: nowrap;\n ")]),t("slider-rail","\n width: 100%;\n position: relative;\n height: var(--n-rail-height);\n background-color: var(--n-rail-color);\n transition: background-color .3s var(--n-bezier);\n border-radius: calc(var(--n-rail-height) / 2);\n ",[i("fill","\n position: absolute;\n top: 0;\n bottom: 0;\n border-radius: calc(var(--n-rail-height) / 2);\n transition: background-color .3s var(--n-bezier);\n background-color: var(--n-fill-color);\n ")]),t("slider-handles","\n position: absolute;\n top: 0;\n right: calc(var(--n-handle-size) / 2);\n bottom: 0;\n left: calc(var(--n-handle-size) / 2);\n ",[t("slider-handle-wrapper","\n outline: none;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n cursor: pointer;\n display: flex;\n ",[t("slider-handle","\n height: var(--n-handle-size);\n width: var(--n-handle-size);\n border-radius: 50%;\n overflow: hidden;\n transition: box-shadow .2s var(--n-bezier), background-color .3s var(--n-bezier);\n background-color: var(--n-handle-color);\n box-shadow: var(--n-handle-box-shadow);\n ",[a("&:hover","\n box-shadow: var(--n-handle-box-shadow-hover);\n ")]),a("&:focus",[t("slider-handle","\n box-shadow: var(--n-handle-box-shadow-focus);\n ",[a("&:hover","\n box-shadow: var(--n-handle-box-shadow-active);\n ")])])])]),t("slider-dots","\n position: absolute;\n top: 50%;\n left: calc(var(--n-handle-size) / 2);\n right: calc(var(--n-handle-size) / 2);\n ",[l("transition-disabled",[t("slider-dot","transition: none;")]),t("slider-dot","\n transition:\n border-color .3s var(--n-bezier),\n box-shadow .3s var(--n-bezier),\n background-color .3s var(--n-bezier);\n position: absolute;\n transform: translate(-50%, -50%);\n height: var(--n-dot-height);\n width: var(--n-dot-width);\n border-radius: var(--n-dot-border-radius);\n overflow: hidden;\n box-sizing: border-box;\n border: var(--n-dot-border);\n background-color: var(--n-dot-color);\n ",[l("active","border: var(--n-dot-border-active);")])])]),t("slider-handle-indicator","\n font-size: var(--n-font-size);\n padding: 6px 10px;\n border-radius: var(--n-indicator-border-radius);\n color: var(--n-indicator-text-color);\n background-color: var(--n-indicator-color);\n box-shadow: var(--n-indicator-box-shadow);\n ",[d()]),t("slider-handle-indicator","\n font-size: var(--n-font-size);\n padding: 6px 10px;\n border-radius: var(--n-indicator-border-radius);\n color: var(--n-indicator-text-color);\n background-color: var(--n-indicator-color);\n box-shadow: var(--n-indicator-box-shadow);\n ",[l("top","\n margin-bottom: 12px;\n "),l("right","\n margin-left: 12px;\n "),l("bottom","\n margin-top: 12px;\n "),l("left","\n margin-right: 12px;\n "),d()]),s(t("slider",[t("slider-dot","background-color: var(--n-dot-color-modal);")])),c(t("slider",[t("slider-dot","background-color: var(--n-dot-color-popover);")]))]),I=Object.assign(Object.assign({},v.props),{to:z.propTo,defaultValue:{type:[Number,Array],default:0},marks:Object,disabled:{type:Boolean,default:void 0},formatTooltip:Function,keyboard:{type:Boolean,default:!0},min:{type:Number,default:0},max:{type:Number,default:100},step:{type:[Number,String],default:1},range:Boolean,value:[Number,Array],placement:String,showTooltip:{type:Boolean,default:void 0},tooltip:{type:Boolean,default:!0},vertical:Boolean,reverse:Boolean,"onUpdate:value":[Function,Array],onUpdateValue:[Function,Array],onDragstart:[Function],onDragend:[Function]});e("N",u({name:"Slider",props:I,setup(e){const{mergedClsPrefixRef:n,namespaceRef:o,inlineThemeDisabled:r}=h(e),a=v("Slider","-slider",j,A,e,n),t=f(null),[l,i]=V(),[d,s]=V(),c=f(new Set),u=p(e),{mergedDisabledRef:C}=u,S=b((()=>{const{step:n}=e;if(Number(n)<=0||"mark"===n)return 0;const o=n.toString();let r=0;return o.includes(".")&&(r=o.length-o.indexOf(".")-1),r})),B=f(e.defaultValue),R=m(e,"value"),D=g(R,B),T=b((()=>{const{value:n}=D;return(e.range?n:[n]).map(ne)})),I=b((()=>T.value.length>2)),O=b((()=>void 0===e.placement?e.vertical?"right":"top":e.placement)),E=b((()=>{const{marks:n}=e;return n?Object.keys(n).map(parseFloat):null})),P=f(-1),K=f(-1),U=f(-1),L=f(!1),W=f(!1),X=b((()=>{const{vertical:n,reverse:o}=e;return n?o?"top":"bottom":o?"right":"left"})),Y=b((()=>{if(I.value)return;const n=T.value,o=oe(e.range?Math.min(...n):e.min),r=oe(e.range?Math.max(...n):n[0]),{value:a}=X;return e.vertical?{[a]:`${o}%`,height:r-o+"%"}:{[a]:`${o}%`,width:r-o+"%"}})),_=b((()=>{const n=[],{marks:o}=e;if(o){const r=T.value.slice();r.sort(((e,n)=>e-n));const{value:a}=X,{value:t}=I,{range:l}=e,i=t?()=>!1:e=>l?e>=r[0]&&e<=r[r.length-1]:e<=r[0];for(const e of Object.keys(o)){const r=Number(e);n.push({active:i(r),label:o[e],style:{[a]:`${oe(r)}%`}})}}return n}));function J(n){return e.showTooltip||U.value===n||P.value===n&&L.value}function Q(){d.forEach(((e,n)=>{J(n)&&e.syncPosition()}))}function q(n){const{"onUpdate:value":o,onUpdateValue:r}=e,{nTriggerFormInput:a,nTriggerFormChange:t}=u;r&&$(r,n),o&&$(o,n),B.value=n,a(),t()}function G(n){const{range:o}=e;if(o){if(Array.isArray(n)){const{value:e}=T;n.join()!==e.join()&&q(n)}}else Array.isArray(n)||T.value[0]!==n&&q(n)}function Z(n,o){if(e.range){const e=T.value.slice();e.splice(o,1,n),G(e)}else G(n)}function ee(n,o,r){const a=void 0!==r;r||(r=n-o>0?1:-1);const t=E.value||[],{step:l}=e;if("mark"===l){const e=re(n,t.concat(o),a?r:void 0);return e?e.value:o}if(l<=0)return o;const{value:i}=S;let d;if(a){const e=Number((o/l).toFixed(i)),n=Math.floor(e),a=e<n?n:n+1;d=re(o,[Number(((e>n?n:n-1)*l).toFixed(i)),Number((a*l).toFixed(i)),...t],r)}else{const o=function(n){const{step:o,min:r}=e;if(Number(o)<=0||"mark"===o)return n;const a=Math.round((n-r)/o)*o+r;return Number(a.toFixed(S.value))}(n);d=re(n,[...t,o])}return d?ne(d.value):o}function ne(n){return Math.min(e.max,Math.max(e.min,n))}function oe(n){const{max:o,min:r}=e;return(n-r)/(o-r)*100}function re(e,n=E.value,o){if(!(null==n?void 0:n.length))return null;let r=null,a=-1;for(;++a<n.length;){const t=n[a]-e,l=Math.abs(t);(void 0===o||t*o>0)&&(null===r||l<r.distance)&&(r={index:a,distance:l,value:n[a]})}return r}function ae(n){const o=t.value;if(!o)return;const r=N(n)?n.touches[0]:n,a=o.getBoundingClientRect();let l;return l=e.vertical?(a.bottom-r.clientY)/a.height:(r.clientX-a.left)/a.width,e.reverse&&(l=1-l),function(n){const{max:o,min:r}=e;return r+(o-r)*n}(l)}function te(n){const o=P.value;if(-1===o)return;const{step:r}=e,a=T.value[o];Z(ee(Number(r)<=0||"mark"===r?a:a+r*n,a,n>0?1:-1),o)}function le(){L.value&&(L.value=!1,e.onDragend&&$(e.onDragend),H("touchend",document,de),H("mouseup",document,de),H("touchmove",document,ie),H("mousemove",document,ie))}function ie(e){const{value:n}=P;if(!L.value||-1===n)return void le();const o=ae(e);void 0!==o&&Z(ee(o,T.value[n]),n)}function de(){le()}x(P,((e,n)=>{M((()=>K.value=n))})),x(D,(()=>{if(e.marks){if(W.value)return;W.value=!0,M((()=>{W.value=!1}))}M(Q)})),w((()=>{le()}));const se=b((()=>{const{self:{markFontSize:e,railColor:n,railColorHover:o,fillColor:r,fillColorHover:t,handleColor:l,opacityDisabled:i,dotColor:d,dotColorModal:s,handleBoxShadow:c,handleBoxShadowHover:u,handleBoxShadowActive:h,handleBoxShadowFocus:v,dotBorder:f,dotBoxShadow:p,railHeight:b,railWidthVertical:m,handleSize:g,dotHeight:x,dotWidth:w,dotBorderRadius:k,fontSize:y,dotBorderActive:z,dotColorPopover:C},common:{cubicBezierEaseInOut:S}}=a.value;return{"--n-bezier":S,"--n-dot-border":f,"--n-dot-border-active":z,"--n-dot-border-radius":k,"--n-dot-box-shadow":p,"--n-dot-color":d,"--n-dot-color-modal":s,"--n-dot-color-popover":C,"--n-dot-height":x,"--n-dot-width":w,"--n-fill-color":r,"--n-fill-color-hover":t,"--n-font-size":y,"--n-handle-box-shadow":c,"--n-handle-box-shadow-active":h,"--n-handle-box-shadow-focus":v,"--n-handle-box-shadow-hover":u,"--n-handle-color":l,"--n-handle-size":g,"--n-opacity-disabled":i,"--n-rail-color":n,"--n-rail-color-hover":o,"--n-rail-height":b,"--n-rail-width-vertical":m,"--n-mark-font-size":e}})),ce=r?k("slider",void 0,se,e):void 0,ue=b((()=>{const{self:{fontSize:e,indicatorColor:n,indicatorBoxShadow:o,indicatorTextColor:r,indicatorBorderRadius:t}}=a.value;return{"--n-font-size":e,"--n-indicator-border-radius":t,"--n-indicator-box-shadow":o,"--n-indicator-color":n,"--n-indicator-text-color":r}})),he=r?k("slider-indicator",void 0,ue,e):void 0;return{mergedClsPrefix:n,namespace:o,uncontrolledValue:B,mergedValue:D,mergedDisabled:C,mergedPlacement:O,isMounted:y(),adjustedTo:z(e),dotTransitionDisabled:W,markInfos:_,isShowTooltip:J,shouldKeepTooltipTransition:function(e){return!L.value||!(P.value===e&&K.value===e)},handleRailRef:t,setHandleRefs:i,setFollowerRefs:s,fillStyle:Y,getHandleStyle:function(e,n){const o=oe(e),{value:r}=X;return{[r]:`${o}%`,zIndex:n===P.value?1:0}},activeIndex:P,arrifiedValues:T,followerEnabledIndexSet:c,handleRailMouseDown:function(n){var o,r;if(C.value)return;if(!N(n)&&0!==n.button)return;const a=ae(n);if(void 0===a)return;const t=T.value.slice(),i=e.range?null!==(r=null===(o=re(a,t))||void 0===o?void 0:o.index)&&void 0!==r?r:-1:0;-1!==i&&(n.preventDefault(),function(e){var n;~e&&(P.value=e,null===(n=l.get(e))||void 0===n||n.focus())}(i),L.value||(L.value=!0,e.onDragstart&&$(e.onDragstart),F("touchend",document,de),F("mouseup",document,de),F("touchmove",document,ie),F("mousemove",document,ie)),Z(ee(a,T.value[i]),i))},handleHandleFocus:function(e){P.value=e,C.value||(U.value=e)},handleHandleBlur:function(e){P.value===e&&(P.value=-1,le()),U.value===e&&(U.value=-1)},handleHandleMouseEnter:function(e){U.value=e},handleHandleMouseLeave:function(e){U.value===e&&(U.value=-1)},handleRailKeyDown:function(n){if(C.value||!e.keyboard)return;const{vertical:o,reverse:r}=e;switch(n.key){case"ArrowUp":n.preventDefault(),te(o&&r?-1:1);break;case"ArrowRight":n.preventDefault(),te(!o&&r?-1:1);break;case"ArrowDown":n.preventDefault(),te(o&&r?1:-1);break;case"ArrowLeft":n.preventDefault(),te(!o&&r?1:-1)}},indicatorCssVars:r?void 0:ue,indicatorThemeClass:null==he?void 0:he.themeClass,indicatorOnRender:null==he?void 0:he.onRender,cssVars:r?void 0:se,themeClass:null==ce?void 0:ce.themeClass,onRender:null==ce?void 0:ce.onRender}},render(){var e;const{mergedClsPrefix:n,themeClass:o,formatTooltip:r}=this;return null===(e=this.onRender)||void 0===e||e.call(this),C("div",{class:[`${n}-slider`,o,{[`${n}-slider--disabled`]:this.mergedDisabled,[`${n}-slider--active`]:-1!==this.activeIndex,[`${n}-slider--with-mark`]:this.marks,[`${n}-slider--vertical`]:this.vertical,[`${n}-slider--reverse`]:this.reverse}],style:this.cssVars,onKeydown:this.handleRailKeyDown,onMousedown:this.handleRailMouseDown,onTouchstart:this.handleRailMouseDown},C("div",{class:`${n}-slider-rail`},C("div",{class:`${n}-slider-rail__fill`,style:this.fillStyle}),this.marks?C("div",{class:[`${n}-slider-dots`,this.dotTransitionDisabled&&`${n}-slider-dots--transition-disabled`]},this.markInfos.map((e=>C("div",{key:e.label,class:[`${n}-slider-dot`,{[`${n}-slider-dot--active`]:e.active}],style:e.style})))):null,C("div",{ref:"handleRailRef",class:`${n}-slider-handles`},this.arrifiedValues.map(((e,o)=>{const a=this.isShowTooltip(o);return C(S,null,{default:()=>[C(B,null,{default:()=>C("div",{ref:this.setHandleRefs(o),class:`${n}-slider-handle-wrapper`,tabindex:this.mergedDisabled?-1:0,style:this.getHandleStyle(e,o),onFocus:()=>{this.handleHandleFocus(o)},onBlur:()=>{this.handleHandleBlur(o)},onMouseenter:()=>{this.handleHandleMouseEnter(o)},onMouseleave:()=>{this.handleHandleMouseLeave(o)}},R(this.$slots.thumb,(()=>[C("div",{class:`${n}-slider-handle`})])))}),this.tooltip&&C(D,{ref:this.setFollowerRefs(o),show:a,to:this.adjustedTo,enabled:this.showTooltip&&!this.range||this.followerEnabledIndexSet.has(o),teleportDisabled:this.adjustedTo===z.tdkey,placement:this.mergedPlacement,containerClass:this.namespace},{default:()=>C(T,{name:"fade-in-scale-up-transition",appear:this.isMounted,css:this.shouldKeepTooltipTransition(o),onEnter:()=>{this.followerEnabledIndexSet.add(o)},onAfterLeave:()=>{this.followerEnabledIndexSet.delete(o)}},{default:()=>{var o;return a?(null===(o=this.indicatorOnRender)||void 0===o||o.call(this),C("div",{class:[`${n}-slider-handle-indicator`,this.indicatorThemeClass,`${n}-slider-handle-indicator--${this.mergedPlacement}`],style:this.indicatorCssVars},"function"==typeof r?r(e):e)):null}})})]})}))),this.marks?C("div",{class:`${n}-slider-marks`},this.markInfos.map((e=>C("div",{key:e.label,class:`${n}-slider-mark`,style:e.style},e.label)))):null))}}))}}}));