Wrap a component of Vuetify
Hi, I'd like to wrap a component from vuetify
<template>
<v-text-field
v-bind="fromProps"
type="text"
@update:model-value="updateValue"
>
<template #append-inner="props">
<TooltipError
:error-message="errorMessage"
/>
<slot
name="append-icon"
v-bind="props"
>
<v-icon
v-if="!isNil(appendIcon)"
>
{{ appendIcon }}
</v-icon>
</slot>
</template>
</v-text-field>
</template>
<script setup lang="ts">
import { ref, toRefs } from "#imports";
import { VTextField } from 'vuetify/components';
type props = Omit<InstanceType<typeof VTextField>["$props"], "type">;
type emits = InstanceType<typeof VTextField>["$emit"];
const emit = defineEmits<emits & {
(e: "update:modelValue", value: string | null): void
}>();
const fromProps = withDefaults(
defineProps<props & {errorMessage?: string | undefined, timeout?: number | undefined}>(),
{
timeout: 0
}
);
const { timeout } = toRefs(fromProps);
const timeoutToken = ref<NodeJS.Timeout>();
function updateValue(val: string | null) {
val = val === "" ? null : val;
if (timeout.value !== 0) {
clearTimeout(timeoutToken.value);
timeoutToken.value = setTimeout(() => emit("update:modelValue", val), timeout.value);
}
else {
emit("update:modelValue", val);
}
}
</script>
I tried doing this using InstanceType, but it doesn't work.
I Give this error: "[@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type"
<template>
<v-text-field
v-bind="fromProps"
type="text"
@update:model-value="updateValue"
>
<template #append-inner="props">
<TooltipError
:error-message="errorMessage"
/>
<slot
name="append-icon"
v-bind="props"
>
<v-icon
v-if="!isNil(appendIcon)"
>
{{ appendIcon }}
</v-icon>
</slot>
</template>
</v-text-field>
</template>
<script setup lang="ts">
import { ref, toRefs } from "#imports";
import { VTextField } from 'vuetify/components';
type props = Omit<InstanceType<typeof VTextField>["$props"], "type">;
type emits = InstanceType<typeof VTextField>["$emit"];
const emit = defineEmits<emits & {
(e: "update:modelValue", value: string | null): void
}>();
const fromProps = withDefaults(
defineProps<props & {errorMessage?: string | undefined, timeout?: number | undefined}>(),
{
timeout: 0
}
);
const { timeout } = toRefs(fromProps);
const timeoutToken = ref<NodeJS.Timeout>();
function updateValue(val: string | null) {
val = val === "" ? null : val;
if (timeout.value !== 0) {
clearTimeout(timeoutToken.value);
timeoutToken.value = setTimeout(() => emit("update:modelValue", val), timeout.value);
}
else {
emit("update:modelValue", val);
}
}
</script>
I tried doing this using InstanceType, but it doesn't work.
I Give this error: "[@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type"
