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';
 
 export default defineComponent({
@@ -30,31 +30,17 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const values = inject<ComputedRef<Record<string, any>>>('values');
 
-		const computedValue = ref('');
-
 		if (values) {
-			if (props.displayOnly) {
-				computedValue.value = compute();
-			}
-
 			watch(values, (val, oldVal) => {
 				if (shouldUpdate(val, oldVal)) {
-					if (props.displayOnly) {
-						computedValue.value = compute();
-					} else {
-						const newValue = compute();
-						if (newValue !== props.value) {
-							emit('input', newValue);
-						}
+					const val = compute();
+					if (val !== props.value) {
+						emit('input', val ?? null);
 					}
 				}
 			});
 		}
 
-		return {
-			computedValue,
-		};
-
 		/** Simple check which fields are used */
 		function shouldUpdate(val: Record<string, any>, oldVal: Record<string, any>) {
 			for (const key of Object.keys(val)) {
@@ -71,10 +57,16 @@ export default defineComponent({
 		}
 
 		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') {