@univerjs/icons-vue 1.34.0 → 1.38.0

package/dist/cjs/autofill-double-icon.cjs

@@ -54,13 +54,20 @@ const element = {
 const AutofillDoubleIcon = (0, vue.defineComponent)({
 	name: "AutofillDoubleIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "autofill-double-icon",
 			icon: element

package/dist/cjs/autowrap-icon.cjs

@@ -48,13 +48,20 @@ const element = {
 const AutowrapIcon = (0, vue.defineComponent)({
 	name: "AutowrapIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "autowrap-icon",
 			icon: element

package/dist/cjs/back-slash-double-icon.cjs

@@ -35,13 +35,20 @@ const element = {
 const BackSlashDoubleIcon = (0, vue.defineComponent)({
 	name: "BackSlashDoubleIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "back-slash-double-icon",
 			icon: element

package/dist/cjs/ban-icon.cjs

@@ -31,13 +31,20 @@ const element = {
 const BanIcon = (0, vue.defineComponent)({
 	name: "BanIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "ban-icon",
 			icon: element

package/dist/cjs/bar-chart-icon.cjs

@@ -27,13 +27,20 @@ const element = {
 const BarChartIcon = (0, vue.defineComponent)({
 	name: "BarChartIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "bar-chart-icon",
 			icon: element

package/dist/cjs/base.cjs

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let vue = require("vue");
 //#region ts/base.ts
+const SVG_STROKE_ELEMENT_SELECTOR = "circle, ellipse, line, path, polygon, polyline, rect, text, textPath, tspan, use";
 const IconBase = (0, vue.defineComponent)({
 	name: "UniverIcon",
 	inheritAttrs: false,
@@ -16,11 +17,27 @@ const IconBase = (0, vue.defineComponent)({
 		extend: {
 			type: Object,
 			default: void 0
+		},
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
 		}
 	},
 	setup(props) {
 		const attrs = (0, vue.useAttrs)();
 		const idSuffix = `_${generateShortUuid()}`;
+		const rootRef = (0, vue.ref)(null);
+		let restoreStrokeWidths;
+		const updatePreserveStrokeWidth = () => {
+			restoreStrokeWidths?.();
+			restoreStrokeWidths = void 0;
+			if (props.preserveStrokeWidth && rootRef.value) restoreStrokeWidths = applyPreserveStrokeWidth(rootRef.value);
+		};
+		(0, vue.onMounted)(updatePreserveStrokeWidth);
+		(0, vue.watch)([() => props.preserveStrokeWidth, () => props.icon], updatePreserveStrokeWidth, { flush: "post" });
+		(0, vue.onBeforeUnmount)(() => {
+			restoreStrokeWidths?.();
+		});
 		return () => {
 			const cls = [
 				"univerjs-icon",
@@ -32,7 +49,8 @@ const IconBase = (0, vue.defineComponent)({
 				idSuffix
 			}, {
 				...attrs,
-				class: cls
+				class: cls,
+				ref: rootRef
 			}, props.extend);
 		};
 	}
@@ -85,6 +103,72 @@ function shouldSuffixDefId(childId, defIds) {
 function replaceLocalUrlRefs(value, idSuffix) {
 	return value.replace(/url\(#([^)]+?)\)/g, `url(#$1${idSuffix})`);
 }
+/** Keep ordinary strokes at their 16×16 baseline width as the icon's layout changes. */
+function applyPreserveStrokeWidth(root) {
+	const viewBox = root.viewBox.baseVal;
+	const viewBoxSize = Math.max(viewBox.width, viewBox.height);
+	if (!Number.isFinite(viewBoxSize) || viewBoxSize <= 0) return () => {};
+	const baselineViewportScale = 16 / viewBoxSize;
+	const overrides = Array.from(root.querySelectorAll(SVG_STROKE_ELEMENT_SELECTOR)).flatMap((element) => {
+		const computedStyle = getComputedStyle(element);
+		const strokeWidth = Number.parseFloat(computedStyle.strokeWidth);
+		if (computedStyle.stroke === "none" || Number.parseFloat(computedStyle.strokeOpacity) === 0 || computedStyle.vectorEffect === "non-scaling-stroke" || !Number.isFinite(strokeWidth) || strokeWidth <= 0) return [];
+		return [{
+			consumerControlled: false,
+			element,
+			hadStyleAttribute: element.hasAttribute("style"),
+			sourceStrokeWidth: strokeWidth,
+			strokeWidth: getInlineStyleSnapshot(element.style, "stroke-width")
+		}];
+	});
+	if (overrides.length === 0) return () => {};
+	let active = true;
+	const updateStrokeWidths = () => {
+		if (!active) return;
+		const currentViewportScale = getCurrentViewportScale(root, viewBox.width, viewBox.height);
+		if (currentViewportScale === null) return;
+		overrides.forEach((override) => {
+			if (override.consumerControlled) return;
+			const expectedStrokeWidth = override.appliedStrokeWidth ?? override.strokeWidth.value;
+			if (override.element.style.getPropertyValue("stroke-width") !== expectedStrokeWidth || override.element.style.getPropertyPriority("stroke-width") !== override.strokeWidth.priority) {
+				override.consumerControlled = true;
+				return;
+			}
+			const appliedStrokeWidth = `${override.sourceStrokeWidth * (baselineViewportScale / currentViewportScale)}px`;
+			override.element.style.setProperty("stroke-width", appliedStrokeWidth, override.strokeWidth.priority);
+			override.appliedStrokeWidth = appliedStrokeWidth;
+		});
+	};
+	updateStrokeWidths();
+	const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(updateStrokeWidths);
+	resizeObserver?.observe(root);
+	return () => {
+		active = false;
+		resizeObserver?.disconnect();
+		overrides.forEach((override) => {
+			if (override.appliedStrokeWidth === void 0) return;
+			restoreInlineStyle(override.element.style, "stroke-width", override.appliedStrokeWidth, override.strokeWidth.priority, override.strokeWidth);
+			if (!override.hadStyleAttribute && override.element.style.length === 0) override.element.removeAttribute("style");
+		});
+	};
+}
+function getCurrentViewportScale(root, viewBoxWidth, viewBoxHeight) {
+	if (viewBoxWidth <= 0 || viewBoxHeight <= 0) return null;
+	const bounds = root.getBoundingClientRect();
+	const scale = Math.min(bounds.width / viewBoxWidth, bounds.height / viewBoxHeight);
+	return Number.isFinite(scale) && scale > 0 ? scale : null;
+}
+function getInlineStyleSnapshot(style, property) {
+	return {
+		priority: style.getPropertyPriority(property),
+		value: style.getPropertyValue(property)
+	};
+}
+function restoreInlineStyle(style, property, appliedValue, appliedPriority, snapshot) {
+	if (style.getPropertyValue(property) !== appliedValue || style.getPropertyPriority(property) !== appliedPriority) return;
+	if (snapshot.value) style.setProperty(property, snapshot.value, snapshot.priority);
+	else style.removeProperty(property);
+}
 function generateShortUuid() {
 	return Math.random().toString(36).substring(2, 8);
 }

package/dist/cjs/bases-app-icon.cjs

@@ -35,13 +35,20 @@ const element = {
 const BasesAppIcon = (0, vue.defineComponent)({
 	name: "BasesAppIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "bases-app-icon",
 			icon: element

package/dist/cjs/bases-multi-icon.cjs

@@ -55,13 +55,20 @@ const element = {
 const BasesMultiIcon = (0, vue.defineComponent)({
 	name: "BasesMultiIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "bases-multi-icon",
 			icon: element

package/dist/cjs/boards-app-icon.cjs

@@ -35,13 +35,20 @@ const element = {
 const BoardsAppIcon = (0, vue.defineComponent)({
 	name: "BoardsAppIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "boards-app-icon",
 			icon: element

package/dist/cjs/boards-multi-icon.cjs

@@ -57,13 +57,20 @@ const element = {
 const BoardsMultiIcon = (0, vue.defineComponent)({
 	name: "BoardsMultiIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "boards-multi-icon",
 			icon: element

package/dist/cjs/bold-icon.cjs

@@ -27,13 +27,20 @@ const element = {
 const BoldIcon = (0, vue.defineComponent)({
 	name: "BoldIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "bold-icon",
 			icon: element

package/dist/cjs/bottom-icon.cjs

@@ -52,13 +52,20 @@ const element = {
 const BottomIcon = (0, vue.defineComponent)({
 	name: "BottomIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "bottom-icon",
 			icon: element

package/dist/cjs/boxplot-icon.cjs

@@ -84,13 +84,20 @@ const element = {
 const BoxplotIcon = (0, vue.defineComponent)({
 	name: "BoxplotIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "boxplot-icon",
 			icon: element

package/dist/cjs/brush-icon.cjs

@@ -27,13 +27,20 @@ const element = {
 const BrushIcon = (0, vue.defineComponent)({
 	name: "BrushIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "brush-icon",
 			icon: element

package/dist/cjs/bubble-icon.cjs

@@ -63,13 +63,20 @@ const element = {
 const BubbleIcon = (0, vue.defineComponent)({
 	name: "BubbleIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "bubble-icon",
 			icon: element

package/dist/cjs/calendar-icon.cjs

@@ -57,13 +57,20 @@ const element = {
 const CalendarIcon = (0, vue.defineComponent)({
 	name: "CalendarIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "calendar-icon",
 			icon: element

package/dist/cjs/callout-icon.cjs

@@ -50,13 +50,20 @@ const element = {
 const CalloutIcon = (0, vue.defineComponent)({
 	name: "CalloutIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "callout-icon",
 			icon: element

package/dist/cjs/cancel-freeze-icon.cjs

@@ -33,13 +33,20 @@ const element = {
 const CancelFreezeIcon = (0, vue.defineComponent)({
 	name: "CancelFreezeIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "cancel-freeze-icon",
 			icon: element

package/dist/cjs/cancel-merge-icon.cjs

@@ -48,13 +48,20 @@ const element = {
 const CancelMergeIcon = (0, vue.defineComponent)({
 	name: "CancelMergeIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "cancel-merge-icon",
 			icon: element

package/dist/cjs/candlestick-chart-icon.cjs

@@ -45,13 +45,20 @@ const element = {
 const CandlestickChartIcon = (0, vue.defineComponent)({
 	name: "CandlestickChartIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "candlestick-chart-icon",
 			icon: element

package/dist/cjs/catalogue-icon.cjs

@@ -41,13 +41,20 @@ const element = {
 const CatalogueIcon = (0, vue.defineComponent)({
 	name: "CatalogueIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "catalogue-icon",
 			icon: element

package/dist/cjs/cell-0-double-icon.cjs

@@ -64,13 +64,20 @@ const element = {
 const Cell0DoubleIcon = (0, vue.defineComponent)({
 	name: "Cell0DoubleIcon",
 	inheritAttrs: false,
-	props: { extend: {
-		type: Object,
-		default: void 0
-	} },
+	props: {
+		preserveStrokeWidth: {
+			type: Boolean,
+			default: false
+		},
+		extend: {
+			type: Object,
+			default: void 0
+		}
+	},
 	setup(props, { attrs }) {
 		return () => (0, vue.h)(ts_base_js.IconBase, {
 			...attrs,
+			preserveStrokeWidth: props.preserveStrokeWidth,
 			extend: props.extend,
 			id: "cell-0-double-icon",
 			icon: element