@gct-paas/core 0.1.5-dev.6 → 0.1.5-dev.8

package/es/utils/openUtil/overlay-popover-container/overlay-popover-container.mjs

@@ -0,0 +1,19 @@
+import { OverlayContainer } from "../overlay-container/overlay-container.mjs";
+//#region src/utils/openUtil/overlay-popover-container/overlay-popover-container.ts
+/**
+* 飘窗组件呈现容器
+*
+* @author zhanghanrui
+* @date 2024-04-08 09:04:42
+* @export
+* @class OverlayPopoverContainer
+* @extends {OverlayContainer<IPopoverOptions>}
+* @implements {IOverlayPopoverContainer}
+*/
+var OverlayPopoverContainer = class extends OverlayContainer {
+	present(target) {
+		return this.modal.present(target);
+	}
+};
+//#endregion
+export { OverlayPopoverContainer };

package/es/utils/style/index.d.ts

@@ -6,6 +6,14 @@
  * @returns
  */
 export declare const calcStyle: (data: IData, ignoringStyle?: string[]) => IObject;
+/**
+ * 计算配置样式 补充px
+ *
+ * @param data
+ * @param ignoringStyle 忽略计算的样式
+ * @returns
+ */
+export declare const calcStylePX: (data: IData, ignoringStyle?: string[]) => IObject;
 /**
  * 计算字体样式
  *

package/es/utils/style/index.mjs

@@ -71,6 +71,72 @@ var calcStyle = (data, ignoringStyle = []) => {
 	return style;
 };
 /**
+* 计算配置样式 补充px
+*
+* @param data
+* @param ignoringStyle 忽略计算的样式
+* @returns
+*/
+var calcStylePX = (data, ignoringStyle = []) => {
+	if (!data) return {};
+	const style = {};
+	if (data.paddingTop && data.paddingTop != "0" && !ignoringStyle.includes("paddingTop")) style["padding-top"] = `${data.paddingTop}px`;
+	if (data.paddingRight && data.paddingRight != "0" && !ignoringStyle.includes("paddingRight")) style["padding-right"] = `${data.paddingRight}px`;
+	if (data.paddingBottom && data.paddingBottom != "0" && !ignoringStyle.includes("paddingBottom")) style["padding-bottom"] = `${data.paddingBottom}px`;
+	if (data.paddingLeft && data.paddingLeft != "0" && !ignoringStyle.includes("paddingLeft")) style["padding-left"] = `${data.paddingLeft}px`;
+	if (data.marginTop && data.marginTop != "0" && !ignoringStyle.includes("marginTop")) style["margin-top"] = `${data.marginTop}px`;
+	if (data.marginRight && data.marginRight != "0" && !ignoringStyle.includes("marginRight")) style["margin-right"] = `${data.marginRight}px`;
+	if (data.marginBottom && data.marginBottom != "0" && !ignoringStyle.includes("marginBottom")) style["margin-bottom"] = `${data.marginBottom}px`;
+	if (data.marginLeft && data.marginLeft != "0" && !ignoringStyle.includes("marginLeft")) style["margin-left"] = `${data.marginLeft}px`;
+	if (data.backgroundColor && !ignoringStyle.includes("backgroundColor")) style["background-color"] = data.backgroundColor;
+	if (data.width != null && data.width != "" && !ignoringStyle.includes("width")) style.width = `${data.width}px`;
+	if (data.height != null && data.height != "" && !ignoringStyle.includes("height")) {
+		style.height = `${data.height}px`;
+		style.overflowX = "hidden";
+		style.overflowY = "auto";
+	}
+	const position = data.position;
+	if (position && !ignoringStyle.includes("zIndex")) {
+		style.position = position;
+		style["z-index"] = 1;
+	}
+	if (data.top && !ignoringStyle.includes("top")) style.top = `${data.top}px`;
+	if (data.right && !ignoringStyle.includes("right")) style.right = `${data.right}px`;
+	if (data.bottom && !ignoringStyle.includes("bottom")) style.bottom = `${data.bottom}px`;
+	if (data.left && !ignoringStyle.includes("left")) style.left = `${data.left}px`;
+	if (data.borderBottomLeftRadius && !ignoringStyle.includes("borderBottomLeftRadius")) style["border-top-left-radius"] = `${data.borderBottomLeftRadius}px`;
+	if (data.borderTopRightRadius && !ignoringStyle.includes("borderTopRightRadius")) style["border-top-right-radius"] = `${data.borderTopRightRadius}px`;
+	if (data.borderBottomLeftRadius && !ignoringStyle.includes("borderBottomLeftRadius")) style["border-bottom-left-radius"] = `${data.borderBottomLeftRadius}px`;
+	if (data.borderBottomRightRadius && !ignoringStyle.includes("borderBottomRightRadius")) style["border-bottom-right-radius"] = `${data.borderBottomRightRadius}px`;
+	{
+		const top = data.borderTop;
+		if (top) {
+			if (top.borderColor && !ignoringStyle.includes("borderTopColor")) style["border-top-color"] = top.borderColor;
+			if (top.borderWidth && !ignoringStyle.includes("borderTopWidth")) style["border-top-width"] = `${top.borderWidth}px`;
+			if (top.borderStyle && !ignoringStyle.includes("borderTopStyle")) style["border-top-style"] = top.borderStyle;
+		}
+		const right = data.borderRight;
+		if (right) {
+			if (right.borderColor && !ignoringStyle.includes("borderRightColor")) style["border-right-color"] = right.borderColor;
+			if (right.borderWidth && !ignoringStyle.includes("borderRightWidth")) style["border-right-width"] = `${right.borderWidth}px`;
+			if (right.borderStyle && !ignoringStyle.includes("borderRightStyle")) style["border-right-style"] = right.borderStyle;
+		}
+		const bottom = data.borderBottom;
+		if (bottom) {
+			if (bottom.borderColor && !ignoringStyle.includes("borderBottomColor")) style["border-bottom-color"] = bottom.borderColor;
+			if (bottom.borderWidth && !ignoringStyle.includes("borderBottomWidth")) style["border-bottom-width"] = `${bottom.borderWidth}px`;
+			if (bottom.borderStyle && !ignoringStyle.includes("borderBottomStyle")) style["border-bottom-style"] = bottom.borderStyle;
+		}
+		const left = data.borderLeft;
+		if (left) {
+			if (left.borderColor && !ignoringStyle.includes("borderLeftColor")) style["border-left-color"] = left.borderColor;
+			if (left.borderWidth && !ignoringStyle.includes("borderLeftWidth")) style["border-left-width"] = `${left.borderWidth}px`;
+			if (left.borderStyle && !ignoringStyle.includes("borderLeftStyle")) style["border-left-style"] = left.borderStyle;
+		}
+	}
+	return style;
+};
+/**
 * 计算字体样式
 *
 * @param data
@@ -94,4 +160,4 @@ var calcFontStyle = (data, ignoringStyle = []) => {
 	return style;
 };
 //#endregion
-export { calcFontStyle, calcStyle };
+export { calcFontStyle, calcStyle, calcStylePX };

package/es/utils/text-measure/text-measure.d.ts

@@ -0,0 +1,141 @@
+/**
+ * 文本测量工具类
+ * 使用 Canvas 测量文本宽度，支持批量测量
+ */
+interface TextMeasureOptions {
+    /** 字体大小，默认 14px */
+    fontSize?: string | number;
+    /** 字体族，默认 'Arial, sans-serif' */
+    fontFamily?: string;
+    /** 字体粗细，默认 'normal' */
+    fontWeight?: string | number;
+    /** 字体样式，默认 'normal' */
+    fontStyle?: string;
+}
+interface TextMeasureResult {
+    /** 文本内容 */
+    text: string;
+    /** 计算得到的宽度 */
+    width: number;
+}
+declare class TextMeasureUtil {
+    private canvas;
+    private ctx;
+    /**
+     * 获取 Canvas 上下文，懒加载创建
+     */
+    private getContext;
+    /**
+     * 设置字体样式
+     */
+    private setFont;
+    /**
+     * 测量单个文本的宽度
+     *
+     * @param text 要测量的文本
+     * @param options 字体选项
+     * @returns 文本宽度（像素）
+     */
+    measureText(text: string, options?: TextMeasureOptions): number;
+    /**
+     * 批量测量多段文本的宽度
+     *
+     * @param texts 要测量的文本数组
+     * @param options 字体选项
+     * @returns 包含每段文本和对应宽度的结果数组
+     */
+    measureTexts(texts: string[], options?: TextMeasureOptions): TextMeasureResult[];
+    /**
+     * 获取文本的最大宽度
+     *
+     * @param texts 要测量的文本数组
+     * @param options 字体选项
+     * @returns 最大宽度（像素）
+     */
+    getMaxWidth(texts: string[], options?: TextMeasureOptions): number;
+    /**
+     * 获取文本的最小宽度
+     *
+     * @param texts 要测量的文本数组
+     * @param options 字体选项
+     * @returns 最小宽度（像素）
+     */
+    getMinWidth(texts: string[], options?: TextMeasureOptions): number;
+    /**
+     * 计算文本的总宽度（用于水平排列的文本）
+     *
+     * @param texts 要测量的文本数组
+     * @param options 字体选项
+     * @param spacing 文本间的间距，默认 0
+     * @returns 总宽度（像素）
+     */
+    getTotalWidth(texts: string[], options?: TextMeasureOptions, spacing?: number): number;
+    /**
+     * 根据最大宽度截断文本，添加省略号
+     *
+     * @param text 原始文本
+     * @param maxWidth 最大宽度
+     * @param options 字体选项
+     * @param ellipsis 省略号，默认 '...'
+     * @param minChars 最少显示字符数，默认 0
+     * @returns 截断后的文本
+     */
+    truncateText(text: string, maxWidth: number, options?: TextMeasureOptions, ellipsis?: string, minChars?: number): string;
+    /**
+     * 销毁资源
+     */
+    destroy(): void;
+}
+/**
+ * 测量单个文本的宽度
+ *
+ * @param text 要测量的文本
+ * @param options 字体选项
+ * @returns 文本宽度（像素）
+ */
+export declare function measureText(text: string, options?: TextMeasureOptions): number;
+/**
+ * 批量测量多段文本的宽度
+ *
+ * @param texts 要测量的文本数组
+ * @param options 字体选项
+ * @returns 包含每段文本和对应宽度的结果数组
+ */
+export declare function measureTexts(texts: string[], options?: TextMeasureOptions): TextMeasureResult[];
+/**
+ * 获取文本的最大宽度
+ *
+ * @param texts 要测量的文本数组
+ * @param options 字体选项
+ * @returns 最大宽度（像素）
+ */
+export declare function getMaxTextWidth(texts: string[], options?: TextMeasureOptions): number;
+/**
+ * 获取文本的最小宽度
+ *
+ * @param texts 要测量的文本数组
+ * @param options 字体选项
+ * @returns 最小宽度（像素）
+ */
+export declare function getMinTextWidth(texts: string[], options?: TextMeasureOptions): number;
+/**
+ * 计算文本的总宽度（用于水平排列的文本）
+ *
+ * @param texts 要测量的文本数组
+ * @param options 字体选项
+ * @param spacing 文本间的间距，默认 0
+ * @returns 总宽度（像素）
+ */
+export declare function getTotalTextWidth(texts: string[], options?: TextMeasureOptions, spacing?: number): number;
+/**
+ * 根据最大宽度截断文本，添加省略号
+ *
+ * @param text 原始文本
+ * @param maxWidth 最大宽度
+ * @param options 字体选项
+ * @param ellipsis 省略号，默认 '...'
+ * @param minChars 最少显示字符数，默认 0
+ * @returns 截断后的文本
+ */
+export declare function truncateText(text: string, maxWidth: number, options?: TextMeasureOptions, ellipsis?: string, minChars?: number): string;
+export { TextMeasureUtil, type TextMeasureOptions, type TextMeasureResult };

package/es/utils/text-measure/text-measure.mjs

@@ -0,0 +1,191 @@
+//#region src/utils/text-measure/text-measure.ts
+var TextMeasureUtil = class {
+	canvas = null;
+	ctx = null;
+	/**
+	* 获取 Canvas 上下文，懒加载创建
+	*/
+	getContext() {
+		if (!this.canvas) {
+			this.canvas = document.createElement("canvas");
+			this.ctx = this.canvas.getContext("2d");
+			if (!this.ctx) throw new Error("无法创建 Canvas 2D 上下文");
+		}
+		return this.ctx;
+	}
+	/**
+	* 设置字体样式
+	*/
+	setFont(options = {}) {
+		const { fontSize = 14, fontFamily = "Arial, sans-serif", fontWeight = "normal", fontStyle = "normal" } = options;
+		const ctx = this.getContext();
+		ctx.font = `${fontStyle} ${fontWeight} ${typeof fontSize === "number" ? `${fontSize}px` : fontSize} ${fontFamily}`;
+	}
+	/**
+	* 测量单个文本的宽度
+	*
+	* @param text 要测量的文本
+	* @param options 字体选项
+	* @returns 文本宽度（像素）
+	*/
+	measureText(text, options = {}) {
+		if (!text) return 0;
+		this.setFont(options);
+		const metrics = this.getContext().measureText(text);
+		return Math.ceil(metrics.width);
+	}
+	/**
+	* 批量测量多段文本的宽度
+	*
+	* @param texts 要测量的文本数组
+	* @param options 字体选项
+	* @returns 包含每段文本和对应宽度的结果数组
+	*/
+	measureTexts(texts, options = {}) {
+		if (!texts || texts.length === 0) return [];
+		this.setFont(options);
+		const ctx = this.getContext();
+		return texts.map((text) => ({
+			text,
+			width: text ? Math.ceil(ctx.measureText(text).width) : 0
+		}));
+	}
+	/**
+	* 获取文本的最大宽度
+	*
+	* @param texts 要测量的文本数组
+	* @param options 字体选项
+	* @returns 最大宽度（像素）
+	*/
+	getMaxWidth(texts, options = {}) {
+		const results = this.measureTexts(texts, options);
+		return Math.max(...results.map((result) => result.width), 0);
+	}
+	/**
+	* 获取文本的最小宽度
+	*
+	* @param texts 要测量的文本数组
+	* @param options 字体选项
+	* @returns 最小宽度（像素）
+	*/
+	getMinWidth(texts, options = {}) {
+		const results = this.measureTexts(texts, options);
+		return Math.min(...results.map((result) => result.width), 0);
+	}
+	/**
+	* 计算文本的总宽度（用于水平排列的文本）
+	*
+	* @param texts 要测量的文本数组
+	* @param options 字体选项
+	* @param spacing 文本间的间距，默认 0
+	* @returns 总宽度（像素）
+	*/
+	getTotalWidth(texts, options = {}, spacing = 0) {
+		return this.measureTexts(texts, options).reduce((sum, result) => sum + result.width, 0) + Math.max(0, texts.length - 1) * spacing;
+	}
+	/**
+	* 根据最大宽度截断文本，添加省略号
+	*
+	* @param text 原始文本
+	* @param maxWidth 最大宽度
+	* @param options 字体选项
+	* @param ellipsis 省略号，默认 '...'
+	* @param minChars 最少显示字符数，默认 0
+	* @returns 截断后的文本
+	*/
+	truncateText(text, maxWidth, options = {}, ellipsis = "...", minChars = 0) {
+		if (!text) return "";
+		if (this.measureText(text, options) <= maxWidth) return text;
+		const availableWidth = maxWidth - this.measureText(ellipsis, options);
+		if (availableWidth <= 0) {
+			if (minChars > 0) return text.substring(0, minChars) + ellipsis;
+			return ellipsis;
+		}
+		let left = minChars;
+		let right = text.length;
+		let result = minChars > 0 ? text.substring(0, minChars) : "";
+		while (left <= right) {
+			const mid = Math.floor((left + right) / 2);
+			const substring = text.substring(0, mid);
+			if (this.measureText(substring, options) <= availableWidth) {
+				result = substring;
+				left = mid + 1;
+			} else right = mid - 1;
+		}
+		return result + ellipsis;
+	}
+	/**
+	* 销毁资源
+	*/
+	destroy() {
+		this.canvas = null;
+		this.ctx = null;
+	}
+};
+var textMeasureUtil = new TextMeasureUtil();
+/**
+* 测量单个文本的宽度
+*
+* @param text 要测量的文本
+* @param options 字体选项
+* @returns 文本宽度（像素）
+*/
+function measureText(text, options) {
+	return textMeasureUtil.measureText(text, options);
+}
+/**
+* 批量测量多段文本的宽度
+*
+* @param texts 要测量的文本数组
+* @param options 字体选项
+* @returns 包含每段文本和对应宽度的结果数组
+*/
+function measureTexts(texts, options) {
+	return textMeasureUtil.measureTexts(texts, options);
+}
+/**
+* 获取文本的最大宽度
+*
+* @param texts 要测量的文本数组
+* @param options 字体选项
+* @returns 最大宽度（像素）
+*/
+function getMaxTextWidth(texts, options) {
+	return textMeasureUtil.getMaxWidth(texts, options);
+}
+/**
+* 获取文本的最小宽度
+*
+* @param texts 要测量的文本数组
+* @param options 字体选项
+* @returns 最小宽度（像素）
+*/
+function getMinTextWidth(texts, options) {
+	return textMeasureUtil.getMinWidth(texts, options);
+}
+/**
+* 计算文本的总宽度（用于水平排列的文本）
+*
+* @param texts 要测量的文本数组
+* @param options 字体选项
+* @param spacing 文本间的间距，默认 0
+* @returns 总宽度（像素）
+*/
+function getTotalTextWidth(texts, options, spacing) {
+	return textMeasureUtil.getTotalWidth(texts, options, spacing);
+}
+/**
+* 根据最大宽度截断文本，添加省略号
+*
+* @param text 原始文本
+* @param maxWidth 最大宽度
+* @param options 字体选项
+* @param ellipsis 省略号，默认 '...'
+* @param minChars 最少显示字符数，默认 0
+* @returns 截断后的文本
+*/
+function truncateText(text, maxWidth, options, ellipsis, minChars) {
+	return textMeasureUtil.truncateText(text, maxWidth, options, ellipsis, minChars);
+}
+//#endregion
+export { TextMeasureUtil, getMaxTextWidth, getMinTextWidth, getTotalTextWidth, measureText, measureTexts, truncateText };

package/es/utils/util.d.ts

@@ -37,3 +37,4 @@ export declare function genUrl(url: string, data: IObject): string;
  * ```
  */
 export declare function openWindow(url: string, options?: IOpenWindowOptions): Window | null;
+export declare const deleteAndInsertArr: (arr: IObject[], deleteIndex: number, insertIndex: number) => void;

package/es/utils/util.mjs

@@ -56,5 +56,13 @@ function openWindow(url, options) {
 	if (optionStr) featuresStr = featuresStr ? `${featuresStr},${optionStr}` : optionStr;
 	return window.open(finalUrl, target, featuresStr);
 }
+var deleteAndInsertArr = (arr, deleteIndex, insertIndex) => {
+	if (deleteIndex < 0 || deleteIndex >= arr.length || insertIndex < 0 || insertIndex > arr.length) {
+		console.log("下标超出数组范围");
+		return;
+	}
+	const deletedElement = arr.splice(deleteIndex, 1)[0];
+	arr.splice(insertIndex, 0, deletedElement);
+};
 //#endregion
-export { genUrl, openWindow };
+export { deleteAndInsertArr, genUrl, openWindow };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gct-paas/core",
-  "version": "0.1.5-dev.6",
+  "version": "0.1.5-dev.8",
   "type": "module",
   "description": "paas 平台核心包",
   "loader": "dist/index.esm.min.js",
@@ -32,7 +32,8 @@
   "author": "gct",
   "dependencies": {
     "@fingerprintjs/fingerprintjs": "^5.1.0",
-    "@gct-paas/api": "0.1.4-dev.0",
+    "@floating-ui/dom": "^1.7.6",
+    "@gct-paas/api": "0.1.4-dev.3",
     "@module-federation/runtime": "^2.2.3",
     "@vueuse/core": "^14.1.0",
     "async-validator": "^4.2.5",
@@ -57,7 +58,7 @@
     "playwright": "^1.58.0"
   },
   "peerDependencies": {
-    "@gct-paas/api": "0.1.4-dev.0",
+    "@gct-paas/api": "0.1.4-dev.3",
     "vue": ">=3",
     "vue-i18n": ">=11",
     "vue-router": ">=4"