@gct-paas/core-web 0.1.6-dev.2 → 0.1.6-dev.20

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;
+}

package/es/components/design-save-tip/design-save-tip.d.ts

@@ -0,0 +1,44 @@
+import { PropType } from 'vue';
+import { IModal } from '@gct-paas/core';
+export declare const DesignSaveTip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modal: {
+        type: PropType<IModal>;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    content: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    exit: {
+        type: PropType<() => void>;
+    };
+    saveAndExit: {
+        type: PropType<() => void>;
+    };
+}>, () => 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;
+    };
+    title: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    content: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    exit: {
+        type: PropType<() => void>;
+    };
+    saveAndExit: {
+        type: PropType<() => void>;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    content: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,81 @@
+import './design-save-tip.css';/* empty css                      */
+import { createVNode, defineComponent, isVNode, resolveComponent } from "vue";
+import { t, useNamespace } from "@gct-paas/core";
+//#region src/components/design-save-tip/design-save-tip.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var DesignSaveTip = /* @__PURE__ */ defineComponent({
+	name: "DesignSaveTip",
+	props: {
+		modal: {
+			type: Object,
+			required: true
+		},
+		title: {
+			type: String,
+			default: () => {
+				return t("sys.cardDesign.back_info.title");
+			}
+		},
+		content: {
+			type: String,
+			default: () => {
+				return t("sys.cardDesign.back_info.content");
+			}
+		},
+		exit: { type: Function },
+		saveAndExit: { type: Function }
+	},
+	setup(props) {
+		const ns = useNamespace("design-save-tip");
+		/**
+		* 继续编辑
+		*/
+		function onContinue() {
+			props.modal.dismiss({ ok: false });
+		}
+		/**
+		* 不保存并退出
+		*
+		*/
+		function onNotSave() {
+			if (props.exit) props.exit();
+			props.modal.dismiss({ ok: true });
+		}
+		/**
+		* 保存并退出
+		*/
+		function onSaveAndExit() {
+			if (props.saveAndExit) props.saveAndExit();
+			props.modal.dismiss({ ok: true });
+		}
+		return () => {
+			let _slot, _slot2, _slot3;
+			return createVNode("div", { "class": ns.b() }, [
+				createVNode("div", { "class": ns.e("tip-icon") }, [createVNode(resolveComponent("assets-svg-icon"), { "src": "/extras-assets/design-view/exclamation-circle.svg" }, null)]),
+				createVNode("div", { "class": ns.e("header") }, [props.title]),
+				createVNode("div", { "class": ns.e("content") }, [props.content]),
+				createVNode("div", { "class": ns.e("footer") }, [
+					createVNode(resolveComponent("a-button"), {
+						"type": "link",
+						"onClick": onContinue
+					}, _isSlot(_slot = t("sys.app.continueEdit")) ? _slot : { default: () => [_slot] }),
+					createVNode(resolveComponent("a-button"), {
+						"class": ns.e("cancel-btn"),
+						"size": "small",
+						"onClick": onNotSave
+					}, _isSlot(_slot2 = t("sys.cardDesign.back_info.notSave")) ? _slot2 : { default: () => [_slot2] }),
+					createVNode(resolveComponent("a-button"), {
+						"class": ns.e("save-exit"),
+						"type": "primary",
+						"size": "small",
+						"onClick": onSaveAndExit
+					}, _isSlot(_slot3 = t("sys.cardDesign.back_info.saveAndExit")) ? _slot3 : { default: () => [_slot3] })
+				])
+			]);
+		};
+	}
+});
+//#endregion
+export { DesignSaveTip };

package/es/components/design-step-check/design-step-check.css

@@ -0,0 +1,133 @@
+@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-step-check {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 3px 2px;
+  overflow: hidden;
+  background-color: rgb(232, 235, 240);
+  border-radius: 20px;
+}
+.gct-design-step-check::before {
+  position: absolute;
+  top: 2px;
+  left: var(--indicator-left, 3px);
+  z-index: 1;
+  display: var(--indicator-display, block);
+  width: var(--indicator-width, 130px);
+  height: 36px;
+  pointer-events: none;
+  content: "";
+  background-color: rgb(255, 255, 255);
+  border-radius: 18px;
+}
+.gct-design-step-check__item {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  min-width: 131px;
+  max-width: max-content;
+  height: 36px;
+  padding: 3px;
+  padding-right: 26px;
+  color: var(--gct-color-text-1);
+  cursor: pointer;
+  background-color: transparent;
+  border-radius: 18px;
+}
+.gct-design-step-check__item.is-selected .gct-design-step-check__item-number {
+  color: #fff;
+  background-color: var(--gct-color-primary);
+}
+
+.gct-design-step-check__item.is-selected .gct-design-step-check__item-name {
+  font-weight: bold;
+  color: rgb(33, 37, 40);
+}
+
+.gct-design-step-check__item-number {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  margin-right: 8px;
+  font-weight: normal;
+  color: #5A5F6B;
+  border-radius: 50%;
+}
+
+.gct-design-step-check__item-name {
+  flex: 1;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 22px;
+  color: #5A5F6B;
+  white-space: nowrap;
+}

package/es/components/design-step-check/design-step-check.d.ts

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+import { IViewStep } from '../../interface';
+/**
+ * 设计界面步骤选择
+ */
+export declare const DesignStepCheck: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    steps: {
+        type: PropType<IViewStep[]>;
+        default: () => never[];
+    };
+    currentStep: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("stepChange" | "update:currentStep")[], "stepChange" | "update:currentStep", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    steps: {
+        type: PropType<IViewStep[]>;
+        default: () => never[];
+    };
+    currentStep: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+}>> & Readonly<{
+    onStepChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:currentStep"?: ((...args: any[]) => any) | undefined;
+}>, {
+    steps: IViewStep[];
+    currentStep: string | number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/design-step-check/design-step-check.mjs

@@ -0,0 +1,96 @@
+import './design-step-check.css';/* empty css                        */
+import { createVNode, defineComponent, nextTick, onMounted, ref, toRefs, watch } from "vue";
+import { useNamespace } from "@gct-paas/core";
+//#region src/components/design-step-check/design-step-check.tsx
+/**
+* 设计界面步骤选择
+*/
+var DesignStepCheck = /* @__PURE__ */ defineComponent({
+	name: "DesignStepCheck",
+	props: {
+		steps: {
+			type: Array,
+			default: () => []
+		},
+		currentStep: {
+			type: [String, Number],
+			default: ""
+		}
+	},
+	emits: ["update:currentStep", "stepChange"],
+	setup(props, { emit, expose }) {
+		const ns = useNamespace("design-step-check");
+		const { steps, currentStep } = toRefs(props);
+		const containerRef = ref();
+		const innerCurrentStep = ref(currentStep.value);
+		const offsetLeft = ref(0);
+		const width = ref(0);
+		const updateIndicatorPosition = async () => {
+			await new Promise((resolve) => setTimeout(resolve, 100));
+			await nextTick();
+			if (!containerRef.value) return;
+			const selectedIndex = steps.value.findIndex((step) => step.tag === innerCurrentStep.value);
+			if (selectedIndex === -1) return;
+			const items = containerRef.value.querySelectorAll(`.${ns.e("item")}`);
+			const selectedItem = items[selectedIndex];
+			if (selectedItem) {
+				offsetLeft.value = 2;
+				for (let i = 0; i < selectedIndex; i++) {
+					const item = items[i];
+					offsetLeft.value += item.offsetWidth;
+				}
+				width.value = selectedItem.offsetWidth;
+			}
+		};
+		watch(currentStep, (newValue) => {
+			innerCurrentStep.value = newValue;
+			updateIndicatorPosition();
+		});
+		watch(steps, (newSteps) => {
+			if (newSteps.length > 0 && !innerCurrentStep.value) {
+				innerCurrentStep.value = newSteps[0].tag;
+				emit("update:currentStep", innerCurrentStep.value);
+				emit("stepChange", innerCurrentStep.value, newSteps[0]);
+			}
+			updateIndicatorPosition();
+		});
+		const handleStepClick = (step) => {
+			innerCurrentStep.value = step.tag;
+			emit("update:currentStep", step.tag);
+			emit("stepChange", step.tag, step);
+			updateIndicatorPosition();
+		};
+		onMounted(() => {
+			updateIndicatorPosition();
+		});
+		/**
+		* 设置当前步骤，用于外部控制，不需要触发事件
+		*
+		* @param {string} tag
+		*/
+		function setStep(tag) {
+			if (steps.value.some((step) => step.tag === tag)) {
+				innerCurrentStep.value = tag;
+				updateIndicatorPosition();
+			}
+		}
+		expose({ setStep });
+		return () => {
+			return createVNode("div", {
+				"ref": containerRef,
+				"class": ns.b(),
+				"style": {
+					"--indicator-display": currentStep.value ? "block" : "none",
+					"--indicator-left": `${offsetLeft.value || -40}px`,
+					"--indicator-width": `${width.value || -131}px`
+				}
+			}, [props.steps.map((step) => createVNode("div", {
+				"key": step.tag,
+				"class": [ns.e("item"), ns.is("selected", step.tag === innerCurrentStep.value)],
+				"onClick": () => handleStepClick(step)
+			}, [createVNode("div", { "class": ns.e("item-number") }, [props.steps.findIndex((s) => s.tag === step.tag) + 1]), createVNode("div", { "class": ns.e("item-name") }, [step.name])]))]);
+		};
+	}
+});
+//#endregion
+export { DesignStepCheck };