feat: 添加自定义切换组件，更新 FormKit 配置以支持新类型

formkit.config.ts

@@ -7,11 +7,17 @@ import { createProPlugin, toggle } from '@formkit/pro'
 import * as defaultRules from '@formkit/rules'
 import { createThemePlugin } from '@formkit/themes'
 import { createValidationPlugin } from '@formkit/validation'
-import { /* defaultConfig, */ bindings } from '@formkit/vue'
+import { /* defaultConfig, */ bindings, createInput } from '@formkit/vue'
 import { addAsteriskPlugin } from './formkit.addAsteriskPlugin'
 import { rootClasses } from "./formkit.config.theme"
+import FormKitToggle from "./src/headlessui-switch.vue";
 
-const library = createLibraryPlugin({ text, form, submit, group, checkbox, range, list, number, textarea, })
+
+const library = createLibraryPlugin({
+  text, form, submit, group, checkbox, range, list, number, textarea,
+
+  mytoggle: createInput(FormKitToggle)
+})
 const validation = createValidationPlugin(defaultRules)
 const i18n = createI18nPlugin({ zh })
 const theme = undefined;

package.json

@@ -17,6 +17,7 @@
     "@formkit/themes": "latest",
     "@formkit/vue": "latest",
     "@formkit/zod": "^1.6.9",
+    "@headlessui/vue": "^1.7.23",
     "autoprefixer": "latest",
     "i18next": "^23.16.6",
     "postcss": "latest",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@formkit/zod':
         specifier: ^1.6.9
         version: 1.6.9(zod@3.23.8)
+      '@headlessui/vue':
+        specifier: ^1.7.23
+        version: 1.7.23(vue@3.5.13(typescript@5.6.3))
       autoprefixer:
         specifier: latest
         version: 10.4.20(postcss@8.4.49)
@@ -299,6 +302,12 @@ packages:
     peerDependencies:
       zod: ^3.0.0
 
+  '@headlessui/vue@1.7.23':
+    resolution: {integrity: sha512-JzdCNqurrtuu0YW6QaDtR2PIYCKPUWq28csDyMvN4zmGccmE7lz40Is6hc3LA4HFeCI7sekZ/PQMTNmn9I/4Wg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      vue: ^3.2.0
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -436,6 +445,14 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@tanstack/virtual-core@3.10.9':
+    resolution: {integrity: sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==}
+
+  '@tanstack/vue-virtual@3.10.9':
+    resolution: {integrity: sha512-KU2quiwJQpA0sdflpXw24bhW+x8PG+FlrSJK3Ilobim671HNn4ztLVWUCEz3Inei4dLYq+GW1MK9X6i6ZeirkQ==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
@@ -1208,6 +1225,11 @@ snapshots:
       '@formkit/core': 1.6.9
       zod: 3.23.8
 
+  '@headlessui/vue@1.7.23(vue@3.5.13(typescript@5.6.3))':
+    dependencies:
+      '@tanstack/vue-virtual': 3.10.9(vue@3.5.13(typescript@5.6.3))
+      vue: 3.5.13(typescript@5.6.3)
+
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -1303,6 +1325,13 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.27.2':
     optional: true
 
+  '@tanstack/virtual-core@3.10.9': {}
+
+  '@tanstack/vue-virtual@3.10.9(vue@3.5.13(typescript@5.6.3))':
+    dependencies:
+      '@tanstack/virtual-core': 3.10.9
+      vue: 3.5.13(typescript@5.6.3)
+
   '@types/estree@1.0.6': {}
 
   '@vitejs/plugin-vue@5.2.0(vite@5.4.11)(vue@3.5.13(typescript@5.6.3))':

src/headlessui-switch.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// https://www.ajahandideh.com/articles/formkit-custom-toggle
+// https://headlessui.com/v1/vue
+import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+  context: Object,
+});
+
+const value = computed({
+  get: () => {
+    return props.context?._value;
+  },
+  set: (value) => {
+    props.context?.node.input(value);
+  },
+});
+
+const label = props.context?.label;
+const name = props.context?.name;
+
+</script>
+
+<template>
+  <SwitchGroup>
+    <div class="flex items-center">
+      <SwitchLabel class="mr-4">{{ label }}</SwitchLabel>
+      <Switch
+        v-model="value"
+        :class='value ? "bg-blue-600" : "bg-gray-200"'
+        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+      >
+        <span
+          :class='value ? "translate-x-6" : "translate-x-1"'
+          class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
+        />
+      </Switch>
+    </div>
+  </SwitchGroup>
+</template>

src/tutorial-form/index.vue

@@ -146,6 +146,11 @@ onMounted(() => {
             :label="`如果清空 name 输入框，这个确认框及其值将被移除。`"
           />
 
+          <FormKit
+            label="headlessui"
+            type="mytoggle"
+          />
+
           <FormKit
             type="checkbox"
             name="flavors"