108 lines
9.2 KiB
JavaScript
108 lines
9.2 KiB
JavaScript
import{I as e,N as t,St as n,w as r,yt as i}from"./client-BPUTdqiR.js";import{G as a,H as o,I as s,K as c,M as l,N as u,V as d,W as f,q as p,r as m,t as h}from"./light-CAboqKml.js";import{i as g,t as _}from"./css-DEmdllcC.js";import{t as v}from"./use-merged-state-Cf_5Bk0w.js";import{n as y,r as b}from"./use-form-item-CmxopeL6.js";import{a as x,n as S}from"./resolve-slot-CvI9c3sm.js";import{H as C,I as w,M as T,o as E}from"./index-DyRlptq3.js";var D=t({name:`Remove`,render(){return e(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 512 512`},e(`line`,{x1:`400`,y1:`256`,x2:`112`,y2:`256`,style:`
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 32px;
|
|
`}))}});function O(e){let{primaryColor:t,opacityDisabled:n,borderRadius:r,textColor3:i}=e;return Object.assign(Object.assign({},E),{iconColor:i,textColor:`white`,loadingColor:t,opacityDisabled:n,railColor:`rgba(0, 0, 0, .14)`,railColorActive:t,buttonBoxShadow:`0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)`,buttonColor:`#FFF`,railBorderRadiusSmall:r,railBorderRadiusMedium:r,railBorderRadiusLarge:r,buttonBorderRadiusSmall:r,buttonBorderRadiusMedium:r,buttonBorderRadiusLarge:r,boxShadowFocus:`0 0 0 2px ${s(t,{alpha:.2})}`})}var k={name:`Switch`,common:h,self:O},A=o(`switch`,`
|
|
height: var(--n-height);
|
|
min-width: var(--n-width);
|
|
vertical-align: middle;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
display: inline-flex;
|
|
outline: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
`,[f(`children-placeholder`,`
|
|
height: var(--n-rail-height);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
`),f(`rail-placeholder`,`
|
|
display: flex;
|
|
flex-wrap: none;
|
|
`),f(`button-placeholder`,`
|
|
width: calc(1.75 * var(--n-rail-height));
|
|
height: var(--n-rail-height);
|
|
`),o(`base-loading`,`
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
font-size: calc(var(--n-button-width) - 4px);
|
|
color: var(--n-loading-color);
|
|
transition: color .3s var(--n-bezier);
|
|
`,[w({left:`50%`,top:`50%`,originalTransform:`translateX(-50%) translateY(-50%)`})]),f(`checked, unchecked`,`
|
|
transition: color .3s var(--n-bezier);
|
|
color: var(--n-text-color);
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1;
|
|
`),f(`checked`,`
|
|
right: 0;
|
|
padding-right: calc(1.25 * var(--n-rail-height) - var(--n-offset));
|
|
`),f(`unchecked`,`
|
|
left: 0;
|
|
justify-content: flex-end;
|
|
padding-left: calc(1.25 * var(--n-rail-height) - var(--n-offset));
|
|
`),d(`&:focus`,[f(`rail`,`
|
|
box-shadow: var(--n-box-shadow-focus);
|
|
`)]),a(`round`,[f(`rail`,`border-radius: calc(var(--n-rail-height) / 2);`,[f(`button`,`border-radius: calc(var(--n-button-height) / 2);`)])]),c(`disabled`,[c(`icon`,[a(`rubber-band`,[a(`pressed`,[f(`rail`,[f(`button`,`max-width: var(--n-button-width-pressed);`)])]),f(`rail`,[d(`&:active`,[f(`button`,`max-width: var(--n-button-width-pressed);`)])]),a(`active`,[a(`pressed`,[f(`rail`,[f(`button`,`left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));`)])]),f(`rail`,[d(`&:active`,[f(`button`,`left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));`)])])])])])]),a(`active`,[f(`rail`,[f(`button`,`left: calc(100% - var(--n-button-width) - var(--n-offset))`)])]),f(`rail`,`
|
|
overflow: hidden;
|
|
height: var(--n-rail-height);
|
|
min-width: var(--n-rail-width);
|
|
border-radius: var(--n-rail-border-radius);
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition:
|
|
opacity .3s var(--n-bezier),
|
|
background .3s var(--n-bezier),
|
|
box-shadow .3s var(--n-bezier);
|
|
background-color: var(--n-rail-color);
|
|
`,[f(`button-icon`,`
|
|
color: var(--n-icon-color);
|
|
transition: color .3s var(--n-bezier);
|
|
font-size: calc(var(--n-button-height) - 4px);
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
line-height: 1;
|
|
`,[w()]),f(`button`,`
|
|
align-items: center;
|
|
top: var(--n-offset);
|
|
left: var(--n-offset);
|
|
height: var(--n-button-height);
|
|
width: var(--n-button-width-pressed);
|
|
max-width: var(--n-button-width);
|
|
border-radius: var(--n-button-border-radius);
|
|
background-color: var(--n-button-color);
|
|
box-shadow: var(--n-button-box-shadow);
|
|
box-sizing: border-box;
|
|
cursor: inherit;
|
|
content: "";
|
|
position: absolute;
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
left .3s var(--n-bezier),
|
|
opacity .3s var(--n-bezier),
|
|
max-width .3s var(--n-bezier),
|
|
box-shadow .3s var(--n-bezier);
|
|
`)]),a(`active`,[f(`rail`,`background-color: var(--n-rail-color-active);`)]),a(`loading`,[f(`rail`,`
|
|
cursor: wait;
|
|
`)]),a(`disabled`,[f(`rail`,`
|
|
cursor: not-allowed;
|
|
opacity: .5;
|
|
`)])]),j=Object.assign(Object.assign({},m.props),{size:String,value:{type:[String,Number,Boolean],default:void 0},loading:Boolean,defaultValue:{type:[String,Number,Boolean],default:!1},disabled:{type:Boolean,default:void 0},round:{type:Boolean,default:!0},"onUpdate:value":[Function,Array],onUpdateValue:[Function,Array],checkedValue:{type:[String,Number,Boolean],default:!0},uncheckedValue:{type:[String,Number,Boolean],default:!1},railStyle:Function,rubberBand:{type:Boolean,default:!0},spinProps:Object,onChange:[Function,Array]}),M,N=t({name:`Switch`,props:j,slots:Object,setup(e){M===void 0&&(M=typeof CSS<`u`?CSS.supports===void 0?!1:CSS.supports(`width`,`max(1px)`):!0);let{mergedClsPrefixRef:t,inlineThemeDisabled:a,mergedComponentPropsRef:o}=u(e),s=m(`Switch`,`-switch`,A,k,e,t),c=y(e,{mergedSize(t){return e.size===void 0?t?t.mergedSize.value:o?.value?.Switch?.size||`medium`:e.size}}),{mergedSizeRef:d,mergedDisabledRef:f}=c,h=i(e.defaultValue),x=v(n(e,`value`),h),S=r(()=>x.value===e.checkedValue),C=i(!1),w=i(!1),T=r(()=>{let{railStyle:t}=e;if(t)return t({focused:w.value,checked:S.value})});function E(t){let{"onUpdate:value":n,onChange:r,onUpdateValue:i}=e,{nTriggerFormInput:a,nTriggerFormChange:o}=c;n&&b(n,t),i&&b(i,t),r&&b(r,t),h.value=t,a(),o()}function D(){let{nTriggerFormFocus:e}=c;e()}function O(){let{nTriggerFormBlur:e}=c;e()}function j(){e.loading||f.value||(x.value===e.checkedValue?E(e.uncheckedValue):E(e.checkedValue))}function N(){w.value=!0,D()}function P(){w.value=!1,O(),C.value=!1}function F(t){e.loading||f.value||t.key===` `&&(x.value===e.checkedValue?E(e.uncheckedValue):E(e.checkedValue),C.value=!1)}function I(t){e.loading||f.value||t.key===` `&&(t.preventDefault(),C.value=!0)}let L=r(()=>{let{value:e}=d,{self:{opacityDisabled:t,railColor:n,railColorActive:r,buttonBoxShadow:i,buttonColor:a,boxShadowFocus:o,loadingColor:c,textColor:l,iconColor:u,[p(`buttonHeight`,e)]:f,[p(`buttonWidth`,e)]:m,[p(`buttonWidthPressed`,e)]:h,[p(`railHeight`,e)]:v,[p(`railWidth`,e)]:y,[p(`railBorderRadius`,e)]:b,[p(`buttonBorderRadius`,e)]:x},common:{cubicBezierEaseInOut:S}}=s.value,C,w,T;return M?(C=`calc((${v} - ${f}) / 2)`,w=`max(${v}, ${f})`,T=`max(${y}, calc(${y} + ${f} - ${v}))`):(C=g((_(v)-_(f))/2),w=g(Math.max(_(v),_(f))),T=_(v)>_(f)?y:g(_(y)+_(f)-_(v))),{"--n-bezier":S,"--n-button-border-radius":x,"--n-button-box-shadow":i,"--n-button-color":a,"--n-button-width":m,"--n-button-width-pressed":h,"--n-button-height":f,"--n-height":w,"--n-offset":C,"--n-opacity-disabled":t,"--n-rail-border-radius":b,"--n-rail-color":n,"--n-rail-color-active":r,"--n-rail-height":v,"--n-rail-width":y,"--n-width":T,"--n-box-shadow-focus":o,"--n-loading-color":c,"--n-text-color":l,"--n-icon-color":u}}),R=a?l(`switch`,r(()=>d.value[0]),L,e):void 0;return{handleClick:j,handleBlur:P,handleFocus:N,handleKeyup:F,handleKeydown:I,mergedRailStyle:T,pressed:C,mergedClsPrefix:t,mergedValue:x,checked:S,mergedDisabled:f,cssVars:a?void 0:L,themeClass:R?.themeClass,onRender:R?.onRender}},render(){let{mergedClsPrefix:t,mergedDisabled:n,checked:r,mergedRailStyle:i,onRender:a,$slots:o}=this;a?.();let{checked:s,unchecked:c,icon:l,"checked-icon":u,"unchecked-icon":d}=o,f=!(S(l)&&S(u)&&S(d));return e(`div`,{role:`switch`,"aria-checked":r,class:[`${t}-switch`,this.themeClass,f&&`${t}-switch--icon`,r&&`${t}-switch--active`,n&&`${t}-switch--disabled`,this.round&&`${t}-switch--round`,this.loading&&`${t}-switch--loading`,this.pressed&&`${t}-switch--pressed`,this.rubberBand&&`${t}-switch--rubber-band`],tabindex:this.mergedDisabled?void 0:0,style:this.cssVars,onClick:this.handleClick,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyup:this.handleKeyup,onKeydown:this.handleKeydown},e(`div`,{class:`${t}-switch__rail`,"aria-hidden":`true`,style:i},x(s,n=>x(c,r=>n||r?e(`div`,{"aria-hidden":!0,class:`${t}-switch__children-placeholder`},e(`div`,{class:`${t}-switch__rail-placeholder`},e(`div`,{class:`${t}-switch__button-placeholder`}),n),e(`div`,{class:`${t}-switch__rail-placeholder`},e(`div`,{class:`${t}-switch__button-placeholder`}),r)):null)),e(`div`,{class:`${t}-switch__button`},x(l,n=>x(u,r=>x(d,i=>e(C,null,{default:()=>this.loading?e(T,Object.assign({key:`loading`,clsPrefix:t,strokeWidth:20},this.spinProps)):this.checked&&(r||n)?e(`div`,{class:`${t}-switch__button-icon`,key:r?`checked-icon`:`icon`},r||n):!this.checked&&(i||n)?e(`div`,{class:`${t}-switch__button-icon`,key:i?`unchecked-icon`:`icon`},i||n):null})))),x(s,n=>n&&e(`div`,{key:`checked`,class:`${t}-switch__checked`},n)),x(c,n=>n&&e(`div`,{key:`unchecked`,class:`${t}-switch__unchecked`},n)))))}});export{D as n,N as t}; |