separate input components (#4302)

Co-authored-by: Cole Blanchard <[email protected]> Co-authored-by: Cole Blanchard <[email protected]>
DARPA-ASKEM · Jul 30, 2024 · c303eb9 · c303eb9
1 parent 8eedaf5
commit c303eb9
Show file tree

Hide file tree

Showing 26 changed files with 360 additions and 312 deletions.
diff --git a/packages/client/hmi-client/src/assets/css/theme/designer/_components.scss b/packages/client/hmi-client/src/assets/css/theme/designer/_components.scss
@@ -24,6 +24,7 @@
 @import './components/input/_slider';
 @import './components/input/_treeselect';
 @import './components/input/_togglebutton';
+@import './components/input/_terainput';
 
 //Button
 @import './components/button/_button';
@@ -96,4 +97,4 @@
 @import './components/misc/_scrolltop';
 @import './components/misc/_skeleton';
 @import './components/misc/_tag';
-@import './components/misc/_terminal';
+@import './components/misc/_terminal';
diff --git a/packages/client/hmi-client/src/assets/css/theme/designer/components/input/_terainput.scss b/packages/client/hmi-client/src/assets/css/theme/designer/components/input/_terainput.scss
@@ -0,0 +1,60 @@
+.tera-input {
+	display: flex;
+	& > label {
+			background-color: none;
+			color: var(--text-color-secondary);
+			cursor: text;
+			padding-right: var(--gap-1-5);
+			font-size: var(--font-caption);
+			align-self: center;
+	};
+	& > main {
+		display: flex;
+		flex: 1 1 0;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--gap-xsmall) var(--gap-small);
+		background-color: var(--surface-section);
+		border: 1px solid var(--surface-border-alt);
+		border-radius: var(--border-radius);
+		cursor: text;
+		transition: border-color 0.3s ease-in-out;
+		font-family: var(--font-family);
+		&:has(*:disabled) {
+			opacity: 0.5;
+		}
+		&:has(*:focus) {
+			border-color: var(--primary-color);
+		}
+		&.error {
+			border-color: var(--error-border-color);
+		}
+		& > i {
+			margin-right: var(--gap-1);
+		}
+		& > input {
+			min-width: 0;
+			font-family: var(--font-family);
+			font-feature-settings: 'tnum';
+			flex-grow: 1;
+			border: none;
+			background-color: none;
+			&::-webkit-inner-spin-button,
+			&::-webkit-outer-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+	}
+		}
+	}
+
+	+ aside {
+		color: var(--error-message-color);
+		font-size: var(--font-caption);
+		word-wrap: break-word;
+		display: flex;
+		align-items: center;
+		i {
+			margin-right: var(--gap-2);
+		}
+	}
+}
diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue
@@ -3,7 +3,7 @@
 		<h6>
 			<template v-if="item.templateId">{{ item.templateId }},</template> {{ item.id }}
 		</h6>
-		<tera-input
+		<tera-input-text
 			title="Name"
 			placeholder="Add a name"
 			:model-value="item.name ?? ''"
@@ -15,7 +15,7 @@
 			<span><span>Output:</span> {{ item.output }}</span>
 		</div>
 		<!--amr_to_mmt doesn't like unit expressions with spaces, removing them here before they are saved to the amr-->
-		<tera-input
+		<tera-input-text
 			v-else
 			label="Unit"
 			placeholder="Add a unit"
@@ -49,7 +49,7 @@
 			:expression="stringToLatexExpression(item.expression)"
 			:throw-on-error="false"
 		/>
-		<tera-input
+		<tera-input-text
 			title="Description"
 			placeholder="Add a description"
 			:model-value="item.description ?? ''"
@@ -61,7 +61,7 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import AutoComplete from 'primevue/autocomplete';
 import type { ModelPartItem } from '@/types/Model';
 import { stringToLatexExpression } from '@/services/model';

diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part.vue
@@ -23,7 +23,11 @@
 							size="small"
 						/>
 						<span v-else>
-							<tera-input label="Unit" placeholder="Add a unit" v-model="parentEditingState[index].childrenUnits" />
+							<tera-input-text
+								label="Unit"
+								placeholder="Add a unit"
+								v-model="parentEditingState[index].childrenUnits"
+							/>
 							<Button
 								icon="pi pi-check"
 								text
@@ -124,7 +128,7 @@ import { searchCuriesEntities } from '@/services/concept';
 import TeraModelPartEntry from '@/components/model/model-parts/tera-model-part-entry.vue';
 import AutoComplete from 'primevue/autocomplete';
 import Button from 'primevue/button';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 
 const props = defineProps<{
 	items: {

diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue
@@ -13,7 +13,7 @@
 		</header>
 		<main>
 			<span class="expression">
-				<tera-input
+				<tera-input-text
 					label="Expression"
 					:model-value="getInitialExpression(modelConfiguration, initialId)"
 					@update:model-value="emit('update-expression', { id: initialId, value: $event })"
@@ -23,7 +23,7 @@
 			<Button :label="getOtherValuesLabel" text size="small" @click="showOtherConfigValueModal = true" />
 		</main>
 		<footer v-if="sourceOpen">
-			<tera-input
+			<tera-input-text
 				placeholder="Add a source"
 				:model-value="getInitialSource(modelConfiguration, initialId)"
 				@update:model-value="emit('update-source', { id: initialId, value: $event })"
@@ -47,7 +47,7 @@
 import { DistributionType } from '@/services/distribution';
 import { Model, ModelConfiguration } from '@/types/Types';
 import { getInitialExpression, getInitialSource, getOtherValues } from '@/services/model-configurations';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import TeraInitialOtherValueModal from '@/components/model/petrinet/tera-initial-other-value-modal.vue';
 import { computed, ref } from 'vue';
 import Button from 'primevue/button';

diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue
@@ -60,7 +60,7 @@
 					</Column>
 					<Column :colspan="2">
 						<template #footer>
-							<tera-input
+							<tera-input-text
 								placeholder="Add a source"
 								v-model="customSource"
 								@update:modelValue="onCustomSelectionChange"
@@ -71,8 +71,7 @@
 						<template #footer>
 							<section class="inline-flex gap-1">
 								<span class="custom-input-label">Constant</span>
-								<tera-input
-									type="nist"
+								<tera-input-number
 									placeholder="Constant"
 									v-model="customConstant"
 									@update:modelValue="onCustomSelectionChange"
@@ -92,7 +91,8 @@
 
 <script setup lang="ts">
 import { numberToNist } from '@/utils/number';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import { DistributionType } from '@/services/distribution';
 import { ref } from 'vue';
 import Button from 'primevue/button';

diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue
@@ -3,7 +3,7 @@
 		<AccordionTab>
 			<template #header>
 				Initials <span class="artifact-amount">({{ numInitials }})</span>
-				<tera-input v-model="filterText" placeholder="Filter" />
+				<tera-input-text v-model="filterText" placeholder="Filter" />
 			</template>
 
 			<ul>
@@ -73,7 +73,7 @@ import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import Button from 'primevue/button';
 import Divider from 'primevue/divider';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import TeraStratifiedMatrixModal from './model-configurations/tera-stratified-matrix-modal.vue';
 import TeraInitialEntry from './tera-initial-entry.vue';
 

diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue
@@ -33,10 +33,9 @@
 				/>
 
 				<!-- Constant -->
-				<tera-input
+				<tera-input-number
 					v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Constant"
 					label="Constant"
-					type="nist"
 					:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.value"
 					@update:model-value="
 						emit('update-parameter', {
@@ -47,9 +46,8 @@
 				/>
 				<!-- Uniform Distribution -->
 				<template v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Uniform">
-					<tera-input
+					<tera-input-number
 						label="Min"
-						type="nist"
 						:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.minimum"
 						@update:model-value="
 							emit('update-parameter', {
@@ -58,9 +56,8 @@
 							})
 						"
 					/>
-					<tera-input
+					<tera-input-number
 						label="Max"
-						type="nist"
 						:model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.maximum"
 						@update:model-value="
 							emit('update-parameter', {
@@ -77,7 +74,7 @@
 			</section>
 		</main>
 		<footer v-if="isSourceOpen" class="mb-2">
-			<tera-input
+			<tera-input-text
 				placeholder="Add a source"
 				:model-value="getParameterSource(modelConfiguration, parameterId)"
 				@update:model-value="emit('update-source', { id: parameterId, value: $event })"
@@ -98,7 +95,8 @@
 <script setup lang="ts">
 import { Model, ModelConfiguration } from '@/types/Types';
 import { getParameterSource, getParameterDistribution, getOtherValues } from '@/services/model-configurations';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import { computed, ref } from 'vue';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';

diff --git a/...ages/client/hmi-client/src/components/model/petrinet/tera-parameter-other-value-modal.vue b/...ages/client/hmi-client/src/components/model/petrinet/tera-parameter-other-value-modal.vue
@@ -82,7 +82,7 @@
 						</Column>
 						<Column :colspan="2">
 							<template #footer>
-								<tera-input
+								<tera-input-text
 									placeholder="Add a source"
 									v-model="customSource"
 									@update:modelValue="onCustomSelectionChange"
@@ -96,8 +96,7 @@
 						</Column>
 						<Column>
 							<template #footer v-if="numberType === numberOptions[0]">
-								<tera-input
-									type="nist"
+								<tera-input-number
 									placeholder="Constant"
 									v-model="customConstant"
 									@update:modelValue="onCustomSelectionChange"
@@ -106,22 +105,12 @@
 						</Column>
 						<Column>
 							<template #footer v-if="numberType === numberOptions[1]">
-								<tera-input
-									type="nist"
-									placeholder="Min"
-									v-model="customMin"
-									@update:modelValue="onCustomSelectionChange"
-								/>
+								<tera-input-number placeholder="Min" v-model="customMin" @update:modelValue="onCustomSelectionChange" />
 							</template>
 						</Column>
 						<Column>
 							<template #footer v-if="numberType === numberOptions[1]">
-								<tera-input
-									type="nist"
-									placeholder="Max"
-									v-model="customMax"
-									@update:modelValue="onCustomSelectionChange"
-								/>
+								<tera-input-number placeholder="Max" v-model="customMax" @update:modelValue="onCustomSelectionChange" />
 							</template>
 						</Column>
 					</Row>
@@ -141,7 +130,8 @@ import { extent } from 'd3';
 import { DistributionType } from '@/services/distribution';
 import { SemanticOtherValues } from '@/services/model-configurations';
 import Dropdown from 'primevue/dropdown';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import { ref } from 'vue';
 import Button from 'primevue/button';
 import TeraModal from '@/components/widgets/tera-modal.vue';

diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-table.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-table.vue
@@ -14,7 +14,7 @@
 					@click.stop="onAddUncertainty"
 					class="mr-2"
 				/>
-				<tera-input v-model="filterText" placeholder="Filter" />
+				<tera-input-text v-model="filterText" placeholder="Filter" />
 			</template>
 
 			<!-- Adding uncertainty header -->
@@ -142,7 +142,7 @@ import { DistributionType, DistributionTypeLabel, distributionTypeOptions } from
 import InputNumber from 'primevue/inputnumber';
 import Dropdown from 'primevue/dropdown';
 import Checkbox from 'primevue/checkbox';
-import TeraInput from '@/components/widgets/tera-input.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import TeraParameterEntry from './tera-parameter-entry.vue';
 import TeraStratifiedMatrixModal from './model-configurations/tera-stratified-matrix-modal.vue';