46 lines
1005 B
Vue
46 lines
1005 B
Vue
<template>
|
|
<button :class="rootClasses" @click="useRipple($event, true)">
|
|
<div :class="outerClasses">
|
|
<div :class="innerClasses">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// import { useRipple } from "#imports";
|
|
import { computed, ref } from "vue";
|
|
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: ``,
|
|
},
|
|
outer: {
|
|
class: ``,
|
|
},
|
|
inner: {
|
|
class: ``,
|
|
},
|
|
} 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>
|