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
87 lines
7.8 KiB
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",`
|
|
font-size: var(--n-font-size);
|
|
line-height: var(--n-line-height);
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
border-radius: var(--n-border-radius);
|
|
background-color: var(--n-color);
|
|
color: var(--n-text-color);
|
|
word-break: break-word;
|
|
transition:
|
|
color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
box-shadow .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier);
|
|
`,[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",`
|
|
margin: 0 var(--n-padding-left);
|
|
padding: var(--n-padding-bottom) 0;
|
|
`)])]),i("footer-segmented",[n(">",[d("footer",{paddingTop:"var(--n-padding-bottom)"})])]),i("footer-soft-segmented",[n(">",[d("footer",`
|
|
padding: var(--n-padding-bottom) 0;
|
|
margin: 0 var(--n-padding-left);
|
|
`)])]),n(">",[f("card-header",`
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: var(--n-title-font-size);
|
|
padding:
|
|
var(--n-padding-top)
|
|
var(--n-padding-left)
|
|
var(--n-padding-bottom)
|
|
var(--n-padding-left);
|
|
`,[d("main",`
|
|
font-weight: var(--n-title-font-weight);
|
|
transition: color .3s var(--n-bezier);
|
|
flex: 1;
|
|
min-width: 0;
|
|
color: var(--n-title-text-color);
|
|
`),d("extra",`
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: var(--n-font-size);
|
|
font-weight: 400;
|
|
transition: color .3s var(--n-bezier);
|
|
color: var(--n-text-color);
|
|
`),d("close",`
|
|
margin: 0 0 0 8px;
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier);
|
|
`)]),d("action",`
|
|
box-sizing: border-box;
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier);
|
|
background-clip: padding-box;
|
|
background-color: var(--n-action-color);
|
|
`),d("content","flex: 1; min-width: 0;"),d("content, footer",`
|
|
box-sizing: border-box;
|
|
padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left);
|
|
font-size: var(--n-font-size);
|
|
`,[n("&:first-child",{paddingTop:"var(--n-padding-bottom)"})]),d("action",`
|
|
background-color: var(--n-action-color);
|
|
padding: var(--n-padding-bottom) var(--n-padding-left);
|
|
border-bottom-left-radius: var(--n-border-radius);
|
|
border-bottom-right-radius: var(--n-border-radius);
|
|
`)]),f("card-cover",`
|
|
overflow: hidden;
|
|
width: 100%;
|
|
border-radius: var(--n-border-radius) var(--n-border-radius) 0 0;
|
|
`,[n("img",`
|
|
display: block;
|
|
width: 100%;
|
|
`)]),i("bordered",`
|
|
border: 1px solid var(--n-border-color);
|
|
`,[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",`
|
|
background-color: var(--n-color-embedded);
|
|
`)]),Z(f("card",`
|
|
background: var(--n-color-modal);
|
|
`,[i("embedded",`
|
|
background-color: var(--n-color-embedded-modal);
|
|
`)])),ee(f("card",`
|
|
background: var(--n-color-popover);
|
|
`,[i("embedded",`
|
|
background-color: var(--n-color-embedded-popover);
|
|
`)]))]),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};
|