feat: 在 PSelect 组件中添加 blur 事件处理，优化输入交互体验

src/App.vue

@@ -51,6 +51,7 @@ const handleE = (eventName: string) => {
         @input="(e: any) => handleE('input')(e)"
         @value-change="(e) => handleE('value-change')(e)"
         @change="(e) => handleE('change')(e)"
+        @blur="(e) => handleE('blur')(e)"
       ></Select>
       <Button
         id="load-selected-city"

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

@@ -1,60 +1,62 @@
 import type { FormKitFrameworkContext, FormKitTypeDefinition } from '@formkit/core';
 import type { FormKitInputs } from '@formkit/inputs';
 import { createSection, label, outer } from '@formkit/inputs';
-import PrimevueSelect, { type SelectChangeEvent } from 'primevue/select';
-import { markRaw, ref, type FunctionalComponent } from 'vue';
+import PrimevueSelect, { type SelectEmitsOptions } from 'primevue/select';
+import { defineComponent, markRaw } from 'vue';
 import { floatLabel } from '../sections/floatLabel';
 import { messages } from '../sections/messages';
 
-// https://cn.vuejs.org/guide/extras/render-function#functional-components
-const FComponent: FunctionalComponent<{ context: FormKitFrameworkContext }> = (vueProps, vueContext) => {
-  const formkitContext = vueProps.context;
-  // console.debug(`vueContext :>> `, vueContext);
-  // console.debug(`formkitContext :>> `, formkitContext);
-
-  // const count = ref(0);
-  // count.value += 1;
-  // console.debug(`count.value :>> `, count.value);
-
-  const listeners = {
-    'onChange': (_event: SelectChangeEvent) => {
-      // formkitContext.node.input(event.value);
-    },
-    'onUpdate:modelValue': (value: any) => {
-      formkitContext.node.input(value);
-      console.debug(`###111value :>> `, value);
-    },
-    'onBlur': (e: any) => {
-      setTimeout(() => {
-        formkitContext.handlers.blur.call(undefined, e);
-      }, 20);
-      /* The default debounce delay is 20 milliseconds and can be adjusted with the delay prop or config option.
-       * https://formkit.com/essentials/inputs#debouncing
-       */
-    },
-  };
-  return (
-    <PrimevueSelect
-      labelId={formkitContext.id}
-      fluid
-      invalid={formkitContext.state.invalid}
-      disabled={!!formkitContext.disabled}
-      options={formkitContext.options}
-      modelValue={formkitContext._value}
-      {...listeners}
-    />
-  );
+type PrimevueSelectListeners = {
+  // 'onFocus': SelectEmitsOptions['focus'];
+  'onUpdate:modelValue': SelectEmitsOptions['update:modelValue'];
+  // 'onChange': SelectEmitsOptions['change'];
+  'onBlur': SelectEmitsOptions['blur'];
 };
-FComponent.props = ['context'];
+
+const PSelectComp = defineComponent(
+  (vueProps: { context: FormKitFrameworkContext }) => {
+    const formkitContext = vueProps.context;
+    const listeners: PrimevueSelectListeners = {
+      'onUpdate:modelValue': (value: any) => {
+        formkitContext.node.input(value);
+      },
+      'onBlur': async e => {
+        setTimeout(() => formkitContext.handlers.blur.call(undefined, e as never), 20);
+      },
+      /* 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`先触发。
+       */
+    };
+
+    return () => {
+      return (
+        <PrimevueSelect
+          labelId={formkitContext.id}
+          fluid
+          invalid={formkitContext.state.invalid}
+          disabled={!!formkitContext.disabled}
+          options={formkitContext.options}
+          modelValue={formkitContext._value}
+          {...listeners}
+        />
+      );
+    };
+  },
+  // https://cn.vuejs.org/api/general#definecomponent
+  // 目前仍然需要手动声明运行时的 props
+  // 在将来，我们计划提供一个 Babel 插件，自动推断并注入运行时 props (就像在单文件组件中的 defineProps 一样)，以便省略运行时 props 的声明。
+  {
+    props: ['context'],
+  },
+);
 
 const input = createSection('input', () => ({
-  $cmp: markRaw(FComponent) as never,
+  $cmp: markRaw(PSelectComp) as never,
   bind: '$attrs',
   props: {
     context: '$node.context',
-    // onBlur: '$handlers.blur',
-    // fluid: true,
-    // options: '$options',
   },
 }));
 

src/all-custom/all-custom.vue

@@ -71,14 +71,13 @@ 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="async () => {
-          return [
-            { label: 'Option 1', value: '1' },
-            { label: 'Option 2', value: '2' },
-            { label: 'Option 3', value: '3' },
-          ]
-        }" -->
       <FormKit
         v-if="!value?.PInputPassword"
         :type="text"