primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 4.27 kB
JavaScript
this.primevue=this.primevue||{},this.primevue.timeline=function(e,n,t){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l={name:"Timeline",extends:i(e).default,props:{value:null,align:{mode:String,default:"left"},layout:{mode:String,default:"vertical"},dataKey:null},methods:{getKey(e,t){return this.dataKey?n.ObjectUtils.resolveFieldData(e,this.dataKey):t}},computed:{containerClass(){return["p-timeline p-component","p-timeline-"+this.align,"p-timeline-"+this.layout]}}};return function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===t&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-timeline {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n}\n.p-timeline-left .p-timeline-event-opposite {\n text-align: right;\n}\n.p-timeline-left .p-timeline-event-content {\n text-align: left;\n}\n.p-timeline-right .p-timeline-event {\n flex-direction: row-reverse;\n}\n.p-timeline-right .p-timeline-event-opposite {\n text-align: left;\n}\n.p-timeline-right .p-timeline-event-content {\n text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n flex-direction: row-reverse;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n text-align: right;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n text-align: left;\n}\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n text-align: right;\n}\n.p-timeline-event {\n display: flex;\n position: relative;\n min-height: 70px;\n}\n.p-timeline-event:last-child {\n min-height: 0;\n}\n.p-timeline-event-opposite {\n flex: 1;\n padding: 0 1rem;\n}\n.p-timeline-event-content {\n flex: 1;\n padding: 0 1rem;\n}\n.p-timeline-event-separator {\n flex: 0;\n display: flex;\n align-items: center;\n flex-direction: column;\n}\n.p-timeline-event-marker {\n display: flex;\n align-self: baseline;\n}\n.p-timeline-event-connector {\n flex-grow: 1;\n}\n.p-timeline-horizontal {\n flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event {\n flex-direction: column;\n flex: 1;\n}\n.p-timeline-horizontal .p-timeline-event:last-child {\n flex: 0;\n}\n.p-timeline-horizontal .p-timeline-event-separator {\n flex-direction: row;\n}\n.p-timeline-horizontal .p-timeline-event-connector {\n width: 100%;\n}\n.p-timeline-bottom .p-timeline-event {\n flex-direction: column-reverse;\n}\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n flex-direction: column-reverse;\n}\n"),l.render=function(e,n,i,l,r,o){return t.openBlock(),t.createElementBlock("div",t.mergeProps({class:o.containerClass},e.ptm("root")),[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(i.value,((n,l)=>(t.openBlock(),t.createElementBlock("div",t.mergeProps({key:o.getKey(n,l),class:"p-timeline-event"},e.ptm("event")),[t.createElementVNode("div",t.mergeProps({class:"p-timeline-event-opposite"},e.ptm("opposite")),[t.renderSlot(e.$slots,"opposite",{item:n,index:l})],16),t.createElementVNode("div",t.mergeProps({class:"p-timeline-event-separator"},e.ptm("separator")),[t.renderSlot(e.$slots,"marker",{item:n,index:l},(()=>[t.createElementVNode("div",t.mergeProps({class:"p-timeline-event-marker"},e.ptm("marker")),null,16)])),l!==i.value.length-1?t.renderSlot(e.$slots,"connector",{key:0,item:n,index:l},(()=>[t.createElementVNode("div",t.mergeProps({class:"p-timeline-event-connector"},e.ptm("connector")),null,16)])):t.createCommentVNode("",!0)],16),t.createElementVNode("div",t.mergeProps({class:"p-timeline-event-content"},e.ptm("content")),[t.renderSlot(e.$slots,"content",{item:n,index:l})],16)],16)))),128))],16)},l}(primevue.basecomponent,primevue.utils,Vue);