From 0e197261b0a3afefa30f6e4f253d56d5481cd651 Mon Sep 17 00:00:00 2001
From: Yuki Shindo <shinshin86@users.noreply.github.com>
Date: Fri, 20 Dec 2024 02:40:08 +0900
Subject: [PATCH] Add Clear Functionality in the SearchBox (#1989)

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: huchenlei <huchenlei@proton.me>
---
 src/components/common/SearchBox.vue | 43 ++++++++++++++++-------------
 src/locales/en/nodeDefs.json        |  3 ++
 src/locales/ja/nodeDefs.json        |  3 ++
 src/locales/ko/nodeDefs.json        |  3 ++
 src/locales/ru/nodeDefs.json        |  3 ++
 src/locales/zh/nodeDefs.json        |  3 ++
 6 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/components/common/SearchBox.vue b/src/components/common/SearchBox.vue
index 140cf73e6..80fafa162 100644
--- a/src/components/common/SearchBox.vue
+++ b/src/components/common/SearchBox.vue
@@ -1,22 +1,29 @@
 <template>
   <div :class="props.class">
     <IconField>
-      <InputIcon :class="props.icon" />
-      <InputText
-        class="search-box-input"
-        :class="{ ['with-filter']: props.filterIcon }"
-        @input="handleInput"
-        :modelValue="props.modelValue"
-        :placeholder="props.placeholder"
-      />
       <Button
         v-if="props.filterIcon"
-        class="p-inputicon"
+        class="p-inputicon filter-button"
         :icon="props.filterIcon"
         text
         severity="contrast"
         @click="$emit('showFilter', $event)"
       />
+      <InputText
+        class="search-box-input w-full"
+        @input="handleInput"
+        :modelValue="props.modelValue"
+        :placeholder="props.placeholder"
+      />
+      <InputIcon v-if="!props.modelValue" :class="props.icon" />
+      <Button
+        v-if="props.modelValue"
+        class="p-inputicon clear-button"
+        icon="pi pi-times"
+        text
+        severity="contrast"
+        @click="clearSearch"
+      />
     </IconField>
     <div
       class="search-filters pt-2 flex flex-wrap gap-2"
@@ -79,21 +86,19 @@ const handleInput = (event: Event) => {
   emit('update:modelValue', target.value)
   emitSearch(target.value)
 }
+
+const clearSearch = () => {
+  emit('update:modelValue', '')
+  emitSearch('')
+}
 </script>
 
 <style scoped>
-.search-box-input {
-  width: 100%;
-  padding-left: 36px;
-}
-
-.search-box-input.with-filter {
-  padding-right: 36px;
+:deep(.p-inputtext) {
+  --p-form-field-padding-x: 0.625rem;
 }
 
 .p-button.p-inputicon {
-  padding: 0;
-  width: auto;
-  border: none !important;
+  @apply p-0 w-auto border-none;
 }
 </style>
diff --git a/src/locales/en/nodeDefs.json b/src/locales/en/nodeDefs.json
index 6e9a9ddfb..bb49ff823 100644
--- a/src/locales/en/nodeDefs.json
+++ b/src/locales/en/nodeDefs.json
@@ -5352,6 +5352,9 @@
       },
       "tile_size": {
         "name": "tile_size"
+      },
+      "overlap": {
+        "name": "overlap"
       }
     }
   },
diff --git a/src/locales/ja/nodeDefs.json b/src/locales/ja/nodeDefs.json
index b2f81d0b3..16328c3f6 100644
--- a/src/locales/ja/nodeDefs.json
+++ b/src/locales/ja/nodeDefs.json
@@ -5319,6 +5319,9 @@
   "VAEEncodeTiled": {
     "display_name": "VAEエンコード（タイル）",
     "inputs": {
+      "overlap": {
+        "name": "オーバーラップ"
+      },
       "pixels": {
         "name": "ピクセル"
       },
diff --git a/src/locales/ko/nodeDefs.json b/src/locales/ko/nodeDefs.json
index 260145870..26b86f12e 100644
--- a/src/locales/ko/nodeDefs.json
+++ b/src/locales/ko/nodeDefs.json
@@ -5319,6 +5319,9 @@
   "VAEEncodeTiled": {
     "display_name": "VAE 인코드 (타일)",
     "inputs": {
+      "overlap": {
+        "name": "중첩"
+      },
       "pixels": {
         "name": "픽셀"
       },
diff --git a/src/locales/ru/nodeDefs.json b/src/locales/ru/nodeDefs.json
index c5679ef66..6700f99bd 100644
--- a/src/locales/ru/nodeDefs.json
+++ b/src/locales/ru/nodeDefs.json
@@ -5319,6 +5319,9 @@
   "VAEEncodeTiled": {
     "display_name": "Кодировать VAE (плитками)",
     "inputs": {
+      "overlap": {
+        "name": "перекрытие"
+      },
       "pixels": {
         "name": "пиксели"
       },
diff --git a/src/locales/zh/nodeDefs.json b/src/locales/zh/nodeDefs.json
index 53fe66eaf..d7a70dc7c 100644
--- a/src/locales/zh/nodeDefs.json
+++ b/src/locales/zh/nodeDefs.json
@@ -5319,6 +5319,9 @@
   "VAEEncodeTiled": {
     "display_name": "VAE编码（平铺）",
     "inputs": {
+      "overlap": {
+        "name": "重叠"
+      },
       "pixels": {
         "name": "像素"
       },