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

package/es/modules/gct-form/state/form-collapse/form-collapse.state.d.ts

@@ -0,0 +1,14 @@
+import { IFormCollapseState } from '../../interface';
+import { FormItemBasicState } from '../form-item-basic/form-item-basic.state';
+/**
+ * 表单折叠面板状态
+ *
+ * @author lingxiaoming
+ * @date 2024-07-14 02:01:12
+ * @export
+ * @class FormCollapseState
+ * @extends {FormItemBasicState}
+ * @implements {IFormCollapseState}
+ */
+export declare class FormCollapseState extends FormItemBasicState implements IFormCollapseState {
+}

package/es/modules/gct-form/state/form-collapse/form-collapse.state.mjs

@@ -0,0 +1,15 @@
+import { FormItemBasicState } from "../form-item-basic/form-item-basic.state.mjs";
+//#region src/modules/gct-form/state/form-collapse/form-collapse.state.ts
+/**
+* 表单折叠面板状态
+*
+* @author lingxiaoming
+* @date 2024-07-14 02:01:12
+* @export
+* @class FormCollapseState
+* @extends {FormItemBasicState}
+* @implements {IFormCollapseState}
+*/
+var FormCollapseState = class extends FormItemBasicState {};
+//#endregion
+export { FormCollapseState };

package/es/modules/gct-form/state/form-collapse-pane/form-collapse-pane.state.d.ts

@@ -0,0 +1,14 @@
+import { IFormCollapsePaneState } from '../../interface';
+import { FormItemBasicState } from '../form-item-basic/form-item-basic.state';
+/**
+ * 表单折叠面板项状态
+ *
+ * @author lingxiaoming
+ * @date 2024-07-14 02:01:12
+ * @export
+ * @class FormCollapsePaneState
+ * @extends {FormItemBasicState}
+ * @implements {IFormCollapsePaneState}
+ */
+export declare class FormCollapsePaneState extends FormItemBasicState implements IFormCollapsePaneState {
+}

package/es/modules/gct-form/state/form-collapse-pane/form-collapse-pane.state.mjs

@@ -0,0 +1,15 @@
+import { FormItemBasicState } from "../form-item-basic/form-item-basic.state.mjs";
+//#region src/modules/gct-form/state/form-collapse-pane/form-collapse-pane.state.ts
+/**
+* 表单折叠面板项状态
+*
+* @author lingxiaoming
+* @date 2024-07-14 02:01:12
+* @export
+* @class FormCollapsePaneState
+* @extends {FormItemBasicState}
+* @implements {IFormCollapsePaneState}
+*/
+var FormCollapsePaneState = class extends FormItemBasicState {};
+//#endregion
+export { FormCollapsePaneState };

package/es/modules/gct-form/state/form-edit-item/form-edit-item.state.d.ts

@@ -0,0 +1,18 @@
+import { IDictionaryItem } from '@gct-paas/core';
+import { IFormEditItemState } from '../../interface';
+import { FormItemBasicState } from '../form-item-basic/form-item-basic.state';
+/**
+ * 表单编辑项状态
+ *
+ * @author zhanghanrui
+ * @date 2024-04-02 22:04:45
+ * @export
+ * @class FormEditItemState
+ * @extends {FormItemBasicState}
+ * @implements {IFormEditItemState}
+ */
+export declare class FormEditItemState extends FormItemBasicState implements IFormEditItemState {
+    label: string;
+    value: any;
+    options: IDictionaryItem[];
+}

package/es/modules/gct-form/state/form-edit-item/form-edit-item.state.mjs

@@ -0,0 +1,19 @@
+import { FormItemBasicState } from "../form-item-basic/form-item-basic.state.mjs";
+//#region src/modules/gct-form/state/form-edit-item/form-edit-item.state.ts
+/**
+* 表单编辑项状态
+*
+* @author zhanghanrui
+* @date 2024-04-02 22:04:45
+* @export
+* @class FormEditItemState
+* @extends {FormItemBasicState}
+* @implements {IFormEditItemState}
+*/
+var FormEditItemState = class extends FormItemBasicState {
+	label = "";
+	value = null;
+	options = [];
+};
+//#endregion
+export { FormEditItemState };

package/es/modules/gct-form/state/form-group/form-group.state.d.ts

@@ -0,0 +1,21 @@
+import { IFormGroupState } from '../../interface';
+import { FormItemBasicState } from '../form-item-basic/form-item-basic.state';
+/**
+ * 表单项状态
+ *
+ * @author zhanghanrui
+ * @date 2024-04-01 11:04:11
+ * @export
+ * @class FormGroupState
+ * @implements {IFormItemState}
+ */
+export declare class FormGroupState extends FormItemBasicState implements IFormGroupState {
+    /**
+     * 是否在展开状态
+     *
+     * @author zhanghanrui
+     * @date 2024-04-01 14:04:52
+     * @type {boolean}
+     */
+    expand: boolean;
+}

package/es/modules/gct-form/state/form-group/form-group.state.mjs

@@ -0,0 +1,23 @@
+import { FormItemBasicState } from "../form-item-basic/form-item-basic.state.mjs";
+//#region src/modules/gct-form/state/form-group/form-group.state.ts
+/**
+* 表单项状态
+*
+* @author zhanghanrui
+* @date 2024-04-01 11:04:11
+* @export
+* @class FormGroupState
+* @implements {IFormItemState}
+*/
+var FormGroupState = class extends FormItemBasicState {
+	/**
+	* 是否在展开状态
+	*
+	* @author zhanghanrui
+	* @date 2024-04-01 14:04:52
+	* @type {boolean}
+	*/
+	expand = true;
+};
+//#endregion
+export { FormGroupState };

package/es/modules/gct-form/state/form-item/form-item.state.d.ts

@@ -0,0 +1,14 @@
+import { IFormItemState } from '../../interface';
+import { FormEditItemState } from '../form-edit-item/form-edit-item.state';
+/**
+ * 表单项状态
+ *
+ * @author zhanghanrui
+ * @date 2024-04-02 22:04:22
+ * @export
+ * @class FormItemState
+ * @extends {FormEditItemState}
+ * @implements {IFormItemState}
+ */
+export declare class FormItemState extends FormEditItemState implements IFormItemState {
+}

package/es/modules/gct-form/state/form-item/form-item.state.mjs

@@ -0,0 +1,15 @@
+import { FormEditItemState } from "../form-edit-item/form-edit-item.state.mjs";
+//#region src/modules/gct-form/state/form-item/form-item.state.ts
+/**
+* 表单项状态
+*
+* @author zhanghanrui
+* @date 2024-04-02 22:04:22
+* @export
+* @class FormItemState
+* @extends {FormEditItemState}
+* @implements {IFormItemState}
+*/
+var FormItemState = class extends FormEditItemState {};
+//#endregion
+export { FormItemState };

package/es/modules/gct-form/state/form-item-basic/form-item-basic.state.d.ts

@@ -0,0 +1,17 @@
+import { IFormItemBasicState } from '../../interface';
+/**
+ * 表单项基础状态
+ *
+ * @author zhanghanrui
+ * @date 2024-04-01 14:04:19
+ * @export
+ * @class FormItemBasicState
+ * @implements {IFormItemBasicState}
+ */
+export declare class FormItemBasicState implements IFormItemBasicState {
+    disabled: boolean;
+    readonly: boolean;
+    visible: boolean;
+    keepalive: boolean;
+    destroyed: boolean;
+}

package/es/modules/gct-form/state/form-item-basic/form-item-basic.state.mjs

@@ -0,0 +1,19 @@
+//#region src/modules/gct-form/state/form-item-basic/form-item-basic.state.ts
+/**
+* 表单项基础状态
+*
+* @author zhanghanrui
+* @date 2024-04-01 14:04:19
+* @export
+* @class FormItemBasicState
+* @implements {IFormItemBasicState}
+*/
+var FormItemBasicState = class {
+	disabled = false;
+	readonly = false;
+	visible = true;
+	keepalive = false;
+	destroyed = false;
+};
+//#endregion
+export { FormItemBasicState };

package/es/modules/gct-form/state/form-line/form-line.state.d.ts

@@ -0,0 +1,11 @@
+import { IFormLineState } from '../../interface';
+import { FormItemBasicState } from '../form-item-basic/form-item-basic.state';
+/**
+ * 表单项状态
+ *
+ * @export
+ * @class FormLineState
+ * @implements {IFormItemState}
+ */
+export declare class FormLineState extends FormItemBasicState implements IFormLineState {
+}

package/es/modules/gct-form/state/form-line/form-line.state.mjs

@@ -0,0 +1,12 @@
+import { FormItemBasicState } from "../form-item-basic/form-item-basic.state.mjs";
+//#region src/modules/gct-form/state/form-line/form-line.state.ts
+/**
+* 表单项状态
+*
+* @export
+* @class FormLineState
+* @implements {IFormItemState}
+*/
+var FormLineState = class extends FormItemBasicState {};
+//#endregion
+export { FormLineState };

package/es/modules/gct-form/state/form-tab/form-tab.state.d.ts

@@ -0,0 +1,15 @@
+import { IFormTabState } from '../../interface';
+import { FormItemBasicState } from '../form-item-basic/form-item-basic.state';
+/**
+ * 表单分页状态
+ *
+ * @author lingxiaoming
+ * @date 2024-07-14 02:01:12
+ * @export
+ * @class FormTabState
+ * @extends {FormItemBasicState}
+ * @implements {IFormTabState}
+ */
+export declare class FormTabState extends FormItemBasicState implements IFormTabState {
+    activePane: string;
+}

package/es/modules/gct-form/state/form-tab/form-tab.state.mjs

@@ -0,0 +1,17 @@
+import { FormItemBasicState } from "../form-item-basic/form-item-basic.state.mjs";
+//#region src/modules/gct-form/state/form-tab/form-tab.state.ts
+/**
+* 表单分页状态
+*
+* @author lingxiaoming
+* @date 2024-07-14 02:01:12
+* @export
+* @class FormTabState
+* @extends {FormItemBasicState}
+* @implements {IFormTabState}
+*/
+var FormTabState = class extends FormItemBasicState {
+	activePane = "";
+};
+//#endregion
+export { FormTabState };

package/es/modules/gct-form/state/form-tab-pane/form-tab-pane.state.d.ts

@@ -0,0 +1,14 @@
+import { IFormTabPaneState } from '../../interface';
+import { FormItemBasicState } from '../form-item-basic/form-item-basic.state';
+/**
+ * 表单分页pane状态
+ *
+ * @author lingxiaoming
+ * @date 2024-07-14 02:01:12
+ * @export
+ * @class FormTabPaneState
+ * @extends {FormItemBasicState}
+ * @implements {IFormTabPaneState}
+ */
+export declare class FormTabPaneState extends FormItemBasicState implements IFormTabPaneState {
+}

package/es/modules/gct-form/state/form-tab-pane/form-tab-pane.state.mjs

@@ -0,0 +1,15 @@
+import { FormItemBasicState } from "../form-item-basic/form-item-basic.state.mjs";
+//#region src/modules/gct-form/state/form-tab-pane/form-tab-pane.state.ts
+/**
+* 表单分页pane状态
+*
+* @author lingxiaoming
+* @date 2024-07-14 02:01:12
+* @export
+* @class FormTabPaneState
+* @extends {FormItemBasicState}
+* @implements {IFormTabPaneState}
+*/
+var FormTabPaneState = class extends FormItemBasicState {};
+//#endregion
+export { FormTabPaneState };

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

@@ -0,0 +1,10 @@
+export { FormState } from './form/form.state';
+export { FormCollapsePaneState } from './form-collapse-pane/form-collapse-pane.state';
+export { FormCollapseState } from './form-collapse/form-collapse.state';
+export { FormTabState } from './form-tab/form-tab.state';
+export { FormTabPaneState } from './form-tab-pane/form-tab-pane.state';
+export { FormEditItemState } from './form-edit-item/form-edit-item.state';
+export { FormGroupState } from './form-group/form-group.state';
+export { FormItemState } from './form-item/form-item.state';
+export { FormItemBasicState } from './form-item-basic/form-item-basic.state';
+export { FormLineState } from './form-line/form-line.state';

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

@@ -0,0 +1 @@
+export { widthEditorInstall } from './width-install/width-install';

package/es/modules/gct-form/utils/width-install/width-install.d.ts

@@ -0,0 +1,17 @@
+import { App } from 'vue';
+import { IEditorProvider } from '../../interface';
+/**
+ * 表单编辑器注册器
+ *
+ * @author zhanghanrui
+ * @date 2024-04-17 13:04:06
+ * @export
+ * @param {string} providerTag
+ * @param {() => IEditorProvider} provider
+ * @param {*} [com]
+ * @param {string} [comName]
+ * @return {*}
+ */
+export declare function widthEditorInstall(providerTag: string, provider: () => IEditorProvider, com?: any, comName?: string): {
+    install(app: App): void;
+};

package/es/modules/gct-form/utils/width-install/width-install.mjs

@@ -0,0 +1,22 @@
+import { EditorRegisterConst } from "../../constants/editor-register/editor-register.mjs";
+//#region src/modules/gct-form/utils/width-install/width-install.ts
+/**
+* 表单编辑器注册器
+*
+* @author zhanghanrui
+* @date 2024-04-17 13:04:06
+* @export
+* @param {string} providerTag
+* @param {() => IEditorProvider} provider
+* @param {*} [com]
+* @param {string} [comName]
+* @return {*}
+*/
+function widthEditorInstall(providerTag, provider, com, comName) {
+	return { install(app) {
+		if (providerTag && provider) _gct.register.editor.register(EditorRegisterConst.PREFIX + providerTag, provider);
+		if (com) app.component(comName ?? com.name, com);
+	} };
+}
+//#endregion
+export { widthEditorInstall };

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IEditForm, IEditFormController } from '@gct-paas/core';
+import { IEditFormController, IEditForm } from '../../interface';
 /**
  * 编辑表单组件
  */
@@ -26,11 +26,15 @@ export declare const GctEditForm: import('vue').DefineComponent<import('vue').Ex
     data: {
         type: PropType<IData>;
     };
-}>, {
-    ns: import('@gct-paas/core').Namespace;
-    c: IEditFormController;
-    formRef: import('vue').Ref<any, any>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:data"[], "update:data", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    adaptModal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change" | "update:data")[], "change" | "update:data", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     embed: {
         type: BooleanConstructor;
         default: boolean;
@@ -53,10 +57,21 @@ export declare const GctEditForm: import('vue').DefineComponent<import('vue').Ex
     data: {
         type: PropType<IData>;
     };
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    adaptModal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:data"?: ((...args: any[]) => any) | undefined;
 }>, {
-    context: IParams;
     embed: boolean;
+    count: number;
+    context: IParams;
     params: IParams;
+    adaptModal: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,125 @@
+import { EditFormController, useEditFormController } from "../../controller/edit-form/edit-form.controller.mjs";
+import "../../controller/index.mjs";
+import { createVNode, defineComponent, ref, resolveComponent, toRefs, watch } from "vue";
+import { cloneDeep } from "lodash-es";
+import { useModal, useNamespace } from "@gct-paas/core";
+//#region src/modules/gct-form/widgets/gct-edit-form/gct-edit-form.tsx
+/**
+* 编辑表单组件
+*/
+var GctEditForm = /* @__PURE__ */ defineComponent({
+	name: "GctEditForm",
+	props: {
+		embed: {
+			type: Boolean,
+			default: false
+		},
+		context: {
+			type: Object,
+			default: () => ({})
+		},
+		params: {
+			type: Object,
+			default: () => ({})
+		},
+		controller: { type: Object },
+		model: {
+			type: Object,
+			required: true
+		},
+		data: { type: Object },
+		count: {
+			type: Number,
+			default: 0
+		},
+		adaptModal: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["update:data", "change"],
+	setup(props, { emit }) {
+		const ns = useNamespace("gct-edit-form");
+		console.debug("GctEditForm props:", props);
+		const c = props.controller || useEditFormController(() => new EditFormController(props.model));
+		const formRef = ref();
+		const validate = async () => {
+			try {
+				await formRef.value.formRef.validate();
+			} catch (error) {
+				console.error(error);
+				return false;
+			}
+			return true;
+		};
+		const validateField = async (field) => {
+			try {
+				await formRef.value.formRef.validateFields([field]);
+			} catch (error) {
+				console.error(error);
+				return false;
+			}
+			return true;
+		};
+		c.validate = validate;
+		c.validateItem = validateField;
+		const { context, params } = toRefs(props);
+		watch(context, () => {
+			Object.assign(c.context, props.context);
+			c.state.isNew = !c.context.id;
+		}, {
+			immediate: true,
+			deep: true
+		});
+		watch(params, () => {
+			Object.assign(c.params, props.params);
+		}, { deep: true });
+		watch(() => props.count, () => {
+			c.state.count += 1;
+		});
+		watch(() => props.data, () => {
+			Object.assign(c.state.data, props.data);
+		}, { deep: true });
+		if (props.adaptModal !== false) useModal(async () => {
+			try {
+				await formRef.value.formRef.validate();
+				const data = await c.save();
+				if (data) return {
+					ok: true,
+					data: [cloneDeep(data)]
+				};
+			} catch (error) {
+				console.error(error);
+			}
+			return { ok: false };
+		});
+		if (props.data) {
+			Object.assign(c.state.data, props.data);
+			c.loaded();
+		} else if (c.state.isNew !== true) c.load().then(() => {
+			c.loaded();
+		});
+		else c.loaded();
+		if (props.embed) c.evt.on("change", () => {
+			const data = c.getData();
+			emit("update:data", data);
+			emit("change", data);
+		});
+		c.evt.on("blur", (key) => {
+			validateField(key);
+		});
+		return () => {
+			let content = null;
+			if (c.state.isNew || c.state.isNew == false && c.state.loaded) content = createVNode(resolveComponent("gct-form"), {
+				"class": "h-full",
+				"ref": formRef,
+				"c": c,
+				"model": props.model,
+				"context": props.context
+			}, null);
+			return createVNode("div", { "class": ns.b() }, [content]);
+		};
+	}
+});
+//#endregion
+export { GctEditForm };

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

@@ -0,0 +1,97 @@
+@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-collapse {
+  --gct-form-collapse-width: auto;
+  --gct-form-collapse-height: auto;
+  width: var(--gct-form-collapse-width);
+  height: var(--gct-form-collapse-height);
+  border: none;
+}
+.gct-form-collapse.is-hidden {
+  display: none;
+}
+
+.gct-form-collapse.ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  background: #f2f4f7;
+  font-size: 12px;
+  font-weight: 500;
+  color: #212528;
+  padding: 8px 12px;
+}
+.gct-form-collapse > .ant-collapse-item {
+  border-bottom: none;
+}
+.gct-form-collapse > .ant-collapse-item > .ant-collapse-content {
+  border-top: none;
+}
+.gct-form-collapse > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
+  padding: 0;
+}
+.gct-form-collapse--icon-up-down > .ant-collapse-item.ant-collapse-item-active > .ant-collapse-header .ant-collapse-arrow svg {
+  transform: rotate(-90deg) !important;
+}
+.gct-form-collapse--icon-up-down > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow svg {
+  transform: rotate(90deg);
+}