Union props #12449
Description
Vue version
3.5.13
Link to minimal reproduction
Steps to reproduce
<script setup lang="ts">
import * as Vue from 'vue'
import { getBlurBackgroundCls, getRoundedCls } from '../util/class'
defineOptions({
name: 'CommonInput',
})
type Props = /* @vue-ignore */ Vue.InputHTMLAttributes & {
class?: string
clearable?: boolean
}
const { class: className, clearable } = defineProps<Props>()
const slots = defineSlots<{
placeholder?: () => void
}>()
const modelValue = defineModel<string | null>({ required: false, default: null })
const isFocus = Vue.ref<boolean>(false)
function onClear() {
modelValue.value = null
}
</script>
<template>
<div
:class="[
getRoundedCls(),
getBlurBackgroundCls(),
isFocus
? 'shadow-average border-black/80 dark:border-white/50'
: 'border-neutral-600/30 dark:border-neutral-300/30',
className,
]"
class="relative overflow-hidden border-2 bg-opacity-70 transition-all"
>
<input
v-model="modelValue"
class="w-full px-3 py-1.5 text-black outline-0 disabled:!opacity-25 dark:bg-neutral-500/20 dark:text-white"
type="text"
@blur="isFocus = false"
@focus="isFocus = true"
/>
<div
v-if="!modelValue && slots.placeholder"
class="absolute left-0 top-0 flex cursor-pointer items-center overflow-hidden px-3 py-1.5"
>
<slot name="placeholder" />
</div>
<div
v-if="clearable"
className="absolute right-7 top-1/2 float-right -translate-y-1/2 cursor-pointer select-none text-base"
@click="onClear"
>
<CloseOne className="text-zinc-800 dark:text-zinc-400" />
</div>
</div>
</template>
What is expected?
The defineProps can work
What is actually happening?
If don't add /** vue-ignore */ will throw error
Unresolvable type reference or unsupported built-in utility type
System Info
No response
Any additional comments?
No response