You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
958 B
51 lines
958 B
import { renderSlot } from "vue"
|
|
|
|
interface IProps {
|
|
value : object
|
|
}
|
|
|
|
type ContextValue = {
|
|
Provider : any
|
|
useContext : () => any
|
|
Consumer : any
|
|
}
|
|
|
|
type TCreateContext = (key : string) => ContextValue
|
|
|
|
export const createContext : TCreateContext = (key) => {
|
|
const Provider = {
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
setup(props : IProps) {
|
|
const slots = useSlots()
|
|
provide(key, props.value)
|
|
const FN : () => VNode = () => renderSlot(slots, 'default')
|
|
return () : VNode => h(FN)
|
|
}
|
|
}
|
|
const useContext : () => any = () : any => {
|
|
return inject(key) as any
|
|
}
|
|
const Consumer = {
|
|
setup() {
|
|
const slots = useSlots()
|
|
const data = useContext()
|
|
const FN : () => VNode = () => renderSlot(slots, 'default', data)
|
|
return () : VNode => h(FN, {})
|
|
}
|
|
}
|
|
|
|
const FnP = Provider
|
|
const FnC = Consumer
|
|
|
|
const value: ContextValue = {
|
|
Provider: FnP,
|
|
useContext,
|
|
Consumer: FnC,
|
|
}
|
|
return value
|
|
}
|