物管理前端
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.

102 lines
8.4 KiB

  1. import{i as A,N as se}from"./icon-switch.cssr-BCTOxvoq.js";import{c as I,a as t,b as K,d as a,e as O,u as ce,f as E,g as b,h as de}from"./light-Cua7cqmF.js";import{s as ue}from"./light-CdWU_bnm.js";import{u as he}from"./use-form-item-CNgNT5jP.js";import{u as fe}from"./use-merged-state-CzrzZJbg.js";import{p as P,d as r}from"./index-C-nsH7mf.js";import{i as U,r as v}from"./resolve-slot-Dzko3qih.js";import{N as be}from"./Loading-CByrJVhO.js";import{c as j}from"./call-f2ri57Kd.js";import{d as ve,s as H,O as ge,c as V,G as n}from"./index-bVOhw2NF.js";const me=I("switch",`
  2. height: var(--n-height);
  3. min-width: var(--n-width);
  4. vertical-align: middle;
  5. user-select: none;
  6. -webkit-user-select: none;
  7. display: inline-flex;
  8. outline: none;
  9. justify-content: center;
  10. align-items: center;
  11. `,[t("children-placeholder",`
  12. height: var(--n-rail-height);
  13. display: flex;
  14. flex-direction: column;
  15. overflow: hidden;
  16. pointer-events: none;
  17. visibility: hidden;
  18. `),t("rail-placeholder",`
  19. display: flex;
  20. flex-wrap: none;
  21. `),t("button-placeholder",`
  22. width: calc(1.75 * var(--n-rail-height));
  23. height: var(--n-rail-height);
  24. `),I("base-loading",`
  25. position: absolute;
  26. top: 50%;
  27. left: 50%;
  28. transform: translateX(-50%) translateY(-50%);
  29. font-size: calc(var(--n-button-width) - 4px);
  30. color: var(--n-loading-color);
  31. transition: color .3s var(--n-bezier);
  32. `,[A({left:"50%",top:"50%",originalTransform:"translateX(-50%) translateY(-50%)"})]),t("checked, unchecked",`
  33. transition: color .3s var(--n-bezier);
  34. color: var(--n-text-color);
  35. box-sizing: border-box;
  36. position: absolute;
  37. white-space: nowrap;
  38. top: 0;
  39. bottom: 0;
  40. display: flex;
  41. align-items: center;
  42. line-height: 1;
  43. `),t("checked",`
  44. right: 0;
  45. padding-right: calc(1.25 * var(--n-rail-height) - var(--n-offset));
  46. `),t("unchecked",`
  47. left: 0;
  48. justify-content: flex-end;
  49. padding-left: calc(1.25 * var(--n-rail-height) - var(--n-offset));
  50. `),K("&:focus",[t("rail",`
  51. box-shadow: var(--n-box-shadow-focus);
  52. `)]),a("round",[t("rail","border-radius: calc(var(--n-rail-height) / 2);",[t("button","border-radius: calc(var(--n-button-height) / 2);")])]),O("disabled",[O("icon",[a("rubber-band",[a("pressed",[t("rail",[t("button","max-width: var(--n-button-width-pressed);")])]),t("rail",[K("&:active",[t("button","max-width: var(--n-button-width-pressed);")])]),a("active",[a("pressed",[t("rail",[t("button","left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));")])]),t("rail",[K("&:active",[t("button","left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));")])])])])])]),a("active",[t("rail",[t("button","left: calc(100% - var(--n-button-width) - var(--n-offset))")])]),t("rail",`
  53. overflow: hidden;
  54. height: var(--n-rail-height);
  55. min-width: var(--n-rail-width);
  56. border-radius: var(--n-rail-border-radius);
  57. cursor: pointer;
  58. position: relative;
  59. transition:
  60. opacity .3s var(--n-bezier),
  61. background .3s var(--n-bezier),
  62. box-shadow .3s var(--n-bezier);
  63. background-color: var(--n-rail-color);
  64. `,[t("button-icon",`
  65. color: var(--n-icon-color);
  66. transition: color .3s var(--n-bezier);
  67. font-size: calc(var(--n-button-height) - 4px);
  68. position: absolute;
  69. left: 0;
  70. right: 0;
  71. top: 0;
  72. bottom: 0;
  73. display: flex;
  74. justify-content: center;
  75. align-items: center;
  76. line-height: 1;
  77. `,[A()]),t("button",`
  78. align-items: center;
  79. top: var(--n-offset);
  80. left: var(--n-offset);
  81. height: var(--n-button-height);
  82. width: var(--n-button-width-pressed);
  83. max-width: var(--n-button-width);
  84. border-radius: var(--n-button-border-radius);
  85. background-color: var(--n-button-color);
  86. box-shadow: var(--n-button-box-shadow);
  87. box-sizing: border-box;
  88. cursor: inherit;
  89. content: "";
  90. position: absolute;
  91. transition:
  92. background-color .3s var(--n-bezier),
  93. left .3s var(--n-bezier),
  94. opacity .3s var(--n-bezier),
  95. max-width .3s var(--n-bezier),
  96. box-shadow .3s var(--n-bezier);
  97. `)]),a("active",[t("rail","background-color: var(--n-rail-color-active);")]),a("loading",[t("rail",`
  98. cursor: wait;
  99. `)]),a("disabled",[t("rail",`
  100. cursor: not-allowed;
  101. opacity: .5;
  102. `)])]),we=Object.assign(Object.assign({},E.props),{size:{type:String,default:"medium"},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},onChange:[Function,Array]});let x;const Ve=ve({name:"Switch",props:we,setup(e){x===void 0&&(typeof CSS<"u"?typeof CSS.supports<"u"?x=CSS.supports("width","max(1px)"):x=!1:x=!0);const{mergedClsPrefixRef:S,inlineThemeDisabled:w}=ce(e),z=E("Switch","-switch",me,ue,e,S),l=he(e),{mergedSizeRef:_,mergedDisabledRef:h}=l,p=H(e.defaultValue),$=ge(e,"value"),f=fe($,p),y=V(()=>f.value===e.checkedValue),g=H(!1),o=H(!1),s=V(()=>{const{railStyle:i}=e;if(i)return i({focused:o.value,checked:y.value})});function c(i){const{"onUpdate:value":C,onChange:B,onUpdateValue:R}=e,{nTriggerFormInput:F,nTriggerFormChange:T}=l;C&&j(C,i),R&&j(R,i),B&&j(B,i),p.value=i,F(),T()}function L(){const{nTriggerFormFocus:i}=l;i()}function X(){const{nTriggerFormBlur:i}=l;i()}function Y(){e.loading||h.value||(f.value!==e.checkedValue?c(e.checkedValue):c(e.uncheckedValue))}function G(){o.value=!0,L()}function q(){o.value=!1,X(),g.value=!1}function J(i){e.loading||h.value||i.key===" "&&(f.value!==e.checkedValue?c(e.checkedValue):c(e.uncheckedValue),g.value=!1)}function Q(i){e.loading||h.value||i.key===" "&&(i.preventDefault(),g.value=!0)}const M=V(()=>{const{value:i}=_,{self:{opacityDisabled:C,railColor:B,railColorActive:R,buttonBoxShadow:F,buttonColor:T,boxShadowFocus:Z,loadingColor:ee,textColor:te,iconColor:ie,[b("buttonHeight",i)]:d,[b("buttonWidth",i)]:oe,[b("buttonWidthPressed",i)]:ne,[b("railHeight",i)]:u,[b("railWidth",i)]:k,[b("railBorderRadius",i)]:ae,[b("buttonBorderRadius",i)]:re},common:{cubicBezierEaseInOut:le}}=z.value;let N,W,D;return x?(N=`calc((${u} - ${d}) / 2)`,W=`max(${u}, ${d})`,D=`max(${k}, calc(${k} + ${d} - ${u}))`):(N=P((r(u)-r(d))/2),W=P(Math.max(r(u),r(d))),D=r(u)>r(d)?k:P(r(k)+r(d)-r(u))),{"--n-bezier":le,"--n-button-border-radius":re,"--n-button-box-shadow":F,"--n-button-color":T,"--n-button-width":oe,"--n-button-width-pressed":ne,"--n-button-height":d,"--n-height":W,"--n-offset":N,"--n-opacity-disabled":C,"--n-rail-border-radius":ae,"--n-rail-color":B,"--n-rail-color-active":R,"--n-rail-height":u,"--n-rail-width":k,"--n-width":D,"--n-box-shadow-focus":Z,"--n-loading-color":ee,"--n-text-color":te,"--n-icon-color":ie}}),m=w?de("switch",V(()=>_.value[0]),M,e):void 0;return{handleClick:Y,handleBlur:q,handleFocus:G,handleKeyup:J,handleKeydown:Q,mergedRailStyle:s,pressed:g,mergedClsPrefix:S,mergedValue:f,checked:y,mergedDisabled:h,cssVars:w?void 0:M,themeClass:m==null?void 0:m.themeClass,onRender:m==null?void 0:m.onRender}},render(){const{mergedClsPrefix:e,mergedDisabled:S,checked:w,mergedRailStyle:z,onRender:l,$slots:_}=this;l==null||l();const{checked:h,unchecked:p,icon:$,"checked-icon":f,"unchecked-icon":y}=_,g=!(U($)&&U(f)&&U(y));return n("div",{role:"switch","aria-checked":w,class:[`${e}-switch`,this.themeClass,g&&`${e}-switch--icon`,w&&`${e}-switch--active`,S&&`${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},n("div",{class:`${e}-switch__rail`,"aria-hidden":"true",style:z},v(h,o=>v(p,s=>o||s?n("div",{"aria-hidden":!0,class:`${e}-switch__children-placeholder`},n("div",{class:`${e}-switch__rail-placeholder`},n("div",{class:`${e}-switch__button-placeholder`}),o),n("div",{class:`${e}-switch__rail-placeholder`},n("div",{class:`${e}-switch__button-placeholder`}),s)):null)),n("div",{class:`${e}-switch__button`},v($,o=>v(f,s=>v(y,c=