@astryx-vue/lab 0.2.0 → 0.3.0

package/dist/index.d.ts

@@ -192,6 +192,8 @@ type DiffViewerViewMode = 'unified' | 'split';
  * line that replaced it: by `word`, by `char`acter, or `none`.
  */
 type DiffViewerInlineHighlight = 'word' | 'char' | 'none';
+/** 行内变化标记：经典加减号、实线/虚线条，或不显示可见标记。 */
+type DiffViewerChangeIndicator = 'classic' | 'bars' | 'none';
 interface DiffViewerProps {
   /**
    * The file to render. Build one with `parseUnifiedDiff(patch)` (one per file
@@ -227,6 +229,19 @@ interface DiffViewerProps {
    * @default 'word'
    */
   inlineHighlight?: DiffViewerInlineHighlight;
+  /**
+   * How changed lines are marked beside the code: classic +/− glyphs, a solid
+   * bar for additions and a dashed bar for removals, or no visible marker.
+   * Screen readers keep the Added/Removed label in every mode.
+   * @default 'classic'
+   */
+  changeIndicator?: DiffViewerChangeIndicator;
+  /**
+   * Tint added and removed rows. When false, line numbers, the indicator and
+   * inline highlights still carry the change.
+   * @default true
+   */
+  hasChangeBackground?: boolean;
   /**
    * Make the file header a disclosure that hides and shows the hunks. Needs a
    * file path to name the control.
@@ -290,6 +305,8 @@ declare const __VLS_base$3: import("vue").DefineComponent<DiffViewerProps, {}, {
   hasLineNumbers: boolean;
   isWrapped: boolean;
   inlineHighlight: DiffViewerInlineHighlight;
+  changeIndicator: DiffViewerChangeIndicator;
+  hasChangeBackground: boolean;
   isCollapsible: boolean;
   isCollapsed: boolean;
   defaultIsCollapsed: boolean;
@@ -1172,4 +1189,4 @@ declare const __VLS_export: <T extends string>(__VLS_props: NonNullable<Awaited<
 declare const _default$9: typeof __VLS_export;
 type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
 //#endregion
-export { _default as CircularProgress, type CircularProgressProps, type CircularProgressSize, type CircularProgressVariant, type CircularProgressVariantMap, type CreateDiffFileOptions, _default$1 as DiffViewer, type DiffViewerEmits, type DiffViewerFile, type DiffViewerFileStatus, type DiffViewerHunk, type DiffViewerInlineHighlight, type DiffViewerLine, type DiffViewerLineKind, type DiffViewerLineRef, type DiffViewerProps, type DiffViewerSide, type DiffViewerSlots, type DiffViewerViewMode, type IconShape, type IconShapeRole, _default$2 as InfoTip, type InfoTipProps, type InfoTipSize, type InlineDiffGranularity, type InlineDiffResult, type InlineRange, _default$3 as ListInput, type ListInputChange, type ListInputColumn, type ListInputColumnWidth, type ListInputEmits, type ListInputProps, type ListInputRenderContext, type ListInputValueContext, type LogEntry, _default$4 as LogStream, type LogStreamEmits, type LogStreamLevel, type LogStreamProps, _default$5 as MobileTokenizer, type MobileTokenizerChange, type MobileTokenizerEmits, type MobileTokenizerProps, type PanelGroup, type PanelRow, type PathPersonality, _default$6 as SVGIcon, type SVGIconColor, type SVGIconDef, type SVGIconProps, type SVGIconSize, type SVGIconVariation, type SearchSource, type SearchableItem, _default$7 as Stat, type StatDelta, type StatDeltaDirection, type StatDeltaSentiment, type StatProps, type StatSize, _default$8 as TransferList, type TransferListEmits, type TransferListOption, type TransferListProps, _default$9 as TransferListSelector, type TransferListSlots, type XIFAnimate, type XIFIcon, type XIFPath, type XIFPersonality, type XIFSlot };
+export { _default as CircularProgress, type CircularProgressProps, type CircularProgressSize, type CircularProgressVariant, type CircularProgressVariantMap, type CreateDiffFileOptions, _default$1 as DiffViewer, type DiffViewerChangeIndicator, type DiffViewerEmits, type DiffViewerFile, type DiffViewerFileStatus, type DiffViewerHunk, type DiffViewerInlineHighlight, type DiffViewerLine, type DiffViewerLineKind, type DiffViewerLineRef, type DiffViewerProps, type DiffViewerSide, type DiffViewerSlots, type DiffViewerViewMode, type IconShape, type IconShapeRole, _default$2 as InfoTip, type InfoTipProps, type InfoTipSize, type InlineDiffGranularity, type InlineDiffResult, type InlineRange, _default$3 as ListInput, type ListInputChange, type ListInputColumn, type ListInputColumnWidth, type ListInputEmits, type ListInputProps, type ListInputRenderContext, type ListInputValueContext, type LogEntry, _default$4 as LogStream, type LogStreamEmits, type LogStreamLevel, type LogStreamProps, _default$5 as MobileTokenizer, type MobileTokenizerChange, type MobileTokenizerEmits, type MobileTokenizerProps, type PanelGroup, type PanelRow, type PathPersonality, _default$6 as SVGIcon, type SVGIconColor, type SVGIconDef, type SVGIconProps, type SVGIconSize, type SVGIconVariation, type SearchSource, type SearchableItem, _default$7 as Stat, type StatDelta, type StatDeltaDirection, type StatDeltaSentiment, type StatProps, type StatSize, _default$8 as TransferList, type TransferListEmits, type TransferListOption, type TransferListProps, _default$9 as TransferListSelector, type TransferListSlots, type XIFAnimate, type XIFIcon, type XIFPath, type XIFPersonality, type XIFSlot };

package/dist/index.js

@@ -409,88 +409,124 @@ var RenderVNode_default = defineComponent({
 });
 //#endregion
 //#region src/DiffViewer/DiffViewerTable.vue
-const _hoisted_1$12 = {
+const _hoisted_1$12 = [
+	"data-view-mode",
+	"data-has-line-numbers",
+	"data-change-indicator",
+	"data-change-background"
+];
+const _hoisted_2$11 = {
 	key: 0,
 	scope: "col",
 	class: "astryx-diff-viewer__column-header"
 };
-const _hoisted_2$11 = {
+const _hoisted_3$10 = {
 	key: 1,
 	scope: "col",
 	class: "astryx-diff-viewer__column-header"
 };
-const _hoisted_3$10 = {
+const _hoisted_4$9 = {
 	scope: "col",
 	class: "astryx-diff-viewer__column-header"
 };
-const _hoisted_4$9 = {
+const _hoisted_5$8 = {
 	scope: "col",
 	class: "astryx-diff-viewer__column-header"
 };
-const _hoisted_5$8 = { key: 0 };
-const _hoisted_6$7 = ["colspan"];
-const _hoisted_7$5 = { class: "astryx-diff-viewer__ltr" };
-const _hoisted_8$4 = ["aria-label", "onClick"];
+const _hoisted_6$7 = { key: 0 };
+const _hoisted_7$5 = ["colspan"];
+const _hoisted_8$4 = { class: "astryx-diff-viewer__ltr" };
 const _hoisted_9$4 = ["aria-label", "onClick"];
-const _hoisted_10$4 = ["data-diff"];
-const _hoisted_11$2 = { class: "astryx-diff-viewer__ltr" };
-const _hoisted_12$1 = ["data-kind"];
-const _hoisted_13 = { key: 0 };
-const _hoisted_14 = ["colspan"];
-const _hoisted_15 = { class: "astryx-diff-viewer__annotation-content" };
-const _hoisted_16 = {
+const _hoisted_10$4 = ["aria-label", "onClick"];
+const _hoisted_11$2 = {
+	key: 0,
+	"aria-hidden": "true"
+};
+const _hoisted_12$1 = {
+	key: 0,
+	"aria-hidden": "true"
+};
+const _hoisted_13 = ["data-diff"];
+const _hoisted_14 = { class: "astryx-diff-viewer__ltr" };
+const _hoisted_15 = ["data-kind"];
+const _hoisted_16 = { key: 0 };
+const _hoisted_17 = ["colspan"];
+const _hoisted_18 = { class: "astryx-diff-viewer__annotation-content" };
+const _hoisted_19 = [
+	"data-view-mode",
+	"data-has-line-numbers",
+	"data-change-indicator",
+	"data-change-background"
+];
+const _hoisted_20 = {
 	key: 0,
 	class: "astryx-diff-viewer__gutter-col"
 };
-const _hoisted_17 = {
+const _hoisted_21 = {
 	key: 1,
 	class: "astryx-diff-viewer__gutter-col"
 };
-const _hoisted_18 = {
+const _hoisted_22 = {
 	key: 0,
 	scope: "col",
 	class: "astryx-diff-viewer__column-header"
 };
-const _hoisted_19 = {
+const _hoisted_23 = {
 	scope: "col",
 	class: "astryx-diff-viewer__column-header"
 };
-const _hoisted_20 = {
+const _hoisted_24 = {
 	scope: "col",
 	class: "astryx-diff-viewer__column-header"
 };
-const _hoisted_21 = {
+const _hoisted_25 = {
 	key: 1,
 	scope: "col",
 	class: "astryx-diff-viewer__column-header"
 };
-const _hoisted_22 = {
+const _hoisted_26 = {
 	scope: "col",
 	class: "astryx-diff-viewer__column-header"
 };
-const _hoisted_23 = {
+const _hoisted_27 = {
 	scope: "col",
 	class: "astryx-diff-viewer__column-header"
 };
-const _hoisted_24 = { key: 0 };
-const _hoisted_25 = ["colspan"];
-const _hoisted_26 = { class: "astryx-diff-viewer__ltr" };
-const _hoisted_27 = ["aria-label", "onClick"];
-const _hoisted_28 = ["data-diff"];
-const _hoisted_29 = { class: "astryx-diff-viewer__ltr" };
-const _hoisted_30 = ["data-kind"];
+const _hoisted_28 = { key: 0 };
+const _hoisted_29 = ["colspan"];
+const _hoisted_30 = { class: "astryx-diff-viewer__ltr" };
 const _hoisted_31 = ["aria-label", "onClick"];
-const _hoisted_32 = ["data-diff"];
-const _hoisted_33 = { class: "astryx-diff-viewer__ltr" };
-const _hoisted_34 = ["data-kind"];
-const _hoisted_35 = { key: 0 };
-const _hoisted_36 = ["colspan"];
-const _hoisted_37 = {
+const _hoisted_32 = {
 	key: 0,
-	class: "astryx-diff-viewer__annotation-content"
+	"aria-hidden": "true"
+};
+const _hoisted_33 = {
+	key: 0,
+	"aria-hidden": "true"
+};
+const _hoisted_34 = ["data-diff"];
+const _hoisted_35 = { class: "astryx-diff-viewer__ltr" };
+const _hoisted_36 = ["data-kind"];
+const _hoisted_37 = ["aria-label", "onClick"];
+const _hoisted_38 = {
+	key: 0,
+	"aria-hidden": "true"
 };
-const _hoisted_38 = ["colspan"];
 const _hoisted_39 = {
+	key: 0,
+	"aria-hidden": "true"
+};
+const _hoisted_40 = ["data-diff"];
+const _hoisted_41 = { class: "astryx-diff-viewer__ltr" };
+const _hoisted_42 = ["data-kind"];
+const _hoisted_43 = { key: 0 };
+const _hoisted_44 = ["colspan"];
+const _hoisted_45 = {
+	key: 0,
+	class: "astryx-diff-viewer__annotation-content"
+};
+const _hoisted_46 = ["colspan"];
+const _hoisted_47 = {
 	key: 0,
 	class: "astryx-diff-viewer__annotation-content"
 };
@@ -503,6 +539,8 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 		splitRows: {},
 		hasLineNumbers: { type: Boolean },
 		isWrapped: { type: Boolean },
+		changeIndicator: {},
+		hasChangeBackground: { type: Boolean },
 		hasLineNumberClick: { type: Boolean },
 		digits: {}
 	},
@@ -510,9 +548,18 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const splitTable = useTemplateRef("splitTable");
+		function onPaneScroll(event) {
+			const left = event.currentTarget.scrollLeft;
+			const panes = splitTable.value?.querySelectorAll("[data-pane]") ?? [];
+			for (const pane of panes) if (pane.scrollLeft !== left) pane.scrollLeft = left;
+		}
 		const unifiedColumns = computed(() => (props.hasLineNumbers ? 2 : 0) + 2);
 		const splitSideColumns = computed(() => (props.hasLineNumbers ? 1 : 0) + 2);
-		const tableStyle = computed(() => ({ "--astryx-diff-viewer-gutter-width": `${props.digits}ch` }));
+		const tableStyle = computed(() => ({
+			"--astryx-diff-viewer-gutter-width": `${props.digits}ch`,
+			"--_diff-gutter-cell": `calc(${props.digits}ch + 2 * var(--astryx-spacing-2, 8px))`
+		}));
 		function lineNumber(cell, side) {
 			if (cell == null) return null;
 			return side === "old" ? cell.line.oldLineNumber : cell.line.newLineNumber;
@@ -551,6 +598,10 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 			return __props.viewMode === "unified" ? (openBlock(), createElementBlock("table", {
 				key: 0,
 				class: normalizeClass(["astryx-diff-viewer__table", { "astryx-diff-viewer__table--wrapped": __props.isWrapped }]),
+				"data-view-mode": __props.viewMode,
+				"data-has-line-numbers": __props.hasLineNumbers || void 0,
+				"data-change-indicator": __props.changeIndicator,
+				"data-change-background": __props.hasChangeBackground ? void 0 : "false",
 				style: normalizeStyle(tableStyle.value)
 			}, [
 				createElementVNode("colgroup", null, [
@@ -559,28 +610,28 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 					_cache[3] || (_cache[3] = createElementVNode("col", null, null, -1))
 				]),
 				createElementVNode("thead", null, [createElementVNode("tr", null, [
-					__props.hasLineNumbers ? (openBlock(), createElementBlock("th", _hoisted_1$12, [createVNode(unref(VisuallyHidden), null, {
+					__props.hasLineNumbers ? (openBlock(), createElementBlock("th", _hoisted_2$11, [createVNode(unref(VisuallyHidden), null, {
 						default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("Original line number", -1)])]),
 						_: 1
 					})])) : createCommentVNode("v-if", true),
-					__props.hasLineNumbers ? (openBlock(), createElementBlock("th", _hoisted_2$11, [createVNode(unref(VisuallyHidden), null, {
+					__props.hasLineNumbers ? (openBlock(), createElementBlock("th", _hoisted_3$10, [createVNode(unref(VisuallyHidden), null, {
 						default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("Changed line number", -1)])]),
 						_: 1
 					})])) : createCommentVNode("v-if", true),
-					createElementVNode("th", _hoisted_3$10, [createVNode(unref(VisuallyHidden), null, {
+					createElementVNode("th", _hoisted_4$9, [createVNode(unref(VisuallyHidden), null, {
 						default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode("Change", -1)])]),
 						_: 1
 					})]),
-					createElementVNode("th", _hoisted_4$9, [createVNode(unref(VisuallyHidden), null, {
+					createElementVNode("th", _hoisted_5$8, [createVNode(unref(VisuallyHidden), null, {
 						default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode("Code", -1)])]),
 						_: 1
 					})])
 				])]),
 				createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.unifiedRows, (row) => {
-					return openBlock(), createElementBlock(Fragment, { key: row.key }, [row.type === "hunk" ? (openBlock(), createElementBlock("tr", _hoisted_5$8, [createElementVNode("td", {
+					return openBlock(), createElementBlock(Fragment, { key: row.key }, [row.type === "hunk" ? (openBlock(), createElementBlock("tr", _hoisted_6$7, [createElementVNode("td", {
 						colspan: unifiedColumns.value,
 						class: "astryx-diff-viewer__hunk"
-					}, [createElementVNode("span", _hoisted_7$5, toDisplayString(row.header), 1)], 8, _hoisted_6$7)])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("tr", null, [
+					}, [createElementVNode("span", _hoisted_8$4, toDisplayString(row.header), 1)], 8, _hoisted_7$5)])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("tr", null, [
 						__props.hasLineNumbers ? (openBlock(), createElementBlock("td", {
 							key: 0,
 							class: normalizeClass(["astryx-diff-viewer__gutter", cellClass(row.cell)])
@@ -591,7 +642,7 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 							"data-diff-line-button": "",
 							"aria-label": lineNumberButtonLabel("old", lineNumber(row.cell, "old")),
 							onClick: ($event) => emitLineNumberClick(row.cell, "old", $event)
-						}, toDisplayString(lineNumber(row.cell, "old")), 9, _hoisted_8$4)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(lineNumber(row.cell, "old")), 1)], 64))], 2)) : createCommentVNode("v-if", true),
+						}, toDisplayString(lineNumber(row.cell, "old")), 9, _hoisted_9$4)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(lineNumber(row.cell, "old")), 1)], 64))], 2)) : createCommentVNode("v-if", true),
 						__props.hasLineNumbers ? (openBlock(), createElementBlock("td", {
 							key: 1,
 							class: normalizeClass(["astryx-diff-viewer__gutter", cellClass(row.cell)])
@@ -602,18 +653,18 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 							"data-diff-line-button": "",
 							"aria-label": lineNumberButtonLabel("new", lineNumber(row.cell, "new")),
 							onClick: ($event) => emitLineNumberClick(row.cell, "new", $event)
-						}, toDisplayString(lineNumber(row.cell, "new")), 9, _hoisted_9$4)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(lineNumber(row.cell, "new")), 1)], 64))], 2)) : createCommentVNode("v-if", true),
-						createElementVNode("td", { class: normalizeClass(["astryx-diff-viewer__marker", cellClass(row.cell)]) }, [row.cell.line.kind === "added" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[9] || (_cache[9] = createElementVNode("span", { "aria-hidden": "true" }, "+", -1)), createVNode(unref(VisuallyHidden), null, {
+						}, toDisplayString(lineNumber(row.cell, "new")), 9, _hoisted_10$4)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(lineNumber(row.cell, "new")), 1)], 64))], 2)) : createCommentVNode("v-if", true),
+						createElementVNode("td", { class: normalizeClass(["astryx-diff-viewer__marker", cellClass(row.cell)]) }, [row.cell.line.kind === "added" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.changeIndicator === "classic" ? (openBlock(), createElementBlock("span", _hoisted_11$2, "+")) : createCommentVNode("v-if", true), createVNode(unref(VisuallyHidden), null, {
 							default: withCtx(() => [..._cache[8] || (_cache[8] = [createTextVNode("Added", -1)])]),
 							_: 1
-						})], 64)) : row.cell.line.kind === "removed" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [_cache[11] || (_cache[11] = createElementVNode("span", { "aria-hidden": "true" }, "-", -1)), createVNode(unref(VisuallyHidden), null, {
-							default: withCtx(() => [..._cache[10] || (_cache[10] = [createTextVNode("Removed", -1)])]),
+						})], 64)) : row.cell.line.kind === "removed" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [__props.changeIndicator === "classic" ? (openBlock(), createElementBlock("span", _hoisted_12$1, "-")) : createCommentVNode("v-if", true), createVNode(unref(VisuallyHidden), null, {
+							default: withCtx(() => [..._cache[9] || (_cache[9] = [createTextVNode("Removed", -1)])]),
 							_: 1
 						})], 64)) : createCommentVNode("v-if", true)], 2),
 						createElementVNode("td", {
 							class: normalizeClass(["astryx-diff-viewer__code", [cellClass(row.cell), { "astryx-diff-viewer__code--wrapped": __props.isWrapped }]]),
 							"data-diff": diffKind(row.cell)
-						}, [createElementVNode("span", _hoisted_11$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(row.cell.groups, (group, groupIndex) => {
+						}, [createElementVNode("span", _hoisted_14, [(openBlock(true), createElementBlock(Fragment, null, renderList(row.cell.groups, (group, groupIndex) => {
 							return openBlock(), createElementBlock(Fragment, { key: groupIndex }, [group.changed ? (openBlock(), createElementBlock("span", {
 								key: 0,
 								class: "astryx-diff-viewer__change",
@@ -624,62 +675,68 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 									key: 0,
 									class: normalizeClass(`astryx-token-${part.type}`)
 								}, toDisplayString(part.text), 3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
-							}), 128))], 8, _hoisted_12$1)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(group.parts, (part, partIndex) => {
+							}), 128))], 8, _hoisted_15)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(group.parts, (part, partIndex) => {
 								return openBlock(), createElementBlock(Fragment, { key: partIndex }, [part.type != null ? (openBlock(), createElementBlock("span", {
 									key: 0,
 									class: normalizeClass(`astryx-token-${part.type}`)
 								}, toDisplayString(part.text), 3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
 							}), 128))], 64);
-						}), 128))])], 10, _hoisted_10$4)
-					]), row.cell.note != null ? (openBlock(), createElementBlock("tr", _hoisted_13, [createElementVNode("td", {
+						}), 128))])], 10, _hoisted_13)
+					]), row.cell.note != null ? (openBlock(), createElementBlock("tr", _hoisted_16, [createElementVNode("td", {
 						colspan: unifiedColumns.value,
 						class: "astryx-diff-viewer__annotation"
-					}, [createElementVNode("div", _hoisted_15, [createVNode(unref(RenderVNode_default), { content: row.cell.note }, null, 8, ["content"])])], 8, _hoisted_14)])) : createCommentVNode("v-if", true)], 64))], 64);
+					}, [createElementVNode("div", _hoisted_18, [createVNode(unref(RenderVNode_default), { content: row.cell.note }, null, 8, ["content"])])], 8, _hoisted_17)])) : createCommentVNode("v-if", true)], 64))], 64);
 				}), 128))])
-			], 6)) : (openBlock(), createElementBlock("table", {
+			], 14, _hoisted_1$12)) : (openBlock(), createElementBlock("table", {
 				key: 1,
+				ref_key: "splitTable",
+				ref: splitTable,
 				class: normalizeClass(["astryx-diff-viewer__table", { "astryx-diff-viewer__table--wrapped": __props.isWrapped }]),
+				"data-view-mode": __props.viewMode,
+				"data-has-line-numbers": __props.hasLineNumbers || void 0,
+				"data-change-indicator": __props.changeIndicator,
+				"data-change-background": __props.hasChangeBackground ? void 0 : "false",
 				style: normalizeStyle(tableStyle.value)
 			}, [
 				createElementVNode("colgroup", null, [
-					__props.hasLineNumbers ? (openBlock(), createElementBlock("col", _hoisted_16)) : createCommentVNode("v-if", true),
+					__props.hasLineNumbers ? (openBlock(), createElementBlock("col", _hoisted_20)) : createCommentVNode("v-if", true),
+					_cache[10] || (_cache[10] = createElementVNode("col", { class: "astryx-diff-viewer__marker-col" }, null, -1)),
+					_cache[11] || (_cache[11] = createElementVNode("col", null, null, -1)),
+					__props.hasLineNumbers ? (openBlock(), createElementBlock("col", _hoisted_21)) : createCommentVNode("v-if", true),
 					_cache[12] || (_cache[12] = createElementVNode("col", { class: "astryx-diff-viewer__marker-col" }, null, -1)),
-					_cache[13] || (_cache[13] = createElementVNode("col", null, null, -1)),
-					__props.hasLineNumbers ? (openBlock(), createElementBlock("col", _hoisted_17)) : createCommentVNode("v-if", true),
-					_cache[14] || (_cache[14] = createElementVNode("col", { class: "astryx-diff-viewer__marker-col" }, null, -1)),
-					_cache[15] || (_cache[15] = createElementVNode("col", null, null, -1))
+					_cache[13] || (_cache[13] = createElementVNode("col", null, null, -1))
 				]),
 				createElementVNode("thead", null, [createElementVNode("tr", null, [
-					__props.hasLineNumbers ? (openBlock(), createElementBlock("th", _hoisted_18, [createVNode(unref(VisuallyHidden), null, {
-						default: withCtx(() => [..._cache[16] || (_cache[16] = [createTextVNode("Original line number", -1)])]),
+					__props.hasLineNumbers ? (openBlock(), createElementBlock("th", _hoisted_22, [createVNode(unref(VisuallyHidden), null, {
+						default: withCtx(() => [..._cache[14] || (_cache[14] = [createTextVNode("Original line number", -1)])]),
 						_: 1
 					})])) : createCommentVNode("v-if", true),
-					createElementVNode("th", _hoisted_19, [createVNode(unref(VisuallyHidden), null, {
-						default: withCtx(() => [..._cache[17] || (_cache[17] = [createTextVNode("Change", -1)])]),
+					createElementVNode("th", _hoisted_23, [createVNode(unref(VisuallyHidden), null, {
+						default: withCtx(() => [..._cache[15] || (_cache[15] = [createTextVNode("Change", -1)])]),
 						_: 1
 					})]),
-					createElementVNode("th", _hoisted_20, [createVNode(unref(VisuallyHidden), null, {
-						default: withCtx(() => [..._cache[18] || (_cache[18] = [createTextVNode("Original code", -1)])]),
+					createElementVNode("th", _hoisted_24, [createVNode(unref(VisuallyHidden), null, {
+						default: withCtx(() => [..._cache[16] || (_cache[16] = [createTextVNode("Original code", -1)])]),
 						_: 1
 					})]),
-					__props.hasLineNumbers ? (openBlock(), createElementBlock("th", _hoisted_21, [createVNode(unref(VisuallyHidden), null, {
-						default: withCtx(() => [..._cache[19] || (_cache[19] = [createTextVNode("Changed line number", -1)])]),
+					__props.hasLineNumbers ? (openBlock(), createElementBlock("th", _hoisted_25, [createVNode(unref(VisuallyHidden), null, {
+						default: withCtx(() => [..._cache[17] || (_cache[17] = [createTextVNode("Changed line number", -1)])]),
 						_: 1
 					})])) : createCommentVNode("v-if", true),
-					createElementVNode("th", _hoisted_22, [createVNode(unref(VisuallyHidden), null, {
-						default: withCtx(() => [..._cache[20] || (_cache[20] = [createTextVNode("Change", -1)])]),
+					createElementVNode("th", _hoisted_26, [createVNode(unref(VisuallyHidden), null, {
+						default: withCtx(() => [..._cache[18] || (_cache[18] = [createTextVNode("Change", -1)])]),
 						_: 1
 					})]),
-					createElementVNode("th", _hoisted_23, [createVNode(unref(VisuallyHidden), null, {
-						default: withCtx(() => [..._cache[21] || (_cache[21] = [createTextVNode("Changed code", -1)])]),
+					createElementVNode("th", _hoisted_27, [createVNode(unref(VisuallyHidden), null, {
+						default: withCtx(() => [..._cache[19] || (_cache[19] = [createTextVNode("Changed code", -1)])]),
 						_: 1
 					})])
 				])]),
 				createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.splitRows, (row) => {
-					return openBlock(), createElementBlock(Fragment, { key: row.key }, [row.type === "hunk" ? (openBlock(), createElementBlock("tr", _hoisted_24, [createElementVNode("td", {
+					return openBlock(), createElementBlock(Fragment, { key: row.key }, [row.type === "hunk" ? (openBlock(), createElementBlock("tr", _hoisted_28, [createElementVNode("td", {
 						colspan: splitSideColumns.value * 2,
 						class: "astryx-diff-viewer__hunk"
-					}, [createElementVNode("span", _hoisted_26, toDisplayString(row.header), 1)], 8, _hoisted_25)])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("tr", null, [
+					}, [createElementVNode("span", _hoisted_30, toDisplayString(row.header), 1)], 8, _hoisted_29)])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("tr", null, [
 						__props.hasLineNumbers ? (openBlock(), createElementBlock("td", {
 							key: 0,
 							class: normalizeClass(["astryx-diff-viewer__gutter", cellClass(row.old)])
@@ -690,18 +747,22 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 							"data-diff-line-button": "",
 							"aria-label": lineNumberButtonLabel("old", lineNumber(row.old, "old")),
 							onClick: ($event) => emitLineNumberClick(row.old, "old", $event)
-						}, toDisplayString(lineNumber(row.old, "old")), 9, _hoisted_27)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(lineNumber(row.old, "old")), 1)], 64))], 2)) : createCommentVNode("v-if", true),
-						createElementVNode("td", { class: normalizeClass(["astryx-diff-viewer__marker", cellClass(row.old)]) }, [row.old?.line.kind === "added" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[23] || (_cache[23] = createElementVNode("span", { "aria-hidden": "true" }, "+", -1)), createVNode(unref(VisuallyHidden), null, {
-							default: withCtx(() => [..._cache[22] || (_cache[22] = [createTextVNode("Added", -1)])]),
+						}, toDisplayString(lineNumber(row.old, "old")), 9, _hoisted_31)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(lineNumber(row.old, "old")), 1)], 64))], 2)) : createCommentVNode("v-if", true),
+						createElementVNode("td", { class: normalizeClass(["astryx-diff-viewer__marker", cellClass(row.old)]) }, [row.old?.line.kind === "added" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.changeIndicator === "classic" ? (openBlock(), createElementBlock("span", _hoisted_32, "+")) : createCommentVNode("v-if", true), createVNode(unref(VisuallyHidden), null, {
+							default: withCtx(() => [..._cache[20] || (_cache[20] = [createTextVNode("Added", -1)])]),
 							_: 1
-						})], 64)) : row.old?.line.kind === "removed" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [_cache[25] || (_cache[25] = createElementVNode("span", { "aria-hidden": "true" }, "-", -1)), createVNode(unref(VisuallyHidden), null, {
-							default: withCtx(() => [..._cache[24] || (_cache[24] = [createTextVNode("Removed", -1)])]),
+						})], 64)) : row.old?.line.kind === "removed" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [__props.changeIndicator === "classic" ? (openBlock(), createElementBlock("span", _hoisted_33, "-")) : createCommentVNode("v-if", true), createVNode(unref(VisuallyHidden), null, {
+							default: withCtx(() => [..._cache[21] || (_cache[21] = [createTextVNode("Removed", -1)])]),
 							_: 1
 						})], 64)) : createCommentVNode("v-if", true)], 2),
 						createElementVNode("td", {
 							class: normalizeClass(["astryx-diff-viewer__code astryx-diff-viewer__code--old", [cellClass(row.old), { "astryx-diff-viewer__code--wrapped": __props.isWrapped }]]),
 							"data-diff": diffKind(row.old)
-						}, [createElementVNode("span", _hoisted_29, [(openBlock(true), createElementBlock(Fragment, null, renderList(row.old?.groups ?? [], (group, groupIndex) => {
+						}, [createElementVNode("div", {
+							class: "astryx-diff-viewer__code-scroll",
+							"data-pane": "old",
+							onScroll: onPaneScroll
+						}, [createElementVNode("span", _hoisted_35, [(openBlock(true), createElementBlock(Fragment, null, renderList(row.old?.groups ?? [], (group, groupIndex) => {
 							return openBlock(), createElementBlock(Fragment, { key: groupIndex }, [group.changed ? (openBlock(), createElementBlock("span", {
 								key: 0,
 								class: "astryx-diff-viewer__change",
@@ -712,13 +773,13 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 									key: 0,
 									class: normalizeClass(`astryx-token-${part.type}`)
 								}, toDisplayString(part.text), 3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
-							}), 128))], 8, _hoisted_30)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(group.parts, (part, partIndex) => {
+							}), 128))], 8, _hoisted_36)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(group.parts, (part, partIndex) => {
 								return openBlock(), createElementBlock(Fragment, { key: partIndex }, [part.type != null ? (openBlock(), createElementBlock("span", {
 									key: 0,
 									class: normalizeClass(`astryx-token-${part.type}`)
 								}, toDisplayString(part.text), 3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
 							}), 128))], 64);
-						}), 128))])], 10, _hoisted_28),
+						}), 128))])], 32)], 10, _hoisted_34),
 						__props.hasLineNumbers ? (openBlock(), createElementBlock("td", {
 							key: 1,
 							class: normalizeClass(["astryx-diff-viewer__gutter", cellClass(row.new)])
@@ -729,18 +790,22 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 							"data-diff-line-button": "",
 							"aria-label": lineNumberButtonLabel("new", lineNumber(row.new, "new")),
 							onClick: ($event) => emitLineNumberClick(row.new, "new", $event)
-						}, toDisplayString(lineNumber(row.new, "new")), 9, _hoisted_31)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(lineNumber(row.new, "new")), 1)], 64))], 2)) : createCommentVNode("v-if", true),
-						createElementVNode("td", { class: normalizeClass(["astryx-diff-viewer__marker", cellClass(row.new)]) }, [row.new?.line.kind === "added" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[27] || (_cache[27] = createElementVNode("span", { "aria-hidden": "true" }, "+", -1)), createVNode(unref(VisuallyHidden), null, {
-							default: withCtx(() => [..._cache[26] || (_cache[26] = [createTextVNode("Added", -1)])]),
+						}, toDisplayString(lineNumber(row.new, "new")), 9, _hoisted_37)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(lineNumber(row.new, "new")), 1)], 64))], 2)) : createCommentVNode("v-if", true),
+						createElementVNode("td", { class: normalizeClass(["astryx-diff-viewer__marker", cellClass(row.new)]) }, [row.new?.line.kind === "added" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [__props.changeIndicator === "classic" ? (openBlock(), createElementBlock("span", _hoisted_38, "+")) : createCommentVNode("v-if", true), createVNode(unref(VisuallyHidden), null, {
+							default: withCtx(() => [..._cache[22] || (_cache[22] = [createTextVNode("Added", -1)])]),
 							_: 1
-						})], 64)) : row.new?.line.kind === "removed" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [_cache[29] || (_cache[29] = createElementVNode("span", { "aria-hidden": "true" }, "-", -1)), createVNode(unref(VisuallyHidden), null, {
-							default: withCtx(() => [..._cache[28] || (_cache[28] = [createTextVNode("Removed", -1)])]),
+						})], 64)) : row.new?.line.kind === "removed" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [__props.changeIndicator === "classic" ? (openBlock(), createElementBlock("span", _hoisted_39, "-")) : createCommentVNode("v-if", true), createVNode(unref(VisuallyHidden), null, {
+							default: withCtx(() => [..._cache[23] || (_cache[23] = [createTextVNode("Removed", -1)])]),
 							_: 1
 						})], 64)) : createCommentVNode("v-if", true)], 2),
 						createElementVNode("td", {
 							class: normalizeClass(["astryx-diff-viewer__code", [cellClass(row.new), { "astryx-diff-viewer__code--wrapped": __props.isWrapped }]]),
 							"data-diff": diffKind(row.new)
-						}, [createElementVNode("span", _hoisted_33, [(openBlock(true), createElementBlock(Fragment, null, renderList(row.new?.groups ?? [], (group, groupIndex) => {
+						}, [createElementVNode("div", {
+							class: "astryx-diff-viewer__code-scroll",
+							"data-pane": "new",
+							onScroll: onPaneScroll
+						}, [createElementVNode("span", _hoisted_41, [(openBlock(true), createElementBlock(Fragment, null, renderList(row.new?.groups ?? [], (group, groupIndex) => {
 							return openBlock(), createElementBlock(Fragment, { key: groupIndex }, [group.changed ? (openBlock(), createElementBlock("span", {
 								key: 0,
 								class: "astryx-diff-viewer__change",
@@ -751,22 +816,22 @@ const _sfc_main$13 = /*@__PURE__*/ defineComponent({
 									key: 0,
 									class: normalizeClass(`astryx-token-${part.type}`)
 								}, toDisplayString(part.text), 3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
-							}), 128))], 8, _hoisted_34)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(group.parts, (part, partIndex) => {
+							}), 128))], 8, _hoisted_42)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(group.parts, (part, partIndex) => {
 								return openBlock(), createElementBlock(Fragment, { key: partIndex }, [part.type != null ? (openBlock(), createElementBlock("span", {
 									key: 0,
 									class: normalizeClass(`astryx-token-${part.type}`)
 								}, toDisplayString(part.text), 3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
 							}), 128))], 64);
-						}), 128))])], 10, _hoisted_32)
-					]), oldNote(row) != null || newNote(row) != null ? (openBlock(), createElementBlock("tr", _hoisted_35, [createElementVNode("td", {
+						}), 128))])], 32)], 10, _hoisted_40)
+					]), oldNote(row) != null || newNote(row) != null ? (openBlock(), createElementBlock("tr", _hoisted_43, [createElementVNode("td", {
 						colspan: splitSideColumns.value,
 						class: "astryx-diff-viewer__annotation astryx-diff-viewer__code--old"
-					}, [oldNote(row) != null ? (openBlock(), createElementBlock("div", _hoisted_37, [createVNode(unref(RenderVNode_default), { content: oldNote(row) }, null, 8, ["content"])])) : createCommentVNode("v-if", true)], 8, _hoisted_36), createElementVNode("td", {
+					}, [oldNote(row) != null ? (openBlock(), createElementBlock("div", _hoisted_45, [createVNode(unref(RenderVNode_default), { content: oldNote(row) }, null, 8, ["content"])])) : createCommentVNode("v-if", true)], 8, _hoisted_44), createElementVNode("td", {
 						colspan: splitSideColumns.value,
 						class: "astryx-diff-viewer__annotation"
-					}, [newNote(row) != null ? (openBlock(), createElementBlock("div", _hoisted_39, [createVNode(unref(RenderVNode_default), { content: newNote(row) }, null, 8, ["content"])])) : createCommentVNode("v-if", true)], 8, _hoisted_38)])) : createCommentVNode("v-if", true)], 64))], 64);
+					}, [newNote(row) != null ? (openBlock(), createElementBlock("div", _hoisted_47, [createVNode(unref(RenderVNode_default), { content: newNote(row) }, null, 8, ["content"])])) : createCommentVNode("v-if", true)], 8, _hoisted_46)])) : createCommentVNode("v-if", true)], 64))], 64);
 				}), 128))])
-			], 6));
+			], 14, _hoisted_19));
 		};
 	}
 });
@@ -1213,6 +1278,11 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			default: false
 		},
 		inlineHighlight: { default: "word" },
+		changeIndicator: { default: "classic" },
+		hasChangeBackground: {
+			type: Boolean,
+			default: true
+		},
 		isCollapsible: {
 			type: Boolean,
 			default: true
@@ -1386,6 +1456,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					"split-rows": splitRows.value,
 					"has-line-numbers": __props.hasLineNumbers,
 					"is-wrapped": __props.isWrapped,
+					"change-indicator": __props.changeIndicator,
+					"has-change-background": __props.hasChangeBackground,
 					"has-line-number-click": hasLineNumberClick.value,
 					digits: stats.value.digits,
 					onLineNumberClick: relayLineNumberClick
@@ -1395,6 +1467,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					"split-rows",
 					"has-line-numbers",
 					"is-wrapped",
+					"change-indicator",
+					"has-change-background",
 					"has-line-number-click",
 					"digits"
 				])], 512)], 16, _hoisted_12))], 64)) : createCommentVNode("v-if", true)], 8, _hoisted_9$3)]),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/lab",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Astryx lab components for Vue 3 — experimental components that may change. Ships only under the canary dist-tag.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -53,7 +53,7 @@
   ],
   "peerDependencies": {
     "vue": "^3.5.0",
-    "@astryx-vue/core": "^0.6.0"
+    "@astryx-vue/core": "^0.7.9"
   },
   "devDependencies": {
     "@types/node": "26.6.4",
@@ -64,7 +64,7 @@
     "unplugin-vue": "8.0.0",
     "vue": "3.5.43",
     "vue-tsc": "3.3.12",
-    "@astryx-vue/core": "^0.6.0"
+    "@astryx-vue/core": "^0.7.9"
   },
   "scripts": {
     "build": "tsdown",

package/styles/diff-viewer.css

@@ -167,6 +167,7 @@
   }
 
   .astryx-diff-viewer__marker {
+    position: relative;
     padding: 0 var(--astryx-spacing-2, 8px) 0 var(--astryx-spacing-1, 4px);
     color: var(--astryx-color-text-secondary, light-dark(#474747, #9e9e9e));
     vertical-align: top;
@@ -187,11 +188,77 @@
     overflow-wrap: anywhere;
   }
 
+  /* 分栏固定在左右各一半；只有代码滚动，行号和变化标记留在原地。 */
+  .astryx-diff-viewer__table[data-view-mode='split'] {
+    width: 100%;
+    min-width: 0;
+    table-layout: fixed;
+  }
+
+  .astryx-diff-viewer__code-scroll {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-inline: contain;
+  }
+
+  .astryx-diff-viewer__code-scroll > .astryx-diff-viewer__ltr {
+    display: inline-block;
+    min-width: 100%;
+  }
+
+  .astryx-diff-viewer__code--wrapped .astryx-diff-viewer__code-scroll {
+    overflow-x: hidden;
+  }
+
+  /* 统一视图仍整表滚动，行号和标记通过 sticky 留在视口内。 */
+  .astryx-diff-viewer__table[data-view-mode='unified'] .astryx-diff-viewer__gutter,
+  .astryx-diff-viewer__table[data-view-mode='unified'] .astryx-diff-viewer__marker {
+    position: sticky;
+    z-index: 1;
+    background-color: var(--astryx-code-block-background, var(--astryx-color-background-surface, light-dark(#ffffff, #262626)));
+  }
+
+  .astryx-diff-viewer__table[data-view-mode='unified'][data-has-line-numbers] .astryx-diff-viewer__gutter:nth-child(1) {
+    inset-inline-start: 0;
+  }
+
+  .astryx-diff-viewer__table[data-view-mode='unified'][data-has-line-numbers] .astryx-diff-viewer__gutter:nth-child(2) {
+    inset-inline-start: var(--_diff-gutter-cell, 2ch);
+  }
+
+  .astryx-diff-viewer__table[data-view-mode='unified'][data-has-line-numbers] .astryx-diff-viewer__marker {
+    inset-inline-start: calc(2 * var(--_diff-gutter-cell, 2ch));
+  }
+
+  .astryx-diff-viewer__table[data-view-mode='unified']:not([data-has-line-numbers]) .astryx-diff-viewer__marker {
+    inset-inline-start: 0;
+  }
+
   /* 分栏时旧文件一侧负责画中间的分隔线。 */
   .astryx-diff-viewer__code--old {
     border-inline-end: var(--astryx-border-width, 1px) solid var(--astryx-color-border, light-dark(#00000014, #ffffff1a));
   }
 
+  .astryx-diff-viewer__table[data-change-background='false'] .is-added,
+  .astryx-diff-viewer__table[data-change-background='false'] .is-removed {
+    background-color: transparent;
+  }
+
+  .astryx-diff-viewer__table[data-change-indicator='bars'] .astryx-diff-viewer__marker.is-added::before,
+  .astryx-diff-viewer__table[data-change-indicator='bars'] .astryx-diff-viewer__marker.is-removed::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    border-inline-start: 2px solid currentColor;
+  }
+
+  .astryx-diff-viewer__table[data-change-indicator='bars'] .astryx-diff-viewer__marker.is-removed::before {
+    border-inline-start-style: dashed;
+  }
+
   .astryx-diff-viewer__gutter.is-added,
   .astryx-diff-viewer__marker.is-added,
   .astryx-diff-viewer__code.is-added {