<template>
  <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
  <template v-slot:append v-if="hint!==''">
    <q-icon name="help" size="22px" color="blue-8">
      <q-tooltip class="bg-yellow-2 text-black shadow-4" anchor="bottom right"><div class="hint-text" v-html="hint"/></q-tooltip>
    </q-icon>
  </template>
  </q-input>
</template>

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

export default defineComponent({
  name: 'InputText',
  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,
      showhint:ref(false)
    };
  },
});
</script>
<style lang="scss">
.hint-text{
  white-space : always;
  max-width: 450px;
  font-size: 1.2em;
}
</style>
