primevue text inputs to tera text inputs pt1 (#4332)

Co-authored-by: Cole Blanchard <cblanchard@Cole-Blanchards-MacBook-Pro.local>
DARPA-ASKEM · Aug 1, 2024 · 5480efb · 5480efb
1 parent 956bc0f
commit 5480efb
Show file tree

Hide file tree

Showing 23 changed files with 78 additions and 76 deletions.
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
@@ -47,7 +47,7 @@
 		}
 	}
 
-	+ aside {
+	& > aside {
 		color: var(--error-message-color);
 		font-size: var(--font-caption);
 		word-wrap: break-word;

diff --git a/packages/client/hmi-client/src/components/code/tera-code.vue b/packages/client/hmi-client/src/components/code/tera-code.vue
@@ -109,7 +109,7 @@
 			<template #default>
 				<form @submit.prevent>
 					<label class="text-sm mb-1" for="model-name">Name</label>
-					<InputText id="model-name" type="text" v-model="newDynamicsName" />
+					<tera-input-text id="model-name" v-model="newDynamicsName" />
 					<label class="text-sm mb-1" for="model-description">Description (optional)</label>
 					<Textarea v-model="newDynamicsDescription" />
 				</form>
@@ -168,6 +168,7 @@ import Textarea from 'primevue/textarea';
 import { computed, ref, watch } from 'vue';
 import { VAceEditor } from 'vue3-ace-editor';
 import { VAceEditorInstance } from 'vue3-ace-editor/types';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import TeraCodeDynamic from './tera-code-dynamic.vue';
 import TeraDirectory from './tera-directory.vue';
 
@@ -521,7 +522,6 @@ header > section {
 .name-input {
 	height: 2.25rem;
 	align-self: center;
-	border: 1px solid var(--surface-border);
 }
 
 .form-checkbox {

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
@@ -125,7 +125,7 @@
 	<Dialog v-model:visible="showSaveInput" :modal="true" :style="{ width: '50vw' }" header="Save as">
 		<div class="p-fluid mt-4">
 			<div class="p-field">
-				<InputText id="name" v-model="saveAsName" placeholder="What do you want to call it?" />
+				<tera-input-text id="name" v-model="saveAsName" placeholder="What do you want to call it?" />
 			</div>
 		</div>
 		<template #footer>
@@ -138,7 +138,7 @@
 import { computed, onMounted, onUnmounted, ref, Ref, watch } from 'vue';
 import Button from 'primevue/button';
 import Dialog from 'primevue/dialog';
-import InputText from 'primevue/inputtext';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import { useToastService } from '@/services/toast';
 import { IModel } from '@jupyterlab/services/lib/session/session';
 import type { CsvAsset, NotebookSession } from '@/types/Types';
@@ -183,7 +183,7 @@ const newCsvHeader: any = ref(null);
 const oldCsvHeaders: any = ref(null);
 const jupyterCsv: Ref<CsvAsset | null> = ref(null);
 const showSaveInput = ref(<boolean>false);
-const saveAsName = ref(<string | null>'');
+const saveAsName = ref('');
 const toast = useToastService();
 
 const updateKernelStatus = (statusString: string) => {

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-regridding-panel.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-regridding-panel.vue
@@ -76,7 +76,7 @@
 				<span class="p-button-text">Save as</span>
 			</Button>
 			<span v-if="showSaveInput" style="padding-left: 1em; padding-right: 2em">
-				<InputText v-model="saveAsName" class="post-fix" placeholder="New dataset name" />
+				<tera-input-text v-model="saveAsName" class="post-fix" placeholder="New dataset name" />
 				<i class="pi pi-times i" :class="{ clear: hasValidDatasetName }" @click="saveAsName = ''"></i>
 				<i
 					class="pi pi-check i"
@@ -101,7 +101,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import Button from 'primevue/button';
-import InputText from 'primevue/inputtext';
+import teraInputText from '@/components/widgets/tera-input-text.vue';
 import { useToastService } from '@/services/toast';
 import { IModel } from '@jupyterlab/services/lib/session/session';
 import type { NotebookSession } from '@/types/Types';
@@ -137,7 +137,7 @@ const autoExpandPreview = ref(<boolean>true);
 const actionTarget = ref('df');
 const contextInfo: any = ref({});
 const showSaveInput = ref(<boolean>false);
-const saveAsName = ref(<string | null>'');
+const saveAsName = ref('');
 const toast = useToastService();
 
 const updateKernelStatus = (statusString: string) => {

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset.vue
@@ -11,13 +11,13 @@
 		@tab-change="(e) => (selectedTabIndex = e.index)"
 	>
 		<template #name-input>
-			<InputText
+			<tera-input-text
 				v-if="isRenamingDataset"
 				v-model.lazy="newDatasetName"
 				placeholder="Dataset name"
 				@keyup.enter="updateDatasetName"
 				@keyup.esc="updateDatasetName"
-				v-focus
+				auto-focus
 			/>
 			<div v-if="isRenamingDataset" class="flex flex-nowrap ml-1 mr-3">
 				<Button icon="pi pi-check" rounded text @click="updateDatasetName" />
@@ -70,7 +70,7 @@ import type { FeatureConfig } from '@/types/common';
 import type { Source } from '@/types/search';
 import { DatasetSource } from '@/types/search';
 import { useProjects } from '@/composables/project';
-import InputText from 'primevue/inputtext';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import ContextMenu from 'primevue/contextmenu';
 import Button from 'primevue/button';
 import { logger } from '@/utils/logger';

diff --git a/packages/client/hmi-client/src/components/dataset/tera-save-dataset-from-simulation.vue b/packages/client/hmi-client/src/components/dataset/tera-save-dataset-from-simulation.vue
@@ -9,7 +9,7 @@
 		<div class="dialog-content">
 			<div class="flex flex-column mt-2 gap-2">
 				<label for="saveNameInput">What do you want to call it?</label>
-				<InputText v-model="saveAsName" id="saveNameInput" placeholder="Enter name" />
+				<tera-input-text v-model="saveAsName" id="saveNameInput" placeholder="Enter name" />
 			</div>
 		</div>
 		<template #footer>
@@ -26,7 +26,7 @@ import { computed, ref, watch } from 'vue';
 import { saveDataset } from '@/services/dataset';
 import { useProjects } from '@/composables/project';
 import Dialog from 'primevue/dialog';
-import InputText from 'primevue/inputtext';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import Button from 'primevue/button';
 import { logger } from '@/utils/logger';
 

diff --git a/packages/client/hmi-client/src/components/llm/tera-notebook-jupyter-input.vue b/packages/client/hmi-client/src/components/llm/tera-notebook-jupyter-input.vue
@@ -29,12 +29,11 @@
 			:placeholder="kernelStatus ? 'Please wait...' : 'What do you want to do?'"
 			@keydown.enter="submitQuestion"
 		/>
-		<InputText
+		<tera-input-text
 			v-else
 			class="input"
 			ref="inputElement"
 			v-model="questionString"
-			type="text"
 			:disabled="kernelStatus === KernelState.busy"
 			:placeholder="kernelStatus ? 'Please wait...' : 'What do you want to do?'"
 			@keydown.enter="submitQuestion"
@@ -45,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import InputText from 'primevue/inputtext';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import InputSwitch from 'primevue/inputswitch';
 import Button from 'primevue/button';
 import { ref } from 'vue';

diff --git a/packages/client/hmi-client/src/components/model/tera-model-jupyter-panel.vue b/packages/client/hmi-client/src/components/model/tera-model-jupyter-panel.vue
@@ -74,7 +74,7 @@
 				<span class="p-button-text">Save as</span>
 			</Button>
 			<span v-if="showSaveInput" style="padding-left: 1em; padding-right: 2em">
-				<InputText v-model="saveAsName" class="post-fix" placeholder="New model name" />
+				<tera-input-text v-model="saveAsName" class="post-fix" placeholder="New model name" />
 				<i class="pi pi-times i" :class="{ clear: hasValidDatasetName }" @click="saveAsName = ''"></i>
 				<i
 					class="pi pi-check i"
@@ -91,7 +91,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, Ref, watch } from 'vue';
 import Button from 'primevue/button';
-import InputText from 'primevue/inputtext';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 // import { cloneDeep } from 'lodash';
 import { useToastService } from '@/services/toast';
 import { IModel } from '@jupyterlab/services/lib/session/session';
@@ -133,7 +133,7 @@ const newCsvHeader: any = ref(null);
 const oldCsvHeaders: any = ref(null);
 const jupyterCsv: Ref<CsvAsset | null> = ref(null);
 const showSaveInput = ref(<boolean>false);
-const saveAsName = ref(<string | null>'');
+const saveAsName = ref('');
 const toast = useToastService();
 
 const updateKernelStatus = (statusString: string) => {

diff --git a/packages/client/hmi-client/src/components/model/tera-model.vue b/packages/client/hmi-client/src/components/model/tera-model.vue
@@ -10,13 +10,13 @@
 		@close-preview="emit('close-preview')"
 	>
 		<template #name-input>
-			<InputText
+			<tera-input-text
 				v-if="isNaming"
 				v-model.lazy="newName"
 				placeholder="Title of new model"
 				@keyup.enter="updateModelName"
 				@keyup.esc="updateModelName"
-				v-focus
+				auto-focus
 			/>
 			<div v-if="isNaming" class="flex flex-nowrap ml-1 mr-3">
 				<Button icon="pi pi-check" rounded text @click="updateModelName" />
@@ -65,13 +65,13 @@ import TeraModelDescription from '@/components/model/petrinet/tera-model-descrip
 import TeraModelParts from '@/components/model/tera-model-parts.vue';
 import TeraSaveAssetModal from '@/components/project/tera-save-asset-modal.vue';
 import Button from 'primevue/button';
-import InputText from 'primevue/inputtext';
 import ContextMenu from 'primevue/contextmenu';
 import { getModel, updateModel } from '@/services/model';
 import type { FeatureConfig } from '@/types/common';
 import { AssetType, type Model } from '@/types/Types';
 import { useProjects } from '@/composables/project';
 import { logger } from '@/utils/logger';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 
 const props = defineProps({
 	assetId: {

diff --git a/packages/client/hmi-client/src/components/project/tera-save-asset-modal.vue b/packages/client/hmi-client/src/components/project/tera-save-asset-modal.vue
@@ -12,7 +12,7 @@
 		<template #default>
 			<form @submit.prevent>
 				<label for="new-name">What would you like to call it?</label>
-				<InputText id="new-name" type="text" v-model="newName" placeholder="Enter a unique name" />
+				<tera-input-text id="new-name" v-model="newName" placeholder="Enter a unique name" />
 			</form>
 		</template>
 		<template #footer>
@@ -26,7 +26,7 @@
 import { ref, PropType, computed } from 'vue';
 import { cloneDeep, isEmpty } from 'lodash';
 import Button from 'primevue/button';
-import InputText from 'primevue/inputtext';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import TeraModal from '@/components/widgets/tera-modal.vue';
 import { AssetType, ProgrammingLanguage } from '@/types/Types';
 import type { Model } from '@/types/Types';

diff --git a/packages/client/hmi-client/src/components/project/tera-upload-resources-modal.vue b/packages/client/hmi-client/src/components/project/tera-upload-resources-modal.vue
@@ -55,7 +55,7 @@
 				</section>
 				<section v-if="importedFiles.length < 1">
 					<label>Or upload from a Github repository URL</label>
-					<InputText v-model="urlToUpload" class="upload-from-github-url"></InputText>
+					<tera-input-text v-model="urlToUpload" class="upload-from-github-url" />
 				</section>
 				<tera-import-github-file
 					:visible="isImportGithubFileModalVisible"
@@ -87,7 +87,6 @@ import { createNewDatasetFromFile } from '@/services/dataset';
 import useAuthStore from '@/stores/auth';
 import { ref } from 'vue';
 import TeraDragAndDropImporter from '@/components/extracting/tera-drag-n-drop-importer.vue';
-import InputText from 'primevue/inputtext';
 import { useToastService } from '@/services/toast';
 import TeraImportGithubFile from '@/components/widgets/tera-import-github-file.vue';
 import { extractPDF } from '@/services/knowledge';
@@ -96,6 +95,7 @@ import { uploadArtifactToProject } from '@/services/artifact';
 import { createModel, processAndAddModelToProject, validateAMRFile } from '@/services/model';
 import { createProvenance, RelationshipType } from '@/services/provenance';
 import { modelCard } from '@/services/goLLM';
+import TeraInputText from '@/components//widgets/tera-input-text.vue';
 
 defineProps<{
 	visible: boolean;

diff --git a/packages/client/hmi-client/src/components/widgets/tera-input-number.vue b/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="tera-input" :label="label" :title="title">
+	<div class="tera-input">
 		<label v-if="label" @click.self.stop="focusInput">{{ label }}</label>
 		<main :class="{ error: getErrorMessage }" @click.self.stop="focusInput">
 			<i v-if="icon" :class="icon" />
@@ -17,8 +17,8 @@
 				:placeholder="placeholder"
 			/>
 		</main>
+		<aside v-if="getErrorMessage"><i class="pi pi-exclamation-circle" /> {{ getErrorMessage }}</aside>
 	</div>
-	<aside v-if="getErrorMessage"><i class="pi pi-exclamation-circle" /> {{ getErrorMessage }}</aside>
 </template>
 
 <script setup lang="ts">
@@ -29,7 +29,6 @@ import { CSSProperties, computed, ref, watch } from 'vue';
 const props = defineProps<{
 	modelValue: number | undefined;
 	label?: string;
-	title?: string;
 	icon?: string;
 	errorMessage?: string;
 	disabled?: boolean;

diff --git a/packages/client/hmi-client/src/components/widgets/tera-input-text.vue b/packages/client/hmi-client/src/components/widgets/tera-input-text.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="tera-input" :label="label" :title="title">
+	<div class="tera-input">
 		<label v-if="label" @click.self.stop="focusInput">{{ label }}</label>
 		<main :class="{ error: getErrorMessage }" @click.self.stop="focusInput">
 			<i v-if="icon" :class="icon" />
@@ -11,33 +11,35 @@
 				type="text"
 				:value="displayValue()"
 				@click.stop
-				@focus="isFocused = true"
+				@focus="onFocus"
 				@focusout="$emit('focusout', $event)"
 				@blur="onBlur"
 				@input="updateValue"
+				@keyup="$emit('keyup', $event)"
+				@keypress="$emit('keypress', $event)"
 			/>
 		</main>
+		<aside v-if="getErrorMessage"><i class="pi pi-exclamation-circle" /> {{ getErrorMessage }}</aside>
 	</div>
-	<aside v-if="getErrorMessage"><i class="pi pi-exclamation-circle" /> {{ getErrorMessage }}</aside>
 </template>
 
 <script setup lang="ts">
 import { numberToNist } from '@/utils/number';
 import { isString, toNumber, isNaN } from 'lodash';
-import { CSSProperties, computed, ref } from 'vue';
+import { CSSProperties, computed, onMounted, ref } from 'vue';
 
 const props = defineProps<{
 	modelValue: string | undefined;
 	label?: string;
-	title?: string;
 	icon?: string;
 	errorMessage?: string;
 	disabled?: boolean;
 	placeholder?: string;
 	autoWidth?: boolean;
+	autoFocus?: boolean;
 }>();
 
-const emit = defineEmits(['update:model-value', 'focusout']);
+const emit = defineEmits(['update:model-value', 'focusout', 'keyup', 'blur', 'focus', 'keypress']);
 const inputField = ref<HTMLInputElement | null>(null);
 const getDisabled = props.disabled ?? false;
 const isFocused = ref(false);
@@ -82,12 +84,21 @@ function formatValue(value: string | number | undefined) {
 const updateValue = (event: Event) => {
 	const target = event.target as HTMLInputElement;
 	const value = target.value;
-
-	console.log(value);
 	emit('update:model-value', value);
 };
 
-const onBlur = () => {
+const onFocus = (event) => {
+	isFocused.value = true;
+	emit('focus', event);
+};
+const onBlur = (event) => {
 	isFocused.value = false;
+	emit('blur', event);
 };
+
+onMounted(() => {
+	if (props.autoFocus) {
+		focusInput();
+	}
+});
 </script>
diff --git a/packages/client/hmi-client/src/components/widgets/tera-modal.vue b/packages/client/hmi-client/src/components/widgets/tera-modal.vue
@@ -153,7 +153,7 @@ footer {
 	margin-bottom: 0.5em;
 }
 
-.content:deep(input),
+.content:deep(.tera-input),
 .content:deep(textarea) {
 	display: block;
 	margin-bottom: 1rem;

diff --git a/...es/client/hmi-client/src/components/workflow/ops/calibrate-julia/tera-calibrate-julia.vue b/...es/client/hmi-client/src/components/workflow/ops/calibrate-julia/tera-calibrate-julia.vue
@@ -83,7 +83,7 @@
 						</div>
 						<div class="label-and-input">
 							<label for="ode-method">ODE method</label>
-							<InputText class="p-inputtext-sm" v-model="extra.odeMethod" @update:model-value="updateStateExtras" />
+							<tera-input-text v-model="extra.odeMethod" @update:model-value="updateStateExtras" />
 						</div>
 						<div class="label-and-input">
 							<label for="calibrate-method">Calibrate method</label>
@@ -172,7 +172,7 @@ import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
 import Dropdown from 'primevue/dropdown';
 import InputNumber from 'primevue/inputnumber';
-import InputText from 'primevue/inputtext';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import {
 	CalibrationRequestJulia,
 	ClientEvent,

diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
@@ -6,7 +6,7 @@
 
 		<div class="button-row">
 			<label>Name of constraint</label>
-			<InputText
+			<tera-input-text
 				v-model="constraintName"
 				placeholder="Add constraint name"
 				@focusout="emit('update-self', { index: props.index, updatedConfig: updatedConfig })"
@@ -105,7 +105,7 @@
 
 <script setup lang="ts">
 import { watch, ref, computed } from 'vue';
-import InputText from 'primevue/inputtext';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import InputNumber from 'primevue/inputnumber';
 import MultiSelect from 'primevue/multiselect';
 import Dropdown from 'primevue/dropdown';