40 lines
820 B
Vue
40 lines
820 B
Vue
<template>
|
|
<button class="btn btn-label-primary btn-icon float-end" @click="toggleText">
|
|
<i :class="buttonClass"></i>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, defineProps } from 'vue';
|
|
|
|
const props = defineProps({
|
|
isToggleEnabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isActive: {
|
|
type: Boolean,
|
|
required: false,
|
|
},
|
|
});
|
|
|
|
const buttonClass = ref("bx bx-edit");
|
|
|
|
watch(() => props.isActive, (newVal) => {
|
|
buttonClass.value = newVal ? "bx bx-x" : "bx bx-edit";
|
|
});
|
|
|
|
const toggleText = () => {
|
|
if (props.isToggleEnabled) {
|
|
buttonClass.value = buttonClass.value === "bx bx-edit" ? "bx bx-x" : "bx bx-edit";
|
|
}
|
|
};
|
|
const resetButton = () => {
|
|
buttonClass.value = "bx bx-edit";
|
|
};
|
|
|
|
|
|
defineExpose({ resetButton });
|
|
|
|
</script>
|