41 lines
953 B
Vue
41 lines
953 B
Vue
<template>
|
|
<button class="btn btn-label-primary btn-icon" @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-alt');
|
|
|
|
watch(
|
|
() => props.isActive,
|
|
newVal => {
|
|
buttonClass.value = newVal ? 'bx bx-x' : 'bx bx-edit-alt';
|
|
},
|
|
);
|
|
|
|
const toggleText = () => {
|
|
if (props.isToggleEnabled) {
|
|
buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
|
|
}
|
|
};
|
|
const resetButton = () => {
|
|
buttonClass.value = 'bx bx-edit-alt';
|
|
};
|
|
|
|
defineExpose({ resetButton });
|
|
</script>
|