rework component

admin/src/components/UserQuery.vue

@@ -1,43 +1,46 @@
 <template>
   <div>
-    <b-input-group>
-      <b-form-input
+    <div class="d-flex">
+      <BFormInput
         type="text"
         class="test-input-criteria"
         v-model="currentValue"
         :placeholder="placeholderText"
-      ></b-form-input>
-      <b-input-group-append class="test-click-clear-criteria" @click="currentValue = ''">
-        <b-input-group-text class="pointer">
-          <b-icon icon="x" />
-        </b-input-group-text>
-      </b-input-group-append>
-    </b-input-group>
+      />
+      <div append class="test-click-clear-criteria" @click="clearValue">
+        <BInputGroupText class="pointer h-100">
+          <IIcBaselineClose />
+        </BInputGroupText>
+      </div>
+    </div>
   </div>
 </template>
-<script>
-export default {
-  name: 'UserQuery',
-  props: {
-    value: { type: String, default: '' },
-    placeholder: { type: String, default: '' },
-  },
-  data() {
-    return {
-      currentValue: this.value,
-    }
-  },
-  computed: {
-    placeholderText() {
-      return this.placeholder || this.$t('user_search')
-    },
-  },
-  watch: {
-    currentValue() {
-      if (this.value !== this.currentValue) {
-        this.$emit('input', this.currentValue)
-      }
-    },
-  },
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BInputGroupText, BFormInput } from 'bootstrap-vue-next'
+
+const props = defineProps({
+  value: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+})
+
+const emit = defineEmits(['input'])
+
+const { t } = useI18n()
+
+const currentValue = ref(props.value)
+
+const placeholderText = computed(() => props.placeholder || t('user_search'))
+
+const clearValue = () => {
+  currentValue.value = ''
 }
+
+watch(currentValue, (newValue) => {
+  if (props.value !== newValue) {
+    emit('input', newValue)
+  }
+})
 </script>