<script lang="ts" setup name="searchItem">
const props = defineProps({
  width: {
    type: String,
    default: '',
  },
})

const inputslot = ref<HTMLElement | null >(null)

onMounted(() => {
  // 如果没有子元素，则控制显示为none, 不占位
  const searchitem = inputslot.value
  if (searchitem && searchitem.childNodes && searchitem.childNodes.length === 0) {
    searchitem.style.display = 'none'
  }
})
</script>

<template>
  <div ref="inputslot" class="search-item" :style="{ width: props.width ? props.width : undefined }">
    <slot />
  </div>
</template>

<style lang="scss" scoped>
.search-item {
  display: inline-block;
  margin-bottom: 10px;
  vertical-align: top;
  margin-right: 5px;
}

.search-item:last-child {
  margin-right: 0;
}
</style>