Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(fixes unit entry): specify characters you want to reject from tera-input #4463

Merged
merged 12 commits into from
Aug 15, 2024
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,9 @@
v-else
label="Unit"
placeholder="Add a unit"
:characters-to-reject="[' ']"
:model-value="item.unitExpression ?? ''"
@update:model-value="
($event) => {
const value = $event.replace(/[\s.]+/g, '');
$emit('update-item', { key: 'unitExpression', value });
}
"
@focusout="($event) => ($event.target.value = $event.target.value.replace(/[\s.]+/g, ''))"
@update:model-value="$emit('update-item', { key: 'unitExpression', value: $event })"
/>
</template>
</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@

<script setup lang="ts">
import { numberToNist } from '@/utils/number';
import { isString, toNumber, isNaN } from 'lodash';
import { isString, toNumber, isNaN, isEmpty } from 'lodash';
import { CSSProperties, computed, onMounted, ref } from 'vue';

const props = defineProps<{
Expand All @@ -37,6 +37,7 @@ const props = defineProps<{
placeholder?: string;
autoWidth?: boolean;
autoFocus?: boolean;
charactersToReject?: string[];
}>();

const emit = defineEmits(['update:model-value', 'focusout', 'keyup', 'blur', 'focus', 'keypress']);
Expand Down Expand Up @@ -83,8 +84,13 @@ function formatValue(value: string | number | undefined) {

const updateValue = (event: Event) => {
const target = event.target as HTMLInputElement;
const value = target.value;
emit('update:model-value', value);
if (props.charactersToReject && !isEmpty(props.charactersToReject)) {
shawnyama marked this conversation as resolved.
Show resolved Hide resolved
const start = target.selectionStart;
const end = target.selectionEnd;
target.value = target.value.replace(new RegExp(`[${props.charactersToReject.join('')}]`, 'g'), ''); // Create a regex pattern from charactersToReject to remove them
target.setSelectionRange(start, end); // Maintain cursor position, is needed if we are entering in the middle of the input
}
emit('update:model-value', target.value);
};

const onFocus = (event) => {
Expand Down
Loading