@gct-paas/core-web 0.1.6-dev.17 → 0.1.6-dev.19

package/es/components/batch-select-list/batch-select-list.css

@@ -0,0 +1,119 @@
+@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-batch-select-list {
+  width: 100%;
+  height: 100%;
+}
+.gct-batch-select-list__header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 44px;
+  padding: 0 22px;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.gct-batch-select-list__body {
+  width: 100%;
+  height: calc(100% - 44px);
+  padding: 0 var(--gct-padding-7);
+  overflow-y: auto;
+}
+.gct-batch-select-list__body .ant-checkbox-group {
+  width: 100%;
+}
+
+.gct-batch-select-list__item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 44px;
+  padding: 0 var(--gct-padding-3);
+  cursor: pointer;
+}
+.gct-batch-select-list__item .ant-checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 44px;
+}
+.gct-batch-select-list__item .ant-checkbox-wrapper .ant-checkbox {
+  margin-top: -6px;
+}
+.gct-batch-select-list__item .ant-checkbox-wrapper > span:not(.ant-checkbox) {
+  width: 100%;
+}
+.gct-batch-select-list__item {
+  font-size: 14px;
+  line-height: 22px;
+}
+.gct-batch-select-list__item.is-select {
+  background-color: rgb(230, 238, 255);
+}
+
+.gct-batch-select-list__item:hover {
+  background-color: rgb(242, 244, 247);
+}

package/es/components/batch-select-list/batch-select-list.d.ts

@@ -0,0 +1,158 @@
+/**
+ * @description 批量选择列表组件，提供全选和单选功能。
+ * @example
+ * <BatchSelectList v-model:value="selectedItems" :options="allItems" />
+ */
+export declare const BatchSelectList: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * 当前选中的值数组
+     */
+    value: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+        };
+        required: true;
+    };
+    /**
+     * 可选项列表
+     * @type {Array<{ label: string; value: string }>}
+     */
+    options: {
+        type: {
+            (arrayLength: number): {
+                label: string;
+                value: string;
+            }[];
+            (...items: {
+                label: string;
+                value: string;
+            }[]): {
+                label: string;
+                value: string;
+            }[];
+            new (arrayLength: number): {
+                label: string;
+                value: string;
+            }[];
+            new (...items: {
+                label: string;
+                value: string;
+            }[]): {
+                label: string;
+                value: string;
+            }[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+        };
+        default: () => never[];
+    };
+    /**
+     * 可选项的总数，如果未提供，则使用 options.length
+     * 用于计算全选状态，特别是当 options 列表是分页加载时
+     */
+    size: {
+        type: NumberConstructor;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("cancelSelect" | "checkAll" | "select" | "update:value")[], "cancelSelect" | "checkAll" | "select" | "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * 当前选中的值数组
+     */
+    value: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+        };
+        required: true;
+    };
+    /**
+     * 可选项列表
+     * @type {Array<{ label: string; value: string }>}
+     */
+    options: {
+        type: {
+            (arrayLength: number): {
+                label: string;
+                value: string;
+            }[];
+            (...items: {
+                label: string;
+                value: string;
+            }[]): {
+                label: string;
+                value: string;
+            }[];
+            new (arrayLength: number): {
+                label: string;
+                value: string;
+            }[];
+            new (...items: {
+                label: string;
+                value: string;
+            }[]): {
+                label: string;
+                value: string;
+            }[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+        };
+        default: () => never[];
+    };
+    /**
+     * 可选项的总数，如果未提供，则使用 options.length
+     * 用于计算全选状态，特别是当 options 列表是分页加载时
+     */
+    size: {
+        type: NumberConstructor;
+    };
+}>> & Readonly<{
+    onCancelSelect?: ((...args: any[]) => any) | undefined;
+    onCheckAll?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((...args: any[]) => any) | undefined;
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {
+    options: {
+        label: string;
+        value: string;
+    }[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/batch-select-list/batch-select-list.mjs

@@ -0,0 +1,133 @@
+import './batch-select-list.css';/* empty css                        */
+import { computed, createTextVNode, createVNode, defineComponent, isVNode, ref, resolveComponent, toRefs, watch } from "vue";
+import { debounce } from "lodash-es";
+import { useNamespace } from "@gct-paas/core";
+//#region src/components/batch-select-list/batch-select-list.tsx
+/**
+* @description 批量选择列表组件，提供全选和单选功能。
+* @example
+* <BatchSelectList v-model:value="selectedItems" :options="allItems" />
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var BatchSelectList = /* @__PURE__ */ defineComponent({
+	name: "BatchSelectList",
+	props: {
+		/**
+		* 当前选中的值数组
+		*/
+		value: {
+			type: Array,
+			required: true
+		},
+		/**
+		* 可选项列表
+		* @type {Array<{ label: string; value: string }>}
+		*/
+		options: {
+			type: Array,
+			default: () => []
+		},
+		/**
+		* 可选项的总数，如果未提供，则使用 options.length
+		* 用于计算全选状态，特别是当 options 列表是分页加载时
+		*/
+		size: { type: Number }
+	},
+	emits: [
+		"update:value",
+		"select",
+		"cancelSelect",
+		"checkAll"
+	],
+	setup(props, { emit }) {
+		const ns = useNamespace("batch-select-list");
+		const { options, value, size } = toRefs(props);
+		watch(value, (newVal) => {
+			val.value = newVal;
+		});
+		const val = ref(value.value);
+		/**
+		* 计算列表的总项目数
+		* @returns {number} 如果 props.size 有效则返回 props.size，否则返回 props.options 的长度
+		*/
+		const count = computed(() => {
+			if (size.value != null && size.value > 0) return size.value;
+			return options.value.length;
+		});
+		/**
+		* 全选复选框的选中状态
+		*/
+		const isCheckAll = ref(false);
+		watch(options, () => {
+			isCheckAll.value = val.value.length === count.value;
+		});
+		/**
+		* 计算全选复选框的半选状态
+		* @returns {boolean} 当已选项目数大于0且小于总项目数时为 true
+		*/
+		const indeterminate = computed(() => {
+			return val.value.length > 0 && val.value.length < options.value.length;
+		});
+		/**
+		* @description 全选复选框状态变更时的处理函数
+		* @param {Event} e - 事件对象，期望 e.target.checked 存在
+		* @returns {void}
+		*/
+		function onCheckAllChange(e) {
+			if (e.target.checked) options.value.forEach((opt) => {
+				if (!val.value.includes(opt.value)) val.value.push(opt.value);
+			});
+			else val.value = val.value.filter((item) => {
+				return !options.value.some((opt) => opt.value === item);
+			});
+			emit("update:value", val.value);
+			emit("checkAll", val.value);
+		}
+		/**
+		* 单个复选框状态变更时的处理函数（通过点击项目触发）
+		*
+		* @param {MouseEvent} e - 事件对象
+		* @param {string} id - 发生变更的复选框的 value
+		*/
+		const onCheckChange = debounce((e, id) => {
+			e.stopPropagation();
+			const index = val.value.indexOf(id);
+			const newValue = [...val.value];
+			if (index > -1) {
+				newValue.splice(index, 1);
+				emit("cancelSelect", id);
+			} else {
+				newValue.push(id);
+				emit("select", id);
+			}
+			val.value = newValue;
+			emit("update:value", val.value);
+			isCheckAll.value = val.value.length === count.value;
+		}, 30);
+		return () => {
+			let _slot;
+			return createVNode("div", { "class": ns.b() }, [createVNode("div", { "class": ns.e("header") }, [createVNode(resolveComponent("a-checkbox"), {
+				"checked": isCheckAll.value,
+				"onUpdate:checked": ($event) => isCheckAll.value = $event,
+				"indeterminate": indeterminate.value,
+				"onChange": onCheckAllChange
+			}, { default: () => [
+				createTextVNode("全选（"),
+				val.value.length,
+				createTextVNode("/"),
+				count.value,
+				createTextVNode("）")
+			] })]), createVNode("div", { "class": ns.e("body") }, [createVNode(resolveComponent("a-checkbox-group"), { "value": val.value }, _isSlot(_slot = options.value.map((opt) => {
+				return createVNode("div", {
+					"class": [ns.e("item"), ns.is("select", val.value.includes(opt.value))],
+					"key": opt.value,
+					"onClick": (e) => onCheckChange(e, opt.value)
+				}, [createVNode(resolveComponent("a-checkbox"), { "value": opt.value }, { default: () => [opt.label] })]);
+			})) ? _slot : { default: () => [_slot] })])]);
+		};
+	}
+});
+//#endregion
+export { BatchSelectList };

package/es/components/data-rules-modal/data-rules-modal.d.ts

@@ -0,0 +1,67 @@
+import { PropType } from 'vue';
+import { FIELD_TYPE, IModal } from '@gct-paas/core';
+/**
+ * 字段条件规则配置模态框
+ */
+export declare const DataRulesModal: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modal: {
+        type: PropType<IModal>;
+        required: true;
+    };
+    detail: {
+        type: PropType<IObject>;
+        default: () => {
+            dataRule: string;
+            dataRuleConfig: string;
+            dataRuleEnabled: boolean;
+        };
+    };
+    modelKey: {
+        type: PropType<string>;
+        default: string;
+    };
+    excludeValueType: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    excludeOperatorType: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    filterFieldKeys: {
+        type: PropType<FIELD_TYPE[]>;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modal: {
+        type: PropType<IModal>;
+        required: true;
+    };
+    detail: {
+        type: PropType<IObject>;
+        default: () => {
+            dataRule: string;
+            dataRuleConfig: string;
+            dataRuleEnabled: boolean;
+        };
+    };
+    modelKey: {
+        type: PropType<string>;
+        default: string;
+    };
+    excludeValueType: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    excludeOperatorType: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    filterFieldKeys: {
+        type: PropType<FIELD_TYPE[]>;
+    };
+}>> & Readonly<{}>, {
+    detail: IObject;
+    modelKey: string;
+    excludeValueType: string[];
+    excludeOperatorType: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/data-rules-modal/data-rules-modal.mjs

@@ -0,0 +1,99 @@
+import { createVNode, defineComponent, provide, ref, resolveComponent } from "vue";
+import { FIELD_TYPE, useNamespace } from "@gct-paas/core";
+//#region src/components/data-rules-modal/data-rules-modal.tsx
+/**
+* 字段条件规则配置模态框
+*/
+var DataRulesModal = /* @__PURE__ */ defineComponent({
+	name: "DataRulesModal",
+	props: {
+		modal: {
+			type: Object,
+			required: true
+		},
+		detail: {
+			type: Object,
+			default: () => ({
+				dataRule: "",
+				dataRuleConfig: "",
+				dataRuleEnabled: true
+			})
+		},
+		modelKey: {
+			type: String,
+			default: ""
+		},
+		excludeValueType: {
+			type: Array,
+			default: () => []
+		},
+		excludeOperatorType: {
+			type: Array,
+			default: () => []
+		},
+		filterFieldKeys: { type: Object }
+	},
+	setup(props) {
+		const ns = useNamespace("data-rules-modal");
+		const dataRulesRef = ref();
+		provide("isDataFilterEditor", true);
+		if (props.modal) props.modal.callback(async () => {
+			const dataRulesRes = dataRulesRef.value.getDataRulesResult();
+			dataRulesRef.value.resetData();
+			return {
+				ok: true,
+				data: [{
+					dataRule: {
+						query: dataRulesRes.query,
+						varKeys: dataRulesRes.varKeys,
+						exp: dataRulesRes.exp,
+						typeMap: dataRulesRes?.typeMap || {}
+					},
+					dataRuleConfig: dataRulesRes.treeStr,
+					dataRuleEnabled: true
+				}]
+			};
+		}, async () => {
+			dataRulesRef.value.resetData();
+			return true;
+		});
+		const list = ref([]);
+		const getConditionField = async (modelKey) => {
+			const result = await _api.apaas.fieldMeta.getListConditionField({ modelKey }) || [];
+			const filterFieldKeys = props.filterFieldKeys || [
+				FIELD_TYPE.TEXT,
+				FIELD_TYPE.LONG_TEXT,
+				FIELD_TYPE.INTEGER,
+				FIELD_TYPE.LONG,
+				FIELD_TYPE.DOUBLE,
+				FIELD_TYPE.DECIMAL,
+				FIELD_TYPE.BOOLEAN,
+				FIELD_TYPE.DATE,
+				FIELD_TYPE.DATE_TIME,
+				FIELD_TYPE.TIME,
+				FIELD_TYPE.ENUM,
+				FIELD_TYPE.ENUM_MULTI,
+				FIELD_TYPE.REF,
+				FIELD_TYPE.REF_MULTI
+			];
+			list.value = result.filter((i) => filterFieldKeys.includes(i.type)).filter((v) => v.createType === "USER_DEFINED" || v.createType === "BUILTIN");
+		};
+		async function onInit() {
+			if (props.modelKey) getConditionField(props.modelKey);
+		}
+		onInit();
+		return () => {
+			return createVNode("div", { "class": ns.b() }, [createVNode(resolveComponent("data-rules-container"), {
+				"ref": "dataRulesRef",
+				"fieldList": list.value,
+				"detail": props.detail,
+				"isDesign": true,
+				"isPageDesigner": true,
+				"excludeValueType": props.excludeValueType,
+				"excludeOperatorType": props.excludeOperatorType
+			}, null)]);
+		};
+	}
+});
+//#endregion
+export { DataRulesModal };

package/es/components/design-save-tip/design-save-tip.css

@@ -0,0 +1,107 @@
+@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-design-save-tip {
+  position: relative;
+  width: 316px;
+  height: 140px;
+  padding: var(--gct-padding-7);
+  padding-left: 38px;
+}
+.gct-design-save-tip__tip-icon {
+  position: absolute;
+  top: 17px;
+  left: 16px;
+  font-size: 16px;
+}
+
+.gct-design-save-tip__header {
+  font-size: 14px;
+  font-weight: bold;
+  color: #1A1D23;
+}
+
+.gct-design-save-tip__content {
+  margin-top: 2px;
+  font-size: 14px;
+  color: var(--gct-color-text-4);
+}
+
+.gct-design-save-tip__footer {
+  margin-top: 16px;
+}
+.gct-design-save-tip__footer .ant-btn-link {
+  padding-right: 0;
+  padding-left: 0;
+  margin-right: 40px;
+}
+
+.gct-design-save-tip__cancel-btn {
+  width: 62px;
+  margin-right: 12px;
+}
+
+.gct-design-save-tip__save-exit {
+  width: 90px;
+}