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

package/es/components/design-icon-button/design-icon-button.mjs

@@ -1,151 +1,98 @@
-import { defineComponent, ref, computed, createVNode, resolveComponent } from 'vue';
-import { useNamespace } from '@gct-paas/core';
 import './design-icon-button.css';/* empty css                         */
-
-const DesignIconButton = /* @__PURE__ */ defineComponent({
-  name: 'DesignIconButton',
-  props: {
-    // 是否激活，支持双向绑定。也可以不给予，由内部自行管理状态
-    active: {
-      type: Boolean
-    },
-    // 内部自行管理状态下的，是否默认激活默认值
-    defaultActive: {
-      type: Boolean,
-      default: false
-    },
-    // 默认显示图标
-    icon: {
-      type: Object,
-      required: true
-    },
-    // 激活状态显示的图标，在没有给予的情况下，还是显示 icon
-    activeIcon: {
-      type: Object
-    },
-    // 悬浮 tip 提示内容
-    tip: {
-      type: String,
-      required: true
-    },
-    // 激活状态下的 tip 提示内容，在没有给予的情况下，还是显示 tip
-    activeTip: {
-      type: String
-    },
-    // 悬浮提示位置
-    placement: {
-      type: String
-    },
-    color: {
-      type: String
-    },
-    bgColor: {
-      type: String
-    },
-    hoverColor: {
-      type: String
-    },
-    hoverBgColor: {
-      type: String
-    },
-    activeColor: {
-      type: String
-    },
-    activeBgColor: {
-      type: String
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:active', 'change', 'activate', 'deactivate', 'click'],
-  setup(props, {
-    emit,
-    slots
-  }) {
-    const ns = useNamespace('design-icon-button');
-    let isActive = ref(props.defaultActive);
-    if (props.active != null) {
-      // eslint-disable-next-line vue/no-ref-as-operand
-      isActive = computed({
-        set(val) {
-          // 只有和本地不一致时才出发相关逻辑，避免重复发送事件
-          if (props.active !== val) {
-            emit('update:active', val);
-            emit('change', val);
-            if (val === true) {
-              emit('activate');
-            } else {
-              emit('deactivate');
-            }
-          }
-        },
-        get() {
-          return props.active;
-        }
-      });
-    }
-
-    // 触发状态变更
-    function handleClick(e) {
-      // 禁用时不处理点击事件
-      if (props.disabled) {
-        return;
-      }
-      e.stopPropagation();
-      isActive.value = !isActive.value;
-      emit('click', e);
-    }
-
-    // 动态设置计算图标呈现 style 属性，用来覆盖主题下的呈现
-    const style = computed(() => {
-      const obj = {};
-      if (props.color) {
-        obj['color'] = props.color;
-      }
-      if (props.bgColor) {
-        obj['bg-color'] = props.bgColor;
-      }
-      if (props.hoverColor) {
-        obj['hover-color'] = props.hoverColor;
-      }
-      if (props.hoverBgColor) {
-        obj['hover-bg-color'] = props.hoverBgColor;
-      }
-      if (props.activeColor) {
-        obj['active-color'] = props.activeColor;
-      }
-      if (props.activeBgColor) {
-        obj['active-bg-color'] = props.activeBgColor;
-      }
-      return ns.cssVarBlock(obj);
-    });
-    const activeTitle = computed(() => {
-      return isActive.value ? props.activeTip ?? props.tip : props.tip;
-    });
-    const activeIcon = computed(() => {
-      if (isActive.value) {
-        if (slots.activeIcon) {
-          return slots.activeIcon();
-        }
-        return props.activeIcon ?? props.icon;
-      }
-      return slots.icon ? slots.icon() : props.icon;
-    });
-    return () => {
-      return createVNode("div", {
-        "class": [ns.b(), ns.is('active', isActive.value), ns.is('disabled', props.disabled)],
-        "style": style.value
-      }, [createVNode(resolveComponent("a-tooltip"), {
-        "placement": props.placement,
-        "title": activeTitle.value,
-        "onClick": handleClick
-      }, {
-        default: () => [activeIcon.value]
-      })]);
-    };
-  }
+import { useNamespace } from "@gct-paas/core";
+import { computed, createVNode, defineComponent, ref, resolveComponent } from "vue";
+//#region src/components/design-icon-button/design-icon-button.tsx
+var DesignIconButton = /* @__PURE__ */ defineComponent({
+	name: "DesignIconButton",
+	props: {
+		active: { type: Boolean },
+		defaultActive: {
+			type: Boolean,
+			default: false
+		},
+		icon: { type: Object },
+		activeIcon: { type: Object },
+		tip: {
+			type: String,
+			required: true
+		},
+		activeTip: { type: String },
+		placement: { type: String },
+		color: { type: String },
+		bgColor: { type: String },
+		hoverColor: { type: String },
+		hoverBgColor: { type: String },
+		activeColor: { type: String },
+		activeBgColor: { type: String },
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"update:active",
+		"change",
+		"activate",
+		"deactivate",
+		"click"
+	],
+	setup(props, { emit, slots }) {
+		const ns = useNamespace("design-icon-button");
+		let isActive = ref(props.defaultActive);
+		if (props.active != null) isActive = computed({
+			set(val) {
+				if (props.active !== val) {
+					emit("update:active", val);
+					emit("change", val);
+					if (val === true) emit("activate");
+					else emit("deactivate");
+				}
+			},
+			get() {
+				return props.active;
+			}
+		});
+		function handleClick(e) {
+			if (props.disabled) return;
+			e.stopPropagation();
+			isActive.value = !isActive.value;
+			emit("click", e);
+		}
+		const style = computed(() => {
+			const obj = {};
+			if (props.color) obj["color"] = props.color;
+			if (props.bgColor) obj["bg-color"] = props.bgColor;
+			if (props.hoverColor) obj["hover-color"] = props.hoverColor;
+			if (props.hoverBgColor) obj["hover-bg-color"] = props.hoverBgColor;
+			if (props.activeColor) obj["active-color"] = props.activeColor;
+			if (props.activeBgColor) obj["active-bg-color"] = props.activeBgColor;
+			return ns.cssVarBlock(obj);
+		});
+		const activeTitle = computed(() => {
+			return isActive.value ? props.activeTip ?? props.tip : props.tip;
+		});
+		const activeIcon = computed(() => {
+			if (isActive.value) {
+				if (slots.activeIcon) return slots.activeIcon();
+				return props.activeIcon ?? props.icon;
+			}
+			return slots.icon ? slots.icon() : props.icon;
+		});
+		return () => {
+			return createVNode("div", {
+				"class": [
+					ns.b(),
+					ns.is("active", isActive.value),
+					ns.is("disabled", props.disabled)
+				],
+				"style": style.value
+			}, [createVNode(resolveComponent("a-tooltip"), {
+				"placement": props.placement,
+				"title": activeTitle.value,
+				"onClick": handleClick
+			}, { default: () => [activeIcon.value] })]);
+		};
+	}
 });
-
+//#endregion
 export { DesignIconButton };

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

@@ -1,107 +1,81 @@
-import { defineComponent, createVNode, resolveComponent, isVNode } from 'vue';
-import { useNamespace, t } from '@gct-paas/core';
 import './design-save-tip.css';/* empty css                      */
-
+import { t, useNamespace } from "@gct-paas/core";
+import { createVNode, defineComponent, isVNode, resolveComponent } from "vue";
+//#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);
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const 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("svg-icon"), {
-        "src": "/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]
-      })])]);
-    };
-  }
+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": "/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.mjs

@@ -1,122 +1,96 @@
-import { defineComponent, toRefs, ref, watch, onMounted, createVNode, nextTick } from 'vue';
-import { useNamespace } from '@gct-paas/core';
 import './design-step-check.css';/* empty css                        */
-
+import { useNamespace } from "@gct-paas/core";
+import { createVNode, defineComponent, nextTick, onMounted, ref, toRefs, watch } from "vue";
+//#region src/components/design-step-check/design-step-check.tsx
 /**
- * 设计界面步骤选择
- */
-const 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)); // 确保 DOM 更新完成
-      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])]))]);
-    };
-  }
+* 设计界面步骤选择
+*/
+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 };