Text input

[dxh-mhr]

text-input

[eliyas5044]

<template>
  <label :for="id" class="block">
    <span>{{ label }}</span>
    <div class="relative">
      <input
        :id="id"
        v-model="inputValue"
        :type="type"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :autofocus="autofocus"
        :required="required"
        class="w-full border px-2 py-1 rounded"
        @focus="$emit('focus')"
        @blur="$emit('blur')"
        @keyup.enter="$emit('enter')"
      />

      <div
        v-if="clearable && inputValue"
        class="absolute right-2 top-0 bottom-0 cursor-pointer flex items-center h-full"
        @click="clearInput"
      >
        <slot name="clear-icon">
          <svg class="inline" xmlns="http://www.w3.org/2000/svg" height="14px" viewBox="0 0 512 512" />
        </slot>
      </div>
    </div>
    <p v-if="hint">{{ hint }}</p>
  </label>
</template>

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

type Props = {
  modelValue?: string;
  label?: string;
  id?: string;
  type?: string;
  placeholder?: string;
  hint?: string;
  disabled?: boolean;
  readonly?: boolean;
  autofocus?: boolean;
  required?: boolean;
  clearable?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  type: 'text'
})

const emit = defineEmits(['focus', 'blur', 'enter', 'update:modelValue'])

const inputValue = ref(props.modelValue)

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

const clearInput = () => {
  inputValue.value = ''
}
</script>

[eliyas5044]

<template>
  <label :for="id" class="block">
    <span>{{ label }}</span>
    <div class="relative">
      <input
        :id="id"
        v-model="inputValue"
        :type="type"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :autofocus="autofocus"
        :required="required"
        :class="['w-full border px-2 py-1 rounded', inputClass]"  <!-- Merging classes -->
        @focus="$emit('focus')"
        @blur="$emit('blur')"
        @keyup.enter="$emit('enter')"
      />
      <!-- Rest of your template... -->
    </div>
  </label>
</template>

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

type Props = {
  // ...other props...
  inputClass?: string; // New prop for custom input classes
}

const props = withDefaults(defineProps<Props>(), {
  type: 'text',
  inputClass: '' // Default to empty string if not provided
})

const emit = defineEmits(['focus', 'blur', 'enter', 'update:modelValue'])
const inputValue = ref(props.modelValue)

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

const clearInput = () => {
  inputValue.value = ''
}
</script>