<template>
<button
class=”linebutton”
@click=”handleCCEditButtonClick(value)”
:disabled=”isLoading || showEmailToast || showToast”
:class=”{ ‘disable-hover’: isLoading || showEmailToast || showToast }”
>
<i class=”fa-solid fa-pen envIconClass”></i>
</button>
</template>
<script>
export default {
props: {
value: {
type: [String, Number, Object], // Adjust based on the type of ‘value’ expected
required: true,
},
isLoading: {
type: Boolean,
default: false,
},
showEmailToast: {
type: Boolean,
default: false,
},
showToast: {
type: Boolean,
default: false,
},
},
methods: {
handleCCEditButtonClick(value) {
// Add your custom logic for handling the edit button click
console.log(‘Edit button clicked with value:’, value);
},
},
};
</script>
<style scoped>
.linebutton {
cursor: pointer;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
padding: 8px 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.linebutton:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.disable-hover:hover {
pointer-events: none;
}
.envIconClass {
margin-right: 4px;
font-size: 16px;
}
</style>