From 9b78830313b230ce17d465e411d1f9c02b6592cc 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 16:21:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20PSelect=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=B7=BB=E5=8A=A0=20value=20?=
 =?UTF-8?q?=E6=8F=92=E6=A7=BD=E6=94=AF=E6=8C=81=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=E5=8A=A0=E8=BD=BD=E5=92=8C=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=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                           |  8 +++++++-
 src/__fk-inputs__/inputs/p-select.tsx | 24 ++++++++++++++++++++----
 src/all-custom/all-custom.vue         |  1 +
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f33c87d..eac8399 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@ import AllCustom from './all-custom/all-custom.vue';
 import TutorialForm from './tutorial-form/index.vue';
 import ZodForm from './zod-form/index.vue';
 
-const selectedCity = ref();
+const selectedCity = ref('NY');
 const loading = ref(false);
 const cities = ref([
   { name: 'New York', code: 'NY' },
@@ -53,6 +53,12 @@ const handleE = (eventName: string) => {
         @change="(e) => handleE('change')(e)"
         @blur="(e) => handleE('blur')(e)"
       ></Select>
+      <Select
+        :options="cities"
+        class="w-full md:w-56"
+      >
+        <template #value="slotProps">{{ slotProps.value }}</template>
+      </Select>
       <Button
         id="load-selected-city"
         label="Load Selected City"
diff --git a/src/__fk-inputs__/inputs/p-select.tsx b/src/__fk-inputs__/inputs/p-select.tsx
index 77c7670..8f92d6b 100644
--- a/src/__fk-inputs__/inputs/p-select.tsx
+++ b/src/__fk-inputs__/inputs/p-select.tsx
@@ -1,8 +1,8 @@
 import type { FormKitFrameworkContext, FormKitTypeDefinition } from '@formkit/core';
 import type { FormKitInputs } from '@formkit/inputs';
 import { createSection, label, outer } from '@formkit/inputs';
-import PrimevueSelect, { type SelectEmitsOptions } from 'primevue/select';
-import { defineComponent, markRaw, ref } from 'vue';
+import PrimevueSelect, { type SelectEmitsOptions, type SelectSlots } from 'primevue/select';
+import { computed, defineComponent, markRaw, ref } from 'vue';
 import { floatLabel } from '../sections/floatLabel';
 import { messages } from '../sections/messages';
 
@@ -18,6 +18,7 @@ type PrimevueSelectListeners = {
 const PSelectComp = defineComponent(
   (vueProps: { context: FormKitFrameworkContext }) => {
     const formkitContext = vueProps.context;
+    const primevueSelectInstance = ref<Record<string, any> | undefined>();
     const listeners: PrimevueSelectListeners = {
       'onUpdate:modelValue': (value: any) => {
         formkitContext.node.input(value);
@@ -56,12 +57,23 @@ const PSelectComp = defineComponent(
 
     loadOptions(); // 立即加载options
 
+    const valueSlot = computed(() => {
+      if (primevueSelectInstance.value?.label === 'p-emptylabel' && !!formkitContext._value) {
+        return (slotProps => {
+          return slotProps.value as never;
+        }) satisfies SelectSlots['value'];
+      } else {
+        return undefined;
+      }
+    });
+
     return () => {
       return (
         <PrimevueSelect
+          ref={primevueSelectInstance}
           labelId={formkitContext.id}
           fluid
-          invalid={formkitContext.state.invalid}
+          invalid={formkitContext.state.invalid || valueSlot.value !== undefined}
           disabled={!!formkitContext.disabled}
           loading={loading.value}
           options={poptions.value}
@@ -69,7 +81,11 @@ const PSelectComp = defineComponent(
           optionLabel={formkitContext.optionLabel as never}
           optionValue={formkitContext.optionValue as never}
           {...listeners}
-        />
+        >
+          {{
+            value: valueSlot.value,
+          }}
+        </PrimevueSelect>
       );
     };
   },
diff --git a/src/all-custom/all-custom.vue b/src/all-custom/all-custom.vue
index 0ba5166..4dc8f0c 100644
--- a/src/all-custom/all-custom.vue
+++ b/src/all-custom/all-custom.vue
@@ -87,6 +87,7 @@ const promiseOptions = new Promise<typeof K_OPTIONS>(resolve => {
         :options="K_OPTIONS"
         optionLabel="label"
         optionValue="value"
+        value="数据的值不在options里"
       />
       <FormKit
         type="PSelect"