fix: handles default value on render and null emits

Author: Guilherme de Oliveira

src/interface.vue

@@ -1,10 +1,10 @@
 <template>
-	<div v-if="displayOnly">{{ computedValue }}</div>
+	<div v-if="displayOnly">{{ value }}</div>
 	<v-input v-else v-model="value" />
 </template>
 
 <script lang="ts">
-import { ComputedRef, defineComponent, inject, ref, watch } from 'vue';
+import { ComputedRef, defineComponent, inject, watch } from 'vue';
 import { parseExpression } from './operations';
 import { useDeepValues, useCollectionRelations } from './utils';
 
@@ -37,7 +37,6 @@ export default defineComponent({
 	},
 	emits: ['input'],
 	setup(props, { emit }) {
-		const computedValue = ref('');
 		const relations = useCollectionRelations(props.collection);
 		const values = useDeepValues(
 			inject<ComputedRef<Record<string, any>>>('values')!,
@@ -48,32 +47,24 @@ export default defineComponent({
 			props.template
 		);
 
-		if (values) {
-			if (props.displayOnly) {
-				computedValue.value = compute();
+		watch(values, () => {
+			const val = compute();
+			if (val !== props.value) {
+				emit('input', val ?? null);
 			}
-
-			watch(values, () => {
-				if (props.displayOnly) {
-					computedValue.value = compute();
-				} else {
-					const newValue = compute();
-					if (newValue !== props.value) {
-						emit('input', newValue);
-					}
-				}
-			});
-		}
-
-		return {
-			computedValue,
-		};
+		});
 
 		function compute() {
-			return props.template.replace(/{{.*?}}/g, (match) => {
+			const computedValue = props.template.replace(/{{.*?}}/g, (match) => {
 				const expression = match.slice(2, -2).trim();
 				return parseExpression(expression, values);
 			});
+
+			if (!computedValue.length) {
+				return null;
+			}
+
+			return computedValue;
 		}
 	},
 });

src/operations.ts

@@ -12,6 +12,10 @@ export function parseExpression(exp: string, values: Ref | undefined): any {
 			const { op, a, b } = opMatch;
 			const valueA = parseExpression(a, values);
 
+			if (!valueA) {
+				return '';
+			}
+
 			// unary operators
 			if (b === null) {
 				if (op === 'INT') {