UNPKG

mldong-flow-designer-plus

Version:

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

77 lines (76 loc) 2.9 kB
import { q as isFunction, p as isFocusable } from "./error-DEV4o0cD.js"; import { a as useEventListener } from "./index-rPPo0srK.js"; import { getCurrentInstance, shallowRef, ref, watch, unref, nextTick } from "vue"; function useFocusController(target, { disabled, beforeFocus, afterFocus, beforeBlur, afterBlur } = {}) { const { emit } = getCurrentInstance(); 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); return { isFocused, /** Avoid using wrapperRef and handleFocus/handleBlur together */ wrapperRef, handleFocus, handleBlur }; } function useComposition({ afterComposition, emit }) { const isComposing = ref(false); const handleCompositionStart = (event) => { emit == null ? void 0 : emit("compositionstart", event); isComposing.value = true; }; const handleCompositionUpdate = (event) => { emit == null ? void 0 : emit("compositionupdate", event); isComposing.value = true; }; 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 { useFocusController as a, useComposition as u }; //# sourceMappingURL=index-D5q4e_u4.js.map