efe7b076a3
* Allow set folder for imported files * Allow passing folder in file/files component; Allow pick folder for file/files/image interfaces. * Added folder system component for picking folders; Move folder picker the field from data to interface (file, files, image). * Add custom folder interface; use props for interfaces file/files/image in upload component * Allow set folder for imported files * Allow passing folder in file/files component; Allow pick folder for file/files/image interfaces. * Added folder system component for picking folders; Move folder picker the field from data to interface (file, files, image). * Add custom folder interface; use props for interfaces file/files/image in upload component * Update after rebase * Add storage_default_folder setting, use folder when deploy file * Fix files options; Add default label option for folder interface. * Fix set folder for file * UX * Add migration for column, undo seed change * Update nomanclature * Make sure file library always submits folder, cleanup setting retrieval * Use indexName on down migrate * Fix import default folder, rename customPresets->folderPreset * Rename interface import * Use undefined as default folder * Remove deprecated lang file * Fix display of folder interface, treat null as value * Move shared composable * Remove unused ref Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
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: 'input',
register: ({ i18n }) => ({
name: i18n.global.t('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.