From a6ccc16adb427ec55171cc0e830d4285a805bd1d 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 15:05:16 +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?=E9=85=8D=E7=BD=AE=EF=BC=8C=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BB=A5=E6=94=B9=E5=96=84=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                  |  3 ++-
 formkit.config.ts                     | 14 ++++++-----
 index.html                            |  3 +++
 src/__fk-inputs__/inputs/p-select.tsx | 35 ++++++++++++++++++++-------
 src/all-custom/all-custom.vue         | 30 ++++++++++++++---------
 5 files changed, 58 insertions(+), 27 deletions(-)

diff --git a/.env b/.env
index b2545d2..a7e00ae 100644
--- a/.env
+++ b/.env
@@ -1 +1,2 @@
-VITE_DEBUG_FORMKIT=true
\ No newline at end of file
+VITE_DEBUG_FORMKIT=true
+# https://formkit.com/pro
diff --git a/formkit.config.ts b/formkit.config.ts
index 2d2b570..b43a3c9 100644
--- a/formkit.config.ts
+++ b/formkit.config.ts
@@ -14,9 +14,10 @@ import type { App } from 'vue';
 import { addAsteriskPlugin } from './formkit.config.plugin.addAsteriskPlugin';
 import { debugPlugin } from './formkit.config.plugin.debug';
 import { PSelect } from '@/__fk-inputs__/inputs/p-select';
+import { createProPlugin, dropdown } from '@formkit/pro';
+import { rootClasses } from './formkit.config.theme';
 
 const plugins: FormKitPlugin[] = [
-  // createProPlugin(apiKey, { toggle }),
   // createLibraryPlugin(fkLibrary),
   createLibraryPlugin({
     text,
@@ -60,16 +61,17 @@ const plugins: FormKitPlugin[] = [
     },
   ),
 ];
-if (import.meta.env.VITE_DEBUG_FORMKIT === 'true') {
-  plugins.push(debugPlugin);
-}
 
-// const apiKey = 'fk-6cdd5192223'
+if (import.meta.env.VITE_FORMKIT_PRO_KEY)
+  plugins.unshift(createProPlugin(import.meta.env.VITE_FORMKIT_PRO_KEY, { dropdown }));
+
+if (import.meta.env.VITE_DEBUG_FORMKIT === 'true') plugins.push(debugPlugin);
+
 const config: FormKitOptions = {
   plugins,
   config: {
     // rootClasses: false,
-    // rootClasses,
+    rootClasses,
     // rootClasses: (sectionName: string, node: FormKitNode) => {
     //   console.debug(`sectionName :>> `, sectionName);
     // }
diff --git a/index.html b/index.html
index 39efa31..3211b6d 100644
--- a/index.html
+++ b/index.html
@@ -33,6 +33,8 @@
     <style>
       #app {
         min-height: 100vh;
+        max-width: 100vw;
+        overflow-x: hidden;
         display: flex;
         flex-direction: column;
       }
@@ -40,6 +42,7 @@
       @supports (min-height: 100dvh) {
         #app {
           min-height: 100dvh;
+          max-width: 100dvw;
         }
       }
 
diff --git a/src/__fk-inputs__/inputs/p-select.tsx b/src/__fk-inputs__/inputs/p-select.tsx
index b610912..77c7670 100644
--- a/src/__fk-inputs__/inputs/p-select.tsx
+++ b/src/__fk-inputs__/inputs/p-select.tsx
@@ -6,6 +6,8 @@ import { defineComponent, markRaw, ref } from 'vue';
 import { floatLabel } from '../sections/floatLabel';
 import { messages } from '../sections/messages';
 
+// https://formkit.com/inputs/dropdown
+
 type PrimevueSelectListeners = {
   // 'onFocus': SelectEmitsOptions['focus'];
   'onUpdate:modelValue': SelectEmitsOptions['update:modelValue'];
@@ -27,17 +29,32 @@ const PSelectComp = defineComponent(
         );
       },
     };
+    // [optionsLoader](https://github.com/formkit/formkit/blob/2d5387ba98597775cb2a752af65aee84bc438863/packages/inputs/src/features/options.ts#L125)
+
     const poptions = ref();
     const loading = ref(true);
-    if (formkitContext.options instanceof Promise) {
-      formkitContext.options.then((res: any) => {
-        poptions.value = res;
+
+    const loadOptions = async () => {
+      try {
+        let result;
+        if (formkitContext.options instanceof Promise) {
+          result = await formkitContext.options;
+        } else if (typeof formkitContext.options === 'function') {
+          const funcResult = await (formkitContext.options as Function).call(undefined);
+          result = funcResult instanceof Promise ? await funcResult : funcResult;
+        } else {
+          result = formkitContext.options;
+        }
+        poptions.value = result;
+      } catch (error) {
+        console.error('Failed to load options:', error);
+        poptions.value = [];
+      } finally {
         loading.value = false;
-      });
-    } else {
-      poptions.value = formkitContext.options;
-      loading.value = false;
-    }
+      }
+    };
+
+    loadOptions(); // 立即加载options
 
     return () => {
       return (
@@ -93,7 +110,7 @@ declare module '@formkit/inputs' {
   interface FormKitInputProps<Props extends FormKitInputs<Props>> {
     PSelect: {
       type: 'PSelect';
-      options: OptionsType | Promise<OptionsType>;
+      options: OptionsType | Promise<OptionsType> | (() => OptionsType | Promise<OptionsType>);
     };
   }
 }
diff --git a/src/all-custom/all-custom.vue b/src/all-custom/all-custom.vue
index e19e7cf..8476013 100644
--- a/src/all-custom/all-custom.vue
+++ b/src/all-custom/all-custom.vue
@@ -23,13 +23,13 @@ const K_OPTIONS = [
   { label: 'Option 2', value: 'Value 2' },
   { label: 'Option 3', value: 'Value 3' },
 ];
-const promiseOptions = () => {
-  return new Promise<typeof K_OPTIONS>(resolve => {
-    setTimeout(() => {
-      resolve(K_OPTIONS);
-    }, 1000);
-  });
-};
+const promiseOptions = new Promise<typeof K_OPTIONS>(resolve => {
+  setTimeout(() => resolve(K_OPTIONS), 1000);
+});
+/* const funcOptions = async () => {
+  await new Promise(r => setTimeout(r, 1000))
+  return K_OPTIONS;
+} */
 </script>
 
 <template>
@@ -81,7 +81,7 @@ const promiseOptions = () => {
       />
       <FormKit
         type="PSelect"
-        name="PSelect"
+        name="PSelect_1"
         label="选择框"
         validation="required"
         :options="K_OPTIONS"
@@ -90,14 +90,22 @@ const promiseOptions = () => {
       />
       <FormKit
         type="PSelect"
-        name="PSelect"
+        name="PSelect_2"
         label="选择框"
         validation="required"
-        :options="promiseOptions()"
+        :options="promiseOptions"
         optionLabel="label"
         optionValue="value"
       />
-      <div class="flex gap-4">
+      <FormKit
+        type="dropdown"
+        name="dropdown"
+        label="选择框"
+        validation="required"
+        :options="() => { return K_OPTIONS }"
+      />
+
+      <div class="flex flex-wrap gap-4">
         <FormKit
           v-if="!value?.PInputPassword"
           :type="text"