@lemonadejs/dropdown 3.0.4 → 3.0.9

package/dist/index.js

@@ -1,333 +1,630 @@
-/**
- * Implementar o page up and down
- * botao reset e done
- * traducoes
- */
-if (!lemonade && typeof (require) === 'function') {
-    var lemonade = require('lemonadejs');
-}
-
-if (!Modal && typeof (require) === 'function') {
-    var Modal = require('@lemonadejs/modal');
-}
-
-if (!lazyloading && typeof (require) === 'function') {
-    var lazyloading = require('@lemonadejs/lazy-loading');
-}
-
-; (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    global.Dropdown = factory();
-}(this, (function () {
-
-    const Dropdown = function () {
-        let self = this;
-
-        let group = null;
-        let value = [];
-        let cursor = null;
-
-        if (! self.width) {
-            self.width = 260;
-        }
-
-        const setCursor = function(index) {
-            let item = self.modal.lazyLoading.data[index];
-            if (typeof(item) !== 'undefined') {
-                item.cursor = true;
-                // Move to the item position: TODO!
-                if (! item.el || ! item.el.parentNode) {
-                    self.modal.lazyLoading.goto(item);
-                }
-            }
-        }
-
-        const removeCursor = function(reset) {
-            if (typeof(self.modal.lazyLoading.data[cursor]) !== 'undefined') {
-                self.modal.lazyLoading.data[cursor].cursor = false;
-            }
-            if (reset) {
-                // Cursor is null
-                cursor = null;
-            }
-        }
-
-        const moveCursor = function(direction, jump) {
-            // Remove cursor
-            removeCursor();
-            // Last item
-            let last = self.modal.lazyLoading.data.length - 1;
-            if (jump) {
-                if (direction < 0) {
-                    cursor = 0;
-                } else {
-                    cursor = last;
-                }
-            } else {
-                // Position
-                if (cursor === null) {
-                    cursor = 0;
-                } else {
-                    // Move previous
-                    cursor = cursor + direction;
-                }
-                // Reach the boundaries
-                if (direction < 0) {
-                    // Back to the last one
-                    if (cursor < 0) {
-                        cursor = last;
-                    }
-                } else {
-                    // Back to the first one
-                    if (cursor > last) {
-                        cursor = 0;
-                    }
-                }
-            }
-            // Add cursor
-            setCursor(cursor);
-        }
-
-        const updateLabel = function() {
-            if (value && value.length) {
-                self.input.textContent = value.filter(v => v.selected).map(i => i.text).join('; ');
-            }
-        }
-
-        self.onclose = function() {
-            // Identify the new state of the dropdown
-            self.state = false;
-            // Update label
-            updateLabel();
-            // Update value
-            self.value = getValue();
-            // Editable
-            self.el.children[0].removeAttribute('contenteditable');
-        }
-
-        self.onopen = function() {
-            // Value
-            let v = value[value.length-1];
-            // Move to the correct position
-            if (v) {
-                // Go to the last item in the array of values
-                self.modal.lazyLoading.goto(v);
-                // Mark the position of the cursor to the same element
-                cursor = self.modal.lazyLoading.data.indexOf(v);
-            } else {
-                // Loading the data inside the lazy loading
-                self.modal.lazyLoading.data = self.data;
-            }
-            // Reset search
-            if (self.autocomplete) {
-                // Clear input
-                self.input.textContent = '';
-                // Editable
-                self.el.children[0].setAttribute('contenteditable', true);
-                // Focus on the item
-                self.el.children[0].focus();
-            }
-
-            self.state = true;
-        }
-
-        const setValue = function(v) {
-            // Values
-            let newValue;
-            if (! v) {
-                newValue = [];
-            } else if (! Array.isArray(v)) {
-                if (typeof(v) === 'string') {
-                    newValue = v.split(';');
-                } else {
-                    newValue = [v];
-                }
-            } else {
-                newValue = v;
-            }
-
-            // Width && values
-            value = [];
-
-            self.data.map(function(s) {
-                // Select values
-                if (newValue.indexOf(s.value) !== -1) {
-                    s.selected = true;
-                    value.push(s);
-                } else {
-                    s.selected = false;
-                }
-            });
-
-            // Update label
-            updateLabel();
-        }
-
-        const getValue = function() {
-            if (value && value.length) {
-                return value.filter(v => v.selected).map(i => i.value);
-            }
-            return [];
-        }
-
-        self.onload = function () {
-            // Set the initial value
-            if (self.value) {
-                setValue(self.value);
-            }
-            // Re-order to make sure groups are in sequence
-            self.data = self.data.sort((a, b) => {
-                // Compare groups
-                if (a.group && b.group) {
-                    return a.group.localeCompare(b.group);
-                }
-                return 0;
-            });
-            // Update the data of the lazy loading component
-            self.modal.lazyLoading.data = self.data;
-            // Estimate width
-            let width = self.width;
-            // Width && values
-            self.data.map(function (s) {
-                // Estimated width of the element
-                width = Math.max(width, s.text.length * 8);
-            });
-            // Adjust the width
-            let w = self.el.children[0].offsetWidth;
-            if (width < w) {
-                width = w;
-            }
-            // Estimated with based on the text
-            if (self.width < width) {
-                self.width = width;
-            }
-            self.el.style.width = self.width + 'px';
-
-            // Focus out of the component
-            self.el.addEventListener('focusout', function(e) {
-                if (! (e.relatedTarget && self.el.contains(e.relatedTarget)) && ! self.el.contains(e.relatedTarget)) {
-                    if (! self.modal.closed) {
-                        self.close();
-                    }
-                }
-            })
-
-            self.el.addEventListener('keydown', function(e) {
-                if (e.key === 'ArrowUp') {
-                    moveCursor(-1);
-                } else if (e.key === 'ArrowDown') {
-                    moveCursor(1);
-                } else if (e.key === 'Home') {
-                    moveCursor(-1, true);
-                } else if (e.key === 'End') {
-                    moveCursor(1, true);
-                } else if (e.key === 'Enter') {
-                    // Select
-                    if (typeof(self.modal.lazyLoading.data[cursor]) !== 'undefined') {
-                        self.select(e, self.modal.lazyLoading.data[cursor]);
-                        e.preventDefault();
-                        e.stopImmediatePropagation();
-                    }
-                } else {
-                    if (self.state && self.autocomplete) {
-                        // Filter options
-                        let data;
-                        if (! self.input.textContent) {
-                            data = self.data;
-                        } else {
-                            data = self.data.filter(item => {
-                                return item.text.toLowerCase().includes(self.input.textContent.toLowerCase()) ||
-                                    (item.group && item.group.toLowerCase().includes(self.input.textContent.toLowerCase()));
-                            });
-                        }
-                        // Cursor
-                        removeCursor(true);
-                        // Update the data from the dropdown
-                        self.modal.lazyLoading.data = data;
-                    }
-                }
-            })
-
-            if (document.documentElement.clientWidth < 800) {
-                self.animation = true;
-            }
-        }
-
-        self.onchange = function (prop) {
-            if (prop === 'value') {
-                setValue(self.value);
-            }
-        }
-
-        self.open = function () {
-            if (self.modal.closed) {
-                self.modal.closed = false;
-            }
-        }
-
-        self.close = function () {
-            // Close the modal
-            self.modal.closed = true;
-            // Remove cursor
-            removeCursor(true);
-        }
-
-        self.toggle = function() {
-            if (self.modal.closed) {
-                self.open();
-            } else {
-                self.close();
-            }
-        }
-
-        self.select = function(e, s) {
-            if (self.multiple === true) {
-                let position = value.indexOf(s);
-                if (position === -1) {
-                    value.push(s);
-                    s.selected = true;
-                } else {
-                    value.splice(position, 1);
-                    s.selected = false;
-                }
-            } else {
-                if (value[0]) {
-                    value[0].selected = false;
-                }
-                s.selected = true;
-                value = [s];
-                // Close the modal
-                self.close();
-            }
-        }
-
-        self.getGroup = function(g) {
-            let groupName = g && g === group ? '' : g;
-            group = g;
-            return groupName;
-        }
-
-        return `<div class="lm-dropdown" data-type="{{self.type}}" data-state="{{self.state}}">
-            <div class="lm-dropdown-input" onmousedown="self.toggle" onfocus="self.open" placeholder="{{self.placeholder}}" :ref="self.input" tabindex="0"></div>
-            <Modal :ref="self.modal" :closed="true" :onclose="self.onclose" :onopen="self.onopen" :width="self.width" :animation="self.animation">
-                <Lazyloading :data="self.data" :ref="self.lazyLoading" :height="330">
-                    <div class="lm-dropdown-item" onclick="self.parent.parent.parent.select" data-cursor="{{self.cursor}}" data-selected="{{self.selected}}" data-group="{{self.parent.parent.parent.getGroup(self.group)}}">
-                        <div><img :src="self.image" /><span>{{self.text}}</span></div>
-                    </div>
-                </Lazyloading>    
-            </Modal>
-        </div>`;
-    }
-
-    lemonade.setComponents({ Dropdown: Dropdown });
-
-    return function (root, options) {
-        if (typeof (root) === 'object') {
-            lemonade.render(Dropdown, root, options)
-            return options;
-        } else {
-            return Dropdown.call(this, root)
-        }
-    }
+/**
+ * Implementar o page up and down
+ * botao reset e done
+ * traducoes
+ */
+if (!lemonade && typeof (require) === 'function') {
+    var lemonade = require('lemonadejs');
+}
+
+if (!Modal && typeof (require) === 'function') {
+    var Modal = require('@lemonadejs/modal');
+}
+
+; (function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    global.Dropdown = factory();
+}(this, (function () {
+
+    // Default row height
+    let defaultRowHeight = 24;
+
+    const lazyLoading = function(self) {
+        /**
+         * Compare two arrays to see if contains exact the same elements
+         * @param {number[]} a1
+         * @param {number[]} a2
+         */
+        const compareArray = function (a1, a2) {
+            if (! a1 || ! a2) {
+                return false;
+            }
+
+            let i = a1.length;
+            if (i !== a2.length) {
+                return false;
+            }
+            while (i--) {
+                if (a1[i] !== a2[i]) {
+                    return false;
+                }
+            }
+            return true;
+        }
+
+        /**
+         * Get the position from top of a row by its index
+         * @param item
+         * @returns {number}
+         */
+        const getRowPosition = function(item) {
+            // Position from top
+            let top = 0;
+            if (item) {
+                let items = self.rows;
+                if (items && items.length) {
+                    let index = self.rows.indexOf(item);
+                    // Go through the items
+                    for (let j = 0; j < index; j++) {
+                        top += items[j].height || defaultRowHeight;
+                    }
+                }
+            }
+            return top;
+        }
+
+        const updateScroll = function() {
+            let items = self.rows;
+            if (items) {
+                // Before control
+                let before = true;
+                // Total of items in the container
+                let numOfItems = items.length;
+                // Position from top
+                let height = 0;
+                // Size of the adjustment
+                let size = 0;
+                // Go through the items
+                for (let j = 0; j < numOfItems; j++) {
+                    let h = items[j].height || defaultRowHeight;
+                    // Height
+                    height += h;
+                    // Start tracking all items as before
+                    if (items[j] === self.result[0]) {
+                        before = false;
+                    }
+                    // Adjustment
+                    if (before) {
+                        size += h;
+                    }
+                }
+                // Update height
+                scroll.style.height = height + 'px';
+                // Adjust scroll position
+                return size;
+            }
+            return false;
+        }
+
+        const getVisibleRows = function(reset) {
+            let items = self.rows;
+            if (items) {
+                let adjust;
+                // Total of items in the container
+                let numOfItems = items.length;
+                // Get the position from top
+                let y = el.scrollTop;
+                // Get the height
+                let h = y + (el.offsetHeight || self.height);
+                // Go through the items
+                let rows = [];
+                // Height
+                let height = 0;
+                // Go through all items
+                for (let j = 0; j < numOfItems; j++) {
+                    if (items[j].visible !== false) {
+                        // Height
+                        let rowHeight = items[j].height || defaultRowHeight;
+                        // Return on partial width
+                        if (height + rowHeight > y && height < h) {
+                            rows.push(items[j]);
+                        }
+                        height += rowHeight;
+                    }
+                }
+
+                // Update visible rows
+                if (reset || ! compareArray(rows, self.result)) {
+                    // Render the items
+                    self.result = rows;
+                    // Adjust scroll height
+                    let adjustScroll = reset;
+                    // Adjust scrolling
+                    for (let i = 0; i < rows.length; i++) {
+                        // Item
+                        let item = rows[i];
+                        // Item height
+                        let h = item.el.offsetHeight;
+                        // Update row height
+                        if (! item.height || h !== item.height) {
+                            // Keep item height
+                            item.height = h;
+                            // Adjust total height
+                            adjustScroll = true;
+                        }
+                    }
+
+                    // Update scroll if the height of one element has been changed
+                    if (adjustScroll) {
+                        // Adjust the scroll height
+                        adjust = updateScroll();
+                    }
+                }
+
+                // Adjust position of the first element
+                let position = getRowPosition(self.result[0]);
+                let diff = position - el.scrollTop;
+                if (diff > 0) {
+                    diff = 0;
+                }
+                self.container.style.top = diff + 'px';
+
+                return adjust;
+            }
+        }
+
+        /**
+         * Move the position to the top and re-render based on the scroll
+         * @param reset
+         */
+        const render = function (reset) {
+            // Move scroll to the top
+            el.scrollTop = 0;
+            // Append first batch
+            getVisibleRows(reset);
+        }
+
+        /**
+         * Will adjust the items based on the scroll position offset
+         */
+        self.adjustPosition = function(item) {
+            if (item.el) {
+                let h = item.el.offsetHeight;
+                let calc = item.el.offsetTop + h;
+                if (calc > el.offsetHeight) {
+                    let size = calc - el.offsetHeight;
+                    if (size < h) {
+                        size = h;
+                    }
+                    el.scrollTop -= -1 * size;
+                }
+            }
+        }
+
+        // Controls
+        const scrollControls = function() {
+            getVisibleRows(false);
+        }
+
+        // Element for scrolling
+        let el = self.container.parentNode;
+        el.classList.add('lm-lazy');
+        // Div to represent the height of the content
+        const scroll = document.createElement('div');
+        scroll.classList.add('lm-lazy-scroll');
+        // Force the height and add scrolling
+        el.appendChild(scroll);
+        el.addEventListener('scroll', scrollControls);
+        el.addEventListener('wheel', scrollControls);
+        self.container.classList.add('lm-lazy-items');
+
+        self.goto = function(item) {
+            el.scrollTop = getRowPosition(item);
+            let adjust = getVisibleRows(false);
+            if (adjust) {
+                el.scrollTop += adjust;
+            }
+        }
+
+        return (prop) => {
+            if (prop === 'rows') {
+                render(true);
+            }
+        }
+    }
+
+    const Dropdown = function () {
+        let self = this;
+        let value = [];
+        let cursor = null;
+
+        if (! self.width) {
+            self.width = 260;
+        }
+
+        // Lazy loading global instance
+        let lazyloading = null;
+
+        const setData = function() {
+            // Re-order to make sure groups are in sequence
+            self.data.sort((a, b) => {
+                // Compare groups
+                if (a.group && b.group) {
+                    return a.group.localeCompare(b.group);
+                }
+                return 0;
+            });
+            let group = '';
+            // Define group headers
+            self.data.map((v) => {
+                // Compare groups
+                if (v.group && v.group !== group) {
+                    v.header = true;
+                    group = v.group;
+                }
+            });
+            // Estimate width
+            let width = self.width;
+            // Width && values
+            self.data.map(function (s) {
+                // Estimated width of the element
+                width = Math.max(width, s.text.length * 8);
+            });
+            // Adjust the width
+            let w = self.input.offsetWidth;
+            if (width < w) {
+                width = w;
+            }
+            // Estimated with based on the text
+            if (self.width < width) {
+                self.width = width;
+            }
+            self.el.style.width = self.width + 'px';
+            // Height
+            self.height = 400;
+            // Animation for mobile
+            if (document.documentElement.clientWidth < 800) {
+                self.animation = true;
+            }
+            // Data to be listed
+            self.rows = self.data;
+            // Set the initial value
+            if (typeof(self.value) !== 'undefined') {
+                setValue(self.value);
+            }
+        }
+
+        const setCursor = function(index) {
+            let item = self.rows[index];
+            if (typeof(item) !== 'undefined') {
+                // Set cursor number
+                cursor = index;
+                // Set visual indication
+                item.cursor = true;
+                // Go to the item on the scroll in case the item is not on the viewport
+                if (! item.el || ! item.el.parentNode) {
+                    // Goto method
+                    self.goto(item);
+                }
+                // Adjust cursor position
+                setTimeout(function() {
+                    self.adjustPosition(item);
+                });
+            }
+        }
+
+        const removeCursor = function(reset) {
+            if (cursor !== null) {
+                if (typeof(self.rows[cursor]) !== 'undefined') {
+                    self.rows[cursor].cursor = false;
+                }
+                if (reset) {
+                    // Cursor is null
+                    cursor = null;
+                }
+            }
+        }
+
+        const moveCursor = function(direction, jump) {
+            // Remove cursor
+            removeCursor();
+            // Last item
+            let last = self.rows.length - 1;
+            if (jump) {
+                if (direction < 0) {
+                    cursor = 0;
+                } else {
+                    cursor = last;
+                }
+            } else {
+                // Position
+                if (cursor === null) {
+                    cursor = 0;
+                } else {
+                    // Move previous
+                    cursor = cursor + direction;
+                }
+                // Reach the boundaries
+                if (direction < 0) {
+                    // Back to the last one
+                    if (cursor < 0) {
+                        cursor = last;
+                    }
+                } else {
+                    // Back to the first one
+                    if (cursor > last) {
+                        cursor = 0;
+                    }
+                }
+            }
+            // Add cursor
+            setCursor(cursor);
+        }
+
+        const updateLabel = function() {
+            if (value && value.length) {
+                self.input.textContent = value.filter(v => v.selected).map(i => i.text).join('; ');
+            }
+        }
+
+        const setValue = function(v) {
+            // Values
+            let newValue;
+            if (! Array.isArray(v)) {
+                if (typeof(v) === 'string') {
+                    newValue = v.split(';');
+                } else {
+                    newValue = [v];
+                }
+            } else {
+                newValue = v;
+            }
+
+            // Width && values
+            value = [];
+
+            self.data.map(function(s) {
+                // Select values
+                if (newValue.indexOf(s.value) !== -1) {
+                    s.selected = true;
+                    value.push(s);
+                } else {
+                    s.selected = false;
+                }
+            });
+
+            // Update label
+            updateLabel();
+        }
+
+        const getValue = function() {
+            if (value && value.length) {
+                return value.filter(v => v.selected).map(i => i.value);
+            }
+            return [];
+        }
+
+        const onclose = function() {
+            // Cursor
+            removeCursor();
+            // Reset search
+            if (self.autocomplete && self.input.textContent) {
+                // Go to begin of the data
+                self.rows = self.data;
+                // Remove editable attribute
+                self.input.removeAttribute('contenteditable');
+                // Clear input
+                self.input.textContent = '';
+            }
+            // Update label
+            updateLabel();
+            // Update value
+            self.value = getValue();
+            // Identify the new state of the dropdown
+            self.state = false;
+        }
+
+        const onopen = function() {
+            self.state = true;
+            // Value
+            let v = value[value.length-1];
+            // Cursor
+            removeCursor();
+            // Move to the correct position
+            if (v) {
+                // Go to the last item in the array of values
+                self.goto(v);
+                // Mark the position of the cursor to the same element
+                setCursor(self.rows.indexOf(v));
+            } else {
+                // Go to begin of the data
+                self.rows = self.data;
+            }
+            // Prepare search field
+            if (self.autocomplete) {
+                // Clear input
+                self.input.textContent = '';
+                // Editable
+                self.input.setAttribute('contenteditable', true);
+                // Focus on the item
+                self.input.focus();
+            }
+        }
+
+        self.search = function() {
+            if (self.state && self.autocomplete) {
+                // Filter options
+                let data;
+                if (! self.input.textContent) {
+                    data = self.data;
+                } else {
+                    data = self.data.filter(item => {
+                        return item.selected === true ||
+                            (item.text.toLowerCase().includes(self.input.textContent.toLowerCase())) ||
+                            (item.group && item.group.toLowerCase().includes(self.input.textContent.toLowerCase()));
+                    });
+                }
+                // Cursor
+                removeCursor(true);
+                // Update the data from the dropdown
+                self.rows = data;
+            }
+        }
+
+        self.open = function () {
+            if (self.modal && self.modal.closed) {
+                self.modal.closed = false;
+            }
+        }
+
+        self.close = function () {
+            // Close the modal
+            if (self.modal) {
+                self.modal.closed = true;
+                // Remove cursor
+                removeCursor(true);
+            }
+        }
+
+        self.toggle = function() {
+            if (self.modal) {
+                if (self.modal.closed) {
+                    self.open();
+                } else {
+                    self.close();
+                }
+            }
+        }
+
+        self.select = function(e, s) {
+            if (s) {
+                if (self.multiple === true) {
+                    let position = value.indexOf(s);
+                    if (position === -1) {
+                        value.push(s);
+                        s.selected = true;
+                    } else {
+                        value.splice(position, 1);
+                        s.selected = false;
+                    }
+                } else {
+                    if (value[0] === s) {
+                        s.selected = !s.selected;
+                    } else {
+                        if (value[0]) {
+                            value[0].selected = false;
+                        }
+                        s.selected = true;
+                    }
+                    if (s.selected) {
+                        value = [s];
+                    } else {
+                        value = [];
+                    }
+                    // Close the modal
+                    self.close();
+                }
+            }
+        }
+
+        self.getGroup = function() {
+            if (this.group && this.header) {
+                return this.group;
+            } else {
+                return '';
+            }
+        }
+
+        self.onload = function () {
+            if (self.type !== "inline") {
+                // Create modal instance
+                self.modal = {
+                    closed: true,
+                    focus: false,
+                    width: self.width,
+                    'auto-close': false,
+                    onopen: onopen,
+                    onclose: onclose,
+                };
+                // Generate modal
+                Modal(self.el.children[1], self.modal);
+            } else {
+                // For inline dropdown
+                self.el.setAttribute('tabindex', 0);
+                // Remove search
+                self.input.remove();
+            }
+            // Loading controls
+            lazyloading = lazyLoading(self);
+            // Process the data
+            setData();
+            // Focus out of the component
+            self.el.addEventListener('focusout', function(e) {
+                if (self.modal) {
+                    if (! (e.relatedTarget && self.el.contains(e.relatedTarget)) && !self.el.contains(e.relatedTarget)) {
+                        if (! self.modal.closed) {
+                            self.close();
+                        }
+                    }
+                }
+            })
+            // Key events
+            self.el.addEventListener('keydown', function(e) {
+                let prevent = false;
+                if (e.key === 'ArrowUp') {
+                    moveCursor(-1);
+                    prevent = true;
+                } else if (e.key === 'ArrowDown') {
+                    moveCursor(1);
+                    prevent = true;
+                } else if (e.key === 'Home') {
+                    moveCursor(-1, true);
+                } else if (e.key === 'End') {
+                    moveCursor(1, true);
+                } else if (e.key === 'Enter') {
+                    self.select(e, self.rows[cursor]);
+                    prevent = true;
+                } else {
+                    if (e.keyCode === 32 && ! self.autocomplete) {
+                        self.select(e, self.rows[cursor]);
+                    }
+                }
+
+                if (prevent) {
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                }
+            });
+        }
+
+        self.onchange = function(prop) {
+            if (prop === 'value') {
+                setValue(self.value);
+            } else if (prop === 'data') {
+                setData();
+            }
+
+            if (typeof(lazyloading) === 'function') {
+                lazyloading(prop);
+            }
+        }
+
+        return `<div class="lm-dropdown" data-type="{{self.type}}" data-state="{{self.state}}">
+            <div class="lm-dropdown-header">
+                <div class="lm-dropdown-input" oninput="self.search" onfocus="self.open" placeholder="{{self.placeholder}}" :ref="self.input" tabindex="0"></div>
+                <button onclick="self.close" class="lm-dropdown-done">Done</button>
+            </div>
+            <div class="lm-dropdown-content">
+                <div>
+                    <div :loop="self.result" :ref="self.container" :rows="self.rows">
+                        <div class="lm-dropdown-item" onclick="self.parent.select" data-cursor="{{self.cursor}}" data-selected="{{self.selected}}" data-group="{{self.parent.getGroup}}">
+                            <div><img :src="self.image" /><span>{{self.text}}</span></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>`;
+    }
+
+    lemonade.setComponents({ Dropdown: Dropdown });
+
+    return function (root, options) {
+        if (typeof (root) === 'object') {
+            lemonade.render(Dropdown, root, options)
+            return options;
+        } else {
+            return Dropdown.call(this, root)
+        }
+    }
 })));