Search Field v1.0

<e-search-field
  id='search-field'
  :model="fieldData"
/>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';

import { EFormFieldModel, EFormFieldType, ValueUpdate } from 'types';

import EIcon from '../e-icon/e-icon.vue';
import EFormField from '../e-form-field/e-form-field.vue';

export type Props = {
  model?: EFormFieldModel;
  id?: string;
  placeholder?: string;
  value?: string;
  direction?: 'default' | 'inverted';
};

const props = withDefaults(defineProps<Props>(), {
  model: null,
  id: 'search',
  placeholder: 'search.searchPlaceholder',
  value: '',
  direction: 'default'
});

const emit = defineEmits<Events>();

interface Events {
  'search-for': [value: string];
}

const { t, te } = useI18n({ useScope: 'global' });

const classes = computed(() => {
  return {
    inverted: props.direction === 'inverted'
  };
});

const searchValue = ref('');

const translatedPlaceholder = computed(() => {
  return te(props.placeholder) ? t(props.placeholder) : props.placeholder;
});

const searchFieldModel = computed(() => {
  if (props.model) return props.model;

  return {
    type: EFormFieldType.Text,
    id: props.id,
    value: searchValue.value,
    placeholder: translatedPlaceholder.value,
    hidden: false,
    meta: {},
    options: []
  } as EFormFieldModel;
});

function setSearchValue(value: ValueUpdate): void {
  searchValue.value = value.newValue as string;
}
function updateSearchValue(e: KeyboardEvent) {
  const textValue = (e.target as HTMLInputElement).value;
  searchValue.value = textValue;

  emit('search-for', searchValue.value);
}

watch(
  () => props.value,
  (newValue, oldValue) => {
    if (newValue !== oldValue) {
      searchValue.value = newValue;
    }
  },
  {
    immediate: true
  }
);
</script>

<template>
  <div
    class="e-search-field"
    :class="classes"
  >
    <e-icon
      :icon="['search']"
      style-key="static"
    />
    <e-form-field
      class="search-field"
      :model="searchFieldModel"
      @emit:value="setSearchValue"
      @keyup.enter="updateSearchValue"
    />
  </div>
</template>

<style scoped lang="scss">
.e-search-field {
  display: flex;
  align-items: center;
  gap: 12px;

  .search-field {
    flex: 1 1 auto;
  }

  .e-icon {
    width: 28px;
  }

  &.inverted {
    flex-direction: row-reverse;
  }
}
</style>