From 96a4967d775a60beb5937e1ddee53ae35b4bbec0 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 23 Mar 2022 15:32:44 +1100
Subject: Add basic ParentBar and ParentBarTile components

---
 src/components/ParentBar.vue | 52 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/components/ParentBar.vue

(limited to 'src/components/ParentBar.vue')

diff --git a/src/components/ParentBar.vue b/src/components/ParentBar.vue
new file mode 100644
index 0000000..cee8bea
--- /dev/null
+++ b/src/components/ParentBar.vue
@@ -0,0 +1,52 @@
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+import {LayoutNode} from '../lib';
+import ParentBarTile from './ParentBarTile.vue'
+
+export default defineComponent({
+	props: {
+		pos: {type: Array as unknown as PropType<[number,number]>, required: true},
+		dims: {type: Array as unknown as PropType<[number,number]>, required: true},
+		nodes: {type: Array as PropType<LayoutNode[]>, required: true},
+	},
+	data(){
+		return {
+			tileMargin: 5, //px (gap between separated-parent tiles)
+		};
+	},
+	computed: {
+		wideArea(){
+			return this.dims[0] >= this.dims[1];
+		},
+		tileSz(){
+			return (this.wideArea ? this.dims[1] : this.dims[0]) - (this.tileMargin * 2);
+		},
+		styles(): Record<string,string> {
+			return {
+				position: 'absolute',
+				left: this.pos[0] + 'px',
+				top: this.pos[1] + 'px',
+				width: this.dims[0] + 'px',
+				height: this.dims[1] + 'px',
+				overflowX: this.wideArea ? 'auto' : 'hidden',
+				overflowY: this.wideArea ? 'hidden' : 'auto',
+				display: 'flex',
+				flexDirection: this.wideArea ? 'row' : 'column',
+				gap: this.tileMargin + 'px',
+				padding: this.tileMargin + 'px',
+				backgroundColor: 'gray',
+			};
+		},
+	},
+	components: {
+		ParentBarTile,
+	},
+});
+</script>
+
+<template>
+<div :style="styles">
+	<parent-bar-tile v-for="node in nodes" :key="node.tolNode.name"
+		:layoutNode="node" :tileSz="tileSz"/>
+</div>
+</template>
-- 
cgit v1.2.3