vue directive to put elements in a disabled state

disabled.js

/**
 * Directive to easily toggle utility classes to disable elements
 * 
 * Default usage: 
 * v-disabled="true" // adds default disabled classes
 * 
 * Advanced usage:
 * v-disabled:"{ disabled: true, classes: ['hidden']" // adds specified classes when disabled is true
 * 
 */

import Vue from 'vue'

const DEFAULT_DISABLED_CLASSES = [
    'cursor-not-allowed',
    'opacity-50',
]

Vue.directive('disabled', function (el, binding, vnode) {
    let isDisabled = binding.value.disabled || binding.value
    let disabledStateClasses = binding.value.classes || DEFAULT_DISABLED_CLASSES

    if (vnode.elm && vnode.elm.classList) {
        if (isDisabled) {
            disabledStateClasses.forEach((item) => vnode.elm.classList.add(item))
        } else {
            disabledStateClasses.forEach((item) => vnode.elm.classList.remove(item))
        }
    }
})