<template>
  <section class="kf-tsl-input-body">
    <input class="kf-tsl-input" :value="props.value" @input="searchChange" :placeholder="$t('Search')" type="text">
    <svgIcon name="search" class="input-icon" />
  </section>
</template>

<script setup>
import svgIcon from "../uiWidget/svgIcon.vue";

const props = defineProps({
  value: {
    type: String,
    default: () => ""
  }
});

const emits = defineEmits(["update:value"]);

const searchChange = (e) => {
  emits("update:value", e.target.value);
}
</script>

<style lang="scss" scoped>
.kf-tsl-input-body {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .input-icon {
    position: absolute;
    right: 12px;
  }
  ::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
  }

  ::-moz-placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
  }

  :-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
  }
  input:focus {
    transition: all 0.5s;
    border-color: rgba(41, 113, 219, 1);
  }
}
.kf-tsl-input {
  width: 100%;
  display: flex;
  height: 32px;
  padding: 4px 12px;
  background-color: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--tsl-border-color);
  border-top: 1px solid var(--tsl-border-color);
}
</style>