update icon to support colors, datetime, filesize, formatted-val

app/src/displays/datetime/datetime.vue

@@ -16,7 +16,7 @@ export default defineComponent({
 			required: true,
 		},
 		type: {
-			type: String as PropType<'datetime' | 'time' | 'date'>,
+			type: String as PropType<'datetime' | 'time' | 'date' | 'timestamp'>,
 			required: true,
 			validator: (val: string) => ['datetime', 'date', 'time', 'timestamp'].includes(val),
 		},

app/src/displays/filesize/index.ts

@@ -6,6 +6,6 @@ export default defineDisplay(({ i18n }) => ({
 	name: i18n.t('filesize'),
 	icon: 'description',
 	handler: handler,
-	options: null,
+	options: [],
 	types: ['integer'],
 }));

app/src/displays/formatted-value/index.ts

@@ -55,6 +55,9 @@ export default defineDisplay(({ i18n }) => ({
 					],
 				},
 			},
+			schema: {
+				default_value: 'sans-serif',
+			},
 		},
 	],
 }));

app/src/displays/icon/icon.vue

@@ -1,16 +1,32 @@
-<template functional>
-	<v-icon small :name="props.value" />
+<template>
+	<v-icon small :name="value" :style="style" />
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { computed, defineComponent } from '@vue/composition-api';
+import { isHex } from '@/utils/color';
 
 export default defineComponent({
+	name: 'display-icon',
 	props: {
 		value: {
 			type: String,
 			default: null,
 		},
+		color: {
+			type: String,
+			default: null,
+		},
+	},
+	setup(props) {
+		const style = computed(() => {
+			console.log(props.color, isHex(props.color));
+
+			if (isHex(props.color)) return { '--v-icon-color': props.color };
+			else return {};
+		});
+
+		return { style };
 	},
 });
 </script>

app/src/displays/icon/index.ts

@@ -8,17 +8,26 @@ export default defineDisplay(({ i18n }) => ({
 	handler: DisplayIcon,
 	options: [
 		{
-			field: 'outline',
-			name: i18n.t('outline'),
+			field: 'filled',
+			name: i18n.t('displays.icon.filled'),
 			type: 'boolean',
 			meta: {
 				interface: 'toggle',
 				width: 'half',
 				options: {
-					label: i18n.t('use_outline_variant'),
+					label: i18n.t('displays.icon.use_filled_variant'),
 				},
 			},
 		},
+		{
+			field: 'color',
+			name: i18n.t('color'),
+			type: 'string',
+			meta: {
+				interface: 'color',
+				width: 'half',
+			},
+		},
 	],
 	types: ['string'],
 }));

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

@@ -1,7 +1,9 @@
 {
 	"displays": {
 		"icon": {
-			"icon": "Icon"
+			"icon": "Icon",
+			"filled": "Filled",
+			"use_filled_variant": "Use the filled variant"
 		},
 		"color-dot": {
 			"choices-note": "Set colors relative to the text."

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

@@ -721,9 +721,6 @@
 	"tags": "Tags",
 	"format_text": "Format Text",
 
-	"outline": "Outline",
-	"use_outline_variant": "Use the outline variant",
-
 	"bold": "Bold",
 	"subdued": "Subdued",