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

87 lines
7.8 KiB

  1. import{u as X}from"./use-rtl-CRyak7TN.js";import{r as b,e as g}from"./resolve-slot-Dzko3qih.js";import{b as n,c as f,C as Y,d as i,a as d,A as Z,B as ee,u as oe,f as S,g as z,h as re}from"./light-Cua7cqmF.js";import{g as te}from"./index-C-nsH7mf.js";import{c as ne}from"./call-f2ri57Kd.js";import{c as de}from"./light-BqIgj82_.js";import{N as ae}from"./Close-D6FODkWY.js";import{k as ie}from"./keysOf-HiGXOwLp.js";import{d as se,c as y,G as s}from"./index-bVOhw2NF.js";const le=n([f("card",`
  2. font-size: var(--n-font-size);
  3. line-height: var(--n-line-height);
  4. display: flex;
  5. flex-direction: column;
  6. width: 100%;
  7. box-sizing: border-box;
  8. position: relative;
  9. border-radius: var(--n-border-radius);
  10. background-color: var(--n-color);
  11. color: var(--n-text-color);
  12. word-break: break-word;
  13. transition:
  14. color .3s var(--n-bezier),
  15. background-color .3s var(--n-bezier),
  16. box-shadow .3s var(--n-bezier),
  17. border-color .3s var(--n-bezier);
  18. `,[Y({background:"var(--n-color-modal)"}),i("hoverable",[n("&:hover","box-shadow: var(--n-box-shadow);")]),i("content-segmented",[n(">",[d("content",{paddingTop:"var(--n-padding-bottom)"})])]),i("content-soft-segmented",[n(">",[d("content",`
  19. margin: 0 var(--n-padding-left);
  20. padding: var(--n-padding-bottom) 0;
  21. `)])]),i("footer-segmented",[n(">",[d("footer",{paddingTop:"var(--n-padding-bottom)"})])]),i("footer-soft-segmented",[n(">",[d("footer",`
  22. padding: var(--n-padding-bottom) 0;
  23. margin: 0 var(--n-padding-left);
  24. `)])]),n(">",[f("card-header",`
  25. box-sizing: border-box;
  26. display: flex;
  27. align-items: center;
  28. font-size: var(--n-title-font-size);
  29. padding:
  30. var(--n-padding-top)
  31. var(--n-padding-left)
  32. var(--n-padding-bottom)
  33. var(--n-padding-left);
  34. `,[d("main",`
  35. font-weight: var(--n-title-font-weight);
  36. transition: color .3s var(--n-bezier);
  37. flex: 1;
  38. min-width: 0;
  39. color: var(--n-title-text-color);
  40. `),d("extra",`
  41. display: flex;
  42. align-items: center;
  43. font-size: var(--n-font-size);
  44. font-weight: 400;
  45. transition: color .3s var(--n-bezier);
  46. color: var(--n-text-color);
  47. `),d("close",`
  48. margin: 0 0 0 8px;
  49. transition:
  50. background-color .3s var(--n-bezier),
  51. color .3s var(--n-bezier);
  52. `)]),d("action",`
  53. box-sizing: border-box;
  54. transition:
  55. background-color .3s var(--n-bezier),
  56. border-color .3s var(--n-bezier);
  57. background-clip: padding-box;
  58. background-color: var(--n-action-color);
  59. `),d("content","flex: 1; min-width: 0;"),d("content, footer",`
  60. box-sizing: border-box;
  61. padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left);
  62. font-size: var(--n-font-size);
  63. `,[n("&:first-child",{paddingTop:"var(--n-padding-bottom)"})]),d("action",`
  64. background-color: var(--n-action-color);
  65. padding: var(--n-padding-bottom) var(--n-padding-left);
  66. border-bottom-left-radius: var(--n-border-radius);
  67. border-bottom-right-radius: var(--n-border-radius);
  68. `)]),f("card-cover",`
  69. overflow: hidden;
  70. width: 100%;
  71. border-radius: var(--n-border-radius) var(--n-border-radius) 0 0;
  72. `,[n("img",`
  73. display: block;
  74. width: 100%;
  75. `)]),i("bordered",`
  76. border: 1px solid var(--n-border-color);
  77. `,[n("&:target","border-color: var(--n-color-target);")]),i("action-segmented",[n(">",[d("action",[n("&:not(:first-child)",{borderTop:"1px solid var(--n-border-color)"})])])]),i("content-segmented, content-soft-segmented",[n(">",[d("content",{transition:"border-color 0.3s var(--n-bezier)"},[n("&:not(:first-child)",{borderTop:"1px solid var(--n-border-color)"})])])]),i("footer-segmented, footer-soft-segmented",[n(">",[d("footer",{transition:"border-color 0.3s var(--n-bezier)"},[n("&:not(:first-child)",{borderTop:"1px solid var(--n-border-color)"})])])]),i("embedded",`
  78. background-color: var(--n-color-embedded);
  79. `)]),Z(f("card",`
  80. background: var(--n-color-modal);
  81. `,[i("embedded",`
  82. background-color: var(--n-color-embedded-modal);
  83. `)])),ee(f("card",`
  84. background: var(--n-color-popover);
  85. `,[i("embedded",`
  86. background-color: var(--n-color-embedded-popover);
  87. `)]))]),k={title:[String,Function],contentClass:String,contentStyle:[Object,String],headerClass:String,headerStyle:[Object,String],headerExtraClass:String,headerExtraStyle:[Object,String],footerClass:String,footerStyle:[Object,String],embedded:Boolean,segmented:{type:[Boolean,Object],default:!1},size:{type:String,default:"medium"},bordered:{type:Boolean,default:!0},closable:Boolean,hoverable:Boolean,role:String,onClose:[Function,Array],tag:{type:String,default:"div"},cover:Function,content:[String,Function],footer:Function,action:Function,headerExtra:Function},Ce=ie(k),ce=Object.assign(Object.assign({},S.props),k),ze=se({name:"Card",props:ce,setup(o){const p=()=>{const{onClose:t}=o;t&&ne(t)},{inlineThemeDisabled:m,mergedClsPrefixRef:e,mergedRtlRef:u}=oe(o),c=S("Card","-card",le,de,o,e),x=X("Card",u,e),h=y(()=>{const{size:t}=o,{self:{color:r,colorModal:l,colorTarget:C,textColor:v,titleTextColor:$,titleFontWeight:w,borderColor:_,actionColor:E,borderRadius:B,lineHeight:T,closeIconColor:P,closeIconColorHover:R,closeIconColorPressed:F,closeColorHover:O,closeColorPressed:j,closeBorderRadius:M,closeIconSize:I,closeSize:V,boxShadow:H,colorPopover:N,colorEmbedded:A,colorEmbeddedModal:K,colorEmbeddedPopover:L,[z("padding",t)]:W,[z("fontSize",t)]:D,[z("titleFontSize",t)]:G},common:{cubicBezierEaseInOut:q}}=c.value,{top:J,left:Q,bottom:U}=te(W);return{"--n-bezier":q,"--n-border-radius":B,"--n-color":r,"--n-color-modal":l,"--n-color-popover":N,"--n-color-embedded":A,"--n-color-embedded-modal":K,"--n-color-embedded-popover":L,"--n-color-target":C,"--n-text-color":v,"--n-line-height":T,"--n-action-color":E,"--n-title-text-color":$,"--n-title-font-weight":w,"--n-close-icon-color":P,"--n-close-icon-color-hover":R,"--n-close-icon-color-pressed":F,"--n-close-color-hover":O,"--n-close-color-pressed":j,"--n-border-color":_,"--n-box-shadow":H,"--n-padding-top":J,"--n-padding-bottom":U,"--n-padding-left":Q,"--n-font-size":D,"--n-title-font-size":G,"--n-close-size":V,"--n-close-icon-size":I,"--n-close-border-radius":M}}),a=m?re("card",y(()=>o.size[0]),h,o):void 0;return{rtlEnabled:x,mergedClsPrefix:e,mergedTheme:c,handleCloseClick:p,cssVars:m?void 0:h,themeClass:a==null?void 0:a.themeClass,onRender:a==null?void 0:a.onRender}},render(){const{segmented:o,bordered:p,hoverable:m,mergedClsPrefix:e,rtlEnabled:u,onRender:c,embedded:x,tag:h,$slots:a}=this;return c==null||c(),s(h,{class:[`${e}-card`,this.themeClass,x&&`${e}-card--embedded`,{[`${e}-card--rtl`]:u,[`${e}-card--content${typeof o!="boolean"&&o.content==="soft"?"-soft":""}-segmented`]:o===!0||o!==!1&&o.content,[`${e}-card--footer${typeof o!="boolean"&&o.footer==="soft"?"-soft":""}-segmented`]:o===!0||o!==!1&&o.footer,[`${e}-card--action-segmented`]:o===!0||o!==!1&&o.action,[`${e}-card--bordered`]:p,[`${e}-card--hoverable`]:m}],style:this.cssVars,role:this.role},b(a.cover,t=>{const r=this.cover?g([this.cover()]):t;return r&&s("div",{class:`${e}-card-cover`,role:"none"},r)}),b(a.header,t=>{const{title:r}=this,l=r?g(typeof r=="function"?[r()]:[r]):t;return l||this.closable?s("div",{class:[`${e}-card-header`,this.headerClass],style:this.headerStyle,role:"heading"},s("div",{class:`${e}-card-header__main`,role:"heading"},l),b(a["header-extra"],C=>{const v=this.headerExtra?g([this.headerExtra()]):C;return v&&s("div",{class:[`${e}-card-header__extra`,this.headerExtraClass],style:this.headerExtraStyle},v)}),this.closable&&s(ae,{clsPrefix:e,class:`${e}-card-header__close`,onClick:this.handleCloseClick,absolute:!0})):null}),b(a.default,t=>{const{content:r}=this,l=r?g(typeof r=="function"?[r()]:[r]):t;return l&&s("div",{class:[`${e}-card__content`,this.contentClass],style:this.contentStyle,role:"none"},l)}),b(a.footer,t=>{const r=this.footer?g([this.footer()]):t;return r&&s("div",{class:[`${e}-card__footer`,this.footerClass],style:this.footerStyle,role:"none"},r)}),b(a.action,t=>{const r=this.action?g([this.action()]):t;return r&&s("div",{class:`${e}-card__action`,role:"none"},r)}))}});export{ze as _,Ce as a,k as c};