Migrating from ghl-ui InputNumber to HighRise InputNumber

HLInputNumber with HighRise styling, size mapping, and optional parsing/formatting. IDs are optional (auto-generated).

Component Implementation Changes

Import Changes

- import { UIInputNumber } from '@gohighlevel/ghl-ui'
+ import { HLInputNumber } from '@platform-ui/highrise'

Basic Usage Changes

- <UIInputNumber v-model="value" placeholder="Enter a number" />
+ <HLInputNumber v-model:value="value" placeholder="Enter a number" :show-button="true" />

Props Changes

ghl-ui Prop	HighRise Prop	Notes
v-model	v-model:value	Emits update:value (number | null).
id	id (optional)	Auto-generated if omitted.
size	size	Uses HighRise input sizes (3xs–lg); inherits form/input-group.
min / max	min / max	Same behavior.
step	step	Default 1.
precision	precision	Rounds emitted values to the given decimal places.
show-button	showButton	Show increment/decrement buttons (default true).
buttonPlacement	buttonPlacement	'right' (default) or 'both'.
textAlign	textAlign	start (default), center, end.
parse / format	parse / format	Custom string parsing and display formatting.
clearable	clearable	Clears value; emits clear.
loading	loading	Shows loader state.
readonly	readonly	Prevents input edits.

Events

• update:value — emitted with the new number or null.
• focus, blur, clear, input — standard input events.

Examples

Basic

<HLInputNumber v-model:value="value" placeholder="Enter a number" />

Min/Max and Step

<HLInputNumber v-model:value="qty" :min="1" :max="10" :step="0.5" />

Custom Format/Parse

<HLInputNumber
  v-model:value="price"
  :format="val => (val == null ? '' : `$${val.toFixed(2)}`)"
  :parse="
    input => {
      const n = Number(String(input).replace(/[^0-9.-]/g, ''))
      return isNaN(n) ? null : n
    }
  "
/>

Best Practices

1. Let size inherit from HLForm/input groups unless a specific override is needed.
2. Use precision to avoid floating rounding issues in emitted values.
3. Pair parse/format when showing currency or percentages to keep the underlying value numeric.
4. Keep showButton enabled for better accessibility on number adjustments.