feat: 更新自定义切换组件,重命名为 headlessui-switch 并调整类型定义
This commit is contained in:
@ -2,7 +2,7 @@ import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formki
|
|||||||
import type { FormKitOptions } from '@formkit/core'
|
import type { FormKitOptions } from '@formkit/core'
|
||||||
import { createI18nPlugin, zh } from '@formkit/i18n'
|
import { createI18nPlugin, zh } from '@formkit/i18n'
|
||||||
import { genesisIcons } from '@formkit/icons'
|
import { genesisIcons } from '@formkit/icons'
|
||||||
import { checkbox, createLibraryPlugin, form, group, list, number, range, submit, text, textarea } from '@formkit/inputs'
|
import { checkbox, createLibraryPlugin, form, group, list, number, range, submit, text, textarea, } from '@formkit/inputs'
|
||||||
import { createProPlugin, toggle } from '@formkit/pro'
|
import { createProPlugin, toggle } from '@formkit/pro'
|
||||||
import * as defaultRules from '@formkit/rules'
|
import * as defaultRules from '@formkit/rules'
|
||||||
import { createThemePlugin } from '@formkit/themes'
|
import { createThemePlugin } from '@formkit/themes'
|
||||||
@ -10,12 +10,12 @@ import { createValidationPlugin } from '@formkit/validation'
|
|||||||
import { /* defaultConfig, */ bindings, createInput } from '@formkit/vue'
|
import { /* defaultConfig, */ bindings, createInput } from '@formkit/vue'
|
||||||
import { addAsteriskPlugin } from './formkit.addAsteriskPlugin'
|
import { addAsteriskPlugin } from './formkit.addAsteriskPlugin'
|
||||||
import { rootClasses } from "./formkit.config.theme"
|
import { rootClasses } from "./formkit.config.theme"
|
||||||
import FormKitToggle from "./src/headlessui-switch.vue";
|
import HeadlessuiToggle from "./src/headlessui-switch.vue";
|
||||||
|
|
||||||
|
|
||||||
const library = createLibraryPlugin({
|
const library = createLibraryPlugin({
|
||||||
text, form, submit, group, checkbox, range, list, number, textarea,
|
text, form, submit, group, checkbox, range, list, number, textarea,
|
||||||
mytoggle: createInput(FormKitToggle)
|
'headlessuiSwitch': createInput(HeadlessuiToggle)
|
||||||
})
|
})
|
||||||
const validation = createValidationPlugin(defaultRules)
|
const validation = createValidationPlugin(defaultRules)
|
||||||
const i18n = createI18nPlugin({ zh })
|
const i18n = createI18nPlugin({ zh })
|
||||||
|
@ -6,9 +6,9 @@ declare module '@formkit/inputs' {
|
|||||||
// https://formkit.com/essentials/custom-inputs#typescript-support
|
// https://formkit.com/essentials/custom-inputs#typescript-support
|
||||||
interface FormKitInputProps<Props extends FormKitInputs<Props>> {
|
interface FormKitInputProps<Props extends FormKitInputs<Props>> {
|
||||||
// This key and the `type` should match:
|
// This key and the `type` should match:
|
||||||
'mytoggle': {
|
'headlessui-switch': {
|
||||||
// Define your input `type`:
|
// Define your input `type`:
|
||||||
type: 'mytoggle',
|
type: 'headlessui-switch',
|
||||||
someProp: string,
|
someProp: string,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -21,9 +21,7 @@ declare module '@formkit/inputs' {
|
|||||||
import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
|
import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{ context: FormKitFrameworkContext; }>();
|
||||||
context: FormKitFrameworkContext;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
|
|
||||||
const value = computed({
|
const value = computed({
|
||||||
|
@ -148,7 +148,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
<FormKit
|
<FormKit
|
||||||
label="headlessui"
|
label="headlessui"
|
||||||
type="mytoggle"
|
type="headlessui-switch"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<FormKit
|
<FormKit
|
||||||
|
Reference in New Issue
Block a user