@git-diff-view/vue - npm Package Compare versions

Comparing version 0.0.31 to 0.0.32

dist/css/diff-view-pure.css

@@ -50,5 +50,2 @@ .diff-tailwindcss-wrapper .container {
 }
-.diff-tailwindcss-wrapper .top-\[1px\] {
-  top: 1px;
-}
 .diff-tailwindcss-wrapper .z-\[1\] {
@@ -55,0 +52,0 @@ z-index: 1;

dist/css/diff-view.css

@@ -556,5 +556,2 @@ *, ::before, ::after {
 }
-.diff-tailwindcss-wrapper .top-\[1px\] {
-  top: 1px;
-}
 .diff-tailwindcss-wrapper .z-\[1\] {
@@ -561,0 +558,0 @@ z-index: 1;

package.json

@@ -6,3 +6,3 @@ {
   "license": "MIT",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "main": "./dist/vue-git-diff-view.mjs",
@@ -38,3 +38,3 @@ "type": "module",
   "dependencies": {
-    "@git-diff-view/core": "^0.0.31",
+    "@git-diff-view/core": "^0.0.32",
     "@types/hast": "^3.0.0",
@@ -41,0 +41,0 @@ "highlight.js": "^11.11.0",

src/components/DiffAddWidget.tsx

@@ -31,2 +31,3 @@ import { addWidgetBGName, addWidgetColorName, diffFontSizeName } from "@git-diff-view/utils";
         height: `calc(var(${diffFontSizeName}) * 1.4)`,
+        top: `calc(var(${diffFontSizeName}) * 0.1)`,
       }}
@@ -66,6 +67,7 @@ >
     <div
-      class="diff-add-widget-wrapper invisible absolute left-[100%] top-[1px] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible"
+      class="diff-add-widget-wrapper invisible absolute left-[100%] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible"
       style={{
         width: `calc(var(${diffFontSizeName}) * 1.4)`,
         height: `calc(var(${diffFontSizeName}) * 1.4)`,
+        top: `calc(var(${diffFontSizeName}) * 0.1)`,
       }}
@@ -72,0 +74,0 @@ >

src/components/DiffUnifiedExtendLine.tsx

 import { computed, defineComponent, ref } from "vue";
 
 import { SplitSide } from "..";
-import { useExtendData, useSlots } from "../context";
+import { useEnableWrap, useExtendData, useSlots } from "../context";
 import { useDomWidth } from "../hooks/useDomWidth";
@@ -15,2 +15,4 @@
 
+    const enableWrap = useEnableWrap();
+
     const unifiedItem = computed(() => props.diffFile.getUnifiedLine(props.index));
@@ -40,3 +42,3 @@
             <div class="diff-line-extend-wrapper sticky left-0 z-[1]" style={{ width: width.value + "px" }}>
-              {width.value > 0 &&
+              {(enableWrap.value ? true : width.value > 0) &&
                 oldExtend.value &&
@@ -50,3 +52,3 @@ slots.extend({
                 })}
-              {width.value > 0 &&
+              {(enableWrap.value ? true : width.value > 0) &&
                 newExtend.value &&
@@ -53,0 +55,0 @@ slots.extend({

src/components/DiffUnifiedWidgetLine.tsx

 import { computed, defineComponent, ref } from "vue";
 
 import { SplitSide } from "..";
-import { useSetWidget, useSlots, useWidget } from "../context";
+import { useEnableWrap, useSetWidget, useSlots, useWidget } from "../context";
 import { useDomWidth } from "../hooks/useDomWidth";
@@ -17,2 +17,4 @@
 
+    const enableWrap = useEnableWrap();
+
     const unifiedItem = computed(() => props.diffFile.getUnifiedLine(props.index));
@@ -54,3 +56,3 @@
             <div class="diff-line-widget-wrapper sticky left-0 z-[1]" style={{ width: width.value + "px" }}>
-              {width.value > 0 &&
+              {(enableWrap.value ? true : width.value > 0) &&
                 oldWidget.value &&
@@ -63,3 +65,3 @@ slots.widget?.({
                 })}
-              {width.value > 0 &&
+              {(enableWrap.value ? true : width.value > 0) &&
                 newWidget.value &&
@@ -66,0 +68,0 @@ slots.widget?.({

src/components/DiffView.tsx

@@ -18,2 +18,3 @@ import { DiffFile, _cacheMap, SplitSide } from "@git-diff-view/core";
   mountedSymbol,
+  domSymbol,
 } from "../context";
@@ -209,2 +210,4 @@ import { useIsMounted } from "../hooks/useIsMounted";
 
+    provide(domSymbol, wrapperRef);
+
     provide(mountedSymbol, isMounted);
@@ -211,0 +214,0 @@

src/context/inject.ts

 import { inject } from "vue";
 
 import {
+  domSymbol,
   enableAddWidgetSymbol,
@@ -20,2 +21,4 @@ enableHighlightSymbol,
 
+export const useDom = () => inject(domSymbol);
+
 export const useMode = () => inject(modeSymbol);
@@ -22,0 +25,0 @@

src/context/provider.ts

@@ -7,2 +7,4 @@ import type { DiffModeEnum, SplitSide } from "..";
 
+export const domSymbol: InjectionKey<Ref<HTMLElement>> = Symbol();
+
 export const mountedSymbol: InjectionKey<Ref<boolean>> = Symbol();
@@ -9,0 +11,0 @@

src/hooks/useDomWidth.ts

@@ -0,4 +1,5 @@
+import { getElementRoot } from "@git-diff-view/utils";
 import { ref, watchPostEffect } from "vue";
 
-import { useId, useIsMounted } from "../context";
+import { useDom, useId, useIsMounted } from "../context";
 
@@ -15,2 +16,4 @@ import type { Ref } from "vue";
 
+  const dom = useDom();
+
   const mounted = useIsMounted();
@@ -24,4 +27,6 @@
     if (enable.value) {
-      const container = document.querySelector(`#diff-root${id.value}`);
+      const rootDocument = getElementRoot(dom.value);
 
+      const container = rootDocument.querySelector(`#diff-root${id.value}`);
+
       const wrapper = container?.querySelector(selector.value);
@@ -28,0 +33,0 @@

src/hooks/useSyncHeight.ts

@@ -0,4 +1,5 @@
+import { getElementRoot } from "@git-diff-view/utils";
 import { type Ref, watchPostEffect } from "vue";
 
-import { useId, useIsMounted } from "../context";
+import { useDom, useId, useIsMounted } from "../context";
 
@@ -21,2 +22,4 @@ import type { ObserveElement } from "./useDomWidth";
 
+  const dom = useDom();
+
   const isMounted = useIsMounted();
@@ -30,4 +33,6 @@
 
-      const container = document.querySelector(`#diff-root${id.value}`);
+      const rootDocument = getElementRoot(dom.value);
 
+      const container = rootDocument.querySelector(`#diff-root${id.value}`);
+
       const elements = Array.from(container?.querySelectorAll(selector.value) || []);
@@ -34,0 +39,0 @@

styles/diff-view-pure.css

@@ -50,5 +50,2 @@ .diff-tailwindcss-wrapper .container {
 }
-.diff-tailwindcss-wrapper .top-\[1px\] {
-  top: 1px;
-}
 .diff-tailwindcss-wrapper .z-\[1\] {
@@ -55,0 +52,0 @@ z-index: 1;

styles/diff-view.css

@@ -556,5 +556,2 @@ *, ::before, ::after {
 }
-.diff-tailwindcss-wrapper .top-\[1px\] {
-  top: 1px;
-}
 .diff-tailwindcss-wrapper .z-\[1\] {
@@ -561,0 +558,0 @@ z-index: 1;

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1075123

0.56%

Lines of code

12968

0.35%

Dependency changes

• + Added

  @git-diff-view/core@0.0.32
  (transitive)

• + Added

  @git-diff-view/lowlight@0.0.32
  (transitive)

• - Removed

  @git-diff-view/core@0.0.31
  (transitive)

• - Removed

  @git-diff-view/lowlight@0.0.31
  (transitive)

• Updated

  @git-diff-view/core@^0.0.32