@gct-paas/core-web 0.1.4-dev.9 → 0.1.5-dev.0

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,108 @@
+import { useGctFormValue } from "../../hooks/use-gct-form-value/use-gct-form-value.mjs";
+import "../../hooks/index.mjs";
+import { gctFormItemEditorProps } from "../../props/gct-form-item/gct-form-item.props.mjs";
+import './gct-form-date-format-select.css';/* empty css                                  */
+import { computed, createVNode, defineComponent, isVNode, mergeProps, resolveComponent, watch } from "vue";
+import { FIELD_TYPE, t, useNamespace } from "@gct-paas/core";
+//#region src/modules/gct-form/editor/gct-form-date-format-select/gct-form-date-format-select.tsx
+/**
+* 静态2级联选择编辑器,根据数据字典的2级进行联动选择
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var 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] })])]);
+		};
+	}
+});
+//#endregion
+export { GctFormDateFormatSelect };

package/es/{editor/gct-form-info → modules/gct-form/editor/gct-form-date-format-select}/index.d.ts

@@ -1,4 +1,4 @@
-import { IEditorProvider } from '@gct-paas/core';
+import { IEditorProvider } from '../../interface';
 export declare class Provider implements IEditorProvider {
     component: string;
 }

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

@@ -0,0 +1,10 @@
+import { EditorType } from "../../constants/editor-type/editor-type.mjs";
+import { widthEditorInstall } from "../../utils/width-install/width-install.mjs";
+import { GctFormDateFormatSelect } from "./gct-form-date-format-select.mjs";
+//#region src/modules/gct-form/editor/gct-form-date-format-select/index.ts
+var Provider = class {
+	component = "gct-form-date-format-select";
+};
+var gct_form_date_format_select_default = widthEditorInstall(EditorType.DATE_FORMAT_SELECT, () => new Provider(), GctFormDateFormatSelect);
+//#endregion
+export { gct_form_date_format_select_default 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,14 @@
+import { createVNode, defineComponent } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/modules/gct-form/editor/gct-form-empty/gct-form-empty.tsx
+var GctFormEmpty = /* @__PURE__ */ defineComponent({
+	name: "GctFormEmpty",
+	setup() {
+		const ns = useNamespace("gct-form-empty");
+		return () => {
+			return createVNode("span", { "class": ns.b() }, null);
+		};
+	}
+});
+//#endregion
+export { GctFormEmpty as default };

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,10 @@
+import { EditorType } from "../../constants/editor-type/editor-type.mjs";
+import { widthEditorInstall } from "../../utils/width-install/width-install.mjs";
+import GctFormEmpty from "./gct-form-empty.mjs";
+//#region src/modules/gct-form/editor/gct-form-empty/index.ts
+var provider = class {
+	component = "gct-form-empty";
+};
+var gct_form_empty_default = widthEditorInstall(EditorType.EMPTY, () => new provider(), GctFormEmpty);
+//#endregion
+export { gct_form_empty_default as default };

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 { useForm } from "../../hooks/use-form/use-form.mjs";
+import { useGctFormValue } from "../../hooks/use-gct-form-value/use-gct-form-value.mjs";
+import "../../hooks/index.mjs";
+import { openFormulaEditor } from "../../../formula-editor/formula-editor.mjs";
+import "../../../formula-editor/index.mjs";
+import './gct-form-formula.css';/* empty css                       */
+import { createVNode, defineComponent, ref, resolveComponent } from "vue";
+import { ExpressionModeEnum, t, useNamespace } from "@gct-paas/core";
+//#region src/modules/gct-form/editor/gct-form-formula/gct-form-formula.tsx
+var 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)]);
+		};
+	}
+});
+//#endregion
+export { GctFormFormula };

package/es/{editor/gct-form-radio → modules/gct-form/editor/gct-form-formula}/index.d.ts

@@ -1,4 +1,4 @@
-import { IEditorProvider } from '@gct-paas/core';
+import { IEditorProvider } from '../../interface';
 export declare class Provider implements IEditorProvider {
     component: string;
 }
@@ -6,6 +6,3 @@ declare const _default: {
     install(app: import('vue').App): void;
 };
 export default _default;
-export declare const oldRadioCom: {
-    install(app: import('vue').App): void;
-};

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

@@ -0,0 +1,10 @@
+import { EditorType } from "../../constants/editor-type/editor-type.mjs";
+import { widthEditorInstall } from "../../utils/width-install/width-install.mjs";
+import { GctFormFormula } from "./gct-form-formula.mjs";
+//#region src/modules/gct-form/editor/gct-form-formula/index.ts
+var Provider = class {
+	component = "gct-form-formula";
+};
+var gct_form_formula_default = widthEditorInstall(EditorType.FORMULA, () => new Provider(), GctFormFormula);
+//#endregion
+export { gct_form_formula_default as default };

package/es/modules/gct-form/editor/gct-form-group-select/gct-form-group-select.css

@@ -0,0 +1,120 @@
+@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-select-group {
+  display: flex;
+  align-items: center;
+}
+.gct-form-select-group__group-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 4px 8px;
+}
+.gct-form-select-group__group-header--clickable {
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.gct-form-select-group__group-header--clickable:hover {
+  background-color: var(--gct-color-info-light-9);
+}
+
+.gct-form-select-group__arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  transition: transform 0.2s;
+}
+.gct-form-select-group__arrow i {
+  font-size: 12px;
+  color: var(--gct-color-regular);
+}
+.gct-form-select-group__arrow--collapsed {
+  transform: rotate(-90deg);
+}
+
+.gct-form-select-group__title {
+  flex: 1;
+  font-weight: 500;
+}
+
+.gct-form-select-group-item-option {
+  display: flex;
+  align-items: center;
+}
+.gct-form-select-group-item-option__item-icon {
+  color: var(--gct-color-primary);
+  flex-shrink: 0;
+  margin-right: var(--gct-padding-2);
+}
+
+.gct-form-select-group-item-option__item-label {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/es/{editor/gct-form-modal-select/gct-form-modal-select.d.ts → modules/gct-form/editor/gct-form-group-select/gct-form-group-select.d.ts}

@@ -1,6 +1,7 @@
 import { PropType } from 'vue';
-import { IFormItemController, ISelectEditor } from '@gct-paas/core';
-export declare const GctFormModalSelect: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+import { IFormItemController, ISelectEditor } from '../../interface';
+import { IDictionaryItem } from '@gct-paas/core';
+export declare const GctFormSelectGroup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     c: {
         type: PropType<IFormItemController>;
         required: true;
@@ -13,17 +14,20 @@ export declare const GctFormModalSelect: import('vue').DefineComponent<import('v
         type: StringConstructor;
         default: string;
     };
+    size: {
+        type: StringConstructor;
+    };
 }>, {
     ns: import('@gct-paas/core').Namespace;
-    val: import('vue').WritableComputedRef<any, any>;
-    options: import('vue').ComputedRef<{
-        label: string;
-        options: {
-            value: string;
-            label: string;
-        }[];
-    }[]>;
-    modelCategory: import('vue').Ref<string, string>;
+    selectRef: import('vue').Ref<IObject | null, IObject | null>;
+    searchValue: import('vue').Ref<string, string>;
+    open: import('vue').Ref<boolean, boolean>;
+    rootRef: import('vue').Ref<any, any>;
+    val: import('vue').WritableComputedRef<any, string>;
+    options: import('vue').ComputedRef<IDictionaryItem[]>;
+    loadOptions: () => Promise<IDictionaryItem[]>;
+    toggleGroupCollapse: (groupValue: string) => void;
+    isGroupCollapsed: (groupValue: string) => boolean;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     c: {
         type: PropType<IFormItemController>;
@@ -37,9 +41,12 @@ export declare const GctFormModalSelect: import('vue').DefineComponent<import('v
         type: StringConstructor;
         default: string;
     };
+    size: {
+        type: StringConstructor;
+    };
 }>> & Readonly<{
     "onUpdate:value"?: ((...args: any[]) => any) | undefined;
 }>, {
     value: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default GctFormModalSelect;
+export default GctFormSelectGroup;