You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
16 KiB
158 lines
16 KiB
import{a4 as We,d as Ge,s as k,c as w,O as Qe,t as de,S as qe,G as f,T as Je,Q as G}from"./index-bVOhw2NF.js";import{b as D,c as n,d as v,a as N,A as Ze,B as eo,u as oo,f as ve,h as ce}from"./light-Cua7cqmF.js";import{f as ue}from"./fade-in-scale-up.cssr-CTZmXn_X.js";import{s as to}from"./light-CnxA-8p4.js";import{u as ao}from"./use-form-item-CNgNT5jP.js";import{u as no}from"./use-merged-state-CzrzZJbg.js";import{i as ro}from"./use-is-mounted-wlrzLfZo.js";import{u as Q,B as io,V as lo,a as so}from"./Follower-DJGS5Fnl.js";import{a as co}from"./resolve-slot-Dzko3qih.js";import{c as P}from"./call-f2ri57Kd.js";import{o as _,a as U}from"./delegate-CI_DDEu_.js";function he(a){return window.TouchEvent&&a instanceof window.TouchEvent}function fe(){const a=new Map,l=T=>p=>{a.set(T,p)};return We(()=>{a.clear()}),[a,l]}const uo=D([n("slider",`
|
|
display: block;
|
|
padding: calc((var(--n-handle-size) - var(--n-rail-height)) / 2) 0;
|
|
position: relative;
|
|
z-index: 0;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
`,[v("reverse",[n("slider-handles",[n("slider-handle-wrapper",`
|
|
transform: translate(50%, -50%);
|
|
`)]),n("slider-dots",[n("slider-dot",`
|
|
transform: translateX(50%, -50%);
|
|
`)]),v("vertical",[n("slider-handles",[n("slider-handle-wrapper",`
|
|
transform: translate(-50%, -50%);
|
|
`)]),n("slider-marks",[n("slider-mark",`
|
|
transform: translateY(calc(-50% + var(--n-dot-height) / 2));
|
|
`)]),n("slider-dots",[n("slider-dot",`
|
|
transform: translateX(-50%) translateY(0);
|
|
`)])])]),v("vertical",`
|
|
padding: 0 calc((var(--n-handle-size) - var(--n-rail-height)) / 2);
|
|
width: var(--n-rail-width-vertical);
|
|
height: 100%;
|
|
`,[n("slider-handles",`
|
|
top: calc(var(--n-handle-size) / 2);
|
|
right: 0;
|
|
bottom: calc(var(--n-handle-size) / 2);
|
|
left: 0;
|
|
`,[n("slider-handle-wrapper",`
|
|
top: unset;
|
|
left: 50%;
|
|
transform: translate(-50%, 50%);
|
|
`)]),n("slider-rail",`
|
|
height: 100%;
|
|
`,[N("fill",`
|
|
top: unset;
|
|
right: 0;
|
|
bottom: unset;
|
|
left: 0;
|
|
`)]),v("with-mark",`
|
|
width: var(--n-rail-width-vertical);
|
|
margin: 0 32px 0 8px;
|
|
`),n("slider-marks",`
|
|
top: calc(var(--n-handle-size) / 2);
|
|
right: unset;
|
|
bottom: calc(var(--n-handle-size) / 2);
|
|
left: 22px;
|
|
font-size: var(--n-mark-font-size);
|
|
`,[n("slider-mark",`
|
|
transform: translateY(50%);
|
|
white-space: nowrap;
|
|
`)]),n("slider-dots",`
|
|
top: calc(var(--n-handle-size) / 2);
|
|
right: unset;
|
|
bottom: calc(var(--n-handle-size) / 2);
|
|
left: 50%;
|
|
`,[n("slider-dot",`
|
|
transform: translateX(-50%) translateY(50%);
|
|
`)])]),v("disabled",`
|
|
cursor: not-allowed;
|
|
opacity: var(--n-opacity-disabled);
|
|
`,[n("slider-handle",`
|
|
cursor: not-allowed;
|
|
`)]),v("with-mark",`
|
|
width: 100%;
|
|
margin: 8px 0 32px 0;
|
|
`),D("&:hover",[n("slider-rail",{backgroundColor:"var(--n-rail-color-hover)"},[N("fill",{backgroundColor:"var(--n-fill-color-hover)"})]),n("slider-handle",{boxShadow:"var(--n-handle-box-shadow-hover)"})]),v("active",[n("slider-rail",{backgroundColor:"var(--n-rail-color-hover)"},[N("fill",{backgroundColor:"var(--n-fill-color-hover)"})]),n("slider-handle",{boxShadow:"var(--n-handle-box-shadow-hover)"})]),n("slider-marks",`
|
|
position: absolute;
|
|
top: 18px;
|
|
left: calc(var(--n-handle-size) / 2);
|
|
right: calc(var(--n-handle-size) / 2);
|
|
`,[n("slider-mark",`
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
white-space: nowrap;
|
|
`)]),n("slider-rail",`
|
|
width: 100%;
|
|
position: relative;
|
|
height: var(--n-rail-height);
|
|
background-color: var(--n-rail-color);
|
|
transition: background-color .3s var(--n-bezier);
|
|
border-radius: calc(var(--n-rail-height) / 2);
|
|
`,[N("fill",`
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
border-radius: calc(var(--n-rail-height) / 2);
|
|
transition: background-color .3s var(--n-bezier);
|
|
background-color: var(--n-fill-color);
|
|
`)]),n("slider-handles",`
|
|
position: absolute;
|
|
top: 0;
|
|
right: calc(var(--n-handle-size) / 2);
|
|
bottom: 0;
|
|
left: calc(var(--n-handle-size) / 2);
|
|
`,[n("slider-handle-wrapper",`
|
|
outline: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
cursor: pointer;
|
|
display: flex;
|
|
`,[n("slider-handle",`
|
|
height: var(--n-handle-size);
|
|
width: var(--n-handle-size);
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
transition: box-shadow .2s var(--n-bezier), background-color .3s var(--n-bezier);
|
|
background-color: var(--n-handle-color);
|
|
box-shadow: var(--n-handle-box-shadow);
|
|
`,[D("&:hover",`
|
|
box-shadow: var(--n-handle-box-shadow-hover);
|
|
`)]),D("&:focus",[n("slider-handle",`
|
|
box-shadow: var(--n-handle-box-shadow-focus);
|
|
`,[D("&:hover",`
|
|
box-shadow: var(--n-handle-box-shadow-active);
|
|
`)])])])]),n("slider-dots",`
|
|
position: absolute;
|
|
top: 50%;
|
|
left: calc(var(--n-handle-size) / 2);
|
|
right: calc(var(--n-handle-size) / 2);
|
|
`,[v("transition-disabled",[n("slider-dot","transition: none;")]),n("slider-dot",`
|
|
transition:
|
|
border-color .3s var(--n-bezier),
|
|
box-shadow .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier);
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
height: var(--n-dot-height);
|
|
width: var(--n-dot-width);
|
|
border-radius: var(--n-dot-border-radius);
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
border: var(--n-dot-border);
|
|
background-color: var(--n-dot-color);
|
|
`,[v("active","border: var(--n-dot-border-active);")])])]),n("slider-handle-indicator",`
|
|
font-size: var(--n-font-size);
|
|
padding: 6px 10px;
|
|
border-radius: var(--n-indicator-border-radius);
|
|
color: var(--n-indicator-text-color);
|
|
background-color: var(--n-indicator-color);
|
|
box-shadow: var(--n-indicator-box-shadow);
|
|
`,[ue()]),n("slider-handle-indicator",`
|
|
font-size: var(--n-font-size);
|
|
padding: 6px 10px;
|
|
border-radius: var(--n-indicator-border-radius);
|
|
color: var(--n-indicator-text-color);
|
|
background-color: var(--n-indicator-color);
|
|
box-shadow: var(--n-indicator-box-shadow);
|
|
`,[v("top",`
|
|
margin-bottom: 12px;
|
|
`),v("right",`
|
|
margin-left: 12px;
|
|
`),v("bottom",`
|
|
margin-top: 12px;
|
|
`),v("left",`
|
|
margin-right: 12px;
|
|
`),ue()]),Ze(n("slider",[n("slider-dot","background-color: var(--n-dot-color-modal);")])),eo(n("slider",[n("slider-dot","background-color: var(--n-dot-color-popover);")]))]),ho=0,fo=Object.assign(Object.assign({},ve.props),{to:Q.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]}),So=Ge({name:"Slider",props:fo,setup(a){const{mergedClsPrefixRef:l,namespaceRef:T,inlineThemeDisabled:p}=oo(a),d=ve("Slider","-slider",uo,to,a,l),c=k(null),[V,C]=fe(),[me,be]=fe(),ge=k(new Set),q=ao(a),{mergedDisabledRef:M}=q,J=w(()=>{const{step:e}=a;if(Number(e)<=0||e==="mark")return 0;const o=e.toString();let t=0;return o.includes(".")&&(t=o.length-o.indexOf(".")-1),t}),j=k(a.defaultValue),we=Qe(a,"value"),O=no(we,j),m=w(()=>{const{value:e}=O;return(a.range?e:[e]).map(re)}),Z=w(()=>m.value.length>2),pe=w(()=>a.placement===void 0?a.vertical?"right":"top":a.placement),ee=w(()=>{const{marks:e}=a;return e?Object.keys(e).map(Number.parseFloat):null}),b=k(-1),oe=k(-1),y=k(-1),R=k(!1),$=k(!1),L=w(()=>{const{vertical:e,reverse:o}=a;return e?o?"top":"bottom":o?"right":"left"}),xe=w(()=>{if(Z.value)return;const e=m.value,o=B(a.range?Math.min(...e):a.min),t=B(a.range?Math.max(...e):e[0]),{value:r}=L;return a.vertical?{[r]:`${o}%`,height:`${t-o}%`}:{[r]:`${o}%`,width:`${t-o}%`}}),ke=w(()=>{const e=[],{marks:o}=a;if(o){const t=m.value.slice();t.sort((u,h)=>u-h);const{value:r}=L,{value:i}=Z,{range:s}=a,g=i?()=>!1:u=>s?u>=t[0]&&u<=t[t.length-1]:u<=t[0];for(const u of Object.keys(o)){const h=Number(u);e.push({active:g(h),label:o[u],style:{[r]:`${B(h)}%`}})}}return e});function ye(e,o){const t=B(e),{value:r}=L;return{[r]:`${t}%`,zIndex:o===b.value?1:0}}function te(e){return a.showTooltip||y.value===e||b.value===e&&R.value}function Re(e){return R.value?!(b.value===e&&oe.value===e):!0}function ze(e){var o;~e&&(b.value=e,(o=V.get(e))===null||o===void 0||o.focus())}function Se(){me.forEach((e,o)=>{te(o)&&e.syncPosition()})}function ae(e){const{"onUpdate:value":o,onUpdateValue:t}=a,{nTriggerFormInput:r,nTriggerFormChange:i}=q;t&&P(t,e),o&&P(o,e),j.value=e,r(),i()}function ne(e){const{range:o}=a;if(o){if(Array.isArray(e)){const{value:t}=m;e.join()!==t.join()&&ae(e)}}else Array.isArray(e)||m.value[0]!==e&&ae(e)}function K(e,o){if(a.range){const t=m.value.slice();t.splice(o,1,e),ne(t)}else ne(e)}function X(e,o,t){const r=t!==void 0;t||(t=e-o>0?1:-1);const i=ee.value||[],{step:s}=a;if(s==="mark"){const h=I(e,i.concat(o),r?t:void 0);return h?h.value:o}if(s<=0)return o;const{value:g}=J;let u;if(r){const h=Number((o/s).toFixed(g)),x=Math.floor(h),Y=h>x?x:x-1,W=h<x?x:x+1;u=I(o,[Number((Y*s).toFixed(g)),Number((W*s).toFixed(g)),...i],t)}else{const h=Ce(e);u=I(e,[...i,h])}return u?re(u.value):o}function re(e){return Math.min(a.max,Math.max(a.min,e))}function B(e){const{max:o,min:t}=a;return(e-t)/(o-t)*100}function Te(e){const{max:o,min:t}=a;return t+(o-t)*e}function Ce(e){const{step:o,min:t}=a;if(Number(o)<=0||o==="mark")return e;const r=Math.round((e-t)/o)*o+t;return Number(r.toFixed(J.value))}function I(e,o=ee.value,t){if(!(o!=null&&o.length))return null;let r=null,i=-1;for(;++i<o.length;){const s=o[i]-e,g=Math.abs(s);(t===void 0||s*t>0)&&(r===null||g<r.distance)&&(r={index:i,distance:g,value:o[i]})}return r}function ie(e){const o=c.value;if(!o)return;const t=he(e)?e.touches[0]:e,r=o.getBoundingClientRect();let i;return a.vertical?i=(r.bottom-t.clientY)/r.height:i=(t.clientX-r.left)/r.width,a.reverse&&(i=1-i),Te(i)}function De(e){if(M.value||!a.keyboard)return;const{vertical:o,reverse:t}=a;switch(e.key){case"ArrowUp":e.preventDefault(),F(o&&t?-1:1);break;case"ArrowRight":e.preventDefault(),F(!o&&t?-1:1);break;case"ArrowDown":e.preventDefault(),F(o&&t?1:-1);break;case"ArrowLeft":e.preventDefault(),F(!o&&t?1:-1);break}}function F(e){const o=b.value;if(o===-1)return;const{step:t}=a,r=m.value[o],i=Number(t)<=0||t==="mark"?r:r+t*e;K(X(i,r,e>0?1:-1),o)}function Ve(e){var o,t;if(M.value||!he(e)&&e.button!==ho)return;const r=ie(e);if(r===void 0)return;const i=m.value.slice(),s=a.range?(t=(o=I(r,i))===null||o===void 0?void 0:o.index)!==null&&t!==void 0?t:-1:0;s!==-1&&(e.preventDefault(),ze(s),Me(),K(X(r,m.value[s]),s))}function Me(){R.value||(R.value=!0,a.onDragstart&&P(a.onDragstart),_("touchend",document,E),_("mouseup",document,E),_("touchmove",document,A),_("mousemove",document,A))}function H(){R.value&&(R.value=!1,a.onDragend&&P(a.onDragend),U("touchend",document,E),U("mouseup",document,E),U("touchmove",document,A),U("mousemove",document,A))}function A(e){const{value:o}=b;if(!R.value||o===-1){H();return}const t=ie(e);t!==void 0&&K(X(t,m.value[o]),o)}function E(){H()}function $e(e){b.value=e,M.value||(y.value=e)}function Be(e){b.value===e&&(b.value=-1,H()),y.value===e&&(y.value=-1)}function Ie(e){y.value=e}function Fe(e){y.value===e&&(y.value=-1)}de(b,(e,o)=>void G(()=>oe.value=o)),de(O,()=>{if(a.marks){if($.value)return;$.value=!0,G(()=>{$.value=!1})}G(Se)}),qe(()=>{H()});const le=w(()=>{const{self:{markFontSize:e,railColor:o,railColorHover:t,fillColor:r,fillColorHover:i,handleColor:s,opacityDisabled:g,dotColor:u,dotColorModal:h,handleBoxShadow:x,handleBoxShadowHover:Y,handleBoxShadowActive:W,handleBoxShadowFocus:He,dotBorder:Ae,dotBoxShadow:Ee,railHeight:Ne,railWidthVertical:Pe,handleSize:_e,dotHeight:Ue,dotWidth:je,dotBorderRadius:Oe,fontSize:Le,dotBorderActive:Ke,dotColorPopover:Xe},common:{cubicBezierEaseInOut:Ye}}=d.value;return{"--n-bezier":Ye,"--n-dot-border":Ae,"--n-dot-border-active":Ke,"--n-dot-border-radius":Oe,"--n-dot-box-shadow":Ee,"--n-dot-color":u,"--n-dot-color-modal":h,"--n-dot-color-popover":Xe,"--n-dot-height":Ue,"--n-dot-width":je,"--n-fill-color":r,"--n-fill-color-hover":i,"--n-font-size":Le,"--n-handle-box-shadow":x,"--n-handle-box-shadow-active":W,"--n-handle-box-shadow-focus":He,"--n-handle-box-shadow-hover":Y,"--n-handle-color":s,"--n-handle-size":_e,"--n-opacity-disabled":g,"--n-rail-color":o,"--n-rail-color-hover":t,"--n-rail-height":Ne,"--n-rail-width-vertical":Pe,"--n-mark-font-size":e}}),z=p?ce("slider",void 0,le,a):void 0,se=w(()=>{const{self:{fontSize:e,indicatorColor:o,indicatorBoxShadow:t,indicatorTextColor:r,indicatorBorderRadius:i}}=d.value;return{"--n-font-size":e,"--n-indicator-border-radius":i,"--n-indicator-box-shadow":t,"--n-indicator-color":o,"--n-indicator-text-color":r}}),S=p?ce("slider-indicator",void 0,se,a):void 0;return{mergedClsPrefix:l,namespace:T,uncontrolledValue:j,mergedValue:O,mergedDisabled:M,mergedPlacement:pe,isMounted:ro(),adjustedTo:Q(a),dotTransitionDisabled:$,markInfos:ke,isShowTooltip:te,shouldKeepTooltipTransition:Re,handleRailRef:c,setHandleRefs:C,setFollowerRefs:be,fillStyle:xe,getHandleStyle:ye,activeIndex:b,arrifiedValues:m,followerEnabledIndexSet:ge,handleRailMouseDown:Ve,handleHandleFocus:$e,handleHandleBlur:Be,handleHandleMouseEnter:Ie,handleHandleMouseLeave:Fe,handleRailKeyDown:De,indicatorCssVars:p?void 0:se,indicatorThemeClass:S==null?void 0:S.themeClass,indicatorOnRender:S==null?void 0:S.onRender,cssVars:p?void 0:le,themeClass:z==null?void 0:z.themeClass,onRender:z==null?void 0:z.onRender}},render(){var a;const{mergedClsPrefix:l,themeClass:T,formatTooltip:p}=this;return(a=this.onRender)===null||a===void 0||a.call(this),f("div",{class:[`${l}-slider`,T,{[`${l}-slider--disabled`]:this.mergedDisabled,[`${l}-slider--active`]:this.activeIndex!==-1,[`${l}-slider--with-mark`]:this.marks,[`${l}-slider--vertical`]:this.vertical,[`${l}-slider--reverse`]:this.reverse}],style:this.cssVars,onKeydown:this.handleRailKeyDown,onMousedown:this.handleRailMouseDown,onTouchstart:this.handleRailMouseDown},f("div",{class:`${l}-slider-rail`},f("div",{class:`${l}-slider-rail__fill`,style:this.fillStyle}),this.marks?f("div",{class:[`${l}-slider-dots`,this.dotTransitionDisabled&&`${l}-slider-dots--transition-disabled`]},this.markInfos.map(d=>f("div",{key:d.label,class:[`${l}-slider-dot`,{[`${l}-slider-dot--active`]:d.active}],style:d.style}))):null,f("div",{ref:"handleRailRef",class:`${l}-slider-handles`},this.arrifiedValues.map((d,c)=>{const V=this.isShowTooltip(c);return f(io,null,{default:()=>[f(lo,null,{default:()=>f("div",{ref:this.setHandleRefs(c),class:`${l}-slider-handle-wrapper`,tabindex:this.mergedDisabled?-1:0,role:"slider","aria-valuenow":d,"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-orientation":this.vertical?"vertical":"horizontal","aria-disabled":this.disabled,style:this.getHandleStyle(d,c),onFocus:()=>{this.handleHandleFocus(c)},onBlur:()=>{this.handleHandleBlur(c)},onMouseenter:()=>{this.handleHandleMouseEnter(c)},onMouseleave:()=>{this.handleHandleMouseLeave(c)}},co(this.$slots.thumb,()=>[f("div",{class:`${l}-slider-handle`})]))}),this.tooltip&&f(so,{ref:this.setFollowerRefs(c),show:V,to:this.adjustedTo,enabled:this.showTooltip&&!this.range||this.followerEnabledIndexSet.has(c),teleportDisabled:this.adjustedTo===Q.tdkey,placement:this.mergedPlacement,containerClass:this.namespace},{default:()=>f(Je,{name:"fade-in-scale-up-transition",appear:this.isMounted,css:this.shouldKeepTooltipTransition(c),onEnter:()=>{this.followerEnabledIndexSet.add(c)},onAfterLeave:()=>{this.followerEnabledIndexSet.delete(c)}},{default:()=>{var C;return V?((C=this.indicatorOnRender)===null||C===void 0||C.call(this),f("div",{class:[`${l}-slider-handle-indicator`,this.indicatorThemeClass,`${l}-slider-handle-indicator--${this.mergedPlacement}`],style:this.indicatorCssVars},typeof p=="function"?p(d):d)):null}})})]})})),this.marks?f("div",{class:`${l}-slider-marks`},this.markInfos.map(d=>f("div",{key:d.label,class:`${l}-slider-mark`,style:d.style},d.label))):null))}});export{So as _};
|