sard 1.0.29 → 1.2.0

package/components/text-shrink/text-shrink.vue.js

@@ -0,0 +1,252 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultTextShrinkProps } from "./common.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, toDisplayString, unref, useTemplateRef, watch } from "vue";
+//#region packages/sard/components/text-shrink/text-shrink.vue
+const _hoisted_1 = ["textContent"];
+const MIN_FONT_SIZE = 1;
+/** 二分搜索收敛精度（px） */
+const SEARCH_EPSILON = .05;
+/**
+* 尺寸比较容差。
+* 必须小于 1 个字号步进：单行渲染一旦溢出哪怕 0.5px，text-overflow 就会用省略号
+* 吃掉末尾一整个字，视觉上像“根本没放下”。这里只留吸收浮点误差的余量。
+*/
+const SIZE_TOLERANCE = .05;
+/** 宽度变化容差：小于它视为同一宽度，跳过重复适配 */
+const WIDTH_TOLERANCE = .5;
+/** 单行按宽度外推分割点的次数上限，之后回到二分保证收敛 */
+const INTERPOLATION_LIMIT = 2;
+/** 首次读到的 computed font-size 不可信时的兜底基准 */
+const FALLBACK_BASE_FONT_SIZE = 16;
+/** 复用同一个 Range，避免每次测量都新建对象 */
+var text_shrink_default = /*@__PURE__*/ defineComponent({
+	__name: "text-shrink",
+	props: /*@__PURE__*/ mergeDefaults({
+		text: {
+			type: String,
+			required: false
+		},
+		maxLines: {
+			type: Number,
+			required: false
+		},
+		baseFontSize: {
+			type: Number,
+			required: false
+		},
+		minFontSize: {
+			type: Number,
+			required: false
+		}
+	}, defaultTextShrinkProps),
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const bem = createBem("text-shrink");
+		/** 缩放下限：浏览器可渲染的最小字号 */
+		const rootRef = useTemplateRef("root");
+		const measureRef = useTemplateRef("measure");
+		const textRef = useTemplateRef("text");
+		/** 当前生效字号，undefined 表示尚未完成首次适配 */
+		const fontSize = ref();
+		/** 是否停在缩放下限后仍然溢出（已按 maxLines 截断） */
+		const overflow = ref(false);
+		/** 首次适配完成前隐藏可见层，避免以错误字号闪一下 */
+		const ready = ref(false);
+		const lines = computed(() => {
+			const value = Math.floor(Number(props.maxLines));
+			return Number.isFinite(value) && value > 1 ? value : 1;
+		});
+		const singleLine = computed(() => lines.value === 1);
+		let frozenBaseFontSize;
+		function resolveBaseFontSize() {
+			const { baseFontSize } = props;
+			if (typeof baseFontSize === "number" && Number.isFinite(baseFontSize) && baseFontSize > 0) return baseFontSize;
+			if (frozenBaseFontSize !== void 0) return frozenBaseFontSize;
+			let value = FALLBACK_BASE_FONT_SIZE;
+			const root = rootRef.value;
+			if (root && typeof window !== "undefined") {
+				const measured = Number.parseFloat(window.getComputedStyle(root).fontSize);
+				if (Number.isFinite(measured) && measured > 0) value = measured;
+			}
+			frozenBaseFontSize = value;
+			return value;
+		}
+		/**
+		* 缩放下限：取 minFontSize，并夹在 [MIN_FONT_SIZE, baseFontSize] 之间。
+		* 传 0 / 负数 / NaN 一律回退到浏览器可渲染下限，避免出现 0px 的死循环。
+		*/
+		function resolveMinFontSize(baseFontSize) {
+			const { minFontSize } = props;
+			return Math.min(baseFontSize, Math.max(MIN_FONT_SIZE, typeof minFontSize === "number" && Number.isFinite(minFontSize) && minFontSize > 0 ? minFontSize : MIN_FONT_SIZE));
+		}
+		let range;
+		function getRange() {
+			if (!range && typeof document !== "undefined") range = document.createRange();
+			return range;
+		}
+		/**
+		* 以指定字号测量一次：写入字号后只读一次几何。
+		* 单行读 Range 宽度（测量层此时不换行，宽度可以超出容器）；
+		* 多行读 Range 的 rect 个数，一个文本节点每行对应一个 rect。
+		* 读写之间会强制一次布局，所以不需要等 Vue 更新。
+		*/
+		function probeAt(size, available) {
+			const measure = measureRef.value;
+			const node = measure?.firstChild;
+			const selection = getRange();
+			if (!measure || !node || node.nodeType !== 3 || !selection) return {
+				fits: true,
+				width: 0
+			};
+			measure.style.fontSize = `${size}px`;
+			selection.selectNodeContents(node);
+			if (singleLine.value) {
+				const { width } = selection.getBoundingClientRect();
+				return {
+					fits: width <= available + SIZE_TOLERANCE,
+					width
+				};
+			}
+			return {
+				fits: selection.getClientRects().length <= lines.value,
+				width: 0
+			};
+		}
+		/**
+		* 在 (floorFontSize, baseFontSize] 区间内搜索能完整显示的最大字号。
+		* 单行先用「宽度 ∝ 字号」外推两次把区间夹紧，多行直接二分；
+		* 外推只决定下一个试探点，放不放得下始终由真实测量决定，精度不受影响。
+		*/
+		function search(baseFontSize, available, floorFontSize) {
+			const atBase = probeAt(baseFontSize, available);
+			if (atBase.fits) return {
+				size: baseFontSize,
+				overflow: false
+			};
+			if (!probeAt(floorFontSize, available).fits) return {
+				size: floorFontSize,
+				overflow: true
+			};
+			let lower = floorFontSize;
+			let upper = baseFontSize;
+			let estimate = atBase.width > 0 ? baseFontSize * available / atBase.width : NaN;
+			let interpolations = 0;
+			while (upper - lower > SEARCH_EPSILON) {
+				const useEstimate = interpolations < INTERPOLATION_LIMIT && estimate > lower && estimate < upper;
+				if (useEstimate) interpolations += 1;
+				const middle = useEstimate ? estimate : (lower + upper) / 2;
+				const result = probeAt(middle, available);
+				if (!result.fits) upper = middle;
+				else if (result.width >= available - SIZE_TOLERANCE) {
+					lower = middle;
+					break;
+				} else lower = middle;
+				estimate = result.width > 0 ? middle * available / result.width : NaN;
+			}
+			const maxTenths = Math.floor(baseFontSize * 10);
+			let tenths = Math.floor(lower * 10);
+			while (tenths < maxTenths && probeAt((tenths + 1) / 10, available).fits) tenths += 1;
+			return {
+				size: Math.max(floorFontSize, tenths / 10),
+				overflow: false
+			};
+		}
+		function fit() {
+			const root = rootRef.value;
+			const text = textRef.value;
+			if (!root || !text) return;
+			if (root.clientWidth <= 0) return;
+			const available = text.getBoundingClientRect().width;
+			if (available <= 0) return;
+			const baseFontSize = Math.max(MIN_FONT_SIZE, resolveBaseFontSize());
+			const floorFontSize = resolveMinFontSize(baseFontSize);
+			const result = search(baseFontSize, available, floorFontSize);
+			fontSize.value = Math.max(floorFontSize, result.size);
+			overflow.value = result.overflow;
+			ready.value = true;
+			observedWidth = available;
+		}
+		const requestFrame = (callback) => typeof requestAnimationFrame === "function" ? requestAnimationFrame(callback) : setTimeout(callback, 16);
+		const cancelFrame = (handle) => {
+			if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(handle);
+			else clearTimeout(handle);
+		};
+		let rafId = 0;
+		let disposed = false;
+		let resizeObserver;
+		/** 上一次适配时的宽度，用来跳过 ResizeObserver 的重复回调 */
+		let observedWidth = -1;
+		/** 同一帧内的多次触发合并成一次适配 */
+		function scheduleFit() {
+			if (disposed || rafId !== 0) return;
+			rafId = requestFrame(() => {
+				rafId = 0;
+				if (disposed) return;
+				fit();
+			});
+		}
+		watch(() => [
+			props.text,
+			props.maxLines,
+			props.baseFontSize,
+			props.minFontSize
+		], () => {
+			scheduleFit();
+		});
+		onMounted(() => {
+			fit();
+			if (typeof ResizeObserver !== "undefined" && rootRef.value) {
+				resizeObserver = new ResizeObserver((entries) => {
+					const width = entries[0]?.contentRect.width ?? 0;
+					if (Math.abs(width - observedWidth) < WIDTH_TOLERANCE) return;
+					observedWidth = width;
+					scheduleFit();
+				});
+				resizeObserver.observe(rootRef.value);
+			}
+			if (typeof document !== "undefined" && document.fonts && document.fonts.status !== "loaded") document.fonts.ready.then(() => {
+				if (!disposed) scheduleFit();
+			});
+		});
+		onBeforeUnmount(() => {
+			disposed = true;
+			resizeObserver?.disconnect();
+			resizeObserver = void 0;
+			if (rafId !== 0) {
+				cancelFrame(rafId);
+				rafId = 0;
+			}
+		});
+		const rootClass = computed(() => [bem.b(), bem.is("measuring", !ready.value)]);
+		const measureClass = bem.e("measure");
+		const textClass = computed(() => [bem.e("text"), singleLine.value ? bem.em("text", "nowrap") : bem.em("text", "clamp")]);
+		const textStyle = computed(() => {
+			const style = {};
+			if (fontSize.value !== void 0) style.fontSize = `${fontSize.value}px`;
+			if (!singleLine.value) style["-webkit-line-clamp"] = lines.value;
+			return style;
+		});
+		__expose({
+			fontSize,
+			overflow,
+			refit: scheduleFit
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "root",
+				class: normalizeClass(rootClass.value)
+			}, [createCommentVNode(" 文本层：可见文本 + 隐藏测量层。\n         测量层之所以放在文本层内部，是为了让所有可继承的排版属性（font-*、letter-spacing、\n         word-spacing、white-space、word-break、text-transform…）由继承自动对齐：\n         兄弟节点之间不会互相继承，那种结构只能在 JS 里逐个搬运属性，搬漏一个就量不准。\n         测量层绝对定位、脱离文档流，不影响可见文本的布局与固有宽度。\n         用 v-text 而不是插值，保证它的内容永远是一个文本节点，Range 才能直接选它来数行。 "), createElementVNode("div", {
+				ref: "text",
+				class: normalizeClass(textClass.value),
+				style: normalizeStyle(textStyle.value)
+			}, [createElementVNode("div", {
+				ref: "measure",
+				class: normalizeClass(unref(measureClass)),
+				"aria-hidden": "true",
+				textContent: toDisplayString(props.text)
+			}, null, 10, _hoisted_1), createTextVNode(" " + toDisplayString(props.text), 1)], 6)], 2);
+		};
+	}
+});
+//#endregion
+export { text_shrink_default as default };

package/components/toast/common.d.ts

@@ -1,5 +1,5 @@
 import { type DefaultProps } from '../config';
-import type { MotionEmits } from '../motion';
+import type { MotionEmits } from '../motion/common';
 export interface ToastProps {
     type?: 'text' | 'loading' | 'success' | 'fail';
     title?: string | number;

package/global.d.ts

@@ -32,6 +32,7 @@ declare module 'vue' {
     SCountDown: typeof import('./components/count-down/count-down').default
     SCountTo: typeof import('./components/count-to/count-to').default
     SCropImage: typeof import('./components/crop-image/crop-image').default
+    SDanmaku: typeof import('./components/danmaku/danmaku').default
     SDateStrip: typeof import('./components/date-strip/date-strip').default
     SDatetimePicker: typeof import('./components/datetime-picker/datetime-picker').default
     SDatetimePickerInput: typeof import('./components/datetime-picker-input/datetime-picker-input').default
@@ -151,6 +152,7 @@ declare module 'vue' {
     STabs: typeof import('./components/tabs/tabs').default
     STag: typeof import('./components/tag/tag').default
     SText: typeof import('./components/text/text').default
+    STextShrink: typeof import('./components/text-shrink/text-shrink').default
     STimeline: typeof import('./components/timeline/timeline').default
     STimelineItem: typeof import('./components/timeline/timeline-item').default
     SToast: typeof import('./components/toast/toast').default