refactor: replace class binding with inline style for focus color in …

…OverlapCard, RuleCard, and SearchCard
gkd-kit · Nov 8, 2024 · 878d466 · 878d466
1 parent 9469730
commit 878d466
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/src/views/snapshot/OverlapCard.vue b/src/views/snapshot/OverlapCard.vue
@@ -38,7 +38,9 @@ const left = _1vw * 25.5;
           :key="resultNode.id"
           @click="snapshotStore.updateFocusNode(resultNode)"
           size="small"
-          :class="{ 'color-[#00F]': resultNode === focusNode }"
+          :style="{
+            color: resultNode === focusNode ? '#00F' : undefined,
+          }"
         >
           {{ getNodeLabel(resultNode) }}
         </NButton>

diff --git a/src/views/snapshot/RuleCard.vue b/src/views/snapshot/RuleCard.vue
@@ -184,8 +184,8 @@ const targetNode = computed(() => {
           v-else-if="targetNode"
           @click="snapshotStore.updateFocusNode(targetNode)"
           size="small"
-          :class="{
-            'color-[#00F]': targetNode === focusNode,
+          :style="{
+            color: targetNode === focusNode ? '#00F' : undefined,
           }"
         >
           {{ getNodeLabel(targetNode) }}

diff --git a/src/views/snapshot/SearchCard.vue b/src/views/snapshot/SearchCard.vue
@@ -371,7 +371,9 @@ const shareResult = (result: SearchResult) => {
                 :key="resultNode.id"
                 @click="updateFocusNode(resultNode)"
                 size="small"
-                :class="{ 'color-[#00F]': resultNode === focusNode }"
+                :style="{
+                  color: resultNode === focusNode ? '#00F' : undefined,
+                }"
               >
                 {{ getNodeLabel(resultNode) }}
               </NButton>
@@ -406,9 +408,11 @@ const shareResult = (result: SearchResult) => {
                     updateFocusNode(trackNodes[result.selector.targetIndex])
                   "
                   size="small"
-                  :class="{
-                    'color-[#00F]':
-                      trackNodes[result.selector.targetIndex] === focusNode,
+                  :style="{
+                    color:
+                      trackNodes[result.selector.targetIndex] === focusNode
+                        ? '#00F'
+                        : undefined,
                   }"
                 >
                   {{ getNodeLabel(trackNodes[result.selector.targetIndex]) }}