Add BaseLine.vue

3 files changed, 42 insertions, 2 deletions

diff --git a/src/App.vue b/src/App.vue
index 3d63d21..2555d3f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,6 +19,7 @@
 	<div class="grow min-h-0 bg-stone-800 flex" :class="{'flex-col': !vert}" ref="contentAreaRef">
 		<time-line v-for="(data, idx) in timelineData" :key="data"
 			class="grow basis-full min-h-0 outline outline-1" :vert="vert" @close="onTimelineClose(idx)"/>
+		<base-line :vert="vert" :timelineData="[]"/>
 	</div>
 </div>
 </template>
@@ -27,6 +28,7 @@
 import {ref, computed, onMounted, onUnmounted} from 'vue';
 // Components
 import TimeLine from './components/TimeLine.vue';
+import BaseLine from './components/BaseLine.vue';
 import IconButton from './components/IconButton.vue';
 // Icons
 import PlusIcon from './components/icon/PlusIcon.vue';
diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue
new file mode 100644
index 0000000..f0008f9
--- /dev/null
+++ b/src/components/BaseLine.vue
@@ -0,0 +1,38 @@
+<template>
+<div class="bg-stone-900 text-stone-50 flex" :class="{'flex-col': vert}">
+	<div v-for="p in periods" :key="p.label" :style="periodStyles(p)">
+		<div :style="labelStyles">{{p.label}}</div>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import {ref, computed, PropType} from 'vue';
+
+// Props
+const props = defineProps({
+	vert: {type: Boolean, required: true},
+	timelineData: {type: Object as PropType<number[][]>, required: true},
+});
+
+// Time periods to represent
+const periods = ref([
+	{label: 'One', len: 1},
+	{label: 'Two', len: 2},
+	{label: 'Three', len: 1},
+]);
+
+// Styles
+function periodStyles(period){
+	return {
+		outline: '1px solid gray',
+		flexGrow: period.len,
+	};
+}
+const labelStyles = computed(() => ({
+	transform: props.vert ? 'rotate(90deg) translate(50%, 0)' : 'none',
+	whiteSpace: 'nowrap',
+	width: props.vert ? '40px' : 'auto',
+	padding: props.vert ? '0' : '4px',
+}));
+</script>
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 94de84f..796f5c7 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -20,7 +20,7 @@
 		<text fill="#606060" v-for="n in ticks" :key="n"
 			x="0" y="0" :text-anchor="vert ? 'start' : 'middle'" dominant-baseline="middle"
 			:style="tickLabelStyles(n)" class="text-sm animate-fadein">
-			{{n}}
+			{{Math.floor(n * 10) / 10}}
 		</text>
 	</svg>
 	<!-- Icons -->
@@ -43,7 +43,7 @@ const rootRef = ref(null as HTMLElement | null);
 
 // Props + events
 const props = defineProps({
-	vert: {type: Boolean, default: false},
+	vert: {type: Boolean, required: true},
 });
 const emit = defineEmits(['close']);