<template>
    <component
        :class="[$style.touch,disabled&&$style.disabled]"
        :is="tag"
        @click="$emit('tap',$event)"
        :style="{userSelect:selectable?'auto':'none'}"
    >
        <slot/>
    </component>
</template>

<script>
    export default {
        name: "Touch",
        props:{
            tag:{
                type:String,
                default:'div'
            },
            selectable:{
                type:Boolean,
                default:true
            },
            disabled:{
                type:Boolean,
                default:false
            }
        }
    }
</script>

<style module lang="scss">
    .touch{
        &:not(.disabled){
            cursor: pointer;
        }
        &:hover{
            text-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1);
        }
    }
</style>