Use translate in render-display (#13861)

* fix translations in boolean display

* Revert "fix translations in boolean display"

This reverts commit bd4768773c.

* translate in render-display

* remove translate from labels display

app/src/displays/labels/labels.vue

@@ -24,7 +24,6 @@
 <script lang="ts">
 import { defineComponent, computed, PropType } from 'vue';
 import formatTitle from '@directus/format-title';
-import { translate } from '@/utils/translate-object-values';
 import { isEmpty } from 'lodash';
 
 type Choice = {
@@ -89,12 +88,12 @@ export default defineComponent({
 						background: 'var(--background-normal)',
 					};
 				} else {
-					return translate({
+					return {
 						value: item,
 						text: choice.text || itemStringValue,
 						foreground: choice.foreground || 'var(--foreground-normal)',
 						background: choice.background || 'var(--background-normal)',
-					});
+					};
 				}
 			});
 		});

app/src/views/private/components/render-display/render-display.vue

@@ -4,7 +4,7 @@
 	<component
 		:is="`display-${display}`"
 		v-else
-		v-bind="options"
+		v-bind="translate(options)"
 		:interface="interface"
 		:interface-options="interfaceOptions"
 		:value="value"
@@ -18,6 +18,7 @@
 import { defineComponent, computed } from 'vue';
 import { getDisplay } from '@/displays';
 import ValueNull from '@/views/private/components/value-null';
+import { translate } from '@/utils/translate-object-values';
 
 export default defineComponent({
 	components: { ValueNull },
@@ -57,7 +58,7 @@ export default defineComponent({
 	},
 	setup(props) {
 		const displayInfo = computed(() => getDisplay(props.display));
-		return { displayInfo };
+		return { displayInfo, translate };
 	},
 });
 </script>