source: main/trunk/model-interfaces-dev/atea/ocr/src/components/EditAction.vue@ 35749

<template>
<div class="edit-action">
    <button v-if="!toggleMode" class="btn-fab action-button" @click="$emit('action')">
        <span class="material-icons mdi-l">{{ icon }}</span>
    </button>

    <toggle-button v-if="toggleMode" class="action-button" v-model="myModelValue">
        <span class="material-icons mdi-l">{{ icon }}</span>
    </toggle-button>

    <div class="card infotab">{{ description }}</div>
</div>
</template>

<style lang="scss" scoped>
.edit-action {
    display: flex;
    position: relative;

    .action-button:hover + .infotab {
        visibility: visible;
        min-width: 10em;
    }
}

.infotab {
    position: absolute;
    height: 70%;
    top: 15%;
    left: 120%;

    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;

    width: 0;
    min-width: 0;
    padding: 0 0.2em;

    white-space: nowrap;
    transition-duration: var(--transition-duration);
}
</style>

<script>
export default {
    name: "EditAction",
    props: {
        icon: String,
        description: String,
        modelValue: Boolean,
        toggleMode: Boolean
    },
    emits: [ "update:modelValue", "action" ],
    computed: {
        myModelValue: {
            get() {
                return this.modelValue;
            },
            set(newValue) {
                this.$emit("update:modelValue", newValue);
            }
        }
    }
}
</script>