Migrating from ghl-ui InputPhone to HighRise InputPhone

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

Component Implementation Changes

Import Changes

- import { UIInputPhone } from '@gohighlevel/ghl-ui'
+ import { HLInputPhone } from '@platform-ui/highrise'

Basic Usage Changes

- <UIInputPhone
-   id="phone-input"
-   v-model:value="phoneNumber"
-   v-model:countryCode="countryCode"
-   @isValid="isPhoneValid = $event"
-   @nationalFormat="nationalFormat = $event"
-   @internationalFormat="internationalFormat = $event"
- />

+ <HLInputPhone
+   id="phone-input"
+   v-model:modelValue="phoneNumber"
+   v-model:countryCode="countryCode"
+   @isValid="isPhoneValid = $event"
+   @nationalFormat="nationalFormat = $event"
+   @internationalFormat="internationalFormat = $event"
+ />

Form Integration Changes

- <UIForm :model="formData" :rules="rules">
-   <UIFormItem label="Phone Number" path="phone">
-     <UIInputPhone
-       id="form-phone"
-       v-model:value="formData.phone"
-       v-model:countryCode="formData.countryCode"
-       @isValid="handlePhoneValidation"
-     />
-   </UIFormItem>
- </UIForm>

+ <HLForm :model="formData" :rules="rules">
+   <HLFormItem
+     label="Phone Number"
+     path="phone"
+     required
+   >
+     <HLInputPhone
+       id="form-phone"
+       v-model:modelValue="formData.phone"
+       v-model:countryCode="formData.countryCode"
+       @isValid="handlePhoneValidation"
+     />
+   </HLFormItem>
+ </HLForm>

Props Changes

Required Changes

ghl-ui Prop	HighRise Prop	Notes
id	id	Required in HighRise
value	modelValue	Use v-model:modelValue instead of :value
countryCode	countryCode	No change, use with v-model:countryCode

New Props in HighRise

Prop	Type	Default	Description
size	String	'md'	Size of the input ('sm', 'md', 'lg')
placeholder	String	-	Placeholder text for the input
clearable	Boolean	false	Whether the input can be cleared
loading	Boolean	false	Whether to show a loading indicator
readonly	Boolean	false	Whether the input is read-only

New Events in HighRise

Event	Parameters	Description
focus	Event	Emitted when the input gains focus
blur	Event	Emitted when the input loses focus
clear	-	Emitted when the input is cleared

Examples

Basic Usage

<template>
  <HLInputPhone id="basic-phone" v-model:modelValue="phoneNumber" v-model:countryCode="countryCode" placeholder="Enter phone number" />
</template>

<script setup>
import { ref } from 'vue'
import { HLInputPhone } from '@platform-ui/highrise'

const phoneNumber = ref('')
const countryCode = ref('US')
</script>

With Validation

<template>
  <div>
    <HLInputPhone
      id="validated-phone"
      v-model:modelValue="phoneNumber"
      v-model:countryCode="countryCode"
      @isValid="isPhoneValid = $event"
    />
    <p v-if="phoneNumber && !isPhoneValid" class="error-message">Please enter a valid phone number</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { HLInputPhone } from '@platform-ui/highrise'

const phoneNumber = ref('')
const countryCode = ref('US')
const isPhoneValid = ref(false)
</script>

With Form Integration

<template>
  <HLForm :model="formData" :rules="rules">
    <HLFormItem label="Phone Number" path="phone" required validation-status="error" validation-message="Please enter a valid phone number">
      <HLInputPhone
        id="form-phone"
        v-model:modelValue="formData.phone"
        v-model:countryCode="formData.countryCode"
        @isValid="handlePhoneValidation"
      />
    </HLFormItem>
  </HLForm>
</template>

<script setup>
import { reactive } from 'vue'
import { HLInputPhone, HLForm, HLFormItem } from '@platform-ui/highrise'

const formData = reactive({
  phone: '',
  countryCode: 'US',
  isPhoneValid: false,
})

const rules = {
  phone: {
    required: true,
    validator: () => {
      if (!formData.isPhoneValid) {
        return new Error('Please enter a valid phone number')
      }
    },
    trigger: ['blur', 'input'],
  },
}

function handlePhoneValidation(isValid) {
  formData.isPhoneValid = isValid
}
</script>

Best Practices

1. Always provide an id prop for accessibility
2. Use v-model:value and v-model:countryCode 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 validation states appropriately
8. Use descriptive placeholders
9. Consider using international format for global applications
10. Maintain consistent styling with other form components
11. Implement proper error handling and feedback
12. Use clearable prop when appropriate
13. Consider using loading state for async operations
14. Handle both national and international formats appropriately

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 clear visual feedback for all states
10. Works well on both desktop and mobile devices
11. Supports both controlled and uncontrolled modes
12. Includes built-in validation support