暂存。

src/App.vue

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

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

@@ -1,45 +0,0 @@
-import type { FormKitTypeDefinition } from '@formkit/core';
-import type { FormKitInputs } from '@formkit/inputs';
-import { createSection, label, outer } from '@formkit/inputs';
-import SchemaComponent from 'primevue/select';
-import { markRaw } from 'vue';
-import { floatLabel } from '../sections/floatLabel';
-import { messages } from '../sections/messages';
-
-const input = createSection('input', () => ({
-  $cmp: markRaw(SchemaComponent) as never,
-  bind: '$attrs',
-  props: {
-    invalid: '$state.invalid',
-    disabled: '$disabled',
-    modelValue: '$_value',
-    // onValueChange: '$handlers.DOMInput',
-    onBlur: '$handlers.blur',
-    id: '$id',
-    fluid: true,
-    options: '$options',
-  },
-}));
-
-export const PSelect: FormKitTypeDefinition = {
-  type: 'input',
-  schema: outer(
-    floatLabel(
-      input(), //
-      label('$label'),
-    ),
-    messages(),
-  ),
-  props: ['options'],
-  // schemaMemoKey: 'nnvujvlf2xr', // Math.random().toString(36).substring(2, 15)
-};
-
-declare module '@formkit/inputs' {
-  // https://formkit.com/essentials/custom-inputs#typescript-support
-  interface FormKitInputProps<Props extends FormKitInputs<Props>> {
-    PSelect: {
-      type: 'PSelect';
-      options: Array<any>;
-    };
-  }
-}

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

@@ -0,0 +1,82 @@
+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 { 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}
+    />
+  );
+};
+FComponent.props = ['context'];
+
+const input = createSection('input', () => ({
+  $cmp: markRaw(FComponent) as never,
+  bind: '$attrs',
+  props: {
+    context: '$node.context',
+    // onBlur: '$handlers.blur',
+    // fluid: true,
+    // options: '$options',
+  },
+}));
+
+export const PSelect: FormKitTypeDefinition = {
+  type: 'input',
+  schema: outer(
+    floatLabel(
+      input(), //
+      label('$label'),
+    ),
+    messages(),
+  ),
+  props: ['options'],
+  // schemaMemoKey: 'nnvujvlf2xr', // Math.random().toString(36).substring(2, 15)
+};
+
+declare module '@formkit/inputs' {
+  // https://formkit.com/essentials/custom-inputs#typescript-support
+  interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+    PSelect: {
+      type: 'PSelect';
+      options: any;
+    };
+  }
+}

src/all-custom/all-custom.vue

@@ -71,13 +71,14 @@ async function submit(formData: Record<string, any>, formNode: FormKitNode) {
         name="PSelect"
         label="选择框"
         validation="required"
-        :options="[
-          'Option 1',
-          'Option 2',
-          'Option 3',
-        ]"
-        value="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"