<script setup>
import { useVModel } from "@vueuse/core";
const props = defineProps({
  modelValue: { type: [String, Number], required: false, default: "" },
  icon: { type: String, required: false },
  placeholder: { type: String, required: false },
  disabled: { type: Boolean, required: false },
  autofocus: { type: Boolean, required: false },
  autocomplete: { type: String, required: false },
  readonly: { type: Boolean, required: false },
  type: { type: String, required: false, default: "text" }
});
const emit = defineEmits(["keydown", "keyup", "change"]);
const input = useVModel(props, "modelValue", emit, { passive: true });
</script>

<template>
  <div class="n-text-input flex flex items-center border n-border-base rounded n-bg-base py-1 pl-1 pr-2 focus-within:border-context focus-within:n-focus-base">
    <slot name="icon">
      <NIcon v-if="icon" :icon="icon" class="ml-0.3em mr-0.1em text-1.1em op50" />
    </slot>
    <input
      v-model="input"
      v-bind="$props"
      class="ml-0.4em w-full flex-auto n-bg-base !outline-none"
    >
  </div>
</template>
