From 194ef48d8cfa1d67228886f52d1e1508a297fcc1 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Tue, 24 Jun 2025 15:47:32 +0300
Subject: [PATCH 1/4] Fix GPU card validator

---
 .../components/node_selector/TfSelectGpu.vue  | 104 +++++++++++++++---
 .../node_selector/TfSelectionDetails.vue      |  17 +--
 2 files changed, 93 insertions(+), 28 deletions(-)

diff --git a/packages/playground/src/components/node_selector/TfSelectGpu.vue b/packages/playground/src/components/node_selector/TfSelectGpu.vue
index 8882d6d6e8..3ed21bfdbc 100644
--- a/packages/playground/src/components/node_selector/TfSelectGpu.vue
+++ b/packages/playground/src/components/node_selector/TfSelectGpu.vue
@@ -1,19 +1,18 @@
 <template>
-  <v-alert class="mb-4" type="info" variant="tonal">
-    Choose a GPU card to deploy your VM.
-  </v-alert>
-  <div ref="input">
+  <v-alert class="mb-4" type="info" variant="tonal"> Choose a GPU card to deploy your VM. </v-alert>
+  <div ref="input" class="gpu-card-selector" data-validation-target="gpu-cards">
     <input-tooltip
       tooltip="Please select at least one card from the available GPU cards. Note that if you have a deployment that already uses certain cards, they will not appear in the selection area. You have the option to select one or more cards.."
     >
       <VSelect
+        ref="gpuSelect"
         label="GPU Cards"
         placeholder="Select GPU Cards"
         class="w-100"
         multiple
         :model-value="$props.modelValue"
         item-value="id"
-        :items="(cardsTask.data as GPUCardInfo[])"
+        :items="cardsTask.data as GPUCardInfo[]"
         item-title="device"
         :loading="cardsTask.loading"
         :error="!!cardsTask.error"
@@ -27,9 +26,11 @@
         :persistent-hint="!$props.validNode"
         @update:model-value="
           bindModelValue($event);
-          bindStatus($event.length === 0 ? ValidatorStatus.Invalid : ValidatorStatus.Valid);
+          bindStatus();
+        "
+        @update:menu="
+          opened => !opened && $props.modelValue.length === 0 && $props.validNode && bindStatus(ValidatorStatus.Invalid)
         "
-        @update:menu="opened => !opened && $props.modelValue.length === 0 && bindStatus(ValidatorStatus.Invalid)"
       />
     </input-tooltip>
   </div>
@@ -38,7 +39,7 @@
 <script lang="ts">
 import type { GPUCardInfo, NodeInfo } from "@threefold/grid_client";
 import { noop } from "lodash";
-import { getCurrentInstance, onMounted, onUnmounted, type PropType, ref } from "vue";
+import { getCurrentInstance, onMounted, onUnmounted, type PropType, ref, computed } from "vue";
 
 import type { InputValidatorService } from "@/hooks/input_validator";
 
@@ -62,6 +63,7 @@ export default {
   setup(props, ctx) {
     const gridStore = useGrid();
     const input = ref<HTMLElement>();
+    const gpuSelect = ref<HTMLElement>();
     const cardsTask = useAsync(getNodeAvailableGpuCards, { default: [] });
 
     onUnmounted(() => {
@@ -82,39 +84,109 @@ export default {
     const { uid } = getCurrentInstance() as { uid: number };
     const form = useForm();
 
+    const targetElement = computed(() => {
+      if (gpuSelect.value) {
+        const vSelectElement = (gpuSelect.value as any)?.$el || gpuSelect.value;
+        if (vSelectElement) {
+          return vSelectElement;
+        }
+      }
+
+      if (input.value) {
+        const selectElement =
+          input.value.querySelector(".v-select") || input.value.querySelector(".v-field") || input.value;
+        return selectElement;
+      }
+
+      return input.value;
+    });
+
     const fakeService: InputValidatorService = {
       validate: () => Promise.resolve(true),
       setStatus: noop,
       reset: noop,
       status: ValidatorStatus.Init,
       error: null,
-      $el: input,
+      $el: targetElement,
+      highlightOnError: true,
     };
 
+    const registrationId = uid.toString();
+    let isRegistered = false;
+
+    const registerService = () => {
+      if (!isRegistered && form) {
+        form.register(registrationId, fakeService);
+        isRegistered = true;
+      }
+    };
+
+    const unregisterService = () => {
+      if (isRegistered && form) {
+        form.unregister(registrationId);
+        isRegistered = false;
+      }
+    };
+
+    onMounted(() => {
+      if (props.validNode && props.node) {
+        registerService();
+      }
+    });
+
+    onUnmounted(() => {
+      unregisterService();
+    });
+
     useWatchDeep(
       () => [props.validNode, props.node],
       ([valid, node]) => {
         bindModelValue();
         if (valid && node) {
+          registerService();
           return cardsTask.value.run(gridStore, node as NodeInfo);
+        } else {
+          unregisterService();
+          bindStatus(ValidatorStatus.Init);
+          cardsTask.value.initialized && cardsTask.value.reset();
         }
-        bindStatus();
-        cardsTask.value.initialized && cardsTask.value.reset();
       },
       { immediate: true, deep: true },
     );
 
-    onMounted(() => form?.register(uid.toString(), fakeService));
-    onUnmounted(() => form?.unregister(uid.toString()));
+    useWatchDeep(
+      () => props.modelValue,
+      cards => {
+        if (props.validNode && props.node) {
+          bindStatus(cards.length === 0 ? ValidatorStatus.Invalid : ValidatorStatus.Valid);
+        } else {
+          bindStatus(ValidatorStatus.Init);
+        }
+      },
+      { immediate: true, deep: true },
+    );
 
     function bindStatus(status?: ValidatorStatus) {
-      const s = status || ValidatorStatus.Init;
+      let s = status;
+
+      if (!s) {
+        if (props.validNode && props.node && props.modelValue.length === 0) {
+          s = ValidatorStatus.Invalid;
+        } else if (props.validNode && props.node && props.modelValue.length > 0) {
+          s = ValidatorStatus.Valid;
+        } else {
+          s = ValidatorStatus.Init;
+        }
+      }
+
       fakeService.status = s;
-      form?.updateStatus(uid.toString(), s);
+      if (isRegistered) {
+        form?.updateStatus(registrationId, s);
+      }
       ctx.emit("update:status", s);
     }
 
-    return { input, ValidatorStatus, cardsTask, bindModelValue, bindStatus };
+    return { input, gpuSelect, ValidatorStatus, cardsTask, bindModelValue, bindStatus };
   },
 };
 </script>
diff --git a/packages/playground/src/components/node_selector/TfSelectionDetails.vue b/packages/playground/src/components/node_selector/TfSelectionDetails.vue
index a77fbf3b88..986176fa10 100644
--- a/packages/playground/src/components/node_selector/TfSelectionDetails.vue
+++ b/packages/playground/src/components/node_selector/TfSelectionDetails.vue
@@ -1,12 +1,8 @@
 <template>
   <section class="mt-4">
     <template v-if="!disableNodeSelection">
-      <h3 class="bg-primary pa-2 text-h6 rounded">
-        Node Selection
-      </h3>
-      <p class="text-h6 mb-4 mt-2 ml-2">
-        Choose a way to select Node
-      </p>
+      <h3 class="bg-primary pa-2 text-h6 rounded">Node Selection</h3>
+      <p class="text-h6 mb-4 mt-2 ml-2">Choose a way to select Node</p>
 
       <v-radio-group v-model="wayToSelect" color="primary" inline>
         <InputTooltip
@@ -211,24 +207,21 @@ export default {
     const invalid = computed(() => {
       return (
         (!props.disableNodeSelection && nodeStatus.value === ValidatorStatus.Invalid) ||
-        (props.requireDomain && domainStatus.value === ValidatorStatus.Invalid) ||
-        (props.filters.hasGPU && gpuStatus.value === ValidatorStatus.Invalid)
+        (props.requireDomain && domainStatus.value === ValidatorStatus.Invalid)
       );
     });
 
     const pending = computed(() => {
       return (
         (!props.disableNodeSelection && nodeStatus.value === ValidatorStatus.Pending) ||
-        (props.requireDomain && domainStatus.value === ValidatorStatus.Pending) ||
-        (props.filters.hasGPU && gpuStatus.value === ValidatorStatus.Pending)
+        (props.requireDomain && domainStatus.value === ValidatorStatus.Pending)
       );
     });
 
     const valid = computed(() => {
       return (
         (props.disableNodeSelection || (!props.disableNodeSelection && nodeStatus.value === ValidatorStatus.Valid)) &&
-        (!props.requireDomain || (props.requireDomain && domainStatus.value === ValidatorStatus.Valid)) &&
-        (!props.filters.hasGPU || (props.filters.hasGPU && gpuStatus.value === ValidatorStatus.Valid))
+        (!props.requireDomain || (props.requireDomain && domainStatus.value === ValidatorStatus.Valid))
       );
     });
 

From 3d80ffe6af18a881400051e56bfe931cc415b112 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 30 Jun 2025 14:16:15 +0300
Subject: [PATCH 2/4] Refactor and reduce checking node validation

---
 .../playground/src/components/node_selector/TfSelectGpu.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/playground/src/components/node_selector/TfSelectGpu.vue b/packages/playground/src/components/node_selector/TfSelectGpu.vue
index 3ed21bfdbc..97afd01f55 100644
--- a/packages/playground/src/components/node_selector/TfSelectGpu.vue
+++ b/packages/playground/src/components/node_selector/TfSelectGpu.vue
@@ -170,10 +170,8 @@ export default {
       let s = status;
 
       if (!s) {
-        if (props.validNode && props.node && props.modelValue.length === 0) {
-          s = ValidatorStatus.Invalid;
-        } else if (props.validNode && props.node && props.modelValue.length > 0) {
-          s = ValidatorStatus.Valid;
+        if (props.validNode && props.node) {
+          s = props.modelValue.length === 0 ? ValidatorStatus.Invalid : ValidatorStatus.Valid;
         } else {
           s = ValidatorStatus.Init;
         }

From 45d4ef7512b813a870d2b7a8d7fd98c5e719f475 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 14 Jul 2025 19:21:42 +0300
Subject: [PATCH 3/4] - Create form validation helpers file for highlighting
 and scrolling - Add data dttribute targeting - Add custom CSS selector - Add
 same error highlighting across all components

---
 .../src/components/form_validator.vue         |  21 +---
 .../components/node_selector/TfDomainName.vue |   4 +-
 .../components/node_selector/TfSelectGpu.vue  |  22 +---
 .../src/components/weblet_layout.vue          |  66 +++++------
 .../playground/src/hooks/input_validator.ts   |   2 +
 .../src/utils/form_validation_helpers.ts      | 105 ++++++++++++++++++
 6 files changed, 144 insertions(+), 76 deletions(-)
 create mode 100644 packages/playground/src/utils/form_validation_helpers.ts

diff --git a/packages/playground/src/components/form_validator.vue b/packages/playground/src/components/form_validator.vue
index 4acbf9d3f9..27ea0009cf 100644
--- a/packages/playground/src/components/form_validator.vue
+++ b/packages/playground/src/components/form_validator.vue
@@ -7,6 +7,7 @@ import { computed, ref, watch } from "vue";
 
 import { type FormValidatorService, provideForm, ValidatorStatus } from "@/hooks/form_validator";
 import type { InputValidatorService } from "@/hooks/input_validator";
+import { resolveValidationTargetFromService, removeErrorHighlight } from "@/utils/form_validation_helpers";
 
 export default {
   name: "FormValidator",
@@ -63,21 +64,11 @@ export default {
           statusMap.value.set(uid, status);
         }
 
-        const el = serviceMap.value.get(uid)?.$el;
-        if (status === ValidatorStatus.Valid && el) {
-          const input =
-            el instanceof HTMLElement
-              ? el
-              : el &&
-                  typeof el === "object" &&
-                  "value" in el &&
-                  (el as { value: HTMLElement }).value instanceof HTMLElement
-                ? (el as { value: HTMLElement }).value
-                : null;
-
-          if (input) {
-            input.classList.remove("weblet-layout-error");
-            setTimeout(() => input.classList.remove("weblet-layout-error-transition"), 152);
+        const service = serviceMap.value.get(uid) as InputValidatorService;
+        if (status === ValidatorStatus.Valid && service) {
+          const targetElement = resolveValidationTargetFromService(service);
+          if (targetElement) {
+            removeErrorHighlight(targetElement);
           }
         }
       },
diff --git a/packages/playground/src/components/node_selector/TfDomainName.vue b/packages/playground/src/components/node_selector/TfDomainName.vue
index 06e06e19e0..6ee21470c4 100644
--- a/packages/playground/src/components/node_selector/TfDomainName.vue
+++ b/packages/playground/src/components/node_selector/TfDomainName.vue
@@ -8,7 +8,7 @@
       </div>
     </input-tooltip>
 
-    <div ref="input">
+    <div ref="input" class="domain-selector" data-validation-target="domain-selection">
       <form-validator ref="domainFormRef">
         <VExpandTransition>
           <input-tooltip v-if="enableCustomDomain" tooltip="Domain name that will point to this instance">
@@ -254,6 +254,8 @@ export default {
       status: ValidatorStatus.Init,
       error: null,
       $el: input,
+      highlightOnError: true,
+      validationTarget: "domain-selection",
     };
 
     onMounted(() => {
diff --git a/packages/playground/src/components/node_selector/TfSelectGpu.vue b/packages/playground/src/components/node_selector/TfSelectGpu.vue
index 97afd01f55..fb524751d8 100644
--- a/packages/playground/src/components/node_selector/TfSelectGpu.vue
+++ b/packages/playground/src/components/node_selector/TfSelectGpu.vue
@@ -39,7 +39,7 @@
 <script lang="ts">
 import type { GPUCardInfo, NodeInfo } from "@threefold/grid_client";
 import { noop } from "lodash";
-import { getCurrentInstance, onMounted, onUnmounted, type PropType, ref, computed } from "vue";
+import { getCurrentInstance, onMounted, onUnmounted, type PropType, ref } from "vue";
 
 import type { InputValidatorService } from "@/hooks/input_validator";
 
@@ -84,31 +84,15 @@ export default {
     const { uid } = getCurrentInstance() as { uid: number };
     const form = useForm();
 
-    const targetElement = computed(() => {
-      if (gpuSelect.value) {
-        const vSelectElement = (gpuSelect.value as any)?.$el || gpuSelect.value;
-        if (vSelectElement) {
-          return vSelectElement;
-        }
-      }
-
-      if (input.value) {
-        const selectElement =
-          input.value.querySelector(".v-select") || input.value.querySelector(".v-field") || input.value;
-        return selectElement;
-      }
-
-      return input.value;
-    });
-
     const fakeService: InputValidatorService = {
       validate: () => Promise.resolve(true),
       setStatus: noop,
       reset: noop,
       status: ValidatorStatus.Init,
       error: null,
-      $el: targetElement,
+      $el: input,
       highlightOnError: true,
+      validationTarget: "gpu-cards",
     };
 
     const registrationId = uid.toString();
diff --git a/packages/playground/src/components/weblet_layout.vue b/packages/playground/src/components/weblet_layout.vue
index e1dfdf59ca..4cdf882f10 100644
--- a/packages/playground/src/components/weblet_layout.vue
+++ b/packages/playground/src/components/weblet_layout.vue
@@ -10,7 +10,7 @@
             :style="{
               filter: `brightness(${!theme.global.current.value.dark ? 0.2 : 1})`,
             }"
-          >
+          />
           <slot name="title" />
         </v-card-title>
         <v-card-subtitle v-if="$slots.subtitle" :style="{ whiteSpace: 'initial' }">
@@ -25,9 +25,7 @@
     <v-card-text>
       <slot v-if="disableAlerts" />
       <template v-else>
-        <v-alert v-show="!profileManager.profile" variant="tonal" type="info">
-          Please connect your wallet
-        </v-alert>
+        <v-alert v-show="!profileManager.profile" variant="tonal" type="info"> Please connect your wallet </v-alert>
 
         <div ref="msgAlert">
           <v-alert v-show="profileManager.profile && status" variant="tonal" :type="alertType">
@@ -42,9 +40,7 @@
     </v-card-text>
 
     <template v-if="dedicated && !status">
-      <v-alert class="mb-4 mx-4" type="info" variant="tonal">
-        You need to rent a node before deploying on it.
-      </v-alert>
+      <v-alert class="mb-4 mx-4" type="info" variant="tonal"> You need to rent a node before deploying on it. </v-alert>
     </template>
 
     <template v-if="$slots['footer-actions'] && (profileManager.profile || disableAlerts)">
@@ -59,7 +55,7 @@
         <div v-if="ipv4 && dedicated">
           <span>
             There are no fees will be added since the selected node is rented by you and the cost already included in
-            the rent contract. <br>Please be aware that an additional fee of
+            the rent contract. <br />Please be aware that an additional fee of
             <span class="font-weight-black">
               {{ costLoading ? "Calculating..." : normalizeBalance(onlyIPV4TftPrice) }}
             </span>
@@ -88,9 +84,7 @@
             You selected a certified node. Please note that this deployment costs more TFT.
           </div>
         </div>
-        <div v-if="ipv4">
-          Please Note that the Bandwidth affects the total cost (1 Bandwidth = 0.01 TFT/hour).
-        </div>
+        <div v-if="ipv4">Please Note that the Bandwidth affects the total cost (1 Bandwidth = 0.01 TFT/hour).</div>
         <a :href="manual.pricing" target="_blank" class="app-link">
           Learn more about the pricing and how to unlock discounts.
         </a>
@@ -98,9 +92,7 @@
       <v-divider class="mt-3" />
       <v-card-actions class="justify-end my-1 mr-2 py-4">
         <slot v-if="!status" name="footer-actions" :validate-before-deploy="validateBeforeDeploy" />
-        <v-btn v-else color="secondary" :loading="status === 'deploy'" @click="reset">
-          Back
-        </v-btn>
+        <v-btn v-else color="secondary" :loading="status === 'deploy'" @click="reset"> Back </v-btn>
       </v-card-actions>
     </template>
   </v-card>
@@ -121,6 +113,11 @@ import { computed, ref, watch } from "vue";
 import { useTheme } from "vuetify";
 
 import { manual } from "@/utils/manual";
+import {
+  resolveValidationTargetFromService,
+  findFocusableInput,
+  applyErrorHighlight,
+} from "@/utils/form_validation_helpers";
 
 import { useGrid, useProfileManager } from "../stores";
 import { loadBalance, updateGrid } from "../utils/grid";
@@ -209,7 +206,7 @@ provideService({
 function validateBeforeDeploy(fn: () => void, documentScrollend = false) {
   const forms = __forms;
 
-  let errorInput: [number, any, boolean] | null = null;
+  let errorInput: [number, InputValidatorService, boolean] | null = null;
 
   out: for (let i = 0; i < forms.length; i++) {
     const form = forms[i];
@@ -218,29 +215,24 @@ function validateBeforeDeploy(fn: () => void, documentScrollend = false) {
     for (const input of inputs) {
       const status = typeof input.status === "string" ? input.status : (input.status as any)?.value;
       if (status === ValidatorStatus.Invalid) {
-        errorInput = [i, input.$el, input.highlightOnError || false];
+        errorInput = [i, input, input.highlightOnError || false];
         break out;
       }
 
       const valid = status === ValidatorStatus.Valid || (status === ValidatorStatus.Init && form.validOnInit);
 
       if ((!status || !valid) && !errorInput) {
-        errorInput = [i, input.$el, input.highlightOnError || false];
+        errorInput = [i, input, input.highlightOnError || false];
       }
     }
   }
 
   if (errorInput) {
-    const [tab, __input, highlightOnError] = errorInput;
+    const [tab, inputService, highlightOnError] = errorInput;
 
-    const input =
-      __input && typeof __input === "object" && "value" in __input && __input.value instanceof HTMLElement
-        ? __input.value
-        : __input instanceof HTMLElement
-        ? __input
-        : null;
+    const targetElement = resolveValidationTargetFromService(inputService);
 
-    if (!input || !__setTab) {
+    if (!targetElement || !__setTab) {
       return;
     }
 
@@ -248,30 +240,22 @@ function validateBeforeDeploy(fn: () => void, documentScrollend = false) {
 
     // Timeout so the ui gets render before scroll
     setTimeout(() => {
-      const _input = input.querySelector("textarea") || input.querySelector("input") || input;
-      if (!(_input instanceof HTMLElement)) {
-        return;
-      }
+      const focusableInput = findFocusableInput(targetElement);
 
       documentScrollend && document.addEventListener("scrollend", _improveUx, { once: true });
       !documentScrollend && setTimeout(_improveUx, 500);
-      _input.scrollIntoView({ behavior: "smooth", block: "center" });
+      focusableInput.scrollIntoView({ behavior: "smooth", block: "center" });
 
       async function _improveUx() {
-        if (!(_input instanceof HTMLElement)) return;
-
-        if (_input instanceof HTMLInputElement || _input instanceof HTMLTextAreaElement) {
+        if (focusableInput instanceof HTMLInputElement || focusableInput instanceof HTMLTextAreaElement) {
           // use `requestAnimationFrame` to avoid browser possible lagging
-          requestAnimationFrame(() => _input.focus());
-          requestAnimationFrame(() => _input.blur());
-          requestAnimationFrame(() => _input.focus());
+          requestAnimationFrame(() => focusableInput.focus());
+          requestAnimationFrame(() => focusableInput.blur());
+          requestAnimationFrame(() => focusableInput.focus());
         }
 
-        if (input instanceof HTMLElement && highlightOnError) {
-          input.classList.add("weblet-layout-error-transition");
-          requestAnimationFrame(() => {
-            input.classList.add("weblet-layout-error");
-          });
+        if (highlightOnError && targetElement instanceof HTMLElement) {
+          applyErrorHighlight(targetElement);
         }
       }
     }, 250);
diff --git a/packages/playground/src/hooks/input_validator.ts b/packages/playground/src/hooks/input_validator.ts
index a8289e3b71..533016aefc 100644
--- a/packages/playground/src/hooks/input_validator.ts
+++ b/packages/playground/src/hooks/input_validator.ts
@@ -10,6 +10,8 @@ export interface InputValidatorService {
   error: string | null;
   $el?: Ref<HTMLElement | null | undefined> | null;
   highlightOnError?: boolean;
+  validationTarget?: string;
+  targetSelector?: string;
 }
 
 export function useInputRef(isArray: true): Ref<InputValidatorService[]>;
diff --git a/packages/playground/src/utils/form_validation_helpers.ts b/packages/playground/src/utils/form_validation_helpers.ts
new file mode 100644
index 0000000000..1033a9dcca
--- /dev/null
+++ b/packages/playground/src/utils/form_validation_helpers.ts
@@ -0,0 +1,105 @@
+import type { InputValidatorService } from "@/hooks/input_validator";
+
+/**
+ * Enhanced DOM element resolution for form validation error highlighting and scrolling.
+ * Supports multiple strategies to find the correct element to highlight.
+ */
+export interface ValidationTargetOptions {
+  $el?: any;
+  validationTarget?: string;
+  targetSelector?: string;
+}
+
+/**
+ * Resolves the best DOM element for validation error highlighting and scrolling.
+ * Uses multiple fallback strategies to ensure reliable element targeting.
+ */
+export function resolveValidationTarget(options: ValidationTargetOptions): HTMLElement | null {
+  const { $el, validationTarget, targetSelector } = options;
+
+  if (validationTarget) {
+    const targetElement = document.querySelector(`[data-validation-target="${validationTarget}"]`) as HTMLElement;
+    if (targetElement) {
+      return targetElement;
+    }
+  }
+
+  if (targetSelector) {
+    const targetElement = document.querySelector(targetSelector) as HTMLElement;
+    if (targetElement) {
+      return targetElement;
+    }
+  }
+
+  let element: HTMLElement | null = null;
+
+  if ($el) {
+    if (typeof $el === "object" && "value" in $el && $el.value instanceof HTMLElement) {
+      element = $el.value;
+    } else if ($el instanceof HTMLElement) {
+      element = $el;
+    } else if ($el && typeof $el === "object" && "$el" in $el && $el.$el instanceof HTMLElement) {
+      element = $el.$el;
+    }
+  }
+
+  return element;
+}
+
+/**
+ * Finds the actual input element within a container for focusing and scrolling.
+ * Looks for various input types and Vue component patterns.
+ */
+export function findFocusableInput(container: HTMLElement): HTMLElement {
+  const input =
+    container.querySelector("textarea") || container.querySelector("input") || container.querySelector("select");
+
+  if (input instanceof HTMLElement) {
+    return input;
+  }
+
+  const vField =
+    container.querySelector(".v-field") ||
+    container.querySelector(".v-select") ||
+    container.querySelector(".v-text-field");
+
+  if (vField instanceof HTMLElement) {
+    const nestedInput = vField.querySelector("input") || vField.querySelector("textarea");
+    if (nestedInput instanceof HTMLElement) {
+      return nestedInput;
+    }
+    return vField;
+  }
+
+  return container;
+}
+
+/**
+ * Enhanced validation target resolution for InputValidatorService.
+ * Combines the service properties with additional validation targeting options.
+ */
+export function resolveValidationTargetFromService(service: InputValidatorService): HTMLElement | null {
+  return resolveValidationTarget({
+    $el: service.$el,
+    validationTarget: service.validationTarget,
+    targetSelector: service.targetSelector,
+  });
+}
+
+/**
+ * Applies error highlighting to an element with the standard weblet layout styles.
+ */
+export function applyErrorHighlight(element: HTMLElement): void {
+  element.classList.add("weblet-layout-error-transition");
+  requestAnimationFrame(() => {
+    element.classList.add("weblet-layout-error");
+  });
+}
+
+/**
+ * Removes error highlighting from an element.
+ */
+export function removeErrorHighlight(element: HTMLElement): void {
+  element.classList.remove("weblet-layout-error");
+  setTimeout(() => element.classList.remove("weblet-layout-error-transition"), 152);
+}

From b5300479d07303c6b08bd94f2db80e7916f0f12e Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 14 Jul 2025 19:28:20 +0300
Subject: [PATCH 4/4] Remove unused value to fix linting

---
 .../src/components/vm_deployment_table.vue    | 118 ++++--------------
 1 file changed, 23 insertions(+), 95 deletions(-)

diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index a0408b1453..23548baa0b 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -1,33 +1,18 @@
 <template>
   <div>
-    <v-alert
-      v-if="errorMessage"
-      type="error"
-      variant="tonal"
-    >
+    <v-alert v-if="errorMessage" type="error" variant="tonal">
       {{ errorMessage }}
     </v-alert>
-    <v-alert
-      v-if="!loading && count && items.length < count"
-      type="warning"
-      variant="tonal"
-    >
+    <v-alert v-if="!loading && count && items.length < count" type="warning" variant="tonal">
       Failed to load <strong>{{ count - items.length }}</strong> deployment{{ count - items.length > 1 ? "s" : "" }}.
 
       <span>
         This might happen because the node is down or it's not reachable
         <span v-if="showEncryption">or the deployment{{ count - items.length > 1 ? "s are" : " is" }} encrypted by another key</span>.
       </span>
-      <v-tooltip
-        location="top"
-        text="Show failed deployments"
-      >
+      <v-tooltip location="top" text="Show failed deployments">
         <template #activator="{ props: slotProps }">
-          <v-icon
-            v-bind="slotProps"
-            class="custom-icon"
-            @click="showDialog = true"
-          >
+          <v-icon v-bind="slotProps" class="custom-icon" @click="showDialog = true">
             mdi-file-document-refresh-outline
           </v-icon>
         </template>
@@ -41,15 +26,10 @@
         attach="#modals"
       >
         <v-card>
-          <v-card-title style="font-weight: bold">
-            Failed Deployments
-          </v-card-title>
+          <v-card-title style="font-weight: bold"> Failed Deployments </v-card-title>
           <v-divider color="#FFCC00" />
           <v-card-text>
-            <v-alert
-              type="error"
-              variant="tonal"
-            >
+            <v-alert type="error" variant="tonal">
               Failed to load
               <strong>{{ count - items.length }}</strong> deployment{{ count - items.length > 1 ? "s" : "" }}.
 
@@ -58,23 +38,14 @@
                 <span v-if="showEncryption">or the deployment{{ count - items.length > 1 ? "s are" : " is" }} encrypted by another key</span>.
               </span>
             </v-alert>
-            <v-list
-              :items="failedDeploymentList"
-              item-props
-              lines="three"
-            >
+            <v-list :items="failedDeploymentList" item-props lines="three">
               <template #subtitle="{ subtitle }">
                 <div v-html="subtitle" />
               </template>
             </v-list>
           </v-card-text>
           <v-card-actions class="justify-end my-1 mr-2">
-            <v-btn
-              color="anchor"
-              @click="showDialog = false"
-            >
-              Close
-            </v-btn>
+            <v-btn color="anchor" @click="showDialog = false"> Close </v-btn>
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -139,10 +110,7 @@
       </template>
 
       <template #[`item.flist`]="{ item }">
-        <v-tooltip
-          :text="item.flist"
-          location="bottom right"
-        >
+        <v-tooltip :text="item.flist" location="bottom right">
           <template #activator="{ props: slotProps }">
             <p v-bind="slotProps">
               {{ renameFlist(item.flist) }}
@@ -158,40 +126,18 @@
         {{ toHumanDate(item.created) }}
       </template>
       <template #[`item.actions`]="{ item }">
-        <v-chip
-          v-if="deleting && ($props.modelValue || []).includes(item)"
-          color="error"
-        >
-          Deleting...
-        </v-chip>
-        <v-btn-group
-          v-else
-          variant="tonal"
-        >
-          <slot
-            :name="projectName + '-actions'"
-            :item="item"
-            :update="updateItem"
-          />
+        <v-chip v-if="deleting && ($props.modelValue || []).includes(item)" color="error"> Deleting... </v-chip>
+        <v-btn-group v-else variant="tonal">
+          <slot :name="projectName + '-actions'" :item="item" :update="updateItem" />
         </v-btn-group>
       </template>
 
       <template #[`item.status`]="{ item }">
         <v-chip :color="getNodeHealthColor(item.status as string).color">
-          <v-tooltip
-            v-if="item.status == NodeHealth.Error"
-            activator="parent"
-            location="top"
-          >
-            {{
-              item.message
-            }}
+          <v-tooltip v-if="item.status == NodeHealth.Error" activator="parent" location="top">
+            {{ item.message }}
           </v-tooltip>
-          <v-tooltip
-            v-if="item.status == NodeHealth.Paused"
-            activator="parent"
-            location="top"
-          >
+          <v-tooltip v-if="item.status == NodeHealth.Paused" activator="parent" location="top">
             The deployment contract is in grace period
           </v-tooltip>
           <span class="text-uppercase">
@@ -201,20 +147,10 @@
       </template>
       <template #[`item.health`]="{ item }">
         <v-chip :color="getNodeHealthColor(item[0].workloads[0].result.state as string).color">
-          <v-tooltip
-            v-if="item[0].workloads[0].result.state == NodeHealth.Error"
-            activator="parent"
-            location="top"
-          >
-            {{
-              item.message
-            }}
+          <v-tooltip v-if="item[0].workloads[0].result.state == NodeHealth.Error" activator="parent" location="top">
+            {{ item.message }}
           </v-tooltip>
-          <v-tooltip
-            v-if="item[0].workloads[0].result.state == NodeHealth.Paused"
-            activator="parent"
-            location="top"
-          >
+          <v-tooltip v-if="item[0].workloads[0].result.state == NodeHealth.Paused" activator="parent" location="top">
             The deployment contract is in grace period
           </v-tooltip>
           <span class="text-uppercase">
@@ -224,10 +160,7 @@
       </template>
 
       <template #no-data-text>
-        <div
-          v-if="failedDeploymentList.length > 0"
-          class="text-center"
-        >
+        <div v-if="failedDeploymentList.length > 0" class="text-center">
           <p v-text="'Couldn\'t load any of your ' + projectTitle + ' deployments.'" />
           <VBtn
             class="mt-4"
@@ -238,10 +171,7 @@
             @click="loadDeployments"
           />
         </div>
-        <p
-          v-else
-          v-text="'No ' + projectTitle + ' deployments found on this account.'"
-        />
+        <p v-else v-text="'No ' + projectTitle + ' deployments found on this account.'" />
       </template>
     </ListTable>
   </div>
@@ -252,13 +182,11 @@ import { capitalize, computed, onMounted, ref } from "vue";
 
 import { getNodeHealthColor, NodeHealth } from "@/utils/get_nodes";
 
-import { useGrid, useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import { updateGrid } from "../utils/grid";
 import { markAsFromAnotherClient } from "../utils/helpers";
 import { type LoadedDeployments, loadVms, mergeLoadedDeployments } from "../utils/load_deployment";
 
-const profileManager = useProfileManager();
-
 const props = defineProps<{
   projectName: string;
   projectTitle: string;
@@ -313,7 +241,7 @@ async function loadDeployments() {
 
   items.value = [];
   loading.value = true;
-  updateGrid(grid, { projectName: props.projectName});
+  updateGrid(grid, { projectName: props.projectName });
   try {
     const chunk1 = await loadVms(grid!);
     if (chunk1.count > 0 && migrateGateways) {
@@ -541,7 +469,7 @@ import { ProjectName } from "../types";
 import { migrateModule } from "../utils/migration";
 import AccessDeploymentAlert from "./AccessDeploymentAlert.vue";
 import ListTable from "./list_table.vue";
-import { GridClient } from '@threefold/grid_client';
+import { GridClient } from "@threefold/grid_client";
 
 export default {
   name: "VmDeploymentTable",