sk_fems_ui commit

components/sd/SdDock.vue

@@ -0,0 +1,24 @@
+<template>
+	<div ref="content" class="_sd-dock" :sd-position="position">
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'SdDock',
+	props: {
+		position: {
+			type: String,
+			required: true,
+			validator: val => ['top', 'bottom', 'left', 'right'].includes(val),
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+._sd-dock {
+	position: absolute;
+}
+</style>

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>

components/sd/SdLabelBlock.vue

@@ -0,0 +1,32 @@
+<template>
+	<div class="d-flex flex-row align-center">
+		<div
+			:style="{ width: labelWidth ? labelWidth + 'px' : null }"
+			:class="!labelWidth ? 'mr-4' : null"
+		>
+			<template v-if="label">
+				<v-icon x-small :color="'primary'" class="mr-2"
+					>mdi-record-circle</v-icon
+				>
+				<label style="font-size: 0.875rem;">{{ label }}</label>
+			</template>
+		</div>
+		<slot />
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'SdLabelBlock',
+	props: {
+		label: {
+			type: String,
+		},
+		labelWidth: {
+			type: Number,
+		},
+	},
+};
+</script>
+
+<style scoped></style>