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

@@ -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 {
+:deep(.p-inputtext) {
-  width: 100%;
+  --p-form-field-padding-x: 0.625rem;
-  padding-left: 36px;
-}
-
-.search-box-input.with-filter {
-  padding-right: 36px;
 }
 
 .p-button.p-inputicon {
-  padding: 0;
+  @apply p-0 w-auto border-none;
-  width: auto;
-  border: none !important;
 }
 </style>

src/locales/en/nodeDefs.json

@@ -5352,6 +5352,9 @@
       },
       "tile_size": {
         "name": "tile_size"
+      },
+      "overlap": {
+        "name": "overlap"
       }
     }
   },

src/locales/ja/nodeDefs.json

@@ -5319,6 +5319,9 @@
   "VAEEncodeTiled": {
     "display_name": "VAEエンコード（タイル）",
     "inputs": {
+      "overlap": {
+        "name": "オーバーラップ"
+      },
       "pixels": {
         "name": "ピクセル"
       },

src/locales/ko/nodeDefs.json

@@ -5319,6 +5319,9 @@
   "VAEEncodeTiled": {
     "display_name": "VAE 인코드 (타일)",
     "inputs": {
+      "overlap": {
+        "name": "중첩"
+      },
       "pixels": {
         "name": "픽셀"
       },

src/locales/ru/nodeDefs.json

@@ -5319,6 +5319,9 @@
   "VAEEncodeTiled": {
     "display_name": "Кодировать VAE (плитками)",
     "inputs": {
+      "overlap": {
+        "name": "перекрытие"
+      },
       "pixels": {
         "name": "пиксели"
       },

src/locales/zh/nodeDefs.json

@@ -5319,6 +5319,9 @@
   "VAEEncodeTiled": {
     "display_name": "VAE编码（平铺）",
     "inputs": {
+      "overlap": {
+        "name": "重叠"
+      },
       "pixels": {
         "name": "像素"
       },