@gct-paas/core-web 0.1.4-dev.8 → 0.1.5-dev.0

package/es/modules/global-modal/src/hooks/useModal.mjs

@@ -0,0 +1,106 @@
+import { computed, getCurrentInstance, nextTick, onUnmounted, reactive, ref, toRaw, unref, watchEffect } from "vue";
+import { isEqual, isFunction } from "lodash-es";
+import { tryOnUnmounted } from "@vueuse/core";
+//#region src/modules/global-modal/src/hooks/useModal.ts
+var dataTransfer = reactive({});
+var visibleData = reactive({});
+/**
+* @description: Applicable to independent modal and call outside
+*/
+function useModal() {
+	const modal = ref(null);
+	const loaded = ref(false);
+	const uid = ref("");
+	function register(modalMethod, uuid) {
+		if (!getCurrentInstance()) throw new Error("useModal() can only be used inside setup() or functional components!");
+		uid.value = uuid || "";
+		onUnmounted(() => {
+			modal.value = null;
+			loaded.value = false;
+			dataTransfer[unref(uid)] = null;
+		});
+		if (unref(loaded) && modalMethod === unref(modal)) return;
+		modal.value = modalMethod;
+		loaded.value = true;
+		modalMethod.emitVisible = (visible, uid) => {
+			visibleData[uid] = visible;
+		};
+	}
+	const getInstance = () => {
+		const instance = unref(modal);
+		if (!instance) throw new Error("useModal instance is undefined!");
+		return instance;
+	};
+	return [register, {
+		setModalProps: (props) => {
+			getInstance()?.setModalProps(props);
+		},
+		getVisible: computed(() => {
+			return visibleData[~~unref(uid)];
+		}),
+		redoModalHeight: () => {
+			getInstance()?.redoModalHeight?.();
+		},
+		openModal: (visible = true, data, openOnSet = true) => {
+			getInstance()?.setModalProps({ visible });
+			const id = unref(uid);
+			if (openOnSet) {
+				dataTransfer[id] = null;
+				dataTransfer[id] = toRaw(data);
+				return;
+			}
+			if (!isEqual(toRaw(dataTransfer[id]), toRaw(data))) dataTransfer[id] = toRaw(data);
+		},
+		closeModal: () => {
+			getInstance()?.setModalProps({ visible: false });
+		}
+	}];
+}
+var useModalInner = (callbackFn) => {
+	const modalInstanceRef = ref(null);
+	const currentInstance = getCurrentInstance();
+	const uidRef = ref("");
+	const getInstance = () => {
+		const instance = unref(modalInstanceRef);
+		if (!instance) throw new Error("useModalInner instance is undefined!");
+		return instance;
+	};
+	const register = (modalInstance, uuid) => {
+		tryOnUnmounted(() => {
+			modalInstanceRef.value = null;
+		});
+		uidRef.value = uuid || "";
+		modalInstanceRef.value = modalInstance;
+		currentInstance?.emit("register", modalInstance, uuid);
+	};
+	watchEffect(() => {
+		const data = dataTransfer[unref(uidRef)];
+		if (!callbackFn || !isFunction(callbackFn)) return;
+		nextTick(() => {
+			callbackFn(data);
+		});
+	});
+	return [register, {
+		changeLoading: (loading = true) => {
+			getInstance()?.setModalProps({ loading });
+		},
+		getVisible: computed(() => {
+			return visibleData[~~unref(uidRef)];
+		}),
+		changeOkLoading: (loading = true) => {
+			getInstance()?.setModalProps({ confirmLoading: loading });
+		},
+		closeModal: () => {
+			getInstance()?.setModalProps({ visible: false });
+		},
+		setModalProps: (props) => {
+			getInstance()?.setModalProps(props);
+		},
+		redoModalHeight: () => {
+			const callRedo = getInstance()?.redoModalHeight;
+			callRedo?.();
+		}
+	}];
+};
+//#endregion
+export { useModal, useModalInner };

package/es/modules/global-modal/src/hooks/useModalContext.d.ts

@@ -0,0 +1,5 @@
+export interface ModalContextProps {
+    redoModalHeight: () => void;
+}
+export declare function createModalContext(context: ModalContextProps): void;
+export declare function useModalContext(): ModalContextProps | undefined;

package/es/modules/global-modal/src/hooks/useModalContext.mjs

@@ -0,0 +1,11 @@
+import { inject, provide } from "vue";
+//#region src/modules/global-modal/src/hooks/useModalContext.ts
+var key = Symbol();
+function createModalContext(context) {
+	return provide(key, context);
+}
+function useModalContext() {
+	return inject(key);
+}
+//#endregion
+export { createModalContext, useModalContext };

package/es/modules/global-modal/src/hooks/useModalDrag.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+export interface UseModalDragMoveContext {
+    draggable: Ref<boolean>;
+    destroyOnClose: Ref<boolean | undefined> | undefined;
+    visible: Ref<boolean>;
+}
+export declare function useModalDragMove(context: UseModalDragMoveContext): void;

package/es/modules/global-modal/src/hooks/useModalDrag.mjs

@@ -0,0 +1,72 @@
+import { unref, watchEffect } from "vue";
+import { useTimeoutFn } from "@vueuse/core";
+//#region src/modules/global-modal/src/hooks/useModalDrag.ts
+function useModalDragMove(context) {
+	const getStyle = (dom, attr) => {
+		return getComputedStyle(dom)[attr];
+	};
+	const drag = (wrap) => {
+		if (!wrap) return;
+		wrap.setAttribute("data-drag", unref(context.draggable));
+		const dialogHeaderEl = wrap.querySelector(".ant-modal-header");
+		const dragDom = wrap.querySelector(".ant-modal");
+		if (!dialogHeaderEl || !dragDom || !unref(context.draggable)) return;
+		dialogHeaderEl.style.cursor = "move";
+		dialogHeaderEl.onmousedown = (e) => {
+			if (!e) return;
+			const disX = e.clientX;
+			const disY = e.clientY;
+			const screenWidth = document.body.clientWidth;
+			const screenHeight = document.documentElement.clientHeight;
+			const dragDomWidth = dragDom.offsetWidth;
+			const dragDomheight = dragDom.offsetHeight;
+			const minDragDomLeft = dragDom.offsetLeft;
+			const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
+			const minDragDomTop = dragDom.offsetTop;
+			const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
+			const domLeft = getStyle(dragDom, "left");
+			const domTop = getStyle(dragDom, "top");
+			let styL = +domLeft;
+			let styT = +domTop;
+			if (domLeft.includes("%")) {
+				styL = +document.body.clientWidth * (+domLeft.replace(/%/g, "") / 100);
+				styT = +document.body.clientHeight * (+domTop.replace(/%/g, "") / 100);
+			} else {
+				styL = +domLeft.replace(/px/g, "");
+				styT = +domTop.replace(/px/g, "");
+			}
+			document.onmousemove = function(e) {
+				let left = e.clientX - disX;
+				let top = e.clientY - disY;
+				if (-left > minDragDomLeft) left = -minDragDomLeft;
+				else if (left > maxDragDomLeft) left = maxDragDomLeft;
+				if (-top > minDragDomTop) top = -minDragDomTop;
+				else if (top > maxDragDomTop) top = maxDragDomTop;
+				dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
+			};
+			document.onmouseup = () => {
+				document.onmousemove = null;
+				document.onmouseup = null;
+			};
+		};
+	};
+	const handleDrag = () => {
+		const dragWraps = document.querySelectorAll(".ant-modal-wrap");
+		for (const wrap of Array.from(dragWraps)) {
+			if (!wrap) continue;
+			const display = getStyle(wrap, "display");
+			const draggable = wrap.getAttribute("data-drag");
+			if (display !== "none") {
+				if (draggable === null || unref(context.destroyOnClose)) drag(wrap);
+			}
+		}
+	};
+	watchEffect(() => {
+		if (!unref(context.visible) || !unref(context.draggable)) return;
+		useTimeoutFn(() => {
+			handleDrag();
+		}, 30);
+	});
+}
+//#endregion
+export { useModalDragMove };

package/es/modules/global-modal/src/hooks/useModalFullScreen.d.ts

@@ -0,0 +1,11 @@
+import { Component, Ref } from 'vue';
+export interface UseFullScreenContext {
+    wrapClassName: Ref<string | undefined>;
+    modalWrapperRef: Ref<Component>;
+    extHeightRef: Ref<number>;
+}
+export declare function useFullScreen(context: UseFullScreenContext): {
+    getWrapClassName: import('vue').ComputedRef<string>;
+    handleFullScreen: (e: Event) => void;
+    fullScreenRef: Ref<boolean, boolean>;
+};

package/es/modules/global-modal/src/hooks/useModalFullScreen.mjs

@@ -0,0 +1,20 @@
+import { computed, ref, unref } from "vue";
+//#region src/modules/global-modal/src/hooks/useModalFullScreen.ts
+function useFullScreen(context) {
+	const fullScreenRef = ref(false);
+	const getWrapClassName = computed(() => {
+		const clsName = unref(context.wrapClassName) || "";
+		return unref(fullScreenRef) ? `fullscreen-modal ${clsName} ` : unref(clsName);
+	});
+	function handleFullScreen(e) {
+		e?.stopPropagation();
+		fullScreenRef.value = !unref(fullScreenRef);
+	}
+	return {
+		getWrapClassName,
+		handleFullScreen,
+		fullScreenRef
+	};
+}
+//#endregion
+export { useFullScreen };

package/es/modules/global-modal/src/index.css

@@ -0,0 +1,153 @@
+.vben.fullscreen-modal {
+  overflow: hidden;
+}
+.vben.fullscreen-modal .ant-modal {
+  inset: 0 !important;
+  width: 100% !important;
+  max-width: 100vw !important;
+  height: 100%;
+}
+.vben.fullscreen-modal .ant-modal-content {
+  height: 100%;
+}
+.vben .ant-modal {
+  width: 520px;
+  padding-bottom: 0;
+}
+.vben .ant-modal .ant-modal-body > .scrollbar {
+  height: 100%;
+  padding: 14px;
+}
+.vben .ant-modal .ant-modal-body > .scrollbar .scrollbar__wrap {
+  max-height: calc(88vh - 152px);
+}
+.vben .ant-modal-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+.vben .ant-modal-title .base-title {
+  cursor: move !important;
+}
+.vben .ant-modal .ant-modal-body {
+  height: calc(100% - 120px);
+  max-height: calc(88vh - 120px);
+  padding: 0;
+}
+.vben .ant-modal .ant-modal-body > .scrollbar > .scrollbar__bar.is-horizontal {
+  display: none;
+}
+.vben .ant-modal-large {
+  top: 60px;
+}
+.vben .ant-modal-large--mini {
+  top: 16px;
+}
+.vben .ant-modal-header {
+  padding: 16px;
+}
+.vben .ant-modal-content {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+.vben .ant-modal-footer {
+  padding: 16px;
+}
+.vben .ant-modal-footer button + button {
+  margin-left: 16px;
+}
+.vben .ant-modal-close {
+  outline: none;
+  font-weight: normal;
+}
+.vben .ant-modal-close-x {
+  display: inline-block;
+  width: 96px;
+  height: 56px;
+  line-height: 56px;
+}
+.vben .ant-modal-confirm-body .ant-modal-confirm-content > * {
+  color: #909399;
+}
+.vben .ant-modal-confirm-confirm.error .ant-modal-confirm-body > .anticon {
+  color: var(--gct-color-error);
+}
+.vben .ant-modal-confirm-btns .ant-btn:last-child {
+  margin-right: 0;
+}
+.vben .ant-modal-confirm-info .ant-modal-confirm-body > .anticon {
+  color: var(--gct-color-warning);
+}
+.vben .ant-modal-confirm-confirm.success .ant-modal-confirm-body > .anticon {
+  color: var(--gct-color-success);
+}
+.vben .ant-modal-confirm .ant-modal-body {
+  padding: 24px !important;
+}
+/* stylelint-disable-next-line media-feature-range-notation */
+@media screen and (max-height: 600px) {
+  .ant-modal {
+    top: 60px;
+  }
+}
+/* stylelint-disable-next-line media-feature-range-notation */
+@media screen and (max-height: 540px) {
+  .ant-modal {
+    top: 30px;
+  }
+}
+/* stylelint-disable-next-line media-feature-range-notation */
+@media screen and (max-height: 480px) {
+  .ant-modal {
+    top: 10px;
+  }
+}
+.options-field-modal.ant-modal .ant-modal-content .ant-modal-body {
+  padding-bottom: 0;
+}
+.ant-modal-footer .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+  margin-left: 16px;
+}
+.ant-modal {
+  max-height: 88vh;
+}
+.ant-modal .ant-modal-content {
+  border-radius: 4px;
+}
+.ant-modal.ant-modal-confirm .ant-modal-body {
+  padding: 16px;
+}
+.ant-modal .ant-modal-confirm-body > .anticon {
+  margin-right: 8px;
+}
+.ant-modal .ant-modal-confirm-body > .anticon .iconfont {
+  top: 4px !important;
+  font-size: 14px;
+}
+.ant-modal .ant-modal-confirm-body > .anticon > svg {
+  width: 14px;
+  height: 14px;
+  margin-top: 3px;
+}
+.ant-modal .ant-modal-confirm-body > .ant-modal-confirm-title {
+  color: #1a1d23;
+  font-size: 14px;
+  line-height: unset;
+}
+.ant-modal .ant-modal-confirm-body > .ant-modal-confirm-content {
+  color: #5a5f6b;
+  font-size: 12px;
+}
+.ant-modal .ant-modal-confirm-body .anticon + .ant-modal-confirm-title + .ant-modal-confirm-content {
+  margin-left: 22px;
+}
+.ant-modal .ant-modal-confirm-btns {
+  margin-top: 12px;
+}
+.ant-modal .ant-modal-confirm-btns > .ant-btn {
+  height: 24px;
+  padding: 2px 10px;
+  color: #384356;
+  line-height: 16px;
+}
+.ant-modal .ant-modal-confirm-btns > .ant-btn.ant-btn-primary {
+  color: #fff;
+}

package/es/modules/global-modal/src/props.d.ts

@@ -0,0 +1,156 @@
+import { PropType, CSSProperties, VNode } from 'vue';
+import { ModalWrapperProps } from './typing';
+import { ButtonProps, ButtonType } from 'ant-design-vue/es/button/buttonTypes';
+export declare const modalProps: {
+    visible: {
+        type: BooleanConstructor;
+    };
+    scrollTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: NumberConstructor;
+    };
+    outHeight: {
+        type: NumberConstructor;
+    };
+    minHeight: {
+        type: NumberConstructor;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    centered: {
+        type: BooleanConstructor;
+    };
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeFunc: PropType<() => Promise<boolean>>;
+};
+export declare const basicProps: {
+    visible: {
+        type: BooleanConstructor;
+    };
+    scrollTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: NumberConstructor;
+    };
+    outHeight: {
+        type: NumberConstructor;
+    };
+    minHeight: {
+        type: NumberConstructor;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    centered: {
+        type: BooleanConstructor;
+    };
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeFunc: PropType<() => Promise<boolean>>;
+} & {
+    defaultFullscreen: {
+        type: BooleanConstructor;
+    };
+    canFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapperFooterOffset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    helpMessage: PropType<string | string[]>;
+    useWrapper: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+    };
+    loadingTip: {
+        type: StringConstructor;
+    };
+    /**
+     * @description: Show close button
+     */
+    showCancelBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * @description: Show confirmation button
+     */
+    showOkBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapperProps: PropType<Partial<ModalWrapperProps>>;
+    afterClose: FunctionConstructor;
+    bodyStyle: PropType<CSSProperties>;
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closeIcon: PropType<VNode>;
+    confirmLoading: {
+        type: BooleanConstructor;
+    };
+    destroyOnClose: {
+        type: BooleanConstructor;
+    };
+    footer: PropType<VNode>;
+    getContainer: PropType<() => IObject>;
+    mask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskStyle: PropType<CSSProperties>;
+    okType: {
+        type: PropType<ButtonType>;
+        default: string;
+    };
+    okButtonProps: PropType<ButtonProps>;
+    cancelButtonProps: PropType<ButtonProps>;
+    title: {
+        type: StringConstructor;
+    };
+    visible: {
+        type: BooleanConstructor;
+    };
+    width: PropType<string | number>;
+    wrapClassName: {
+        type: StringConstructor;
+    };
+    zIndex: {
+        type: NumberConstructor;
+    };
+};

package/es/modules/global-modal/src/props.mjs

@@ -0,0 +1,87 @@
+var basicProps = Object.assign({}, {
+	visible: { type: Boolean },
+	scrollTop: {
+		type: Boolean,
+		default: true
+	},
+	height: { type: Number },
+	outHeight: { type: Number },
+	minHeight: { type: Number },
+	draggable: {
+		type: Boolean,
+		default: true
+	},
+	centered: { type: Boolean },
+	cancelText: {
+		type: String,
+		default: "sys.cancelText"
+	},
+	okText: {
+		type: String,
+		default: "sys.okText"
+	},
+	closeFunc: Function
+}, {
+	defaultFullscreen: { type: Boolean },
+	canFullscreen: {
+		type: Boolean,
+		default: true
+	},
+	wrapperFooterOffset: {
+		type: Number,
+		default: 0
+	},
+	helpMessage: [String, Array],
+	useWrapper: {
+		type: Boolean,
+		default: true
+	},
+	loading: { type: Boolean },
+	loadingTip: { type: String },
+	showCancelBtn: {
+		type: Boolean,
+		default: true
+	},
+	showOkBtn: {
+		type: Boolean,
+		default: true
+	},
+	wrapperProps: Object,
+	afterClose: Function,
+	bodyStyle: Object,
+	closable: {
+		type: Boolean,
+		default: true
+	},
+	closeIcon: Object,
+	confirmLoading: { type: Boolean },
+	destroyOnClose: { type: Boolean },
+	footer: Object,
+	getContainer: Function,
+	mask: {
+		type: Boolean,
+		default: true
+	},
+	maskClosable: {
+		type: Boolean,
+		default: false
+	},
+	keyboard: {
+		type: Boolean,
+		default: true
+	},
+	maskStyle: Object,
+	okType: {
+		type: String,
+		default: "primary"
+	},
+	okButtonProps: Object,
+	cancelButtonProps: Object,
+	title: { type: String },
+	visible: { type: Boolean },
+	width: [String, Number],
+	wrapClassName: { type: String },
+	zIndex: { type: Number }
+});
+//#endregion
+export { basicProps };