-
-
Notifications
You must be signed in to change notification settings - Fork 7k
/
VCheckbox.tsx
103 lines (87 loc) · 2.79 KB
/
VCheckbox.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
// Styles
import './VCheckbox.sass'
// Components
import { makeVCheckboxBtnProps, VCheckboxBtn } from './VCheckboxBtn'
import { makeVInputProps, VInput } from '@/components/VInput/VInput'
// Composables
import { useFocus } from '@/composables/focus'
import { useProxiedModel } from '@/composables/proxiedModel'
// Utilities
import { computed } from 'vue'
import { filterInputAttrs, genericComponent, getUid, omit, propsFactory, useRender } from '@/util'
// Types
import type { VSelectionControlSlots } from '../VSelectionControl/VSelectionControl'
import type { VInputSlots } from '@/components/VInput/VInput'
import type { GenericProps } from '@/util'
export type VCheckboxSlots = Omit<VInputSlots, 'default'> & VSelectionControlSlots
export const makeVCheckboxProps = propsFactory({
...makeVInputProps(),
...omit(makeVCheckboxBtnProps(), ['inline']),
}, 'VCheckbox')
export const VCheckbox = genericComponent<new <T>(
props: {
modelValue?: T | null
'onUpdate:modelValue'?: (value: T | null) => void
},
slots: VCheckboxSlots,
) => GenericProps<typeof props, typeof slots>>()({
name: 'VCheckbox',
inheritAttrs: false,
props: makeVCheckboxProps(),
emits: {
'update:modelValue': (value: any) => true,
'update:focused': (focused: boolean) => true,
},
setup (props, { attrs, slots }) {
const model = useProxiedModel(props, 'modelValue')
const { isFocused, focus, blur } = useFocus(props)
const uid = getUid()
const id = computed(() => props.id || `checkbox-${uid}`)
useRender(() => {
const [rootAttrs, controlAttrs] = filterInputAttrs(attrs)
const inputProps = VInput.filterProps(props)
const checkboxProps = VCheckboxBtn.filterProps(props)
return (
<VInput
class={[
'v-checkbox',
props.class,
]}
{ ...rootAttrs }
{ ...inputProps }
v-model={ model.value }
id={ id.value }
focused={ isFocused.value }
style={ props.style }
>
{{
...slots,
default: ({
id,
messagesId,
isDisabled,
isReadonly,
isValid,
}) => (
<VCheckboxBtn
{ ...checkboxProps }
id={ id.value }
aria-describedby={ messagesId.value }
disabled={ isDisabled.value }
readonly={ isReadonly.value }
{ ...controlAttrs }
error={ isValid.value === false }
v-model={ model.value }
onFocus={ focus }
onBlur={ blur }
v-slots={ slots }
/>
),
}}
</VInput>
)
})
return {}
},
})
export type VCheckbox = InstanceType<typeof VCheckbox>