refactor(Values): Use data-attribute for ignored elements on blur

Author: robinsimonklein

src/components/core/value-tree/form/ValueTreeArrayForm.vue

@@ -6,7 +6,7 @@
         marginLeft: `${(level + 1) * 16}px`,
       }"
     />
-    <form v-if="isFormVisible" class="flex shrink-0 items-center font-mono text-sm">
+    <div v-if="isFormVisible" class="flex shrink-0 items-center font-mono text-sm">
       <span class="select-none">
         <span class="text-code-navy opacity-50">{{ index }}</span>
         <span class="ml-0.5 text-muted-foreground">:</span>
@@ -29,20 +29,14 @@
         </span>
       </div>
       <div class="ml-2 inline-flex shrink-0 items-center gap-x-1">
-        <Button
-          :id="`value-save-${index}-${level}`"
-          ref="saveButton"
-          size="icon-sm"
-          variant="secondary"
-          @click.stop="save"
-        >
+        <Button ref="saveButton" data-ignore-blur size="icon-sm" variant="secondary" @click.stop="save">
           <Check class="h-3.5 w-3.5" />
         </Button>
         <Button ref="cancelButton" size="icon-sm" variant="secondary" @click.stop="cancel">
           <XIcon class="h-3.5 w-3.5" />
         </Button>
       </div>
-    </form>
+    </div>
     <Button v-else size="icon-sm" variant="ghost" @click="showForm">
       <Plus class="h-3.5 w-3.5" />
     </Button>
@@ -54,7 +48,7 @@ import { computed, nextTick, ref } from 'vue';
 import { Check, Plus, XIcon } from 'lucide-vue-next';
 import { Button } from '@/components/ui/button';
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     index?: number;
     level?: number;
@@ -116,7 +110,7 @@ const cancel = () => {
 };
 
 const onBlur = (e: FocusEvent) => {
-  if ((e.relatedTarget as HTMLElement)?.id === `value-save-${props.index}-${props.level}`) return;
+  if ((e.relatedTarget as HTMLElement)?.hasAttribute('data-ignore-blur')) return;
   cancel();
 };
 </script>

src/components/core/value-tree/type/ValueTreeArray.vue

@@ -40,14 +40,14 @@ const modelValue = defineModel<any[]>({ required: true });
 
 defineEmits(['delete']);
 
-const onUpdate = (key: string | number, value: any) => {
+const onUpdate = (key: number, value: any) => {
   const clone = Array.from(modelValue.value as any[]);
   // @ts-ignore
   clone[key] = value;
   modelValue.value = clone;
 };
 
-const onDelete = (key: string | number) => {
+const onDelete = (key: number) => {
   const clone = Array.from(modelValue.value as any[]);
   // @ts-ignore
   clone.splice(key, 1);

src/components/core/value-tree/type/ValueTreeNumber.vue

@@ -29,14 +29,7 @@
     <template #actions>
       <!-- Edit -->
       <template v-if="isEditing">
-        <Button
-          v-if="isValid"
-          :id="`value-save-${name}-${level}`"
-          ref="saveButton"
-          size="icon-sm"
-          variant="secondary"
-          @click="save"
-        >
+        <Button v-if="isValid" ref="saveButton" data-ignore-blur size="icon-sm" variant="secondary" @click="save">
           <Check class="h-3.5 w-3.5" />
         </Button>
         <span
@@ -68,7 +61,7 @@ import { placeCursorAtEnd } from '@/utils/dom.ts';
 
 const precision = 1000;
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     name: string;
     level?: number;
@@ -139,7 +132,7 @@ const cancel = () => {
 };
 
 const onBlur = (e: FocusEvent) => {
-  if ((e.relatedTarget as HTMLElement)?.id === `value-save-${props.name}-${props.level}`) return;
+  if ((e.relatedTarget as HTMLElement)?.hasAttribute('data-ignore-blur')) return;
   cancel();
 };
 

src/components/core/value-tree/type/ValueTreeString.vue

@@ -30,13 +30,7 @@
     <template #actions>
       <!-- Edit -->
       <template v-if="isEditing">
-        <Button
-          :id="`value-save-${name}-${level}`"
-          ref="saveButton"
-          size="icon-sm"
-          variant="secondary"
-          @click.stop="save"
-        >
+        <Button ref="saveButton" data-ignore-blur size="icon-sm" variant="secondary" @click.stop="save">
           <Check class="h-3.5 w-3.5" />
         </Button>
         <Button ref="cancelButton" size="icon-sm" variant="secondary" @click.stop="cancel">
@@ -64,7 +58,7 @@ import { placeCursorAtEnd } from '@/utils/dom.ts';
 
 const colorRegex = new RegExp(/(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6})\b|(?:rgb|hsl)a?\([^)]*\)/, 'i');
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     name: string;
     level?: number;
@@ -110,11 +104,11 @@ const cancel = () => {
 };
 
 const onBlur = (e: FocusEvent) => {
-  if ((e.relatedTarget as HTMLElement)?.id === `value-save-${props.name}-${props.level}`) return;
+  if ((e.relatedTarget as HTMLElement)?.hasAttribute('data-ignore-blur')) return;
   cancel();
 };
 
-const onColorInput = (e: InputEvent) => {
+const onColorInput = (e: Event) => {
   modelValue.value = (e.target as HTMLInputElement).value;
 };