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

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

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

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

@@ -0,0 +1,19 @@
+import { EditorRegisterConst } from '@gct-paas/core';
+
+function widthTableEditorInstall(providerTag, provider, com) {
+  return {
+    install(app) {
+      if (providerTag && provider) {
+        _gct.register.tableEditor.register(
+          EditorRegisterConst.PREFIX + providerTag,
+          provider
+        );
+      }
+      if (com) {
+        app.component(com.name || com.__name, com);
+      }
+    }
+  };
+}
+
+export { widthTableEditorInstall };

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

@@ -0,0 +1,124 @@
+@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-table__table-header.is-required::before {
+  content: "*";
+  color: var(--gct-color-danger);
+  margin-right: var(--gct-spacing-4);
+  vertical-align: -2px;
+}
+
+.gct-gct-table .ant-table-wrapper {
+  height: 100% !important;
+}
+.gct-gct-table .ant-table-wrapper.is-not-edit .ant-table .ant-table-body {
+  padding-bottom: 0;
+}
+
+.gct-gct-table .ant-form {
+  display: flex;
+  height: 100%;
+}
+.gct-gct-table .ant-form .ant-form-item {
+  margin-bottom: 0;
+  height: 26px;
+}
+.gct-gct-table .ant-table .ant-table-row {
+  height: 44px;
+}
+.gct-gct-table .ant-table .ant-table-row:hover {
+  background-color: #f7f9ff !important;
+}
+.gct-gct-table .ant-table .ant-table-cell {
+  padding: 8px;
+}
+.gct-gct-table .ant-form-item-with-help .ant-form-item-explain {
+  margin-bottom: -18px;
+  height: 18px;
+  min-height: 18px;
+  font-size: 12px;
+}
+.gct-gct-table .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td:not(.ant-table-cell-fix-right, .ant-table-cell-fix-left),
+.gct-gct-table .ant-table-tbody .ant-table-row-hover,
+.gct-gct-table .ant-table-tbody .ant-table-row-hover > td {
+  background-color: transparent !important;
+}
+.gct-gct-table .ant-btn-text.ant-btn {
+  border-color: transparent;
+}
+.gct-gct-table .ant-spin-nested-loading {
+  height: 100%;
+}
+.gct-gct-table .ant-spin-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.gct-gct-table .ant-table {
+  height: 100%;
+  flex-grow: 1;
+}
+.gct-gct-table .ant-pagination {
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,51 @@
+import { PropType } from 'vue';
+import { TablePaginationConfig } from 'ant-design-vue';
+import { ITable } from '../../interface';
+export declare const GctTable: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    model: {
+        type: PropType<ITable>;
+        required: true;
+    };
+    data: {
+        type: PropType<IData[]>;
+        default: () => never[];
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    c: import('../..').ITableController;
+    loadingState: import('vue').Ref<IObject, IObject>;
+    elRef: import('vue').Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    formRef: import('vue').Ref<any, any>;
+    tableRef: import('vue').Ref<any, any>;
+    scrollHeight: import('vue').Ref<number | undefined, number | undefined>;
+    pagination: import('vue').ComputedRef<false | TablePaginationConfig>;
+    isEdit: import('vue').ComputedRef<boolean>;
+    handleTableChange: (pagination: TablePaginationConfig, filters: Record<string, import('ant-design-vue/lib/table/interface').FilterValue | null>, sorter: import('ant-design-vue/lib/table/interface').SorterResult<any> | import('ant-design-vue/lib/table/interface').SorterResult<any>[], extra: import('ant-design-vue/lib/table/interface').TableCurrentDataSource<any>) => void;
+    mouseOver: (e: MouseEvent) => void;
+    mouseOut: (e: MouseEvent) => void;
+    onValidate: (name: string, status: boolean, errorMsgs: string[]) => void;
+    validate: () => any;
+    reload: (params?: IParams) => Promise<void>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "rowChange"[], "rowChange", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    model: {
+        type: PropType<ITable>;
+        required: true;
+    };
+    data: {
+        type: PropType<IData[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{
+    onRowChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    data: IData[];
+    count: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,414 @@
+import { defineComponent, createVNode, resolveComponent, mergeProps, h, ref, watch, onMounted, onUnmounted, computed, isVNode } from 'vue';
+import { isBoolean, cloneDeep, isNil, clone, defaults } from 'lodash-es';
+import { isPromise, isAsync } from 'qx-util';
+import { useNamespace, t } from '@gct-paas/core';
+import { useTableController, GctTableController } from '../../controller/gct-table/gct-table.controller.mjs';
+import { useAntTableScrollHeight } from '../../hooks/use-ant-table/use-ant-table.mjs';
+import './gct-table.css';/* empty css                */
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const GctTable = /* @__PURE__ */ defineComponent({
+  name: 'GctTable',
+  props: {
+    // local 必给，避免vue的双向数据绑定不生效
+    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));
+      });
+    }
+
+    // 要放在 return 之前，避免初始化顺序问题导致加载参数异常
+    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 => {
+      const rowId = findRowId(e.target);
+      if (!rowId && hoverRow) {
+        hoverRow.state.hover = false;
+        hoverRow = null;
+      }
+    };
+    const mouseLeave = e => {
+      const rowId = findRowId(e.target);
+      if (!rowId && 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 || undefined;
+      const sizeOptions = pagination.pageSizeOptions?.map(item => `${item}`); //ant组件识别纯数字数组的时候不会显示中文
+
+      return {
+        class: 'pagination-total-left',
+        total: c.state.total,
+        current: c.state.page,
+        pageSize: c.state.size,
+        pageSizeOptions: sizeOptions,
+        showSizeChanger: pagination.showSizeChanger,
+        showTotal: showTotal
+      };
+    });
+    const handleTableChange = (pagination, filters, sorter) => {
+      console.log('[ pagination ] >', pagination, filters, sorter);
+      c.updatePagination({
+        page: pagination.current,
+        size: pagination.pageSize
+      });
+      c.reload();
+    };
+    const {
+      scrollHeight
+    } = useAntTableScrollHeight(elRef, {
+      pagination: !!pagination.value
+    });
+
+    // 是否有编辑项
+    const isEdit = computed(() => {
+      return c.model.columns.some(col => col.type === 'edit');
+    });
+    return {
+      ns,
+      c,
+      loadingState,
+      elRef,
+      formRef,
+      tableRef,
+      scrollHeight,
+      pagination,
+      isEdit,
+      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;
+        }
+      })]
+    })]);
+  }
+});
+
+export { GctTable };

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

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

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

@@ -0,0 +1,9 @@
+import GctTable from './gct-table/index.mjs';
+
+const TableWidgets = {
+  install(app) {
+    app.use(GctTable);
+  }
+};
+
+export { TableWidgets as default };

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,17 @@
+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';
+import '@vueuse/core';
+
+const BasicModal = withInstall(_sfc_main);
+
+export { BasicModal };