45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { useField } from 'vee-validate'
|
|
import { computed, ref, toRef } from 'vue'
|
|
import type { ComponentInternalInstance } from 'vue'
|
|
|
|
interface Props {
|
|
id: string
|
|
label?: string
|
|
disabled?: boolean
|
|
modelValue?: boolean | string | number
|
|
trueValue?: boolean | string | number
|
|
falseValue?: boolean | string | number
|
|
required?: boolean
|
|
}
|
|
|
|
export default (props: Props, slots: ComponentInternalInstance['slots']) => {
|
|
const { checked, errorMessage, handleChange } = useField(
|
|
toRef(props, 'id'),
|
|
computed(() => ({
|
|
required: props.required,
|
|
})),
|
|
{
|
|
type: 'checkbox',
|
|
initialValue: props.modelValue,
|
|
checkedValue: props.trueValue ?? true,
|
|
uncheckedValue: props.falseValue ?? false,
|
|
syncVModel: true,
|
|
},
|
|
)
|
|
|
|
const focused = ref(false)
|
|
|
|
const active = computed(() => !props.disabled)
|
|
const invalid = computed(() => active.value && !!errorMessage.value)
|
|
const hasLabel = computed(() => !!props.label || slots.default)
|
|
|
|
return {
|
|
focused,
|
|
checked,
|
|
active,
|
|
invalid,
|
|
hasLabel,
|
|
handleChange,
|
|
}
|
|
}
|