niuma-ui 2.0.4 → 2.1.0

package/dist/components/log/src/RsLog.impl.js

@@ -5,75 +5,30 @@ import RsInput_default from "../../input/src/RsInput.js";
 import RsEmpty_default from "../../empty/src/RsEmpty.js";
 import { copyTextToClipboard } from "../../../utils/rs-clipboard.js";
 import RsVirtualList_default from "../../virtual-list/src/RsVirtualList.js";
-import { RS_LOG_FILTER_LEVELS, asLogLineInputs, clampLogCount, countDroppedLines, filterLogLines, joinLogLines, normalizeLogLines, resolveLogCopyText, resolveLogLive, splitLogHighlight, splitLogText, toLogLineInput } from "./log-utils.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useModel, useSlots, watch, withCtx } from "vue";
+import { RS_LOG_FILTER_LEVELS, RS_LOG_LEVELS, asLogLineInputs, clampLogCount, countDroppedLines, filterLogLines, normalizeLogLines, resolveLogCopyText, resolveLogLive, splitLogText, toLogLineInput } from "./log-utils.js";
+import RsLogRow_default from "./RsLogRow.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useModel, useSlots, watch, withCtx } from "vue";
 //#region src/components/log/src/RsLog.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["dir"];
+var _hoisted_1 = ["id"];
 var _hoisted_2 = {
 	key: 0,
 	class: "rs-log__chrome"
 };
-var _hoisted_3 = {
-	key: 1,
+var _hoisted_3 = ["id"];
+var _hoisted_4 = {
+	key: 2,
 	class: "rs-log__filters"
 };
-var _hoisted_4 = { class: "rs-log__sr-only" };
-var _hoisted_5 = ["aria-pressed", "onClick"];
-var _hoisted_6 = ["aria-live"];
-var _hoisted_7 = ["aria-label", "aria-busy"];
+var _hoisted_5 = { class: "rs-log__sr-only" };
+var _hoisted_6 = ["aria-pressed", "onClick"];
+var _hoisted_7 = ["aria-live"];
 var _hoisted_8 = [
+	"dir",
 	"aria-label",
-	"data-log-index",
-	"onClick"
-];
-var _hoisted_9 = {
-	key: 0,
-	class: "rs-log__no"
-};
-var _hoisted_10 = {
-	key: 1,
-	class: "rs-log__time"
-};
-var _hoisted_11 = {
-	key: 2,
-	class: "rs-log__level"
-};
-var _hoisted_12 = {
-	key: 3,
-	class: "rs-log__sr-only"
-};
-var _hoisted_13 = { class: "rs-log__text" };
-var _hoisted_14 = {
-	key: 0,
-	class: "rs-log__hit"
-};
-var _hoisted_15 = [
-	"aria-label",
-	"data-log-index",
-	"onClick"
+	"aria-busy"
 ];
-var _hoisted_16 = {
-	key: 0,
-	class: "rs-log__no"
-};
-var _hoisted_17 = {
-	key: 1,
-	class: "rs-log__time"
-};
-var _hoisted_18 = {
-	key: 2,
-	class: "rs-log__level"
-};
-var _hoisted_19 = {
-	key: 3,
-	class: "rs-log__sr-only"
-};
-var _hoisted_20 = { class: "rs-log__text" };
-var _hoisted_21 = {
-	key: 0,
-	class: "rs-log__hit"
-};
 var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsLog",
 	__name: "RsLog",
 	props: /*@__PURE__*/ mergeModels({
 		text: {},
@@ -139,7 +94,8 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		},
 		dir: { default: "ltr" },
 		severityScale: { default: "auto" },
-		timeFormat: {}
+		timeFormat: {},
+		id: {}
 	}, {
 		"lines": { default: "" },
 		"linesModifiers": {},
@@ -161,6 +117,7 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		const emit = __emit;
 		const { t, locale } = useRsI18n();
 		const slots = useSlots();
+		const matchId = useId();
 		const lines = useModel(__props, "lines");
 		const search = useModel(__props, "search");
 		const filterLevels = useModel(__props, "levels");
@@ -173,8 +130,10 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		let copiedTimer = 0;
 		const listRef = ref(null);
 		const stuckToBottom = ref(true);
+		const followAnchor = ref(null);
 		const activeIndex = ref(-1);
 		const announcement = ref("");
+		let announceTick = 0;
 		const resolvedRadius = useResolvedRsRadius(() => props.radius, "sm");
 		const liveMode = computed(() => resolveLogLive(props.live));
 		const useVirtual = computed(() => {
@@ -202,9 +161,16 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 			locale: locale.value,
 			timeFormat: props.timeFormat
 		}));
+		const levelNames = computed(() => {
+			const names = /* @__PURE__ */ new Map();
+			for (const level of RS_LOG_LEVELS) names.set(level, t(`log.level.${level}`, level));
+			return names;
+		});
 		const displayLines = computed(() => filterLogLines(resolvedLines.value, {
 			levels: filterLevels.value,
-			search: search.value
+			search: search.value,
+			locale: locale.value,
+			levelText: (level) => levelNames.value.get(level) ?? level
 		}));
 		const emptyLabel = computed(() => props.emptyText || t("log.empty", "No log output"));
 		const regionLabel = computed(() => props.ariaLabel || t("log.label", "Log"));
@@ -220,17 +186,10 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 			"--rs-log-box-height": typeof props.height === "number" ? `${props.height}px` : props.height
 		}));
 		function levelLabel(level) {
-			return t(`log.level.${level}`, level);
+			return levelNames.value.get(level) ?? level;
 		}
-		function rowLabel(item) {
-			const parts = [levelLabel(item.level)];
-			if (props.showLineNo) parts.push(t("log.lineNo", "Line {n}", { n: item.seq }));
-			if (item.time) parts.push(item.time);
-			parts.push(item.text);
-			return parts.filter(Boolean).join(", ");
-		}
-		function highlightParts(text) {
-			return splitLogHighlight(text, search.value);
+		function logItemKey(item) {
+			return item.key;
 		}
 		function writeLines(next) {
 			lines.value = typeof next === "string" ? next : clampLogCount(next, props.maxLines);
@@ -242,10 +201,8 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 			if (typeof current === "string" || current == null) {
 				const chunk = added.map((item) => typeof item === "string" ? item : item.text).join("\n");
 				const base = typeof current === "string" ? current : "";
-				writeLines(joinLogLines(normalizeLogLines(base ? `${base}\n${chunk}` : chunk, {
-					inferLevel: false,
-					maxLines: props.maxLines
-				})));
+				const parts = splitLogText(base ? `${base}\n${chunk}` : chunk);
+				writeLines((props.maxLines != null && props.maxLines > 0 && parts.length > props.maxLines ? parts.slice(parts.length - props.maxLines) : parts).join("\n"));
 				return;
 			}
 			writeLines([...current, ...added]);
@@ -292,23 +249,31 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 			if (root && node && !root.contains(node)) return "";
 			return text;
 		}
+		let alive = true;
+		function armCopyTimer(delay, apply) {
+			if (!alive) return;
+			if (copiedTimer) window.clearTimeout(copiedTimer);
+			copiedTimer = window.setTimeout(() => {
+				copiedTimer = 0;
+				if (!alive) return;
+				apply();
+			}, delay);
+		}
 		function markCopied() {
+			if (!alive) return;
 			copied.value = true;
 			copyFailed.value = false;
-			if (copiedTimer) window.clearTimeout(copiedTimer);
-			copiedTimer = window.setTimeout(() => {
+			armCopyTimer(1500, () => {
 				copied.value = false;
-				copiedTimer = 0;
-			}, 1500);
+			});
 		}
 		function markCopyFailed() {
+			if (!alive) return;
 			copyFailed.value = true;
 			copied.value = false;
-			if (copiedTimer) window.clearTimeout(copiedTimer);
-			copiedTimer = window.setTimeout(() => {
+			armCopyTimer(2500, () => {
 				copyFailed.value = false;
-				copiedTimer = 0;
-			}, 2500);
+			});
 		}
 		async function writeCopy(text, source) {
 			if (!text) return false;
@@ -325,13 +290,13 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		async function copy() {
 			const resolved = resolveLogCopyText({
 				selection: readDomSelection(),
-				visibleTexts: displayLines.value.map((line) => line.text),
-				allTexts: resolvedLines.value.map((line) => line.text)
+				visibleTexts: displayLines.value.map((line) => line.plain),
+				allTexts: resolvedLines.value.map((line) => line.plain)
 			});
 			return writeCopy(resolved.text, resolved.source);
 		}
 		async function copyAll() {
-			return writeCopy(joinLogLines(resolvedLines.value), "all");
+			return writeCopy(resolvedLines.value.map((line) => line.plain).join("\n"), "all");
 		}
 		function focusSearch() {
 			const input = searchRef.value?.querySelector("input");
@@ -350,8 +315,16 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		function setStuck(next) {
 			if (stuckToBottom.value === next) return;
 			stuckToBottom.value = next;
+			followAnchor.value = next ? null : displayLines.value.length;
 			emit("followChange", next);
 		}
+		function hasTextSelectionInside() {
+			const sel = typeof document === "undefined" ? null : document.getSelection();
+			if (!sel || sel.isCollapsed) return false;
+			const root = rootRef.value;
+			const node = sel.anchorNode;
+			return Boolean(root && node && root.contains(node));
+		}
 		function onListScroll(event) {
 			const el = event.target;
 			if (!(el instanceof HTMLElement)) return;
@@ -393,6 +366,23 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				copy();
 			}
 		}
+		function onSearchKeydown(event) {
+			if (event.key !== "Enter" || event.isComposing || event.altKey || event.ctrlKey || event.metaKey) return;
+			if (!search.value.trim() || displayLines.value.length === 0) return;
+			event.preventDefault();
+			const max = displayLines.value.length - 1;
+			const current = activeIndex.value;
+			const delta = event.shiftKey ? -1 : 1;
+			const next = current < 0 ? delta > 0 ? 0 : max : (current + delta + displayLines.value.length) % displayLines.value.length;
+			activeIndex.value = next;
+			setStuck(next >= max);
+			if (useVirtual.value) {
+				listRef.value?.scrollToIndex(next, "nearest");
+				return;
+			}
+			const row = plainRef.value?.querySelector(`[data-log-index="${next}"]`);
+			if (typeof row?.scrollIntoView === "function") row.scrollIntoView({ block: "nearest" });
+		}
 		function onViewportKeydown(event) {
 			if (isSearchShortcut(event) || isCopyShortcut(event)) return;
 			if (isTypingTarget(event.target)) return;
@@ -438,8 +428,16 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		}
 		watch(() => displayLines.value.length, async (count, prev) => {
 			const delta = count - (prev ?? 0);
-			if (liveMode.value !== "off" && delta > 0) announcement.value = t("log.newLines", "{count, plural, one {# new line} other {# new lines}}", { count: delta });
+			if (liveMode.value !== "off" && delta > 0) {
+				const message = t("log.newLines", "{count, plural, one {# new line} other {# new lines}}", { count: delta });
+				announceTick += 1;
+				announcement.value = announceTick % 2 === 0 ? `${message}\u200b` : message;
+			}
 			if (!props.follow || delta <= 0 || !stuckToBottom.value) return;
+			if (hasTextSelectionInside()) {
+				setStuck(false);
+				return;
+			}
 			await nextTick();
 			scrollToBottom();
 		});
@@ -450,8 +448,18 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				kept: resolvedLines.value.length
 			});
 		});
+		const pendingLines = computed(() => {
+			if (stuckToBottom.value || followAnchor.value == null) return 0;
+			return Math.max(0, displayLines.value.length - followAnchor.value);
+		});
+		const showJump = computed(() => props.follow && !stuckToBottom.value && displayLines.value.length > 0);
+		const jumpLabel = computed(() => pendingLines.value > 0 ? t("log.newLines", "{count, plural, one {# new line} other {# new lines}}", { count: pendingLines.value }) : t("log.jump", "Jump to latest"));
+		const matchCount = computed(() => search.value.trim() ? displayLines.value.length : null);
+		const matchLabel = computed(() => matchCount.value == null ? "" : t("log.matchCount", "{count, plural, one {# match} other {# matches}}", { count: matchCount.value }));
 		onUnmounted(() => {
+			alive = false;
 			if (copiedTimer) window.clearTimeout(copiedTimer);
+			copiedTimer = 0;
 		});
 		__expose({
 			append,
@@ -474,8 +482,8 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 					"rs-log--zebra": __props.zebra,
 					"rs-log--chrome": hasChrome.value
 				}]),
+				id: __props.id,
 				style: normalizeStyle(rootStyle.value),
-				dir: __props.dir,
 				onKeydown: onRootKeydown
 			}, [
 				hasChrome.value ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "toolbar", {}, () => [
@@ -483,7 +491,8 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 						key: 0,
 						ref_key: "searchRef",
 						ref: searchRef,
-						class: "rs-log__search"
+						class: "rs-log__search",
+						onKeydown: onSearchKeydown
 					}, [createVNode(RsInput_default, {
 						modelValue: search.value,
 						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => search.value = $event),
@@ -491,23 +500,31 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 						size: "sm",
 						clearable: "",
 						placeholder: unref(t)("log.searchPlaceholder", "Filter lines…"),
-						"aria-label": unref(t)("log.search", "Search logs")
+						"aria-label": unref(t)("log.search", "Search logs"),
+						"aria-describedby": matchCount.value != null ? unref(matchId) : void 0
 					}, null, 8, [
 						"modelValue",
 						"placeholder",
-						"aria-label"
-					])], 512)) : createCommentVNode("", true),
-					__props.showFilter ? (openBlock(), createElementBlock("fieldset", _hoisted_3, [createElementVNode("legend", _hoisted_4, toDisplayString(unref(t)("log.filter", "Filter levels")), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(RS_LOG_FILTER_LEVELS), (level) => {
+						"aria-label",
+						"aria-describedby"
+					])], 544)) : createCommentVNode("", true),
+					matchCount.value != null ? (openBlock(), createElementBlock("p", {
+						key: 1,
+						id: unref(matchId),
+						class: "rs-log__matches",
+						role: "status"
+					}, toDisplayString(matchLabel.value), 9, _hoisted_3)) : createCommentVNode("", true),
+					__props.showFilter ? (openBlock(), createElementBlock("fieldset", _hoisted_4, [createElementVNode("legend", _hoisted_5, toDisplayString(unref(t)("log.filter", "Filter levels")), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(RS_LOG_FILTER_LEVELS), (level) => {
 						return openBlock(), createElementBlock("button", {
 							key: level,
 							type: "button",
 							class: normalizeClass(["rs-log__chip", [`rs-log__chip--${level}`, { "rs-log__chip--on": filterLevels.value.includes(level) }]]),
 							"aria-pressed": filterLevels.value.includes(level),
 							onClick: ($event) => toggleLevel(level)
-						}, toDisplayString(levelLabel(level)), 11, _hoisted_5);
+						}, toDisplayString(levelLabel(level)), 11, _hoisted_6);
 					}), 128))])) : createCommentVNode("", true),
 					__props.showCopy ? (openBlock(), createBlock(RsButton_default, {
-						key: 2,
+						key: 3,
 						class: "rs-log__copy",
 						variant: "ghost",
 						size: "sm",
@@ -528,13 +545,14 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 					class: "rs-log__sr-only",
 					"aria-live": liveMode.value,
 					"aria-atomic": "true"
-				}, toDisplayString(announcement.value), 9, _hoisted_6)) : createCommentVNode("", true),
+				}, toDisplayString(announcement.value), 9, _hoisted_7)) : createCommentVNode("", true),
 				createElementVNode("div", {
 					ref_key: "viewportRef",
 					ref: viewportRef,
 					class: "rs-log__viewport",
 					role: "region",
 					tabindex: "0",
+					dir: __props.dir,
 					"aria-label": regionLabel.value,
 					"aria-busy": __props.busy ? "true" : void 0,
 					onKeydown: onViewportKeydown
@@ -548,6 +566,7 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 					class: "rs-log__list",
 					role: "list",
 					items: displayLines.value,
+					"item-key": logItemKey,
 					"item-size": resolvedItemSize.value,
 					height: 0,
 					overscan: __props.overscan,
@@ -555,32 +574,35 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 					radius: "none",
 					onScroll: onListScroll
 				}, {
-					default: withCtx(({ item, index }) => [createElementVNode("div", {
-						class: normalizeClass(["rs-log__row", [`rs-log__row--${item.level}`, {
-							"rs-log__row--odd": index % 2 === 1,
-							"rs-log__row--active": index === activeIndex.value
-						}]]),
-						role: "listitem",
-						"aria-label": rowLabel(item),
-						"data-log-index": index,
-						onClick: ($event) => onRowClick(index)
-					}, [
-						_cache[2] || (_cache[2] = createElementVNode("span", {
-							class: "rs-log__marker",
-							"aria-hidden": "true"
-						}, null, -1)),
-						__props.showLineNo ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(item.seq), 1)) : createCommentVNode("", true),
-						__props.showTime && item.time ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(item.time), 1)) : createCommentVNode("", true),
-						__props.showLevel && item.level !== "plain" ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(levelLabel(item.level)), 1)) : (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(levelLabel(item.level)), 1)),
-						renderSlot(_ctx.$slots, "row", {
-							item,
-							index,
-							levelLabel: levelLabel(item.level),
-							parts: highlightParts(item.text)
-						}, () => [createElementVNode("span", _hoisted_13, [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(item.text), (part, partIndex) => {
-							return openBlock(), createElementBlock(Fragment, { key: partIndex }, [part.hit ? (openBlock(), createElementBlock("mark", _hoisted_14, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
-						}), 128))])], true)
-					], 10, _hoisted_8)]),
+					default: withCtx(({ item, index }) => [createVNode(RsLogRow_default, {
+						item,
+						index,
+						active: index === activeIndex.value,
+						zebra: __props.zebra,
+						wrap: __props.wrap,
+						fill: !__props.wrap,
+						"show-line-no": __props.showLineNo,
+						"show-time": __props.showTime,
+						"show-level": __props.showLevel,
+						search: search.value,
+						onSelect: ($event) => onRowClick(index)
+					}, createSlots({ _: 2 }, [unref(slots).row ? {
+						name: "default",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "row", normalizeProps(guardReactiveProps(slotProps)), void 0, true)]),
+						key: "0"
+					} : void 0]), 1032, [
+						"item",
+						"index",
+						"active",
+						"zebra",
+						"wrap",
+						"fill",
+						"show-line-no",
+						"show-time",
+						"show-level",
+						"search",
+						"onSelect"
+					])]),
 					_: 3
 				}, 8, [
 					"items",
@@ -595,34 +617,45 @@ var RsLog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 					role: "list",
 					onScroll: onListScroll
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(displayLines.value, (item, index) => {
-					return openBlock(), createElementBlock("div", {
+					return openBlock(), createBlock(RsLogRow_default, {
 						key: item.key,
-						class: normalizeClass(["rs-log__row", [`rs-log__row--${item.level}`, {
-							"rs-log__row--odd": index % 2 === 1,
-							"rs-log__row--active": index === activeIndex.value
-						}]]),
-						role: "listitem",
-						"aria-label": rowLabel(item),
-						"data-log-index": index,
-						onClick: ($event) => onRowClick(index)
-					}, [
-						_cache[3] || (_cache[3] = createElementVNode("span", {
-							class: "rs-log__marker",
-							"aria-hidden": "true"
-						}, null, -1)),
-						__props.showLineNo ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(item.seq), 1)) : createCommentVNode("", true),
-						__props.showTime && item.time ? (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(item.time), 1)) : createCommentVNode("", true),
-						__props.showLevel && item.level !== "plain" ? (openBlock(), createElementBlock("span", _hoisted_18, toDisplayString(levelLabel(item.level)), 1)) : (openBlock(), createElementBlock("span", _hoisted_19, toDisplayString(levelLabel(item.level)), 1)),
-						renderSlot(_ctx.$slots, "row", {
-							item,
-							index,
-							levelLabel: levelLabel(item.level),
-							parts: highlightParts(item.text)
-						}, () => [createElementVNode("span", _hoisted_20, [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(item.text), (part, partIndex) => {
-							return openBlock(), createElementBlock(Fragment, { key: partIndex }, [part.hit ? (openBlock(), createElementBlock("mark", _hoisted_21, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
-						}), 128))])], true)
-					], 10, _hoisted_15);
-				}), 128))], 544))], 40, _hoisted_7)
+						item,
+						index,
+						active: index === activeIndex.value,
+						zebra: __props.zebra,
+						wrap: __props.wrap,
+						fill: false,
+						"show-line-no": __props.showLineNo,
+						"show-time": __props.showTime,
+						"show-level": __props.showLevel,
+						search: search.value,
+						onSelect: ($event) => onRowClick(index)
+					}, createSlots({ _: 2 }, [unref(slots).row ? {
+						name: "default",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "row", mergeProps({ ref_for: true }, slotProps), void 0, true)]),
+						key: "0"
+					} : void 0]), 1032, [
+						"item",
+						"index",
+						"active",
+						"zebra",
+						"wrap",
+						"show-line-no",
+						"show-time",
+						"show-level",
+						"search",
+						"onSelect"
+					]);
+				}), 128))], 544)), showJump.value ? (openBlock(), createBlock(RsButton_default, {
+					key: 3,
+					class: "rs-log__jump",
+					size: "sm",
+					variant: "default",
+					onClick: scrollToBottom
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(jumpLabel.value), 1)]),
+					_: 1
+				})) : createCommentVNode("", true)], 40, _hoisted_8)
 			], 46, _hoisted_1);
 		};
 	}

package/dist/components/log/src/RsLog.js

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsLog_vue_vue_type_script_setup_true_lang_default from "./RsLog.impl.js";
 
 //#region src/components/log/src/RsLog.vue
-var RsLog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsLog_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-03a9ca4b"]]);
+var RsLog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsLog_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-69545db7"]]);
 //#endregion
 export { RsLog_default as default };

package/dist/components/log/src/RsLogRow.css

@@ -0,0 +1,152 @@
+
+.rs-log__row[data-v-a8e6725e] {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--rs-space-sm);
+  box-sizing: border-box;
+  padding-inline: var(--rs-space-md);
+  position: relative;
+  white-space: nowrap;
+  color: var(--rs-log-row-fg, var(--rs-log-fg, var(--rs-text-primary)));
+}
+.rs-log__row--fill[data-v-a8e6725e] {
+  min-height: 100%;
+}
+.rs-log__row--wrap[data-v-a8e6725e] {
+  height: auto;
+  max-height: none;
+  min-height: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  padding-block: var(--rs-space-xs);
+}
+.rs-log__row--zebra.rs-log__row--odd[data-v-a8e6725e] {
+  background: var(--rs-log-stripe, transparent);
+}
+.rs-log__row.rs-log__row--active[data-v-a8e6725e] {
+  background: var(--rs-log-active-bg, color-mix(in srgb, var(--rs-primary) 12%, var(--rs-log-bg, transparent)));
+}
+.rs-log__row--active[data-v-a8e6725e]::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block: 0;
+  width: var(--rs-log-accent-width, 0.125rem);
+  background: var(--rs-log-accent, var(--rs-primary));
+  pointer-events: none;
+}
+.rs-log__marker[data-v-a8e6725e] {
+  flex-shrink: 0;
+  width: var(--rs-log-marker-width, 0.2rem);
+  align-self: stretch;
+  min-height: 0.9em;
+  margin-block: 0.2rem;
+  border-radius: var(--rs-radius-full);
+  background: currentColor;
+  user-select: none;
+}
+.rs-log__no[data-v-a8e6725e],
+.rs-log__time[data-v-a8e6725e] {
+  flex-shrink: 0;
+  color: var(--rs-log-muted, var(--rs-text-secondary));
+  font-variant-numeric: tabular-nums;
+  unicode-bidi: isolate;
+  user-select: none;
+}
+.rs-log__level[data-v-a8e6725e] {
+  flex-shrink: 0;
+  min-inline-size: var(--rs-log-level-min, 3.6rem);
+  font-weight: var(--rs-font-weight-semibold);
+  letter-spacing: 0.02em;
+  unicode-bidi: isolate;
+  user-select: none;
+}
+.rs-log__text[data-v-a8e6725e] {
+  min-width: 0;
+  flex: 1;
+  font-weight: inherit;
+  unicode-bidi: plaintext;
+  user-select: text;
+}
+.rs-log__row--wrap .rs-log__text[data-v-a8e6725e] {
+  overflow: visible;
+  height: auto;
+  min-height: 0;
+}
+.rs-log__row:not(.rs-log__row--wrap) .rs-log__text[data-v-a8e6725e] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rs-log__hit[data-v-a8e6725e] {
+  padding: 0 0.1em;
+  background: var(--rs-log-hit-bg);
+  color: var(--rs-log-hit-fg);
+  font: inherit;
+}
+.rs-log__sr-only[data-v-a8e6725e] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.rs-log__row--plain[data-v-a8e6725e] {
+  --rs-log-row-fg: var(--rs-log-fg);
+  font-weight: var(--rs-font-weight-regular);
+}
+.rs-log__row--trace[data-v-a8e6725e] {
+  --rs-log-row-fg: var(--rs-log-trace);
+  font-weight: var(--rs-font-weight-regular);
+}
+.rs-log__row--debug[data-v-a8e6725e] {
+  --rs-log-row-fg: var(--rs-log-debug);
+  font-weight: var(--rs-font-weight-regular);
+}
+.rs-log__row--info[data-v-a8e6725e] {
+  --rs-log-row-fg: var(--rs-log-info);
+  font-weight: var(--rs-font-weight-medium);
+}
+.rs-log__row--notice[data-v-a8e6725e] {
+  --rs-log-row-fg: var(--rs-log-notice);
+  font-weight: var(--rs-font-weight-medium);
+}
+.rs-log__row--success[data-v-a8e6725e] {
+  --rs-log-row-fg: var(--rs-log-success);
+  font-weight: var(--rs-font-weight-medium);
+}
+.rs-log__row--warn[data-v-a8e6725e] {
+  --rs-log-row-fg: var(--rs-log-warn);
+  font-weight: var(--rs-font-weight-semibold);
+}
+.rs-log__row--error[data-v-a8e6725e] {
+  --rs-log-row-fg: var(--rs-log-error);
+  font-weight: var(--rs-font-weight-bold);
+}
+.rs-log__row--fatal[data-v-a8e6725e] {
+  --rs-log-row-fg: var(--rs-log-fatal);
+  font-weight: var(--rs-font-weight-bold);
+}
+@media (forced-colors: active) {
+.rs-log__row[data-v-a8e6725e] {
+    color: CanvasText;
+}
+.rs-log__marker[data-v-a8e6725e] {
+    background: ButtonText;
+}
+.rs-log__hit[data-v-a8e6725e] {
+    background: Highlight;
+    color: HighlightText;
+}
+.rs-log__row--active[data-v-a8e6725e] {
+    outline: var(--rs-focus-ring-width, 2px) solid Highlight;
+    outline-offset: calc(var(--rs-focus-ring-width, 2px) * -1);
+}
+.rs-log__row--active[data-v-a8e6725e]::before {
+    background: Highlight;
+}
+}