55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
<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:
|
|
'headlessui-switch': {
|
|
// Define your input `type`:
|
|
type: 'headlessui-switch',
|
|
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: FormKitFrameworkContext; }>();
|
|
|
|
|
|
const value = computed({
|
|
get: () => {
|
|
return props.context?._value;
|
|
},
|
|
set: (value) => {
|
|
props.context?.node.input(value);
|
|
},
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<SwitchGroup data-switch-group-template-root>
|
|
<div class="flex items-center">
|
|
<SwitchLabel class="mr-4">{{ context?.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>
|