<template>
  <div v-bind="$attrs">
    <q-input :label="displayName" label-color="primary" v-model="inputValue" :placeholder="placeholder" autogrow
      stack-label />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watchEffect } from 'vue';

export default defineComponent({
  name: 'MuiltInputText',
  inheritAttrs: false,
  props: {
    displayName: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    hint: {
      type: String,
      default: '',
    },
    modelValue: {
      type: String,
      default: '',
    },
  },

  setup(props, { emit }) {
    const inputValue = ref(props.modelValue);

    watchEffect(() => {
      emit('update:modelValue', inputValue.value);
    });

    return {
      inputValue,
    };
  },
});
</script>
