mixtape/zero.Backoffice.UI/app/components/ui-search.vue

<template>
  <div class="ui-searchinput">
    <input ref="input" type="search" :value="value" @input="onChange" @keyup.enter="onSubmit" class="ui-input" v-localize:placeholder="placeholder" />
    <slot name="button" v-bind="{ onSubmit: onSubmit }">
      <button type="button" class="ui-searchinput-button" v-localize:title="'@ui.search.button'" @click="onSubmit">
        <ui-icon symbol="fth-search" />
      </button>
    </slot>
  </div>
</template>


<script>
  export default {
    name: 'uiSearch',

    props: {
      value: {
        type: String,
        default: ''
      },
      placeholder: {
        type: String,
        default: '@ui.search.placeholder'
      }
    },

    computed: {
      
    },

    methods: {

      onChange(ev)
      {
        //this.$emit('change', ev.target.value);
        this.$emit('input', ev.target.value);
        //this.$emit('update:value', ev.target.value);
        //this.$emit('update:modelValue', ev.target.value);
      },

      onSubmit(ev)
      {
        this.$emit('submit', this.$refs.input.value);
      },

      focus()
      {
        this.$refs.input.focus();
      }
    }
  }
</script>

<style lang="scss">
  .ui-searchinput
  {
    position: relative;

    .ui-input
    {
      display: block;
      min-width: 320px; 
      padding-right: 40px;
      border: var(--color-input-border);
      background: var(--color-input);
    }

    &.onbg .ui-input:not(:focus)
    {
      /*box-shadow: var(--shadow-short);
      background: var(--color-button-light-onbg);*/
      background: transparent;
      border: 1px dashed var(--color-line-dashed-onbg);
    }

    .ui-searchinput-button
    {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 45px;
      text-align: center;
      font-size: var(--font-size);
      padding-top: 1px;
      border: 1px solid transparent;
      border-radius: var(--radius);
    }

    .ui-input:focus
    {
      background-color: var(--color-input-focus-bg);
      border: var(--color-input-focus-border);
      box-shadow: var(--color-input-focus-shadow);
      outline: none;
    }
  }
</style>