vue-dropdown-advanced
Version:
A seriously advanced Vue Dropdown tool with many custom options.
912 lines (836 loc) • 37.6 kB
JavaScript
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "fb15");
/******/ })
/************************************************************************/
/******/ ({
/***/ "8bbf":
/***/ (function(module, exports) {
module.exports = require("vue");
/***/ }),
/***/ "b33c":
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "e42b":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_DropDownMenu_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("b33c");
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_DropDownMenu_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_DropDownMenu_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
/* unused harmony reexport * */
/* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_DropDownMenu_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default.a);
/***/ }),
/***/ "f6fd":
/***/ (function(module, exports) {
// document.currentScript polyfill by Adam Miller
// MIT license
(function(document){
var currentScript = "currentScript",
scripts = document.getElementsByTagName('script'); // Live NodeList collection
// If browser needs currentScript polyfill, add get currentScript() to the document object
if (!(currentScript in document)) {
Object.defineProperty(document, currentScript, {
get: function(){
// IE 6-10 supports script readyState
// IE 10+ support stack trace
try { throw new Error(); }
catch (err) {
// Find the second match for the "at" string to get file src url from stack.
// Specifically works with the format of stack traces in IE.
var i, res = ((/.*at [^\(]*\((.*):.+:.+\)$/ig).exec(err.stack) || [false])[1];
// For all scripts on the page, if src matches or if ready state is interactive, return the script tag
for(i in scripts){
if(scripts[i].src == res || scripts[i].readyState == "interactive"){
return scripts[i];
}
}
// If no match, return null
return null;
}
}
});
}
})(document);
/***/ }),
/***/ "fb15":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
// This file is imported into lib/wc client bundles.
if (typeof window !== 'undefined') {
if (true) {
__webpack_require__("f6fd")
}
var i
if ((i = window.document.currentScript) && (i = i.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))) {
__webpack_require__.p = i[1] // eslint-disable-line
}
}
// Indicate to webpack that this file can be concatenated
/* harmony default export */ var setPublicPath = (null);
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"743e9974-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DropDownMenu.vue?vue&type=template&id=b7b9f4be&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"mydropdown",staticClass:"vdda-container",style:(_vm.getStyle)},[_c('div',{staticClass:"vdda-dropdown-list"},_vm._l((_vm.my_items),function(item){return _c('div',{key:item.key,class:item.getClass,on:{"click":function($event){$event.stopPropagation();$event.preventDefault();return _vm.clickFromTempl(item)}}},[(item.isHeaderItem)?_c('div',{staticClass:"vdda-dropdown-item"},[_vm._v("\n "+_vm._s(item.text)+"\n ")]):(item.isActionItem)?_c('div',{staticClass:"vdda-dropdown-item"},[(item.hasImg)?_c('span',[_c('span',{class:item.imgClass})]):_vm._e(),_c('span',{staticClass:"flex"},[_vm._v("\n "+_vm._s(item.text)+"\n ")]),_vm._l((item.imagesRight),function(imgItem,index){return _c('span',{key:index,on:{"click":function($event){$event.stopPropagation();$event.preventDefault();return _vm.clickFromTempl(item, imgItem)}}},[_c('span',{class:imgItem.imgClass,attrs:{"title":imgItem.toolTip}})])})],2):(item.isRadioboxItem || item.isCheckboxItem)?_c('div',{staticClass:"vdda-dropdown-item"},[_c('span',{class:item.imgClass}),_c('span',{staticClass:"flex"},[_vm._v("\n "+_vm._s(item.text)+"\n ")])]):_vm._e()])}),0)])}
var staticRenderFns = []
// CONCATENATED MODULE: ./src/components/DropDownMenu.vue?vue&type=template&id=b7b9f4be&
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
// CONCATENATED MODULE: ./src/utils.ts
function getRandomNumber(to, from = 0) {
var diff = to - from;
if (diff <= 0)
return 0;
var r = Math.floor((Math.random() * diff));
return r + from;
}
function createGuid() {
var guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
return guid;
}
function createGuidRight5(pos = 5) {
var guid = createGuid();
guid = guid.substr(guid.length - pos);
return guid;
}
function instanceOf(typeA, typeB) {
return (typeA.constructor.toString() === typeB.toString());
}
// simply get a whole lot of coordinates of where the element is positioned
function getCoords(elem) {
if (!elem)
return undefined;
var box = elem.getBoundingClientRect();
var body = document.body;
var docEl = document.documentElement;
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
var clientTop = docEl.clientTop || body.clientTop || 0;
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
top = Math.round(top);
var left = box.left + scrollLeft - clientLeft;
left = Math.round(left);
var height = elem.offsetHeight;
var width = elem.offsetWidth;
var bottom = top + height;
var right = left + width;
var topFromWindow = window.innerHeight - top;
//var topFromWindow = window.innerHeight - top - 4; // NOTE - TODO - why do I need these 10 pixels???
var rightFromWindow = window.innerWidth - right;
return { top, left, height, width, bottom, right, topFromWindow, rightFromWindow };
}
function hasParentClassName(el, classname) {
if (!el)
return false;
if (el.className.contains(classname))
return true;
else {
return hasParentClassName(el.parentElement, classname);
}
}
// hand delay function that can be used when doing async operations
function delay(time) { return new Promise(resolve => setTimeout(() => resolve(), time)); }
;
// CONCATENATED MODULE: ./src/components/DropDownItems.ts
var DropDownDirection;
(function (DropDownDirection) {
DropDownDirection[DropDownDirection["DownRight"] = 0] = "DownRight";
DropDownDirection[DropDownDirection["DownLeft"] = 1] = "DownLeft";
DropDownDirection[DropDownDirection["UpRight"] = 2] = "UpRight";
DropDownDirection[DropDownDirection["UpLeft"] = 3] = "UpLeft";
})(DropDownDirection || (DropDownDirection = {}));
class DropDownItems_DropDownItemBase {
constructor(key = "", text = "") {
this.key = "";
this.text = "";
this.isDisabled = false;
this.data = undefined; // allow any object to be associated with this item - quite handy!
// if no key was given then we will allocate one
if (!key)
key = createGuidRight5();
// hand them over
this.key = key;
this.text = text;
}
get isActionItem() {
return instanceOf(this, ActionItem);
}
get isRadioboxItem() {
return instanceOf(this, RadioboxItem);
}
get isCheckboxItem() {
return instanceOf(this, CheckboxItem);
}
get isSeperatorItem() {
return instanceOf(this, SeperatorItem);
}
get isHeaderItem() {
return instanceOf(this, HeaderItem);
}
getBaseClass(description) {
return description + " " + (this.isDisabled ? "disabled" : "");
}
}
class SeperatorItem extends DropDownItems_DropDownItemBase {
constructor() {
super("", "");
}
get getClass() { return "seperator"; }
getStyle() {
return {
class: ['da-dropdown-item seperator']
};
}
}
class HeaderItem extends DropDownItems_DropDownItemBase {
constructor(header) {
super("", header);
}
get getClass() { return "header"; }
getStyle() {
return {
class: ['vdda-dropdown-item ']
};
}
}
// probably the most often used Item - by default the dropdown closes onClick
class ActionItem extends DropDownItems_DropDownItemBase {
constructor(key, text, image, isDisabled, clicked) {
super(key, text);
this.clicked = undefined; // a click handler in case the caller wishes to act on this click directly..
this.imageLeft = ""; // image (either fa or material)
this.imagesRight = []; // image (either fa or material)
this.imageLeft = image || "";
this.isDisabled = isDisabled || false;
this.clicked = clicked;
}
get hasImg() { return this.imageLeft.length > 0; }
get getClass() { return this.getBaseClass("action"); }
get imgClass() { return "img img-left mdi " + this.imageLeft; }
addRightImage(img, toolTip) { this.imagesRight.push(new RightImageInfo(img, toolTip)); }
ToString() {
return `*ActionItem* ${this.text} [${this.key}]`;
}
click(items) {
if (this.isDisabled)
return false;
if (this.clicked)
this.clicked(this);
return true;
}
}
// little helper class that groups some common props..
class CheckedItem extends ActionItem {
constructor() {
super(...arguments);
this.isChecked = false;
this.groupBy = "";
}
toString() {
return `*CheckedItem* ${this.text} [${this.key}] - ${this.isChecked} [groupBy: ${this.groupBy}]`;
}
}
// a 'checked' item - indicates a check/unchecked state
class CheckboxItem extends CheckedItem {
constructor(key, text, isChecked = false) {
super(key, text);
this.isChecked = isChecked;
}
get getClass() { return this.getBaseClass("checkbox"); }
// return "img img-border img-right mdi " + this.imageRight;
get imgClass() {
let s = "img-check ";
if (this.isChecked)
s += " checked ";
return s;
}
click(items) {
if (this.isDisabled)
return false;
this.isChecked = !this.isChecked;
return false;
}
}
// a 'checked' item - indicates a check/unchecked state
class RadioboxItem extends CheckedItem {
constructor(key, text, groupBy = "", isChecked = false) {
super(key, text);
this.groupBy = groupBy;
this.isChecked = isChecked;
}
get getClass() { return this.getBaseClass("radiobox"); }
// return "img img-border img-right mdi " + this.imageRight;
get imgClass() {
let s = "img-check option";
if (this.isChecked)
s += " checked ";
return s;
}
click(items) {
if (this.isDisabled)
return false;
items
.filter((item) => item.isRadioboxItem && item.groupBy == this.groupBy)
.forEach((item) => item.isChecked = false);
// check the incoming one (that was clicked)
this.isChecked = true;
return false;
}
}
class RightImageInfo {
constructor(img, toolTip) {
this.imageRight = "";
this.toolTip = "";
this.imageRight = img;
this.toolTip = toolTip || "";
}
get imgClass() {
return "img img-border img-right mdi " + this.imageRight;
}
}
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/ts-loader??ref--12-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/DropDownMenu.vue?vue&type=script&lang=ts&
// little trick bypassing bl** typescript checking of $element....
class DropDownMenuvue_type_script_lang_ts_MyData {
constructor() {
this.$element = null;
this.show = false;
this.my_direction = DropDownDirection.DownRight;
this.my_items = []; // this is the list we create the dropdown items from
}
}
class DropDownInfo {
constructor(item, items, imageOnRight) {
this.item = undefined;
this.items = [];
this.imageOnRight = undefined;
this.item = item;
this.items = items;
this.imageOnRight = imageOnRight;
}
}
// -----------------------------
// define the DropDownMenu
// -----------------------------
let vueDropDownMenu = external_commonjs_vue_commonjs2_vue_root_Vue_default.a.extend({
//export default Vue.extend({
name: "DropDownMenu",
props: {
parent: {
type: HTMLDivElement
},
items: {
type: Array,
default: function () {
return [];
}
},
itemsAsync: {
type: Function
},
click: {
type: Function
},
direction: {
type: [String],
default: function () {
return "down-right";
},
validator: function (value) {
value = value.toLowerCase();
return ['down-right', 'down-left', 'up-right', 'up-left'].indexOf(value) !== -1;
}
},
minWidth: {
type: String,
default: function () {
return "0";
}
},
maxWidth: {
type: String,
default: function () {
return "0";
}
},
maxHeight: {
type: String,
default: function () {
return "0";
}
}
},
data: () => new DropDownMenuvue_type_script_lang_ts_MyData(),
methods: {
clickFromTempl(item, rightImgInfo = undefined) {
// if item is disabled then stop
if (item.isHeaderItem || item.isSeperatorItem || item.isDisabled)
return;
// pass the click instruction down to the implementation (like ActionItem, CheckboxItem, etc)
let closeDrowDown = item.click(this.items);
// if implementer wants us to close the dropdown then do so
if (closeDrowDown)
this.toggle();
// if a click handler is given for the entire dropdown then call it with full info
// also, raise this on the nextTick so vue renders the item properly first!
// create an info object for our items
let info = new DropDownInfo(item, this.items, rightImgInfo);
// allow the UI to render first
this.$nextTick(_ => {
// if a callback click handler was given then call it
if (this.click)
this.click(info);
// and always raise the event in case the user has hooked up through events
this.$emit('click', info);
});
},
getCoords() {
let el = this.$element;
if (!el)
return {};
let coords = getCoords(el);
return coords;
},
close(e) {
if (!this.$element.contains(e.target)) {
this.toggle();
}
},
setDropDownItems(items) {
this.my_items = items;
this.$nextTick(_ => this.setTitleAttributesIfNeccesary());
},
setTitleAttributesIfNeccesary() {
// get a list of all the 'text's from the all items
let elementList = this.$element.querySelectorAll("div.vdda-dropdown-list .flex");
elementList.forEach(el => {
el.setAttribute('title', ""); // first clear
// trick to check if the content would require a scroll
if (el.offsetWidth < el.scrollWidth)
el.setAttribute('title', el.innerText);
});
},
async toggle() {
// toggle the 'show' property
this.show = !this.show;
// if we have an async retrieval of items then invoke it here
if (this.show) {
// if the user has given an async method then call this
if (this.itemsAsync) {
let myitems = await this.itemsAsync();
if (this.show) // important! - after await we have to make sure that we are still wishing to show the items!
this.setDropDownItems(myitems);
}
else if (this.items) {
// user gave a list
this.setDropDownItems(this.items);
}
}
else {
// clear out the list of items (replace with an empty array so we hang on to the original list)
this.setDropDownItems([]);
}
}
},
computed: {
getStyle() {
let coords = this.getCoords();
if (!coords)
return {};
// define the height of the element we are attached to
let elHeightWithPx = coords.height + "px";
// define the style for this cell
let styleBase = {
position: "absolute",
display: this.show ? "inline-block" : "none"
};
// adjust the style based on the required orientation (direction)
if (this.my_direction == DropDownDirection.DownRight || this.my_direction == DropDownDirection.UpRight)
styleBase.left = "-2px";
if (this.my_direction == DropDownDirection.DownLeft || this.my_direction == DropDownDirection.UpLeft)
styleBase.right = "-2px";
if (this.my_direction == DropDownDirection.UpLeft || this.my_direction == DropDownDirection.UpRight)
styleBase.bottom = elHeightWithPx;
if (this.my_direction == DropDownDirection.DownLeft || this.my_direction == DropDownDirection.DownRight)
styleBase.top = elHeightWithPx;
return styleBase;
}
},
watch: {
show: function (newValue) {
if (newValue)
document.addEventListener('click', this.close);
else
document.removeEventListener('click', this.close);
}
},
components: {},
mounted() {
//
let el = this.$refs.mydropdown;
this.$element = this.parent || el.parentElement;
// set the default
this.my_direction = DropDownDirection.DownRight;
// check if a direction was given
if (typeof this.direction === "string") {
if (this.direction == "down-left")
this.my_direction = DropDownDirection.DownLeft;
else if (this.direction == "up-left")
this.my_direction = DropDownDirection.UpLeft;
else if (this.direction == "up-right")
this.my_direction = DropDownDirection.UpRight;
}
else if (this.direction) {
this.my_direction = this.direction;
}
// When inserting the DropDownMenu into the template all is ok, but when
// we create the dropdown programmatically we have to wait for a render cycle
// to have passed (otherwise the template has not yet rendered)
external_commonjs_vue_commonjs2_vue_root_Vue_default.a.nextTick(() => {
// get a ref to our vdda-dropdown-list element
let elDDA = this.$element.querySelector("div.vdda-dropdown-list");
// check for overrides of the default min/max width/height
if (this.minWidth != "0")
elDDA.style.minWidth = this.minWidth;
if (this.maxWidth != "0")
elDDA.style.maxWidth = this.maxWidth;
if (this.maxHeight != "0")
elDDA.style.maxHeight = this.maxHeight;
// if the source element does not have a 'position' set then we'll set it to 'relative'
var posNotSet = this.$element.position == "" || this.$element.position == "static";
if (!posNotSet)
this.$element.style.position = "relative";
// listen for 'clicks' on the given parent element which shows the dropdown
this.$element.addEventListener("click", this.toggle);
});
},
beforeDestroy() {
this.$element.addEventListener("click", this.toggle);
}
});
// -------------------------------------
// We export a DropDownControl object so the user can programmatically create
// a dropdown menu for any given DOM element as and when needed (without
// editing the HTML template!)
// -------------------------------------
class DropDownMenuvue_type_script_lang_ts_DropDownControl {
constructor(el) {
this._element = null;
this._show = false;
this.openOnCreate = false;
this.direction = "down-right";
this.minWidth = "0";
this.maxWidth = "0";
this.maxHeight = "0";
this._element = el;
}
createMenu() {
// create options object I can pass in to the Vue component
let pdata = {
parent: this._element,
items: this.items,
itemsAsync: this.itemsAsync,
direction: this.direction,
click: this.onClick,
minWidth: this.minWidth,
maxWidth: this.maxWidth,
maxHeight: this.maxHeight
};
// create new DropDownMenu with the given properties
let x = new vueDropDownMenu({
propsData: pdata
});
// and mount this to the given parent element
var component = x.$mount();
this._element.appendChild(component.$el);
// wait for nextTick to automatically open the dropdown
if (this.openOnCreate)
external_commonjs_vue_commonjs2_vue_root_Vue_default.a.nextTick(() => this._element.click());
}
}
// CONCATENATED MODULE: ./src/components/DropDownMenu.vue?vue&type=script&lang=ts&
/* harmony default export */ var DropDownMenuvue_type_script_lang_ts_ = (vueDropDownMenu);
// EXTERNAL MODULE: ./src/components/DropDownMenu.vue?vue&type=style&index=0&lang=scss&
var DropDownMenuvue_type_style_index_0_lang_scss_ = __webpack_require__("e42b");
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
function normalizeComponent (
scriptExports,
render,
staticRenderFns,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier, /* server only */
shadowMode /* vue-cli only */
) {
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (render) {
options.render = render
options.staticRenderFns = staticRenderFns
options._compiled = true
}
// functional template
if (functionalTemplate) {
options.functional = true
}
// scopedId
if (scopeId) {
options._scopeId = 'data-v-' + scopeId
}
var hook
if (moduleIdentifier) { // server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__
}
// inject component styles
if (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier)
}
}
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook
} else if (injectStyles) {
hook = shadowMode
? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
: injectStyles
}
if (hook) {
if (options.functional) {
// for template-only hot-reload because in that case the render fn doesn't
// go through the normalizer
options._injectStyles = hook
// register for functioal component in vue file
var originalRender = options.render
options.render = function renderWithStyleInjection (h, context) {
hook.call(context)
return originalRender(h, context)
}
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate
options.beforeCreate = existing
? [].concat(existing, hook)
: [hook]
}
}
return {
exports: scriptExports,
options: options
}
}
// CONCATENATED MODULE: ./src/components/DropDownMenu.vue
/* normalize component */
var DropDownMenu_component = normalizeComponent(
DropDownMenuvue_type_script_lang_ts_,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var DropDownMenu = (DropDownMenu_component.exports);
// CONCATENATED MODULE: ./src/data.ts
// Demo class - allow the sample to produce demo output quickly
const getItems = (context = '') => {
var arr = [];
if (context == 'simple') {
arr.push(new ActionItem("A", "Holiday in France", "", false, _ => alert(_.key)));
arr.push(new SeperatorItem());
arr.push(new ActionItem("B", "Go to California "));
arr.push(new ActionItem("C", "Visit the United Kingdom"));
}
if (context == 'logout-simple') {
arr.push(new ActionItem("logout", "Logout", "mdi-exit-run", false, _ => alert(_.key)));
arr.push(new SeperatorItem());
arr.push(new ActionItem("profile", "Show Profile", "mdi-face"));
arr.push(new ActionItem("shortcuts", "Show Shortcuts", "mdi-access-point"));
arr.push(new ActionItem("setting", "System Settings and a whole lot more and stuff", "mdi-cogs"));
}
if (context == 'logout') {
var item = new ActionItem("A", "Logout Show outstanding alerts", "mdi-cloud-download", true);
item.data = { pos: context };
item.addRightImage("mdi-cogs", "settings");
item.addRightImage("mdi-exit-to-app", "exit the application");
arr.push(item);
arr.push(new SeperatorItem());
item = new ActionItem("profile", "Show User Profile", "mdi-face");
item.addRightImage("fa-mail-forward", "forward this item");
//item.textMarginRight = 32;
arr.push(item);
arr.push(new ActionItem("bell", "Show outstanding alerts", "mdi-bell-ring"));
arr.push(new ActionItem("shortcuts", "Show Bitcoin Valuation", "mdi-bitcoin"));
arr.push(new ActionItem("setting", "System Settings", "mdi-cogs"));
}
if (context == 'options-simple') {
arr.push(new HeaderItem("Choose your activities:"));
arr.push(new CheckboxItem("beach", "Visit the beach"));
arr.push(new CheckboxItem("town", "Walk through town"));
arr.push(new CheckboxItem("museum", "Visit musea"));
arr.push(new CheckboxItem("hirecar", "Hire a car"));
arr.push(new CheckboxItem("nothing", "Do absolutely nothing and less then that!"));
}
if (context == 'options') {
arr.push(new RadioboxItem("keyZ", "My Option 1", "A"));
arr.push(new RadioboxItem("keyA", "My Option 2", "A", true));
arr.push(new SeperatorItem());
arr.push(new ActionItem("keyX1", "Take Action X1"));
arr.push(new ActionItem("keyX2", "Take Action X2"));
arr.push(new SeperatorItem());
arr.push(new CheckboxItem("keyA2", "Buy Apples", true));
arr.push(new CheckboxItem("keyB2", "Buy Bananas", true));
arr.push(new CheckboxItem("keyC2", "Buy Pomegranates"));
arr.push(new SeperatorItem());
arr.push(new RadioboxItem("keyO2", "Haarlem is the best place to live", "C"));
arr.push(new RadioboxItem("keyO3", "Amsterdam is the best place to live", "C"));
}
if (context == "showcase") {
var item = new ActionItem("booknow", "Book now!", "mdi-airplane-takeoff");
item.data = { pos: context }; // save some random data with this item..
item.addRightImage("mdi-cogs", "settings");
item.addRightImage("mdi-exit-to-app", "exit the application");
arr.push(item);
arr.push(new SeperatorItem());
arr.push(new HeaderItem("Choose your destination:"));
arr.push(new RadioboxItem("california", "California and Santa Monica", "A"));
arr.push(new RadioboxItem("newyork", "New York", "A"));
arr.push(new RadioboxItem("miami", "Miami", "A"));
arr.push(new SeperatorItem());
arr.push(new HeaderItem("Mode of transport:"));
arr.push(new RadioboxItem("car", "By car", "B"));
arr.push(new RadioboxItem("boat", "By boat", "B", true));
arr.push(new RadioboxItem("plane", "By plane", "B"));
arr.push(new SeperatorItem());
arr.push(new HeaderItem("Choose your activities:"));
arr.push(new CheckboxItem("beach", "Visit the beach"));
arr.push(new CheckboxItem("town", "Walk through town"));
arr.push(new CheckboxItem("park", "Visit Parks"));
arr.push(new CheckboxItem("hirecar", "Hire a car"));
arr.push(new CheckboxItem("nothing", "Do absolutely nothing !"));
}
return arr;
};
// CONCATENATED MODULE: ./src/components/index.js
// ----------------------------------------
// don't forget to import the matching css
// ----------------------------------------
//import 'vue-dropdown-advanced/dist/vue-dropdown-advanced.css
// ----------------------------------------
// in case one wishes to use the materialdesignicons - simply include these and it works!
//import '@mdi/font/css/materialdesignicons.css'
// ----------------------------------------
// ----------------------------------------
// export all classes we wished to export
// ----------------------------------------
/* harmony default export */ var components = ({ DropDownMenu: DropDownMenu, DropDownControl: DropDownMenuvue_type_script_lang_ts_DropDownControl, DropDownInfo: DropDownInfo,
DropDownItemBase: DropDownItems_DropDownItemBase, ActionItem: ActionItem, SeperatorItem: SeperatorItem, CheckboxItem: CheckboxItem, RadioboxItem: RadioboxItem, RightImageInfo: RightImageInfo,
HeaderItem: HeaderItem, DropDownDirection: DropDownDirection, getTestItems: getItems, delay: delay, createGuidRight5: createGuidRight5 });
// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (components);
/***/ })
/******/ })["default"];