custom options view for belongs to

[anditsung]

can we add custom view on belongsto options to show more data?

current work around

class BelongsToOption extends BelongsTo
{
    public $component = "belongs-to-option-field";
    public function optionComponent($optionComponent)
    {
        $this->withMeta([
            'optionComponent' => $optionComponent
        ]);

        return $this;
    }

    public function formatAssociatableResource(NovaRequest $request, $resource)
    {
        return array_filter([
            'avatar' => $resource->resolveAvatarUrl($request),
            'display' => $this->formatDisplayValue($resource),
            'subtitle' => $resource->subtitle(),
            'proformaInvoice' => $resource->proformaInvoice,
            'brand' => $resource->brand,
            'size' => $resource->size,
            'value' => Util::safeInt($resource->getKey()),
        ]);
    }
}

BelongsToOption.vue

<div
    slot="option"
    slot-scope="{ option, selected }"
    class="flex items-center"
>
    <component v-if="field.optionComponent"
               :is="field.optionComponent"
               :option="option"
    />
    <div v-else>
        <div v-if="option.avatar" class="mr-3">
            <img :src="option.avatar" class="w-8 h-8 rounded-full block" />
        </div>

        <div>
            <div
                class="text-sm font-semibold leading-5 text-90"
                :class="{ 'text-white': selected }"
            >
                {{ option.display }}
            </div>

            <div
                v-if="field.withSubtitles"
                class="mt-1 text-xs font-semibold leading-5 text-80"
                :class="{ 'text-white': selected }"
            >
                <span v-if="option.subtitle">{{ option.subtitle }}</span>
                <span v-else>{{ __('No additional information...') }}</span>
            </div>
        </div>
    </div>
</div>

custom option view

<template>
    <div>
        <div class="font-bold">{{ this.option.display }}</div>
        <div class="font-bold">PI: {{ this.option.proformaInvoice.name }}</div>
        <div>Brand: {{ this.option.brand.name }}</div>
        <div>Size: {{ this.option.size.name }}</div>
    </div>
</template>

<script>
export default {
    props: [
        "option"
    ],
}
</script>

BelongsToOption::make(__('Proforma Invoice Item'), 'proformaInvoiceItem', ProformaInvoiceItem::class)
    ->optionComponent('proforma-invoice-item')
    ->searchable(),