field status: customColor

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>