feat: 更新 PSelect 组件，支持异步选项加载并优化 blur 事件处理

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

@@ -2,7 +2,7 @@ import type { FormKitFrameworkContext, FormKitTypeDefinition } from '@formkit/co
 import type { FormKitInputs } from '@formkit/inputs';
 import { createSection, label, outer } from '@formkit/inputs';
 import PrimevueSelect, { type SelectEmitsOptions } from 'primevue/select';
-import { defineComponent, markRaw } from 'vue';
+import { defineComponent, markRaw, ref } from 'vue';
 import { floatLabel } from '../sections/floatLabel';
 import { messages } from '../sections/messages';
 
@@ -21,14 +21,23 @@ const PSelectComp = defineComponent(
         formkitContext.node.input(value);
       },
       'onBlur': async e => {
-        setTimeout(() => formkitContext.handlers.blur.call(undefined, e as never), 20);
+        setTimeout(
+          () => formkitContext.handlers.blur.call(undefined, e as never),
+          166, // 因为会触发两次。所以让blur事件延迟一点，可以考虑优化。
+        );
       },
-      /* https://formkit.com/essentials/inputs#debouncing
-       * The default debounce delay is 20 milliseconds and can be adjusted with the delay prop or config option.
-       * 延迟 prop 的默认值是 20 毫秒。然而，group 和 list 输入默认使用 0 毫秒，以防止防抖延迟在每个深度级别“累积”。
-       * 不过好像不是这个造成的`blur`比`change`先触发。
-       */
     };
+    const poptions = ref();
+    const loading = ref(true);
+    if (formkitContext.options instanceof Promise) {
+      formkitContext.options.then((res: any) => {
+        poptions.value = res;
+        loading.value = false;
+      });
+    } else {
+      poptions.value = formkitContext.options;
+      loading.value = false;
+    }
 
     return () => {
       return (
@@ -37,8 +46,11 @@ const PSelectComp = defineComponent(
           fluid
           invalid={formkitContext.state.invalid}
           disabled={!!formkitContext.disabled}
-          options={formkitContext.options}
+          loading={loading.value}
+          options={poptions.value}
           modelValue={formkitContext._value}
+          optionLabel={formkitContext.optionLabel as never}
+          optionValue={formkitContext.optionValue as never}
           {...listeners}
         />
       );
@@ -69,16 +81,19 @@ export const PSelect: FormKitTypeDefinition = {
     ),
     messages(),
   ),
-  props: ['options'],
+  props: ['options', 'optionLabel', 'optionValue'],
   // schemaMemoKey: 'nnvujvlf2xr', // Math.random().toString(36).substring(2, 15)
 };
 
+type OptionsItem = Record<string, any>;
+type OptionsType = Array<OptionsItem>;
+
 declare module '@formkit/inputs' {
   // https://formkit.com/essentials/custom-inputs#typescript-support
   interface FormKitInputProps<Props extends FormKitInputs<Props>> {
     PSelect: {
       type: 'PSelect';
-      options: any;
+      options: OptionsType | Promise<OptionsType>;
     };
   }
 }

src/all-custom/all-custom.vue

@@ -17,6 +17,19 @@ async function submit(formData: Record<string, any>, formNode: FormKitNode) {
     timer: 1500
   })
 }
+
+const K_OPTIONS = [
+  { label: 'Option 1', value: 'Value 1' },
+  { 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);
+  });
+};
 </script>
 
 <template>
@@ -71,47 +84,55 @@ async function submit(formData: Record<string, any>, formNode: FormKitNode) {
         name="PSelect"
         label="选择框"
         validation="required"
-        :options="[
-          'Option 1',
-          'Option 2',
-          'Option 3',
-        ]"
-        valuee="Option 2"
+        :options="K_OPTIONS"
+        optionLabel="label"
+        optionValue="value"
       />
       <FormKit
-        v-if="!value?.PInputPassword"
-        :type="text"
-        :preserve="false"
-        name="customType"
-        value="this input will display if the password is empty"
-      >
-        <!-- <template #label>
+        type="PSelect"
+        name="PSelect"
+        label="选择框"
+        validation="required"
+        :options="promiseOptions()"
+        optionLabel="label"
+        optionValue="value"
+      />
+      <div class="flex gap-4">
+        <FormKit
+          v-if="!value?.PInputPassword"
+          :type="text"
+          :preserve="false"
+          name="customType"
+          value="this input will display if the password is empty"
+        >
+          <!-- <template #label>
           <div>labelll</div>
         </template> -->
-      </FormKit>
-
-
-      <FormKit
-        type="group"
-        name="group"
-      >
-        <FormKit
-          type="text"
-          name="text-in-group-1"
-        >
         </FormKit>
-      </FormKit>
 
-      <FormKit
-        type="group"
-        name="group"
-      >
+
         <FormKit
-          type="text"
-          name="text-in-group-2"
+          type="group"
+          name="group"
         >
+          <FormKit
+            type="text"
+            name="text-in-group-1"
+          >
+          </FormKit>
         </FormKit>
-      </FormKit>
+
+        <FormKit
+          type="group"
+          name="group"
+        >
+          <FormKit
+            type="text"
+            name="text-in-group-2"
+          >
+          </FormKit>
+        </FormKit>
+      </div>
 
       <Button
         label="Button"