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

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-gct-form--small label {
+  font-size: 12px;
+  line-height: 16px;
+  font-size: 12px !important;
+}
+
+.gct-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,147 @@
+import { defineComponent, createVNode, resolveComponent, provide, ref, reactive, isVNode, h } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { FORM_CONTROLLER_INJECT_TAG } from '../../constants/index.mjs';
+import './gct-form.css';/* empty css               */
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const 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('gct-form');
+    provide(FORM_CONTROLLER_INJECT_TAG, props.c);
+    const formRef = ref();
+    const c = props.c;
+
+    // 将所有和界面状态相关的数据转换为响应式数据，以便在界面上进行双向绑定
+    const keys = Object.keys(c.item);
+    keys.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]
+    });
+  }
+});
+
+export { GctForm };

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,33 @@
+import 'vue';
+import { GctFormItem } from './gct-form-item/gct-form-item.mjs';
+import { GctForm as GctForm$1 } 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 GctFormCollapsePane from './gct-form-collapse-pane/index.mjs';
+import GctFormCollapse from './gct-form-collapse/index.mjs';
+import GctFormGroup from './gct-form-group/index.mjs';
+import GctFormLine from './gct-form-line/index.mjs';
+import GctFormTab from './gct-form-tab/index.mjs';
+import GctFormTabPane from './gct-form-tab-pane/index.mjs';
+import GctFormTitleGroup from './gct-form-title-group/index.mjs';
+
+const GctForm = {
+  install(app) {
+    _gct.register.formItem.register("item", () => new GctFormItemProvider());
+    _gct.register.formItem.register(
+      "hidden",
+      () => new GctFormHiddenItemProvider()
+    );
+    app.use(GctFormCollapsePane);
+    app.use(GctFormCollapse);
+    app.use(GctFormGroup);
+    app.use(GctFormLine);
+    app.use(GctFormTab);
+    app.use(GctFormTabPane);
+    app.use(GctFormTitleGroup);
+    app.component(GctForm$1.name, GctForm$1);
+    app.component(GctFormItem.name, GctFormItem);
+  }
+};
+
+export { GctForm 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,143 @@
+import { reactive, onUnmounted } from 'vue';
+import { TableState } from '../../state/table/table.state.mjs';
+import { TableRowController } from '../table-row/table-row.controller.mjs';
+import { QXEvent } from 'qx-util';
+import { defaults, isNil } from 'lodash-es';
+import { EditorRegisterConst } from '@gct-paas/core';
+
+class GctTableController {
+  /**
+   * Creates an instance of GctTableController.
+   *
+   * @author zhanghanrui
+   * @date 2024-04-15 18:04:10
+   * @param {ITable} model
+   */
+  constructor(model) {
+    this.model = model;
+    this.init();
+  }
+  evt = new QXEvent();
+  state = this.createState();
+  row = {};
+  editorProviders = {};
+  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;
+      {
+        const keys = Object.keys(row);
+        keys.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 filterKeys = Object.keys(this.row).filter((key) => !keys.includes(key));
+    const all = filterKeys.map((key) => {
+      const c = this.row[key];
+      delete this.row[key];
+      {
+        const keys2 = Object.keys(c.data);
+        const id = c.data[this.model.key];
+        keys2.forEach((key2) => {
+          const tag = `${key2}___${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;
+    }
+  }
+}
+function useTableController(fn) {
+  const c = fn();
+  c.state = reactive(c.state);
+  onUnmounted(() => c.destroy());
+  return c;
+}
+
+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/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,6 @@
+import { TableItemController } from './table-item.controller.mjs';
+
+class TableActionItemController extends TableItemController {
+}
+
+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,16 @@
+import { TableEditItemState } from '../../state/table-item/table-edit-item.state.mjs';
+import { TableItemController } from './table-item.controller.mjs';
+
+class TableEditItemController extends TableItemController {
+  createState() {
+    return new TableEditItemState();
+  }
+  active() {
+    return this.row.active();
+  }
+  unActive() {
+    return this.row.unActive();
+  }
+}
+
+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,26 @@
+import { TableITemState } from '../../state/table-item/table-item.state.mjs';
+
+class TableItemController {
+  constructor(row, model) {
+    this.row = row;
+    this.model = model;
+  }
+  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);
+  }
+  createState() {
+    return new TableITemState();
+  }
+  async init() {
+  }
+  async destroy() {
+  }
+}
+
+export { TableItemController };

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

@@ -0,0 +1,28 @@
+import { ITable, ITableController, ITableItemController, ITableRowController, ITableRowState } from '../../interface';
+import { CountLatch } from '../../utils';
+/**
+ * 表格行数据控制器
+ *
+ * @author zhanghanrui
+ * @date 2024-04-16 21:04:46
+ * @export
+ * @class TableRowController
+ * @implements {ITableRowController}
+ */
+export declare class TableRowController implements ITableRowController {
+    readonly table: ITableController;
+    readonly model: ITable;
+    data: IData;
+    item: Record<string, ITableItemController>;
+    fields: string[];
+    state: ITableRowState;
+    protected activeCount: CountLatch;
+    get key(): any;
+    constructor(table: ITableController, model: ITable, data: IData);
+    init(): Promise<void>;
+    change(name: string, newVal: unknown, oldVal: unknown): void;
+    destroy(): Promise<void>;
+    active(): void;
+    unActive(): void;
+    protected createState(): ITableRowState;
+}