Add support for custom component options in interfaces/displays

app/src/displays/register.ts

@@ -6,4 +6,8 @@ displays.forEach((display) => {
 	if (typeof display.handler !== 'function') {
 		registerComponent('display-' + display.id, display.handler as Component);
 	}
+
+	if (typeof display.options !== 'function') {
+		registerComponent('display-options-' + display.id, display.options as Component);
+	}
 });

app/src/interfaces/register.ts

@@ -1,7 +1,10 @@
 import registerComponent from '@/utils/register-component/';
 import interfaces from './index';
 
-// inter, cause interface is a reserved keyword in JS... :C
 interfaces.forEach((inter) => {
 	registerComponent('interface-' + inter.id, inter.component);
+
+	if (typeof inter.options === 'function') {
+		registerComponent(`interface-options-${inter.id}`, inter.options);
+	}
 });

app/src/lang/en-US/index.json

@@ -288,6 +288,12 @@
 	"download": "Download",
 	"open": "Open",
 
+	"foreground_color": "Foreground Color",
+	"background_color": "Background Color",
+
+	"default_foreground": "Default Foreground",
+	"default_background": "Default Background",
+
 	"upload_from_device": "Upload File from Device",
 	"choose_from_library": "Choose File from Library",
 	"import_from_url": "Import File from URL",

app/src/modules/settings/routes/data-model/field-detail/components/display.vue

@@ -10,21 +10,19 @@
 			<button @click="fieldData.meta.display = null">{{ $t('reset_display') }}</button>
 		</v-notice>
 
-		<template v-if="fieldData.meta.display && !selectedDisplay">
-			<v-form
-				v-if="
-					selectedDisplay.options &&
-					Array.isArray(selectedDisplay.options) &&
-					selectedDisplay.options.length > 0
-				"
-				:fields="selectedDisplay.options"
-				primary-key="+"
-				v-model="fieldData.meta.options"
-			/>
-
-			<v-notice v-else>
+		<template v-if="fieldData.meta.display && selectedDisplay">
+			<v-notice v-if="!selectedDisplay.options">
 				{{ $t('no_options_available') }}
 			</v-notice>
+
+			<v-form
+				v-else-if="Array.isArray(selectedDisplay.options)"
+				:fields="selectedDisplay.options"
+				primary-key="+"
+				v-model="fieldData.meta.display_options"
+			/>
+
+			<component v-model="fieldData" :is="`display-options-${selectedDisplay.id}`" v-else />
 		</template>
 	</div>
 </template>

app/src/modules/settings/routes/data-model/field-detail/components/interface.vue

@@ -11,20 +11,18 @@
 		</v-notice>
 
 		<template v-if="fieldData.meta.interface && selectedInterface">
+			<v-notice v-if="!selectedInterface.options">
+				{{ $t('no_options_available') }}
+			</v-notice>
+
 			<v-form
-				v-if="
-					selectedInterface.options &&
-					Array.isArray(selectedInterface.options) &&
-					selectedInterface.options.length > 0
-				"
+				v-else-if="Array.isArray(selectedInterface.options)"
 				:fields="selectedInterface.options"
 				primary-key="+"
 				v-model="fieldData.meta.options"
 			/>
 
-			<v-notice v-else>
-				{{ $t('no_options_available') }}
-			</v-notice>
+			<component v-model="fieldData" :is="`interface-options-${selectedInterface.id}`" />
 		</template>
 	</div>
 </template>