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,at as i,bt as a,d as o,gn as s,it as c,kt as l,nt as u,ot as d,p as f,st as p,tt as m,yn as h}from"./client-Cs6K6NLD.js";import{a as g,c as _}from"./ui-DTRKi8Fz.js";import{t as v}from"./use-merged-state-CMHY6wVS.js";import{c as y,o as b,r as x}from"./_plugin-vue_export-helper-DPScEKW6.js";import{n as S}from"./use-form-item-CBMiqYrw.js";import{L as C,V as w,q as T,u as E}from"./index-DSWrUwih.js";var D=l({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:o,self:O},A=u(`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;
|
|
`,[c(`children-placeholder`,`
|
|
height: var(--n-rail-height);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
visibility: hidden;
|
|
`),c(`rail-placeholder`,`
|
|
display: flex;
|
|
flex-wrap: none;
|
|
`),c(`button-placeholder`,`
|
|
width: calc(1.75 * var(--n-rail-height));
|
|
height: var(--n-rail-height);
|
|
`),u(`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%)`})]),c(`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;
|
|
`),c(`checked`,`
|
|
right: 0;
|
|
padding-right: calc(1.25 * var(--n-rail-height) - var(--n-offset));
|
|
`),c(`unchecked`,`
|
|
left: 0;
|
|
justify-content: flex-end;
|
|
padding-left: calc(1.25 * var(--n-rail-height) - var(--n-offset));
|
|
`),m(`&:focus`,[c(`rail`,`
|
|
box-shadow: var(--n-box-shadow-focus);
|
|
`)]),i(`round`,[c(`rail`,`border-radius: calc(var(--n-rail-height) / 2);`,[c(`button`,`border-radius: calc(var(--n-button-height) / 2);`)])]),d(`disabled`,[d(`icon`,[i(`rubber-band`,[i(`pressed`,[c(`rail`,[c(`button`,`max-width: var(--n-button-width-pressed);`)])]),c(`rail`,[m(`&:active`,[c(`button`,`max-width: var(--n-button-width-pressed);`)])]),i(`active`,[i(`pressed`,[c(`rail`,[c(`button`,`left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));`)])]),c(`rail`,[m(`&:active`,[c(`button`,`left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));`)])])])])])]),i(`active`,[c(`rail`,[c(`button`,`left: calc(100% - var(--n-button-width) - var(--n-offset))`)])]),c(`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);
|
|
`,[c(`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()]),c(`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);
|
|
`)]),i(`active`,[c(`rail`,`background-color: var(--n-rail-color-active);`)]),i(`loading`,[c(`rail`,`
|
|
cursor: wait;
|
|
`)]),i(`disabled`,[c(`rail`,`
|
|
cursor: not-allowed;
|
|
opacity: .5;
|
|
`)])]),j=Object.assign(Object.assign({},f.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=l({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:i,mergedComponentPropsRef:o}=n(t),c=f(`Switch`,`-switch`,A,k,t,r),l=S(t,{mergedSize(e){return t.size===void 0?e?e.mergedSize.value:o?.value?.Switch?.size||`medium`:t.size}}),{mergedSizeRef:u,mergedDisabledRef:d}=l,m=s(t.defaultValue),b=v(h(t,`value`),m),x=a(()=>b.value===t.checkedValue),C=s(!1),w=s(!1),T=a(()=>{let{railStyle:e}=t;if(e)return e({focused:w.value,checked:x.value})});function E(e){let{"onUpdate:value":n,onChange:r,onUpdateValue:i}=t,{nTriggerFormInput:a,nTriggerFormChange:o}=l;n&&y(n,e),i&&y(i,e),r&&y(r,e),m.value=e,a(),o()}function D(){let{nTriggerFormFocus:e}=l;e()}function O(){let{nTriggerFormBlur:e}=l;e()}function j(){t.loading||d.value||(b.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||d.value||e.key===` `&&(b.value===t.checkedValue?E(t.uncheckedValue):E(t.checkedValue),C.value=!1)}function I(e){t.loading||d.value||e.key===` `&&(e.preventDefault(),C.value=!0)}let L=a(()=>{let{value:e}=u,{self:{opacityDisabled:t,railColor:n,railColorActive:r,buttonBoxShadow:i,buttonColor:a,boxShadowFocus:o,loadingColor:s,textColor:l,iconColor:d,[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}}=c.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":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":s,"--n-text-color":l,"--n-icon-color":d}}),R=i?e(`switch`,a(()=>u.value[0]),L,t):void 0;return{handleClick:j,handleBlur:P,handleFocus:N,handleKeyup:F,handleKeydown:I,mergedRailStyle:T,pressed:C,mergedClsPrefix:r,mergedValue:b,checked:x,mergedDisabled:d,cssVars:i?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=!(x(l)&&x(u)&&x(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},b(s,n=>b(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`},b(l,n=>b(u,r=>b(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})))),b(s,n=>n&&t(`div`,{key:`checked`,class:`${e}-switch__checked`},n)),b(c,n=>n&&t(`div`,{key:`unchecked`,class:`${e}-switch__unchecked`},n)))))}});export{D as n,N as t}; |