From 033e39dd594e1419381c91d412d5506529c7da17 Mon Sep 17 00:00:00 2001
From: mtmsig <mtm@signifly.com>
Date: Fri, 24 Jan 2020 11:30:55 +0100
Subject: [PATCH] field status: customColor

---
 src/components/fields/status.vue | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/fields/status.vue b/src/components/fields/status.vue
index 801e3c35..00a90059 100644
--- a/src/components/fields/status.vue
+++ b/src/components/fields/status.vue
@@ -1,29 +1,40 @@
 <template>
 	<div class="status">
-		<Tag :type="statusC" size="small">{{ textC }}</Tag>
+		<Tag :type="statusC" size="small" :style="Style">{{ textC }}</Tag>
 	</div>
 </template>
 
 <script>
 import {Tag} from "element-ui";
 
+const hexOpacity = ({hex, opacity}) => {
+	hex = hex.replace("#", "");
+	const r = parseInt(hex.substring(0, 2), 16);
+	const g = parseInt(hex.substring(2, 4), 16);
+	const b = parseInt(hex.substring(4, 6), 16);
+	return "rgba(" + r + "," + g + "," + b + "," + opacity / 100 + ")";
+};
+
 export default {
 	components: {Tag},
 	meta: {
 		res: {
 			props: {
 				text: "statusText",
-				status: "statusColor"
+				status: "statusColor",
+				customColor: "customColor"
 			},
 			data: {
 				statusText: "14/144",
-				statusColor: "primary"
+				statusColor: "primary",
+				customColor: "#ab40ff"
 			}
 		}
 	},
 	props: {
 		_text: {type: String, required: true},
 		_status: {type: String, required: false},
+		customColor: {type: String, required: false, doc: true, note: "hex"},
 		text: {
 			type: String,
 			required: false,
@@ -41,7 +52,18 @@ export default {
 	},
 	computed: {
 		textC: (t) => t.text || t._text,
-		statusC: (t) => t.status || t._status
+		statusC: (t) => t.status || t._status,
+		Style() {
+			const hex = this.customColor;
+
+			return (
+				hex && {
+					backgroundColor: hexOpacity({hex, opacity: 8}),
+					borderColor: hexOpacity({hex, opacity: 12}),
+					color: hex
+				}
+			);
+		}
 	}
 };
 </script>