change color-dot to color and add show-as-dot option to labels

app/src/displays/color/color.vue

@@ -1,20 +1,14 @@
 <template>
 	<div class="color-dot">
 		<value-null v-if="value === null" />
-		<div class="dot" :style="styles" v-tooltip="displayValue"></div>
+		<div class="dot" :style="{'background-color':styles}"></div>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed, PropType } from '@vue/composition-api';
 import formatTitle from '@directus/format-title';
-import { isHex } from '@/utils/color';
-
-type Choice = {
-	value: string;
-	text: string;
-	color: string | null;
-};
+import { isHex } from '@/utils/color'
 
 export default defineComponent({
 	props: {
@@ -22,34 +16,20 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
-		choices: {
-			type: Array as PropType<Choice[]>,
-			default: () => [],
-		},
 		defaultColor: {
 			type: String,
 			default: '#B0BEC5',
 		},
 	},
 	setup(props) {
-		const currentChoice = computed(() => {
-			return props.choices.find((choice) => {
-				return choice.value === props.value;
-			});
-		});
 
 		const displayValue = computed(() => {
-			return formatTitle(props.value);
+			return props.value;
 		});
 
 		const styles = computed(() => {
-			if (isHex(props.value)) {
-				return { backgroundColor: props.value || props.defaultColor };
-			}
-
-			return {
-				backgroundColor: currentChoice.value?.color || props.defaultColor,
-			};
+			if(isHex(props.value)) return props.value
+			else return props.defaultColor
 		});
 
 		return { displayValue, styles, isHex };

app/src/displays/color/index.ts

@@ -0,0 +1,24 @@
+import { defineDisplay } from '@/displays/define';
+import DisplayColor from './color.vue';
+
+export default defineDisplay(({ i18n }) => ({
+	id: 'color',
+	name: i18n.t('color'),
+	types: ['string'],
+	icon: 'flag',
+	handler: DisplayColor,
+	options: [
+		{
+			field: 'defaultColor',
+			name: i18n.t('default_color'),
+			type: 'string',
+			meta: {
+				interface: 'color',
+				width: 'half',
+			},
+			schema: {
+				default_value: '#B0BEC5',
+			},
+		}
+	],
+}));

app/src/displays/labels/index.ts

@@ -38,7 +38,7 @@ export default defineDisplay(({ i18n }) => ({
 			name: i18n.t('format_text'),
 			type: 'boolean',
 			meta: {
-				width: 'half-left',
+				width: 'half',
 				interface: 'toggle',
 				options: {
 					label: i18n.t('displays.labels.format_label'),
@@ -48,6 +48,18 @@ export default defineDisplay(({ i18n }) => ({
 				default_value: true,
 			},
 		},
+		{
+			field: 'showAsDot',
+			name: i18n.t('displays.labels.show_as_dot'),
+			type: 'boolean',
+			meta: {
+				width: 'half',
+				interface: 'toggle',
+			},
+			schema: {
+				default_value: false,
+			},
+		},
 		{
 			field: 'choices',
 			name: i18n.t('choices'),

app/src/displays/labels/labels.vue

@@ -1,18 +1,29 @@
 <template>
 	<div class="display-tags">
-		<v-chip
-			v-for="item in items"
-			:key="item.value"
-			:style="{
-				'--v-chip-color': item.foreground,
-				'--v-chip-background-color': item.background,
-			}"
-			small
-			disabled
-			label
-		>
-			{{ item.text }}
-		</v-chip>
+		<template v-if="!showAsDot">
+			<v-chip
+				v-for="item in items"
+				:key="item.value"
+				:style="{
+					'--v-chip-color': item.foreground,
+					'--v-chip-background-color': item.background,
+				}"
+				small
+				disabled
+				label
+			>
+				{{ item.text }}
+			</v-chip>
+		</template>
+		<template v-else>
+			<display-color
+				v-for="item in items"
+				:key="item.value"
+				:value="item.background"
+				:default-color="defaultBackground"
+				v-tooltip="item.text"
+			/>
+		</template>
 	</div>
 </template>
 
@@ -37,6 +48,10 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		showAsDot: {
+			type: Boolean,
+			default: false
+		},
 		choices: {
 			type: Array as PropType<Choice[]>,
 			default: () => [],
@@ -51,7 +66,7 @@ export default defineComponent({
 		},
 		type: {
 			type: String,
-			validator: (val: string) => ['json', 'string'].includes(val),
+			validator: (val: string) => ['text', 'string'].includes(val),
 		},
 	},
 	setup(props) {
@@ -90,7 +105,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .display-tags {
-	display: inline-block;
+	display: flex;
 }
 
 .v-chip + .v-chip {

app/src/lang/en-US/displays.json

@@ -79,6 +79,7 @@
 		"raw": {
 			"raw": "Raw Value"
 		},
+<<<<<<< HEAD
 		"related-values": {
 			"related-values": "Related Values",
 			"description": "Display relative values"
@@ -90,6 +91,11 @@
 			"name": "Name",
 			"both": "Both",
 			"circle_label": "Show user in a circle"
+=======
+		"labels": {
+			"labels": "Labels",
+			"show_as_dot": "Show as dot"
+>>>>>>> change color-dot to color and add show-as-dot option to labels
 		}
 	}
 }