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

package/es/modules/gct-table/widgets/gct-table/gct-table.mjs

@@ -0,0 +1,314 @@
+import { GctTableController, useTableController } from "../../controller/gct-table/gct-table.controller.mjs";
+import "../../controller/index.mjs";
+import { useAntTableScrollHeight } from "../../hooks/use-ant-table/use-ant-table.mjs";
+import "../../hooks/index.mjs";
+import './gct-table.css';/* empty css                */
+import { computed, createVNode, defineComponent, h, isVNode, mergeProps, onMounted, onUnmounted, ref, resolveComponent, watch } from "vue";
+import { isAsync, isPromise } from "qx-util";
+import { clone, cloneDeep, defaults, isBoolean, isNil } from "lodash-es";
+import { t, useNamespace } from "@gct-paas/core";
+//#region src/modules/gct-table/widgets/gct-table/gct-table.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var GctTable = /* @__PURE__ */ defineComponent({
+	name: "GctTable",
+	props: {
+		count: {
+			type: Number,
+			default: 0
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		data: {
+			type: Array,
+			default: () => []
+		}
+	},
+	emits: ["rowChange"],
+	setup(props, { emit }) {
+		const ns = useNamespace("gct-table");
+		const loadingState = ref({});
+		const elRef = ref();
+		const formRef = ref();
+		const tableRef = ref();
+		let hoverRow = null;
+		let activeRow = null;
+		const c = useTableController(() => new GctTableController(props.model));
+		c.evt.on("change", async (data, name, val, oldVal) => {
+			emit("rowChange", cloneDeep(data), name, val, oldVal);
+		});
+		if (c.model.local === true) watch(() => props.count, () => {
+			c.setData(cloneDeep(props.data));
+		});
+		if (c.model.local !== true && c.model.autoLoad !== false) c.load();
+		const findRowId = (el) => {
+			if (!el || el === elRef.value) return null;
+			const id = el.getAttribute("data-row-key");
+			if (id) return id;
+			return findRowId(el.parentElement);
+		};
+		const mouseOver = (e) => {
+			const rowId = findRowId(e.target);
+			if (rowId) {
+				const row = c.row[rowId];
+				if (hoverRow) hoverRow.state.hover = false;
+				row.state.hover = true;
+				hoverRow = row;
+			}
+		};
+		const mouseOut = (e) => {
+			if (!findRowId(e.target) && hoverRow) {
+				hoverRow.state.hover = false;
+				hoverRow = null;
+			}
+		};
+		const mouseLeave = (e) => {
+			if (!findRowId(e.target) && hoverRow) {
+				hoverRow.state.hover = false;
+				hoverRow = null;
+			}
+		};
+		const click = (e) => {
+			const rowId = findRowId(e.target);
+			if (rowId) {
+				const row = c.row[rowId];
+				if (activeRow) activeRow.unActive();
+				row.active();
+				activeRow = row;
+			} else if (activeRow) {
+				activeRow.unActive();
+				activeRow = null;
+			}
+		};
+		const winClick = () => {
+			if (activeRow) {
+				activeRow.unActive();
+				activeRow = null;
+			}
+		};
+		onMounted(() => {
+			if (elRef.value) {
+				elRef.value.addEventListener("mouseover", mouseOver, { capture: true });
+				elRef.value.addEventListener("mouseout", mouseOver, { capture: true });
+				elRef.value.addEventListener("mouseleave", mouseLeave, { capture: true });
+				elRef.value.addEventListener("click", click, { capture: true });
+			}
+			window.addEventListener("click", winClick, { capture: true });
+		});
+		onUnmounted(() => {
+			if (elRef.value) {
+				elRef.value.removeEventListener("mouseover", mouseOver, { capture: true });
+				elRef.value.removeEventListener("mouseout", mouseOver, { capture: true });
+				elRef.value.removeEventListener("mouseleave", mouseLeave, { capture: true });
+				elRef.value.removeEventListener("click", click, { capture: true });
+			}
+			window.removeEventListener("click", winClick, { capture: true });
+		});
+		const onValidate = (name, status, errorMsgs) => {
+			const keys = name.split("___");
+			if (keys.length === 2) {
+				const [name, id] = keys;
+				const row = c.row[id];
+				if (row) {
+					const item = row.item[name];
+					if (item) {
+						item.state.error = !status;
+						if (errorMsgs && errorMsgs.length > 0) item.state.errMessage = errorMsgs[0];
+						else item.state.errMessage = "";
+					}
+				}
+			}
+		};
+		const validate = () => {
+			return formRef.value.validate();
+		};
+		const reload = (params) => {
+			return c.load(params);
+		};
+		const pagination = computed(() => {
+			if (isNil(props.model.pagination)) return false;
+			const pagination = clone(props.model.pagination);
+			defaults(pagination, {
+				pageSizeOptions: [
+					10,
+					20,
+					30,
+					40,
+					50
+				],
+				showSizeChanger: true,
+				showTotal: true
+			});
+			const showTotal = pagination.showTotal === true ? (total) => t("sys.component.table.total", { total }) : pagination.showTotal || void 0;
+			const sizeOptions = pagination.pageSizeOptions?.map((item) => `${item}`);
+			return {
+				class: "pagination-total-left",
+				total: c.state.total,
+				current: c.state.page,
+				pageSize: c.state.size,
+				pageSizeOptions: sizeOptions,
+				showSizeChanger: pagination.showSizeChanger,
+				showTotal
+			};
+		});
+		const handleTableChange = (pagination, _filters, _sorter) => {
+			c.updatePagination({
+				page: pagination.current,
+				size: pagination.pageSize
+			});
+			c.reload();
+		};
+		const { scrollHeight } = useAntTableScrollHeight(elRef, { pagination: !!pagination.value });
+		return {
+			ns,
+			c,
+			loadingState,
+			elRef,
+			formRef,
+			tableRef,
+			scrollHeight,
+			pagination,
+			isEdit: computed(() => {
+				return c.model.columns.some((col) => col.type === "edit");
+			}),
+			handleTableChange,
+			mouseOver,
+			mouseOut,
+			onValidate,
+			validate,
+			reload
+		};
+	},
+	render() {
+		return createVNode("div", {
+			"ref": "elRef",
+			"class": this.ns.b(),
+			"onMouseover": this.mouseOver,
+			"onMouseout": this.mouseOut
+		}, [createVNode(resolveComponent("a-form"), {
+			"ref": "formRef",
+			"model": this.c.state.formData,
+			"onValidate": this.onValidate
+		}, { default: () => [createVNode(resolveComponent("a-table"), mergeProps({
+			"ref": "tableRef",
+			"class": [
+				"flex-1",
+				this.ns.is("pagination", !!this.pagination),
+				this.ns.is("not-edit", !this.isEdit)
+			],
+			"scroll": { y: this.scrollHeight },
+			"columns": this.model.columns,
+			"data-source": this.c.state.items,
+			"row-key": (record) => record[this.c.model.key],
+			"pagination": this.pagination,
+			"onChange": this.handleTableChange
+		}, this.$attrs), {
+			headerCell: ({ title, column }) => {
+				const _column = column;
+				if (_column.type === "edit" && _column.rules && _column.rules.length > 0) {
+					const isRequired = _column.rules.some((rule) => rule.required === true);
+					return createVNode("span", {
+						"title": title,
+						"class": [this.ns.e("table-header"), this.ns.is("required", isRequired)]
+					}, [createVNode("span", { "class": this.ns.e("table-item") }, [title])]);
+				}
+				return title;
+			},
+			bodyCell: ({ column, text, record }) => {
+				if (text == null && this.model.isEmptyText == true) text = _gct.store.getEmptyDisplay;
+				else text = isBoolean(text) ? text.toString() : text;
+				const _column = column;
+				if (_column.customRender) return _column.customRender({ record });
+				if (column.type === "edit") {
+					const key = record[this.c.model.key];
+					const row = this.c.row[key];
+					if (row) {
+						let _slot;
+						const provider = this.c.editorProviders[column.name];
+						const com = resolveComponent(provider.component);
+						const item = row.item[column.name];
+						const isEdit = row.state.hover === true || item.state.error === true || row.state.active === true || this.c.model.rowEditMode === "all";
+						return createVNode(resolveComponent("a-form-item"), {
+							"name": `${column.name}___${key}`,
+							"class": [this.ns.b("table-item"), this.ns.bm("table-item", "edit")],
+							"rules": item.model.rules || []
+						}, _isSlot(_slot = h(com, {
+							key: item.model.name,
+							c: item,
+							model: item.model.editor,
+							readonly: item.state.readonly,
+							disabled: item.state.disabled,
+							value: item.value,
+							itemModel: item.model,
+							data: row.data,
+							keepalive: item.state.keepalive,
+							visible: item.state.visible,
+							isEdit,
+							"onUpdate:value": (value) => {
+								item.value = value;
+							}
+						})) ? _slot : { default: () => [_slot] });
+					}
+				}
+				if (column.type === "actions") {
+					const item = column;
+					return createVNode("div", { "class": this.ns.b("table-actions") }, [item.actions.filter((_) => {
+						if (_.hidden) return !_.hidden(record);
+						return true;
+					}).map((_) => {
+						if (_.mode === "divider") return createVNode(resolveComponent("a-divider"), { "type": "vertical" }, null);
+						const loadingKey = `${_.type}___${_.tag}___${record[this.c.model.key]}`;
+						const button = createVNode(resolveComponent("a-button"), mergeProps({
+							"class": this.ns.b("table-action-item"),
+							"type": _.type,
+							"size": "small",
+							"loading": this.loadingState[loadingKey] === true,
+							"onClick": async (e) => {
+								if (_.confirm) return;
+								e.stopPropagation();
+								if (_.action) if (isPromise(_.action) || isAsync(_.action)) {
+									this.loadingState[loadingKey] = true;
+									try {
+										await _.action(record);
+									} catch (error) {
+										console.log(error);
+									} finally {
+										this.loadingState[loadingKey] = false;
+									}
+								} else _.action(record);
+								else item.action(_.tag, record);
+							}
+						}, _.props), { default: () => [_.text] });
+						if (_.confirm) return createVNode(resolveComponent("a-popconfirm"), mergeProps({ "onConfirm": async () => {
+							if (_.action) if (isPromise(_.action) || isAsync(_.action)) {
+								this.loadingState[loadingKey] = true;
+								try {
+									await _.action(record);
+								} catch (error) {
+									console.log(error);
+								} finally {
+									this.loadingState[loadingKey] = false;
+								}
+							} else _.action(record);
+							else item.action(_.tag, record);
+						} }, _.confirm), _isSlot(button) ? button : { default: () => [button] });
+						else return button;
+					})]);
+				}
+				if (column.type === "link") return createVNode("a", {
+					"class": this.ns.e("table-link"),
+					"onClick": (e) => {
+						e.stopPropagation();
+						if (_column.click) _column.click(record);
+					}
+				}, [text]);
+				return text;
+			}
+		})] })]);
+	}
+});
+//#endregion
+export { GctTable };

package/es/modules/gct-table/widgets/gct-table/index.mjs

@@ -0,0 +1,8 @@
+import { GctTable } from "./gct-table.mjs";
+import "vue";
+//#region src/modules/gct-table/widgets/gct-table/index.ts
+var gct_table_default = { install(app) {
+	app.component(GctTable.name, GctTable);
+} };
+//#endregion
+export { gct_table_default as default };

package/es/modules/gct-table/widgets/index.mjs

@@ -0,0 +1,7 @@
+import gct_table_default from "./gct-table/index.mjs";
+//#region src/modules/gct-table/widgets/index.ts
+var widgets_default = { install(app) {
+	app.use(gct_table_default);
+} };
+//#endregion
+export { widgets_default as default };

package/es/modules/global-modal/index.d.ts

@@ -2,4 +2,5 @@ import { WithInstall } from '../../utils';
 export declare const BasicModal: WithInstall<unknown>;
 export { useModalContext } from './src/hooks/useModalContext';
 export { useModal, useModalInner } from './src/hooks/useModal';
+export { useModalDragMove } from './src/hooks/useModalDrag';
 export * from './src/typing';

package/es/modules/global-modal/index.mjs

@@ -1,16 +1,11 @@
-import '../../components/app-modal/app-modal-component.css';import './src/index.css';/* empty css                */
-import _sfc_main from './src/BasicModal.vue.mjs';
-import 'ant-design-vue';
-import '../../utils/monaco-loader/monaco-loader.mjs';
-import 'lodash-es';
-import 'vue';
-import '@gct-paas/core';
-import 'vue3-dnd';
-import 'react-dnd-html5-backend';
-/* empty css                                                   */
-import { withInstall } from '../../utils/with-install.mjs';
-export { useModal, useModalInner } from './src/hooks/useModal.mjs';
-
-const BasicModal = withInstall(_sfc_main);
-
+import { withInstall } from "../../utils/with-install.mjs";
+import "../../utils/index.mjs";
+import './src/index.css';/* empty css                */
+import "./src/hooks/useModalDrag.mjs";
+import "./src/hooks/useModalContext.mjs";
+import BasicModal_default from "./src/BasicModal.vue.mjs";
+import "./src/hooks/useModal.mjs";
+//#region src/modules/global-modal/index.ts
+var BasicModal = withInstall(BasicModal_default);
+//#endregion
 export { BasicModal };

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

@@ -56,9 +56,9 @@ declare function __VLS_template(): {
             scrollHeight: import('vue').ComputedRef<import('vue').CSSProperties>;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("height-change" | "ext-height")[], import('vue').PublicProps, {
             visible: boolean;
+            loading: boolean;
             minHeight: number;
             useWrapper: boolean;
-            loading: boolean;
             footerOffset: number;
             modalHeaderHeight: number;
             modalFooterHeight: number;
@@ -118,9 +118,9 @@ declare function __VLS_template(): {
             scrollHeight: import('vue').ComputedRef<import('vue').CSSProperties>;
         }, {}, {}, {}, {
             visible: boolean;
+            loading: boolean;
             minHeight: number;
             useWrapper: boolean;
-            loading: boolean;
             footerOffset: number;
             modalHeaderHeight: number;
             modalFooterHeight: number;
@@ -243,10 +243,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: NumberConstructor;
     };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    ok: (...args: any[]) => void;
     cancel: (...args: any[]) => void;
-    "height-change": (...args: any[]) => void;
     "visible-change": (...args: any[]) => void;
+    ok: (...args: any[]) => void;
+    "height-change": (...args: any[]) => void;
     register: (...args: any[]) => void;
     "update:visible": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -362,33 +362,33 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: NumberConstructor;
     };
 }>> & Readonly<{
-    onOk?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
-    "onHeight-change"?: ((...args: any[]) => any) | undefined;
     "onVisible-change"?: ((...args: any[]) => any) | undefined;
+    onOk?: ((...args: any[]) => any) | undefined;
+    "onHeight-change"?: ((...args: any[]) => any) | undefined;
     onRegister?: ((...args: any[]) => any) | undefined;
     "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
 }>, {
     visible: boolean;
-    scrollTop: boolean;
+    mask: boolean;
+    loading: boolean;
     draggable: boolean;
+    scrollTop: boolean;
+    confirmLoading: boolean;
+    closable: boolean;
     centered: boolean;
-    cancelText: string;
     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;
-    loading: boolean;
     showCancelBtn: boolean;
     showOkBtn: boolean;
-    closable: boolean;
-    confirmLoading: boolean;
-    destroyOnClose: boolean;
-    mask: boolean;
-    maskClosable: boolean;
-    keyboard: boolean;
-    okType: import('ant-design-vue/es/button').ButtonType;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     modalWrapperRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
         loading: {
@@ -438,9 +438,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         scrollHeight: import('vue').ComputedRef<import('vue').CSSProperties>;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("height-change" | "ext-height")[], import('vue').PublicProps, {
         visible: boolean;
+        loading: boolean;
         minHeight: number;
         useWrapper: boolean;
-        loading: boolean;
         footerOffset: number;
         modalHeaderHeight: number;
         modalFooterHeight: number;
@@ -500,9 +500,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         scrollHeight: import('vue').ComputedRef<import('vue').CSSProperties>;
     }, {}, {}, {}, {
         visible: boolean;
+        loading: boolean;
         minHeight: number;
         useWrapper: boolean;
-        loading: boolean;
         footerOffset: number;
         modalHeaderHeight: number;
         modalFooterHeight: number;