I am currently working on a custom Button component with some unique functionality:
<script lang="ts" setup>
import { computed, ref } from 'vue';
const {
type = 'button',
color = 'primary',
disabled = false
} = defineProps<{
href?: string;
type: 'button' | 'submit' | 'reset' | undefined;
color: string;
disabled: boolean;
}>();
const element = ref<HTMLElement | null>(null);
defineExpose({
focus: () => {
element.value?.focus();
},
});
const style =
'inline-flex justify-center rounded-sm shadow-sm px-3 py-2 text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus:outline focus:outline-2 focus:outline-offset-2';
const colors = new Map([
[
'primary',
'bg-lime-600 text-white hover:bg-lime-700 focus-visible:outline-lime-700 focus:outline-lime-700',
],
[
'base',
'bg-neutral-600 text-white hover:bg-neutral-700 focus-visible:outline-neutral-700 focus:outline-neutral-700',
],
[
'red',
'bg-red-600 text-white hover:bg-red-700 focus-visible:outline-red-700 focus:outline-red-700',
],
[
'white',
'bg-white text-neutral-900 ring-1 ring-inset ring-neutral-300 hover:bg-neutral-50 focus-visible:outline-neutral-400 focus:outline-neutral-400',
],
]);
const disabledStyles = computed(() =>
disabled ? ' opacity-50 cursor-not-allowed' : null
);
const styles = computed(
() => `${style} ${colors.get(color)}${disabledStyles.value}`
);
</script>
<template>
<component :is="href ? 'a' : 'button'" ref="element" :class="styles" v-bind="href ? { href } : { type }">
<slot />
</component>
</template>
Currently, I'm integrating this custom button within another component and here is how it's being used:
<script lang="ts" setup>
import Button from '@/components/Button.vue';
import { onMounted, ref } from 'vue';
const emit = defineEmits(['cancel', 'proceed']);
const buttonRef = ref<HTMLElement | null>(null);
onMounted(() => {
if (buttonRef.value) {
buttonRef.value.focus();
}
});
</script>
<template>
<div>
// ...
<div class="mt-6 grid grid-flow-row-dense grid-cols-2 gap-3">
<Button ref="buttonRef" @click="emit('cancel')">Abort</Button>
<Button color="red" @click="emit('proceed')">
<slot name="button" />
</Button>
</div>
</div>
</template>
However, upon compiling the code for production using Vite, an error message pops up:
Argument of type '{ ref: string; onClick: any; }' is not assignable to parameter of type '{ readonly href?: string | undefined; readonly type: "button" | "submit" | "reset" | undefined; readonly color: string; readonly disabled: boolean; } & VNodeProps & ... 4 more ... & Record<...>'.
Type '{ ref: string; onClick: any; }' is missing the following properties from type '{ readonly href?: string | undefined; readonly type: "button" | "submit" | "reset" | undefined; readonly color: string; readonly disabled: boolean; }': type, color, disabled
<Button ref="buttonRef" @click="emit('cancel')">Abort
If anyone has encountered this issue before and knows how to resolve it, kindly provide some guidance. Thank you!