[5.x] Render HTML for dictionary fields in listings (#11088)

resources/js/bootstrap/fieldtypes.js

@@ -25,6 +25,7 @@ import TitleFormats from '../components/collections/TitleFormats.vue';
 import ColorFieldtype from '../components/fieldtypes/ColorFieldtype.vue';
 import DateFieldtype from '../components/fieldtypes/DateFieldtype.vue';
 import DictionaryFieldtype from "../components/fieldtypes/DictionaryFieldtype.vue";
+import DictionaryIndexFieldtype from "../components/fieldtypes/DictionaryIndexFieldtype.vue";
 import DictionaryFields from "../components/fieldtypes/DictionaryFields.vue";
 import FieldDisplayFieldtype from '../components/fieldtypes/FieldDisplayFieldtype.vue';
 import FieldsFieldtype from '../components/fieldtypes/grid/FieldsFieldtype.vue';
@@ -89,6 +90,7 @@ Vue.component('collection_title_formats-fieldtype', TitleFormats);
 Vue.component('color-fieldtype', ColorFieldtype);
 Vue.component('date-fieldtype', DateFieldtype);
 Vue.component('dictionary-fieldtype', DictionaryFieldtype);
+Vue.component('dictionary-fieldtype-index', DictionaryIndexFieldtype);
 Vue.component('dictionary_fields-fieldtype', DictionaryFields);
 Vue.component('field_display-fieldtype', FieldDisplayFieldtype);
 Vue.component('fields-fieldtype', FieldsFieldtype);

resources/js/components/fieldtypes/DictionaryIndexFieldtype.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="text-ellipsis" v-html="formatted" />
+</template>
+
+<script>
+export default {
+
+    mixins: [IndexFieldtype],
+
+    computed: {
+        formatted() {
+            if (!this.value) {
+                return null;
+            }
+            return this.value.join(', ');
+        },
+    },
+};
+</script>

src/Fieldtypes/Dictionary.php

@@ -15,7 +15,6 @@ class Dictionary extends Fieldtype
 {
     protected $categories = ['controls', 'relationship'];
     protected $selectableInForms = true;
-    protected $indexComponent = 'tags';
 
     protected function configFieldItems(): array
     {