src/components/common/buttons/BaseButton.ts - dev - vdele/app

import { defineComponent, h } from 'vue';

export const BaseButton = defineComponent({
    name: 'BaseButton',
    props: {
        disabled: {
            type: Boolean,
            required: false,
            default: false,
        }
    },
    emits: ['click'],
    mounted() {
        this.$nextTick(() => {
            const el = this.$el as HTMLButtonElement;
            el.addEventListener('click', this.clickHandler);
        });
    },
    unmounted() {
        const el = this.$el as HTMLButtonElement;
        el.removeEventListener('click', this.clickHandler);
    },
    setup(_, { emit, attrs}) { // ( props , { attrs, emit, expose, slots } )
        const clickHandler = (e: Event) => {
            const event = e as PointerEvent;
            emit('click', { target: event.target, value: attrs['value'] ?? null });
        };

        return {
            clickHandler,
        };
    },
    render() {
        return h(
            'button',
            {
                //...attrs,
                class: ['btn'],
                disabled: this.$props.disabled,
                type: 'button',
            },
            this.$slots.default?.()
        );
    },
});