You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
4.4 KiB
JavaScript
74 lines
4.4 KiB
JavaScript
import{J as a,H as i,K as d,I as l,ac as D,ad as B,z as v,M as E,Z as j,O as b,dr as I,Y as M,S as H,E as L,a2 as K,k as s,B as O,D as S,bK as T}from"./index.fa32f132.js";var V=a([i("list",`
|
|
--n-merged-border-color: var(--n-border-color);
|
|
--n-merged-color: var(--n-color);
|
|
--n-merged-color-hover: var(--n-color-hover);
|
|
margin: 0;
|
|
font-size: var(--n-font-size);
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier);
|
|
padding: 0;
|
|
list-style-type: none;
|
|
color: var(--n-text-color);
|
|
background-color: var(--n-merged-color);
|
|
`,[d("show-divider",[i("list-item",[a("&:not(:last-child)",[l("divider",`
|
|
background-color: var(--n-merged-border-color);
|
|
`)])])]),d("clickable",[i("list-item",`
|
|
cursor: pointer;
|
|
`)]),d("bordered",`
|
|
border: 1px solid var(--n-merged-border-color);
|
|
border-radius: var(--n-border-radius);
|
|
`),d("hoverable",[i("list-item",`
|
|
border-radius: var(--n-border-radius);
|
|
`,[a("&:hover",`
|
|
background-color: var(--n-merged-color-hover);
|
|
`,[l("divider",`
|
|
background-color: transparent;
|
|
`)])])]),d("bordered, hoverable",[i("list-item",`
|
|
padding: 12px 20px;
|
|
`),l("header, footer",`
|
|
padding: 12px 20px;
|
|
`)]),l("header, footer",`
|
|
padding: 12px 0;
|
|
box-sizing: border-box;
|
|
transition: border-color .3s var(--n-bezier);
|
|
`,[a("&:not(:last-child)",`
|
|
border-bottom: 1px solid var(--n-merged-border-color);
|
|
`)]),i("list-item",`
|
|
position: relative;
|
|
padding: 12px 0;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
transition:
|
|
background-color .3s var(--n-bezier),
|
|
border-color .3s var(--n-bezier);
|
|
`,[l("prefix",`
|
|
margin-right: 20px;
|
|
flex: 0;
|
|
`),l("suffix",`
|
|
margin-left: 20px;
|
|
flex: 0;
|
|
`),l("main",`
|
|
flex: 1;
|
|
`),l("divider",`
|
|
height: 1px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: transparent;
|
|
transition: background-color .3s var(--n-bezier);
|
|
pointer-events: none;
|
|
`)])]),D(i("list",`
|
|
--n-merged-color-hover: var(--n-color-hover-modal);
|
|
--n-merged-color: var(--n-color-modal);
|
|
--n-merged-border-color: var(--n-border-color-modal);
|
|
`)),B(i("list",`
|
|
--n-merged-color-hover: var(--n-color-hover-popover);
|
|
--n-merged-color: var(--n-color-popover);
|
|
--n-merged-border-color: var(--n-border-color-popover);
|
|
`))]);const J=Object.assign(Object.assign({},b.props),{size:{type:String,default:"medium"},bordered:Boolean,clickable:Boolean,hoverable:Boolean,showDivider:{type:Boolean,default:!0}}),m=O("n-list");var Z=v({name:"List",props:J,setup(e){const{mergedClsPrefixRef:r,inlineThemeDisabled:o,mergedRtlRef:t}=E(e),u=j("List",t,r),p=b("List","-list",V,I,e,r);M(m,{showDividerRef:H(e,"showDivider"),mergedClsPrefixRef:r});const c=L(()=>{const{common:{cubicBezierEaseInOut:h},self:{fontSize:f,textColor:g,color:x,colorModal:_,colorPopover:z,borderColor:C,borderColorModal:R,borderColorPopover:$,borderRadius:k,colorHover:w,colorHoverModal:P,colorHoverPopover:y}}=p.value;return{"--n-font-size":f,"--n-bezier":h,"--n-text-color":g,"--n-color":x,"--n-border-radius":k,"--n-border-color":C,"--n-border-color-modal":R,"--n-border-color-popover":$,"--n-color-modal":_,"--n-color-popover":z,"--n-color-hover":w,"--n-color-hover-modal":P,"--n-color-hover-popover":y}}),n=o?K("list",void 0,c,e):void 0;return{mergedClsPrefix:r,rtlEnabled:u,cssVars:o?void 0:c,themeClass:n==null?void 0:n.themeClass,onRender:n==null?void 0:n.onRender}},render(){var e;const{$slots:r,mergedClsPrefix:o,onRender:t}=this;return t==null||t(),s("ul",{class:[`${o}-list`,this.rtlEnabled&&`${o}-list--rtl`,this.bordered&&`${o}-list--bordered`,this.showDivider&&`${o}-list--show-divider`,this.hoverable&&`${o}-list--hoverable`,this.clickable&&`${o}-list--clickable`,this.themeClass],style:this.cssVars},r.header?s("div",{class:`${o}-list__header`},r.header()):null,(e=r.default)===null||e===void 0?void 0:e.call(r),r.footer?s("div",{class:`${o}-list__footer`},r.footer()):null)}}),q=v({name:"ListItem",setup(){const e=S(m,null);return e||T("list-item","`n-list-item` must be placed in `n-list`."),{showDivider:e.showDividerRef,mergedClsPrefix:e.mergedClsPrefixRef}},render(){const{$slots:e,mergedClsPrefix:r}=this;return s("li",{class:`${r}-list-item`},e.prefix?s("div",{class:`${r}-list-item__prefix`},e.prefix()):null,e.default?s("div",{class:`${r}-list-item__main`},e):null,e.suffix?s("div",{class:`${r}-list-item__suffix`},e.suffix()):null,this.showDivider&&s("div",{class:`${r}-list-item__divider`}))}});export{q as _,Z as a};
|