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

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

@@ -1,18 +1,26 @@
 import { PropType } from 'vue';
-import { IForm, IFormItem, IFormItemController } from '@gct-paas/core';
+import { IEditForm, IFormItem, IFormItemController } from '../../../interface';
 export declare const GctFormItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     c: {
         type: PropType<IFormItemController>;
         required: true;
     };
     formModel: {
-        type: PropType<IForm>;
+        type: PropType<IEditForm>;
         required: true;
     };
     model: {
         type: PropType<IFormItem>;
         required: true;
     };
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
     style: IParams;
@@ -24,12 +32,23 @@ export declare const GctFormItem: import('vue').DefineComponent<import('vue').Ex
         required: true;
     };
     formModel: {
-        type: PropType<IForm>;
+        type: PropType<IEditForm>;
         required: true;
     };
     model: {
         type: PropType<IFormItem>;
         required: true;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    count: number;
+    context: IContext;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default GctFormItem;

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

@@ -0,0 +1,163 @@
+import { defineComponent, h, resolveComponent, createVNode, computed, isVNode } from 'vue';
+import { EditorRegisterConst, useNamespace } from '@gct-paas/core';
+import './gct-form-item.css';/* empty css                    */
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const GctFormItem = /* @__PURE__ */ defineComponent({
+  name: 'GctFormItem',
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    formModel: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    count: {
+      type: Number,
+      default: 0
+    },
+    context: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('gct-form-item');
+    const style = {};
+    if (props.formModel.labelWidth) {
+      style[ns.cssVarName('form-item-label-width')] = props.formModel.labelWidth;
+    }
+    if (props.model.labelWidth) {
+      style[ns.cssVarName('form-item-label-width')] = props.model.labelWidth;
+    }
+    if (props.model.labelAlign) {
+      style[ns.cssVarName('form-item-label-align')] = props.model.labelAlign;
+    }
+    if (props.model.editorAlign) {
+      style[ns.cssVarName('form-item-editor-align')] = props.model.editorAlign;
+    }
+    if (props.model.width) {
+      style[ns.cssVarName('form-item-width')] = props.model.width;
+    }
+    if (props.model.margin) {
+      style.margin = props.model.margin;
+    }
+    if (props.model.padding) {
+      style.padding = props.model.padding;
+    }
+    const required = computed(() => {
+      return !!props.model.rules?.find(item => item.required);
+    });
+    const renderLabelTooltip = () => {
+      if (!props.model.labelTooltip) {
+        return null;
+      }
+      return createVNode(resolveComponent("a-tooltip"), {
+        "class": ns.e('label-tooltip'),
+        "overlayClassName": ns.e('label-tooltip-overlay'),
+        "overlayStyle": {
+          width: props.model.labelTipWidth
+        },
+        "placement": "top",
+        "title": props.model.labelTooltip
+      }, {
+        default: () => [createVNode("span", {
+          "class": "iconfont icon-assist ml5px text-[#bfbfbf]"
+        }, null)]
+      });
+    };
+    return {
+      ns,
+      style,
+      required,
+      renderLabelTooltip
+    };
+  },
+  render() {
+    const provider = _gct.register.editor.get(EditorRegisterConst.PREFIX + this.model.editor.type);
+    if (!provider) {
+      console.error(`未找到表单项${this.model.name}的编辑器${this.model.editor.type}的适配器实例：`, this.model);
+      return null;
+    }
+    const labelPosition = this.model.labelPosition || 'left';
+    let content = null;
+    if (provider) {
+      if (provider.render) {
+        content = provider.render(this.c.editorValue, this.c.data, this.model);
+      } else {
+        if (provider.component) {
+          content = h(typeof provider.component === 'string' ? resolveComponent(provider.component) : provider.component, {
+            key: this.model.name,
+            c: this.c,
+            value: this.c.editorValue,
+            itemModel: this.model,
+            model: this.model.editor,
+            data: this.c.data,
+            disabled: this.c.state.disabled,
+            readonly: this.c.state.readonly,
+            keepalive: this.c.state.keepalive,
+            visible: this.c.state.visible,
+            size: this.formModel.size,
+            count: this.count,
+            isEmptyText: this.formModel.isEmptyText,
+            context: this.context,
+            class: [this.ns.e('editor'), this.ns.e(labelPosition), this.formModel.size ? this.ns.m(this.formModel.size) : null, this.model.editor.class],
+            style: this.model.editor.style,
+            'onUpdate:value': value => {
+              // eslint-disable-next-line vue/no-mutating-props
+              this.c.editorValue = value;
+            },
+            onBlur: () => {
+              this.c.blur();
+            }
+          });
+        } else {
+          console.error(`未找到编辑器绘制组件：${this.model.name} - ${this.model.editor.type}，请实现 component 或 render 方法`);
+        }
+      }
+    } else {
+      console.error(`未找到编辑器适配器：${this.model.name} - ${this.model.editor.type}`);
+    }
+    if (this.model.label && labelPosition === 'top') {
+      content = [createVNode("div", {
+        "class": [this.ns.e('label'), this.ns.em('label', labelPosition)]
+      }, [this.model.label, this.renderLabelTooltip()]), content];
+    }
+    const itemSlots = {
+      default: () => {
+        return content;
+      }
+    };
+    if (labelPosition === 'left' && this.model.label) {
+      itemSlots.label = () => {
+        return [createVNode("span", null, [this.model.label]), this.renderLabelTooltip()];
+      };
+    }
+    if (this.c.state.visible === false) return;
+    return createVNode(resolveComponent("a-form-item"), {
+      "key": this.c.model.name,
+      "count": this.count,
+      "colon": this.formModel.noColon === true ? false : this.model.noColon === true ? false : true,
+      "name": this.model.name.split('.'),
+      "label": undefined,
+      "class": [this.ns.b(), this.ns.is('readonly', this.model.editor.readonly === true), this.ns.is('required', this.required),
+      // this.ns.is('hidden', this.c.state.visible === false),
+      this.ns.is('hidden-label', !this.model.label), this.ns.m('label-' + labelPosition), this.ns.is('hidden-error', this.model.hiddenError === true || this.formModel.hiddenError === true)],
+      "style": this.style,
+      "rules": this.c.state.visible === true ? this.model.rules : [],
+      "layout": "horizontal"
+    }, _isSlot(itemSlots) ? itemSlots : {
+      default: () => [itemSlots]
+    });
+  }
+});
+
+export { GctFormItem };

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

@@ -0,0 +1,17 @@
+import { RuleObject } from 'ant-design-vue/es/form';
+import { IEditorBasic, IFormItem } from '../../../interface';
+/**
+ * 表单项模型
+ *
+ * @export
+ * @class GctFormItemModel
+ * @implements {IFormItem}
+ */
+export declare class GctFormItemModel implements IFormItem {
+    type: "item";
+    name: string;
+    editor: IEditorBasic;
+    label?: string;
+    rules?: RuleObject[];
+    constructor(name: string, label: string, opts: Partial<IFormItem>, editor: IEditorBasic);
+}

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

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

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

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

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

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

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

@@ -0,0 +1,72 @@
+@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-line {
+  width: 100%;
+  padding: 8px 0;
+}
+.gct-gct-form-line__line {
+  width: 100%;
+  border-top: 1px solid #F3F5F8;
+}

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

@@ -0,0 +1,37 @@
+import { PropType } from 'vue';
+import { IFormLine, IFormLineController } from '../../../interface';
+export declare const GctFormLine: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormLineController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormLine>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    style: import('vue').ComputedRef<{
+        paddingTop: string | undefined;
+        paddingBottom: string | undefined;
+    }>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormLineController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormLine>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    context: IContext;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,48 @@
+import { defineComponent, createVNode, computed } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './gct-form-line.css';/* empty css                    */
+
+const GctFormLine = /* @__PURE__ */ defineComponent({
+  name: 'GctFormLine',
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('gct-form-line');
+    const style = computed(() => {
+      const {
+        paddingTop,
+        paddingBottom
+      } = props.model;
+      return {
+        paddingTop,
+        paddingBottom
+      };
+    });
+    return {
+      ns,
+      style
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": [this.ns.b(), this.ns.is('hidden', this.c.state.visible === false)],
+      "style": this.style
+    }, [createVNode("div", {
+      "class": this.ns.e('line')
+    }, null)]);
+  }
+});
+
+export { GctFormLine };

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

@@ -0,0 +1,15 @@
+import { IFormLine } from '../../../interface';
+/**
+ * 表单分割线
+ *
+ * @export
+ * @class GctFormLineModel
+ * @implements {IFormLine}
+ */
+export declare class GctFormLineModel implements IFormLine {
+    type: string;
+    layout: 'flex' | 'grid';
+    name: string;
+    isContainer: boolean;
+    constructor(name: string, opts?: Partial<IFormLine>);
+}

package/es/modules/gct-form/widgets/gct-form/gct-form-line/gct-form-line.provider.d.ts

@@ -0,0 +1,5 @@
+import { IFormController, IFormItemBasic, IFormItemProvider, IFormLineController } from '../../../interface';
+export declare class GctFormLineProvider implements IFormItemProvider {
+    component: string;
+    createController(form: IFormController, item: IFormItemBasic): IFormLineController;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,108 @@
+@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-tab {
+  --gct-form-tab-tab-spacing: 52px;
+  --gct-form-tab-width: auto;
+  --gct-form-tab-height: auto;
+  width: var(--gct-form-tab-width);
+  height: var(--gct-form-tab-height);
+}
+.gct-form-tab.ant-tabs {
+  height: 100%;
+}
+.gct-form-tab.is-hidden {
+  display: none;
+}
+
+.gct-form-tab > .ant-tabs-nav {
+  margin-bottom: 0 !important;
+  background-color: #fff;
+}
+.gct-form-tab > .ant-tabs-nav > .ant-tabs-nav-wrap {
+  border-bottom: 1px solid #E0E3EA;
+}
+.gct-form-tab > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab {
+  margin-left: var(--gct-form-tab-tab-spacing);
+}
+.gct-form-tab > .ant-tabs-nav .ant-tabs-tab {
+  padding: 7px 0;
+}
+.gct-form-tab.ant-tabs .ant-tabs-tabpane {
+  overflow: hidden auto;
+}
+.gct-form-tab > .ant-tabs-content-holder > .ant-tabs-content {
+  height: 100%;
+}
+.gct-form-tab--left > .ant-tabs-nav .ant-tabs-nav-wrap {
+  justify-content: flex-start;
+}
+
+.gct-form-tab--right > .ant-tabs-nav .ant-tabs-nav-wrap {
+  justify-content: flex-end;
+}
+
+.gct-form-tab--center > .ant-tabs-nav .ant-tabs-nav-wrap {
+  justify-content: center;
+}

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IFormTab, IFormTabController } from '@gct-paas/core';
+import { IFormTab, IFormTabController } from '../../../interface';
 /**
  * 表单分页
  */
@@ -12,6 +12,10 @@ export declare const GctFormTab: import('vue').DefineComponent<import('vue').Ext
         type: PropType<IFormTab>;
         required: true;
     };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
     style: IParams;
@@ -24,5 +28,11 @@ export declare const GctFormTab: import('vue').DefineComponent<import('vue').Ext
         type: PropType<IFormTab>;
         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 GctFormTab;