add boolean display

app/src/displays/boolean/boolean.vue

@@ -0,0 +1,74 @@
+<template>
+	<div class="boolean" :style="styles">
+		<value-null v-if="value === null" />
+		<v-icon v-if="iconOn != null && iconOff != null" :name="value ? iconOn : iconOff"></v-icon>
+		<span v-if="labelOn != null && labelOff != null">{{ value ? labelOn : labelOff }}</span>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, PropType } from '@vue/composition-api';
+
+type Choice = {
+	value: string;
+	text: string;
+	color: string | null;
+};
+
+export default defineComponent({
+	props: {
+		value: {
+			type: Boolean,
+			default: false,
+		},
+		labelOn: {
+			type: String,
+			default: null,
+		},
+		labelOff: {
+			type: String,
+			default: null,
+		},
+		iconOn: {
+			type: String,
+			default: null,
+		},
+		iconOff: {
+			type: String,
+			default: null,
+		},
+		colorOn: {
+			type: String,
+			default: null,
+		},
+		colorOff: {
+			type: String,
+			default: null,
+		},
+	},
+	setup(props) {
+		const styles = computed(() => {
+			const style: Record<string, any> = {};
+
+			if (props.colorOn !== null && props.colorOff !== null) {
+				style['color'] = props.value ? props.colorOn : props.colorOff;
+				style['--v-icon-color'] = props.value ? props.colorOn : props.colorOff;
+			}
+			return style;
+		});
+
+		return { styles };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.boolean {
+	display: flex;
+	align-items: center;
+
+	.v-icon {
+		margin-right: 4px;
+	}
+}
+</style>

app/src/displays/boolean/index.ts

@@ -0,0 +1,73 @@
+import { defineDisplay } from '@/displays/define';
+import DisplayBoolean from './boolean.vue';
+
+export default defineDisplay(({ i18n }) => ({
+	id: 'boolean',
+	name: i18n.t('displays.boolean.boolean'),
+	description: i18n.t('displays.boolean.description'),
+	types: ['boolean'],
+	icon: 'check_box',
+	handler: DisplayBoolean,
+	options: [
+		{
+			field: 'labelOn',
+			name: i18n.t('displays.boolean.label_on'),
+			type: 'string',
+			meta: {
+				interface: 'text-input',
+				width: 'half',
+				options: {
+					placeholder: i18n.t('displays.boolean.label_on_placeholder'),
+				},
+			},
+		},
+		{
+			field: 'labelOff',
+			name: i18n.t('displays.boolean.label_off'),
+			type: 'string',
+			meta: {
+				interface: 'text-input',
+				width: 'half',
+				options: {
+					placeholder: i18n.t('displays.boolean.label_off_placeholder'),
+				},
+			},
+		},
+		{
+			field: 'iconOn',
+			name: i18n.t('displays.boolean.icon_on'),
+			type: 'string',
+			meta: {
+				interface: 'icon',
+				width: 'half',
+			},
+		},
+		{
+			field: 'iconOff',
+			name: i18n.t('displays.boolean.icon_off'),
+			type: 'string',
+			meta: {
+				interface: 'icon',
+				width: 'half',
+			},
+		},
+		{
+			field: 'colorOn',
+			name: i18n.t('displays.boolean.color_on'),
+			type: 'string',
+			meta: {
+				interface: 'color',
+				width: 'half',
+			},
+		},
+		{
+			field: 'colorOff',
+			name: i18n.t('displays.boolean.color_off'),
+			type: 'string',
+			meta: {
+				interface: 'color',
+				width: 'half',
+			},
+		},
+	],
+}));

app/src/interfaces/toggle/index.ts

@@ -8,6 +8,7 @@ export default defineInterface(({ i18n }) => ({
 	icon: 'check_box',
 	component: InterfaceToggle,
 	types: ['boolean'],
+	recommendedDisplays: ['boolean'],
 	options: [
 		{
 			field: 'iconOff',

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

@@ -1,5 +1,17 @@
 {
 	"displays": {
+		"boolean": {
+			"boolean": "Boolean",
+			"description": "Display on and off states",
+			"label_on": "Label On",
+			"label_on_placeholder": "Enter an on label...",
+			"label_off": "Label Off",
+			"label_off_placeholder": "Enter an off label...",
+			"icon_on": "Icon On",
+			"icon_off": "Icon Off",
+			"color_on": "Color On",
+			"color_off": "Color Off"
+		},
 		"collection": {
 			"collection": "Collection",
 			"description": "Display a collection",