From 48d3ebb177ce74c1bf1217bf22d5af75cf015d82 Mon Sep 17 00:00:00 2001
From: MrWangJustToDo <2711470541@qq.com>
Date: Wed, 24 Jan 2024 00:47:43 +0800
Subject: [PATCH] vue component almost done

---
 .../react/src/components/DiffViewContext.ts   |   4 +-
 packages/vue/src/components/DiffAddWidget.tsx |   4 +-
 packages/vue/src/components/DiffSplitLine.tsx |  25 +-
 .../src/components/DiffUnifiedExtendLine.tsx  |  71 +++++
 .../src/components/DiffUnifiedHunkLine.tsx    | 136 +++++++++
 .../vue/src/components/DiffUnifiedLine.tsx    | 269 ++++++++++++++++++
 .../vue/src/components/DiffUnifiedView.tsx    |  50 ++++
 .../src/components/DiffUnifiedWidgetLine.tsx  |  71 +++++
 packages/vue/src/components/DiffView.tsx      |  11 +-
 .../vue/src/hooks/useSubscribeDiffFile.ts     |   2 +
 ui/vue-example/src/App.vue                    |  70 ++++-
 11 files changed, 689 insertions(+), 24 deletions(-)
 create mode 100644 packages/vue/src/components/DiffUnifiedExtendLine.tsx
 create mode 100644 packages/vue/src/components/DiffUnifiedHunkLine.tsx
 create mode 100644 packages/vue/src/components/DiffUnifiedLine.tsx
 create mode 100644 packages/vue/src/components/DiffUnifiedView.tsx
 create mode 100644 packages/vue/src/components/DiffUnifiedWidgetLine.tsx

diff --git a/packages/react/src/components/DiffViewContext.ts b/packages/react/src/components/DiffViewContext.ts
index 5855267..43ba70a 100644
--- a/packages/react/src/components/DiffViewContext.ts
+++ b/packages/react/src/components/DiffViewContext.ts
@@ -4,8 +4,8 @@ import type { DiffViewProps, SplitSide } from "..";
 import type { DiffFileExtends } from "../utils";
 
 export enum DiffModeEnum {
-  Split,
-  Unified,
+  Split = 1,
+  Unified = 2,
 }
 
 export type DiffViewContextProps<T = any> = {
diff --git a/packages/vue/src/components/DiffAddWidget.tsx b/packages/vue/src/components/DiffAddWidget.tsx
index 3caa7c7..b26bb3b 100644
--- a/packages/vue/src/components/DiffAddWidget.tsx
+++ b/packages/vue/src/components/DiffAddWidget.tsx
@@ -52,7 +52,7 @@ export const DiffUnifiedAddWidget = ({
   diffFile: DiffFileExtends;
   lineNumber: number;
   side: SplitSide;
-  onWidgetClick?: (lineNumber: number, side: SplitSide) => void;
+  onWidgetClick?: (event: "onAddWidgetClick", lineNumber: number, side: SplitSide) => void;
 }) => {
   return (
     <div
@@ -72,7 +72,7 @@ export const DiffUnifiedAddWidget = ({
         }}
         onClick={() => {
           diffFile.onOpenAddWidget(lineNumber, side);
-          onWidgetClick?.(lineNumber, side);
+          onWidgetClick?.("onAddWidgetClick", lineNumber, side);
         }}
       >
         +
diff --git a/packages/vue/src/components/DiffSplitLine.tsx b/packages/vue/src/components/DiffSplitLine.tsx
index b4c8d4a..953db5e 100644
--- a/packages/vue/src/components/DiffSplitLine.tsx
+++ b/packages/vue/src/components/DiffSplitLine.tsx
@@ -2,7 +2,6 @@ import { DiffLineType, type DiffFile } from "@git-diff-view/core";
 import { computed, defineComponent, ref } from "vue";
 
 import { useEnableAddWidget, useEnableHighlight, useEnableWrap, useOnAddWidgetClick } from "../context";
-import { useForceUpdate } from "../hooks/useForceUpdate";
 import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
 import { useSyncHeight } from "../hooks/useSyncHeight";
 
@@ -25,11 +24,17 @@ export const DiffSplitLine = defineComponent(
 
     const currentItem = ref(props.side === SplitSide.old ? props.diffFile.getSplitLeftLine(props.index) : props.diffFile.getSplitRightLine(props.index));
 
-    const currentItemHasDiff = ref(!!currentItem.value.diff);
+    const currentItemHasDiff = ref(!!currentItem.value?.diff);
 
     const currentItemHasChange = ref(currentItem.value?.diff?.isIncludeableLine());
 
-    const currentSyntaxItem = ref(props.side === SplitSide.old ? props.diffFile.getOldSyntaxLine(currentItem.value.lineNumber) : props.diffFile.getNewSyntaxLine(currentItem.value.lineNumber));
+    const currentItemHasHidden = ref(currentItem.value?.isHidden);
+
+    const currentSyntaxItem = ref(
+      props.side === SplitSide.old
+        ? props.diffFile.getOldSyntaxLine(currentItem.value?.lineNumber)
+        : props.diffFile.getNewSyntaxLine(currentItem.value?.lineNumber)
+    );
 
     useSubscribeDiffFile(
       props,
@@ -38,14 +43,16 @@ export const DiffSplitLine = defineComponent(
 
     useSubscribeDiffFile(
       props,
-      (diffFile) => (currentSyntaxItem.value = props.side === SplitSide.old ? diffFile.getOldSyntaxLine(currentItem.value.lineNumber) : diffFile.getNewSyntaxLine(currentItem.value.lineNumber))
+      (diffFile) =>
+        (currentSyntaxItem.value =
+          props.side === SplitSide.old ? diffFile.getOldSyntaxLine(currentItem.value?.lineNumber) : diffFile.getNewSyntaxLine(currentItem.value?.lineNumber))
     );
 
-    useSubscribeDiffFile(props, () => (currentItemHasDiff.value = !!currentItem.value.diff));
+    useSubscribeDiffFile(props, () => (currentItemHasDiff.value = !!currentItem.value?.diff));
 
-    useSubscribeDiffFile(props, () => (currentItemHasChange.value = currentItem.value.diff?.isIncludeableLine()));
+    useSubscribeDiffFile(props, () => (currentItemHasHidden.value = currentItem.value?.isHidden));
 
-    const count = useForceUpdate(props);
+    useSubscribeDiffFile(props, () => (currentItemHasChange.value = currentItem.value?.diff?.isIncludeableLine()));
 
     const lineSelector = computed(() => `tr[data-line="${props.lineNumber}"]`);
 
@@ -58,9 +65,7 @@ export const DiffSplitLine = defineComponent(
     });
 
     return () => {
-      count.value;
-
-      if (currentItem.value?.isHidden) return null;
+      if (currentItemHasHidden.value) return null;
 
       const isAdded = currentItem.value?.diff?.type === DiffLineType.Add;
 
diff --git a/packages/vue/src/components/DiffUnifiedExtendLine.tsx b/packages/vue/src/components/DiffUnifiedExtendLine.tsx
new file mode 100644
index 0000000..6ef1635
--- /dev/null
+++ b/packages/vue/src/components/DiffUnifiedExtendLine.tsx
@@ -0,0 +1,71 @@
+import { computed, defineComponent, ref } from "vue";
+
+import { SplitSide } from "..";
+import { useExtendData, useSlots } from "../context";
+import { useDomWidth } from "../hooks/useDomWidth";
+import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
+
+import type { DiffFileExtends } from "../utils";
+
+export const DiffUnifiedExtendLine = defineComponent(
+  (props: { index: number; diffFile: DiffFileExtends; lineNumber: number }) => {
+    const extendData = useExtendData();
+
+    const slots = useSlots();
+
+    const unifiedItem = ref(props.diffFile.getUnifiedLine(props.index));
+
+    const oldExtend = ref(extendData.value?.oldFile?.[unifiedItem.value.oldLineNumber]);
+
+    const newExtend = ref(extendData.value?.newFile?.[unifiedItem.value.newLineNumber]);
+
+    useSubscribeDiffFile(props, (diffFile) => {
+      unifiedItem.value = diffFile.getUnifiedLine(props.index);
+    });
+
+    useSubscribeDiffFile(props, () => (oldExtend.value = extendData.value?.oldFile?.[unifiedItem.value.oldLineNumber]));
+
+    useSubscribeDiffFile(props, () => (newExtend.value = extendData.value?.newFile?.[unifiedItem.value.newLineNumber]));
+
+    const currentIsShow = computed(() =>
+      Boolean((oldExtend.value || newExtend.value) && unifiedItem.value && !unifiedItem.value.isHidden && unifiedItem.value.diff)
+    );
+
+    const width = useDomWidth({
+      selector: ref(".unified-diff-table-wrapper"),
+      enable: currentIsShow,
+    });
+
+    return () => {
+      if (!currentIsShow.value) return null;
+
+      return (
+        <tr data-line={`${props.lineNumber}-extend`} data-state="extend" class="diff-line diff-line-extend">
+          <td class="diff-line-extend-content align-top p-0" colspan={4}>
+            <div class="diff-line-extend-wrapper sticky left-0" style={{ width: width.value + "px" }}>
+              {width.value > 0 &&
+                oldExtend.value &&
+                slots.extend({
+                  diffFile: props.diffFile,
+                  side: SplitSide.old,
+                  lineNumber: unifiedItem.value.oldLineNumber,
+                  data: oldExtend.value.data,
+                  onUpdate: props.diffFile.notifyAll,
+                })}
+              {width.value > 0 &&
+                newExtend.value &&
+                slots.extend({
+                  diffFile: props.diffFile,
+                  side: SplitSide.new,
+                  lineNumber: unifiedItem.value.newLineNumber,
+                  data: newExtend.value.data,
+                  onUpdate: props.diffFile.notifyAll,
+                })}
+            </div>
+          </td>
+        </tr>
+      );
+    };
+  },
+  { name: "DiffUnifiedExtendLine", props: ["diffFile", "index", "lineNumber"] }
+);
diff --git a/packages/vue/src/components/DiffUnifiedHunkLine.tsx b/packages/vue/src/components/DiffUnifiedHunkLine.tsx
new file mode 100644
index 0000000..f850ea2
--- /dev/null
+++ b/packages/vue/src/components/DiffUnifiedHunkLine.tsx
@@ -0,0 +1,136 @@
+import { composeLen } from "@git-diff-view/core";
+import { defineComponent, ref } from "vue";
+
+import { useEnableWrap } from "../context";
+import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
+
+import { hunkContentBGName, hunkLineNumberBGName, plainLineNumberColorName } from "./color";
+import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
+
+import type { DiffFile } from "@git-diff-view/core";
+
+export const DiffUnifiedHunkLine = defineComponent(
+  (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
+    const currentHunk = ref(props.diffFile.getUnifiedHunkLine(props.index));
+
+    const enableWrap = useEnableWrap();
+
+    const currentIsShow = ref(currentHunk.value && currentHunk.value.unifiedInfo.startHiddenIndex < currentHunk.value.unifiedInfo.endHiddenIndex);
+
+    const currentIsEnableAll = ref(
+      currentHunk.value && currentHunk.value.unifiedInfo.endHiddenIndex - currentHunk.value.unifiedInfo.startHiddenIndex < composeLen
+    );
+
+    useSubscribeDiffFile(props, (diffFile) => (currentHunk.value = diffFile.getUnifiedHunkLine(props.index)));
+
+    useSubscribeDiffFile(
+      props,
+      () => (currentIsShow.value = currentHunk.value && currentHunk.value.unifiedInfo.startHiddenIndex < currentHunk.value.unifiedInfo.endHiddenIndex)
+    );
+
+    useSubscribeDiffFile(
+      props,
+      () =>
+        (currentIsEnableAll.value =
+          currentHunk.value && currentHunk.value.unifiedInfo.endHiddenIndex - currentHunk.value.unifiedInfo.startHiddenIndex < composeLen)
+    );
+
+    return () => {
+      if (!currentIsShow.value) return null;
+
+      return (
+        <tr
+          data-line={`${props.lineNumber}-hunk`}
+          data-state="hunk"
+          class="diff-line diff-line-hunk select-none"
+          style={{ backgroundColor: `var(${hunkContentBGName})` }}
+        >
+          <td
+            class="diff-line-num diff-line-num-hunk left-0 text-left select-none w-[1%] min-w-[60px] whitespace-nowrap z-[1]"
+            style={{
+              position: enableWrap.value ? "relative" : "sticky",
+              backgroundColor: `var(${hunkLineNumberBGName})`,
+              color: `var(${plainLineNumberColorName})`,
+            }}
+          >
+            {currentIsEnableAll.value ? (
+              <button
+                class="w-full hover:bg-blue-300 flex justify-center items-center py-[6px] cursor-pointer rounded-[2px]"
+                title="Expand All"
+                onClick={() => props.diffFile.onUnifiedHunkExpand("all", props.index)}
+              >
+                <ExpandAll className="fill-current" />
+              </button>
+            ) : (
+              <>
+                <button
+                  class="w-full hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]"
+                  title="Expand Down"
+                  onClick={() => props.diffFile.onUnifiedHunkExpand("down", props.index)}
+                >
+                  <ExpandDown className="fill-current" />
+                </button>
+                <button
+                  class="w-full hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]"
+                  title="Expand Up"
+                  onClick={() => props.diffFile.onUnifiedHunkExpand("up", props.index)}
+                >
+                  <ExpandUp className="fill-current" />
+                </button>
+              </>
+            )}
+          </td>
+          <td class="diff-line-content diff-line-content-hunk pr-[10px] align-middle">
+            <div
+              class="opacity-[0.5] pl-[1.5em]"
+              style={{
+                whiteSpace: enableWrap.value ? "pre-wrap" : "pre",
+                wordBreak: enableWrap.value ? "break-all" : "initial",
+              }}
+            >
+              {currentHunk.value.unifiedInfo.plainText}
+            </div>
+          </td>
+        </tr>
+      );
+    };
+  },
+  { name: "DiffUnifiedHunkLine", props: ["index", "diffFile", "lineNumber"] }
+);
+
+export const DiffUnifiedExpandLastLine = defineComponent(
+  (props: { diffFile: DiffFile }) => {
+    const currentIsShow = ref(props.diffFile.getNeedShowExpandAll("unified"));
+
+    const enableWrap = useEnableWrap();
+
+    useSubscribeDiffFile(props, (diffFile) => (currentIsShow.value = diffFile.getNeedShowExpandAll("unified")));
+
+    return () => {
+      if (!currentIsShow.value) return null;
+
+      return (
+        <tr data-line="last-hunk" data-state="hunk" class="diff-line diff-line-hunk select-none" style={{ backgroundColor: `var(${hunkContentBGName})` }}>
+          <td
+            class="diff-line-num diff-line-num-hunk left-0 text-left select-none w-[1%] min-w-[60px] whitespace-nowrap"
+            style={{
+              position: enableWrap.value ? "relative" : "sticky",
+              backgroundColor: `var(${hunkLineNumberBGName})`,
+              color: `var(${plainLineNumberColorName})`,
+            }}
+          >
+            <button
+              class="w-full hover:bg-blue-300 flex justify-center items-center py-[2px] cursor-pointer rounded-[2px]"
+              title="Expand Down"
+              onClick={() => props.diffFile.onUnifiedLastExpand()}
+            >
+              <ExpandDown className="fill-current" />
+            </button>
+          </td>
+          <td class="diff-line-content diff-line-content-hunk pr-[10px] align-middle" />
+        </tr>
+      );
+    };
+  },
+  { name: "DiffUnifiedExpandLastLine", props: ["diffFile"] }
+);
diff --git a/packages/vue/src/components/DiffUnifiedLine.tsx b/packages/vue/src/components/DiffUnifiedLine.tsx
new file mode 100644
index 0000000..f8456a3
--- /dev/null
+++ b/packages/vue/src/components/DiffUnifiedLine.tsx
@@ -0,0 +1,269 @@
+import { defineComponent, ref } from "vue";
+
+import { SplitSide } from "..";
+import { useEnableAddWidget, useEnableHighlight, useEnableWrap, useOnAddWidgetClick } from "../context";
+import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
+
+import {
+  addContentBGName,
+  addLineNumberBGName,
+  delContentBGName,
+  delLineNumberBGName,
+  expandContentBGName,
+  plainContentBGName,
+  plainLineNumberBGName,
+  plainLineNumberColorName,
+} from "./color";
+import { DiffUnifiedAddWidget } from "./DiffAddWidget";
+import { DiffContent } from "./DiffContent";
+
+import type { DiffFileExtends } from "../utils";
+import type { DiffFile, SyntaxLine, DiffLine } from "@git-diff-view/core";
+
+const DiffUnifiedOldLine = ({
+  index,
+  diffLine,
+  rawLine,
+  syntaxLine,
+  lineNumber,
+  diffFile,
+  enableWrap,
+  enableHighlight,
+  onAddWidgetClick,
+}: {
+  index: number;
+  lineNumber: number;
+  rawLine: string;
+  syntaxLine?: SyntaxLine;
+  diffLine?: DiffLine;
+  diffFile: DiffFile;
+  enableWrap: boolean;
+  enableHighlight: boolean;
+  onAddWidgetClick?: (event: "onAddWidgetClick", lineNumber: number, side: SplitSide) => void;
+}) => {
+  return (
+    <tr data-line={index} data-state="diff" data-mode="del" class="diff-line group" style={{ backgroundColor: `var(${delContentBGName})` }}>
+      <td
+        class="diff-line-num left-0 pl-[10px] pr-[10px] text-left select-none w-[1%] min-w-[60px] whitespace-nowrap align-top"
+        style={{
+          position: enableWrap ? "relative" : "sticky",
+          color: `var(${plainLineNumberColorName})`,
+          backgroundColor: `var(${delLineNumberBGName})`,
+        }}
+      >
+        <DiffUnifiedAddWidget
+          index={index - 1}
+          lineNumber={lineNumber}
+          diffFile={diffFile as DiffFileExtends}
+          side={SplitSide.old}
+          onWidgetClick={onAddWidgetClick}
+        />
+        <div class="flex">
+          <span data-line-num-old={lineNumber} class="inline-block w-[50%]">
+            {lineNumber}
+          </span>
+          <span class="w-[10px] shrink-0" />
+          <span class="inline-block w-[50%]" />
+        </div>
+      </td>
+      <td class="diff-line-content pr-[10px] align-top">
+        <DiffContent
+          enableWrap={enableWrap}
+          diffFile={diffFile}
+          enableHighlight={enableHighlight}
+          rawLine={rawLine}
+          diffLine={diffLine}
+          syntaxLine={syntaxLine}
+        />
+      </td>
+    </tr>
+  );
+};
+
+const DiffUnifiedNewLine = ({
+  index,
+  diffLine,
+  rawLine,
+  syntaxLine,
+  lineNumber,
+  diffFile,
+  enableWrap,
+  enableHighlight,
+  onAddWidgetClick,
+}: {
+  index: number;
+  lineNumber: number;
+  rawLine: string;
+  syntaxLine?: SyntaxLine;
+  diffLine?: DiffLine;
+  diffFile: DiffFile;
+  enableWrap: boolean;
+  enableHighlight: boolean;
+  onAddWidgetClick?: (event: "onAddWidgetClick", lineNumber: number, side: SplitSide) => void;
+}) => {
+  return (
+    <tr data-line={index} data-state="diff" data-mode="add" class="diff-line group" style={{ backgroundColor: `var(${addContentBGName})` }}>
+      <td
+        class="diff-line-num left-0 pl-[10px] pr-[10px] text-left select-none w-[1%] min-w-[60px] whitespace-nowrap align-top"
+        style={{
+          position: enableWrap ? "relative" : "sticky",
+          color: `var(${plainLineNumberColorName})`,
+          backgroundColor: `var(${addLineNumberBGName})`,
+        }}
+      >
+        <DiffUnifiedAddWidget
+          index={index - 1}
+          lineNumber={lineNumber}
+          diffFile={diffFile as DiffFileExtends}
+          side={SplitSide.new}
+          onWidgetClick={onAddWidgetClick}
+        />
+        <div class="flex">
+          <span class="inline-block w-[50%]" />
+          <span class="shrink-0 w-[10px]" />
+          <span data-line-num-new={lineNumber} class="inline-block w-[50%]">
+            {lineNumber}
+          </span>
+        </div>
+      </td>
+      <td class="diff-line-content pr-[10px] align-top">
+        <DiffContent
+          enableWrap={enableWrap}
+          diffFile={diffFile}
+          enableHighlight={enableHighlight}
+          rawLine={rawLine}
+          diffLine={diffLine}
+          syntaxLine={syntaxLine}
+        />
+      </td>
+    </tr>
+  );
+};
+
+export const DiffUnifiedLine = defineComponent(
+  (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
+    const unifiedItem = ref(props.diffFile.getUnifiedLine(props.index));
+
+    const enableWrap = useEnableWrap();
+
+    const onAddWidgetClick = useOnAddWidgetClick();
+
+    const enableHighlight = useEnableHighlight();
+
+    const enableAddWidget = useEnableAddWidget();
+
+    const currentItemHasHidden = ref(unifiedItem.value?.isHidden);
+
+    const currentItemHasChange = ref(unifiedItem.value?.diff?.isIncludeableLine());
+
+    const currentSyntaxItem = ref(
+      unifiedItem.value?.newLineNumber
+        ? props.diffFile.getNewSyntaxLine(unifiedItem.value.newLineNumber)
+        : unifiedItem.value?.oldLineNumber
+          ? props.diffFile.getOldSyntaxLine(unifiedItem.value.oldLineNumber)
+          : undefined
+    );
+
+    useSubscribeDiffFile(props, (diffFile) => (unifiedItem.value = diffFile.getUnifiedLine(props.index)));
+
+    useSubscribeDiffFile(props, () => (currentItemHasHidden.value = unifiedItem.value?.isHidden));
+
+    useSubscribeDiffFile(props, () => (currentItemHasChange.value = unifiedItem.value?.diff?.isIncludeableLine()));
+
+    useSubscribeDiffFile(
+      props,
+      (diffFile) =>
+        (currentSyntaxItem.value = unifiedItem.value?.newLineNumber
+          ? diffFile.getNewSyntaxLine(unifiedItem.value.newLineNumber)
+          : unifiedItem.value?.oldLineNumber
+            ? diffFile.getOldSyntaxLine(unifiedItem.value.oldLineNumber)
+            : undefined)
+    );
+
+    return () => {
+      if (currentItemHasHidden.value) return null;
+
+      if (currentItemHasChange.value) {
+        if (unifiedItem.value.oldLineNumber) {
+          return (
+            <DiffUnifiedOldLine
+              index={props.lineNumber}
+              enableWrap={enableWrap.value}
+              diffFile={props.diffFile}
+              rawLine={unifiedItem.value.value || ""}
+              diffLine={unifiedItem.value.diff}
+              syntaxLine={currentSyntaxItem.value}
+              enableHighlight={enableHighlight.value}
+              lineNumber={unifiedItem.value.oldLineNumber}
+              onAddWidgetClick={onAddWidgetClick}
+            />
+          );
+        } else {
+          return (
+            <DiffUnifiedNewLine
+              index={props.lineNumber}
+              enableWrap={enableWrap.value}
+              diffFile={props.diffFile}
+              rawLine={unifiedItem.value.value || ""}
+              diffLine={unifiedItem.value.diff}
+              syntaxLine={currentSyntaxItem.value}
+              enableHighlight={enableHighlight.value}
+              lineNumber={unifiedItem.value.newLineNumber!}
+              onAddWidgetClick={onAddWidgetClick}
+            />
+          );
+        }
+      } else {
+        return (
+          <tr
+            data-line={props.lineNumber}
+            data-state={unifiedItem.value.diff ? "diff" : "plain"}
+            class="diff-line group"
+            style={{
+              backgroundColor: unifiedItem.value.diff ? `var(${plainContentBGName})` : `var(${expandContentBGName})`,
+            }}
+          >
+            <td
+              class="diff-line-num left-0 pl-[10px] pr-[10px] text-left select-none w-[1%] min-w-[60px] whitespace-nowrap align-top"
+              style={{
+                position: enableWrap.value ? "relative" : "sticky",
+                color: `var(${plainLineNumberColorName})`,
+                backgroundColor: unifiedItem.value.diff ? `var(${plainLineNumberBGName})` : `var(${expandContentBGName})`,
+              }}
+            >
+              {enableAddWidget.value && unifiedItem.value.diff && (
+                <DiffUnifiedAddWidget
+                  index={props.index}
+                  diffFile={props.diffFile as DiffFileExtends}
+                  lineNumber={unifiedItem.value.newLineNumber}
+                  side={SplitSide.new}
+                  onWidgetClick={onAddWidgetClick}
+                />
+              )}
+              <div class="flex opacity-[0.5]">
+                <span data-line-num-old={unifiedItem.value.oldLineNumber} class="inline-block w-[50%]">
+                  {unifiedItem.value.oldLineNumber}
+                </span>
+                <span class="w-[10px] shrink-0" />
+                <span data-line-num-new={unifiedItem.value.newLineNumber} class="inline-block w-[50%]">
+                  {unifiedItem.value.newLineNumber}
+                </span>
+              </div>
+            </td>
+            <td class="diff-line-content pr-[10px] align-top">
+              <DiffContent
+                enableWrap={enableWrap.value}
+                diffFile={props.diffFile}
+                enableHighlight={enableHighlight.value}
+                rawLine={unifiedItem.value.value || ""}
+                diffLine={unifiedItem.value.diff}
+                syntaxLine={currentSyntaxItem.value}
+              />
+            </td>
+          </tr>
+        );
+      }
+    };
+  },
+  { name: "DiffUnifiedLine", props: ["diffFile", "index", "lineNumber"] }
+);
diff --git a/packages/vue/src/components/DiffUnifiedView.tsx b/packages/vue/src/components/DiffUnifiedView.tsx
new file mode 100644
index 0000000..aff4f67
--- /dev/null
+++ b/packages/vue/src/components/DiffUnifiedView.tsx
@@ -0,0 +1,50 @@
+import { numIterator } from "@git-diff-view/core";
+import { Fragment } from "vue";
+
+import { DiffUnifiedExtendLine } from "./DiffUnifiedExtendLine";
+import { DiffUnifiedExpandLastLine, DiffUnifiedHunkLine } from "./DiffUnifiedHunkLine";
+import { DiffUnifiedLine } from "./DiffUnifiedLine";
+import { DiffUnifiedWidgetLine } from "./DiffUnifiedWidgetLine";
+
+import type { DiffFileExtends } from "../utils";
+import type { DiffFile } from "@git-diff-view/core";
+
+export const DiffUnifiedView = ({ diffFile }: { diffFile: DiffFile }) => {
+  const unifiedLineLength = diffFile.unifiedLineLength;
+
+  return (
+    <div class="unified-diff-view w-full">
+      <div class="unified-diff-table-wrapper overflow-auto w-full">
+        <table class="unified-diff-table border-collapse w-full">
+          <colgroup>
+            <col class="unified-diff-table-num-col" />
+            <col class="unified-diff-table-content-col" />
+          </colgroup>
+          <thead class="hidden">
+            <tr>
+              <th scope="col">line number</th>
+              <th scope="col">line content</th>
+            </tr>
+          </thead>
+          <tbody
+            class="leading-[1.4]"
+            style={{
+              fontFamily: "Menlo, Consolas, monospace",
+              fontSize: "var(--diff-font-size--)",
+            }}
+          >
+            {numIterator(unifiedLineLength, (index) => (
+              <Fragment key={index}>
+                <DiffUnifiedHunkLine index={index} lineNumber={index + 1} diffFile={diffFile} />
+                <DiffUnifiedLine index={index} lineNumber={index + 1} diffFile={diffFile} />
+                <DiffUnifiedWidgetLine index={index} lineNumber={index + 1} diffFile={diffFile as DiffFileExtends} />
+                <DiffUnifiedExtendLine index={index} lineNumber={index + 1} diffFile={diffFile as DiffFileExtends} />
+              </Fragment>
+            ))}
+            <DiffUnifiedExpandLastLine diffFile={diffFile} />
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/vue/src/components/DiffUnifiedWidgetLine.tsx b/packages/vue/src/components/DiffUnifiedWidgetLine.tsx
new file mode 100644
index 0000000..7365818
--- /dev/null
+++ b/packages/vue/src/components/DiffUnifiedWidgetLine.tsx
@@ -0,0 +1,71 @@
+import { computed, defineComponent, ref } from "vue";
+
+import { SplitSide } from "..";
+import { useSlots } from "../context";
+import { useDomWidth } from "../hooks/useDomWidth";
+import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
+
+import type { DiffFileExtends } from "../utils";
+
+export const DiffUnifiedWidgetLine = defineComponent(
+  (props: { index: number; diffFile: DiffFileExtends; lineNumber: number }) => {
+    const slots = useSlots();
+
+    const unifiedItem = ref(props.diffFile.getUnifiedLine(props.index));
+
+    const oldWidget = ref(unifiedItem.value?.oldLineNumber ? props.diffFile.checkWidgetLine(unifiedItem.value.oldLineNumber, SplitSide.old) : undefined);
+
+    const newWidget = ref(unifiedItem.value?.newLineNumber ? props.diffFile.checkWidgetLine(unifiedItem.value.newLineNumber, SplitSide.new) : undefined);
+
+    useSubscribeDiffFile(props, (diffFile) => (unifiedItem.value = diffFile.getUnifiedLine(props.index)));
+
+    useSubscribeDiffFile(
+      props,
+      (diffFile: DiffFileExtends) =>
+        (oldWidget.value = unifiedItem.value?.oldLineNumber ? diffFile.checkWidgetLine(unifiedItem.value.oldLineNumber, SplitSide.old) : undefined)
+    );
+
+    useSubscribeDiffFile(
+      props,
+      (diffFile: DiffFileExtends) =>
+        (newWidget.value = unifiedItem.value?.newLineNumber ? diffFile.checkWidgetLine(unifiedItem.value.newLineNumber, SplitSide.new) : undefined)
+    );
+
+    const currentIsShow = computed(() => oldWidget.value || newWidget.value);
+
+    const width = useDomWidth({
+      selector: ref(".unified-diff-table-wrapper"),
+      enable: currentIsShow,
+    });
+
+    return () => {
+      if (!currentIsShow.value) return null;
+
+      return (
+        <tr data-state="widget" class="diff-line diff-line-widget">
+          <td class="diff-line-widget-content p-0" colspan={4}>
+            <div class="diff-line-widget-wrapper sticky left-0" style={{ width: width.value + "px" }}>
+              {width.value > 0 &&
+                oldWidget.value &&
+                slots.widget?.({
+                  diffFile: props.diffFile,
+                  side: SplitSide.old,
+                  lineNumber: unifiedItem.value.oldLineNumber,
+                  onClose: props.diffFile.onCloseAddWidget,
+                })}
+              {width.value > 0 &&
+                newWidget.value &&
+                slots.widget?.({
+                  diffFile: props.diffFile,
+                  side: SplitSide.new,
+                  lineNumber: unifiedItem.value.newLineNumber,
+                  onClose: props.diffFile.onCloseAddWidget,
+                })}
+            </div>
+          </td>
+        </tr>
+      );
+    };
+  },
+  { name: "DiffUnifiedWidgetLine", props: ["diffFile", "index", "lineNumber"] }
+);
diff --git a/packages/vue/src/components/DiffView.tsx b/packages/vue/src/components/DiffView.tsx
index 2989e32..74f28bb 100644
--- a/packages/vue/src/components/DiffView.tsx
+++ b/packages/vue/src/components/DiffView.tsx
@@ -16,13 +16,14 @@ import { useProvide } from "../hooks/useProvide";
 import { DiffFileExtends } from "../utils";
 
 import { DiffSplitView } from "./DiffSplitView";
+import { DiffUnifiedView } from "./DiffUnifiedView";
 
 import type { DiffFile, highlighter } from "@git-diff-view/core";
 import type { CSSProperties, SlotsType } from "vue";
 
 export enum DiffModeEnum {
-  Split,
-  Unified,
+  Split = 1,
+  Unified = 2,
 }
 
 export enum SplitSide {
@@ -136,7 +137,11 @@ export const DiffView = defineComponent<DiffViewProps<any>, { onAddWidgetClick:
     return () => (
       <div class="diff-style-root" style={{ [diffFontSizeName]: props.diffViewFontSize + "px" }}>
         <div id={`diff-root${id.value}`} class={"diff-view-wrapper" + (props.class ? ` ${props.class}` : "")} style={props.style}>
-          <DiffSplitView diffFile={diffFile.value as DiffFile} />
+          {!props.diffViewMode || props.diffViewMode === DiffModeEnum.Split ? (
+            <DiffSplitView diffFile={diffFile.value as DiffFile} />
+          ) : (
+            <DiffUnifiedView diffFile={diffFile.value as DiffFile} />
+          )}
         </div>
       </div>
     );
diff --git a/packages/vue/src/hooks/useSubscribeDiffFile.ts b/packages/vue/src/hooks/useSubscribeDiffFile.ts
index 87b7a93..b6a2da5 100644
--- a/packages/vue/src/hooks/useSubscribeDiffFile.ts
+++ b/packages/vue/src/hooks/useSubscribeDiffFile.ts
@@ -6,6 +6,8 @@ export const useSubscribeDiffFile = (props: { diffFile: DiffFile }, onUpdate: (i
   const initSubscribe = (onClean: (cb: () => void) => void) => {
     const diffFile = props.diffFile;
 
+    onUpdate(diffFile);
+
     const clean = diffFile.subscribe(() => onUpdate(diffFile));
 
     onClean(clean);
diff --git a/ui/vue-example/src/App.vue b/ui/vue-example/src/App.vue
index 5837384..6a1c68c 100644
--- a/ui/vue-example/src/App.vue
+++ b/ui/vue-example/src/App.vue
@@ -1,19 +1,75 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { b } from './data'
-import { DiffView, DiffViewProps, SplitSide } from '@git-diff-view/vue';
+import { computed, ref, watch } from 'vue';
+import * as data from './data'
+import { DiffModeEnum, DiffView, DiffViewProps, SplitSide } from '@git-diff-view/vue';
+
+type Key = 'a' | 'b' | 'c' | 'd' | 'e'
+
+const highlight = ref(true);
+
+const wrap = ref(true);
+
+const mode = ref(DiffModeEnum.Split);
+
+const toggleHighlight = () => highlight.value = !highlight.value;
+
+const toggleWrap = () => wrap.value = !wrap.value;
+
+const toggleMode = () => {
+  mode.value = mode.value === DiffModeEnum.Split ? DiffModeEnum.Unified : DiffModeEnum.Split
+}
+
+const k = ref<Key>('a');
 
 const v = ref('');
 
+const _data = computed(() => data[k.value]);
+
 const extendData = ref<DiffViewProps<any>['extendData']>({ oldFile: {}, newFile: {} });
 
+watch(_data, () => {
+  extendData.value = { oldFile: {}, newFile: {} };
+});
+
 const resetV = () => v.value = ''
 </script>
 
 <template>
+  <div class="w-[90%] m-auto mb-[1em] mt-[1em]">
+    <h2 class=" text-[24px]">
+      A Vue component to show the file diff (just like github) <span class="text-red-500"> (🚧 wip) </span>
+    </h2>
+    <br />
+    <p>
+      Select a file to show the diff: &nbsp;
+      <select class="border rounded-sm" v-model="k">
+        <option value="a">diff 1</option>
+        <option value="b">diff 2</option>
+        <option value="c">diff 3</option>
+        <option value="d">diff 4</option>
+        <option value="e">diff 5</option>
+      </select>
+    </p>
+  </div>
+  <div class="w-[90%] m-auto mb-[1em] text-right">
+    <div class="inline-flex gap-x-4">
+      <button class="bg-sky-500 hover:bg-sky-700 px-5 py-2 text-sm leading-5 rounded-full font-semibold text-white"
+        @click="toggleWrap">
+        {{ wrap ? "Toggle to nowrap" : "Toggle to wrap" }}
+      </button>
+      <button class="bg-sky-500 hover:bg-sky-700 px-5 py-2 text-sm leading-5 rounded-full font-semibold text-white"
+        @click="toggleHighlight">
+        {{ highlight ? "Toggle to disable highlight" : "Toggle to enable highlight" }}
+      </button>
+      <button class="bg-sky-500 hover:bg-sky-700 px-5 py-2 text-sm leading-5 rounded-full font-semibold text-white"
+        @click="toggleMode">
+        {{ mode === DiffModeEnum.Split ? "Toggle to UnifiedMode" : "Toggle to SplitMode" }}
+      </button>
+    </div>
+  </div>
   <div class="w-[90%] m-auto border border-[grey] border-solid rounded-[5px] overflow-hidden mb-[5em]">
-    <DiffView :data="b" :diff-view-font-size="14" :diff-view-highlight="true" :diff-view-add-widget="true"
-      :diff-view-wrap="true" @on-add-widget-click="resetV" :extend-data="extendData">
+    <DiffView :data="_data" :diff-view-font-size="14" :diff-view-mode="mode" :diff-view-highlight="highlight"
+      :diff-view-add-widget="true" :diff-view-wrap="wrap" @on-add-widget-click="resetV" :extend-data="extendData">
       <template #widget="{ onClose, lineNumber, side }">
         <div class="border flex flex-col w-full px-[4px] py-[8px]">
           <textarea class="w-full border min-h-[80px] p-[2px]" v-model="v" />
@@ -36,8 +92,8 @@ const resetV = () => v.value = ''
         </div>
       </template>
       <template #extend="{ data }">
-        <div className="border flex px-[10px] py-[8px] bg-slate-400">
-          <h2 className="text-[20px]">
+        <div class="border flex px-[10px] py-[8px] bg-slate-400">
+          <h2 class="text-[20px]">
             >> {{ data }}
           </h2>
         </div>