-
-
Notifications
You must be signed in to change notification settings - Fork 35
/
checkboxIndicator.ts
69 lines (55 loc) · 2.06 KB
/
checkboxIndicator.ts
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
import { computed, defineComponent, h, toRefs } from 'vue'
import { useForwardRef } from '@oku-ui/use-composable'
import { Primitive, primitiveProps } from '@oku-ui/primitive'
import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
import { OkuPresence } from '@oku-ui/presence'
import type { ScopeCheckbox } from './utils'
import { getState, isIndeterminate, scopeCheckboxProps } from './utils'
import { useCheckboxInject } from './checkbox'
export type CheckboxIndicatorIntrinsicElement = ElementType<'span'>
export type CheckboxIndicatorElement = HTMLSpanElement
interface CheckboxIndicatorProps extends PrimitiveProps {
forceMount?: true
}
const checkboxIndicatorProps = {
forceMount: Boolean,
}
const INDICATOR_NAME = 'OkuCheckboxIndicator'
const checkboxIndicator = defineComponent({
name: INDICATOR_NAME,
props: {
...checkboxIndicatorProps,
...scopeCheckboxProps,
...primitiveProps,
},
setup(props, { attrs, slots }) {
const { forceMount } = toRefs(props)
const { ...indicatorAttrs } = attrs as CheckboxIndicatorIntrinsicElement
const forwardedRef = useForwardRef()
const context = useCheckboxInject(INDICATOR_NAME, props.scopeOkuCheckbox)
const originalReturn = () => h(OkuPresence, {
present: computed(() => forceMount.value || isIndeterminate(context.state.value) || context.state.value === true).value,
}, {
default: () => h(Primitive.span, {
'ref': forwardedRef,
'data-state': computed(() => getState(context.state.value)).value,
'data-disabled': context.disabled?.value ? '' : undefined,
...indicatorAttrs,
'asChild': props.asChild,
'style': { pointerEvents: 'none', ...attrs.style as any },
},
{
default: () => slots.default?.(),
}),
})
return originalReturn
},
})
// TODO: https://github.com/vuejs/core/pull/7444 after delete
export const OkuCheckboxIndicator = checkboxIndicator as typeof checkboxIndicator &
(new () => {
$props: ScopeCheckbox<Partial<CheckboxIndicatorElement>>
})
export type {
CheckboxIndicatorProps,
}