Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/vreg/components/Forms/vueDelayedInputMask/addons/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<script>
import TooltipAddon from "./TooltipAddon.vue";
export const TOOLTIP_MESSAGE = "Click me for view hidden data";
const TOOLTIP_CLASSNAME = "need-tooltip";

export default {
    name: "InputAddon",
    props: {
        icon: {
            type: String,
            require: true,
        },
        label: {
            type: String,
        },
        needTooltip: {
            type: Boolean,
            default: () => {
                return true;
            },
        },
        needTooltipClassName: {
            type: String,
            default: () => {
                return TOOLTIP_CLASSNAME;
            },
        },
    },
    methods: {
        fire($event) {
            this.$emit($event.type, $event);
        },
    },
    render(h) {
        let toolTip = h(TooltipAddon, {
            props: {
                tooltipText: TOOLTIP_MESSAGE,
            },
        });

        const { icon, needTooltip, label, needTooltipClassName } = this;

        return h(
            "span",
            {
                class: {
                    [icon]: true,
                    [needTooltipClassName]: needTooltip,
                },
                attrs: {
                    "aria-hidden": true,
                },
                on: {
                    click: this.fire,
                    mousedown: this.fire,
                    mouseup: this.fire,
                },
            },
            [needTooltip ? (this.$slots.tooltip ? this.$slots.tooltip : toolTip) : null, label]
        );
    },
};
</script>
<style scoped="sccs">
.need-tooltip {
    position: relative;
}
.need-tooltip .tooltip {
    visibility: hidden;
    width: 120px;
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    position: absolute;
    z-index: 1;
    top: 5%;
    left: 105%;
}
.need-tooltip:hover .tooltip {
    visibility: visible;
}
</style>