Merge pull request #21 from rezo-labs/feature/enhance_display

Enhance display of computed value

Author: duydvu

src/index.ts

@@ -7,7 +7,7 @@ export default defineInterface({
 	icon: 'calculate',
 	description: 'Perform computed value based on other fields',
 	component: InterfaceComponent,
-	types: ['string', 'text', 'integer', 'decimal', 'bigInteger', 'float', 'boolean'],
+	types: ['string', 'text', 'integer', 'decimal', 'bigInteger', 'float', 'boolean', 'alias'],
 	group: 'other',
 	options: [
 		{
@@ -24,7 +24,7 @@ export default defineInterface({
 			name: 'Field Mode',
 			type: 'string',
 			meta: {
-				width: 'half',
+				width: 'full',
 				interface: 'select-dropdown',
 				options: {
 					allowNone: true,
@@ -35,5 +35,41 @@ export default defineInterface({
 				},
 			},
 		},
+		{
+			field: 'prefix',
+			name: 'Prefix',
+			type: 'string',
+			meta: {
+				width: 'half',
+				interface: 'system-input-translated-string',
+				options: {
+					trim: false,
+				},
+			},
+		},
+		{
+			field: 'suffix',
+			name: 'Suffix',
+			type: 'string',
+			meta: {
+				width: 'half',
+				interface: 'system-input-translated-string',
+				options: {
+					trim: false,
+				},
+			},
+		},
+		{
+			field: 'customCss',
+			name: 'Custom CSS',
+			type: 'json',
+			meta: {
+				width: 'full',
+				interface: 'input-code',
+				options: {
+					language: 'json',
+				},
+			},
+		},
 	],
 });

src/interface.vue

@@ -1,6 +1,11 @@
 <template>
-	<div v-if="mode">{{ computedValue }}</div>
+	<div v-if="mode" :style="customCss">
+		<span class="prefix">{{ prefix }}</span>
+		<span class="computed-value">{{ computedValue }}</span>
+		<span class="suffix">{{ suffix }}</span>
+	</div>
 	<v-input v-else v-model="value" />
+	<v-notice v-if="errorMsg" type="danger">{{ errorMsg }}</v-notice>
 </template>
 
 <script lang="ts">
@@ -18,6 +23,10 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		type: {
+			type: String,
+			default: null,
+		},
 		collection: {
 			type: String,
 			default: '',
@@ -34,10 +43,22 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
+		prefix: {
+			type: String,
+			default: null,
+		},
+		suffix: {
+			type: String,
+			default: null,
+		},
+		customCss: {
+			type: Object,
+			default: null,
+		},
 	},
 	emits: ['input'],
 	setup(props, { emit }) {
-		const computedValue = ref(props.value);
+		const computedValue = ref<string | number | null>(props.value);
 		const relations = useCollectionRelations(props.collection);
 		const values = useDeepValues(
 			inject<ComputedRef<Record<string, any>>>('values')!,
@@ -47,6 +68,7 @@ export default defineComponent({
 			props.primaryKey,
 			props.template
 		);
+		const errorMsg = ref<string | null>(null);
 
 		if (values) {
 			watch(values, () => {
@@ -64,13 +86,26 @@ export default defineComponent({
 
 		return {
 			computedValue,
+			errorMsg,
 		};
 
 		function compute() {
-			return props.template.replace(/{{.*?}}/g, (match) => {
-				const expression = match.slice(2, -2).trim();
-				return parseExpression(expression, values.value);
-			});
+			try {
+				const res = props.template.replace(/{{.*?}}/g, (match) => {
+					const expression = match.slice(2, -2).trim();
+					return parseExpression(expression, values.value);
+				});
+				if (['integer', 'decimal', 'bigInteger'].includes(props.type)) {
+					return parseInt(res) || 0;
+				}
+				if (['float'].includes(props.type)) {
+					return parseFloat(res) || 0;
+				}
+				return res;
+			} catch (err) {
+				errorMsg.value = err.message ?? 'Unknown error';
+				return null;
+			}
 		}
 	},
 });

src/operations.ts

@@ -190,6 +190,8 @@ export function parseExpression(exp: string, values: Record<string, any>): any {
 		if (!isNaN(parseFloat(exp))) {
 			return parseFloat(exp);
 		}
+
+		throw new Error(`Cannot parse expression: ${exp}`);
 	}
 	return '';
 }