UNPKG

mldong-flow-designer-plus

Version:

本项目包含了作者为B站课堂视频[《工作流设计器开发最佳实践》](https://www.bilibili.com/cheese/play/ss24484)的过程源码。教程中开发的组件也可用于实际生产环境中。以下是和使用文档和课程章节说明。 ## 实战项目 [演示地址](https://flow-pro.mldong.com/)

101 lines (100 loc) 3.27 kB
import { getCurrentInstance, shallowRef, ref, watch, onMounted, nextTick } from "vue"; import { a as useEventListener } from "./index-B5MEhWj_.js"; import { o as isElement, g as isFunction } from "./install-La2G4dPY.js"; function useFocusController(target, { 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 (cancelFocus || isFocused.value) 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 (cancelBlur || event.relatedTarget && ((_a = wrapperRef.value) == null ? void 0 : _a.contains(event.relatedTarget))) return; isFocused.value = false; emit("blur", event); afterBlur == null ? void 0 : afterBlur(); }; const handleClick = () => { var _a, _b; if (((_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, (el) => { if (el) { el.setAttribute("tabindex", "-1"); } }); useEventListener(wrapperRef, "focus", handleFocus, true); useEventListener(wrapperRef, "blur", handleBlur, true); useEventListener(wrapperRef, "click", handleClick, true); if (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 }; //# sourceMappingURL=index-BVZ8Smzo.js.map