@gct-paas/core-web 0.0.1-dev.14 → 0.0.1-dev.16

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

@@ -0,0 +1,141 @@
+import { isVNode, defineComponent, h, resolveComponent, createVNode, computed } from 'vue';
+import { EditorRegisterConst, useNamespace } from '@gct-paas/core';
+import './gct-form-item.scss';
+
+"use strict";
+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
+    }
+  },
+  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"),
+        "placement": "topLeft",
+        "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(`\u672A\u627E\u5230\u8868\u5355\u9879${this.model.name}\u7684\u7F16\u8F91\u5668${this.model.editor.type}\u7684\u9002\u914D\u5668\u5B9E\u4F8B\uFF1A`, 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,
+            class: [this.ns.e("editor"), this.ns.e(labelPosition), this.model.editor.class],
+            style: this.model.editor.style,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            "onUpdate:value": (value) => {
+              this.c.editorValue = value;
+            }
+          });
+        } else {
+          console.error(`\u672A\u627E\u5230\u7F16\u8F91\u5668\u7ED8\u5236\u7EC4\u4EF6\uFF1A${this.model.name} - ${this.model.editor.type}\uFF0C\u8BF7\u5B9E\u73B0 component \u6216 render \u65B9\u6CD5`);
+        }
+      }
+    } else {
+      console.error(`\u672A\u627E\u5230\u7F16\u8F91\u5668\u9002\u914D\u5668\uFF1A${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()];
+      };
+    }
+    return createVNode(resolveComponent("a-form-item"), {
+      "key": this.c.model.name,
+      "colon": this.formModel.noColon === true ? false : this.model.noColon === true ? false : true,
+      "name": this.model.name,
+      "label": void 0,
+      "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)],
+      "style": this.style,
+      "rules": this.c.state.visible === true ? this.model.rules : [],
+      "layout": "horizontal"
+    }, _isSlot(itemSlots) ? itemSlots : {
+      default: () => [itemSlots]
+    });
+  }
+});
+
+export { GctFormItem, GctFormItem as default };

package/es/widgets/gct-form/gct-form-item/gct-form-item.provider.d.ts

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

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

@@ -0,0 +1,11 @@
+import { useFormItemController, FormItemController } from '@gct-paas/core';
+
+"use strict";
+class GctFormItemProvider {
+  component = "gct-form-item";
+  createController(form, item) {
+    return useFormItemController(() => new FormItemController(form, item));
+  }
+}
+
+export { GctFormItemProvider };

package/es/widgets/gct-form/gct-form-item/gct-form-item.scss

@@ -0,0 +1,115 @@
+$gct-form-item: (
+  min-height: 32px,
+  height: auto,
+  width: auto,
+  label-width: 100px,
+  readonly-color: #999,
+  label-align: right,
+  editor-align: left,
+  label-color: #252525,
+  label-font-size: 14px,
+  checkbox-width: 6px,
+  checkbox-height: 9px,
+);
+
+@include b(gct-form-item) {
+  @include set-component-css-var('form-item', $gct-form-item);
+
+  width: getCssVar(form-item, width);
+  height: getCssVar(form-item, height);
+  min-height: getCssVar(form-item, min-height);
+
+  @include when(hidden-label) {
+    .gct-gct-form-item__editor {
+      width: 100%;
+    }
+  }
+
+  @include when(hidden) {
+    display: none;
+  }
+
+  @include when(readonly) {
+    margin-bottom: 18px !important;
+    #{getCssVarName(form-item, min-height)}: 22px;
+
+    .ant-form-item-label {
+      padding: 0;
+
+      label {
+        color: getCssVar(form-item, readonly-color);
+      }
+    }
+
+    @include e(label) {
+      color: getCssVar(form-item, readonly-color);
+    }
+  }
+
+  @include when(required) {
+    @include e(label) {
+      &::before {
+        display: inline-block;
+        margin-inline-end: 4px;
+        color: #ff4d4f;
+        font-size: 14px;
+        font-family: SimSun, sans-serif;
+        line-height: 1;
+        content: '*';
+      }
+    }
+  }
+
+  .ant-form-item-label {
+    width: getCssVar(form-item, label-width);
+    text-align: getCssVar(form-item, label-align);
+
+    label {
+      color: getCssVar(form-item, label-color);
+      font-size: getCssVar(form-item, label-font-size);
+    }
+  }
+
+  .ant-form-item-control-input-content {
+    text-align: getCssVar(form-item, editor-align);
+  }
+
+  @include e(label) {
+    width: getCssVar(form-item, label-width);
+    line-height: 1.5715;
+    font-size: getCssVar(form-item, label-font-size);
+
+    @include m(top) {
+      width: 100%;
+    }
+  }
+
+  @include m(label-top) {
+    @include e(label) {
+      margin-bottom: 8px;
+    }
+  }
+
+  // 组件样式压
+  .ant-form-item-control-input {
+    flex-grow: 1;
+  }
+
+  .ant-checkbox-group {
+    font-size: getCssVar(form-item, label-font-size);
+
+    .ant-checkbox-wrapper {
+      font-size: getCssVar(form-item, label-font-size);
+    }
+
+    .ant-form input[type="checkbox"], .ant-checkbox-inner {
+      width: getCssVar(form-item, label-font-size);
+      height: getCssVar(form-item, label-font-size);
+    }
+
+    .ant-checkbox-inner::after {
+      width: getCssVar(form-item, checkbox-width);
+      height: getCssVar(form-item, checkbox-height);
+    }
+  }
+}

package/es/widgets/gct-form/gct-form-tab/gct-form-tab.d.ts

@@ -0,0 +1,28 @@
+import { PropType } from 'vue';
+import { IFormTab, IFormTabController } from '@gct-paas/core';
+/**
+ * 表单分页
+ */
+export declare const GctFormTab: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormTabController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormTab>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    style: IParams;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormTabController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormTab>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormTab;

package/es/widgets/gct-form/gct-form-tab/gct-form-tab.mjs

@@ -0,0 +1,53 @@
+import { defineComponent, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './gct-form-tab.scss';
+
+"use strict";
+const GctFormTab = /* @__PURE__ */ defineComponent({
+  name: "GctFormTab",
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("form-tab");
+    const style = {};
+    if (props.model.width) {
+      style[ns.cssVarName("form-tab-width")] = props.model.width;
+    }
+    if (props.model.height) {
+      style[ns.cssVarName("form-tab-height")] = props.model.height;
+    }
+    return {
+      ns,
+      style
+    };
+  },
+  render() {
+    if (this.c.state.keepalive !== true && this.c.state.visible === false) {
+      return null;
+    }
+    const items = this.$slots.default?.() || [];
+    return createVNode(resolveComponent("a-tabs"), {
+      "class": [this.ns.b(), this.ns.is("hidden", this.c.state.visible === false), this.ns.m(this.model.navPosition || "left")],
+      "style": this.style
+    }, {
+      default: () => [this.model.children?.map((item, index) => {
+        return createVNode(resolveComponent("a-tab-pane"), {
+          "key": item.name,
+          "tab": item.title
+        }, {
+          default: () => [items[index]]
+        });
+      })]
+    });
+  }
+});
+
+export { GctFormTab, GctFormTab as default };

package/es/widgets/gct-form/gct-form-tab/gct-form-tab.provider.d.ts

@@ -0,0 +1,5 @@
+import { IFormController, IFormTabController, IFormItemBasic, IFormItemProvider } from '@gct-paas/core';
+export declare class GctFormTabProvider implements IFormItemProvider {
+    component: string;
+    createController(form: IFormController, item: IFormItemBasic): IFormTabController;
+}

package/es/widgets/gct-form/gct-form-tab/gct-form-tab.provider.mjs

@@ -0,0 +1,11 @@
+import { useFormItemController, FormTabController } from '@gct-paas/core';
+
+"use strict";
+class GctFormTabProvider {
+  component = "gct-form-tab";
+  createController(form, item) {
+    return useFormItemController(() => new FormTabController(form, item));
+  }
+}
+
+export { GctFormTabProvider };

package/es/widgets/gct-form/gct-form-tab/gct-form-tab.scss

@@ -0,0 +1,63 @@
+$gct-form-tab: (
+  tab-spacing: 52px,
+  width: auto,
+  height: auto,
+);
+
+@include b(form-tab) {
+  @include set-component-css-var('form-tab', $gct-form-tab);
+
+  width: getCssVar(form-tab, width);
+  height: getCssVar(form-tab, height);
+
+  @include when(hidden) {
+    display: none;
+  }
+
+  // 原组件样式调整
+  >.ant-tabs-nav{
+    margin-bottom: 0 !important;
+    background-color: #fff;
+
+    >.ant-tabs-nav-wrap{
+      border-bottom: 1px solid #E0E3EA;
+    }
+
+    .ant-tabs-tab+.ant-tabs-tab{
+      margin-left: getCssVar(form-tab, tab-spacing);
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    .ant-tabs-tab {
+      padding: 7px 0;
+    }
+  }
+
+  &.ant-tabs {
+    .ant-tabs-tabpane {
+      overflow: hidden auto;
+    }
+  }
+
+  >.ant-tabs-content-holder >.ant-tabs-content{
+    height: 100%;
+  }
+
+  @include m(left){
+    >.ant-tabs-nav .ant-tabs-nav-wrap{
+      justify-content: flex-start;
+    }
+  }
+
+  @include m(right){
+    >.ant-tabs-nav .ant-tabs-nav-wrap{
+      justify-content: flex-end;
+    }
+  }
+
+  @include m(center){
+    >.ant-tabs-nav .ant-tabs-nav-wrap{
+      justify-content: center;
+    }
+  }
+}

package/es/widgets/gct-form/gct-form-tab/index.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/es/widgets/gct-form/gct-form-tab/index.mjs

@@ -0,0 +1,12 @@
+import { GctFormTabProvider } from './gct-form-tab.provider.mjs';
+import { GctFormTab as GctFormTab$1 } from './gct-form-tab.mjs';
+
+"use strict";
+var GctFormTab = {
+  install(app) {
+    _gct.register.formItem.register("tab", () => new GctFormTabProvider());
+    app.component(GctFormTab$1.name, GctFormTab$1);
+  }
+};
+
+export { GctFormTab as default };

package/es/widgets/gct-form/gct-form-tab-pane/gct-form-tab-pane.d.ts

@@ -0,0 +1,29 @@
+import { PropType } from 'vue';
+import { IFormTabPane, IFormTabPaneController } from '@gct-paas/core';
+/**
+ * 表单分页pane
+ */
+export declare const GctFormTabPane: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormTabPaneController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormTabPane>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    style: IParams;
+    renderContainer: (items: unknown[]) => import("vue/jsx-runtime").JSX.Element | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormTabPaneController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormTabPane>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormTabPane;

package/es/widgets/gct-form/gct-form-tab-pane/gct-form-tab-pane.mjs

@@ -0,0 +1,65 @@
+import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './gct-form-tab-pane.scss';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const GctFormTabPane = /* @__PURE__ */ defineComponent({
+  name: "GctFormTabPane",
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("form-tab-pane");
+    const style = {};
+    function renderContainer(items) {
+      if (props.model.layout === "flex") {
+        return createVNode(resolveComponent("flex-container"), {
+          "layout": props.model.flex
+        }, _isSlot(items) ? items : {
+          default: () => [items]
+        });
+      }
+      if (props.model.layout === "grid") {
+        return createVNode(resolveComponent("grid-container"), {
+          "layout": props.model.grid
+        }, _isSlot(items) ? items : {
+          default: () => [items]
+        });
+      }
+      console.error("\u4E0D\u652F\u6301\u7684layout\u7C7B\u578B" + props.model.layout);
+    }
+    if (props.model.width) {
+      style[ns.cssVarName("form-tab-pane-width")] = props.model.width;
+    }
+    if (props.model.height) {
+      style[ns.cssVarName("form-tab-pane-height")] = props.model.height;
+    }
+    return {
+      ns,
+      style,
+      renderContainer
+    };
+  },
+  render() {
+    if (this.c.state.keepalive !== true && this.c.state.visible === false) {
+      return null;
+    }
+    const items = this.$slots.default?.() || [];
+    return createVNode("div", {
+      "class": [this.ns.b(), this.ns.is("hidden", this.c.state.visible === false)],
+      "style": this.style
+    }, [this.renderContainer(items)]);
+  }
+});
+
+export { GctFormTabPane, GctFormTabPane as default };

package/es/widgets/gct-form/gct-form-tab-pane/gct-form-tab-pane.provider.d.ts

@@ -0,0 +1,5 @@
+import { IFormController, IFormTabPaneController, IFormItemBasic, IFormItemProvider } from '@gct-paas/core';
+export declare class GctFormTabPaneProvider implements IFormItemProvider {
+    component: string;
+    createController(form: IFormController, item: IFormItemBasic): IFormTabPaneController;
+}

package/es/widgets/gct-form/gct-form-tab-pane/gct-form-tab-pane.provider.mjs

@@ -0,0 +1,11 @@
+import { useFormItemController, FormTabPaneController } from '@gct-paas/core';
+
+"use strict";
+class GctFormTabPaneProvider {
+  component = "gct-form-tab-pane";
+  createController(form, item) {
+    return useFormItemController(() => new FormTabPaneController(form, item));
+  }
+}
+
+export { GctFormTabPaneProvider };

package/es/widgets/gct-form/gct-form-tab-pane/gct-form-tab-pane.scss

@@ -0,0 +1,16 @@
+$gct-form-tab-pane: (
+  width: auto,
+  height: auto,
+);
+
+@include b(form-tab-pane) {
+  @include set-component-css-var('form-tab-pane', $gct-form-tab-pane);
+
+  width: getCssVar(form-tab-pane, width);
+  height: 100%;
+  background-color: #fff;
+
+  @include when(hidden) {
+    display: none;
+  }
+}

package/es/widgets/gct-form/gct-form-tab-pane/index.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/es/widgets/gct-form/gct-form-tab-pane/index.mjs

@@ -0,0 +1,15 @@
+import { GctFormTabPaneProvider } from './gct-form-tab-pane.provider.mjs';
+import { GctFormTabPane as GctFormTabPane$1 } from './gct-form-tab-pane.mjs';
+
+"use strict";
+var GctFormTabPane = {
+  install(app) {
+    _gct.register.formItem.register(
+      "tab-pane",
+      () => new GctFormTabPaneProvider()
+    );
+    app.component(GctFormTabPane$1.name, GctFormTabPane$1);
+  }
+};
+
+export { GctFormTabPane as default };

package/es/widgets/gct-form/gct-form-title-group/gct-form-title-group.d.ts

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+import { IFormGroup, IFormGroupController } from '@gct-paas/core';
+/**
+ * 表单分组
+ */
+export declare const GctFormTitleGroup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormGroupController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormGroup>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    keys: import('vue').Ref<number[], number[]>;
+    style: IParams;
+    renderContainer: (items: unknown[]) => import("vue/jsx-runtime").JSX.Element | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormGroupController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormGroup>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormTitleGroup;