[5.x] Add list index fieldtype and fix taggable-fieldtype-index refer…

…ence (#10379)

resources/js/bootstrap/fieldtypes.js

@@ -38,6 +38,7 @@ import IconFieldtype from '../components/fieldtypes/IconFieldtype.vue';
 import IntegerFieldtype from '../components/fieldtypes/IntegerFieldtype.vue';
 import LinkFieldtype from '../components/fieldtypes/LinkFieldtype.vue';
 import ListFieldtype from '../components/fieldtypes/ListFieldtype.vue';
+import ListIndexFieldtype from '../components/fieldtypes/ListIndexFieldtype.vue';
 import MarkdownFieldtype from '../components/fieldtypes/markdown/MarkdownFieldtype.vue';
 import MarkdownButtonsSettingFieldtype from '../components/fieldtypes/markdown/MarkdownButtonsSettingFieldtype.vue';
 import RadioFieldtype from '../components/fieldtypes/RadioFieldtype.vue';
@@ -99,6 +100,7 @@ Vue.component('icon-fieldtype', IconFieldtype);
 Vue.component('integer-fieldtype', IntegerFieldtype);
 Vue.component('link-fieldtype', LinkFieldtype);
 Vue.component('list-fieldtype', ListFieldtype);
+Vue.component('list-fieldtype-index', ListIndexFieldtype);
 Vue.component('markdown-fieldtype', MarkdownFieldtype);
 Vue.component('markdown_buttons_setting-fieldtype', MarkdownButtonsSettingFieldtype);
 Vue.component('radio-fieldtype', RadioFieldtype);
@@ -114,6 +116,7 @@ Vue.component('sets-fieldtype', SetsFieldtype);
 Vue.component('table-fieldtype', TableFieldtype);
 Vue.component('tags-fieldtype', TagsFieldtype);
 Vue.component('tags-fieldtype-index', TagsIndexFieldtype);
+Vue.component('taggable-fieldtype-index', TagsIndexFieldtype);
 Vue.component('template_folder-fieldtype', TemplateFolderFieldtype);
 Vue.component('time-fieldtype', TimeFieldtype);
 Vue.component('toggle-fieldtype', ToggleFieldtype);

resources/js/components/fieldtypes/ListIndexFieldtype.vue

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

resources/js/components/fieldtypes/TagsIndexFieldtype.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>{{ formatted }}</div>
+    <div class="text-ellipsis">{{ formatted }}</div>
 </template>
 
 <script>