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

package/es/modules/gct-form/controller/gct-form/gct-form.controller.mjs

@@ -0,0 +1,224 @@
+import { reactive } from 'vue';
+import { FormState } from '../../state/form/form.state.mjs';
+import { QXEvent } from 'qx-util';
+
+class GctFormController {
+  constructor(model) {
+    this.model = model;
+    this.init();
+  }
+  evt = new QXEvent();
+  state = reactive(new FormState());
+  item = {};
+  provider = {};
+  context = {};
+  params = {};
+  /**
+   * 所有属性的项标识，由 item 和 hidden 类型的表单项的 name 组成
+   *
+   * @author zhanghanrui
+   * @date 2024-04-02 20:04:20
+   * @protected
+   * @type {string[]}
+   */
+  fields = [];
+  /**
+   * 所有[item、hidden]表单项的映射，key 为表单项的 name
+   *
+   * @author zhanghanrui
+   * @date 2024-04-02 20:04:39
+   * @protected
+   * @type {(Record<string, IFormItem | IFormHiddenItem>)}
+   */
+  modelMap = {};
+  /**
+   * 表单初始化
+   *
+   * @author zhanghanrui
+   * @date 2024-04-01 13:04:27
+   * @protected
+   */
+  init() {
+    if (this.model.children) {
+      this.initFormItems(this.model.children);
+    }
+    this.initEvent();
+    this.calcState();
+  }
+  /**
+   * 初始化表单事件订阅相关
+   *
+   * @author zhanghanrui
+   * @date 2024-04-02 14:04:31
+   * @protected
+   */
+  initEvent() {
+  }
+  /**
+   * 计算表单状态，数据变更或加载数据后调用
+   *
+   * @author zhanghanrui
+   * @date 2024-04-02 21:04:15
+   * @protected
+   */
+  calcState() {
+  }
+  /**
+   * 初始化表单项控制器
+   *
+   * @author zhanghanrui
+   * @date 2024-04-01 13:04:38
+   * @protected
+   * @param {IFormItemBasic[]} models
+   */
+  initFormItems(models) {
+    models.forEach((model) => {
+      let provider = null;
+      if (model.type === "item" || model.type === "hidden") {
+        this.fields.push(model.name);
+        this.modelMap[model.name] = model;
+      }
+      if (model.type === "item") {
+        provider = _gct.register.formItem.create(
+          `${model.type}___${model.editor.type}___${model.name}`
+        );
+        if (!provider) {
+          provider = _gct.register.formItem.create(
+            `${model.type}___${model.editor.type}`
+          );
+        }
+      }
+      if (!provider) {
+        provider = _gct.register.formItem.create(model.type);
+      }
+      if (!provider) {
+        console.error(`未找到表单项提供者：${model.type}`, model);
+        return;
+      }
+      this.provider[model.name] = provider;
+      if (model.type === "item") {
+        const item = model;
+        this.item[item.name] = provider.createController(this, item);
+      } else if (model.type === "hidden") {
+        const hidden = model;
+        this.item[hidden.name] = provider.createController(this, hidden);
+      } else if (model.type === "container" || model.isContainer || model.container) {
+        const container = model;
+        this.item[model.name] = provider.createController(this, container);
+        if (container.children) {
+          this.initFormItems(container.children);
+        }
+      }
+    });
+  }
+  /**
+   * 计算表单项隐藏
+   *
+   * @author zhanghanrui
+   * @date 2024-08-01 11:08:23
+   * @protected
+   */
+  calcHidden() {
+    const keys = Object.keys(this.item);
+    keys.forEach((key) => {
+      const c = this.item[key];
+      if (c.model.hidden) {
+        const bol = c.model.hidden(this, c, this.state.data);
+        if (bol != null) {
+          c.state.visible = !bol;
+        }
+      }
+    });
+  }
+  /**
+   * 获取当前表单数据
+   *
+   * @author zhanghanrui
+   * @date 2024-04-02 20:04:16
+   * @return {*}  {IData}
+   */
+  getData() {
+    const data = {};
+    this.fields.forEach((field) => {
+      const c = this.item[field];
+      if (c && (c.state.visible === true || c.model.type === "hidden" || field.indexOf(".") !== -1)) {
+        setValue(c.value, c.key, data);
+      }
+    });
+    return data;
+  }
+  /**
+   * 重置表单数据
+   *
+   * @author zhanghanrui
+   * @date 2024-04-02 20:04:11
+   */
+  resetData() {
+    this.fields.forEach((key) => {
+      const c = this.item[key];
+      if (c) {
+        c.reset();
+      }
+    });
+  }
+  async load() {
+    try {
+      if (!this.model.loadRequest) {
+        return {};
+      }
+      this.state.loading = true;
+      const data = await this.model.loadRequest({ id: this.context.id });
+      this.fields.forEach((key) => {
+        const c = this.item[key];
+        if (c) {
+          c.value = data[c.key];
+        }
+        c.defaultValue();
+      });
+      this.state.loaded = true;
+      return data;
+    } finally {
+      this.state.loading = false;
+    }
+  }
+  destroy() {
+    this.state.destroyed = true;
+    this.evt.reset();
+    this.fields.forEach((key) => {
+      const c = this.item[key];
+      if (c) {
+        c.destroy();
+      }
+    });
+  }
+  validate() {
+    return Promise.resolve(true);
+  }
+  validateItem(_key) {
+    return Promise.resolve(true);
+  }
+  loaded() {
+    this.calcHidden();
+    this.fields.forEach((key) => {
+      const c = this.item[key];
+      c.defaultValue();
+    });
+    this.calcState();
+  }
+  mounted() {
+  }
+}
+function setValue(value, name, data) {
+  const key_list = name.split(".");
+  const len = key_list.length - 1;
+  key_list.reduce((memo, cur, index) => {
+    if (index === len) {
+      memo[cur] = value;
+    } else if (!memo[cur]) {
+      memo[cur] = {};
+    }
+    return memo[cur];
+  }, data);
+}
+
+export { GctFormController };

package/es/modules/gct-form/controller/index.d.ts

@@ -0,0 +1,13 @@
+export { EditFormController, useEditFormController, } from './edit-form/edit-form.controller';
+export { EditorController } from './editor-item/editor-item.controller';
+export { GctFormController } from './gct-form/gct-form.controller';
+export { FormCollapsePaneController } from './form-collapse-pane/form-collapse-pane.controller';
+export { FormCollapseController } from './form-collapse/form-collapse.controller';
+export { FormTabController } from './form-tab/form-tab.controller';
+export { FormTabPaneController } from './form-tab-pane/form-tab-pane.controller';
+export { FormGroupController } from './form-group/form-group.controller';
+export { FormEditItemController } from './form-edit-item/form-edit-item.controller';
+export { FormItemController } from './form-item/form-item.controller';
+export { FormItemBasicController, useFormItemController, } from './form-item-basic/form-item-basic.controller';
+export { FormHiddenItemController } from './form-item-hidden/form-item-hidden.controller';
+export { FormLineController } from './form-line/form-line.controller';

package/es/modules/gct-form/editor/gct-form-action/gct-form-action.d.ts

@@ -0,0 +1,39 @@
+import { PropType } from 'vue';
+import { IActionEditor, IFormItemController } from '../../interface';
+export declare const GctFormAction: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormItemController>;
+        required: true;
+    };
+    data: {
+        type: PropType<IObject>;
+        required: true;
+    };
+    model: {
+        type: PropType<IActionEditor>;
+        required: true;
+    };
+    size: {
+        type: StringConstructor;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    onClick: (e: MouseEvent) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormItemController>;
+        required: true;
+    };
+    data: {
+        type: PropType<IObject>;
+        required: true;
+    };
+    model: {
+        type: PropType<IActionEditor>;
+        required: true;
+    };
+    size: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormAction;

package/es/modules/gct-form/editor/gct-form-action/gct-form-action.mjs

@@ -0,0 +1,50 @@
+import { defineComponent, createVNode, resolveComponent, mergeProps } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { useForm } from '../../hooks/use-form/use-form.mjs';
+
+const GctFormAction = /* @__PURE__ */ defineComponent({
+  name: 'GctFormAction',
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    data: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    size: {
+      type: String
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('gct-form-action');
+    const form = useForm();
+    function onClick(e) {
+      e.stopPropagation();
+      if (props.model.click) {
+        props.model.click(e, form, props.c, props.data);
+      }
+    }
+    return {
+      ns,
+      onClick
+    };
+  },
+  render() {
+    return createVNode(resolveComponent("a-button"), mergeProps({
+      "class": this.ns.b(),
+      "onClick": this.onClick,
+      "size": this.size,
+      "type": "link"
+    }, this.model.props || {}), {
+      default: () => [this.model.label]
+    });
+  }
+});
+
+export { GctFormAction };

package/es/modules/gct-form/editor/gct-form-action/index.d.ts

@@ -0,0 +1,8 @@
+import { IEditorProvider } from '../../interface';
+export declare class provider implements IEditorProvider {
+    component: string;
+}
+declare const _default: {
+    install(app: import('vue').App): void;
+};
+export default _default;

package/es/modules/gct-form/editor/gct-form-action/index.mjs

@@ -0,0 +1,14 @@
+import { GctFormAction } from './gct-form-action.mjs';
+import { widthEditorInstall } from '../../utils/width-install/width-install.mjs';
+import { EditorType } from '../../constants/editor-type/editor-type.mjs';
+
+class provider {
+  component = "gct-form-action";
+}
+const GctFromAction = widthEditorInstall(
+  EditorType.ACTION,
+  () => new provider(),
+  GctFormAction
+);
+
+export { GctFromAction as default, provider };

package/es/modules/gct-form/editor/gct-form-check-switch/gct-form-check-switch.css

@@ -0,0 +1,86 @@
+@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-check-switch--checkbox {
+  height: 32px;
+  padding-top: 5px;
+}
+.gct-gct-form-check-switch--checkbox span:last-child {
+  padding-left: 4px;
+  padding-right: 0;
+}
+
+.gct-gct-form-check-switch--small {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.gct-gct-form-check-switch.is-readonly {
+  pointer-events: none;
+}
+
+.gct-gct-form--small .gct-gct-form-check-switch--checkbox {
+  height: 24px;
+  padding-top: 0;
+}

package/es/{editor → modules/gct-form/editor}/gct-form-check-switch/gct-form-check-switch.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { IFormItem, ICheckSwitchEditor, EditorController } from '@gct-paas/core';
+import { ICheckSwitchEditor, IFormItem } from '../../interface';
 /**
  * 文本编辑器
  */
@@ -16,9 +16,11 @@ export declare const GctFormCheckSwitch: import('vue').DefineComponent<import('v
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: StringConstructor;
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
-    c: EditorController<ICheckSwitchEditor>;
     val: import('vue').WritableComputedRef<any, any>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     itemModel: {
@@ -33,6 +35,9 @@ export declare const GctFormCheckSwitch: import('vue').DefineComponent<import('v
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: StringConstructor;
+    };
 }>> & Readonly<{
     "onUpdate:value"?: ((...args: any[]) => any) | undefined;
 }>, {

package/es/modules/gct-form/editor/gct-form-check-switch/gct-form-check-switch.mjs

@@ -0,0 +1,59 @@
+import { defineComponent, createVNode, resolveComponent, mergeProps } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { useGctFormValue } from '../../hooks/use-gct-form-value/use-gct-form-value.mjs';
+import './gct-form-check-switch.css';/* empty css                            */
+
+/**
+ * 文本编辑器
+ */
+const GctFormCheckSwitch = /* @__PURE__ */ defineComponent({
+  name: 'GctFormCheckSwitch',
+  props: {
+    itemModel: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String
+    }
+  },
+  emits: ['update:value'],
+  setup() {
+    const ns = useNamespace('gct-form-check-switch');
+    const val = useGctFormValue();
+    return {
+      ns,
+      val
+    };
+  },
+  render() {
+    if (this.model.isSwitch) {
+      return createVNode("div", {
+        "class": [this.ns.b(), this.ns.m('switch'), this.ns.is('readonly', this.model.readonly), this.size ? this.ns.m(this.size) : null]
+      }, [createVNode(resolveComponent("a-switch"), mergeProps({
+        "checked": this.val,
+        "onUpdate:checked": $event => this.val = $event,
+        "size": this.size
+      }, this.model.props || {}), null)]);
+    }
+    return createVNode(resolveComponent("a-checkbox"), mergeProps({
+      "checked": this.val,
+      "onUpdate:checked": $event => this.val = $event,
+      "size": this.size
+    }, this.model.props || {}, {
+      "class": [this.ns.b(), this.ns.m('checkbox'), this.ns.is('readonly', this.model.readonly), this.size ? this.ns.m(this.size) : null]
+    }), {
+      default: () => [this.model.label]
+    });
+  }
+});
+
+export { GctFormCheckSwitch };

package/es/{editor → modules/gct-form/editor}/gct-form-check-switch/gct-form-check-switch.provider.d.ts

@@ -1,4 +1,4 @@
-import { IEditorProvider } from '@gct-paas/core';
+import { IEditorProvider } from '../../interface';
 /**
  * 选项框类型开关
  *

package/es/modules/gct-form/editor/gct-form-check-switch/gct-form-check-switch.provider.mjs

@@ -0,0 +1,5 @@
+class GctFormCheckSwitchProvider {
+  component = "gct-form-check-switch";
+}
+
+export { GctFormCheckSwitchProvider };

package/es/modules/gct-form/editor/gct-form-check-switch/index.mjs

@@ -0,0 +1,12 @@
+import { GctFormCheckSwitchProvider } from './gct-form-check-switch.provider.mjs';
+import { GctFormCheckSwitch as GctFormCheckSwitch$1 } from './gct-form-check-switch.mjs';
+import { widthEditorInstall } from '../../utils/width-install/width-install.mjs';
+import { EditorType } from '../../constants/editor-type/editor-type.mjs';
+
+const GctFormCheckSwitch = widthEditorInstall(
+  EditorType.CHECK_SWITCH,
+  () => new GctFormCheckSwitchProvider(),
+  GctFormCheckSwitch$1
+);
+
+export { GctFormCheckSwitch as default };

package/es/modules/gct-form/editor/gct-form-checkbox/gct-form-checkbox.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-gct-form-checkbox--checkbox.ant-checkbox-group {
+  height: 32px;
+  display: flex;
+  align-items: center;
+}
+
+.gct-gct-form-checkbox.ant-checkbox-group {
+  width: 100%;
+  padding: 2px;
+  border-radius: 4px;
+  display: flex;
+  gap: 4px 8px;
+  flex-wrap: wrap;
+  height: auto;
+}
+.gct-gct-form-checkbox.ant-checkbox-group .ant-checkbox + span {
+  padding-left: 4px;
+}
+.gct-gct-form-checkbox.ant-checkbox-group .ant-checkbox-group-item {
+  margin-right: 0;
+  display: flex;
+  align-items: flex-start;
+}
+.gct-gct-form-checkbox.ant-checkbox-group .ant-checkbox-wrapper {
+  display: flex;
+}
+.gct-gct-form-checkbox.ant-checkbox-group.isColumn {
+  flex-flow: column wrap;
+  align-items: flex-start;
+}
+.gct-gct-form-checkbox.ant-checkbox-group .drag-wrap {
+  width: 100%;
+}
+.gct-gct-form-checkbox.ant-checkbox-group .drag-wrap .drag-checkbox-item {
+  padding: 6px 4px;
+  border-radius: 4px;
+  background-color: #F2F4F7;
+}
+.gct-gct-form-checkbox.ant-checkbox-group .drag-wrap .drag-checkbox-item .icon-drag {
+  line-height: 1;
+}
+.gct-gct-form-checkbox.ant-checkbox-group .drag-wrap .drag-checkbox-item + .drag-checkbox-item {
+  margin-top: 4px;
+}