Interface is not working from "Create A Radio Selector With Icons, SVG, or Images"

[Oleksii909]

Describe the Request

I'm trying to perform the steps stated in the documentation article: https://docs.directus.io/guides/extensions/interfaces-radio-selector-icons.html

However, I faced a bunch of inconsistencies and errors.

I left the explanations in the discord server: https://discord.com/channels/725371605378924594/1230881234637553755/1232261613868814366

I was able to get the interface working in edit of data model but the interface is still broken in edit content form. (it was not clear that the index.js file should not contain empty items existing in the example on the documentation page)

Also after I create a custom field of type "custom-radio-button" using that custom interface then in the edit content form i get an error:

Also important is that for npm run build it is required to install npm install sass --save-dev or npm install node-sass --save-dev in my case only the first saas package could be installed and node-saas triggered an error on installation.

Also, there is a comment in the code list at the end of the documentation page that triggers an error on execution npm run build

Maintenance Strategy

The documentation article needs to be fixed.

[Oleksii909]

I found the mistake in the file interface.vue
There is component in lines 29:34 and there should be used item not choice

<span class="label type-text">
				<v-icon v-if="item.icon" :name="item.icon" filled />
				<span v-else-if="item.svg_icon" class="v-icon" v-html="item.svg_icon"></span>
				<img v-else-if="item.image" class="v-icon" :src="renderImage(item.image)" />
				<slot name="label">{{ item.text }}</slot>
			</span>