From 603c1047fc27374fee24bc831901ed8ff65c28c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Fri, 6 Dec 2024 11:23:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=20PSelect=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=AD=E6=B7=BB=E5=8A=A0=20blur=20=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E5=A4=84=E7=90=86=EF=BC=8C=E4=BC=98=E5=8C=96=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                           |  1 +
 src/__fk-inputs__/inputs/p-select.tsx | 92 ++++++++++++++-------------
 src/all-custom/all-custom.vue         | 13 ++--
 3 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 150e086..f33c87d 100644
--- a/src/App.vue
+++ b/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"
diff --git a/src/__fk-inputs__/inputs/p-select.tsx b/src/__fk-inputs__/inputs/p-select.tsx
index bc3834a..7e4c513 100644
--- a/src/__fk-inputs__/inputs/p-select.tsx
+++ b/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',
   },
 }));
 
diff --git a/src/all-custom/all-custom.vue b/src/all-custom/all-custom.vue
index 320b655..0963989 100644
--- a/src/all-custom/all-custom.vue
+++ b/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"