PageHeader-74caddbf.js 3.5 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. import{d as C,k as e,U as l,T as z,V as i,W as y,$ as S,ae as $,C as H,a1 as R,aj as B,eh as P}from"./index-e497b666.js";const T=C({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"}))}}),E=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;")])]),V=Object.assign(Object.assign({},S.props),{title:String,subtitle:String,extra:String,onBack:Function}),F=C({name:"PageHeader",props:V,setup(r){const{mergedClsPrefixRef:o,mergedRtlRef:c,inlineThemeDisabled:n}=y(r),d=S("PageHeader","-page-header",E,P,r,o),t=$("PageHeader",c,o),h=H(()=>{const{self:{titleTextColor:g,subtitleTextColor:p,backColor:f,fontSize:u,titleFontSize:v,backSize:s,titleFontWeight:b,backColorHover:m,backColorPressed:k},common:{cubicBezierEaseInOut:x}}=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":s,"--n-subtitle-text-color":p,"--n-back-color":f,"--n-back-color-hover":m,"--n-back-color-pressed":k,"--n-bezier":x}}),a=n?R("page-header",void 0,h,r):void 0;return{rtlEnabled:t,mergedClsPrefix:o,cssVars:n?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:n,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:s,footer:b,back:m}=a,k=o,x=c||g,w=n||p,_=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,(k||s||x||w||_)&&e("div",{class:`${t}-page-header`,key:"header"},e("div",{class:`${t}-page-header__main`,key:"back"},k?e("div",{class:`${t}-page-header__back`,onClick:o},m?m():e(B,{clsPrefix:t},{default:()=>e(T,null)})):null,s?e("div",{class:`${t}-page-header__avatar`},s()):null,x?e("div",{class:`${t}-page-header__title`,key:"title"},c||g()):null,w?e("div",{class:`${t}-page-header__subtitle`,key:"subtitle"},n||p()):null),_?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{F as _};