feat: 更新 PSelect 组件，支持异步选项加载并优化配置，调整样式以改善用户体验

src/__fk-inputs__/inputs/p-select.tsx

@@ -6,6 +6,8 @@ import { defineComponent, markRaw, ref } from 'vue';
 import { floatLabel } from '../sections/floatLabel';
 import { messages } from '../sections/messages';
 
+// https://formkit.com/inputs/dropdown
+
 type PrimevueSelectListeners = {
   // 'onFocus': SelectEmitsOptions['focus'];
   'onUpdate:modelValue': SelectEmitsOptions['update:modelValue'];
@@ -27,17 +29,32 @@ const PSelectComp = defineComponent(
         );
       },
     };
+    // [optionsLoader](https://github.com/formkit/formkit/blob/2d5387ba98597775cb2a752af65aee84bc438863/packages/inputs/src/features/options.ts#L125)
+
     const poptions = ref();
     const loading = ref(true);
-    if (formkitContext.options instanceof Promise) {
-      formkitContext.options.then((res: any) => {
-        poptions.value = res;
+
+    const loadOptions = async () => {
+      try {
+        let result;
+        if (formkitContext.options instanceof Promise) {
+          result = await formkitContext.options;
+        } else if (typeof formkitContext.options === 'function') {
+          const funcResult = await (formkitContext.options as Function).call(undefined);
+          result = funcResult instanceof Promise ? await funcResult : funcResult;
+        } else {
+          result = formkitContext.options;
+        }
+        poptions.value = result;
+      } catch (error) {
+        console.error('Failed to load options:', error);
+        poptions.value = [];
+      } finally {
         loading.value = false;
-      });
-    } else {
-      poptions.value = formkitContext.options;
-      loading.value = false;
-    }
+      }
+    };
+
+    loadOptions(); // 立即加载options
 
     return () => {
       return (
@@ -93,7 +110,7 @@ declare module '@formkit/inputs' {
   interface FormKitInputProps<Props extends FormKitInputs<Props>> {
     PSelect: {
       type: 'PSelect';
-      options: OptionsType | Promise<OptionsType>;
+      options: OptionsType | Promise<OptionsType> | (() => OptionsType | Promise<OptionsType>);
     };
   }
 }

src/all-custom/all-custom.vue

@@ -23,13 +23,13 @@ const K_OPTIONS = [
   { label: 'Option 2', value: 'Value 2' },
   { label: 'Option 3', value: 'Value 3' },
 ];
-const promiseOptions = () => {
-  return new Promise<typeof K_OPTIONS>(resolve => {
-    setTimeout(() => {
-      resolve(K_OPTIONS);
-    }, 1000);
-  });
-};
+const promiseOptions = new Promise<typeof K_OPTIONS>(resolve => {
+  setTimeout(() => resolve(K_OPTIONS), 1000);
+});
+/* const funcOptions = async () => {
+  await new Promise(r => setTimeout(r, 1000))
+  return K_OPTIONS;
+} */
 </script>
 
 <template>
@@ -81,7 +81,7 @@ const promiseOptions = () => {
       />
       <FormKit
         type="PSelect"
-        name="PSelect"
+        name="PSelect_1"
         label="选择框"
         validation="required"
         :options="K_OPTIONS"
@@ -90,14 +90,22 @@ const promiseOptions = () => {
       />
       <FormKit
         type="PSelect"
-        name="PSelect"
+        name="PSelect_2"
         label="选择框"
         validation="required"
-        :options="promiseOptions()"
+        :options="promiseOptions"
         optionLabel="label"
         optionValue="value"
       />
-      <div class="flex gap-4">
+      <FormKit
+        type="dropdown"
+        name="dropdown"
+        label="选择框"
+        validation="required"
+        :options="() => { return K_OPTIONS }"
+      />
+
+      <div class="flex flex-wrap gap-4">
         <FormKit
           v-if="!value?.PInputPassword"
           :type="text"