108 lines
9.2 KiB
JavaScript
108 lines
9.2 KiB
JavaScript
import{H as e,Mt as t,U as n,X as r,_n as i,at as a,bt as o,d as s,hn as c,it as l,kt as u,nt as d,ot as f,p,st as m,tt as h}from"./client-CREJv8AD.js";import{i as g,s as _}from"./es-CevmKZP_.js";import{t as v}from"./use-merged-state-B6hyXujy.js";import{o as y,r as b,s as x}from"./_plugin-vue_export-helper-BkfvhliL.js";import{n as S}from"./use-form-item-CbDeFP5E.js";import{P as C,R as w,W as T,c as E}from"./index-DZpFhWFx.js";var D=u({name:`Remove`,render(){return t(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 512 512`},t(`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:i,textColor3:a}=e;return Object.assign(Object.assign({},E),{iconColor:a,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:i,railBorderRadiusMedium:i,railBorderRadiusLarge:i,buttonBorderRadiusSmall:i,buttonBorderRadiusMedium:i,buttonBorderRadiusLarge:i,boxShadowFocus:`0 0 0 2px ${r(t,{alpha:.2})}`})}var k={name:`Switch`,common:s,self:O},A=d(`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;
|
|
`,[l(`children-placeholder`,`
|
|
height: var(--n-rail-height);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
`),l(`rail-placeholder`,`
|
|
display: flex;
|
|
flex-wrap: none;
|
|
`),l(`button-placeholder`,`
|
|
width: calc(1.75 * var(--n-rail-height));
|
|
height: var(--n-rail-height);
|
|
`),d(`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%)`})]),l(`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;
|
|
`),l(`checked`,`
|
|
right: 0;
|
|
padding-right: calc(1.25 * var(--n-rail-height) - var(--n-offset));
|
|
`),l(`unchecked`,`
|
|
left: 0;
|
|
justify-content: flex-end;
|
|
padding-left: calc(1.25 * var(--n-rail-height) - var(--n-offset));
|
|
`),h(`&:focus`,[l(`rail`,`
|
|
box-shadow: var(--n-box-shadow-focus);
|
|
`)]),a(`round`,[l(`rail`,`border-radius: calc(var(--n-rail-height) / 2);`,[l(`button`,`border-radius: calc(var(--n-button-height) / 2);`)])]),f(`disabled`,[f(`icon`,[a(`rubber-band`,[a(`pressed`,[l(`rail`,[l(`button`,`max-width: var(--n-button-width-pressed);`)])]),l(`rail`,[h(`&:active`,[l(`button`,`max-width: var(--n-button-width-pressed);`)])]),a(`active`,[a(`pressed`,[l(`rail`,[l(`button`,`left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));`)])]),l(`rail`,[h(`&:active`,[l(`button`,`left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));`)])])])])])]),a(`active`,[l(`rail`,[l(`button`,`left: calc(100% - var(--n-button-width) - var(--n-offset))`)])]),l(`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);
|
|
`,[l(`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()]),l(`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`,[l(`rail`,`background-color: var(--n-rail-color-active);`)]),a(`loading`,[l(`rail`,`
|
|
cursor: wait;
|
|
`)]),a(`disabled`,[l(`rail`,`
|
|
cursor: not-allowed;
|
|
opacity: .5;
|
|
`)])]),j=Object.assign(Object.assign({},p.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=u({name:`Switch`,props:j,slots:Object,setup(t){M===void 0&&(M=typeof CSS<`u`?CSS.supports===void 0?!1:CSS.supports(`width`,`max(1px)`):!0);let{mergedClsPrefixRef:r,inlineThemeDisabled:a,mergedComponentPropsRef:s}=n(t),l=p(`Switch`,`-switch`,A,k,t,r),u=S(t,{mergedSize(e){return t.size===void 0?e?e.mergedSize.value:s?.value?.Switch?.size||`medium`:t.size}}),{mergedSizeRef:d,mergedDisabledRef:f}=u,h=c(t.defaultValue),y=v(i(t,`value`),h),b=o(()=>y.value===t.checkedValue),C=c(!1),w=c(!1),T=o(()=>{let{railStyle:e}=t;if(e)return e({focused:w.value,checked:b.value})});function E(e){let{"onUpdate:value":n,onChange:r,onUpdateValue:i}=t,{nTriggerFormInput:a,nTriggerFormChange:o}=u;n&&x(n,e),i&&x(i,e),r&&x(r,e),h.value=e,a(),o()}function D(){let{nTriggerFormFocus:e}=u;e()}function O(){let{nTriggerFormBlur:e}=u;e()}function j(){t.loading||f.value||(y.value===t.checkedValue?E(t.uncheckedValue):E(t.checkedValue))}function N(){w.value=!0,D()}function P(){w.value=!1,O(),C.value=!1}function F(e){t.loading||f.value||e.key===` `&&(y.value===t.checkedValue?E(t.uncheckedValue):E(t.checkedValue),C.value=!1)}function I(e){t.loading||f.value||e.key===` `&&(e.preventDefault(),C.value=!0)}let L=o(()=>{let{value:e}=d,{self:{opacityDisabled:t,railColor:n,railColorActive:r,buttonBoxShadow:i,buttonColor:a,boxShadowFocus:o,loadingColor:s,textColor:c,iconColor:u,[m(`buttonHeight`,e)]:f,[m(`buttonWidth`,e)]:p,[m(`buttonWidthPressed`,e)]:h,[m(`railHeight`,e)]:v,[m(`railWidth`,e)]:y,[m(`railBorderRadius`,e)]:b,[m(`buttonBorderRadius`,e)]:x},common:{cubicBezierEaseInOut:S}}=l.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)-g(f))/2),w=_(Math.max(g(v),g(f))),T=g(v)>g(f)?y:_(g(y)+g(f)-g(v))),{"--n-bezier":S,"--n-button-border-radius":x,"--n-button-box-shadow":i,"--n-button-color":a,"--n-button-width":p,"--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":s,"--n-text-color":c,"--n-icon-color":u}}),R=a?e(`switch`,o(()=>d.value[0]),L,t):void 0;return{handleClick:j,handleBlur:P,handleFocus:N,handleKeyup:F,handleKeydown:I,mergedRailStyle:T,pressed:C,mergedClsPrefix:r,mergedValue:y,checked:b,mergedDisabled:f,cssVars:a?void 0:L,themeClass:R?.themeClass,onRender:R?.onRender}},render(){let{mergedClsPrefix:e,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=!(b(l)&&b(u)&&b(d));return t(`div`,{role:`switch`,"aria-checked":r,class:[`${e}-switch`,this.themeClass,f&&`${e}-switch--icon`,r&&`${e}-switch--active`,n&&`${e}-switch--disabled`,this.round&&`${e}-switch--round`,this.loading&&`${e}-switch--loading`,this.pressed&&`${e}-switch--pressed`,this.rubberBand&&`${e}-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},t(`div`,{class:`${e}-switch__rail`,"aria-hidden":`true`,style:i},y(s,n=>y(c,r=>n||r?t(`div`,{"aria-hidden":!0,class:`${e}-switch__children-placeholder`},t(`div`,{class:`${e}-switch__rail-placeholder`},t(`div`,{class:`${e}-switch__button-placeholder`}),n),t(`div`,{class:`${e}-switch__rail-placeholder`},t(`div`,{class:`${e}-switch__button-placeholder`}),r)):null)),t(`div`,{class:`${e}-switch__button`},y(l,n=>y(u,r=>y(d,i=>t(T,null,{default:()=>this.loading?t(C,Object.assign({key:`loading`,clsPrefix:e,strokeWidth:20},this.spinProps)):this.checked&&(r||n)?t(`div`,{class:`${e}-switch__button-icon`,key:r?`checked-icon`:`icon`},r||n):!this.checked&&(i||n)?t(`div`,{class:`${e}-switch__button-icon`,key:i?`unchecked-icon`:`icon`},i||n):null})))),y(s,n=>n&&t(`div`,{key:`checked`,class:`${e}-switch__checked`},n)),y(c,n=>n&&t(`div`,{key:`unchecked`,class:`${e}-switch__unchecked`},n)))))}});export{D as n,N as t}; |