Supercharge the Number Input

[Heziode]

Hello, thank you for this project, very useful to not reinvent the wheel 🎉

🚀 Feature request

Two features:

• Add simple math computation on the Number Input.
• add a way to remove the 0 of the field when "focus in"

🧱 Problem Statement / Justification

Simple Math

For example, if we have a form with severals Number Input, that is persisted (local storage, backend, etc.), and we have a value, like 10883, it could be useful to do something like 10883+117 and to get 11000 for the value of the input when we leave the field or press Enter.

This could be very useful for financial stuff or form with big number logic.

Remove zero on focus

This is UX so that the user doesn't have to remove the 0 himself if he wants to enter a value.

✅ Proposed solution or API

Add something like this in the machine API:

const [state, send] = useMachine(
  numberInput.machine({
    allowSimpleMath: true,
    removeZeroValueOnFocus: true,
  }),
)

Techincal details

For security, use the Mathjs > evaluate function (or similar) to prevent malicious or erroneous user input. This is what I have done in my current implementation (currently closed source).

↩️ Alternatives

Custom component based on Chakra Number Input

📝 Additional Information

Video of "simple math":

CleanShot.2024-06-14.at.22.18.14.mp4

Video of "remove initial 0 value on focus" :

CleanShot.2024-06-14.at.22.13.38.mp4

[segunadebayo]

Interesting ideas @Heziode.

This feels like something that should be built on top of the machine, not built in.

Could you share some examples of how you achieved those? Perhaps we could document them

[Heziode]

Damn! I have not seen the notification.

Here is the Vue.js component that achieves what you see in the video:

<script setup lang="ts">
// SuperNumberInput.ce.vue

import { ref, useAttrs, computed, onMounted, watch } from 'vue';
import { evaluate } from "mathjs";

/**
 * Checks if a value is defined
 * @param {*} v
 * @returns {Boolean}
 */
function isDef(v) {
  return v !== undefined && v !== null
}

function isNumberKey(event) {
  const charCode = event.which ? event.which : event.keyCode
  if (event.key === '.') return true
  if (
    charCode > 31 &&
    (charCode < 48 || charCode > 57) &&
    (charCode < 96 || charCode > 105) &&
    charCode !== 110
  ) { return false }
  return true
}

function preventNonNumberKey(event) {
  if (!isNumberKey(event)) {
    event.preventDefault()
  }
}

function roundToPrecision(value, precision) {
  return value === ''
    ? parseFloat(0).toFixed(precision)
    : parseFloat(value).toFixed(precision)
}

/**
 * Calculates the precision of a value
 * @param {Number} value Value
 */
function calculatePrecision(value) {
  const groups = /[1-9]([0]+$)|\.([0-9]*)/.exec(String(value))
  if (!groups) {
    return 0
  }
  if (groups[1]) {
    return -groups[1].length
  }
  if (groups[2]) {
    return groups[2].length
  }
  return 0
}

/**
 * Function to keep a value within a specified range (if bound is defined)
 * @param value 
 * @param min 
 * @param max 
 */
function keepInRange(value: number, min: number | undefined, max: number | undefined): number {
  if (isDef(min) && value < min!) {
    // If a minimum bound is defined and the value is less than the minimum, set it to the minimum
    return min!;
  } else if (isDef(max) && value > max!) {
    // If a maximum bound is defined and the value is greater than the maximum, set it to the maximum
    return max!;
  } else {
    // Otherwise, the value is within the specified range, so return it as is
    return value;
  }
}

const DEFAULT_STEP = 1;
const DEFAULT_DELAY = 2000;
const LARGE_STEP_MULTIPLIER = 10;
const MIN_STEP_MULTIPLIER = 0.1;
const DEFAULT_RESET_VALUE = 0;
const DEFAULT_PRECISION = 0;

defineOptions({
  inheritAttrs: false
})

const props = defineProps({
  min: {
    type: Number
  },
  max: {
    type: Number
  },
  precision: {
    type: Number
  },
  step: {
    type: Number,
    default: () => DEFAULT_STEP
  },
  delay: {
    type: Number,
    default: () => DEFAULT_DELAY
  },
  value: {
    type: Number,
  }
})

const rawAttrs = useAttrs();

const attrs = computed(() => {
  const {
    class: hostClass,
    inputClass: inputClass,
    style: hostStyle,
    inputStyle: inputStyle,
    id: hostId,
    inputId: inputId,
    ...rest
  } = rawAttrs;

  return { inputClass, inputStyle, inputId, rest };
});

const emit = defineEmits();

const defaultValue = computed(() => keepInRange(isDef(props.value) ? props.value! : DEFAULT_RESET_VALUE, props.min, props.max));
const timerId: ref<number> = ref(0);
const incrementTimerId: ref<number> = ref(0);
const decrementTimerId: ref<number> = ref(0);
const superNumber: ref<string | number> = ref(defaultValue.value);
const defaultPrecision = computed(() => Math.max(calculatePrecision(props.step), DEFAULT_PRECISION));
const precision = computed(() => props.precision || defaultPrecision);
const isDisabled = computed(() => Object.keys(attrs.value.rest).map(elt => elt.toLowerCase()).includes('disabled'));
const isReadonly = computed(() => Object.keys(attrs.value.rest).map(elt => elt.toLowerCase()).includes('readonly'));
const isInteractive = computed(() => !(isDisabled.value || isReadonly.value));
const input = ref(null);
const decrementPressed = ref(false);
const shiftKeyPressed = ref(false);
const ctrlOrMetaKeyPressed = ref(false);

const evaluateExpression = (inputValue: string): number => {
  try {
    return keepInRange(parseFloat(roundToPrecision(evaluate(inputValue), precision.value)), props.min, props.max);
  } catch (e) {
    return superNumber.value = keepInRange(keepInRange(DEFAULT_RESET_VALUE, props.min, props.max), props.min, props.max);
  }
}

const focusInput = () => {
  requestAnimationFrame(() => {
    input.value && (input.value as HTMLInputElement).focus()
  });
}

const focusInHandler = () => {
  if (superNumber.value === 0) {
    superNumber.value = "";
  }
}

const focusOutHandler = () => {
  if (superNumber.value === "" || !superNumber.value) {
    superNumber.value = 0;
  } else {
    interpretValue();
  }
}

const formattedSuperNumber = computed<string | number>(() => {
  if (typeof superNumber.value === 'number') {
    return superNumber.value;
  }
  return superNumber.value ? superNumber.value.length ? superNumber.value : 0 : 0;
});

const clickHandler = (actionType: '+' | '-') => {
  return (step = props.step) => {    
    if (!isInteractive.value) {
      return;
    }

    let stepMultiplier = 1;
    if (shiftKeyPressed.value) {
      stepMultiplier = LARGE_STEP_MULTIPLIER;
    } else if (ctrlOrMetaKeyPressed.value) {
      stepMultiplier = MIN_STEP_MULTIPLIER;
    }

    superNumber.value = evaluateExpression(`${formattedSuperNumber.value} ${actionType} ${step * stepMultiplier}`);
    emit('input', superNumber.value);
    focusInput();
  }
}

const handleIncrement = clickHandler("+");
const handleDecrement = clickHandler("-");

const handleKeyDown = (event: KeyboardEvent) => {
  preventNonNumberKey(event);

  if (!isInteractive.value) {
    return;
  }

  let stepMultiplier = 1;
  if (shiftKeyPressed.value) {
    stepMultiplier = LARGE_STEP_MULTIPLIER;
  } else if (ctrlOrMetaKeyPressed.value) {
    stepMultiplier = MIN_STEP_MULTIPLIER;
  }

  clearTimeout(timerId.value);
  if (event.code === 'Enter') {
    interpretValue();
  } else if (event.key === 'ArrowUp') {
    event.preventDefault();
    const increment = props.step * stepMultiplier;
    superNumber.value = evaluateExpression(`${formattedSuperNumber.value} + ${increment}`);
    emit('input', superNumber.value);
  } else if (event.key === 'ArrowDown') {
    event.preventDefault();
    const decrement = props.step * stepMultiplier;
    superNumber.value = evaluateExpression(`${formattedSuperNumber.value} - ${decrement}`);
    emit('input', superNumber.value);
  } else if (event.key === 'PageUp') {
    event.preventDefault();
    superNumber.value = evaluateExpression(`${formattedSuperNumber.value} + ${props.step * LARGE_STEP_MULTIPLIER}`);
    emit('input', superNumber.value);
  } else if (event.key === 'PageDown') {
    event.preventDefault();
    superNumber.value = evaluateExpression(`${formattedSuperNumber.value} - ${props.step * LARGE_STEP_MULTIPLIER}`);
    emit('input', superNumber.value);
  } else if (event.key === 'Home') {
    event.preventDefault()
    if (isDef(props.max)) {
      superNumber.value = props.max
    }
  } else if (event.key === 'End') {
    event.preventDefault()
    if (isDef(props.min)) {
      superNumber.value = props.min
    }
  } else {
    timerId.value = setTimeout(() => interpretValue(), props.delay);
  }
};

const interpretValue = (inputValue = superNumber.value) => {
  try {
    if (typeof inputValue === 'string') {
      superNumber.value = evaluateExpression(inputValue);
      emit('input', superNumber.value);
    }
  } catch (error) {
    console.error('Invalid arithmetic operation', error);
  }
};

const startDecrement = () => {  
  handleDecrement();
  decrementPressed.value = true
}
const stopDecrement = () => {
  decrementPressed.value = false
}

watch(decrementPressed, (newDecrementPressed) => {  
  if (decrementTimerId.value) {
    clearTimeout(decrementTimerId.value);
  }
  if (newDecrementPressed) {
    decrementTimerId.value = setTimeout(handleDecrement, 200);
  } else {
    clearTimeout(decrementTimerId.value);
  }
});

document.addEventListener('keydown', (ev: KeyboardEvent) => {
  shiftKeyPressed.value = ev.shiftKey;
  ctrlOrMetaKeyPressed.value = ev.ctrlKey || ev.metaKey;
});

document.addEventListener('keyup', (ev: KeyboardEvent) => {
  shiftKeyPressed.value = ev.shiftKey;
  ctrlOrMetaKeyPressed.value = ev.ctrlKey || ev.metaKey;
});

</script>
  
<template>
  <div class="sni-container">
    <input ref="input" class="sni-input" v-bind="attrs.rest" type="text" pattern="[0-9]*" role="spinbutton"
      inputMode="numeric" v-model="superNumber" @focusin="focusInHandler" @focusout="focusOutHandler"
      @keydown="handleKeyDown" :class="attrs.inputClass" :style="attrs.inputStyle" :id="attrs.inputId"
      :aria-valuemin="props.min" :aria-valuemax="props.max" :aria-disabled="isDisabled" :aria-readonly="isReadonly"
      :aria-valuenow="superNumber" autocomplete="off" />
    <div class="sni-stepper-input" style="display: flex">
      <div class="sni-stepper-button" @click.prevent="handleIncrement()"><span>▲</span></div>
      <div class="sni-stepper-button" @mousedown.prevent="startDecrement" @mouseup.prevent="stopDecrement"><span>▼</span></div>
    </div>
  </div>
</template>

<style scoped>
.sni-container,
.sni-input,
.sni-stepper-input,
.sni-stepper-button {
  display: flex;
}

.sni-stepper-input {
  flex-direction: column;
}

.sni-stepper-button {
  width: 1.5rem;
  height: .75rem;
  user-select: none;
  background-color: hsl(214 20% 21%);
  cursor: pointer;
}

.sni-stepper-button:hover {
  background-color: hsl(214 20% 21% / .75);
}

.sni-stepper-button>* {
  margin: auto;
  font-size: xx-small;
  color: rgb(216, 221, 228);
}
</style>

Note

The code is inspired from the source code of https://github.com/chakra-ui/chakra-ui-vue > Number Input

I have defined a function evaluateExpression (that internally call the evaluate function of Mathjs), that is then called in click events, and some key events.