Migrating from ghl-ui InputNumber to HighRise InputNumber

This guide will help you migrate from the ghl-ui InputNumber component to the new HighRise InputNumber component.

Component Implementation Changes

Import Changes

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

Basic Usage Changes

- <UIInputNumber
-   id="basic-number"
-   v-model="value"
-   placeholder="Enter a number"
-   @update:modelValue="handleValueChange"
-   size="medium"
- />

+ <HLInputNumber
+   id="basic-number"
+   v-model:value="value"
+   placeholder="Enter a number"
+   @update:value="handleValueChange"
+   size="md"
+   :show-button="true"
+ />

Form Integration Changes

- <UIForm :model="formModel">
-   <UIFormItem label="Quantity">
-     <UIInputNumber
-       id="quantity"
-       v-model="formModel.quantity"
-       :min="1"
-       :max="100"
-     />
-   </UIFormItem>
- </UIForm>

+ <HLForm :model="formModel" :rules="rules">
+   <HLFormItem
+     label="Quantity"
+     path="quantity"
+     required
+   >
+     <HLInputNumber
+       id="quantity"
+       v-model:value="formModel.quantity"
+       :min="1"
+       :max="100"
+     />
+   </HLFormItem>
+ </HLForm>

Props Changes

Required Changes

ghl-ui Prop	HighRise Prop	Notes
id	id	Required in HighRise
modelValue	value	Use v-model:value instead of v-model
size	size	Values changed (see below)
-	step	No change, default is 1
-	textAlign	New prop for text alignment
-	parse	New prop for custom parsing function
-	format	New prop for custom formatting function

Size Mapping

- size="small"
+ size="sm"

- size="medium"
+ size="md"

- size="large"
+ size="lg"

// New sizes available in HighRise
+ size="xs"
+ size="2xs"
+ size="3xs"

New Features in HighRise

Text Alignment

<template>
  <HLInputNumber v-model:value="value" text-align="start" />
  <HLInputNumber v-model:value="value" text-align="center" />
  <HLInputNumber v-model:value="value" text-align="end" />
</template>

Custom Formatting

<template>
  <HLInputNumber v-model:value="value" :format="formatNumber" :parse="parseNumber" />
</template>

<script setup>
const formatNumber = value => {
  if (value === null) return ''
  return `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

const parseNumber = input => {
  const parsed = Number(input.replace(/[^\d.-]/g, ''))
  return isNaN(parsed) ? null : parsed
}
</script>

Percentage Input Example

<template>
  <HLInputNumber
    v-model:value="percentageValue"
    :parse="parsePercentage"
    :format="formatPercentage"
    :min="0"
    :max="100"
    placeholder="Enter percentage"
    :show-button="true"
  />
</template>

<script setup>
const percentageValue = ref(50)

const parsePercentage = input => {
  const cleaned = input.replace(/%|\s/g, '')
  const parsed = Number(cleaned)
  if (isNaN(parsed) || parsed < 0 || parsed > 100) return null
  return parsed
}

const formatPercentage = value => {
  if (value === null) return ''
  return `${value}%`
}
</script>

Examples

Basic Usage

- <UIInputNumber
-   id="basic-number"
-   v-model="value"
-   placeholder="Enter a number"
- />

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

With Min and Max Constraints

- <UIInputNumber
-   id="constrained-number"
-   v-model="temperature"
-   :min="0"
-   :max="100"
-   placeholder="Enter temperature"
- />

+ <HLInputNumber
+   id="constrained-number"
+   v-model:value="temperature"
+   :min="0"
+   :max="100"
+   placeholder="Enter temperature"
+   :show-button="true"
+ />

With Precision

- <UIInputNumber
-   id="precise-number"
-   v-model="price"
-   :precision="2"
-   placeholder="Enter price"
- />

+ <HLInputNumber
+   id="precise-number"
+   v-model:value="price"
+   :precision="2"
+   placeholder="Enter price"
+   :show-button="true"
+ />

With Custom Step

- <UIInputNumber
-   id="step-number"
-   v-model="value"
-   :step="10"
- />

+ <HLInputNumber
+   id="step-number"
+   v-model:value="value"
+   :step="10"
+   :show-button="true"
+ />

With Form Validation

- <UIFormItem label="Quantity" path="quantity">
-   <UIInputNumber
-     id="form-quantity"
-     v-model="formData.quantity"
-     :min="1"
-     :max="100"
-   />
- </UIFormItem>

+ <HLFormItem
+   label="Quantity"
+   validation-status="error"
+   validation-message="Please enter a valid quantity"
+ >
+   <HLInputNumber
+     id="form-quantity"
+     v-model:value="formData.quantity"
+     :min="1"
+     :max="100"
+     :show-button="true"
+   />
+ </HLFormItem>

Best Practices

1. Always provide an id prop for accessibility
2. Use v-model:value for two-way binding
3. Implement proper form validation when needed
4. Use appropriate size variants for different contexts
5. Consider mobile responsiveness
6. Add proper ARIA labels for accessibility
7. Handle loading and error states appropriately
8. Use descriptive placeholders
9. Consider using custom formatting for currency and percentage inputs
10. Maintain consistent styling with other form components
11. Use appropriate min/max constraints based on the context
12. Consider using precision for decimal values
13. Implement proper error handling and feedback
14. Use text alignment for better UX

Additional Notes

1. The component automatically handles focus states
2. Error states are managed through form validation
3. Supports keyboard navigation
4. Maintains consistent styling with other form components
5. Handles disabled states consistently
6. Integrates seamlessly with form validation
7. Maintains accessibility standards
8. Supports custom styling through CSS variables
9. Provides flexible formatting and parsing options
10. Works well on both desktop and mobile devices
11. Supports both controlled and uncontrolled modes
12. Includes built-in validation support