UNPKG

@wfrog/vc

Version:

vue3 组件库 vc

106 lines (101 loc) 3.5 kB
import { getCurrentInstance, shallowRef, ref, watch, unref, onMounted, nextTick } from 'vue'; import { c as useEventListener, g as isFocusable } from './CEClY-_T.mjs'; import { p as isElement, j as isFunction } from './E_WRn0OP.mjs'; function useFocusController(target, { disabled, beforeFocus, afterFocus, beforeBlur, afterBlur } = {}) { const instance = getCurrentInstance(); const { emit } = instance; const wrapperRef = shallowRef(); const isFocused = ref(false); const handleFocus = (event) => { const cancelFocus = isFunction(beforeFocus) ? beforeFocus(event) : false; if (unref(disabled) || isFocused.value || cancelFocus) return; isFocused.value = true; emit("focus", event); afterFocus == null ? void 0 : afterFocus(); }; const handleBlur = (event) => { var _a; const cancelBlur = isFunction(beforeBlur) ? beforeBlur(event) : false; if (unref(disabled) || event.relatedTarget && ((_a = wrapperRef.value) == null ? void 0 : _a.contains(event.relatedTarget)) || cancelBlur) return; isFocused.value = false; emit("blur", event); afterBlur == null ? void 0 : afterBlur(); }; const handleClick = (event) => { var _a, _b; if (unref(disabled) || isFocusable(event.target) || ((_a = wrapperRef.value) == null ? void 0 : _a.contains(document.activeElement)) && wrapperRef.value !== document.activeElement) return; (_b = target.value) == null ? void 0 : _b.focus(); }; watch([wrapperRef, () => unref(disabled)], ([el, disabled2]) => { if (!el) return; if (disabled2) { el.removeAttribute("tabindex"); } else { el.setAttribute("tabindex", "-1"); } }); useEventListener(wrapperRef, "focus", handleFocus, true); useEventListener(wrapperRef, "blur", handleBlur, true); useEventListener(wrapperRef, "click", handleClick, true); if (typeof process !== "undefined" && process.env.NODE_ENV === "test") { onMounted(() => { const targetEl = isElement(target.value) ? target.value : document.querySelector("input,textarea"); if (targetEl) { useEventListener(targetEl, "focus", handleFocus, true); useEventListener(targetEl, "blur", handleBlur, true); } }); } return { isFocused, wrapperRef, handleFocus, handleBlur }; } const isKorean = (text) => /([\uAC00-\uD7AF\u3130-\u318F])+/gi.test(text); function useComposition({ afterComposition, emit }) { const isComposing = ref(false); const handleCompositionStart = (event) => { emit == null ? void 0 : emit("compositionstart", event); isComposing.value = true; }; const handleCompositionUpdate = (event) => { var _a; emit == null ? void 0 : emit("compositionupdate", event); const text = (_a = event.target) == null ? void 0 : _a.value; const lastCharacter = text[text.length - 1] || ""; isComposing.value = !isKorean(lastCharacter); }; const handleCompositionEnd = (event) => { emit == null ? void 0 : emit("compositionend", event); if (isComposing.value) { isComposing.value = false; nextTick(() => afterComposition(event)); } }; const handleComposition = (event) => { event.type === "compositionend" ? handleCompositionEnd(event) : handleCompositionUpdate(event); }; return { isComposing, handleComposition, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd }; } export { useComposition as a, useFocusController as u };