sakura/src/hooks/mdc/useMDCTextField.ts

25 lines
624 B
TypeScript

import { ref, Ref, watch, onBeforeUnmount } from 'vue'
import { MDCTextField } from '@material/textfield'
const useMDCTextField = <El>(elementRef: El extends Element ? Element : Ref<Element | null>) => {
const textFieldRef: Ref<MDCTextField | null> = ref(null)
if (elementRef instanceof Element) {
textFieldRef.value = new MDCTextField(elementRef)
} else {
watch(elementRef, (element) => {
if (element) {
textFieldRef.value = new MDCTextField(element)
}
})
}
onBeforeUnmount(() => {
textFieldRef.value?.destroy()
})
return textFieldRef
}
export default useMDCTextField