From 9161a5aaa3115cec4557175ce8aaf8fd03227e1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Thu, 21 Nov 2024 14:06:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=88=87=E6=8D=A2=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=20TypeScript=20=E6=94=AF=E6=8C=81=E5=B9=B6=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E5=B1=9E=E6=80=A7=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 formkit.config.ts         |  1 -
 src/headlessui-switch.vue | 31 +++++++++++++++++++++++--------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/formkit.config.ts b/formkit.config.ts
index b7fe9de..a4cd4a1 100644
--- a/formkit.config.ts
+++ b/formkit.config.ts
@@ -15,7 +15,6 @@ import FormKitToggle from "./src/headlessui-switch.vue";
 
 const library = createLibraryPlugin({
   text, form, submit, group, checkbox, range, list, number, textarea,
-
   mytoggle: createInput(FormKitToggle)
 })
 const validation = createValidationPlugin(defaultRules)
diff --git a/src/headlessui-switch.vue b/src/headlessui-switch.vue
index 9acca01..5424162 100644
--- a/src/headlessui-switch.vue
+++ b/src/headlessui-switch.vue
@@ -1,12 +1,30 @@
+<script lang="ts">
+import { FormKitFrameworkContext } from '@formkit/core';
+import type { FormKitInputs } from '@formkit/inputs';
+
+declare module '@formkit/inputs' {
+  // https://formkit.com/essentials/custom-inputs#typescript-support
+  interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+    // This key and the `type` should match:
+    'mytoggle': {
+      // Define your input `type`:
+      type: 'mytoggle',
+      someProp: string,
+    }
+  }
+}
+</script>
+
 <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 props = defineProps<{
+  context: FormKitFrameworkContext;
+}>();
+
 
 const value = computed({
   get: () => {
@@ -17,15 +35,12 @@ const value = computed({
   },
 });
 
-const label = props.context?.label;
-const name = props.context?.name;
-
 </script>
 
 <template>
-  <SwitchGroup>
+  <SwitchGroup data-switch-group-template-root>
     <div class="flex items-center">
-      <SwitchLabel class="mr-4">{{ label }}</SwitchLabel>
+      <SwitchLabel class="mr-4">{{ context?.label }}</SwitchLabel>
       <Switch
         v-model="value"
         :class='value ? "bg-blue-600" : "bg-gray-200"'