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

package/es/modules/global-modal/src/BasicModal.vue_vue_type_script_setup_true_name_BasicModal_lang.mjs

@@ -0,0 +1,201 @@
+import { basicProps } from "./props.mjs";
+import GlboalModal_default from "./components/GlboalModal.mjs";
+import ModalWrapper_default from "./components/ModalWrapper.vue.mjs";
+import ModalClose_default from "./components/ModalClose.vue.mjs";
+import ModalFooter_default from "./components/ModalFooter.vue.mjs";
+import ModalHeader_default from "./components/ModalHeader.vue.mjs";
+import { useFullScreen } from "./hooks/useModalFullScreen.mjs";
+import { computed, createBlock, createCommentVNode, createSlots, createVNode, defineComponent, getCurrentInstance, mergeProps, nextTick, openBlock, ref, renderSlot, toRef, unref, useAttrs, watch, watchEffect, withCtx } from "vue";
+import { isFunction, omit } from "lodash-es";
+import { deepMerge, useNamespace } from "@gct-paas/core";
+//#region src/modules/global-modal/src/BasicModal.vue?vue&type=script&setup=true&name=BasicModal&lang.ts
+var BasicModal_vue_vue_type_script_setup_true_name_BasicModal_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "BasicModal",
+	props: basicProps,
+	emits: [
+		"visible-change",
+		"height-change",
+		"cancel",
+		"ok",
+		"register",
+		"update:visible"
+	],
+	setup(__props, { emit: __emit }) {
+		const attrs = useAttrs();
+		const props = __props;
+		const emit = __emit;
+		const visibleRef = ref(false);
+		const propsRef = ref(null);
+		const modalWrapperRef = ref(null);
+		const ns = useNamespace("basic-modal");
+		const extHeightRef = ref(0);
+		const modalMethods = {
+			setModalProps,
+			emitVisible: void 0,
+			redoModalHeight: () => {
+				nextTick(() => {
+					if (unref(modalWrapperRef)) unref(modalWrapperRef).setModalHeight();
+				});
+			}
+		};
+		const instance = getCurrentInstance();
+		if (instance) emit("register", modalMethods, instance.uid);
+		const getMergeProps = computed(() => {
+			return {
+				...props,
+				height: props.outHeight ? props.outHeight : props.height && props.height + 120,
+				...unref(propsRef)
+			};
+		});
+		const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({
+			modalWrapperRef,
+			extHeightRef,
+			wrapClassName: ref(`vben ${toRef(getMergeProps.value, "wrapClassName")}`)
+		});
+		const getProps = computed(() => {
+			return {
+				...unref(getMergeProps),
+				visible: unref(visibleRef),
+				okButtonProps: void 0,
+				cancelButtonProps: void 0,
+				title: void 0,
+				wrapClassName: unref(getWrapClassName)
+			};
+		});
+		const getBindValue = computed(() => {
+			const attr = {
+				...attrs,
+				...unref(getMergeProps),
+				visible: unref(visibleRef)
+			};
+			attr["wrapClassName"] = `${attr?.["wrapClassName"] || ""} ${unref(getWrapClassName)}`;
+			if (unref(fullScreenRef)) return omit(attr, ["height", "title"]);
+			return omit(attr, "title");
+		});
+		const getWrapperHeight = computed(() => {
+			if (unref(fullScreenRef)) return void 0;
+			return unref(getProps).height;
+		});
+		watchEffect(() => {
+			visibleRef.value = !!props.visible;
+			fullScreenRef.value = !!props.defaultFullscreen;
+		});
+		const resetState = () => {
+			fullScreenRef.value = props.defaultFullscreen;
+		};
+		watch(() => unref(visibleRef), (v) => {
+			emit("visible-change", v);
+			emit("update:visible", v);
+			instance && modalMethods.emitVisible?.(v, instance.uid);
+			nextTick(() => {
+				if (props.scrollTop && v && unref(modalWrapperRef)) unref(modalWrapperRef).scrollTop();
+			});
+			if (props.destroyOnClose && v === false) resetState();
+		}, { immediate: false });
+		async function handleCancel(e) {
+			e?.stopPropagation();
+			if (e.target?.classList?.contains(ns.b() + "-close--custom")) return;
+			if (props.closeFunc && isFunction(props.closeFunc)) {
+				visibleRef.value = !await props.closeFunc();
+				return;
+			}
+			visibleRef.value = false;
+			emit("cancel", e);
+		}
+		/**
+		* @description: 设置modal参数
+		*/
+		function setModalProps(props) {
+			propsRef.value = deepMerge(unref(propsRef) || {}, props);
+			if (Reflect.has(props, "visible")) visibleRef.value = !!props.visible;
+			if (Reflect.has(props, "defaultFullscreen")) fullScreenRef.value = !!props.defaultFullscreen;
+		}
+		function handleOk(e) {
+			emit("ok", e);
+		}
+		function handleHeightChange(height) {
+			emit("height-change", height);
+		}
+		function handleExtHeight(height) {
+			extHeightRef.value = height;
+		}
+		function handleTitleDbClick(e) {
+			if (!props.canFullscreen) return;
+			e.stopPropagation();
+			handleFullScreen(e);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(GlboalModal_default), mergeProps(getBindValue.value, { onCancel: handleCancel }), createSlots({
+				default: withCtx(() => [
+					_ctx.$slots.closeIcon ? renderSlot(_ctx.$slots, "closeIcon", { key: 0 }) : createCommentVNode("", true),
+					_ctx.$slots.title ? renderSlot(_ctx.$slots, "title", { key: 1 }) : createCommentVNode("", true),
+					_ctx.$slots.footer ? renderSlot(_ctx.$slots, "footer", { key: 2 }) : createCommentVNode("", true),
+					createVNode(ModalWrapper_default, mergeProps({
+						ref_key: "modalWrapperRef",
+						ref: modalWrapperRef,
+						"use-wrapper": getProps.value.useWrapper,
+						"footer-offset": _ctx.wrapperFooterOffset,
+						"full-screen": unref(fullScreenRef),
+						loading: getProps.value.loading,
+						"loading-tip": getProps.value.loadingTip,
+						"min-height": getProps.value.minHeight,
+						height: getWrapperHeight.value,
+						visible: visibleRef.value,
+						"modal-footer-height": _ctx.footer !== void 0 && !_ctx.footer ? 0 : void 0
+					}, unref(omit)(getProps.value.wrapperProps, "visible", "height", "modalFooterHeight"), {
+						onExtHeight: handleExtHeight,
+						onHeightChange: handleHeightChange
+					}), {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+						_: 3
+					}, 16, [
+						"use-wrapper",
+						"footer-offset",
+						"full-screen",
+						"loading",
+						"loading-tip",
+						"min-height",
+						"height",
+						"visible",
+						"modal-footer-height"
+					])
+				]),
+				_: 2
+			}, [
+				!_ctx.$slots.closeIcon ? {
+					name: "closeIcon",
+					fn: withCtx(() => [createVNode(ModalClose_default, {
+						"can-fullscreen": getProps.value.canFullscreen,
+						"full-screen": unref(fullScreenRef),
+						onCancel: handleCancel,
+						onFullscreen: unref(handleFullScreen)
+					}, null, 8, [
+						"can-fullscreen",
+						"full-screen",
+						"onFullscreen"
+					])]),
+					key: "0"
+				} : void 0,
+				!_ctx.$slots.title ? {
+					name: "title",
+					fn: withCtx(() => [createVNode(ModalHeader_default, {
+						"help-message": getProps.value.helpMessage,
+						title: getMergeProps.value.title,
+						onDblclick: handleTitleDbClick
+					}, null, 8, ["help-message", "title"])]),
+					key: "1"
+				} : void 0,
+				!_ctx.$slots.footer ? {
+					name: "footer",
+					fn: withCtx(() => [createVNode(ModalFooter_default, mergeProps(getBindValue.value, {
+						onOk: handleOk,
+						onCancel: handleCancel
+					}), null, 16)]),
+					key: "2"
+				} : void 0
+			]), 1040);
+		};
+	}
+});
+//#endregion
+export { BasicModal_vue_vue_type_script_setup_true_name_BasicModal_lang_default as default };

package/es/modules/global-modal/src/components/GlboalModal.d.ts

@@ -0,0 +1,251 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    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: import('vue').PropType<() => Promise<boolean>>;
+} & {
+    defaultFullscreen: {
+        type: BooleanConstructor;
+    };
+    canFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapperFooterOffset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    helpMessage: import('vue').PropType<string | string[]>;
+    useWrapper: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+    };
+    loadingTip: {
+        type: StringConstructor;
+    };
+    showCancelBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showOkBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapperProps: import('vue').PropType<Partial<import('../typing').ModalWrapperProps>>;
+    afterClose: FunctionConstructor;
+    bodyStyle: import('vue').PropType<import('vue').CSSProperties>;
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closeIcon: import('vue').PropType<import('vue').VNode>;
+    confirmLoading: {
+        type: BooleanConstructor;
+    };
+    destroyOnClose: {
+        type: BooleanConstructor;
+    };
+    footer: import('vue').PropType<import('vue').VNode>;
+    getContainer: import('vue').PropType<() => IObject>;
+    mask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskStyle: import('vue').PropType<import('vue').CSSProperties>;
+    okType: {
+        type: import('vue').PropType<import('ant-design-vue/es/button').ButtonType>;
+        default: string;
+    };
+    okButtonProps: import('vue').PropType<import('ant-design-vue/es/button').ButtonProps>;
+    cancelButtonProps: import('vue').PropType<import('ant-design-vue/es/button').ButtonProps>;
+    title: {
+        type: StringConstructor;
+    };
+    visible: {
+        type: BooleanConstructor;
+    };
+    width: import('vue').PropType<string | number>;
+    wrapClassName: {
+        type: StringConstructor;
+    };
+    zIndex: {
+        type: NumberConstructor;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "cancel"[], "cancel", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    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: import('vue').PropType<() => Promise<boolean>>;
+} & {
+    defaultFullscreen: {
+        type: BooleanConstructor;
+    };
+    canFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapperFooterOffset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    helpMessage: import('vue').PropType<string | string[]>;
+    useWrapper: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+    };
+    loadingTip: {
+        type: StringConstructor;
+    };
+    showCancelBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showOkBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    wrapperProps: import('vue').PropType<Partial<import('../typing').ModalWrapperProps>>;
+    afterClose: FunctionConstructor;
+    bodyStyle: import('vue').PropType<import('vue').CSSProperties>;
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closeIcon: import('vue').PropType<import('vue').VNode>;
+    confirmLoading: {
+        type: BooleanConstructor;
+    };
+    destroyOnClose: {
+        type: BooleanConstructor;
+    };
+    footer: import('vue').PropType<import('vue').VNode>;
+    getContainer: import('vue').PropType<() => IObject>;
+    mask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maskStyle: import('vue').PropType<import('vue').CSSProperties>;
+    okType: {
+        type: import('vue').PropType<import('ant-design-vue/es/button').ButtonType>;
+        default: string;
+    };
+    okButtonProps: import('vue').PropType<import('ant-design-vue/es/button').ButtonProps>;
+    cancelButtonProps: import('vue').PropType<import('ant-design-vue/es/button').ButtonProps>;
+    title: {
+        type: StringConstructor;
+    };
+    visible: {
+        type: BooleanConstructor;
+    };
+    width: import('vue').PropType<string | number>;
+    wrapClassName: {
+        type: StringConstructor;
+    };
+    zIndex: {
+        type: NumberConstructor;
+    };
+}>> & Readonly<{
+    onCancel?: ((...args: any[]) => any) | undefined;
+}>, {
+    visible: boolean;
+    mask: boolean;
+    loading: boolean;
+    draggable: boolean;
+    scrollTop: boolean;
+    confirmLoading: boolean;
+    closable: boolean;
+    centered: boolean;
+    okText: string;
+    okType: import('ant-design-vue/es/button').ButtonType;
+    cancelText: string;
+    maskClosable: boolean;
+    destroyOnClose: boolean;
+    keyboard: boolean;
+    defaultFullscreen: boolean;
+    canFullscreen: boolean;
+    wrapperFooterOffset: number;
+    useWrapper: boolean;
+    showCancelBtn: boolean;
+    showOkBtn: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/modules/global-modal/src/components/GlboalModal.mjs

@@ -0,0 +1,31 @@
+import { basicProps } from "../props.mjs";
+import { useModalDragMove } from "../hooks/useModalDrag.mjs";
+import { defineComponent, h, toRefs } from "vue";
+import { Modal } from "ant-design-vue";
+//#region src/modules/global-modal/src/components/GlboalModal.tsx
+var GlboalModal_default = /* @__PURE__ */ defineComponent({
+	name: "GlobalModal",
+	inheritAttrs: false,
+	props: basicProps,
+	emits: ["cancel"],
+	setup(props, { slots, emit, attrs }) {
+		const { visible, draggable, destroyOnClose } = toRefs(props);
+		useModalDragMove({
+			visible,
+			destroyOnClose,
+			draggable
+		});
+		const onCancel = (e) => {
+			emit("cancel", e);
+		};
+		return () => {
+			return h(Modal, {
+				...attrs,
+				...props,
+				onCancel
+			}, slots);
+		};
+	}
+});
+//#endregion
+export { GlboalModal_default as default };

package/es/modules/global-modal/src/components/ModalClose.vue.d.ts

@@ -0,0 +1,27 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    canFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullScreen: {
+        type: BooleanConstructor;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    cancel: (...args: any[]) => void;
+    fullscreen: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    canFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullScreen: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onFullscreen?: ((...args: any[]) => any) | undefined;
+}>, {
+    canFullscreen: boolean;
+    fullScreen: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/es/modules/global-modal/src/components/ModalClose.vue.mjs

@@ -0,0 +1,6 @@
+import ModalClose_vue_vue_type_script_setup_true_name_ModalClose_lang_default from "./ModalClose.vue_vue_type_script_setup_true_name_ModalClose_lang.mjs";
+import './ModalClose.vue_vue_type_style_index_0_lang.css';/* empty css                                                 */
+//#region src/modules/global-modal/src/components/ModalClose.vue
+var ModalClose_default = ModalClose_vue_vue_type_script_setup_true_name_ModalClose_lang_default;
+//#endregion
+export { ModalClose_default as default };

package/es/modules/global-modal/src/components/ModalClose.vue_vue_type_script_setup_true_name_ModalClose_lang.mjs

@@ -0,0 +1,67 @@
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, unref, withCtx } from "vue";
+import { t, useNamespace } from "@gct-paas/core";
+import { Tooltip } from "ant-design-vue";
+import { CloseOutlined, FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons-vue";
+//#region src/modules/global-modal/src/components/ModalClose.vue?vue&type=script&setup=true&name=ModalClose&lang.ts
+var ModalClose_vue_vue_type_script_setup_true_name_ModalClose_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ModalClose",
+	props: {
+		canFullscreen: {
+			type: Boolean,
+			default: true
+		},
+		fullScreen: { type: Boolean }
+	},
+	emits: ["cancel", "fullscreen"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const ns = useNamespace("basic-modal-close");
+		const getClass = computed(() => {
+			return [
+				ns.b(),
+				`${ns.b()}--custom`,
+				{ [`${ns.b()}--can-full`]: props.canFullscreen }
+			];
+		});
+		function handleCancel(e) {
+			emit("cancel", e);
+		}
+		function handleFullScreen(e) {
+			e?.stopPropagation();
+			e?.preventDefault();
+			emit("fullscreen");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(getClass.value) }, [__props.canFullscreen ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.fullScreen ? (openBlock(), createBlock(unref(Tooltip), {
+				key: 0,
+				title: unref(t)("sys.component.modal.restore"),
+				placement: "bottom"
+			}, {
+				default: withCtx(() => [createVNode(unref(FullscreenExitOutlined), {
+					role: "full",
+					onClick: handleFullScreen
+				})]),
+				_: 1
+			}, 8, ["title"])) : (openBlock(), createBlock(unref(Tooltip), {
+				key: 1,
+				title: unref(t)("sys.component.modal.maximize"),
+				placement: "bottom"
+			}, {
+				default: withCtx(() => [createVNode(unref(FullscreenOutlined), {
+					role: "close",
+					onClick: handleFullScreen
+				})]),
+				_: 1
+			}, 8, ["title"]))], 64)) : createCommentVNode("", true), createVNode(unref(Tooltip), {
+				title: unref(t)("sys.component.modal.close"),
+				placement: "bottom"
+			}, {
+				default: withCtx(() => [createVNode(unref(CloseOutlined), { onClick: handleCancel })]),
+				_: 1
+			}, 8, ["title"])], 2);
+		};
+	}
+});
+//#endregion
+export { ModalClose_vue_vue_type_script_setup_true_name_ModalClose_lang_default as default };

package/es/modules/global-modal/src/components/ModalClose.vue_vue_type_style_index_0_lang.css

@@ -0,0 +1,95 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.vben .ant-modal-close {
+  right: 16px;
+}
+.vben .ant-modal-close-x .anticon.anticon-close {
+  margin-left: 27px;
+}
+.gct-basic-modal-close {
+  display: flex;
+  align-items: center;
+  height: 95%;
+}
+.gct-basic-modal-close > span {
+  margin-left: 48px;
+  font-size: 16px;
+}
+.gct-basic-modal-close--can-full > span {
+  margin-left: 12px;
+}
+.gct-basic-modal-close:not(.gct-basic-modal-close--can-full) > span:nth-child(1):hover {
+  font-weight: 700;
+}
+.gct-basic-modal-close span:nth-child(1) {
+  display: inline-block;
+  padding: 10px;
+}
+.gct-basic-modal-close span:nth-child(1):hover {
+  color: var(--ant-primary-color);
+}
+.gct-basic-modal-close span:last-child:hover {
+  color: var(--ant-error-color);
+}