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

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

@@ -0,0 +1,81 @@
+import { defineComponent, createVNode, resolveComponent, mergeProps, ref } from 'vue';
+import dayjs from 'dayjs';
+import { useNamespace } from '@gct-paas/core';
+import 'qx-util';
+import { EditorController } from '../../controller/editor-item/editor-item.controller.mjs';
+import 'lodash-es';
+import { useGctFormValue } from '../../hooks/use-gct-form-value/use-gct-form-value.mjs';
+
+/**
+ * 文本编辑器
+ */
+const GctFormDate = /* @__PURE__ */ defineComponent({
+  name: 'GctFormDate',
+  props: {
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    isDate: {
+      type: Boolean,
+      default: true
+    },
+    isTime: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:value'],
+  setup(props) {
+    const ns = useNamespace('gct-form-date');
+    const c = new EditorController(props.model);
+    const val = useGctFormValue();
+    const dateVal = ref(val.value ? dayjs(val.value) : null);
+    const timeVal = ref(val.value ? dayjs(val.value) : null);
+    const onChange = () => {
+      let str = '';
+      if (dateVal.value) {
+        const date = dateVal.value.format('YYYY-MM-DD');
+        str = date;
+      }
+      if (timeVal.value) {
+        const time = timeVal.value.format('HH:mm:ss');
+        str += ` ${time}`;
+      } else {
+        str += ' 00:00:00';
+      }
+      val.value = str;
+    };
+    return {
+      ns,
+      c,
+      dateVal,
+      timeVal,
+      onChange
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": [this.ns.b()]
+    }, [this.isDate ? createVNode(resolveComponent("a-date-picker"), mergeProps({
+      "picker": "date",
+      "value": this.dateVal,
+      "onUpdate:value": $event => this.dateVal = $event,
+      "format": "YYYY-MM-DD"
+    }, this.model.props || {}, {
+      "placeholder": "\u8BF7\u9009\u62E9\u65E5\u671F",
+      "onChange": this.onChange
+    }), null) : null, this.isTime ? createVNode(resolveComponent("a-time-picker"), {
+      "value": this.timeVal,
+      "onUpdate:value": $event => this.timeVal = $event,
+      "placeholder": "\u8BF7\u9009\u62E9\u65F6\u95F4",
+      "onChange": this.onChange
+    }, null) : null]);
+  }
+});
+
+export { GctFormDate };

package/es/modules/gct-form/editor/gct-form-date/gct-form-date.provider.d.ts

@@ -0,0 +1,11 @@
+import { IEditorProvider } from '../../interface';
+/**
+ * 文本编辑器
+ *
+ * @export
+ * @class GctFormDateProvider
+ * @implements {IEditorProvider}
+ */
+export declare class GctFormDateProvider implements IEditorProvider {
+    component: string;
+}

package/es/modules/gct-form/editor/gct-form-date/gct-form-date.provider.mjs

@@ -0,0 +1,5 @@
+class GctFormDateProvider {
+  component = "gct-form-date";
+}
+
+export { GctFormDateProvider };

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

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

package/es/modules/gct-form/editor/gct-form-date-format-select/gct-form-date-format-select.css

@@ -0,0 +1,77 @@
+@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-date-format-select {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.gct-form-date-format-select__first {
+  flex-shrink: 0;
+}
+
+.gct-form-date-format-select__second {
+  flex-shrink: 0;
+  flex-grow: 1;
+}

package/es/modules/gct-form/editor/gct-form-date-format-select/gct-form-date-format-select.d.ts

@@ -0,0 +1,111 @@
+import { IDateFormatSelectEditor } from '../../interface';
+/**
+ * 静态2级联选择编辑器,根据数据字典的2级进行联动选择
+ */
+export declare const GctFormDateFormatSelect: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    context: {
+        type: import('vue').PropType<IContext>;
+        default: () => {};
+    };
+    value: {
+        type: import('vue').PropType<string>;
+    };
+    model: {
+        type: import('vue').PropType<IDateFormatSelectEditor>;
+        required: boolean;
+    };
+    c: {
+        type: import('vue').PropType<import('../..').IFormItemController>;
+        required: boolean;
+    };
+    itemModel: {
+        type: import('vue').PropType<import('../..').IFormEditItem>;
+    };
+    data: {
+        type: ObjectConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keepalive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: import('vue').PropType<"small" | "medium" | "large">;
+    };
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    isEmptyText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    context: {
+        type: import('vue').PropType<IContext>;
+        default: () => {};
+    };
+    value: {
+        type: import('vue').PropType<string>;
+    };
+    model: {
+        type: import('vue').PropType<IDateFormatSelectEditor>;
+        required: boolean;
+    };
+    c: {
+        type: import('vue').PropType<import('../..').IFormItemController>;
+        required: boolean;
+    };
+    itemModel: {
+        type: import('vue').PropType<import('../..').IFormEditItem>;
+    };
+    data: {
+        type: ObjectConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keepalive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: import('vue').PropType<"small" | "medium" | "large">;
+    };
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    isEmptyText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    visible: boolean;
+    keepalive: boolean;
+    count: number;
+    disabled: boolean;
+    context: IContext;
+    readonly: boolean;
+    isEmptyText: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/modules/gct-form/editor/gct-form-date-format-select/gct-form-date-format-select.mjs

@@ -0,0 +1,113 @@
+import { defineComponent, computed, watch, createVNode, resolveComponent, mergeProps, isVNode } from 'vue';
+import './gct-form-date-format-select.css';/* empty css                                  */
+import { useGctFormValue } from '../../hooks/use-gct-form-value/use-gct-form-value.mjs';
+import { gctFormItemEditorProps } from '../../props/gct-form-item/gct-form-item.props.mjs';
+import { useNamespace, FIELD_TYPE, t } from '@gct-paas/core';
+
+/**
+ * 静态2级联选择编辑器,根据数据字典的2级进行联动选择
+ */
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const GctFormDateFormatSelect = /* @__PURE__ */ defineComponent({
+  name: 'GctFormDateFormatSelect',
+  props: gctFormItemEditorProps(),
+  setup(props) {
+    const ns = useNamespace('form-date-format-select');
+    const fieldType = computed(() => {
+      return props.data[props.model?.fieldTypeKey || 'type'];
+    });
+    const mappingType = computed(() => {
+      return props.data[props.model?.mappingTypeKey || 'mapping_type'];
+    });
+    const separator = useGctFormValue(props.model?.separatorKey || 'separator');
+    const separatorOptions = [{
+      label: '-',
+      value: '-'
+    }, {
+      label: '/',
+      value: '/'
+    }, {
+      label: '·',
+      value: '.'
+    }];
+    const val = useGctFormValue();
+    const options = computed(() => {
+      if (fieldType.value === FIELD_TYPE.DATE_TIME || mappingType.value === FIELD_TYPE.DATE_TIME) {
+        return [{
+          label: `yyyy${separator.value}MM${separator.value}dd HH`,
+          value: `YYYY${separator.value}MM${separator.value}DD HH`
+        }, {
+          label: `yyyy${separator.value}MM${separator.value}dd HH:mm`,
+          value: `YYYY${separator.value}MM${separator.value}DD HH:mm`
+        }, {
+          label: `yyyy${separator.value}MM${separator.value}dd HH:mm:ss`,
+          value: `YYYY${separator.value}MM${separator.value}DD HH:mm:ss`
+        }];
+      }
+      if (fieldType.value === FIELD_TYPE.DATE || mappingType.value === FIELD_TYPE.DATE) {
+        return [{
+          label: `yyyy`,
+          value: `YYYY`
+        }, {
+          label: `yyyy${separator.value}MM`,
+          value: `YYYY${separator.value}MM`
+        }, {
+          label: `yyyy${separator.value}MM${separator.value}dd`,
+          value: `YYYY${separator.value}MM${separator.value}DD`
+        }];
+      }
+      return [];
+    });
+    watch(separator, () => {
+      if (fieldType.value === FIELD_TYPE.DATE_TIME || mappingType.value === FIELD_TYPE.DATE_TIME) {
+        val.value = `YYYY${separator.value}MM${separator.value}DD HH:mm:ss`;
+        return;
+      }
+      if (fieldType.value === FIELD_TYPE.DATE || mappingType.value === FIELD_TYPE.DATE) {
+        val.value = `YYYY${separator.value}MM${separator.value}DD`;
+        return;
+      }
+      val.value = '';
+    });
+    return () => {
+      let _slot, _slot2;
+      return createVNode("div", {
+        "class": ns.b()
+      }, [createVNode("span", {
+        "class": ns.e('first')
+      }, [createVNode(resolveComponent("a-select"), mergeProps({
+        "value": separator.value,
+        "onUpdate:value": $event => separator.value = $event,
+        "disabled": props.c.state.disabled,
+        "size": props.size,
+        "placeholder": props.model.placeholder || t('sys.chooseText')
+      }, props.model?.props || {}), _isSlot(_slot = separatorOptions.map(item => createVNode(resolveComponent("a-select-option"), {
+        "key": item.value,
+        "value": item.value
+      }, {
+        default: () => [item.label]
+      }))) ? _slot : {
+        default: () => [_slot]
+      })]), createVNode("span", {
+        "class": ns.e('second')
+      }, [createVNode(resolveComponent("a-select"), mergeProps({
+        "value": val.value,
+        "onUpdate:value": $event => val.value = $event,
+        "disabled": props.c.state.disabled,
+        "size": props.size,
+        "placeholder": props.model.placeholder || t('sys.chooseText')
+      }, props.model?.props || {}), _isSlot(_slot2 = options.value.map(item => createVNode(resolveComponent("a-select-option"), {
+        "key": item.value,
+        "value": item.value
+      }, {
+        default: () => [item.label]
+      }))) ? _slot2 : {
+        default: () => [_slot2]
+      })])]);
+    };
+  }
+});
+
+export { GctFormDateFormatSelect };

package/es/modules/gct-form/editor/gct-form-date-format-select/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-date-format-select/index.mjs

@@ -0,0 +1,14 @@
+import { EditorType } from '../../constants/editor-type/editor-type.mjs';
+import { widthEditorInstall } from '../../utils/width-install/width-install.mjs';
+import { GctFormDateFormatSelect as GctFormDateFormatSelect$1 } from './gct-form-date-format-select.mjs';
+
+class Provider {
+  component = "gct-form-date-format-select";
+}
+const GctFormDateFormatSelect = widthEditorInstall(
+  EditorType.DATE_FORMAT_SELECT,
+  () => new Provider(),
+  GctFormDateFormatSelect$1
+);
+
+export { Provider, GctFormDateFormatSelect as default };

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

@@ -0,0 +1,2 @@
+export declare const GctFormEmpty: import('vue').DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormEmpty;

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

@@ -0,0 +1,16 @@
+import { defineComponent, createVNode } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+
+const GctFormEmpty = /* @__PURE__ */ defineComponent({
+  name: 'GctFormEmpty',
+  setup() {
+    const ns = useNamespace('gct-form-empty');
+    return () => {
+      return createVNode("span", {
+        "class": ns.b()
+      }, null);
+    };
+  }
+});
+
+export { GctFormEmpty };

package/es/modules/gct-form/editor/gct-form-empty/gct-form-empty.provider.d.ts

@@ -0,0 +1,4 @@
+import { IEditorProvider } from '../../interface';
+export declare class FormEmptyProvider implements IEditorProvider {
+    component: string;
+}

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

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

package/es/modules/gct-form/editor/gct-form-formula/gct-form-formula.css

@@ -0,0 +1,81 @@
+@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-formula {
+  cursor: pointer !important;
+  height: 32px;
+  display: flex;
+  align-items: center;
+}
+.gct-form-formula__input {
+  border-radius: 4px;
+}
+
+.gct-form-formula__placeholder {
+  color: var(--gct-form-item-placeholder-color);
+}
+
+.ant-form-item.ant-form-item-has-error .gct-form-formula {
+  border-color: var(--ant-error-color) !important;
+}

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

@@ -0,0 +1,39 @@
+import { PropType } from 'vue';
+import { IFormItem, IFormItemController, IFormulaEditor } from '../../interface';
+export declare const GctFormFormula: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormItemController>;
+        required: true;
+    };
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormulaEditor>;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    c: {
+        type: PropType<IFormItemController>;
+        required: true;
+    };
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<IFormulaEditor>;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    value: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,69 @@
+import { defineComponent, ref, createVNode, resolveComponent } from 'vue';
+import { useNamespace, t, ExpressionModeEnum } from '@gct-paas/core';
+import { openFormulaEditor } from '../../../formula-editor/formula-editor.mjs';
+import { useForm } from '../../hooks/use-form/use-form.mjs';
+import { useGctFormValue } from '../../hooks/use-gct-form-value/use-gct-form-value.mjs';
+import './gct-form-formula.css';/* empty css                       */
+
+const GctFormFormula = /* @__PURE__ */ defineComponent({
+  name: 'GctFormFormula',
+  props: {
+    c: {
+      type: Object,
+      required: true
+    },
+    itemModel: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('form-formula');
+    const formC = useForm();
+    const inputRef = ref();
+    const val = useGctFormValue();
+    const expressionEcho = useGctFormValue('expressionEcho');
+    const openExpress = async () => {
+      const res = await openFormulaEditor({
+        expr: val.value.expr,
+        exprEcho: expressionEcho?.value,
+        returnType: val.value.mappingType || 'string',
+        mode: ExpressionModeEnum.DATA_SET_FORMULA,
+        identifiers: {},
+        ...(props.model.config || {})
+      });
+      if (res) {
+        val.value = {
+          expr: res.expr,
+          mappingType: res.returnType
+        };
+        if (expressionEcho) {
+          expressionEcho.value = res.exprEcho;
+        }
+        formC.validateItem(props.itemModel.name);
+      }
+    };
+    return () => {
+      return createVNode("div", {
+        "class": ns.b(),
+        "onClick": openExpress
+      }, [createVNode(resolveComponent("a-input"), {
+        "ref": inputRef,
+        "class": ns.e('input'),
+        "readonly": true,
+        "value": expressionEcho?.value || val.value,
+        "placeholder": t('sys.inputText')
+      }, null)]);
+    };
+  }
+});
+
+export { GctFormFormula };