sk_fems_ui commit

components/sd/SdDockContainer.vue

@@ -0,0 +1,80 @@
+<template>
+	<div ref="content" class="_sd-dock-container">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'SdDockContainer',
+	mounted() {
+		this.redraw();
+	},
+	updated() {
+		this.redraw();
+	},
+	methods: {
+		redraw() {
+			let top = 0;
+			let left = 0;
+			let bottom = 0;
+			let right = 0;
+
+			const docks = this.$children.filter(
+				child => child.$options.name === 'SdDock',
+			);
+			for (const dock of docks) {
+				if (dock.position === 'top') {
+					Object.assign(dock.$refs['content'].style, {
+						top: top + 'px',
+						bottom: '',
+						left: left + 'px',
+						right: right + 'px',
+					});
+					top += dock.$refs['content'].offsetHeight;
+				} else if (dock.position === 'bottom') {
+					Object.assign(dock.$refs['content'].style, {
+						top: '',
+						bottom: bottom + 'px',
+						left: left + 'px',
+						right: right + 'px',
+					});
+					bottom += dock.$refs['content'].offsetHeight;
+				} else if (dock.position === 'left') {
+					Object.assign(dock.$refs['content'].style, {
+						top: top + 'px',
+						bottom: bottom + 'px',
+						left: left + 'px',
+						right: '',
+					});
+					left += dock.$refs['content'].offsetWidth;
+				} else {
+					// right
+					Object.assign(dock.$refs['content'].style, {
+						top: top + 'px',
+						bottom: bottom + 'px',
+						left: '',
+						right: right + 'px',
+					});
+					right += dock.$refs['content'].offsetWidth;
+				}
+			}
+
+			Object.assign(this.$refs['content'].style, {
+				paddingTop: top + 'px',
+				paddingBottom: bottom + 'px',
+				paddingRight: right + 'px',
+				paddingLeft: left + 'px',
+			});
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+._sd-dock-container {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+</style>