UNPKG

primevue

Version:

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/primevue.svg)](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

2 lines (1 loc) 4.24 kB
import{ObjectUtils as e}from"primevue/utils";import n from"primevue/basecomponent";import{useStyle as t}from"primevue/usestyle";import{openBlock as i,createElementBlock as l,mergeProps as o,Fragment as r,renderList as p,createElementVNode as m,renderSlot as a,createCommentVNode as c}from"vue";var s=t("\n.p-timeline {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n}\n\n.p-timeline-left .p-timeline-event-opposite {\n text-align: right;\n}\n\n.p-timeline-left .p-timeline-event-content {\n text-align: left;\n}\n\n.p-timeline-right .p-timeline-event {\n flex-direction: row-reverse;\n}\n\n.p-timeline-right .p-timeline-event-opposite {\n text-align: left;\n}\n\n.p-timeline-right .p-timeline-event-content {\n text-align: right;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n flex-direction: row-reverse;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n text-align: right;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n text-align: left;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n text-align: left;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n text-align: right;\n}\n\n.p-timeline-event {\n display: flex;\n position: relative;\n min-height: 70px;\n}\n\n.p-timeline-event:last-child {\n min-height: 0;\n}\n\n.p-timeline-event-opposite {\n flex: 1;\n padding: 0 1rem;\n}\n\n.p-timeline-event-content {\n flex: 1;\n padding: 0 1rem;\n}\n\n.p-timeline-event-separator {\n flex: 0;\n display: flex;\n align-items: center;\n flex-direction: column;\n}\n\n.p-timeline-event-marker {\n display: flex;\n align-self: baseline;\n}\n\n.p-timeline-event-connector {\n flex-grow: 1;\n}\n\n.p-timeline-horizontal {\n flex-direction: row;\n}\n\n.p-timeline-horizontal .p-timeline-event {\n flex-direction: column;\n flex: 1;\n}\n\n.p-timeline-horizontal .p-timeline-event:last-child {\n flex: 0;\n}\n\n.p-timeline-horizontal .p-timeline-event-separator {\n flex-direction: row;\n}\n\n.p-timeline-horizontal .p-timeline-event-connector {\n width: 100%;\n}\n\n.p-timeline-bottom .p-timeline-event {\n flex-direction: column-reverse;\n}\n\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n flex-direction: column-reverse;\n}\n",{name:"timeline",manual:!0}),v={name:"Timeline",extends:{name:"BaseTimeline",extends:n,props:{value:null,align:{mode:String,default:"left"},layout:{mode:String,default:"vertical"},dataKey:null},css:{classes:{root:function(e){var n=e.props;return["p-timeline p-component","p-timeline-"+n.align,"p-timeline-"+n.layout]},event:"p-timeline-event",opposite:"p-timeline-event-opposite",separator:"p-timeline-event-separator",marker:"p-timeline-event-marker",connector:"p-timeline-event-connector",content:"p-timeline-event-content"},loadStyle:s.load},provide:function(){return{$parentInstance:this}}},methods:{getKey:function(n,t){return this.dataKey?e.resolveFieldData(n,this.dataKey):t},getPTOptions:function(e,n){return this.ptm(e,{context:{index:n,count:this.value.length}})}}};v.render=function(e,n,t,s,v,d){return i(),l("div",o({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"timeline"}),[(i(!0),l(r,null,p(e.value,(function(n,t){return i(),l("div",o({key:d.getKey(n,t),class:e.cx("event")},d.getPTOptions("event",t)),[m("div",o({class:e.cx("opposite",{index:t})},d.getPTOptions("opposite",t)),[a(e.$slots,"opposite",{item:n,index:t})],16),m("div",o({class:e.cx("separator")},d.getPTOptions("separator",t)),[a(e.$slots,"marker",{item:n,index:t},(function(){return[m("div",o({class:e.cx("marker")},d.getPTOptions("marker",t)),null,16)]})),t!==e.value.length-1?a(e.$slots,"connector",{key:0,item:n,index:t},(function(){return[m("div",o({class:e.cx("connector")},d.getPTOptions("connector",t)),null,16)]})):c("",!0)],16),m("div",o({class:e.cx("content")},d.getPTOptions("content",t)),[a(e.$slots,"content",{item:n,index:t})],16)],16)})),128))],16)};export{v as default};