@gct-paas/core-web 0.0.1-dev.15 → 0.0.1-dev.17

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;

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

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

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

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

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

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

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

@@ -0,0 +1,25 @@
+$gct-form-title-group: (
+  min-height: 32px,
+  width: auto,
+  height: auto,
+);
+
+@include b(gct-form-title-group) {
+  @include set-component-css-var('form-title-group', $gct-form-title-group);
+
+  @include when(hidden) {
+    display: none;
+  }
+
+  @include e(title) {
+    color: #252525;
+    font-size: 12px;
+    padding: 8px 0;
+  }
+
+  @include e(content) {
+    .ant-form-item-label {
+      --gct-form-item-label-color: #797A7D;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import { FormContainerType } from '@gct-paas/core';
+import { GctFormTitleGroupProvider } from './gct-form-title-group.provider.mjs';
+import { GctFormTitleGroup as GctFormTitleGroup$1 } from './gct-form-title-group.mjs';
+
+"use strict";
+var GctFormTitleGroup = {
+  install(app) {
+    _gct.register.formItem.register(
+      FormContainerType.FORM_TITLE_GROUP,
+      () => new GctFormTitleGroupProvider()
+    );
+    app.component(GctFormTitleGroup$1.name, GctFormTitleGroup$1);
+  }
+};
+
+export { GctFormTitleGroup as default };

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

@@ -0,0 +1,31 @@
+import { PropType, VNode } from 'vue';
+import { IForm, IFormItemBasic, IFormContainer, IFormItem, IFormController } from '@gct-paas/core';
+export declare const GctForm: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IForm>;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    formRef: import('vue').Ref<any, any>;
+    staticStyle: IData;
+    renderItem: (item: IFormItem) => import("vue/jsx-runtime").JSX.Element;
+    renderContainer: (item: IFormContainer) => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }> | null | undefined;
+    renderChildren: (children: IFormItemBasic[]) => VNode[];
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IForm>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctForm;

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

@@ -0,0 +1,109 @@
+import { isVNode, defineComponent, createVNode, resolveComponent, provide, ref, reactive, h } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './gct-form.scss';
+
+"use strict";
+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
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("gct-form");
+    provide("formController", props.c);
+    const formRef = ref(null);
+    const c = props.c;
+    const keys = Object.keys(c.item);
+    keys.forEach((key) => {
+      const item = c.item[key];
+      item.state = reactive(item.state);
+    });
+    const renderItem = (item) => {
+      return createVNode(resolveComponent("gct-form-item"), {
+        "class": item.class,
+        "style": item.style,
+        "c": c.item[item.name],
+        "formModel": props.model,
+        "model": item
+      }, null);
+    };
+    const renderContainer = (item) => {
+      const provider = c.provider[item.name];
+      if (!provider) {
+        console.error(`\u672A\u627E\u5230\u8868\u5355\u9879\u9002\u914D\u5668\u5B9E\u4F8B\uFF1A${item.name}`, item);
+        return null;
+      }
+      if (provider) {
+        return h(typeof provider.component === "string" ? resolveComponent(provider.component) : provider.component, {
+          key: item.name,
+          model: item,
+          c: c.item[item.name],
+          data: c.state.data,
+          class: item.class,
+          style: item.style
+        }, renderChildren(item.children || []));
+      } else {
+        console.error(`\u672A\u627E\u5230\u8868\u5355\u5BB9\u5668\u9002\u914D\u5668\uFF1A${item.name} - ${item.type}`);
+      }
+    };
+    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.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,
+      "class": [this.ns.b(), this.ns.is("info", this.model.info === true)],
+      "autocomplete": "off",
+      "style": this.staticStyle
+    }, _isSlot(_slot = this.model.children.map((item) => this.renderContainer(item))) ? _slot : {
+      default: () => [_slot]
+    });
+  }
+});
+
+export { GctForm, GctForm as default };

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

@@ -0,0 +1,11 @@
+$gct-form: (
+  // 'label-width': 100px,
+);
+
+@include b(gct-form) {
+  @include set-component-css-var('form', $gct-form);
+
+  @include when(info) {
+    padding: 18px 12px 2px;
+  }
+}

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

@@ -0,0 +1,31 @@
+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 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';
+
+"use strict";
+var 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(GctFormTab);
+    app.use(GctFormTabPane);
+    app.use(GctFormTitleGroup);
+    app.component(GctForm$1.name, GctForm$1);
+    app.component(GctFormItem.name, GctFormItem);
+  }
+};
+
+export { GctForm as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gct-paas/core-web",
-  "version": "0.0.1-dev.15",
+  "version": "0.0.1-dev.17",
   "type": "module",
   "description": "paas 平台网页端核心包",
   "main": "dist/index.min.cjs",
@@ -44,18 +44,21 @@
     "gen-api:platform": "gct-paas gen-api --url=http://paas.paasdev.gct-paas.com --tag=platform -t ../cli/hbs-temp -o ./src/service/gct-platform && prettier './src/service/gct-platform' --write"
   },
   "dependencies": {
-    "@gct-paas/core": "0.0.1-dev.15",
+    "@gct-paas/core": "0.0.1-dev.17",
     "@monaco-editor/loader": "^1.5.0",
+    "ant-design-vue": "3.2.20",
+    "lodash-es": "^4.17.21",
     "monaco-editor": "^0.52.2",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue3-colorpicker": "^2.3.0"
   },
   "devDependencies": {
-    "@gct-paas/build": "0.0.1-dev.15",
+    "@gct-paas/build": "0.0.1-dev.17",
     "@gct-paas/scss": "0.0.1-dev.14",
-    "sass": "^1.84.0"
+    "sass": "^1.85.1"
   },
   "peerDependencies": {
     "vue": "^3.x"
   },
-  "gitHead": "cff2e1934fb89e6ca59da3baa5281d34b695ded4"
+  "gitHead": "419dd717051ab05e03f561d8215a5ba6309816c2"
 }