Fix tabular headers

[Nitwel]

Description

This PR reworks the way the tabular layout works with aliased requests, as the old way was really hacky by trying to merge aliases depending on their originally name. The implementation now only ever passes the the data a certain column had requested back to it so there is no collision in the data each display requires.

And the other thing that got improved is that now only nested fields of translations are rendered in a special way.

Fixes #17716
Fixes #17506
Fixes #17670
Fixes ENG-690

[paescuj]

Only a small comment, otherwise looks great 😃👍

[paescuj]

Small addition:

The value passed to render-display (computed in getDisplayValue) is now an array in case of relational fields. While this doesn't seem to be an issue, the following warning is shown in the console:

[Vue warn]: Invalid prop: type check failed for prop "value". Expected String | Number, got Array  
  at <FormattedValue interface="input" interface-options=null value= 
Array [ "test" ]
  ... > 
  at <VErrorBoundary key=2 name="display-formatted-value" > 
  at <RenderDisplay value= 
Array [ "test" ]
 display="formatted-value" options=null  ... > 
  at <TableRow headers= 
Array(3) [ {…}, {…}, {…} ]
 item= 
Object { category: "category1", id: 1, 1be40: (1) […], 5622e2d6: (1) […] }
 show-select="multiple"  ... > 
  at <Draggable key=3 modelValue= 
Array [ {…} ]
 onUpdate:modelValue=fn  ... > 
  at <VTable key=0 ref="table" modelValue= 
Array []
  ... > 
  at <Tabular key=1 class="layout" tableHeaders= 
Array(3) [ {…}, {…}, {…} ]
  ... > 
  at <PrivateView key=1 title="Parent" small-header=undefined > 
  at <AsyncComponentWrapper key=1 title="Parent" small-header=undefined > 
  at <TabularWrapper ref="layoutRef" selection= 
Array []
 onUpdate:selection=fn  ... > 
  at <ContentCollection collection="parent" bookmark=null archive=null > 
  at <CollectionOrItem collection="parent" bookmark=undefined archive=null  ... > 
  at <RouterView> 
  at <RouterPassthrough onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
#text ""
 > > 
  at <RouterView> 
  at <RouterPassthrough onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
#text ""
 > > 
  at <RouterView key=1 > 
  at <App> chunk-2GTISQ3F.js:1641:13

So we can probably just extend

directus/app/src/displays/formatted-value/formatted-value.vue

Line 37 in 46c1666

type: [String, Number],

by Array, correct?

[Nitwel]

Added Array to the formatted-value display. 👍

[hanneskuettner]

This PR caused the broken calendar layout display template #18206 and will also break the CSV export as it changed the return type (and function as far as I can tell) of useAliasFields.

In both cases the expected key is aliasField which has been removed.

See

directus/app/src/utils/render-string-template.ts

Line 70 in 42e1963

const { aliasFields } = useAliasFields(ref(fields));

and

directus/app/src/utils/save-as-csv.ts

Line 22 in 42e1963

const { aliasFields } = useAliasFields(ref(fields));