Files
directus/src/interfaces
Rijk van Zanten 31ef7a48c9 Various fixes (#515)
* Fix image deselection when newID isn't set

* Fix svg support in image interface

* Render correct title on file library detail

* Default to interfaces based on type

* Remove unused import

* Don't show dropdown indicator on field label when readonly

* Accept datetime_created datetime_updated in datetime interface

* Add reused value-null component

* Fix z-index of v-badge

* Close status on content click

* Move edit button to header on file detail

* Increase tooltip z-index

* Add warning notice to edit image modal

* Fix extra spacing in divider interface

* Use wide style for notifications when drawer is open

* Click on image to open file preview
2020-05-01 18:08:37 -04:00
..
2020-05-01 18:08:37 -04:00
2020-05-01 18:08:37 -04:00
2020-04-23 18:16:17 -04:00
2020-05-01 15:08:16 -04:00
2020-05-01 18:08:37 -04:00
2020-04-23 18:16:17 -04:00
2020-04-20 14:11:16 -04:00
2020-05-01 18:08:37 -04:00
2020-04-23 18:16:17 -04:00
2020-04-23 18:16:17 -04:00
2020-04-23 18:16:17 -04:00
2020-05-01 18:08:37 -04:00
2020-03-25 16:55:01 -04:00
2020-04-30 23:55:11 -04:00
2020-03-25 16:55:01 -04:00
2020-03-25 16:55:01 -04:00
2020-04-23 14:01:27 -04:00

Interfaces

Interfaces are the individual blocks that allow editing and viewing individual pieces of data. They can be seen as the individual fields in a form, where the field is a single column in a table.

Defining interfaces

Interfaces need to be defined through the defineInterface function. This allows the interface to register things like it's name and options.

export default defineInterface({
	id: 'text-input',
	register: ({ i18n }) => ({
		name: i18n.t('interfaces.text-input.text-input'),
		icon: 'box',
		component: InterfaceTextInput
	})
});

id

Unique ID for the interface within the platform. This is not shown to the end user, but is used internally to build up forms and layouts.

register

Callback function that allows the interface to register it's options and other user-facing parameters.

The one parameter that the register function gets is context. Context holds the following properties:

Property Description
i18n The internal vue-i18n instance. Can be used to return a translated name or translated interface options

name

The user-facing name of the interface. By using the i18n handler from context, you can make this localized.

icon

The icon that's shown when refering to this interface. It's most prominent usage is in the field-setup wizard.

component

The Vue component that makes up the input of the interface. This is the component that will be rendered in the edit form.