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

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"