primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 4.53 kB
JavaScript
this.primevue=this.primevue||{},this.primevue.timeline=function(e,n,t,i){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(n),r=t.useStyle("\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}),p={name:"Timeline",extends:{name:"BaseTimeline",extends:o.default,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:r.load},provide:function(){return{$parentInstance:this}}},methods:{getKey:function(n,t){return this.dataKey?e.ObjectUtils.resolveFieldData(n,this.dataKey):t},getPTOptions:function(e,n){return this.ptm(e,{context:{index:n,count:this.value.length}})}}};return p.render=function(e,n,t,l,o,r){return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"timeline"}),[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(e.value,(function(n,t){return i.openBlock(),i.createElementBlock("div",i.mergeProps({key:r.getKey(n,t),class:e.cx("event")},r.getPTOptions("event",t)),[i.createElementVNode("div",i.mergeProps({class:e.cx("opposite",{index:t})},r.getPTOptions("opposite",t)),[i.renderSlot(e.$slots,"opposite",{item:n,index:t})],16),i.createElementVNode("div",i.mergeProps({class:e.cx("separator")},r.getPTOptions("separator",t)),[i.renderSlot(e.$slots,"marker",{item:n,index:t},(function(){return[i.createElementVNode("div",i.mergeProps({class:e.cx("marker")},r.getPTOptions("marker",t)),null,16)]})),t!==e.value.length-1?i.renderSlot(e.$slots,"connector",{key:0,item:n,index:t},(function(){return[i.createElementVNode("div",i.mergeProps({class:e.cx("connector")},r.getPTOptions("connector",t)),null,16)]})):i.createCommentVNode("",!0)],16),i.createElementVNode("div",i.mergeProps({class:e.cx("content")},r.getPTOptions("content",t)),[i.renderSlot(e.$slots,"content",{item:n,index:t})],16)],16)})),128))],16)},p}(primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);