minnan-website/components/controls/SimpleInput.vue

<template>
  <div 
    :class="[
      'nana-simple-input',
      focusState ? 'focus' : '',
    ]"
  >
    <div class="prefix">
      <slot name="prefix"/>
    </div>
    <input 
      :placeholder="placeholder"
      v-bind="$attrs"
      class="nana-input-text"
      :value="modelValue"
      @input="(e: Event) => emit('update:modelValue', (e.target as HTMLInputElement).value)"
      @focus="handleFocus"
      @blur="handleBlur"
      @keydown.enter="emit('search')"
    />
    <div class="suffix">
      <slot name="suffix"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: '',
  },
})

const focusState = ref(false)
const emit = defineEmits([ 'update:modelValue', 'focus', 'blur', 'search' ])

function handleFocus() {
  focusState.value = true;
  emit('focus');
}
function handleBlur() {
  focusState.value = false;
  emit('blur');
}

</script>

<style lang="scss">
@use "@/assets/scss/colors.scss" as *;

.nana-simple-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: $box-color;
  border: 1px solid $border-default-color;

  &.focus {
    border-color: $border-active-color; 
  }

  input {
    font-size: 1rem;
    color: $text-color;
    border: none;
    outline: none;
    background-color: transparent;
  }

  .prefix {
    margin-right: 6px;

    img {
      width: 24px;
      height: 24px;
      vertical-align: middle;
    }
  }
  .suffix {
    margin-left: 10px;
    margin-right: 10px;
  }

  
  &.dark {
    background-color: $box-dark-trans-color;
    border: 1px solid $border-dark-color;

    .nana-input-text {
      color: $text-color-light;

      &::placeholder {
        color: $text-second-color-light;
      }
    }
  }
}
.nana-input-text {
  color: $text-color;
  font-size: 26px;
}
</style>