feat: PSelect 暂存

formkit.config.ts

@@ -1,6 +1,6 @@
 import { form } from '@/__fk-inputs__/inputs/form';
-import { PInputPassword } from '@/__fk-inputs__/inputs/input-password';
-import { PInputText } from '@/__fk-inputs__/inputs/input-text';
+import { PInputPassword } from '@/__fk-inputs__/inputs/p-input-password';
+import { PInputText } from '@/__fk-inputs__/inputs/p-input-text';
 import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons';
 import { autoAnimatePlugin } from '@formkit/auto-animate/vue';
 import type { FormKitOptions, FormKitPlugin } from '@formkit/core';
@@ -13,6 +13,7 @@ import { /* defaultConfig, */ bindings, plugin /* defaultConfig */ } from '@form
 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';
 
 const plugins: FormKitPlugin[] = [
   // createProPlugin(apiKey, { toggle }),
@@ -26,6 +27,7 @@ const plugins: FormKitPlugin[] = [
     form,
     PInputText,
     PInputPassword,
+    PSelect,
   }),
   // createLibraryPlugin(
   //   {

src/App.vue

@@ -1,12 +1,35 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 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 loading = ref(false);
+const cities = ref([
+  { name: 'New York', code: 'NY' },
+  { name: 'Rome', code: 'RM' },
+  { name: 'London', code: 'LDN' },
+  { name: 'Istanbul', code: 'IST' },
+  { name: 'Paris', code: 'PRS' }
+]);
+const loadSelectedCity = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 2000);
+};
+const handleE = (eventName: string) => {
+  return (...args: any[]) => {
+    console.log('eventName :>> ', eventName);
+    console.log('args :>> ', args);
+  };
+};
+
 </script>
 
 <template>
-  <div class="page-wrapper">
+  <div class="page-wrapper p-4">
     <ZodForm v-if="false" />
     <TutorialForm v-if="false" />
 
@@ -17,10 +40,23 @@ import ZodForm from './zod-form/index.vue';
     <!-- </div> -->
 
     <div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white mt-4">
-      <FloatLabel>
-        <label for="username">用户名</label>
-        <InputText id="username"></InputText>
-      </FloatLabel>
+      <Select
+        v-model="selectedCity"
+        :placeholder="loading ? 'Loading' : 'Select a City'"
+        :loading="loading"
+        class="w-full md:w-56"
+        :options="cities"
+        optionLabel="name"
+        optionValue="code"
+        @input="(e: any) => handleE('input')(e)"
+        @value-change="(e) => handleE('value-change')(e)"
+      ></Select>
+      <Button
+        id="load-selected-city"
+        label="Load Selected City"
+        @click="loadSelectedCity"
+      />
+      {{ { selectedCity } }}
     </div>
   </div>
 </template>

src/__fk-inputs__/inputs/p-input-password.ts

@@ -12,11 +12,9 @@ const input = createSection('input', () => ({
   props: {
     invalid: '$state.invalid',
     disabled: '$disabled',
-    // name: '$node.name',
-    // inputProps: {}
+    modelValue: '$_value',
     onInput: '$handlers.DOMInput',
     onBlur: '$handlers.blur',
-    modelValue: '$_value',
     inputId: '$id',
     fluid: true,
   },

src/__fk-inputs__/inputs/p-input-text.ts

@@ -14,9 +14,9 @@ const input = createSection('input', () => ({
     type: '$type',
     disabled: '$disabled',
     name: '$node.name',
+    modelValue: '$_value',
     onInput: '$handlers.DOMInput',
     onBlur: '$handlers.blur',
-    modelValue: '$_value',
     id: '$id',
     fluid: true,
   },

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

@@ -0,0 +1,45 @@
+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/all-custom/all-custom.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { FormKitNode } from '@formkit/core';
-import { text, group } from '@formkit/inputs';
+import { text } from '@formkit/inputs';
 import Swal from 'sweetalert2';
 
 async function submit(formData: Record<string, any>, formNode: FormKitNode) {
@@ -66,6 +66,18 @@ async function submit(formData: Record<string, any>, formNode: FormKitNode) {
         toggleMask
         :feedback="false"
       />
+      <FormKit
+        type="PSelect"
+        name="PSelect"
+        label="选择框"
+        validation="required"
+        :options="[
+          'Option 1',
+          'Option 2',
+          'Option 3',
+        ]"
+        value="Option 2"
+      />
       <FormKit
         v-if="!value?.PInputPassword"
         :type="text"