88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { ImageButtonType } from '#layers/types/components/button'
|
|
|
|
interface props {
|
|
type?: ImageButtonType
|
|
href?: string
|
|
backgroundImage: string
|
|
alt: string
|
|
disabled?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<props>(), {
|
|
type: 'action',
|
|
disabled: false,
|
|
})
|
|
|
|
const componentTag = computed((): string => {
|
|
switch (props.type) {
|
|
case 'external':
|
|
return 'a'
|
|
case 'internal':
|
|
return 'AtomsLocaleLink'
|
|
default:
|
|
return 'button'
|
|
}
|
|
})
|
|
|
|
const componentProps = computed(() => {
|
|
if (props.type === 'external') {
|
|
return {
|
|
href: props.href,
|
|
target: '_blank',
|
|
}
|
|
}
|
|
|
|
if (props.type === 'internal') {
|
|
if (props.href) {
|
|
return {
|
|
to: props.href,
|
|
target: '_self',
|
|
}
|
|
}
|
|
return {}
|
|
}
|
|
|
|
return {}
|
|
})
|
|
const buttonStyle = computed(() => {
|
|
return {
|
|
backgroundImage: props.backgroundImage,
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<component
|
|
:is="componentTag"
|
|
v-bind="{ ...componentProps }"
|
|
:class="['btn-base', { disabled: props.disabled }]"
|
|
:style="buttonStyle"
|
|
:disabled="props.disabled"
|
|
>
|
|
<img
|
|
v-if="props.backgroundImage"
|
|
:src="props.backgroundImage"
|
|
:alt="props.alt"
|
|
class="btn-bg"
|
|
/>
|
|
</component>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.btn-base {
|
|
@apply overflow-hidden relative inline-flex items-center justify-center h-[48px] md:h-[64px] rounded-[8px] md:rounded-[10px] cursor-pointer
|
|
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
|
|
hover:after:opacity-20;
|
|
}
|
|
|
|
.btn-base.disabled {
|
|
@apply cursor-default pointer-events-none
|
|
after:opacity-20 after:z-[2];
|
|
}
|
|
|
|
.btn-bg {
|
|
@apply w-full h-full object-contain;
|
|
}
|
|
</style>
|