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

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

@@ -0,0 +1,31 @@
+import { PropType } from 'vue';
+import { IFormCollapse, IFormCollapseController } from '@gct-paas/core';
+/**
+ * 表单折叠面板
+ */
+export declare const GctFormCollapse: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormCollapseController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormCollapse>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    keys: import('vue').Ref<number[], number[]>;
+    style: IParams;
+    activeKeys: import('vue').Ref<string[], string[]>;
+    expandIconPosition: import('vue').ComputedRef<"left" | "right">;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormCollapseController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormCollapse>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormCollapse;

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

@@ -0,0 +1,73 @@
+import { defineComponent, createVNode, ref, computed } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { Collapse } from 'ant-design-vue';
+import './gct-form-collapse.scss';
+
+"use strict";
+const GctFormCollapse = /* @__PURE__ */ defineComponent({
+  name: "GctFormCollapse",
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  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 ? void 0 : "disabled";
+        return createVNode(Collapse.Panel, {
+          "key": item.name,
+          "header": item.title,
+          "collapsible": collapsible
+        }, {
+          default: () => [items[index]]
+        });
+      })]
+    });
+  }
+});
+
+export { GctFormCollapse, GctFormCollapse as default };

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

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

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

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

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

@@ -0,0 +1,62 @@
+$gct-form-collapse: (
+  width: auto,
+  height: auto,
+);
+
+@include b(form-collapse) {
+  @include set-component-css-var('form-collapse', $gct-form-collapse);
+
+  width: getCssVar(form-collapse, width);
+  height: getCssVar(form-collapse, height);
+  border: none;
+
+  @include when(hidden) {
+    display: none;
+  }
+
+  // 默认样式调整
+  &.ant-collapse{
+    > .ant-collapse-item > .ant-collapse-header {
+      background: #f2f4f7;
+      font-size: 12px;
+      font-weight: 500;
+      color: #212528;
+      padding: 8px 12px;
+    }
+  }
+
+  // 取消面板内容区的边框
+  > .ant-collapse-item {
+    border-bottom: none;
+
+    >.ant-collapse-content{
+      border-top: none;
+
+      >.ant-collapse-content-box{
+        padding: 0;
+      }
+    }
+  }
+
+
+  // 上下模式箭头方向
+  @include m(icon-up-down){
+    > .ant-collapse-item {
+      &.ant-collapse-item-active{
+        > .ant-collapse-header .ant-collapse-arrow{
+          svg{
+            transform: rotate(-90deg) !important;
+          }
+        }
+      }
+
+      > .ant-collapse-header .ant-collapse-arrow{
+        /* stylelint-disable-next-line no-descending-specificity */
+        svg{
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+  }
+}

package/es/widgets/gct-form/gct-form-collapse/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-collapse/index.mjs

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

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

@@ -0,0 +1,29 @@
+import { PropType } from 'vue';
+import { IFormCollapsePane, IFormCollapsePaneController } from '@gct-paas/core';
+/**
+ * 表单折叠面板项
+ */
+export declare const GctFormCollapsePane: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormCollapsePaneController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormCollapsePane>;
+        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<IFormCollapsePaneController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormCollapsePane>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormCollapsePane;

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

@@ -0,0 +1,71 @@
+import { isVNode, defineComponent, mergeProps, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './gct-form-collapse-pane.scss';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const GctFormCollapsePane = /* @__PURE__ */ defineComponent({
+  name: "GctFormCollapsePane",
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("form-collapse-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-collapse-pane-width")] = props.model.width;
+    }
+    if (props.model.height) {
+      style[ns.cssVarName("form-collapse-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?.() || [];
+    const lastVNode = items[items.length - 1];
+    if (lastVNode) {
+      lastVNode.props = mergeProps(lastVNode.props || {}, {
+        class: this.ns.e("last-child")
+      });
+    }
+    return createVNode("div", {
+      "class": [this.ns.b(), this.ns.is("hidden", this.c.state.visible === false)],
+      "style": this.style
+    }, [this.renderContainer(items)]);
+  }
+});
+
+export { GctFormCollapsePane, GctFormCollapsePane as default };

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

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

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

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

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

@@ -0,0 +1,23 @@
+$gct-form-collapse-pane: (
+  width: auto,
+  height: auto,
+  padding: 12px,
+);
+
+@include b(form-collapse-pane) {
+  @include set-component-css-var('form-collapse-pane', $gct-form-collapse-pane);
+
+  width: getCssVar(form-collapse-pane, width);
+  height: getCssVar(form-collapse-pane, height);
+  padding: getCssVar(form-collapse-pane, padding);
+
+  @include when(hidden) {
+    display: none;
+  }
+
+}
+
+// 把最后一个的直接子组件的margin-bottom设置为0
+.#{bem(form-collapse)} .#{bem(form-collapse-pane)} .#{bem(form-collapse-pane,last-child)}{
+  margin-bottom: 0 !important;
+}

package/es/widgets/gct-form/gct-form-collapse-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-collapse-pane/index.mjs

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

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

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+import { IFormGroup, IFormGroupController } from '@gct-paas/core';
+/**
+ * 表单分组
+ */
+export declare const GctFormGroup: 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 GctFormGroup;

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

@@ -0,0 +1,88 @@
+import { isVNode, defineComponent, createVNode, resolveComponent, ref } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './gct-form-group.scss';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const GctFormGroup = /* @__PURE__ */ defineComponent({
+  name: "GctFormGroup",
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("gct-form-group");
+    const keys = ref([0]);
+    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);
+    }
+    const style = {};
+    if (props.model.width) {
+      style[ns.cssVarName("form-group-width")] = props.model.width;
+    }
+    if (props.model.height) {
+      style[ns.cssVarName("form-group-height")] = props.model.height;
+    }
+    return {
+      ns,
+      keys,
+      style,
+      renderContainer
+    };
+  },
+  render() {
+    if (this.c.state.keepalive !== true && this.c.state.visible === false) {
+      return null;
+    }
+    const items = this.$slots.default?.() || [];
+    if (this.model.isCollapse) {
+      let _slot;
+      return createVNode(resolveComponent("a-collapse"), {
+        "activeKey": this.keys,
+        "onUpdate:activeKey": ($event) => this.keys = $event,
+        "class": [this.ns.b(), this.ns.is("hidden-header", this.model.showHeader === false), this.ns.is("hidden", this.c.state.visible === false)],
+        "style": this.style,
+        "ghost": true
+      }, {
+        default: () => [createVNode(resolveComponent("a-collapse-panel"), {
+          "key": "0",
+          "header": this.model.title
+        }, _isSlot(_slot = this.renderContainer(items)) ? _slot : {
+          default: () => [_slot]
+        })]
+      });
+    }
+    return createVNode("div", {
+      "class": [this.ns.b(), this.ns.is("hidden-header", this.model.showHeader === false), this.ns.is("hidden", this.c.state.visible === false)],
+      "style": this.style
+    }, [this.model.showHeader === false ? createVNode("div", {
+      "class": this.ns.e("title")
+    }, [this.model.title]) : null, createVNode("div", {
+      "class": this.ns.e("content")
+    }, [this.renderContainer(items)])]);
+  }
+});
+
+export { GctFormGroup, GctFormGroup as default };

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

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

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

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

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

@@ -0,0 +1,28 @@
+$gct-form-group: (
+  min-height: 32px,
+  width: auto,
+  height: auto,
+);
+
+@include b(gct-form-group) {
+  @include set-component-css-var('form-group', $gct-form-group);
+
+  width: getCssVar(form-group, width);
+  height: getCssVar(form-group, height);
+  min-height: getCssVar(form-group, min-height);
+
+  @include when(hidden-header) {
+    @include e(title) {
+      display: none;
+    }
+
+    @include e(content) {
+      overflow: auto;
+      height: 100%;
+    }
+  }
+
+  @include when(hidden) {
+    display: none;
+  }
+}

package/es/widgets/gct-form/gct-form-group/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-group/index.mjs

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { PropType } from 'vue';
+import { IForm, IFormItem, IFormItemController } from '@gct-paas/core';
+export declare const GctFormItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormItemController>;
+        required: true;
+    };
+    formModel: {
+        type: PropType<IForm>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    style: IParams;
+    required: import('vue').ComputedRef<boolean>;
+    renderLabelTooltip: () => import("vue/jsx-runtime").JSX.Element | null;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormItemController>;
+        required: true;
+    };
+    formModel: {
+        type: PropType<IForm>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormItem;