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

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

package/es/components/design-view-layout/design-view-layout.css

@@ -0,0 +1,157 @@
+@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 */
+/**
+* 设计视图布局组件样式
+* 使用 BEM 命名规范
+*/
+.gct-design-view-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.gct-design-view-layout .gct-modal-name-editor__input .ant-input.ant-input-sm {
+  color: rgb(26, 29, 35);
+}
+.gct-design-view-layout__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 69px;
+  padding: 0 24px;
+  background-color: #fff;
+  border-bottom: 1px solid #E0E3EB;
+}
+
+.gct-design-view-layout__header-back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.gct-design-view-layout__header-info {
+  display: inline-block;
+  margin-left: 16px;
+}
+
+.gct-design-view-layout__header-sub-title {
+  font-size: 12px;
+  color: rgb(90, 95, 107);
+}
+
+.gct-design-view-layout__header-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.gct-design-view-layout__header-left {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.gct-design-view-layout__header-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.gct-design-view-layout__header-right {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.gct-design-view-layout__header-actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  height: 100%;
+}
+
+.gct-design-view-layout__header-action-btn {
+  display: flex;
+  align-items: center;
+}
+.gct-design-view-layout__header-action-btn:focus {
+  color: rgba(0, 0, 0, 0.85);
+  border-color: #E0E3EB;
+}
+.gct-design-view-layout__header-action-btn .gct-iconfont {
+  margin-right: 6px;
+  font-size: 14px;
+}
+.gct-design-view-layout__header-action-btn span {
+  height: 22px;
+}
+
+.gct-design-view-layout__content {
+  height: calc(100% - 70px);
+}

package/es/components/design-view-layout/design-view-layout.d.ts

@@ -0,0 +1 @@
+export declare const DesignViewLayout: any;

package/es/components/design-view-layout/design-view-layout.mjs

@@ -0,0 +1,139 @@
+import { DesignStepCheck } from "../design-step-check/design-step-check.mjs";
+import './design-view-layout.css';/* empty css                         */
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeProps, ref, resolveComponent, toRefs } from "vue";
+import { t, useNamespace } from "@gct-paas/core";
+import { ModalNameEditor } from "@gct-paas/core-web";
+//#region src/components/design-view-layout/design-view-layout.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var DesignViewLayout = /* @__PURE__ */ defineComponent({
+	name: "DesignViewLayout",
+	props: {
+		name: {
+			type: String,
+			default: "未命名"
+		},
+		defaultName: {
+			type: String,
+			default: "未命名卡片名称"
+		},
+		editName: {
+			type: Boolean,
+			default: true
+		},
+		subTitle: {
+			type: String,
+			default: ""
+		},
+		step: {
+			type: String,
+			default: ""
+		},
+		steps: {
+			type: Array,
+			default: () => []
+		},
+		actions: {
+			type: Array,
+			default: () => []
+		},
+		save: { type: Function },
+		next: { type: Function }
+	},
+	emits: [
+		"changeName",
+		"back",
+		"stepChange"
+	],
+	setup(props, { slots, emit, expose }) {
+		const ns = useNamespace("design-view-layout");
+		const stepCheckRef = ref();
+		const { name, subTitle, step, steps } = toRefs(props);
+		const isLoading = ref(false);
+		const val = computed({
+			get() {
+				return name.value;
+			},
+			set(val) {
+				if (name.value !== val) {
+					name.value = val;
+					emit("changeName", val);
+				}
+			}
+		});
+		const isBack = computed(() => {
+			return history.length > 1 || !!window.$wujie;
+		});
+		const isLastStep = computed(() => {
+			return steps.value.length === 0 || steps.value[steps.value.length - 1]?.tag === step.value;
+		});
+		function onBack(e) {
+			e.stopPropagation();
+			emit("back", e);
+		}
+		async function onNext() {
+			if (props.next) try {
+				isLoading.value = true;
+				await props.next();
+			} catch (error) {
+				console.error("DesignViewLayout: next function error", error);
+			} finally {
+				isLoading.value = false;
+			}
+		}
+		async function onSave() {
+			if (props.save) try {
+				isLoading.value = true;
+				await props.save();
+			} catch (error) {
+				console.error("DesignViewLayout: save function error", error);
+			} finally {
+				isLoading.value = false;
+			}
+		}
+		function setStep(stepId) {
+			if (stepCheckRef.value) stepCheckRef.value.setStep(stepId);
+		}
+		expose({ setStep });
+		return () => {
+			let _slot, _slot2;
+			return createVNode("div", { "class": ns.b() }, [createVNode("div", { "class": ns.e("header") }, [
+				createVNode("div", { "class": ns.e("header-left") }, [isBack.value ? createVNode("div", {
+					"class": ns.e("header-back"),
+					"onClick": onBack
+				}, [createVNode(resolveComponent("assets-svg-icon"), { "src": "/extras-assets/card-design/arrow_back.svg" }, null)]) : null, props.editName ? createVNode("div", { "class": ns.e("header-info") }, [createVNode("div", { "class": ns.e("header-sub-title") }, [subTitle.value]), createVNode("div", { "class": ns.e("header-title") }, [createVNode(ModalNameEditor, {
+					"value": val.value,
+					"onUpdate:value": ($event) => val.value = $event,
+					"defaultName": props.defaultName
+				}, null)])]) : null]),
+				createVNode("div", { "class": ns.e("header-center") }, [steps.value.length > 0 ? createVNode(DesignStepCheck, {
+					"ref": (ref) => stepCheckRef.value = ref,
+					"steps": steps.value,
+					"currentStep": step.value,
+					"onStepChange": (stepId, stepData) => {
+						emit("stepChange", stepId, stepData);
+					}
+				}, null) : null]),
+				createVNode("div", { "class": ns.e("header-right") }, [slots.headerRight ? slots.headerRight() : null, createVNode("div", { "class": ns.e("header-actions") }, [props.steps.length > 0 ? isLastStep.value ? createVNode(Fragment, null, [
+					slots.headerActions ? slots.headerActions() : null,
+					props.actions.map((actionProps) => {
+						createVNode(resolveComponent("a-button"), mergeProps({ "class": ns.e("header-action-btn") }, actionProps), { default: () => [actionProps.title] });
+					}),
+					createVNode(resolveComponent("a-button"), {
+						"class": ns.e("header-action-btn"),
+						"type": "primary",
+						"loading": isLoading.value,
+						"onClick": onSave,
+						"icon": createVNode("i", { "class": "gct-iconfont icon-icon_baocun_btn" }, null)
+					}, _isSlot(_slot = t("sys.saveText")) ? _slot : { default: () => [_slot] })
+				]) : createVNode(resolveComponent("a-button"), {
+					"type": "primary",
+					"onClick": onNext
+				}, _isSlot(_slot2 = t("sys.nextStep")) ? _slot2 : { default: () => [_slot2] }) : null])])
+			]), createVNode("div", { "class": ns.e("content") }, [slots.default ? slots.default() : null])]);
+		};
+	}
+});
+//#endregion
+export { DesignViewLayout };

package/es/components/field-cascader/index.d.ts

@@ -1,2 +1,3 @@
 import { default as FieldCascader } from './src/FieldCascader.vue';
-export { FieldCascader };
+import { comPropsType } from './src/hooks';
+export { FieldCascader, type comPropsType };