@markbind/vue-components

MarkBind Vue components

This folder contains MarkBind's Vue.js UI components.

Most of the styles are based on Bootstrap's markup and CSS, but no dependency on Bootstrap's JavaScript is required. The only required dependencies are:

• Vue.js (required ^v2.x.x, test with v2.5.16).
• Bootstrap CSS (required 4.x.x, test with 4.1.1). MarkBind's Vue components doesn't depend on a very precise version of Bootstrap.

Components / directives

Many of the components under this folder were originally from MarkBind/vue-strap, forked from yuche/vue-strap, and modified to suit MarkBind's needs for educational and documentation websites.

Some custom directives were also added for MarkBind's use.

MarkBind components newly created or revamped since moving here

• Question.vue
• QOption.vue
• Quiz.vue

MarkBind components ported from Markbind/vue-strap:

• Pic.vue
• Retriever.vue
• Searchbar.vue
• SearchbarPageItem.vue
• Thumbnail.vue
• TipBox.vue

Custom directives ported from Markbind/vue-strap

• Closeable.js
• Float.js

VueStrap components modified for use in MarkBind

• Affix.vue
• Dropdown.vue
• Navbar.vue
• NestedPanel.vue
• MinimalPanel.vue
• Tab.vue
• TabGroup.vue
• Tabset.vue
• Typeahead.vue

Installation

Browser globals

The dist folder contains components.min.js with all components exported in the window.MarkBindVue object.

<script src="path/to/vue.js"></script>
<script src="path/to/components.min.js"></script>
<script>
    var vm = new Vue({
        components: {
            alert: MarkBindVue.alert
        },
        el: "#app",
        data: {
            showRight: false,
            showTop: false
        }
    })
</script>

Docs

See the documentation with live editable examples.

Local Setup

• Install with npm install.
• Build with npm run build.

Lint the code for any code and style errors using ESLint

• For Unix: npm run lint
• For Windows: npm run lintwin

License

Both vue-strap and the modifications made are licensed under The MIT License.