@mathewparet/vue-bs-disabled

@mathewparet/vue-bs-disabled

A Vue.Js directive to disable bootstrap controls. Unlike normal disable property of control buttons, bootstrap requires disabled added to the class to get the control to be disabled. This is useful mostly when you need to disable some controls in VUE based on certain conditions.

Build Setup

# install dependencies
npm install

# build for production with minification
npm run build

Installation

npm i @mathewparet/vue-bs-disabled

Initial Configuration Usage

// In your App.js
import Vue from 'vue';
import BsDisabled from '@mathewparet/vue-bs-disabled';
Vue.use(BsDisabled)

To use the directive simply add v-bs-disabled to the corresponding element with the required condition.

Simple Usage Example

<div>
    <a class="btn btn-primary" v-bs-disabled="1==1">This button is disabled</a><br>
    <a class="btn btn-primary" v-bs-disabled="1==0">This button is enabled</a><br>
    <a class="btn btn-primary" v-bs-disabled.hidden="1==1">This button is hidden</a><br>
    <a class="btn btn-primary" v-bs-disabled.hidden="1==0">This button is enabled + visible</a><br>
</div>

Advanced Usage Example

<div>
    <a class="btn btn-primary" v-bs-disabled="{hidden: false, condition: 1==1}">This button is disabled</a><br>
    <a class="btn btn-primary" v-bs-disabled="{hidden: false, condition: 1==0}">This button is enabled</a><br>
    <a class="btn btn-primary" v-bs-disabled="{hidden: true, condition: 1==1}">This button is hidden</a><br>
    <a class="btn btn-primary" v-bs-disabled="{hidden: true, condition: 1==0}">This button is enabled + visible</a><br>
</div>

Note

When both .hidden modifier and the hidden property of the v-bs-disabled directives are present, then the element is hidden if the condition evaluates to true.