Cleanup diff html.

Damnae · Apr 12, 2024 · ce2a311 · ce2a311
1 parent edbdad6
commit ce2a311
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 46 deletions.
diff --git a/src/views/diff/AnyDiff.vue b/src/views/diff/AnyDiff.vue
@@ -3,13 +3,13 @@
   import ObjectDiff from '@/views/diff/ObjectDiff.vue';
   import ArrayDiff from '@/views/diff/ArrayDiff.vue';
   import ValueDiff from '@/views/diff/ValueDiff.vue';
-  defineProps<{diffNode:DiffNode, prefix?:string}>()
+  defineProps<{diffNode:DiffNode, prefix?:string|number}>()
 </script>
 
 <template>
   <span :class="`diff-node change-${diffNode.Change}`" :title="`${diffNode.Change} ${diffNode.Type}`">
     <template v-if="prefix">
-      {{ prefix }}
+      {{ prefix }}: 
     </template>
 
     <template v-if="diffNode.Type == DiffNodeType.Value">

diff --git a/src/views/diff/AnyPlain.vue b/src/views/diff/AnyPlain.vue
@@ -1,24 +1,24 @@
 <script setup lang="ts">
-  defineProps<{value:any, prefix?:string}>()
+  defineProps<{value:any, prefix?:string|number}>()
 </script>
 
 <template>
-  <span class="diff-node">
+  <span class="diff-node plain">
     <template v-if="prefix">
-      {{ prefix }}
+      {{ prefix }}: 
     </template>
 
     <span class="diff-array" v-if="Array.isArray(value)">
       [
         <span class="array-item block" v-for="entry, _key in value">
-          <AnyPlain :value="entry"  />
+          <AnyPlain :value="entry" />
         </span>
       ]
     </span>
     <span class="diff-object" v-else-if="typeof value === 'object'">
       {
         <span class="object-item block" v-for="entry, key in value">
-          <AnyPlain :value="entry" :prefix="`${key}: `" />
+          <AnyPlain :value="entry" :prefix="key" />
         </span>
       }
     </span>

diff --git a/src/views/diff/ArrayDiff.vue b/src/views/diff/ArrayDiff.vue
@@ -8,21 +8,19 @@
 </script>
 
 <template>
-  <span class="diff-array">
-    <template v-if="values && values.length > 0">
-      [
-        <span class="array-item block" v-for="node, _key in values">
-          <AnyDiff :diffNode="node" />
-        </span>
-      ]
-    </template>
-    <span class="array-item" v-else-if="diffNode.Change == DiffNodeChange.Removed">
-      <AnyPlain :value="diffNode.FromValue" />
-    </span>
-    <span class="array-item" v-else>
-      <AnyPlain :value="diffNode.ToValue" />
-    </span>
+  <span class="diff-array" v-if="values && values.length > 0">
+    [
+      <span class="array-item block" v-for="node, _key in values">
+        <AnyDiff :diffNode="node" />
+      </span>
+    ]
   </span>
+  <template v-else-if="diffNode.Change == DiffNodeChange.Removed">
+    <AnyPlain :value="diffNode.FromValue" />
+  </template>
+  <template v-else>
+    <AnyPlain :value="diffNode.ToValue" />
+  </template>
 </template>
 
 <style scoped>

diff --git a/src/views/diff/ObjectDiff.vue b/src/views/diff/ObjectDiff.vue
@@ -8,21 +8,19 @@
 </script>
 
 <template>
-  <span class="diff-object">
-    <template v-if="properties && Object.keys(properties).length > 0">
-      {
-        <span class="object-item block" v-for="node, key in properties">
-          <AnyDiff :diffNode="node" :prefix="`${key}: `" />
-        </span>
-      }
-    </template>
-    <span class="object-item" v-else-if="diffNode.Change == DiffNodeChange.Removed">
-      <AnyPlain :value="diffNode.FromValue" />
-    </span>
-    <span class="object-item" v-else>
-      <AnyPlain :value="diffNode.ToValue" />
-    </span>
+  <span class="diff-object" v-if="properties && Object.keys(properties).length > 0">
+    {
+      <span class="object-item block" v-for="node, key in properties">
+        <AnyDiff :diffNode="node" :prefix="key" />
+      </span>
+    }
   </span>
+  <template v-else-if="diffNode.Change == DiffNodeChange.Removed">
+    <AnyPlain :value="diffNode.FromValue" />
+  </template>
+  <template v-else>
+    <AnyPlain :value="diffNode.ToValue" />
+  </template>
 </template>
 
 <style scoped>

diff --git a/src/views/diff/ValueDiff.vue b/src/views/diff/ValueDiff.vue
@@ -5,17 +5,15 @@
 </script>
 
 <template>
-  <span class="diff-value">
-    <template v-if="diffNode.Change == DiffNodeChange.Replaced">
-      <span class="change-Removed">{{ diffNode.FromValue }}</span> <span class="change-Added">{{ diffNode.ToValue }}</span>
-    </template>
-    <template v-else-if="diffNode.Change == DiffNodeChange.Removed">
-      <AnyPlain :value="diffNode.FromValue" />
-    </template>
-    <template v-else>
-      <AnyPlain :value="diffNode.ToValue" />
-    </template>
+  <span class="diff-value" v-if="diffNode.Change == DiffNodeChange.Replaced">
+    <span class="change-Removed">{{ diffNode.FromValue }}</span> <span class="change-Added">{{ diffNode.ToValue }}</span>
   </span>
+  <template v-else-if="diffNode.Change == DiffNodeChange.Removed">
+    <AnyPlain :value="diffNode.FromValue" />
+  </template>
+  <template v-else>
+    <AnyPlain :value="diffNode.ToValue" />
+  </template>
 </template>
 
 <style scoped>

diff --git a/src/views/diff/diff.ts b/src/views/diff/diff.ts
@@ -1,4 +1,3 @@
-import translate from "@/common/translate"
 
 export enum DiffNodeType
 {