<script setup>
import { useVModel } from "@vueuse/core";
const props = defineProps({
  modelValue: { type: null, required: false, default: void 0 },
  placeholder: { type: String, required: false, default: "" },
  icon: { type: String, required: false, default: "" },
  disabled: { type: Boolean, required: false, default: false }
});
const emit = defineEmits([]);
const input = useVModel(props, "modelValue", emit, { passive: true });
</script>

<template>
  <div
    class="n-select flex flex items-center border rounded n-bg-base px-2 py-1 focus-within:border-context focus-within:n-focus-base"
    :class="disabled ? 'border-gray:10' : 'n-border-base'"
  >
    <slot name="icon">
      <NIcon v-if="icon" :icon="icon" class="mr-0.4em text-1.1em op50" />
    </slot>
    <select v-model="input" :disabled="disabled" class="w-full flex-auto n-bg-base !outline-none" :class="disabled ? 'appearance-none' : ''">
      <option v-if="placeholder" value="" disabled hidden>
        {{ placeholder }}
      </option>
      <slot />
    </select>
  </div>
</template>
