42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { defineComponent, h } from 'vue';
|
|
|
|
export default defineComponent({
|
|
name: 'Button',
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default: 'button',
|
|
},
|
|
variant: {
|
|
type: String,
|
|
default: 'default',
|
|
validator: (value: string) => ['default', 'outline', 'ghost'].includes(value),
|
|
},
|
|
className: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
setup(props, { slots }) {
|
|
const base = 'inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition';
|
|
const styles: Record<string, string> = {
|
|
default: 'bg-cyan-500 text-black hover:bg-cyan-400',
|
|
outline: 'border border-slate-600 text-slate-100 bg-transparent hover:bg-slate-900',
|
|
ghost: 'text-slate-100 hover:bg-slate-800',
|
|
};
|
|
|
|
return () =>
|
|
h(
|
|
'button',
|
|
{
|
|
type: props.type as 'button' | 'submit' | 'reset',
|
|
class: `${base} ${styles[props.variant as keyof typeof styles]} ${props.className}`.trim(),
|
|
},
|
|
slots.default ? slots.default() : undefined,
|
|
);
|
|
},
|
|
});
|
|
|
|
export { Button };
|
|
|