Show info about a disabled switch in Vue (dashboard D2)

[BartButenaers]

Hi folks,

I started the painfully long journey of migrating my ui nodes to VueJs. To be honest I have no idea why VueJs has become so popular: magic all over the place, and if some of the magic fails you have no idea what is going. Must be me, because the entire planet loves it. Anyway it is NOT my intention to discuss Vue here...

I am stuck, and after a lots of hours of fighting I hope to get some help here. I have a switch button, and when it is disabled I want to show somehow visually to the user why it is disabled.

This is my switch:

<template>
    <v-switch v-model="switchState" :label="switchLabel" :disabled="!switchEnabled" :loading="loadingEnabled">
</template>

<script>
export default {
    ...
    data () {
        return {
            switchState: false,
            switchEnabled: false,
            switchLabel: this.props.switchLabel,
            switchTooltip: 'Not subscribed for receiving notifications',
            loadingEnabled: false,
            serviceWorkerRegistration: null
        }
    },
    methods: {
        action ($evt) {
           // Switch is clicked
        }
    }

The switchTooltip variable contains the informational text that should be displayed somehow.

• I tried many ways to add a tooltip for the switch (when switchTooltip contains text) but I failed: most of the time the tooltip does not appear. And when it appeared all my bindings and event handlers were not working anymore I am also not sure whether a tooltip would work well on a touch device, because you cannot hoover across the switch then. Not sure...

• Perhaps it would be better to show somehow a question mark icon after the switch, and show the text when the icon is clicked. But again it is not clear to me yet how to do that...

• Others?

I would appreciate a lot if anybody with VueJs knowledge could provide me a code snippet for my switch, so I can continue with my migration.

Thanks!!
Bart

[joepavitt]

Hi Bart, I'm not working today, but can take a look tomorrow, or if anyone can help in the meantime, please do.

[joepavitt]

I will stress though, differences between Vue and Vuetify.

"Vue" is the framework that provides methods, etc.

"Vuetify" is then the component library we are using.

There is nothing stopping you from ifnoring Vuetify entirely and just writing raw JS/HTML/CSS components with the Vue framework.

Vuetify I agree, has a few gaps, and inconsistencies, that can be very frustrating. Just having a quick play for the past 15 mins, and yeah, it's frustrating... v-tooltip- seems to be incredibly fragile. Doing my best to get a working example for you though.

[joepavitt]

Two alternatives:

1. v-tooltip - feels messy with the layout I have with groups/templates, but is functional
2. :message on v-switch directly - Found this option in the Vuetify docs and I think renders quite nicely?

<template>
    <v-tooltip>
        <template v-slot:activator="{ props }">
            <div v-bind="props">
                <v-switch v-model="switchState" :label="switchLabel" :disabled="!switchEnabled" :loading="loadingEnabled" :hide-details="'auto'"></v-switch>
            </div>
        </template>
        <span>
            {{ switchTooltip }}
        </span>
    </v-tooltip>

    <v-switch v-model="switchState" :label="switchLabel" :disabled="!switchEnabled" :loading="loadingEnabled" :messages="switchTooltip" :hide-details="'auto'"></v-switch>   
</template>

<script>
    export default {
        data () {
            return {
                switchState: false,
                switchEnabled: false,
                switchLabel: "My Label",
                switchTooltip: 'Not subscribed for receiving notifications',
                loadingEnabled: false,
                serviceWorkerRegistration: null
            }
        },
        methods: {
            action ($evt) {
            // Switch is clicked
            }
        }
    }
</script>
<style>
.v-switch .v-input__details {
    align-items: center;
    padding: 0;
}
</style>

They render accordingly (inside a ui-template):

[BartButenaers]

@joepavitt

Two alternatives:

Oh no. It was absolutely not my intention to let you work on your unpaid free day...
Of course it is appreciated a LOT!!!!
Will try it tonight after work and familly stuff...

@joepavitt

There is nothing stopping you from ifnoring Vuetify entirely and just writing raw JS/HTML/CSS components with the Vue framework.

Ah yes I could have done that. But it feels somehow a bit wrong to circumvent the framework...
I am getting to old for all these new technologies

@joepavitt

v-tooltip- seems to be incredibly fragile

That was indeed also what I was thinking. It surely isn't really noob compliant...

@joepavitt

I think renders quite nicely?

Yes the look and feel on your screenshot would do the job for me. Thanks for your assistance!!!

[BartButenaers]

@joepavitt,
That works like a charm! Looks very good to me.
Thanks!!