thing_web/public/visual/static/LayoutSider-DeJZf5oa.js

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",`
 color: var(--n-text-color);
 background-color: var(--n-color);
 box-sizing: border-box;
 position: relative;
 z-index: auto;
 flex: auto;
 overflow: hidden;
 transition:
 box-shadow .3s var(--n-bezier),
 background-color .3s var(--n-bezier),
 color .3s var(--n-bezier);
`,[a("layout-scroll-container",`
 overflow-x: hidden;
 box-sizing: border-box;
 height: 100%;
 `),m("absolute-positioned",`
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 `)]),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",`
 flex-shrink: 0;
 box-sizing: border-box;
 position: relative;
 z-index: 1;
 color: var(--n-text-color);
 transition:
 color .3s var(--n-bezier),
 border-color .3s var(--n-bezier),
 min-width .3s var(--n-bezier),
 max-width .3s var(--n-bezier),
 transform .3s var(--n-bezier),
 background-color .3s var(--n-bezier);
 background-color: var(--n-color);
 display: flex;
 justify-content: flex-end;
`,[m("bordered",[n("border",`
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 width: 1px;
 background-color: var(--n-border-color);
 transition: background-color .3s var(--n-bezier);
 `)]),n("left-placement",[m("bordered",[n("border",`
 right: 0;
 `)])]),m("right-placement",`
 justify-content: flex-start;
 `,[m("bordered",[n("border",`
 left: 0;
 `)]),m("collapsed",[a("layout-toggle-button",[a("base-icon",`
 transform: rotate(180deg);
 `)]),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",`
 left: 0;
 transform: translateX(-50%) translateY(-50%);
 `,[a("base-icon",`
 transform: rotate(0);
 `)]),a("layout-toggle-bar",`
 left: -28px;
 transform: rotate(180deg);
 `,[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",`
 transform: rotate(0);
 `)])]),a("layout-toggle-button",`
 transition:
 color .3s var(--n-bezier),
 right .3s var(--n-bezier),
 left .3s var(--n-bezier),
 border-color .3s var(--n-bezier),
 background-color .3s var(--n-bezier);
 cursor: pointer;
 width: 24px;
 height: 24px;
 position: absolute;
 top: 50%;
 right: 0;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 18px;
 color: var(--n-toggle-button-icon-color);
 border: var(--n-toggle-button-border);
 background-color: var(--n-toggle-button-color);
 box-shadow: 0 2px 4px 0px rgba(0, 0, 0, .06);
 transform: translateX(50%) translateY(-50%);
 z-index: 1;
 `,[a("base-icon",`
 transition: transform .3s var(--n-bezier);
 transform: rotate(180deg);
 `)]),a("layout-toggle-bar",`
 cursor: pointer;
 height: 72px;
 width: 32px;
 position: absolute;
 top: calc(50% - 36px);
 right: -28px;
 `,[n("top, bottom",`
 position: absolute;
 width: 4px;
 border-radius: 2px;
 height: 38px;
 left: 14px;
 transition: 
 background-color .3s var(--n-bezier),
 transform .3s var(--n-bezier);
 `),n("bottom",`
 position: absolute;
 top: 34px;
 `),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",`
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 width: 1px;
 transition: background-color .3s var(--n-bezier);
 `),a("layout-sider-scroll-container",`
 flex-grow: 1;
 flex-shrink: 0;
 box-sizing: border-box;
 height: 100%;
 opacity: 0;
 transition: opacity .3s var(--n-bezier);
 max-width: 100%;
 `),m("show-content",[a("layout-sider-scroll-container",{opacity:1})]),m("absolute-positioned",`
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 `)]),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,{maxWidth:this.styleMaxWidth,width:E(this.width)}]},this.nativeScrollbar?c("div",{class:[`${o}-layout-sider-scroll-container`,this.contentClass],onScroll:this.handleNativeElScroll,style:[this.scrollContainerStyle,{overflow:"auto"},this.contentStyle],ref:"scrollableElRef"},this.$slots):c(U,Object.assign({},this.scrollbarProps,{onScroll:this.onScroll,ref:"scrollbarInstRef",style:this.scrollContainerStyle,contentStyle:this.contentStyle,contentClass:this.contentClass,theme:this.mergedTheme.peers.Scrollbar,themeOverrides:this.mergedTheme.peerOverrides.Scrollbar,builtinThemeOverrides:this.inverted&&this.cssVars.__invertScrollbar==="true"?{colorHover:"rgba(255, 255, 255, .4)",color:"rgba(255, 255, 255, .3)"}:void 0}),this.$slots),g?g==="bar"?c(se,{clsPrefix:o,class:r?this.collapsedTriggerClass:this.triggerClass,style:r?this.collapsedTriggerStyle:this.triggerStyle,onClick:this.handleTriggerClick}):c(le,{clsPrefix:o,class:r?this.collapsedTriggerClass:this.triggerClass,style:r?this.collapsedTriggerStyle:this.triggerStyle,onClick:this.handleTriggerClick}):null,this.bordered?c("div",{class:`${o}-layout-sider__border`}):null)}});export{pe as _,ve as a,te as c,Z as l};