feat: tera-input-number widget

packages/client/hmi-client/src/components/funman/tera-constraint-group-form.vue

@@ -51,11 +51,10 @@
 					<label v-if="weights">
 						{{ variable + ' Weight' }}
 					</label>
-					<InputNumber
+					<tera-input-number
 						v-if="weights"
 						:key="index"
 						:placeholder="variable"
-						mode="decimal"
 						:min-fraction-digits="3"
 						:max-fraction-digits="3"
 						v-model="weights[index]"
@@ -99,23 +98,21 @@
 			</div>
 			<div class="button-row">
 				<label>Lower bound</label>
-				<InputNumber
+				<tera-input-number
 					class="p-inputtext-sm"
-					mode="decimal"
+					v-model="lowerBound"
 					:min-fraction-digits="3"
 					:max-fraction-digits="12"
-					v-model="lowerBound"
 					@update:model-value="updateChanges()"
 				/>
 			</div>
 			<div class="button-row">
 				<label>Upper bound</label>
-				<InputNumber
+				<tera-input-number
 					class="p-inputtext-sm"
-					mode="decimal"
+					v-model="upperBound"
 					:min-fraction-digits="3"
 					:max-fraction-digits="12"
-					v-model="upperBound"
 					@update:model-value="updateChanges()"
 				/>
 			</div>
@@ -131,6 +128,7 @@ import MultiSelect from 'primevue/multiselect';
 import Dropdown from 'primevue/dropdown';
 import RadioButton from 'primevue/radiobutton';
 import { ConstraintGroup } from '@/workflow/ops/funman/funman-operation';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 
 const props = defineProps<{
 	modelStates: string[];

packages/client/hmi-client/src/components/model/petrinet/tera-parameter-table.vue

@@ -155,23 +155,21 @@
 					v-else-if="slotProps.data.type === ParamType.DISTRIBUTION"
 					class="distribution-container"
 				>
-					<InputNumber
+					<label>Min</label>
+					<tera-input-number
 						class="distribution-item min-value"
-						inputId="numericInput"
-						mode="decimal"
+						v-model.lazy="slotProps.data.value.distribution.parameters.minimum"
 						:min-fraction-digits="1"
 						:max-fraction-digits="10"
-						v-model.lazy="slotProps.data.value.distribution.parameters.minimum"
 						:disabled="readonly"
 						@update:model-value="emit('update-value', [slotProps.data.value])"
 					/>
-					<InputNumber
+					<label>Max</label>
+					<tera-input-number
 						class="distribution-item max-value"
-						inputId="numericInput"
-						mode="decimal"
+						v-model.lazy="slotProps.data.value.distribution.parameters.maximum"
 						:min-fraction-digits="1"
 						:max-fraction-digits="10"
-						v-model.lazy="slotProps.data.value.distribution.parameters.maximum"
 						:disabled="readonly"
 						@update:model-value="emit('update-value', [slotProps.data.value])"
 					/>
@@ -182,13 +180,11 @@
 					v-else-if="slotProps.data.type === ParamType.CONSTANT"
 					class="flex align-items-center"
 				>
-					<InputNumber
+					<tera-input-number
 						class="constant-number"
-						inputId="numericInput"
-						mode="decimal"
+						v-model.lazy="slotProps.data.value.value"
 						:min-fraction-digits="1"
 						:max-fraction-digits="10"
-						v-model.lazy="slotProps.data.value.value"
 						:disabled="readonly"
 						@update:model-value="emit('update-value', [slotProps.data.value])"
 					/>
@@ -204,7 +200,7 @@
 						<span class="white-space-nowrap text-sm">Add ±</span>
 						<InputNumber
 							v-model="addPlusMinus"
-	
+
 							text
 							class="constant-number add-plus-minus w-full"
 							inputId="convert-to-distribution"
@@ -380,7 +376,6 @@
 import { computed, ref, watch } from 'vue';
 import { cloneDeep, isEmpty } from 'lodash';
 import Button from 'primevue/button';
-import InputNumber from 'primevue/inputnumber';
 import type { DKG, Model, ModelConfiguration, ModelParameter } from '@/types/Types';
 import Dropdown from 'primevue/dropdown';
 import InputText from 'primevue/inputtext';
@@ -404,6 +399,7 @@ import { MiraModel, MiraTemplateParams } from '@/model-representation/mira/mira-
 import { isStratifiedModel, collapseParameters } from '@/model-representation/mira/mira';
 import { updateVariable } from '@/model-representation/service';
 import TeraModal from '@/components/widgets/tera-modal.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 
 const props = defineProps<{
 	model: Model;
@@ -793,24 +789,24 @@ watch(
 	gap: var(--gap-small);
 }
 
-.distribution-item > :deep(input) {
+.distribution-item {
 	width: 100%;
 	font-feature-settings: 'tnum';
 	font-size: var(--font-caption);
 	text-align: right;
 }
 
-.constant-number > :deep(input) {
+.constant-number {
 	font-feature-settings: 'tnum';
 	font-size: var(--font-caption);
 	text-align: right;
 }
 
-.timeseries-container > :deep(input) {
+.timeseries-container {
 	font-size: var(--font-caption);
 }
 
-.add-plus-minus > :deep(input) {
+.add-plus-minus {
 	width: 3rem;
 	margin-left: var(--gap-xsmall);
 }
@@ -821,6 +817,7 @@ watch(
 	text-align: right;
 }
 
+/* FIXMEL Reapply these later */
 .min-value {
 	position: relative;
 }

packages/client/hmi-client/src/components/optimize/tera-intervention-policy-group-form.vue

@@ -40,10 +40,8 @@
 			</div>
 			<div class="label-and-input">
 				<label for="initial-guess">Initial guess</label>
-				<InputNumber
+				<tera-input-number
 					class="p-inputtext-sm"
-					inputId="numericInput"
-					mode="decimal"
 					:min-fraction-digits="1"
 					:max-fraction-digits="10"
 					v-model="config.initialGuess"
@@ -55,10 +53,8 @@
 		<div class="input-row">
 			<div class="label-and-input">
 				<label for="lower-bound">Lower bound</label>
-				<InputNumber
+				<tera-input-number
 					class="p-inputtext-sm"
-					inputId="numericInput"
-					mode="decimal"
 					:min-fraction-digits="1"
 					:max-fraction-digits="10"
 					v-model="config.lowerBound"
@@ -67,10 +63,8 @@
 			</div>
 			<div class="label-and-input">
 				<label for="upper-bound">Upper bound</label>
-				<InputNumber
+				<tera-input-number
 					class="p-inputtext-sm"
-					inputId="numericInput"
-					mode="decimal"
 					:min-fraction-digits="1"
 					:max-fraction-digits="10"
 					v-model="config.upperBound"
@@ -96,6 +90,7 @@ import { ref } from 'vue';
 import Dropdown from 'primevue/dropdown';
 import InputText from 'primevue/inputtext';
 import InputNumber from 'primevue/inputnumber';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import InputSwitch from 'primevue/inputswitch';
 import { InterventionPolicyGroup } from '@/workflow/ops/optimize-ciemss/optimize-ciemss-operation';
 

packages/client/hmi-client/src/components/widgets/tera-input-number.vue

@@ -0,0 +1,49 @@
+<template>
+	<InputText
+		class="no-arrows"
+		type="number"
+		:value="modelValue"
+		@input="$event.target && updateValue($event.target)"
+	/>
+</template>
+
+<script setup lang="ts">
+import InputText from 'primevue/inputtext';
+
+defineProps({
+	modelValue: {
+		type: Number,
+		default: 0
+	},
+	// TODO: Add support for these later
+	minFractionDigits: {
+		type: Number,
+		default: null
+	},
+	maxFractionDigits: {
+		type: Number,
+		default: null
+	}
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+function updateValue({ value }: any) {
+	if (value) {
+		emit('update:modelValue', parseFloat(value));
+	}
+}
+</script>
+
+<style scoped>
+.no-arrows::-webkit-inner-spin-button,
+.no-arrows::-webkit-outer-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
+
+.no-arrows {
+	-moz-appearance: textfield;
+	width: 100%;
+}
+</style>

packages/client/hmi-client/src/workflow/ops/calibrate-ensemble-ciemss/tera-calibrate-ensemble-ciemss.vue

@@ -25,11 +25,10 @@
 												{{ id }}
 											</td>
 											<td>
-												<InputNumber
-													mode="decimal"
+												<tera-input-number
+													v-model="knobs.ensembleConfigs[i].weight"
 													:min-fraction-digits="0"
 													:max-fraction-digits="7"
-													v-model="knobs.ensembleConfigs[i].weight"
 												/>
 											</td>
 										</tr>
@@ -195,7 +194,7 @@ import {
 import Button from 'primevue/button';
 import AccordionTab from 'primevue/accordiontab';
 import Accordion from 'primevue/accordion';
-import InputNumber from 'primevue/inputnumber';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 import Dropdown from 'primevue/dropdown';
 import { setupDatasetInput, setupModelInput } from '@/services/calibrate-workflow';

packages/client/hmi-client/src/workflow/ops/funman/tera-funman.vue

@@ -52,8 +52,7 @@
 					<div v-if="showAdditionalOptions">
 						<div class="button-column">
 							<label>Tolerance</label>
-							<InputNumber
-								mode="decimal"
+							<tera-input-number
 								:min="0"
 								:max="1"
 								:min-fraction-digits="0"
@@ -148,7 +147,7 @@ import _, { floor } from 'lodash';
 import { computed, ref, watch, onUnmounted } from 'vue';
 import Button from 'primevue/button';
 import InputText from 'primevue/inputtext';
-import InputNumber from 'primevue/inputnumber';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import Slider from 'primevue/slider';
 import MultiSelect from 'primevue/multiselect';
 

packages/client/hmi-client/src/workflow/ops/simulate-ensemble-ciemss/tera-simulate-ensemble-ciemss.vue

@@ -23,12 +23,11 @@
 										{{ id }}
 									</td>
 									<td>
-										<InputNumber
+										<tera-input-number
 											class="ml-3"
-											mode="decimal"
+											v-model="ensembleConfigs[i].weight"
 											:min-fraction-digits="0"
 											:max-fraction-digits="7"
-											v-model="ensembleConfigs[i].weight"
 										/>
 									</td>
 								</tr>
@@ -212,7 +211,7 @@ import { ref, computed, watch, onMounted } from 'vue';
 import Button from 'primevue/button';
 import AccordionTab from 'primevue/accordiontab';
 import Accordion from 'primevue/accordion';
-import InputNumber from 'primevue/inputnumber';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import InputText from 'primevue/inputtext';
 import Dropdown from 'primevue/dropdown';