PageHeader.869df6f3.js 3.5 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. import{d as S,bi as e,cE as l,cj as z,cG as i,cI as _,cJ as y,dt as $,du as H,F as P,cP as R,cp as B}from"./index.1b3483ad.js";const E=S({name:"ArrowBack",render(){return e("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},e("path",{d:"M0 0h24v24H0V0z",fill:"none"}),e("path",{d:"M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"}))}}),T=l([z("page-header-header",`
  2. margin-bottom: 20px;
  3. `),z("page-header",`
  4. display: flex;
  5. align-items: center;
  6. justify-content: space-between;
  7. line-height: 1.5;
  8. font-size: var(--n-font-size);
  9. `,[i("main",`
  10. display: flex;
  11. flex-wrap: nowrap;
  12. align-items: center;
  13. `),i("back",`
  14. display: flex;
  15. margin-right: 16px;
  16. font-size: var(--n-back-size);
  17. cursor: pointer;
  18. color: var(--n-back-color);
  19. transition: color .3s var(--n-bezier);
  20. `,[l("&:hover","color: var(--n-back-color-hover);"),l("&:active","color: var(--n-back-color-pressed);")]),i("avatar",`
  21. display: flex;
  22. margin-right: 12px
  23. `),i("title",`
  24. margin-right: 16px;
  25. transition: color .3s var(--n-bezier);
  26. font-size: var(--n-title-font-size);
  27. font-weight: var(--n-title-font-weight);
  28. color: var(--n-title-text-color);
  29. `),i("subtitle",`
  30. font-size: 14px;
  31. transition: color .3s var(--n-bezier);
  32. color: var(--n-subtitle-text-color);
  33. `)]),z("page-header-content",`
  34. font-size: var(--n-font-size);
  35. `,[l("&:not(:first-child)","margin-top: 20px;")]),z("page-header-footer",`
  36. font-size: var(--n-font-size);
  37. `,[l("&:not(:first-child)","margin-top: 20px;")])]),j=Object.assign(Object.assign({},y.props),{title:String,subtitle:String,extra:String,onBack:Function}),I=S({name:"PageHeader",props:j,setup(r){const{mergedClsPrefixRef:o,mergedRtlRef:c,inlineThemeDisabled:s}=_(r),d=y("PageHeader","-page-header",T,$,r,o),t=H("PageHeader",c,o),h=P(()=>{const{self:{titleTextColor:g,subtitleTextColor:p,backColor:f,fontSize:u,titleFontSize:v,backSize:n,titleFontWeight:b,backColorHover:m,backColorPressed:x},common:{cubicBezierEaseInOut:k}}=d.value;return{"--n-title-text-color":g,"--n-title-font-size":v,"--n-title-font-weight":b,"--n-font-size":u,"--n-back-size":n,"--n-subtitle-text-color":p,"--n-back-color":f,"--n-back-color-hover":m,"--n-back-color-pressed":x,"--n-bezier":k}}),a=s?R("page-header",void 0,h,r):void 0;return{rtlEnabled:t,mergedClsPrefix:o,cssVars:s?void 0:h,themeClass:a==null?void 0:a.themeClass,onRender:a==null?void 0:a.onRender}},render(){var r;const{onBack:o,title:c,subtitle:s,extra:d,mergedClsPrefix:t,cssVars:h,$slots:a}=this;(r=this.onRender)===null||r===void 0||r.call(this);const{title:g,subtitle:p,extra:f,default:u,header:v,avatar:n,footer:b,back:m}=a,x=o,k=c||g,w=s||p,C=d||f;return e("div",{style:h,class:[`${t}-page-header-wrapper`,this.themeClass,this.rtlEnabled&&`${t}-page-header-wrapper--rtl`]},v?e("div",{class:`${t}-page-header-header`,key:"breadcrumb"},v()):null,(x||n||k||w||C)&&e("div",{class:`${t}-page-header`,key:"header"},e("div",{class:`${t}-page-header__main`,key:"back"},x?e("div",{class:`${t}-page-header__back`,onClick:o},m?m():e(B,{clsPrefix:t},{default:()=>e(E,null)})):null,n?e("div",{class:`${t}-page-header__avatar`},n()):null,k?e("div",{class:`${t}-page-header__title`,key:"title"},c||g()):null,w?e("div",{class:`${t}-page-header__subtitle`,key:"subtitle"},s||p()):null),C?e("div",{class:`${t}-page-header__extra`},d||f()):null),u?e("div",{class:`${t}-page-header-content`,key:"content"},u()):null,b?e("div",{class:`${t}-page-header-footer`,key:"footer"},b()):null)}});export{I as N};