feat: 更新 PSelect 组件，支持异步选项加载并优化配置，调整样式以改善用户体验

.env

@@ -1 +1,2 @@
-VITE_DEBUG_FORMKIT=true
+VITE_DEBUG_FORMKIT=true
+# https://formkit.com/pro

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);
     // }

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;
         }
       }
 

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) => {
+    const loadOptions = async () => {
-        poptions.value = res;
+      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>);
     };
   }
 }

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 = () => {
+const promiseOptions = new Promise<typeof K_OPTIONS>(resolve => {
-  return new Promise<typeof K_OPTIONS>(resolve => {
+  setTimeout(() => resolve(K_OPTIONS), 1000);
-    setTimeout(() => {
+});
-      resolve(K_OPTIONS);
+/* const funcOptions = async () => {
-    }, 1000);
+  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"