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

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;

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

@@ -0,0 +1,163 @@
+import './gct-form-group-select.css';/* empty css                            */
+import { computed, createVNode, defineComponent, inject, isVNode, onUnmounted, ref, resolveComponent } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/modules/gct-form/editor/gct-form-group-select/gct-form-group-select.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var GctFormSelectGroup = /* @__PURE__ */ defineComponent({
+	name: "GctFormSelectGroup",
+	props: {
+		c: {
+			type: Object,
+			required: true
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		value: {
+			type: String,
+			default: ""
+		},
+		size: { type: String }
+	},
+	emits: ["update:value"],
+	setup(props, { emit }) {
+		const ns = useNamespace("form-select-group");
+		const formC = inject("formController");
+		const searchValue = ref("");
+		const selectRef = ref(null);
+		const open = ref(false);
+		const collapsedGroups = ref(/* @__PURE__ */ new Set());
+		const nameVal = computed({
+			get() {
+				if (props.model.nameField) return formC.item[props.model.nameField].value;
+				return "";
+			},
+			set(v) {
+				if (props.model.nameField) return formC.item[props.model.nameField].editorValue = v;
+			}
+		});
+		function findParentByClassName(el, className) {
+			if (el.className.indexOf(className) > -1) return el;
+			if (el.parentElement) return findParentByClassName(el.parentElement, className);
+			return null;
+		}
+		function onWheel(e) {
+			if (findParentByClassName(e.target, "ant-select-dropdown")) return;
+			selectRef.value?.blur();
+		}
+		window.addEventListener("wheel", onWheel);
+		const rootRef = ref();
+		const val = computed({
+			get: () => {
+				if (!props.c.state.options.find((_) => {
+					return _.value === props.value;
+				}) && nameVal.value) return nameVal.value;
+				return props.value || void 0;
+			},
+			set: (newVal) => {
+				if (!newVal) {
+					emit("update:value", void 0);
+					nameVal.value = "";
+					return;
+				}
+				if (typeof newVal === "string") newVal = newVal.trim();
+				emit("update:value", newVal);
+				let item = null;
+				options.value.find((_) => {
+					if (_.options) item = _.options.find((item) => {
+						return item.value == newVal;
+					});
+					if (item) return true;
+					return false;
+				});
+				if (item) nameVal.value = item.label;
+			}
+		});
+		const options = computed(() => {
+			if (props.c.state.options && props.c.state.options.length > 0) return props.c.state.options;
+			return [];
+		});
+		const loadOptions = async () => {
+			return props.c.loadDictionary();
+		};
+		if (val.value != null) loadOptions();
+		const toggleGroupCollapse = (groupValue) => {
+			if (!props.model.groupCollapsible) return;
+			if (collapsedGroups.value.has(groupValue)) collapsedGroups.value.delete(groupValue);
+			else collapsedGroups.value.add(groupValue);
+		};
+		const isGroupCollapsed = (groupValue) => {
+			if (props.model.groupCollapsible !== true) return true;
+			return collapsedGroups.value.has(groupValue) ? false : true;
+		};
+		onUnmounted(() => {
+			window.removeEventListener("wheel", onWheel);
+		});
+		return {
+			ns,
+			selectRef,
+			searchValue,
+			open,
+			rootRef,
+			val,
+			options,
+			loadOptions,
+			toggleGroupCollapse,
+			isGroupCollapsed
+		};
+	},
+	render() {
+		let _slot2;
+		return createVNode("div", {
+			"ref": "rootRef",
+			"class": this.ns.b()
+		}, [createVNode(resolveComponent("a-select"), {
+			"ref": "selectRef",
+			"open": this.open,
+			"value": this.val,
+			"onUpdate:value": ($event) => this.val = $event,
+			"allowClear": true,
+			"disabled": this.c.state.disabled,
+			"size": this.size,
+			"placeholder": this.model.placeholder,
+			"onDropdownVisibleChange": this.loadOptions,
+			"show-search": true,
+			"filter-option": () => {
+				return true;
+			},
+			"searchValue": this.searchValue,
+			"onSearch": (val) => this.searchValue = val?.trim(),
+			"onFocus": () => this.open = true,
+			"onBlur": () => this.open = false,
+			"onChange": () => this.open = false
+		}, _isSlot(_slot2 = this.options.map((option) => {
+			let _slot;
+			const labelGroup = option.label != null ? option.label : " ";
+			const groupKey = String(option.value);
+			const isCollapsed = this.isGroupCollapsed(groupKey);
+			const items = (!isCollapsed ? [] : option.options || []).filter((item) => {
+				if (this.searchValue) return item.label.toLowerCase().indexOf(this.searchValue.toLowerCase()) >= 0;
+				return true;
+			});
+			if (items.length === 0) return null;
+			return createVNode(resolveComponent("a-select-opt-group"), {
+				"key": option.value,
+				"label": createVNode("div", {
+					"class": [this.ns.b("group-header"), this.model.groupCollapsible ? this.ns.b("group-header--clickable") : ""],
+					"onClick": () => this.toggleGroupCollapse(groupKey)
+				}, [this.model.groupCollapsible && createVNode("span", { "class": [this.ns.be("group-header", "arrow"), isCollapsed ? this.ns.bem("group-header", "arrow", "collapsed") : ""] }, [createVNode("i", { "class": ["iconfont", isCollapsed != true ? "icon-right" : "icon-Down"] }, null)]), createVNode("span", { "class": this.ns.be("group-header", "title") }, [labelGroup])])
+			}, _isSlot(_slot = items.map((item) => {
+				return createVNode(resolveComponent("a-select-option"), {
+					"class": this.ns.b("item-option"),
+					"key": item.value,
+					"value": item.value
+				}, { default: () => [item.icon ? createVNode("span", { "class": this.ns.be("item-option", "item-icon") }, [createVNode("i", { "class": `iconfont ${item.icon}` }, null)]) : "", createVNode("span", { "class": this.ns.be("item-option", "item-label") }, [item.label])] });
+			})) ? _slot : { default: () => [_slot] });
+		})) ? _slot2 : { default: () => [_slot2] })]);
+	}
+});
+//#endregion
+export { GctFormSelectGroup as default };

package/es/modules/gct-form/editor/gct-form-group-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-group-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 GctFormSelectGroup from "./gct-form-group-select.mjs";
+//#region src/modules/gct-form/editor/gct-form-group-select/index.ts
+var provider = class {
+	component = "gct-form-select-group";
+};
+var gct_form_group_select_default = widthEditorInstall(EditorType.SELECT_GROUP, () => new provider(), GctFormSelectGroup);
+//#endregion
+export { gct_form_group_select_default as default };

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

@@ -0,0 +1,121 @@
+import { II18nEditor } from '../../interface';
+export declare const GctFormI18n: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    context: {
+        type: import('vue').PropType<IContext>;
+        default: () => {};
+    };
+    value: {
+        type: import('vue').PropType<string>;
+    };
+    model: {
+        type: import('vue').PropType<II18nEditor>;
+        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;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    val: import('vue').WritableComputedRef<string | undefined, string>;
+    i18nConfigValue: import('vue').WritableComputedRef<"" | {
+        i18nKey: any;
+    }, "" | {
+        i18nKey: any;
+    }>;
+    onBlur: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("blur" | "update:value")[], "blur" | "update:value", 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<II18nEditor>;
+        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<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {
+    visible: boolean;
+    keepalive: boolean;
+    count: number;
+    disabled: boolean;
+    context: IContext;
+    readonly: boolean;
+    isEmptyText: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default GctFormI18n;

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

@@ -0,0 +1,88 @@
+import { useForm } from "../../hooks/use-form/use-form.mjs";
+import "../../hooks/index.mjs";
+import { gctFormItemEditorProps } from "../../props/gct-form-item/gct-form-item.props.mjs";
+import { computed, createVNode, defineComponent, mergeProps, ref, resolveComponent } from "vue";
+import { modelLoader, useNamespace } from "@gct-paas/core";
+//#region src/modules/gct-form/editor/gct-form-i18n/gct-form-i18n.tsx
+var GctFormI18n = /* @__PURE__ */ defineComponent({
+	name: "GctFormI18n",
+	props: gctFormItemEditorProps(),
+	emits: ["update:value", "blur"],
+	setup(props, { emit }) {
+		const ns = useNamespace("form-i18n");
+		const form = useForm();
+		const field = ref({});
+		const hasChange = ref(false);
+		const i18nConfig = form.item[props.model?.cfgKey || "i18nConfig"];
+		if (!i18nConfig) console.warn(`i18nConfig not found in form item, please ensure that the model has a valid cfgKey or i18nConfig is defined in the form.`);
+		const fieldKey = computed(() => {
+			return props.data?.[props.model?.fieldKey || "fieldKey"] || null;
+		});
+		async function loadField() {
+			const fieldMeta = await modelLoader.loadField(props.data?.modelKey || props.context.modelKey, fieldKey.value);
+			if (fieldMeta) field.value = fieldMeta;
+		}
+		if (fieldKey.value) loadField();
+		const val = computed({
+			get: () => {
+				if (props.value) return props.value;
+				if (hasChange.value === true) return "";
+				return field.value.name;
+			},
+			set: (newVal) => {
+				if (typeof newVal === "string") newVal = newVal.trim();
+				hasChange.value = true;
+				if (typeof newVal != "object" && props.value == newVal) return;
+				if (!newVal) i18nConfigValue.value = "";
+				emit("update:value", newVal);
+			}
+		});
+		const i18nConfigValue = computed({
+			get: () => {
+				if (i18nConfig) return { i18nKey: i18nConfig.value };
+				return "";
+			},
+			set: (val) => {
+				if (!i18nConfig) return;
+				try {
+					i18nConfig.value = JSON.parse(val).i18nKey;
+				} catch (error) {
+					console.error(error);
+				}
+			}
+		});
+		function onBlur() {
+			hasChange.value = false;
+		}
+		return {
+			ns,
+			val,
+			i18nConfigValue,
+			onBlur
+		};
+	},
+	render() {
+		return createVNode(resolveComponent("i18n-select-input"), mergeProps({
+			"class": [this.ns.b(), this.ns.m(this.size)],
+			"i18nText": this.val,
+			"onUpdate:i18nText": ($event) => this.val = $event,
+			"i18nConfig": this.i18nConfigValue,
+			"onUpdate:i18nConfig": ($event) => this.i18nConfigValue = $event,
+			"placeholderText": this.model.placeholder || this.$t("sys.inputText"),
+			"attr": "i18nKey",
+			"btnHeight": this.size === "small" ? "26px" : void 0,
+			"inputExtraProps": {
+				showCount: true,
+				maxlength: this.model.max || 32,
+				disabled: this.c.state.disabled
+			},
+			"onBlur": (e) => {
+				this.onBlur();
+				this.$emit("blur", e);
+			},
+			"size": this.size
+		}, this.model?.props || {}), null);
+	}
+});
+//#endregion
+export { GctFormI18n as default };

package/es/{editor → modules/gct-form/editor}/gct-form-i18n/gct-form-i18n.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-i18n/gct-form-i18n.provider.mjs

@@ -0,0 +1,15 @@
+//#region src/modules/gct-form/editor/gct-form-i18n/gct-form-i18n.provider.ts
+/**
+* 多语言文本选择编辑器
+*
+* @author zhanghanrui
+* @date 2024-04-02 17:04:13
+* @export
+* @class GctFormI18nProvider
+* @implements {IEditorProvider}
+*/
+var GctFormI18nProvider = class {
+	component = "gct-form-i18n";
+};
+//#endregion
+export { GctFormI18nProvider };

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

@@ -0,0 +1,8 @@
+import { EditorType } from "../../constants/editor-type/editor-type.mjs";
+import { widthEditorInstall } from "../../utils/width-install/width-install.mjs";
+import { GctFormI18nProvider } from "./gct-form-i18n.provider.mjs";
+import GctFormI18n from "./gct-form-i18n.mjs";
+//#region src/modules/gct-form/editor/gct-form-i18n/index.ts
+var gct_form_i18n_default = widthEditorInstall(EditorType.I18N, () => new GctFormI18nProvider(), GctFormI18n);
+//#endregion
+export { gct_form_i18n_default as default };

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

@@ -0,0 +1,76 @@
+@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-icon-select {
+  --box-size: 40px;
+  width: 100%;
+  height: 100%;
+}
+.gct-gct-form-icon-select__title {
+  display: inline-block;
+  font-size: 14px;
+  color: #474747;
+  width: 56px;
+  text-align: center;
+}