38 lines
999 B
Vue
38 lines
999 B
Vue
<script setup>
|
|
import { defineProps } from "vue";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
const props = defineProps({
|
|
items: Array,
|
|
withLine: Boolean,
|
|
// this is for change active button
|
|
onclick: Function,
|
|
className: String
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-wrap text-white items-center">
|
|
<button v-for="item in items" :class="twMerge(
|
|
'btn my-1',
|
|
item.active ? 'btn-success' : 'btn-outline-success',
|
|
withLine ? 'line' : 'mx-2 first:ml-0 ',
|
|
className
|
|
)
|
|
" :disabled="item.disabled" :key="item.key" @click.stop.prevent="(e) => {
|
|
item.onClick ? item.onClick(e, item) : onclick(e, item);
|
|
}
|
|
">
|
|
<slot name="buttonContent" v-bind="{ record: item }">
|
|
{{ item.title }}
|
|
</slot>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
.line {
|
|
@apply mr-3 relative z-20 after:absolute after:top-1/2 after:-right-3 after:w-3 after:h-[1px] after:bg-info after:z-10 last:after:h-0;
|
|
}
|
|
</style>
|