feat: Support initializing with a default value.

Author: 3m1n3nc3

packages/vue-place-selector/src/components/place-selector.vue

@@ -55,6 +55,7 @@ const modelValue = defineModel<string | number | null>('modelValue', {
 // Reactive states
 const options = ref<Place[]>([])
 const loading = ref(false)
+const initialized = ref(false)
 const selectedValue = ref<string | number | null>(null)
 
 // Local reactive copy of params to avoid mutating the prop directly
@@ -116,7 +117,11 @@ const fetchPlaces = async () => {
       emitChange(selectedValue.value)
     } else {
       selectedValue.value = modelValue.value
+      if (!initialized.value) {
+        emitChange(selectedValue.value)
+      }
     }
+
     doneBus.emit({ key: props.type, value: selected.value?.iso2 ?? selectedValue.value! }) // Indicate data is ready
   } catch (error) {
     emit('error', 'Error fetching places:', error)
@@ -126,6 +131,7 @@ const fetchPlaces = async () => {
 
 // Emit value changes to parent and event bus
 const emitChange = (value: string | number | null) => {
+  initialized.value = true
   if (value !== null) {
     modelValue.value = value
     bus.emit({ key: props.type, value: selected.value?.iso2 ?? value })
@@ -141,6 +147,7 @@ const onChange = () => {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const onUpdateModelValue = (value: any) => {
   selectedValue.value = value
+  modelValue.value = value
   emitChange(value)
 }
 
@@ -162,6 +169,8 @@ doneBus.on(({ key, value }) => {
 
 // Fetch data on mount
 onMounted(async () => {
-  await fetchPlaces()
+  if (Object.values(localParams.value).length <= 0) {
+    await fetchPlaces()
+  }
 })
 </script>

pnpm-workspace.yaml

@@ -1,12 +1,12 @@
 packages:
   - packages/*
-  # - runner
-  - '!runner'
+  - runner
+  # - '!runner'
   - '!package-template'
   # - '!packages/vue-place-selector'
-  - '!packages/otp-input'
-  - '!packages/vue-auth'
-  - '!packages/vue-trix'
-  - '!packages/vue-forms'
-  - '!packages/vue-dataviewer'
-  - '!packages/paystack-inline'
+  # - '!packages/otp-input'
+  # - '!packages/vue-auth'
+  # - '!packages/vue-trix'
+  # - '!packages/vue-forms'
+  # - '!packages/vue-dataviewer'
+  # - '!packages/paystack-inline'

runner/Pages/components/VueCsc.vue

@@ -46,8 +46,8 @@ import { VuePlaceSelector } from '../../../packages/vue-place-selector'
 import { ref } from 'vue'
 
 const form = ref({
-  country: '',
-  state: '',
+  country: 'Nigeria',
+  state: 'Lagos',
   city: ''
 })
 </script>