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

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

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

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

@@ -0,0 +1,18 @@
+import { IFormCollapsePane, IFormItemBasic } from '../../../interface';
+/**
+ * 表单折叠面板项模型
+ *
+ * @export
+ * @class GctFormCollapsePaneModel
+ * @implements {IFormCollapsePane}
+ */
+export declare class GctFormCollapsePaneModel implements IFormCollapsePane {
+    type: "collapse-pane";
+    isContainer: true;
+    title: string;
+    layout: 'flex' | 'grid';
+    children: IFormItemBasic[];
+    name: string;
+    collapsible?: boolean;
+    constructor(name: string, title: string, opts: Partial<IFormCollapsePane>, children: IFormItemBasic[]);
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,88 @@
+@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-group {
+  --gct-form-group-min-height: 32px;
+  --gct-form-group-width: auto;
+  --gct-form-group-height: 100%;
+  width: var(--gct-form-group-width);
+  height: var(--gct-form-group-height);
+  min-height: var(--gct-form-group-min-height);
+}
+.gct-gct-form-group.is-hidden-header .gct-gct-form-group__title {
+  display: none;
+}
+
+.gct-gct-form-group.is-hidden-header .gct-gct-form-group__content {
+  overflow: auto;
+  height: 100%;
+}
+
+.gct-gct-form-group__content {
+  height: 100%;
+}
+
+.gct-gct-form-group.is-hidden {
+  display: none;
+}

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IFormGroup, IFormGroupController } from '@gct-paas/core';
+import { IFormGroup, IFormGroupController } from '../../../interface';
 /**
  * 表单分组
  */
@@ -12,11 +12,15 @@ export declare const GctFormGroup: import('vue').DefineComponent<import('vue').E
         type: PropType<IFormGroup>;
         required: true;
     };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
     keys: import('vue').Ref<number[], number[]>;
     style: IParams;
-    renderContainer: (items: unknown[]) => import("vue/jsx-runtime").JSX.Element | undefined;
+    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>;
@@ -26,5 +30,11 @@ export declare const GctFormGroup: import('vue').DefineComponent<import('vue').E
         type: PropType<IFormGroup>;
         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 GctFormGroup;

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

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

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

@@ -0,0 +1,19 @@
+import { IFormGroup, IFormItemBasic } from '../../../interface';
+/**
+ * 表单分组模型
+ *
+ * @export
+ * @class GctFormGroupModel
+ * @implements {IFormGroup}
+ */
+export declare class GctFormGroupModel implements IFormGroup {
+    type: "group";
+    isContainer: true;
+    layout: 'flex' | 'grid';
+    children: IFormItemBasic[];
+    name: string;
+    title?: string;
+    showHeader?: boolean;
+    isCollapse?: boolean;
+    constructor(name: string, opts: Partial<IFormGroup>, children: IFormItemBasic[]);
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { IFormHiddenItem } from '../../../interface';
+/**
+ * 表单隐藏项模型
+ *
+ * @export
+ * @class GctFormHiddenItemModel
+ * @implements {IFormHiddenItem}
+ */
+export declare class GctFormHiddenItemModel implements IFormHiddenItem {
+    type: "hidden";
+    name: string;
+    field?: string;
+    defaultValue?: any;
+    editor?: any;
+    constructor(name: string, options?: Partial<IFormHiddenItem>);
+}

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { GctFormHiddenItemModel } from './gct-form-hidden-item.model';
+declare const _default: {
+    install(): void;
+};
+export default _default;
+export { GctFormHiddenItemModel };

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

@@ -0,0 +1,171 @@
+@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-item {
+  --gct-form-item-min-height: 32px;
+  --gct-form-item-height: auto;
+  --gct-form-item-width: auto;
+  --gct-form-item-label-width: 100px;
+  --gct-form-item-readonly-color: #999;
+  --gct-form-item-placeholder-color: var(--gct-color-text-7);
+  --gct-form-item-label-align: right;
+  --gct-form-item-editor-align: left;
+  --gct-form-item-label-color: #252525;
+  --gct-form-item-label-font-size: 14px;
+  --gct-form-item-checkbox-width: 6px;
+  --gct-form-item-checkbox-height: 9px;
+  width: var(--gct-form-item-width);
+  height: var(--gct-form-item-height);
+  min-height: var(--gct-form-item-min-height);
+}
+.gct-gct-form-item.is-hidden-label > .ant-col.ant-form-item-control > .ant-form-item-control-input > .ant-form-item-control-input-content > .gct-gct-form-item__editor {
+  width: 100%;
+}
+
+.gct-gct-form-item.is-hidden-error {
+  margin-bottom: 0;
+}
+
+.gct-gct-form-item.is-hidden {
+  display: none;
+}
+
+.gct-gct-form-item.is-readonly {
+  margin-bottom: 18px !important;
+  --gct-form-item-min-height: 22px;
+}
+.gct-gct-form-item.is-readonly .ant-form-item-label {
+  padding: 0;
+}
+.gct-gct-form-item.is-readonly .ant-form-item-label label {
+  color: var(--gct-form-item-readonly-color);
+}
+.gct-gct-form-item.is-readonly .gct-gct-form-item__label {
+  color: var(--gct-form-item-readonly-color);
+}
+
+.gct-gct-form-item.is-required .gct-gct-form-item__label::before {
+  display: inline-block;
+  margin-inline-end: 4px;
+  color: #ff4d4f;
+  font-size: 14px;
+  font-family: SimSun, sans-serif;
+  line-height: 1;
+  content: "*";
+}
+
+.gct-gct-form-item .ant-input {
+  border-radius: 4px;
+}
+.gct-gct-form-item .ant-form-item-label {
+  width: var(--gct-form-item-label-width);
+  text-align: var(--gct-form-item-label-align);
+}
+.gct-gct-form-item .ant-form-item-label label {
+  color: var(--gct-form-item-label-color);
+  font-size: var(--gct-form-item-label-font-size);
+}
+.gct-gct-form-item .ant-form-item-control-input-content {
+  text-align: var(--gct-form-item-editor-align);
+}
+.gct-gct-form-item__label {
+  width: var(--gct-form-item-label-width);
+  line-height: 1.5715;
+  font-size: var(--gct-form-item-label-font-size);
+}
+.gct-gct-form-item__label--top {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.gct-gct-form-item--label-top .gct-gct-form-item__label {
+  margin-bottom: 8px;
+}
+
+.gct-gct-form-item__label-tooltip {
+  color: var(--gct-color-text-6);
+}
+.gct-gct-form-item__label-tooltip:hover {
+  color: var(--gct-color-text-4);
+}
+
+.gct-gct-form-item .ant-form-item-control-input {
+  flex-grow: 1;
+}
+.gct-gct-form-item .ant-checkbox-group {
+  font-size: var(--gct-form-item-label-font-size);
+}
+.gct-gct-form-item .ant-checkbox-group .ant-checkbox-wrapper {
+  font-size: var(--gct-form-item-label-font-size);
+}
+.gct-gct-form-item .ant-checkbox-group .ant-form input[type=checkbox],
+.gct-gct-form-item .ant-checkbox-group .ant-checkbox-inner {
+  width: var(--gct-form-item-label-font-size);
+  height: var(--gct-form-item-label-font-size);
+}
+.gct-gct-form-item .ant-checkbox-group .ant-checkbox-inner::after {
+  width: var(--gct-form-item-checkbox-width);
+  height: var(--gct-form-item-checkbox-height);
+}