125 lines
8.9 KiB
JavaScript
125 lines
8.9 KiB
JavaScript
import{At as e,Nt as t,U as n,W as r,_ as i,at as a,ct as o,lt as s,m as c,nt as l,ot as u,rt as d,tt as f,ut as p,xt as m}from"./client-DrrW410h.js";import{i as h,t as g}from"./Scrollbar-DGnXZ64x.js";import{s as _}from"./ui-BXphkCO3.js";import{c as v,n as y,o as b}from"./_plugin-vue_export-helper-2ZWAS1ss.js";import{A as x,W as S}from"./index-CvfVA1ID.js";var C=d(`card-content`,`
|
|
flex: 1;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left);
|
|
font-size: var(--n-font-size);
|
|
`),w=l([d(`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);
|
|
`,[f({background:`var(--n-color-modal)`}),u(`hoverable`,[l(`&:hover`,`box-shadow: var(--n-box-shadow);`)]),u(`content-segmented`,[l(`>`,[d(`card-content`,`
|
|
padding-top: var(--n-padding-bottom);
|
|
`),a(`content-scrollbar`,[l(`>`,[d(`scrollbar-container`,[l(`>`,[d(`card-content`,`
|
|
padding-top: var(--n-padding-bottom);
|
|
`)])])])])])]),u(`content-soft-segmented`,[l(`>`,[d(`card-content`,`
|
|
margin: 0 var(--n-padding-left);
|
|
padding: var(--n-padding-bottom) 0;
|
|
`),a(`content-scrollbar`,[l(`>`,[d(`scrollbar-container`,[l(`>`,[d(`card-content`,`
|
|
margin: 0 var(--n-padding-left);
|
|
padding: var(--n-padding-bottom) 0;
|
|
`)])])])])])]),u(`footer-segmented`,[l(`>`,[a(`footer`,`
|
|
padding-top: var(--n-padding-bottom);
|
|
`)])]),u(`footer-soft-segmented`,[l(`>`,[a(`footer`,`
|
|
padding: var(--n-padding-bottom) 0;
|
|
margin: 0 var(--n-padding-left);
|
|
`)])]),l(`>`,[d(`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);
|
|
`,[a(`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);
|
|
`),a(`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);
|
|
`),a(`close`,`
|
|
margin: 0 0 0 8px;
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier);
|
|
`)]),a(`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);
|
|
`),C,d(`card-content`,[l(`&:first-child`,`
|
|
padding-top: var(--n-padding-bottom);
|
|
`)]),a(`content-scrollbar`,`
|
|
display: flex;
|
|
flex-direction: column;
|
|
`,[l(`>`,[d(`scrollbar-container`,[l(`>`,[C])])]),l(`&:first-child >`,[d(`scrollbar-container`,[l(`>`,[d(`card-content`,`
|
|
padding-top: var(--n-padding-bottom);
|
|
`)])])])]),a(`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);
|
|
`,[l(`&:first-child`,`
|
|
padding-top: var(--n-padding-bottom);
|
|
`)]),a(`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);
|
|
`)]),d(`card-cover`,`
|
|
overflow: hidden;
|
|
width: 100%;
|
|
border-radius: var(--n-border-radius) var(--n-border-radius) 0 0;
|
|
`,[l(`img`,`
|
|
display: block;
|
|
width: 100%;
|
|
`)]),u(`bordered`,`
|
|
border: 1px solid var(--n-border-color);
|
|
`,[l(`&:target`,`border-color: var(--n-color-target);`)]),u(`action-segmented`,[l(`>`,[a(`action`,[l(`&:not(:first-child)`,`
|
|
border-top: 1px solid var(--n-border-color);
|
|
`)])])]),u(`content-segmented, content-soft-segmented`,[l(`>`,[d(`card-content`,`
|
|
transition: border-color 0.3s var(--n-bezier);
|
|
`,[l(`&:not(:first-child)`,`
|
|
border-top: 1px solid var(--n-border-color);
|
|
`)]),a(`content-scrollbar`,`
|
|
transition: border-color 0.3s var(--n-bezier);
|
|
`,[l(`&:not(:first-child)`,`
|
|
border-top: 1px solid var(--n-border-color);
|
|
`)])])]),u(`footer-segmented, footer-soft-segmented`,[l(`>`,[a(`footer`,`
|
|
transition: border-color 0.3s var(--n-bezier);
|
|
`,[l(`&:not(:first-child)`,`
|
|
border-top: 1px solid var(--n-border-color);
|
|
`)])])]),u(`embedded`,`
|
|
background-color: var(--n-color-embedded);
|
|
`)]),s(d(`card`,`
|
|
background: var(--n-color-modal);
|
|
`,[u(`embedded`,`
|
|
background-color: var(--n-color-embedded-modal);
|
|
`)])),p(d(`card`,`
|
|
background: var(--n-color-popover);
|
|
`,[u(`embedded`,`
|
|
background-color: var(--n-color-embedded-popover);
|
|
`)]))]),T={title:[String,Function],contentClass:String,contentStyle:[Object,String],contentScrollable:Boolean,headerClass:String,headerStyle:[Object,String],headerExtraClass:String,headerExtraStyle:[Object,String],footerClass:String,footerStyle:[Object,String],embedded:Boolean,segmented:{type:[Boolean,Object],default:!1},size:String,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,closeFocusable:Boolean},E=h(T),D=e({name:`Card`,props:Object.assign(Object.assign({},c.props),T),slots:Object,setup(e){let t=()=>{let{onClose:t}=e;t&&v(t)},{inlineThemeDisabled:a,mergedClsPrefixRef:s,mergedRtlRef:l,mergedComponentPropsRef:u}=r(e),d=c(`Card`,`-card`,w,x,e,s),f=i(`Card`,l,s),p=m(()=>e.size||u?.value?.Card?.size||`medium`),h=m(()=>{let e=p.value,{self:{color:t,colorModal:n,colorTarget:r,textColor:i,titleTextColor:a,titleFontWeight:s,borderColor:c,actionColor:l,borderRadius:u,lineHeight:f,closeIconColor:m,closeIconColorHover:h,closeIconColorPressed:g,closeColorHover:v,closeColorPressed:y,closeBorderRadius:b,closeIconSize:x,closeSize:S,boxShadow:C,colorPopover:w,colorEmbedded:T,colorEmbeddedModal:E,colorEmbeddedPopover:D,[o(`padding`,e)]:O,[o(`fontSize`,e)]:k,[o(`titleFontSize`,e)]:A},common:{cubicBezierEaseInOut:j}}=d.value,{top:M,left:N,bottom:P}=_(O);return{"--n-bezier":j,"--n-border-radius":u,"--n-color":t,"--n-color-modal":n,"--n-color-popover":w,"--n-color-embedded":T,"--n-color-embedded-modal":E,"--n-color-embedded-popover":D,"--n-color-target":r,"--n-text-color":i,"--n-line-height":f,"--n-action-color":l,"--n-title-text-color":a,"--n-title-font-weight":s,"--n-close-icon-color":m,"--n-close-icon-color-hover":h,"--n-close-icon-color-pressed":g,"--n-close-color-hover":v,"--n-close-color-pressed":y,"--n-border-color":c,"--n-box-shadow":C,"--n-padding-top":M,"--n-padding-bottom":P,"--n-padding-left":N,"--n-font-size":k,"--n-title-font-size":A,"--n-close-size":S,"--n-close-icon-size":x,"--n-close-border-radius":b}}),g=a?n(`card`,m(()=>p.value[0]),h,e):void 0;return{rtlEnabled:f,mergedClsPrefix:s,mergedTheme:d,handleCloseClick:t,cssVars:a?void 0:h,themeClass:g?.themeClass,onRender:g?.onRender}},render(){let{segmented:e,bordered:n,hoverable:r,mergedClsPrefix:i,rtlEnabled:a,onRender:o,embedded:s,tag:c,$slots:l}=this;return o?.(),t(c,{class:[`${i}-card`,this.themeClass,s&&`${i}-card--embedded`,{[`${i}-card--rtl`]:a,[`${i}-card--content-scrollable`]:this.contentScrollable,[`${i}-card--content${typeof e!=`boolean`&&e.content===`soft`?`-soft`:``}-segmented`]:e===!0||e!==!1&&e.content,[`${i}-card--footer${typeof e!=`boolean`&&e.footer===`soft`?`-soft`:``}-segmented`]:e===!0||e!==!1&&e.footer,[`${i}-card--action-segmented`]:e===!0||e!==!1&&e.action,[`${i}-card--bordered`]:n,[`${i}-card--hoverable`]:r}],style:this.cssVars,role:this.role},b(l.cover,e=>{let n=this.cover?y([this.cover()]):e;return n&&t(`div`,{class:`${i}-card-cover`,role:`none`},n)}),b(l.header,e=>{let{title:n}=this,r=n?y(typeof n==`function`?[n()]:[n]):e;return r||this.closable?t(`div`,{class:[`${i}-card-header`,this.headerClass],style:this.headerStyle,role:`heading`},t(`div`,{class:`${i}-card-header__main`,role:`heading`},r),b(l[`header-extra`],e=>{let n=this.headerExtra?y([this.headerExtra()]):e;return n&&t(`div`,{class:[`${i}-card-header__extra`,this.headerExtraClass],style:this.headerExtraStyle},n)}),this.closable&&t(S,{clsPrefix:i,class:`${i}-card-header__close`,onClick:this.handleCloseClick,focusable:this.closeFocusable,absolute:!0})):null}),b(l.default,e=>{let{content:n}=this,r=n?y(typeof n==`function`?[n()]:[n]):e;return r?this.contentScrollable?t(g,{class:`${i}-card__content-scrollbar`,contentClass:[`${i}-card-content`,this.contentClass],contentStyle:this.contentStyle},r):t(`div`,{class:[`${i}-card-content`,this.contentClass],style:this.contentStyle,role:`none`},r):null}),b(l.footer,e=>{let n=this.footer?y([this.footer()]):e;return n&&t(`div`,{class:[`${i}-card__footer`,this.footerClass],style:this.footerStyle,role:`none`},n)}),b(l.action,e=>{let n=this.action?y([this.action()]):e;return n&&t(`div`,{class:`${i}-card__action`,role:`none`},n)}))}});export{E as n,T as r,D as t}; |