Refactor #3965 - For Timeline
Bahadır Sofuoğlu
parent
6643a8c8d8
commit
8453cea3f0
|
|
@ -0,0 +1,155 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-timeline {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-timeline-left .p-timeline-event-opposite {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p-timeline-left .p-timeline-event-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-timeline-right .p-timeline-event {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.p-timeline-right .p-timeline-event-opposite {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-timeline-right .p-timeline-event-content {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p-timeline-event {
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
.p-timeline-event:last-child {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.p-timeline-event-opposite {
|
||||
flex: 1;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.p-timeline-event-content {
|
||||
flex: 1;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.p-timeline-event-separator {
|
||||
flex: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-timeline-event-marker {
|
||||
display: flex;
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
.p-timeline-event-connector {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event:last-child {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event-separator {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event-connector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-timeline-bottom .p-timeline-event {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.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'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { id: 'primevue_timeline_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseTimeline',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
value: null,
|
||||
align: {
|
||||
mode: String,
|
||||
default: 'left'
|
||||
},
|
||||
layout: {
|
||||
mode: String,
|
||||
default: 'vertical'
|
||||
},
|
||||
dataKey: null
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -80,6 +80,11 @@ export interface TimelineProps {
|
|||
* @type {TimelinePassThroughOptions}
|
||||
*/
|
||||
pt?: TimelinePassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<div :class="containerClass" v-bind="ptm('root')">
|
||||
<div v-for="(item, index) of value" :key="getKey(item, index)" class="p-timeline-event" v-bind="ptm('event')">
|
||||
<div class="p-timeline-event-opposite" v-bind="ptm('opposite')">
|
||||
<div :class="cx('root')" v-bind="ptm('root')">
|
||||
<div v-for="(item, index) of value" :key="getKey(item, index)" :class="cx('event')" v-bind="ptm('event')">
|
||||
<div :class="cx('opposite')" v-bind="ptm('opposite')">
|
||||
<slot name="opposite" :item="item" :index="index"></slot>
|
||||
</div>
|
||||
<div class="p-timeline-event-separator" v-bind="ptm('separator')">
|
||||
<div :class="cx('separator')" v-bind="ptm('separator')">
|
||||
<slot name="marker" :item="item" :index="index">
|
||||
<div class="p-timeline-event-marker" v-bind="ptm('marker')"></div>
|
||||
<div :class="cx('marker')" v-bind="ptm('marker')"></div>
|
||||
</slot>
|
||||
<slot v-if="index !== value.length - 1" name="connector" :item="item" :index="index">
|
||||
<div class="p-timeline-event-connector" v-bind="ptm('connector')"></div>
|
||||
<div :class="cx('connector')" v-bind="ptm('connector')"></div>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="p-timeline-event-content" v-bind="ptm('content')">
|
||||
<div :class="cx('content')" v-bind="ptm('content')">
|
||||
<slot name="content" :item="item" :index="index"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,140 +26,10 @@ import { ObjectUtils } from 'primevue/utils';
|
|||
export default {
|
||||
name: 'Timeline',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
value: null,
|
||||
align: {
|
||||
mode: String,
|
||||
default: 'left'
|
||||
},
|
||||
layout: {
|
||||
mode: String,
|
||||
default: 'vertical'
|
||||
},
|
||||
dataKey: null
|
||||
},
|
||||
methods: {
|
||||
getKey(item, index) {
|
||||
return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return ['p-timeline p-component', 'p-timeline-' + this.align, 'p-timeline-' + this.layout];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-timeline {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-timeline-left .p-timeline-event-opposite {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p-timeline-left .p-timeline-event-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-timeline-right .p-timeline-event {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.p-timeline-right .p-timeline-event-opposite {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-timeline-right .p-timeline-event-content {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p-timeline-event {
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
.p-timeline-event:last-child {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.p-timeline-event-opposite {
|
||||
flex: 1;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.p-timeline-event-content {
|
||||
flex: 1;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.p-timeline-event-separator {
|
||||
flex: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-timeline-event-marker {
|
||||
display: flex;
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
.p-timeline-event-connector {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event:last-child {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event-separator {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event-connector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-timeline-bottom .p-timeline-event {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue