From 7b7828d3840ac2f7d362c3da31adb8c472547d7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= Date: Fri, 6 Dec 2024 13:13:24 +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=94=AF=E6=8C=81=E5=BC=82=E6=AD=A5?= =?UTF-8?q?=E9=80=89=E9=A1=B9=E5=8A=A0=E8=BD=BD=E5=B9=B6=E4=BC=98=E5=8C=96?= =?UTF-8?q?=20blur=20=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 + src/__fk-inputs__/inputs/p-select.tsx | 35 +++++++---- src/all-custom/all-custom.vue | 85 +++++++++++++++++---------- 3 files changed, 81 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index 14e97fc..c803ca4 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,9 @@ - [sections](https://formkit.com/inputs/text#sections) - [sections](https://formkit.com/essentials/inputs#sections) - [useformkitcontext](https://formkit.com/inputs/form#useformkitcontext) +- [debouncing](https://formkit.com/essentials/inputs#debouncing) + + 延迟 prop 的默认值是 20 毫秒。然而，group 和 list 输入默认使用 0 毫秒，以防止防抖延迟在每个深度级别“累积”。 ## Custom Input diff --git a/src/__fk-inputs__/inputs/p-select.tsx b/src/__fk-inputs__/inputs/p-select.tsx index 7e4c513..b610912 100644 --- a/src/__fk-inputs__/inputs/p-select.tsx +++ b/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; +type OptionsType = Array; + declare module '@formkit/inputs' { // https://formkit.com/essentials/custom-inputs#typescript-support interface FormKitInputProps> { PSelect: { type: 'PSelect'; - options: any; + options: OptionsType | Promise; }; } } diff --git a/src/all-custom/all-custom.vue b/src/all-custom/all-custom.vue index 0963989..e19e7cf 100644 --- a/src/all-custom/all-custom.vue +++ b/src/all-custom/all-custom.vue @@ -17,6 +17,19 @@ async function submit(formData: Record, 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(resolve => { + setTimeout(() => { + resolve(K_OPTIONS); + }, 1000); + }); +};