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

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,19 @@
+import { EditorRegisterConst } from '../../constants/editor-register/editor-register.mjs';
+
+function widthEditorInstall(providerTag, provider, com, comName) {
+  return {
+    install(app) {
+      if (providerTag && provider) {
+        _gct.register.editor.register(
+          EditorRegisterConst.PREFIX + providerTag,
+          provider
+        );
+      }
+      if (com) {
+        app.component(com.name, com);
+      }
+    }
+  };
+}
+
+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,19 @@ export declare const GctEditForm: import('vue').DefineComponent<import('vue').Ex
     data: {
         type: PropType<IData>;
     };
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    adaptModal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     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<{
+    formRef: import('vue').Ref<IObject | undefined, IObject | undefined>;
+}, {}, {}, {}, 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 +61,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,151 @@
+import { defineComponent, createVNode, resolveComponent, ref, watch } from 'vue';
+import { cloneDeep } from 'lodash-es';
+import { useNamespace, useModal } from '@gct-paas/core';
+import { useEditFormController, EditFormController } from '../../controller/edit-form/edit-form.controller.mjs';
+import 'qx-util';
+
+/**
+ * 编辑表单组件
+ */
+const 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');
+    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;
+    watch(props.context, () => {
+      Object.assign(c.context, props.context);
+      c.state.isNew = !c.context.id;
+    }, {
+      immediate: true
+    });
+    watch(props.params, () => {
+      Object.assign(c.params, props.params);
+    });
+    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 {
+      ns,
+      c,
+      formRef
+    };
+  },
+  render() {
+    let content = null;
+    if (this.c.state.isNew || this.c.state.isNew == false && this.c.state.loaded) {
+      content = createVNode(resolveComponent("gct-form"), {
+        "class": "h-full",
+        "ref": "formRef",
+        "model": this.model,
+        "c": this.c,
+        "context": this.context
+      }, null);
+    }
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [content]);
+  }
+});
+
+export { GctEditForm };

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

@@ -0,0 +1,10 @@
+import 'vue';
+import { GctEditForm as GctEditForm$1 } from './gct-edit-form.mjs';
+
+const GctEditForm = {
+  install(app) {
+    app.component(GctEditForm$1.name, GctEditForm$1);
+  }
+};
+
+export { GctEditForm as default };

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);
+}

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IFormCollapse, IFormCollapseController } from '@gct-paas/core';
+import { IFormCollapse, IFormCollapseController } from '../../../interface';
 /**
  * 表单折叠面板
  */
@@ -12,12 +12,16 @@ export declare const GctFormCollapse: import('vue').DefineComponent<import('vue'
         type: PropType<IFormCollapse>;
         required: true;
     };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
     keys: import('vue').Ref<number[], number[]>;
     style: IParams;
     activeKeys: import('vue').Ref<string[], string[]>;
-    expandIconPosition: import('vue').ComputedRef<"right" | "left">;
+    expandIconPosition: import('vue').ComputedRef<"left" | "right">;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     c: {
         type: PropType<IFormCollapseController>;
@@ -27,5 +31,11 @@ export declare const GctFormCollapse: import('vue').DefineComponent<import('vue'
         type: PropType<IFormCollapse>;
         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 GctFormCollapse;

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

@@ -0,0 +1,79 @@
+import { defineComponent, createVNode, ref, computed } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { Collapse } from 'ant-design-vue';
+import './gct-form-collapse.css';/* empty css                        */
+
+/**
+ * 表单折叠面板
+ */
+const GctFormCollapse = /* @__PURE__ */ defineComponent({
+  name: 'GctFormCollapse',
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('form-collapse');
+    const keys = ref([0]);
+    const style = {};
+    if (props.model.width) {
+      style[ns.cssVarName('form-collapse-width')] = props.model.width;
+    }
+    if (props.model.height) {
+      style[ns.cssVarName('form-collapse-height')] = props.model.height;
+    }
+    const activeKeys = ref([]);
+    activeKeys.value = props.model.children?.map(item => item.name) || [];
+    const expandIconPosition = computed(() => {
+      return props.model.expandIconPosition === 'left' ? 'left' : 'right';
+    });
+    return {
+      ns,
+      keys,
+      style,
+      activeKeys,
+      expandIconPosition
+    };
+  },
+  render() {
+    if (this.c.state.keepalive !== true && this.c.state.visible === false) {
+      return null;
+    }
+    const items = this.$slots.default?.() || [];
+    return createVNode(Collapse, {
+      "class": [this.ns.b(), this.ns.is('hidden', this.c.state.visible === false), this.ns.m('icon-' + (this.model.expandIconStyle || 'up-down'))],
+      "style": this.style,
+      "accordion": this.model.accordion,
+      "expandIconPosition": this.expandIconPosition,
+      "activeKey": this.activeKeys,
+      "onUpdate:activeKey": $event => this.activeKeys = $event
+    }, {
+      default: () => [this.model.children?.map((item, index) => {
+        const _item = items[index];
+        if (_item.props.c.state.visible === false) {
+          return;
+        }
+        const collapsible = item.collapsible !== false ? undefined : 'disabled';
+        return createVNode(Collapse.Panel, {
+          "key": item.name,
+          "header": item.title,
+          "collapsible": collapsible
+        }, {
+          default: () => [items[index]]
+        });
+      })]
+    });
+  }
+});
+
+export { GctFormCollapse };

package/es/modules/gct-form/widgets/gct-form/gct-form-collapse/gct-form-collapse.model.d.ts

@@ -0,0 +1,19 @@
+import { IFormCollapse, IFormCollapsePane } from '../../../interface';
+/**
+ * 表单折叠面板模型
+ *
+ * @export
+ * @class GctFormCollapseModel
+ * @implements {IFormCollapse}
+ */
+export declare class GctFormCollapseModel implements IFormCollapse {
+    type: "collapse";
+    isContainer: true;
+    layout: 'flex' | 'grid';
+    children: IFormCollapsePane[];
+    name: string;
+    accordion?: boolean;
+    expandIconPosition?: 'left' | 'right';
+    expandIconStyle?: 'down-right' | 'up-down';
+    constructor(name: string, opts: Partial<IFormCollapse>, children: IFormCollapsePane[]);
+}

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

@@ -1,4 +1,4 @@
-import { IFormController, IFormCollapseController, IFormItemBasic, IFormItemProvider } from '@gct-paas/core';
+import { IFormCollapseController, IFormController, IFormItemBasic, IFormItemProvider } from '../../../interface';
 export declare class GctFormCollapseProvider implements IFormItemProvider {
     component: string;
     createController(form: IFormController, item: IFormItemBasic): IFormCollapseController;

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

@@ -0,0 +1,14 @@
+import 'vue';
+import 'qx-util';
+import { useFormItemController } from '../../../controller/form-item-basic/form-item-basic.controller.mjs';
+import { FormCollapseController } from '../../../controller/form-collapse/form-collapse.controller.mjs';
+import 'lodash-es';
+
+class GctFormCollapseProvider {
+  component = "gct-form-collapse";
+  createController(form, item) {
+    return useFormItemController(() => new FormCollapseController(form, item));
+  }
+}
+
+export { GctFormCollapseProvider };

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

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

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

@@ -0,0 +1,15 @@
+import 'vue';
+import { GctFormCollapseProvider } from './gct-form-collapse.provider.mjs';
+import { GctFormCollapse as GctFormCollapse$1 } from './gct-form-collapse.mjs';
+
+const GctFormCollapse = {
+  install(app) {
+    _gct.register.formItem.register(
+      "collapse",
+      () => new GctFormCollapseProvider()
+    );
+    app.component(GctFormCollapse$1.name, GctFormCollapse$1);
+  }
+};
+
+export { GctFormCollapse as default };

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

@@ -0,0 +1,79 @@
+@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-pane {
+  --gct-form-collapse-pane-width: auto;
+  --gct-form-collapse-pane-height: auto;
+  --gct-form-collapse-pane-padding: 12px;
+  width: var(--gct-form-collapse-pane-width);
+  height: var(--gct-form-collapse-pane-height);
+  padding: var(--gct-form-collapse-pane-padding);
+}
+.gct-form-collapse-pane.is-hidden {
+  display: none;
+}
+
+.gct-form-collapse .gct-form-collapse-pane .gct-form-collapse-pane__last-child {
+  margin-bottom: 0 !important;
+}

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IFormCollapsePane, IFormCollapsePaneController } from '@gct-paas/core';
+import { IFormCollapsePane, IFormCollapsePaneController } from '../../../interface';
 /**
  * 表单折叠面板项
  */
@@ -12,10 +12,14 @@ export declare const GctFormCollapsePane: import('vue').DefineComponent<import('
         type: PropType<IFormCollapsePane>;
         required: true;
     };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
     style: IParams;
-    renderContainer: (items: unknown[]) => import("vue/jsx-runtime").JSX.Element | undefined;
+    renderContainer: (items: IObject[]) => import("vue/jsx-runtime").JSX.Element | undefined;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     c: {
         type: PropType<IFormCollapsePaneController>;
@@ -25,5 +29,11 @@ export declare const GctFormCollapsePane: import('vue').DefineComponent<import('
         type: PropType<IFormCollapsePane>;
         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 GctFormCollapsePane;