40 lines
1.6 KiB
Vue
40 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<button :class="rootClasses" @click="useRipple($event, true)">
|
||
|
|
<div :class="outerClasses">
|
||
|
|
<div :class="innerClasses">
|
||
|
|
<ml-spinner v-if="spinerPlace == 'prefix' && props.showSpiner" :color="props.spinerColor" :size="props.spinerSize" class="mx-2 fill-accent1" />
|
||
|
|
<slot></slot>
|
||
|
|
<ml-spinner v-if="spinerPlace == 'suffix' && props.showSpiner" :color="props.spinerColor" :size="props.spinerSize" class="mx-2 fill-accent1" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import type { ButtonProps, PTAttribs } from './types';
|
||
|
|
import { twMerge } from 'tailwind-merge';
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<ButtonProps>(), {
|
||
|
|
rounded: true,
|
||
|
|
spinerSize: '6',
|
||
|
|
spinerColor: 'accent1',
|
||
|
|
spinerPlace: 'prefix'
|
||
|
|
});
|
||
|
|
|
||
|
|
const classes = ref({
|
||
|
|
root: {
|
||
|
|
class: `flex justify-center items-center disabled:opacity-60`
|
||
|
|
},
|
||
|
|
outer: {
|
||
|
|
class: `bg-gradient-to-r from-accent1 to-accent2 p-[2px] w-full focus:outline-none ${props.rounded ? 'rounded-3xl' : ''}`
|
||
|
|
},
|
||
|
|
inner: {
|
||
|
|
class: `justify-center flex items-center bg-white dark:bg-gradient-to-r px-5 py-2 w-full h-full font-semibold leading-[1.5] back ${props.rounded ? 'rounded-3xl' : ''}`
|
||
|
|
}
|
||
|
|
} as PTAttribs);
|
||
|
|
|
||
|
|
const rootClasses = computed(() => twMerge(classes.value.root?.class, props.pt?.root?.class));
|
||
|
|
const innerClasses = computed(() => twMerge(classes.value.inner?.class, props.pt?.inner?.class));
|
||
|
|
const outerClasses = computed(() => twMerge(classes.value.outer?.class, props.pt?.outer?.class));
|
||
|
|
</script>
|