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

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/modules/gct-form/widgets/gct-form/gct-form-tab/gct-form-tab.d.ts

@@ -0,0 +1,38 @@
+import { PropType } from 'vue';
+import { IFormTab, IFormTabController } from '../../../interface';
+/**
+ * 表单分页
+ */
+export declare const GctFormTab: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormTabController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormTab>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>, {
+    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;
+    };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    context: IContext;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormTab;

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

@@ -0,0 +1,72 @@
+import { defineComponent, createVNode, resolveComponent, watch, onMounted } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { useForm } from '../../../hooks/use-form/use-form.mjs';
+import './gct-form-tab.css';/* empty css                   */
+
+/**
+ * 表单分页
+ */
+const GctFormTab = /* @__PURE__ */ defineComponent({
+  name: 'GctFormTab',
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('form-tab');
+    const form = useForm();
+    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;
+    }
+    watch(props.c.state, () => {
+      form.evt.emit('changeState', props.c.model.name, props.c);
+    });
+    onMounted(() => {
+      const name = props.model.children?.[0]?.name || '';
+      console.log('tabs = onMounted', name);
+      // eslint-disable-next-line vue/no-mutating-props
+      props.c.state.activePane = name;
+    });
+    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,
+      "activeKey": this.c.state.activePane,
+      "onUpdate:activeKey": $event => this.c.state.activePane = $event
+    }, {
+      default: () => [this.model.children?.map((item, index) => {
+        return createVNode(resolveComponent("a-tab-pane"), {
+          "key": item.name,
+          "tab": item.title
+        }, {
+          default: () => [items[index]]
+        });
+      })]
+    });
+  }
+});
+
+export { GctFormTab };

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

@@ -0,0 +1,10 @@
+import { IFormTab, IFormTabPane } from '../../../interface';
+export declare class GctFormTabModel implements IFormTab {
+    type: "tab";
+    isContainer: true;
+    children: IFormTabPane[];
+    layout: 'flex' | 'grid';
+    navPosition: 'center' | 'left' | 'right';
+    name: string;
+    constructor(name: string, opts: Partial<IFormTab>, children: IFormTabPane[]);
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,74 @@
+@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-pane {
+  --gct-form-tab-pane-width: auto;
+  --gct-form-tab-pane-height: auto;
+  width: var(--gct-form-tab-pane-width);
+  height: 100%;
+  background-color: #fff;
+}
+.gct-form-tab-pane.is-hidden {
+  display: none;
+}

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

@@ -0,0 +1,39 @@
+import { PropType } from 'vue';
+import { IFormTabPane, IFormTabPaneController } from '../../../interface';
+/**
+ * 表单分页pane
+ */
+export declare const GctFormTabPane: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormTabPaneController>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormTabPane>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    style: IParams;
+    renderContainer: (items: IObject[]) => 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;
+    };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    context: IContext;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormTabPane;

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

@@ -0,0 +1,71 @@
+import { defineComponent, createVNode, resolveComponent, isVNode } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './gct-form-tab-pane.css';/* empty css                        */
+
+/**
+ * 表单分页pane
+ */
+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
+    },
+    context: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  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('不支持的layout类型' + 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 };

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

@@ -0,0 +1,17 @@
+import { IFormItemBasic, IFormTabPane } from '../../../interface';
+/**
+ * 表单选项卡面板模型
+ *
+ * @export
+ * @class GctFormTabPaneModel
+ * @implements {IFormTabPane}
+ */
+export declare class GctFormTabPaneModel implements IFormTabPane {
+    type: "tab-pane";
+    isContainer: true;
+    title: string;
+    layout: 'flex' | 'grid';
+    children: IFormItemBasic[];
+    name: string;
+    constructor(name: string, title: string, opts: Partial<IFormTabPane>, children: IFormItemBasic[]);
+}

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

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

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

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

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

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

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

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

package/es/modules/gct-form/widgets/gct-form/gct-form-title-group/gct-form-title-group.css

@@ -0,0 +1,82 @@
+@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-title-group {
+  --gct-form-title-group-min-height: 32px;
+  --gct-form-title-group-width: auto;
+  --gct-form-title-group-height: auto;
+}
+.gct-gct-form-title-group.is-hidden {
+  display: none;
+}
+
+.gct-gct-form-title-group__title {
+  color: #252525;
+  font-size: 12px;
+  padding: 8px 0;
+}
+
+.gct-gct-form-title-group__content .ant-form-item-label {
+  --gct-form-item-label-color: #797A7D;
+}

package/es/modules/gct-form/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 '../../../interface';
+/**
+ * 表单分组
+ */
+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: IObject[]) => 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;