vue-selectbox v0.1.1-develop

vue-anchor-link

Setup

This package relies on a other package of us: Merginator (used for merging object props)

npm install merginator --save-dev
npm install vue-select-box --save-dev

yarn add merginator --dev
yarn add vue-select-box --dev

import Selectbox from 'vue-select-box';
Vue.component('selectbox', Selectbox);

Polyfill

This package does not have all features in IE out of the box. Closing the selectbox when clicking outside of the box won't work in IE without a polyfill.

If you need support for IE you need to add this code to your application:

// Polyfill for element.closest in IE
if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector ||
    Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function (s) {
    let el = this;

    do {
      if (el.matches(s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}

Usage

<selectbox 
  :name="number" 
  :options="[{ name: 1, selected: false }, { name: 2, selected: true }]" 
  :scrollbar="{ active: true, settings: { visible: 8, height: 40, smallHeight: 30 }}" 
  :small="true" 
  @optionClicked="doSomething">
  <template #icon><i class="fas fa-chevron-down"></i></template>
  <template #option="{ option }">{{ option.name }}</template>
</selectbox>

Props

name: The name of the selectbox (string) options: The selectable options (array of objects) scrollbar: All options for the scrollbar (object) small Boolean. Set to true if you want a small selectbox

Events

Emits and event of @optionClicked so the parent can handle further actions