fix(@vben/common-ui): fetch ApiComponent options after late API binding (#8371)

* fix(common-ui): fetch api options after late binding

* test(common-ui): assert late api options payload

.changeset/calm-api-selects-load.md

@@ -0,0 +1,5 @@
+---
+'@vben/common-ui': patch
+---
+
+fix(@vben/common-ui): fetch ApiComponent options when an API is provided after mount

packages/effects/common-ui/src/components/api-component/__tests__/api-component.test.ts

@@ -1,3 +1,5 @@
+import type { ApiComponentProps } from '../types';
+
 import { mount } from '@vue/test-utils';
 import { defineComponent, h, markRaw, nextTick, ref } from 'vue';
 
@@ -128,4 +130,37 @@ describe('api-component.vue', () => {
     expect(handleUpdate).toHaveBeenCalledWith('selected');
     expect(input.props('modelValue')).toBe('selected');
   });
+
+  it('fetches when the api is provided after mount', async () => {
+    const api = vi
+      .fn()
+      .mockResolvedValue([{ label: 'Loaded', value: 'loaded' }]);
+    const apiRef = ref<ApiComponentProps['api']>();
+    const Harness = defineComponent({
+      setup() {
+        return () =>
+          h(ApiComponent, {
+            api: apiRef.value,
+            component: markRaw(ModelValueInput),
+          });
+      },
+    });
+
+    const wrapper = mount(Harness);
+    expect(api).not.toHaveBeenCalled();
+
+    apiRef.value = api;
+    await nextTick();
+
+    expect(api).toHaveBeenCalledTimes(1);
+    await vi.waitFor(() => {
+      const events = wrapper
+        .findComponent(ApiComponent)
+        .emitted('optionsChange');
+      const lastEvent = events?.at(-1)?.[0];
+      expect(lastEvent).toEqual([
+        expect.objectContaining({ label: 'Loaded', value: 'loaded' }),
+      ]);
+    });
+  });
 });

packages/effects/common-ui/src/components/api-component/api-component.vue

@@ -200,9 +200,9 @@ const mergedParams = computed(() => {
 });
 
 watch(
-  mergedParams,
-  (value, oldValue) => {
-    if (isEqual(value, oldValue)) {
+  [() => props.api, mergedParams],
+  ([api, value], [oldApi, oldValue]) => {
+    if (api === oldApi && isEqual(value, oldValue)) {
       return;
     }
     fetchApi();