@gct-paas/core-web 0.1.4-dev.10 → 0.1.4-dev.12

package/es/modules/gct-form/widgets/gct-form/gct-form-title-group/gct-form-title-group.provider.mjs

@@ -0,0 +1,12 @@
+import { useFormItemController } from "../../../controller/form-item-basic/form-item-basic.controller.mjs";
+import { FormGroupController } from "../../../controller/form-group/form-group.controller.mjs";
+import "../../../controller/index.mjs";
+//#region src/modules/gct-form/widgets/gct-form/gct-form-title-group/gct-form-title-group.provider.ts
+var GctFormTitleGroupProvider = class {
+	component = "gct-form-title-group";
+	createController(form, item) {
+		return useFormItemController(() => new FormGroupController(form, item));
+	}
+};
+//#endregion
+export { GctFormTitleGroupProvider };

package/es/modules/gct-form/widgets/gct-form/gct-form-title-group/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+import { GctFormTitleGroupModel } from './gct-form-title-group.model';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;
+export { GctFormTitleGroupModel };

package/es/modules/gct-form/widgets/gct-form/gct-form-title-group/index.mjs

@@ -0,0 +1,11 @@
+import { GctFormTitleGroupProvider } from "./gct-form-title-group.provider.mjs";
+import GctFormTitleGroup from "./gct-form-title-group.mjs";
+import "vue";
+import { FormContainerType } from "@gct-paas/core";
+//#region src/modules/gct-form/widgets/gct-form/gct-form-title-group/index.ts
+var gct_form_title_group_default = { install(app) {
+	_gct.register.formItem.register(FormContainerType.FORM_TITLE_GROUP, () => new GctFormTitleGroupProvider());
+	app.component(GctFormTitleGroup.name, GctFormTitleGroup);
+} };
+//#endregion
+export { gct_form_title_group_default as default };

package/es/modules/gct-form/widgets/gct-form/gct-form.css

@@ -0,0 +1,73 @@
+@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 */
+.gct-form--small label {
+  font-size: 12px;
+  line-height: 16px;
+  font-size: 12px !important;
+}
+
+.gct-form.is-info {
+  padding: 18px 12px 2px;
+}

package/es/{widgets → modules/gct-form/widgets}/gct-form/gct-form.d.ts

@@ -1,5 +1,5 @@
 import { PropType, VNode } from 'vue';
-import { IForm, IFormItemBasic, IFormContainer, IFormItem, IFormController } from '@gct-paas/core';
+import { IForm, IFormContainer, IFormController, IFormItem, IFormItemBasic } from '../../interface';
 export declare const GctForm: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     c: {
         type: PropType<IFormController>;
@@ -9,9 +9,13 @@ export declare const GctForm: import('vue').DefineComponent<import('vue').Extrac
         type: PropType<IForm>;
         required: true;
     };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
-    formRef: import('vue').Ref<any, any>;
+    formRef: import('vue').Ref<IObject | undefined, IObject | undefined>;
     staticStyle: IData;
     renderItem: (item: IFormItem) => import("vue/jsx-runtime").JSX.Element;
     renderContainer: (item: IFormContainer) => VNode<import('vue').RendererNode, import('vue').RendererElement, {
@@ -27,5 +31,11 @@ export declare const GctForm: import('vue').DefineComponent<import('vue').Extrac
         type: PropType<IForm>;
         required: true;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    context: IContext;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default GctForm;

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

@@ -0,0 +1,129 @@
+import { FORM_CONTROLLER_INJECT_TAG } from "../../constants/index.mjs";
+import './gct-form.css';/* empty css               */
+import { createVNode, defineComponent, h, isVNode, provide, reactive, ref, resolveComponent } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/modules/gct-form/widgets/gct-form/gct-form.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var GctForm = /* @__PURE__ */ defineComponent({
+	name: "GctForm",
+	props: {
+		c: {
+			type: Object,
+			required: true
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		context: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	setup(props) {
+		const ns = useNamespace("form");
+		provide(FORM_CONTROLLER_INJECT_TAG, props.c);
+		const formRef = ref();
+		const c = props.c;
+		Object.keys(c.item).forEach((key) => {
+			const item = c.item[key];
+			item.state = reactive(item.state);
+		});
+		/**
+		* 绘制表单项
+		*
+		* @author zhanghanrui
+		* @date 2024-03-26 21:03:52
+		* @param {IFormItem} item
+		* @return {*}
+		*/
+		const renderItem = (item) => {
+			return createVNode(resolveComponent("gct-form-item"), {
+				"class": item.class,
+				"style": item.style,
+				"count": c.state.count,
+				"c": c.item[item.name],
+				"formModel": props.model,
+				"model": item,
+				"context": props.context
+			}, null);
+		};
+		/**
+		* 绘制表单容器
+		*
+		* @author zhanghanrui
+		* @date 2024-03-26 21:03:17
+		* @param {IFormContainer} item
+		* @return {*}
+		*/
+		const renderContainer = (item) => {
+			const provider = c.provider[item.name];
+			if (!provider) {
+				console.error(`未找到表单项适配器实例：${item.name}`, item);
+				return null;
+			}
+			if (provider) return h(typeof provider.component === "string" ? resolveComponent(provider.component) : provider.component, {
+				key: item.name,
+				model: item,
+				count: c.state.count,
+				c: c.item[item.name],
+				data: c.state.data,
+				class: item.class,
+				style: item.style,
+				context: props.context
+			}, renderChildren(item.children || []));
+			else console.error(`未找到表单容器适配器：${item.name} - ${item.type}`);
+		};
+		/**
+		* 绘制子元素
+		*
+		* @author zhanghanrui
+		* @date 2024-03-26 21:03:22
+		* @param {IFormItemBasic[]} children
+		* @return {*}
+		*/
+		const renderChildren = (children) => {
+			if (!children) return [];
+			const nodes = [];
+			children.forEach((item) => {
+				if (item.type === "hidden") return null;
+				let node = null;
+				const container = item;
+				if (container.type === "container" || container.isContainer || container.container) node = renderContainer(container);
+				else node = renderItem(item);
+				if (node) nodes.push(node);
+			});
+			return nodes;
+		};
+		const staticStyle = {};
+		if (props.model.labelWidth) staticStyle[ns.cssVarName("form-item-label-width")] = props.model.labelWidth;
+		return {
+			ns,
+			formRef,
+			staticStyle,
+			renderItem,
+			renderContainer,
+			renderChildren
+		};
+	},
+	render() {
+		let _slot;
+		return createVNode(resolveComponent("a-form"), {
+			"ref": "formRef",
+			"layout": this.model.layout,
+			"model": this.c.state.data,
+			"count": this.c.state.count,
+			"class": [
+				this.ns.b(),
+				this.ns.is("info", this.model.info === true),
+				this.model.size ? this.ns.m(this.model.size) : null
+			],
+			"autocomplete": "off",
+			"style": this.staticStyle
+		}, _isSlot(_slot = this.model.children.map((item) => this.renderContainer(item))) ? _slot : { default: () => [_slot] });
+	}
+});
+//#endregion
+export { GctForm as default };

package/es/modules/gct-form/widgets/gct-form/index.d.ts

@@ -0,0 +1,14 @@
+import { App } from 'vue';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;
+export * from './gct-form-tab';
+export * from './gct-form-tab-pane';
+export * from './gct-form-collapse';
+export * from './gct-form-collapse-pane';
+export * from './gct-form-group';
+export * from './gct-form-title-group';
+export * from './gct-form-hidden-item';
+export * from './gct-form-item';
+export * from './gct-form-line';

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

@@ -0,0 +1,30 @@
+import GctFormItem from "./gct-form-item/gct-form-item.mjs";
+import GctForm from "./gct-form.mjs";
+import { GctFormItemProvider } from "./gct-form-item/gct-form-item.provider.mjs";
+import { GctFormHiddenItemProvider } from "./gct-form-hidden-item/gct-form-hidden-item.provider.mjs";
+import gct_form_collapse_pane_default from "./gct-form-collapse-pane/index.mjs";
+import gct_form_collapse_default from "./gct-form-collapse/index.mjs";
+import gct_form_group_default from "./gct-form-group/index.mjs";
+import gct_form_line_default from "./gct-form-line/index.mjs";
+import gct_form_tab_default from "./gct-form-tab/index.mjs";
+import gct_form_tab_pane_default from "./gct-form-tab-pane/index.mjs";
+import gct_form_title_group_default from "./gct-form-title-group/index.mjs";
+import "./gct-form-hidden-item/index.mjs";
+import "./gct-form-item/index.mjs";
+import "vue";
+//#region src/modules/gct-form/widgets/gct-form/index.ts
+var gct_form_default = { install(app) {
+	_gct.register.formItem.register("item", () => new GctFormItemProvider());
+	_gct.register.formItem.register("hidden", () => new GctFormHiddenItemProvider());
+	app.use(gct_form_collapse_pane_default);
+	app.use(gct_form_collapse_default);
+	app.use(gct_form_group_default);
+	app.use(gct_form_line_default);
+	app.use(gct_form_tab_default);
+	app.use(gct_form_tab_pane_default);
+	app.use(gct_form_title_group_default);
+	app.component(GctForm.name, GctForm);
+	app.component(GctFormItem.name, GctFormItem);
+} };
+//#endregion
+export { gct_form_default as default };

package/es/modules/gct-table/controller/gct-table/gct-table.controller.d.ts

@@ -0,0 +1,54 @@
+import { ITable, ITableController, ITableEditorProvider, ITableEvent, ITableItem, ITableRowController, ITableState } from '../../interface';
+import { QXEvent } from 'qx-util';
+/**
+ * 表格控制器
+ *
+ * @author zhanghanrui
+ * @date 2024-04-15 18:04:05
+ * @export
+ * @class GctTableController
+ * @implements {ITableController}
+ */
+export declare class GctTableController implements ITableController {
+    model: ITable;
+    readonly evt: QXEvent<ITableEvent>;
+    state: ITableState;
+    row: Record<string, ITableRowController>;
+    editorProviders: Record<string, ITableEditorProvider>;
+    /**
+     * Creates an instance of GctTableController.
+     *
+     * @author zhanghanrui
+     * @date 2024-04-15 18:04:10
+     * @param {ITable} model
+     */
+    constructor(model: ITable);
+    protected init(): void;
+    protected initTableItems(items: ITableItem[]): void;
+    setData(items: IData[]): Promise<void>;
+    getData(): IData[];
+    protected createState(): ITableState;
+    protected initControllers(items: IData[]): Promise<void>;
+    protected destroyControllers(): Promise<void>;
+    load(params?: IParams): Promise<void>;
+    reload(params?: IParams): Promise<void>;
+    search(params?: IParams): Promise<void>;
+    refresh(params?: IParams): Promise<void>;
+    destroy(): void;
+    change(row: ITableRowController, name: string, newVal: unknown, oldVal: unknown): void;
+    updatePagination(data: {
+        total?: number;
+        size?: number;
+        page?: number;
+    }): void;
+}
+/**
+ * 获取编辑表单控制器实例
+ *
+ * @author zhanghanrui
+ * @date 2024-04-01 18:04:13
+ * @export
+ * @param {IEditForm} model
+ * @return {*}  {EditFormController}
+ */
+export declare function useTableController(fn: () => ITableController): ITableController;

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

@@ -0,0 +1,141 @@
+import { TableState } from "../../state/table/table.state.mjs";
+import { TableRowController } from "../table-row/table-row.controller.mjs";
+import { onUnmounted, reactive } from "vue";
+import { QXEvent } from "qx-util";
+import { defaults, isNil } from "lodash-es";
+import { EditorRegisterConst } from "@gct-paas/core";
+//#region src/modules/gct-table/controller/gct-table/gct-table.controller.ts
+/**
+* 表格控制器
+*
+* @author zhanghanrui
+* @date 2024-04-15 18:04:05
+* @export
+* @class GctTableController
+* @implements {ITableController}
+*/
+var GctTableController = class {
+	evt = new QXEvent();
+	state = this.createState();
+	row = {};
+	editorProviders = {};
+	/**
+	* Creates an instance of GctTableController.
+	*
+	* @author zhanghanrui
+	* @date 2024-04-15 18:04:10
+	* @param {ITable} model
+	*/
+	constructor(model) {
+		this.model = model;
+		this.init();
+	}
+	init() {
+		this.initTableItems(this.model.columns);
+	}
+	initTableItems(items) {
+		if (items) items.forEach((item) => {
+			if (item.type === "edit") {
+				const provider = _gct.register.tableEditor.get(EditorRegisterConst.PREFIX + item.editor.type);
+				if (provider) this.editorProviders[item.name] = provider;
+			}
+		});
+	}
+	async setData(items) {
+		await this.destroyControllers();
+		await this.initControllers(items);
+		this.state.items = items || [];
+	}
+	getData() {
+		return this.state.items;
+	}
+	createState() {
+		return new TableState();
+	}
+	async initControllers(items) {
+		const all = items.map((row) => {
+			const id = row[this.model.key];
+			if (this.row[id]) return;
+			const c = new TableRowController(this, this.model, row);
+			c.state = reactive(c.state);
+			c.data = reactive(c.data);
+			this.row[id] = c;
+			Object.keys(row).forEach((key) => {
+				this.state.formData[`${key}___${id}`] = row[key];
+			});
+			return c.init();
+		});
+		await Promise.all(all);
+	}
+	async destroyControllers() {
+		const keys = this.state.items.map((item) => item[this.model.key]);
+		const all = Object.keys(this.row).filter((key) => !keys.includes(key)).map((key) => {
+			const c = this.row[key];
+			delete this.row[key];
+			{
+				const keys = Object.keys(c.data);
+				const id = c.data[this.model.key];
+				keys.forEach((key) => {
+					const tag = `${key}___${id}`;
+					delete this.state.formData[tag];
+				});
+			}
+			return c.destroy();
+		});
+		await Promise.all(all);
+	}
+	async load(params = {}) {
+		defaults(params, {
+			page: this.state.page,
+			size: this.state.size
+		});
+		if (this.model.fetch) {
+			const items = await this.model.fetch(params, this);
+			this.state.items = items;
+			this.destroyControllers();
+			this.initControllers(this.state.items);
+		}
+	}
+	async reload(params) {
+		await this.load(params);
+	}
+	async search(params) {
+		await this.reload(params);
+	}
+	async refresh(params) {
+		await this.load(params);
+	}
+	destroy() {
+		this.evt.reset();
+	}
+	change(row, name, newVal, oldVal) {
+		const data = this.state.items.find((item) => item[this.model.key] === row.key);
+		if (data) {
+			Object.assign(data, row.data);
+			this.state.formData[`${name}___${data[this.model.key]}`] = newVal;
+			this.evt.emit("change", data, name, newVal, oldVal);
+		}
+	}
+	updatePagination(data) {
+		if (!isNil(data.total)) this.state.total = data.total;
+		if (!isNil(data.size)) this.state.size = data.size;
+		if (!isNil(data.page)) this.state.page = data.page;
+	}
+};
+/**
+* 获取编辑表单控制器实例
+*
+* @author zhanghanrui
+* @date 2024-04-01 18:04:13
+* @export
+* @param {IEditForm} model
+* @return {*}  {EditFormController}
+*/
+function useTableController(fn) {
+	const c = fn();
+	c.state = reactive(c.state);
+	onUnmounted(() => c.destroy());
+	return c;
+}
+//#endregion
+export { GctTableController, useTableController };

package/es/modules/gct-table/controller/index.d.ts

@@ -0,0 +1,5 @@
+export { GctTableController, useTableController, } from './gct-table/gct-table.controller';
+export { TableActionItemController } from './table-item/table-action-item.controller';
+export { TableEditItemController } from './table-item/table-edit-item.controller';
+export { TableItemController } from './table-item/table-item.controller';
+export { TableRowController } from './table-row/table-row.controller';

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

@@ -0,0 +1,5 @@
+import "./table-item/table-item.controller.mjs";
+import "./table-item/table-action-item.controller.mjs";
+import "./table-item/table-edit-item.controller.mjs";
+import "./table-row/table-row.controller.mjs";
+import "./gct-table/gct-table.controller.mjs";

package/es/modules/gct-table/controller/table-item/table-action-item.controller.d.ts

@@ -0,0 +1,15 @@
+import { ITableActionItem, ITableActionItemController } from '../../interface';
+import { TableItemController } from './table-item.controller';
+/**
+ * 表格操作列控制器
+ *
+ * @author zhanghanrui
+ * @date 2024-04-15 18:04:06
+ * @export
+ * @class TableActionItemController
+ * @extends {TableItemController}
+ * @implements {ITableActionItemController}
+ */
+export declare class TableActionItemController extends TableItemController implements ITableActionItemController {
+    model: ITableActionItem;
+}

package/es/modules/gct-table/controller/table-item/table-action-item.controller.mjs

@@ -0,0 +1,15 @@
+import { TableItemController } from "./table-item.controller.mjs";
+//#region src/modules/gct-table/controller/table-item/table-action-item.controller.ts
+/**
+* 表格操作列控制器
+*
+* @author zhanghanrui
+* @date 2024-04-15 18:04:06
+* @export
+* @class TableActionItemController
+* @extends {TableItemController}
+* @implements {ITableActionItemController}
+*/
+var TableActionItemController = class extends TableItemController {};
+//#endregion
+export { TableActionItemController };

package/es/modules/gct-table/controller/table-item/table-edit-item.controller.d.ts

@@ -0,0 +1,19 @@
+import { ITableEditItem, ITableEditItemController, ITableEditItemState } from '../../interface';
+import { TableItemController } from './table-item.controller';
+/**
+ * 表格编辑列控制器
+ *
+ * @author zhanghanrui
+ * @date 2024-04-15 18:04:39
+ * @export
+ * @class TableEditItemController
+ * @extends {TableItemController}
+ * @implements {ITableEditItemController}
+ */
+export declare class TableEditItemController extends TableItemController implements ITableEditItemController {
+    model: ITableEditItem;
+    state: ITableEditItemState;
+    protected createState(): ITableEditItemState;
+    active(): void;
+    unActive(): void;
+}

package/es/modules/gct-table/controller/table-item/table-edit-item.controller.mjs

@@ -0,0 +1,26 @@
+import { TableEditItemState } from "../../state/table-item/table-edit-item.state.mjs";
+import { TableItemController } from "./table-item.controller.mjs";
+//#region src/modules/gct-table/controller/table-item/table-edit-item.controller.ts
+/**
+* 表格编辑列控制器
+*
+* @author zhanghanrui
+* @date 2024-04-15 18:04:39
+* @export
+* @class TableEditItemController
+* @extends {TableItemController}
+* @implements {ITableEditItemController}
+*/
+var TableEditItemController = class extends TableItemController {
+	createState() {
+		return new TableEditItemState();
+	}
+	active() {
+		return this.row.active();
+	}
+	unActive() {
+		return this.row.unActive();
+	}
+};
+//#endregion
+export { TableEditItemController };

package/es/modules/gct-table/controller/table-item/table-item.controller.d.ts

@@ -0,0 +1,21 @@
+import { ITableItem, ITableItemController, ITableItemState, ITableRowController } from '../../interface';
+/**
+ * 表格项控制器
+ *
+ * @author zhanghanrui
+ * @date 2024-04-15 18:04:14
+ * @export
+ * @class TableItemController
+ * @implements {ITableItemController}
+ */
+export declare class TableItemController implements ITableItemController {
+    readonly row: ITableRowController;
+    readonly model: ITableItem;
+    state: ITableItemState;
+    get value(): unknown;
+    set value(val: unknown);
+    constructor(row: ITableRowController, model: ITableItem);
+    protected createState(): ITableItemState;
+    init(): Promise<void>;
+    destroy(): Promise<void>;
+}

package/es/modules/gct-table/controller/table-item/table-item.controller.mjs

@@ -0,0 +1,33 @@
+import { TableITemState } from "../../state/table-item/table-item.state.mjs";
+//#region src/modules/gct-table/controller/table-item/table-item.controller.ts
+/**
+* 表格项控制器
+*
+* @author zhanghanrui
+* @date 2024-04-15 18:04:14
+* @export
+* @class TableItemController
+* @implements {ITableItemController}
+*/
+var TableItemController = class {
+	state = this.createState();
+	get value() {
+		return this.row.data[this.model.dataIndex];
+	}
+	set value(val) {
+		const oldVal = this.row.data[this.model.dataIndex];
+		this.row.data[this.model.dataIndex] = val;
+		this.row.change(this.model.name, val, oldVal);
+	}
+	constructor(row, model) {
+		this.row = row;
+		this.model = model;
+	}
+	createState() {
+		return new TableITemState();
+	}
+	async init() {}
+	async destroy() {}
+};
+//#endregion
+export { TableItemController };