53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<script setup>
|
|
import { computed, defineProps } from "vue";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
const props = defineProps({
|
|
items: Array,
|
|
// this is for change active button
|
|
onclick: Function,
|
|
className: String,
|
|
size: {
|
|
type: String,
|
|
default: "xs",
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: "success",
|
|
},
|
|
});
|
|
|
|
const btnSize = computed(() => `btn-${props.size}`);
|
|
const btnColor = computed(() => `btn-${props.color}`);
|
|
const btnOutlineColor = computed(() => `btn-outline-${props.color}`);
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="className">
|
|
<button
|
|
type="button"
|
|
v-for="item in items"
|
|
:key="item.key"
|
|
:class="
|
|
twMerge(
|
|
'btn shadow-none rounded-none first-of-type:rounded-l-lg last-of-type:rounded-r-lg',
|
|
item.active ? btnColor : btnOutlineColor,
|
|
btnSize
|
|
)
|
|
"
|
|
:disabled="item.disabled"
|
|
@click.stop.prevent="
|
|
(e) => {
|
|
item.onClick ? item.onClick(e, item) : onclick(e, item);
|
|
}
|
|
"
|
|
>
|
|
<slot name="buttonContent" v-bind="{ item }">
|
|
{{ item.title }}
|
|
</slot>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|