mldong-flow-designer-plus
Version:
本项目包含了作者为B站课堂视频[《工作流设计器开发最佳实践》](https://www.bilibili.com/cheese/play/ss24484)的过程源码。教程中开发的组件也可用于实际生产环境中。以下是和使用文档和课程章节说明。 ## 实战项目 [演示地址](https://flow-pro.mldong.com/)
415 lines (414 loc) • 11 kB
JavaScript
import { defineComponent, createVNode, renderSlot, h, isRef, computed, watch, onScopeDispose, getCurrentInstance, ref, nextTick, onMounted } from "vue";
import { N as NOOP, b as buildProps, d as definePropType, u as useNamespace, e as isBoolean, t as throwError, h as isClient, p as defaultNamespace, q as useTimeoutFn } from "./install-La2G4dPY.js";
import { i as iconPropType } from "./icon-DV3tCSN7.js";
import { U as UPDATE_MODEL_EVENT } from "./event-DSz0kuqc.js";
import { h as hasClass, d as addClass, g as getStyle, r as removeClass, a as addUnit } from "./index-CLW2rQKZ.js";
import { g as getScrollBarWidth } from "./scroll-DwUi3pAD.js";
import { u as useZIndex } from "./index-CiiJvH0P.js";
import { u as useId } from "./index-CRwh6fag.js";
import { u as useGlobalConfig } from "./use-global-config-D79ZGLfx.js";
import { n as isUndefined } from "./index-BLhyZWKY.js";
const useSameTarget = (handleClick) => {
if (!handleClick) {
return { onClick: NOOP, onMousedown: NOOP, onMouseup: NOOP };
}
let mousedownTarget = false;
let mouseupTarget = false;
const onClick = (e) => {
if (mousedownTarget && mouseupTarget) {
handleClick(e);
}
mousedownTarget = mouseupTarget = false;
};
const onMousedown = (e) => {
mousedownTarget = e.target === e.currentTarget;
};
const onMouseup = (e) => {
mouseupTarget = e.target === e.currentTarget;
};
return { onClick, onMousedown, onMouseup };
};
var PatchFlags = /* @__PURE__ */ ((PatchFlags2) => {
PatchFlags2[PatchFlags2["TEXT"] = 1] = "TEXT";
PatchFlags2[PatchFlags2["CLASS"] = 2] = "CLASS";
PatchFlags2[PatchFlags2["STYLE"] = 4] = "STYLE";
PatchFlags2[PatchFlags2["PROPS"] = 8] = "PROPS";
PatchFlags2[PatchFlags2["FULL_PROPS"] = 16] = "FULL_PROPS";
PatchFlags2[PatchFlags2["HYDRATE_EVENTS"] = 32] = "HYDRATE_EVENTS";
PatchFlags2[PatchFlags2["STABLE_FRAGMENT"] = 64] = "STABLE_FRAGMENT";
PatchFlags2[PatchFlags2["KEYED_FRAGMENT"] = 128] = "KEYED_FRAGMENT";
PatchFlags2[PatchFlags2["UNKEYED_FRAGMENT"] = 256] = "UNKEYED_FRAGMENT";
PatchFlags2[PatchFlags2["NEED_PATCH"] = 512] = "NEED_PATCH";
PatchFlags2[PatchFlags2["DYNAMIC_SLOTS"] = 1024] = "DYNAMIC_SLOTS";
PatchFlags2[PatchFlags2["HOISTED"] = -1] = "HOISTED";
PatchFlags2[PatchFlags2["BAIL"] = -2] = "BAIL";
return PatchFlags2;
})(PatchFlags || {});
const overlayProps = buildProps({
mask: {
type: Boolean,
default: true
},
customMaskEvent: Boolean,
overlayClass: {
type: definePropType([
String,
Array,
Object
])
},
zIndex: {
type: definePropType([String, Number])
}
});
const overlayEmits = {
click: (evt) => evt instanceof MouseEvent
};
const BLOCK = "overlay";
var Overlay = defineComponent({
name: "ElOverlay",
props: overlayProps,
emits: overlayEmits,
setup(props, { slots, emit }) {
const ns = useNamespace(BLOCK);
const onMaskClick = (e) => {
emit("click", e);
};
const { onClick, onMousedown, onMouseup } = useSameTarget(props.customMaskEvent ? void 0 : onMaskClick);
return () => {
return props.mask ? createVNode("div", {
class: [ns.b(), props.overlayClass],
style: {
zIndex: props.zIndex
},
onClick,
onMousedown,
onMouseup
}, [renderSlot(slots, "default")], PatchFlags.STYLE | PatchFlags.CLASS | PatchFlags.PROPS, ["onClick", "onMouseup", "onMousedown"]) : h("div", {
class: props.overlayClass,
style: {
zIndex: props.zIndex,
position: "fixed",
top: "0px",
right: "0px",
bottom: "0px",
left: "0px"
}
}, [renderSlot(slots, "default")]);
};
}
});
const ElOverlay = Overlay;
const dialogContentProps = buildProps({
center: Boolean,
alignCenter: Boolean,
closeIcon: {
type: iconPropType
},
draggable: Boolean,
overflow: Boolean,
fullscreen: Boolean,
headerClass: String,
bodyClass: String,
footerClass: String,
showClose: {
type: Boolean,
default: true
},
title: {
type: String,
default: ""
},
ariaLevel: {
type: String,
default: "2"
}
});
const dialogContentEmits = {
close: () => true
};
const dialogProps = buildProps({
...dialogContentProps,
appendToBody: Boolean,
appendTo: {
type: definePropType([String, Object]),
default: "body"
},
beforeClose: {
type: definePropType(Function)
},
destroyOnClose: Boolean,
closeOnClickModal: {
type: Boolean,
default: true
},
closeOnPressEscape: {
type: Boolean,
default: true
},
lockScroll: {
type: Boolean,
default: true
},
modal: {
type: Boolean,
default: true
},
openDelay: {
type: Number,
default: 0
},
closeDelay: {
type: Number,
default: 0
},
top: {
type: String
},
modelValue: Boolean,
modalClass: String,
headerClass: String,
bodyClass: String,
footerClass: String,
width: {
type: [String, Number]
},
zIndex: {
type: Number
},
trapFocus: Boolean,
headerAriaLevel: {
type: String,
default: "2"
}
});
const dialogEmits = {
open: () => true,
opened: () => true,
close: () => true,
closed: () => true,
[UPDATE_MODEL_EVENT]: (value) => isBoolean(value),
openAutoFocus: () => true,
closeAutoFocus: () => true
};
const useLockscreen = (trigger, options = {}) => {
if (!isRef(trigger)) {
throwError("[useLockscreen]", "You need to pass a ref param to this function");
}
const ns = options.ns || useNamespace("popup");
const hiddenCls = computed(() => ns.bm("parent", "hidden"));
if (!isClient || hasClass(document.body, hiddenCls.value)) {
return;
}
let scrollBarWidth = 0;
let withoutHiddenClass = false;
let bodyWidth = "0";
const cleanup = () => {
setTimeout(() => {
if (typeof document === "undefined")
return;
if (withoutHiddenClass && document) {
document.body.style.width = bodyWidth;
removeClass(document.body, hiddenCls.value);
}
}, 200);
};
watch(trigger, (val) => {
if (!val) {
cleanup();
return;
}
withoutHiddenClass = !hasClass(document.body, hiddenCls.value);
if (withoutHiddenClass) {
bodyWidth = document.body.style.width;
addClass(document.body, hiddenCls.value);
}
scrollBarWidth = getScrollBarWidth(ns.namespace.value);
const bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
const bodyOverflowY = getStyle(document.body, "overflowY");
if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === "scroll") && withoutHiddenClass) {
document.body.style.width = `calc(100% - ${scrollBarWidth}px)`;
}
});
onScopeDispose(() => cleanup());
};
const useDialog = (props, targetRef) => {
var _a;
const instance = getCurrentInstance();
const emit = instance.emit;
const { nextZIndex } = useZIndex();
let lastPosition = "";
const titleId = useId();
const bodyId = useId();
const visible = ref(false);
const closed = ref(false);
const rendered = ref(false);
const zIndex = ref((_a = props.zIndex) != null ? _a : nextZIndex());
let openTimer = void 0;
let closeTimer = void 0;
const namespace = useGlobalConfig("namespace", defaultNamespace);
const style = computed(() => {
const style2 = {};
const varPrefix = `--${namespace.value}-dialog`;
if (!props.fullscreen) {
if (props.top) {
style2[`${varPrefix}-margin-top`] = props.top;
}
if (props.width) {
style2[`${varPrefix}-width`] = addUnit(props.width);
}
}
return style2;
});
const overlayDialogStyle = computed(() => {
if (props.alignCenter) {
return { display: "flex" };
}
return {};
});
function afterEnter() {
emit("opened");
}
function afterLeave() {
emit("closed");
emit(UPDATE_MODEL_EVENT, false);
if (props.destroyOnClose) {
rendered.value = false;
}
}
function beforeLeave() {
emit("close");
}
function open() {
closeTimer == null ? void 0 : closeTimer();
openTimer == null ? void 0 : openTimer();
if (props.openDelay && props.openDelay > 0) {
({ stop: openTimer } = useTimeoutFn(() => doOpen(), props.openDelay));
} else {
doOpen();
}
}
function close() {
openTimer == null ? void 0 : openTimer();
closeTimer == null ? void 0 : closeTimer();
if (props.closeDelay && props.closeDelay > 0) {
({ stop: closeTimer } = useTimeoutFn(() => doClose(), props.closeDelay));
} else {
doClose();
}
}
function handleClose() {
function hide(shouldCancel) {
if (shouldCancel)
return;
closed.value = true;
visible.value = false;
}
if (props.beforeClose) {
props.beforeClose(hide);
} else {
close();
}
}
function onModalClick() {
if (props.closeOnClickModal) {
handleClose();
}
}
function doOpen() {
if (!isClient)
return;
visible.value = true;
}
function doClose() {
visible.value = false;
}
function onOpenAutoFocus() {
emit("openAutoFocus");
}
function onCloseAutoFocus() {
emit("closeAutoFocus");
}
function onFocusoutPrevented(event) {
var _a2;
if (((_a2 = event.detail) == null ? void 0 : _a2.focusReason) === "pointer") {
event.preventDefault();
}
}
if (props.lockScroll) {
useLockscreen(visible);
}
function onCloseRequested() {
if (props.closeOnPressEscape) {
handleClose();
}
}
watch(() => props.modelValue, (val) => {
if (val) {
closed.value = false;
open();
rendered.value = true;
zIndex.value = isUndefined(props.zIndex) ? nextZIndex() : zIndex.value++;
nextTick(() => {
emit("open");
if (targetRef.value) {
targetRef.value.parentElement.scrollTop = 0;
targetRef.value.parentElement.scrollLeft = 0;
targetRef.value.scrollTop = 0;
}
});
} else {
if (visible.value) {
close();
}
}
});
watch(() => props.fullscreen, (val) => {
if (!targetRef.value)
return;
if (val) {
lastPosition = targetRef.value.style.transform;
targetRef.value.style.transform = "";
} else {
targetRef.value.style.transform = lastPosition;
}
});
onMounted(() => {
if (props.modelValue) {
visible.value = true;
rendered.value = true;
open();
}
});
return {
afterEnter,
afterLeave,
beforeLeave,
handleClose,
onModalClick,
close,
doClose,
onOpenAutoFocus,
onCloseAutoFocus,
onCloseRequested,
onFocusoutPrevented,
titleId,
bodyId,
closed,
style,
overlayDialogStyle,
rendered,
visible,
zIndex
};
};
export {
ElOverlay as E,
dialogEmits as a,
dialogContentProps as b,
dialogContentEmits as c,
dialogProps as d,
useSameTarget as e,
useDialog as u
};
//# sourceMappingURL=use-dialog-guxWUBji.js.map