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

131 lines
12 KiB

  1. import{c as a,d as m,f as $,u as M,h as F,a as n,b as C}from"./light-Cua7cqmF.js";import{N as q}from"./Icon-Ck7Ij_E6.js";import{C as G}from"./ChevronRight-DjG_plXV.js";import{d as O,s as S,P as N,c as p,G as c,i as J,O as Y}from"./index-bVOhw2NF.js";import{c as A}from"./context-KbjOeZY_.js";import{l as W}from"./light-kqX_tTNW.js";import{u as V,S as U}from"./Scrollbar-DVK2lT9w.js";import{u as Q}from"./use-merged-state-CzrzZJbg.js";import{f as E}from"./format-length-B-p6aW7q.js";import{c as k}from"./call-f2ri57Kd.js";const Z=A("n-layout-sider"),D={type:String,default:"static"},ee=a("layout",`
  2. color: var(--n-text-color);
  3. background-color: var(--n-color);
  4. box-sizing: border-box;
  5. position: relative;
  6. z-index: auto;
  7. flex: auto;
  8. overflow: hidden;
  9. transition:
  10. box-shadow .3s var(--n-bezier),
  11. background-color .3s var(--n-bezier),
  12. color .3s var(--n-bezier);
  13. `,[a("layout-scroll-container",`
  14. overflow-x: hidden;
  15. box-sizing: border-box;
  16. height: 100%;
  17. `),m("absolute-positioned",`
  18. position: absolute;
  19. left: 0;
  20. right: 0;
  21. top: 0;
  22. bottom: 0;
  23. `)]),oe={embedded:Boolean,position:D,nativeScrollbar:{type:Boolean,default:!0},scrollbarProps:Object,onScroll:Function,contentClass:String,contentStyle:{type:[String,Object],default:""},hasSider:Boolean,siderPlacement:{type:String,default:"left"}},H=A("n-layout");function te(e){return O({name:e?"LayoutContent":"Layout",props:Object.assign(Object.assign({},$.props),oe),setup(o){const r=S(null),g=S(null),{mergedClsPrefixRef:v,inlineThemeDisabled:b}=M(o),T=$("Layout","-layout",ee,W,o,v);function j(i,d){if(o.nativeScrollbar){const{value:u}=r;u&&(d===void 0?u.scrollTo(i):u.scrollTo(i,d))}else{const{value:u}=g;u&&u.scrollTo(i,d)}}N(H,o);let z=0,R=0;const I=i=>{var d;const u=i.target;z=u.scrollLeft,R=u.scrollTop,(d=o.onScroll)===null||d===void 0||d.call(o,i)};V(()=>{if(o.nativeScrollbar){const i=r.value;i&&(i.scrollTop=R,i.scrollLeft=z)}});const w={display:"flex",flexWrap:"nowrap",width:"100%",flexDirection:"row"},_={scrollTo:j},P=p(()=>{const{common:{cubicBezierEaseInOut:i},self:d}=T.value;return{"--n-bezier":i,"--n-color":o.embedded?d.colorEmbedded:d.color,"--n-text-color":d.textColor}}),f=b?F("layout",p(()=>o.embedded?"e":""),P,o):void 0;return Object.assign({mergedClsPrefix:v,scrollableElRef:r,scrollbarInstRef:g,hasSiderStyle:w,mergedTheme:T,handleNativeElScroll:I,cssVars:b?void 0:P,themeClass:f==null?void 0:f.themeClass,onRender:f==null?void 0:f.onRender},_)},render(){var o;const{mergedClsPrefix:r,hasSider:g}=this;(o=this.onRender)===null||o===void 0||o.call(this);const v=g?this.hasSiderStyle:void 0,b=[this.themeClass,e&&`${r}-layout-content`,`${r}-layout`,`${r}-layout--${this.position}-positioned`];return c("div",{class:b,style:this.cssVars},this.nativeScrollbar?c("div",{ref:"scrollableElRef",class:[`${r}-layout-scroll-container`,this.contentClass],style:[this.contentStyle,v],onScroll:this.handleNativeElScroll},this.$slots):c(U,Object.assign({},this.scrollbarProps,{onScroll:this.onScroll,ref:"scrollbarInstRef",theme:this.mergedTheme.peers.Scrollbar,themeOverrides:this.mergedTheme.peerOverrides.Scrollbar,contentClass:this.contentClass,contentStyle:[this.contentStyle,v]}),this.$slots))}})}const ve=te(!1),re=a("layout-sider",`
  24. flex-shrink: 0;
  25. box-sizing: border-box;
  26. position: relative;
  27. z-index: 1;
  28. color: var(--n-text-color);
  29. transition:
  30. color .3s var(--n-bezier),
  31. border-color .3s var(--n-bezier),
  32. min-width .3s var(--n-bezier),
  33. max-width .3s var(--n-bezier),
  34. transform .3s var(--n-bezier),
  35. background-color .3s var(--n-bezier);
  36. background-color: var(--n-color);
  37. display: flex;
  38. justify-content: flex-end;
  39. `,[m("bordered",[n("border",`
  40. content: "";
  41. position: absolute;
  42. top: 0;
  43. bottom: 0;
  44. width: 1px;
  45. background-color: var(--n-border-color);
  46. transition: background-color .3s var(--n-bezier);
  47. `)]),n("left-placement",[m("bordered",[n("border",`
  48. right: 0;
  49. `)])]),m("right-placement",`
  50. justify-content: flex-start;
  51. `,[m("bordered",[n("border",`
  52. left: 0;
  53. `)]),m("collapsed",[a("layout-toggle-button",[a("base-icon",`
  54. transform: rotate(180deg);
  55. `)]),a("layout-toggle-bar",[C("&:hover",[n("top",{transform:"rotate(-12deg) scale(1.15) translateY(-2px)"}),n("bottom",{transform:"rotate(12deg) scale(1.15) translateY(2px)"})])])]),a("layout-toggle-button",`
  56. left: 0;
  57. transform: translateX(-50%) translateY(-50%);
  58. `,[a("base-icon",`
  59. transform: rotate(0);
  60. `)]),a("layout-toggle-bar",`
  61. left: -28px;
  62. transform: rotate(180deg);
  63. `,[C("&:hover",[n("top",{transform:"rotate(12deg) scale(1.15) translateY(-2px)"}),n("bottom",{transform:"rotate(-12deg) scale(1.15) translateY(2px)"})])])]),m("collapsed",[a("layout-toggle-bar",[C("&:hover",[n("top",{transform:"rotate(-12deg) scale(1.15) translateY(-2px)"}),n("bottom",{transform:"rotate(12deg) scale(1.15) translateY(2px)"})])]),a("layout-toggle-button",[a("base-icon",`
  64. transform: rotate(0);
  65. `)])]),a("layout-toggle-button",`
  66. transition:
  67. color .3s var(--n-bezier),
  68. right .3s var(--n-bezier),
  69. left .3s var(--n-bezier),
  70. border-color .3s var(--n-bezier),
  71. background-color .3s var(--n-bezier);
  72. cursor: pointer;
  73. width: 24px;
  74. height: 24px;
  75. position: absolute;
  76. top: 50%;
  77. right: 0;
  78. border-radius: 50%;
  79. display: flex;
  80. align-items: center;
  81. justify-content: center;
  82. font-size: 18px;
  83. color: var(--n-toggle-button-icon-color);
  84. border: var(--n-toggle-button-border);
  85. background-color: var(--n-toggle-button-color);
  86. box-shadow: 0 2px 4px 0px rgba(0, 0, 0, .06);
  87. transform: translateX(50%) translateY(-50%);
  88. z-index: 1;
  89. `,[a("base-icon",`
  90. transition: transform .3s var(--n-bezier);
  91. transform: rotate(180deg);
  92. `)]),a("layout-toggle-bar",`
  93. cursor: pointer;
  94. height: 72px;
  95. width: 32px;
  96. position: absolute;
  97. top: calc(50% - 36px);
  98. right: -28px;
  99. `,[n("top, bottom",`
  100. position: absolute;
  101. width: 4px;
  102. border-radius: 2px;
  103. height: 38px;
  104. left: 14px;
  105. transition:
  106. background-color .3s var(--n-bezier),
  107. transform .3s var(--n-bezier);
  108. `),n("bottom",`
  109. position: absolute;
  110. top: 34px;
  111. `),C("&:hover",[n("top",{transform:"rotate(12deg) scale(1.15) translateY(-2px)"}),n("bottom",{transform:"rotate(-12deg) scale(1.15) translateY(2px)"})]),n("top, bottom",{backgroundColor:"var(--n-toggle-bar-color)"}),C("&:hover",[n("top, bottom",{backgroundColor:"var(--n-toggle-bar-color-hover)"})])]),n("border",`
  112. position: absolute;
  113. top: 0;
  114. right: 0;
  115. bottom: 0;
  116. width: 1px;
  117. transition: background-color .3s var(--n-bezier);
  118. `),a("layout-sider-scroll-container",`
  119. flex-grow: 1;
  120. flex-shrink: 0;
  121. box-sizing: border-box;
  122. height: 100%;
  123. opacity: 0;
  124. transition: opacity .3s var(--n-bezier);
  125. max-width: 100%;
  126. `),m("show-content",[a("layout-sider-scroll-container",{opacity:1})]),m("absolute-positioned",`
  127. position: absolute;
  128. left: 0;
  129. top: 0;
  130. bottom: 0;
  131. `)]),le=O({name:"LayoutToggleButton",props:{clsPrefix:{type:String,required:!0},onClick:Function},render(){const{clsPrefix:e}=this;return c("div",{class:`${e}-layout-toggle-button`,onClick:this.onClick},c(q,{clsPrefix:e},{default:()=>c(G,null)}))}}),se=O({props:{clsPrefix:{type:String,required:!0},onClick:Function},render(){const{clsPrefix:e}=this;return c("div",{onClick:this.onClick,class:`${e}-layout-toggle-bar`},c("div",{class:`${e}-layout-toggle-bar__top`}),c("div",{class:`${e}-layout-toggle-bar__bottom`}))}}),ne={position:D,bordered:Boolean,collapsedWidth:{type:Number,default:48},width:{type:[Number,String],default:272},contentClass:String,contentStyle:{type:[String,Object],default:""},collapseMode:{type:String,default:"transform"},collapsed:{type:Boolean,default:void 0},defaultCollapsed:Boolean,showCollapsedContent:{type:Boolean,default:!0},showTrigger:{type:[Boolean,String],default:!1},nativeScrollbar:{type:Boolean,default:!0},inverted:Boolean,scrollbarProps:Object,triggerClass:String,triggerStyle:[String,Object],collapsedTriggerClass:String,collapsedTriggerStyle:[String,Object],"onUpdate:collapsed":[Function,Array],onUpdateCollapsed:[Function,Array],onAfterEnter:Function,onAfterLeave:Function,onExpand:[Function,Array],onCollapse:[Function,Array],onScroll:Function},pe=O({name:"LayoutSider",props:Object.assign(Object.assign({},$.props),ne),setup(e){const o=J(H),r=S(null),g=S(null),v=S(e.defaultCollapsed),b=Q(Y(e,"collapsed"),v),T=p(()=>E(b.value?e.collapsedWidth:e.width)),j=p(()=>e.collapseMode!=="transform"?{}:{minWidth:E(e.width)}),z=p(()=>o?o.siderPlacement:"left");function R(s,t){if(e.nativeScrollbar){const{value:l}=r;l&&(t===void 0?l.scrollTo(s):l.scrollTo(s,t))}else{const{value:l}=g;l&&l.scrollTo(s,t)}}function I(){const{"onUpdate:collapsed":s,onUpdateCollapsed:t,onExpand:l,onCollapse:B}=e,{value:x}=b;t&&k(t,!x),s&&k(s,!x),v.value=!x,x?l&&k(l):B&&k(B)}let w=0,_=0;const P=s=>{var t;const l=s.target;w=l.scrollLeft,_=l.scrollTop,(t=e.onScroll)===null||t===void 0||t.call(e,s)};V(()=>{if(e.nativeScrollbar){const s=r.value;s&&(s.scrollTop=_,s.scrollLeft=w)}}),N(Z,{collapsedRef:b,collapseModeRef:Y(e,"collapseMode")});const{mergedClsPrefixRef:f,inlineThemeDisabled:i}=M(e),d=$("Layout","-layout-sider",re,W,e,f);function u(s){var t,l;s.propertyName==="max-width"&&(b.value?(t=e.onAfterLeave)===null||t===void 0||t.call(e):(l=e.onAfterEnter)===null||l===void 0||l.call(e))}const X={scrollTo:R},L=p(()=>{const{common:{cubicBezierEaseInOut:s},self:t}=d.value,{siderToggleButtonColor:l,siderToggleButtonBorder:B,siderToggleBarColor:x,siderToggleBarColorHover:K}=t,h={"--n-bezier":s,"--n-toggle-button-color":l,"--n-toggle-button-border":B,"--n-toggle-bar-color":x,"--n-toggle-bar-color-hover":K};return e.inverted?(h["--n-color"]=t.siderColorInverted,h["--n-text-color"]=t.textColorInverted,h["--n-border-color"]=t.siderBorderColorInverted,h["--n-toggle-button-icon-color"]=t.siderToggleButtonIconColorInverted,h.__invertScrollbar=t.__invertScrollbar):(h["--n-color"]=t.siderColor,h["--n-text-color"]=t.textColor,h["--n-border-color"]=t.siderBorderColor,h["--n-toggle-button-icon-color"]=t.siderToggleButtonIconColor),h}),y=i?F("layout-sider",p(()=>e.inverted?"a":"b"),L,e):void 0;return Object.assign({scrollableElRef:r,scrollbarInstRef:g,mergedClsPrefix:f,mergedTheme:d,styleMaxWidth:T,mergedCollapsed:b,scrollContainerStyle:j,siderPlacement:z,handleNativeElScroll:P,handleTransitionend:u,handleTriggerClick:I,inlineThemeDisabled:i,cssVars:L,themeClass:y==null?void 0:y.themeClass,onRender:y==null?void 0:y.onRender},X)},render(){var e;const{mergedClsPrefix:o,mergedCollapsed:r,showTrigger:g}=this;return(e=this.onRender)===null||e===void 0||e.call(this),c("aside",{class:[`${o}-layout-sider`,this.themeClass,`${o}-layout-sider--${this.position}-positioned`,`${o}-layout-sider--${this.siderPlacement}-placement`,this.bordered&&`${o}-layout-sider--bordered`,r&&`${o}-layout-sider--collapsed`,(!r||this.showCollapsedContent)&&`${o}-layout-sider--show-content`],onTransitionend:this.handleTransitionend,style:[this.inlineThemeDisabled?void 0:this.cssVars,{m