uniform-ui 2.4.1 → 3.0.0.beta8

data/lib/assets/javascripts/uniform/floating-label-input.js

@@ -0,0 +1,65 @@
+import Component from './component';
+import { isVisible, isFocus, css, createElement } from 'dolla';
+
+export default class FloatingLabel extends Component {
+    
+    initialize(options){
+        if(options.input instanceof Element) {
+          this.input = options.input
+        } else {
+          this.input = createElement('input', Object.assign({}, {
+            type: this.constructor.type
+          }, options.input)) // TODO filter options to dolla.HTML_ATTRIBUTES
+        }
+        this.label = createElement('label', {
+          for: this.input.id,
+          children: [options.label]
+        });
+        this.input.setAttribute('aria-label', options.label);
+        
+        this.el.classList.add('uniformFloatingLabelInput');
+        
+        this.listenTo(this.input, 'focus', this.focus);
+        this.listenTo(this.input, 'blur', this.blur);
+        this.listenTo(this.input, 'revealed', this.render);
+    }
+    
+    render () {
+        if(!isVisible(this.input)) return this;
+
+        let internalHeight = parseInt(css(this.input, 'height')) - parseInt(css(this.input, 'borderTopWidth')) - parseInt(css(this.input, 'borderBottomWidth'));
+        this.input.style.lineHeight = 1;
+        let lineHeight = parseInt(css(this.input, 'lineHeight'));
+        let fontSize = parseInt(css(this.input, 'fontSize'));
+        let padding = internalHeight - lineHeight;
+        
+        this.label.style.setProperty('--font-size', css(this.input, 'fontSize'))
+        this.label.style.paddingLeft = css(this.input, 'paddingLeft');
+        this.label.style.lineHeight = lineHeight + "px";
+        this.label.style.paddingTop = (internalHeight/2 - lineHeight) + "px";
+        this.label.style.paddingBottom = (internalHeight/2 - lineHeight) + "px";
+        
+        this.input.style.paddingTop = internalHeight/2 - (lineHeight - fontSize) + "px";
+        this.input.style.paddingBottom = (internalHeight/2 - lineHeight) + (lineHeight - fontSize) + "px";
+        
+        this.input.parentNode.insertBefore(this.el, this.input.nextSibling);
+        this.el.append(this.input);
+        this.el.append(this.label);
+        
+        if(this.input.value != ""){
+          this.focus()
+        }
+        
+        return this;
+    }
+    
+    focus (e) {
+        this.el.classList.add('present');
+    }
+    
+    blur (e) {
+        if(this.input.value == ""){
+          this.el.classList.remove('present');
+        }
+    }
+}

data/lib/assets/javascripts/uniform/icons.js

@@ -1,16 +1,25 @@
 let check = `
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 32 32">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
 <path d="M28.998 8.531l-2.134-2.134c-0.394-0.393-1.030-0.393-1.423 0l-12.795 12.795-6.086-6.13c-0.393-0.393-1.029-0.393-1.423 0l-2.134 2.134c-0.393 0.394-0.393 1.030 0 1.423l8.924 8.984c0.393 0.393 1.030 0.393 1.423 0l15.648-15.649c0.393-0.392 0.393-1.030 0-1.423z"></path>
 </svg>
 `.trim()
 
 let arrow_down = `
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 20 20">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
 <path d="M13.418 7.601c0.271-0.268 0.709-0.268 0.979 0s0.271 0.701 0 0.969l-3.907 3.83c-0.271 0.268-0.709 0.268-0.979 0l-3.908-3.83c-0.27-0.268-0.27-0.701 0-0.969s0.708-0.268 0.979 0l3.418 3.14 3.418-3.14z"></path>
 </svg>
 `.trim()
 
+let x = `
+<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" xml:space="preserve">
+<g><rect x="-2.352" y="29.385" transform="matrix(0.7071 0.7071 -0.7071 0.7071 32.3545 -14.3899)" width="71.799" height="4.95"/></g>
+<g><rect x="-2.374" y="29.376" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.7023 33.0352)" width="71.799" height="4.95"/></g>
+</svg>
+
+`.trim()
+
 export {
     check,
-    arrow_down
+    arrow_down,
+    x
 }

data/lib/assets/javascripts/uniform/modal.js

@@ -1,5 +1,5 @@
 import Component from './component';
-import * as Helpers from './dom-helpers';
+import {css, trigger, append, createElement} from 'dolla';
 
 /*  UniformModal.initialize
     Options
@@ -14,8 +14,9 @@ export default class Modal extends Component {
         this.options = {};
         this.options.klass = options.klass || false;
         this.content = options.content;
+        this.el.removeAttribute('content');
 
-        Helpers.addClass(this.el, 'uniformModal');
+        this.el.classList.add('uniformModal');
         this.listenTo(document, 'keyup', this.keyup);
         this.listenTo(this.el, 'click', this.checkCloseButton);
     }
@@ -27,27 +28,21 @@ export default class Modal extends Component {
     
     render () {
         var that = this;
-        var content = typeof this.content == 'function' ? this.content() : this.content;
 
         this.highest_z_index = 0;
-        this.overlay = document.createElement('div');
-        Helpers.addClass(this.overlay, 'uniformModal-overlay');
-        
-        this.blur = document.createElement('div');
-        Helpers.addClass(this.blur, 'uniformModal-blur');
+        this.overlay = createElement('div', {class: 'uniformModal-overlay'});
+        this.blur = createElement('div', {class: 'uniformModal-blur'});
         
         this.original_scroll = window.scrollY;
         this.blur.style.top = 0 - this.original_scroll + "px";
 
         if (document.body.querySelectorAll('.uniformModal').length > 0) {
             this.highest_z_index = Math.max(Array.prototype.map.call(document.body.querySelectorAll('.uniformModal'), function(el){
-                return parseInt(Helpers.css(el, 'zIndex'));
+                return parseInt(css(el, 'zIndex'));
             }));
             this.el.style.zIndex = this.highest_z_index + 2;
         }
         
-        this.el.appendChild(this.overlay);
-        
         let next_element = document.body.children[0]
         while(next_element){
           const element = next_element;
@@ -57,40 +52,44 @@ export default class Modal extends Component {
           }
         }
 
-        Helpers.addClass(document.body, 'uniformModal-active');
+        document.body.classList.add('uniformModal-active');
         document.body.appendChild(this.blur);
         document.body.appendChild(this.el);
         
-        var container = document.createElement('div');
-        Helpers.addClass(container, 'uniformModal-container');
-        if (content instanceof Node) {
-            container.appendChild(content);
-        } else {
-            container.innerHTML = content;
-        }
-
-        var closeButton = document.createElement('div');
-        Helpers.addClass(closeButton, 'uniformModal-close');
-        this.el.appendChild(closeButton);
-        
         this.el.style.top = window.scrollY;
         this.listenTo(this.overlay, 'click', this.close);
-        this.el.appendChild(container);
+        
+        const container = createElement('div', {
+          class: 'uniformModal-container',
+          children: this.content
+        });
+        
+        const closeButton = createElement('div', {
+          class: 'uniformModal-close-container',
+          children: {
+            class: 'uniformModal-close'
+          }
+        });
+        
+        this.el.append(this.overlay);
+        this.el.append(container);
+        this.el.append(closeButton);
 
-        if (this.options.klass) Helpers.addClass(container, this.options.klass);
-        if (content.innerHTML) Helpers.trigger(content, 'rendered');
+        if (this.options.klass) container.classList.add(this.options.klass);
+        if (this.content.innerHTML) trigger(this.content, 'rendered');
         this.trigger('rendered');
 
         return this;
     }
     
     checkCloseButton (e) {
-        if(Helpers.hasClass(e.target, 'uniformModal-close'))
-            this.close();
+        if(e.target.classList.contains('uniformModal-close')){
+          this.close();
+        }
     }
     
     close () {
-        Helpers.removeClass(document.querySelectorAll('uniformModal-active'), 'uniformModal-active');
+        document.querySelectorAll('uniformModal-active').forEach(el => el.classList.remove('uniformModal-active'));
         var elements = this.blur.children;
         var elementCount = elements.length
         for(var i=0; i < elementCount; i++){

data/lib/assets/javascripts/uniform/popover.js

@@ -1,5 +1,5 @@
 import Component from './component';
-import * as Helpers from './dom-helpers';
+import { offset, outerWidth, outerHeight, append } from 'dolla';
 
 /*
     Requirements
@@ -12,6 +12,7 @@ import * as Helpers from './dom-helpers';
     align:          [left|right|center|#px] [top|center|bottom|#px] | default: 'center bottom'
     zIndex:         # | default: unset
     offset:         {left: 0, top: 0}
+    container:      element to append popover to. default: document
 */
 export default class Popover extends Component {
     initialize (options) {
@@ -26,7 +27,9 @@ export default class Popover extends Component {
             offset: {left: 0, top: 0}
         };
         Object.assign(this.options, this.pick(options, Object.keys(this.options)));
+        this.el.removeAttribute('content');
         
+        this.options.anchor.popover = this
         this.listenTo(document, 'click', this.checkFocus);
         this.listenTo(document, 'focusin', this.checkFocus);
         this.listenTo(document, 'keyup', this.checkEscape);
@@ -35,9 +38,10 @@ export default class Popover extends Component {
         });
         
         if(typeof this.options.container == "string"){
-          this.options.container = Helpers.closest(this.options.anchor, this.options.container)
-          this.options.container = this.options.container || document.body
+          this.options.container = this.options.anchor.closest(this.options.container)
         }
+        this.options.container = this.options.container || document.body
+        
     }
     
     render () {
@@ -45,10 +49,7 @@ export default class Popover extends Component {
         this.el.style.position = 'absolute';
         this.el.style.zIndex = this.options.zIndex;
         
-        if(this.options.content instanceof Node)
-            this.el.appendChild(this.options.content);
-        else
-            this.el.innerHTML = this.options.content;
+        append(this.el, this.options.content)
         
         this.options.container.appendChild(this.el);
         this.resize();
@@ -101,43 +102,44 @@ export default class Popover extends Component {
         var [leftAlign, topAlign] = align.split(" ");
         leftAlign = leftAlign || "bottom";
         
-        var offset = Helpers.offset(this.options.anchor);
+        var anchorOffset = offset(this.options.anchor);
         var container = this.options.container;
         if(getComputedStyle(container)['position'] == "static") container = container.offsetParent;
         if(!container) container = document.body;
 
-        var containerOffset = Helpers.offset(container);
-        offset = {
-            top: offset.top - containerOffset.top,
-            left: offset.left - containerOffset.left
+        var containerOffset = offset(container);
+        anchorOffset = {
+            top: anchorOffset.top - containerOffset.top,
+            left: anchorOffset.left - containerOffset.left
         }
         
         var position = {};
         if(leftAlign == 'left'){
-            position.right = Helpers.outerWidth(container) - offset.left;
+            position.right = outerWidth(container) - anchorOffset.left;
         } else if(leftAlign == 'center'){
-            position.left = offset.left + Helpers.outerWidth(this.options.anchor) / 2 - Helpers.outerWidth(this.el) / 2;
+            position.left = anchorOffset.left + outerWidth(this.options.anchor) / 2;
+            position.transform = "translateX(-50%)";
         } else if (leftAlign == 'right'){
-            position.left = offset.left + Helpers.outerWidth(this.options.anchor);
+            position.left = anchorOffset.left + outerWidth(this.options.anchor);
         } else if (leftAlign.includes("px")){
-            position.left = offset.left + parseInt(leftAlign);
+            position.left = anchorOffset.left + parseInt(leftAlign);
         }
         
         if(topAlign == 'top'){
-            let height = Helpers.outerHeight(container);
+            let height = outerHeight(container);
             if(container == document.body && getComputedStyle(container)['position'] == "static"){
               height = window.innerHeight;
             } else if (container == document.body) {
               height = Math.max(height, document.body.clientHeight);
             }
-            position.bottom = height - offset.top;
+            position.bottom = height - anchorOffset.top;
         } else if(topAlign == 'center'){
-            position.top = offset.top + Helpers.outerHeight(this.options.anchor) / 2;
+            position.top = anchorOffset.top + outerHeight(this.options.anchor) / 2;
             position.transform = "translateY(-50%)";
         } else if (topAlign == 'bottom'){
-            position.top = offset.top + Helpers.outerHeight(this.options.anchor);
+            position.top = anchorOffset.top + outerHeight(this.options.anchor);
         } else if (topAlign.includes("px")){
-            position.top = offset.top + parseInt(topAlign);
+            position.top = anchorOffset.top + parseInt(topAlign);
         }
         
         if(this.options.offset.left) position.left += parseInt(this.options.offset.left);
@@ -150,9 +152,9 @@ export default class Popover extends Component {
         this.el.style.top = null;
         this.el.style.bottom = null;
         this.el.style.transform = null;
-        Helpers.removeClass(this.el, 'popover-left popover-right popover-center popover-top popover-bottom');
-        Helpers.addClass(this.el, 'popover-' + topAlign);
-        Helpers.addClass(this.el, 'popover-' + leftAlign);
+        this.el.classList.remove('popover-left', 'popover-right', 'popover-center', 'popover-top', 'popover-bottom');
+        this.el.classList.add('popover-' + topAlign);
+        this.el.classList.add('popover-' + leftAlign);
         Object.keys(position).forEach(function(key){
             this.el.style[key] = position[key] + (key != "transform" ? "px" : "");
         }, this);

data/lib/assets/javascripts/uniform/resizer.js

@@ -1,43 +1,39 @@
 import Component from './component';
-import * as Helpers from './dom-helpers';
+import { trigger } from 'dolla';
 
 export default class Resizer extends Component {
     
     initialize () {
+        const breakpoints = getComputedStyle(window.document.body).getPropertyValue('--breakpoints')
+        this.breakpoints = {}
+        breakpoints.split(",").forEach(breakpoint => {
+          const [key, value] = breakpoint.split("/")
+          this.breakpoints[key.trim()] = value;
+        })
+        
         this.listenTo(window, 'resize', this.resize);
-        Helpers.trigger(window, 'resize');
+        this.resize();
     }
     
     resize () {
-        // breakpoints at 720, 1080, 1440
-        var width = this.el.offsetWidth;
-
-        if(width > 720 && !Helpers.hasClass(this.el, 'md-size')) {
-            Helpers.addClass(this.el, 'md-size');
-            Helpers.trigger(window, 'resized-md');
-        } else if (width < 720 && Helpers.hasClass(this.el, 'md-size')) {
-            Helpers.removeClass(this.el, 'md-size');
-        }
-
-        if(width > 1080 && !Helpers.hasClass(this.el, 'lg-size')) {
-            Helpers.addClass(this.el, 'lg-size');
-            Helpers.trigger(window, 'resized-lg');
-        } else if (width < 1080 && Helpers.hasClass(this.el, 'lg-size')) {
-            Helpers.removeClass(this.el, 'lg-size');
+      const width = this.el.offsetWidth;
+      Object.keys(this.breakpoints).forEach(size => {
+        const query = this.breakpoints[size]
+        const css_class = size + '-container'
+        let [attribute, value] = query.split(":")
+        if(value.match("px")){
+          value = parseInt(value)
+        } else {
+          throw "unsupported media units"
         }
-
-        if(width > 1440 && !Helpers.hasClass(this.el, 'xl-size')) {
-            Helpers.addClass(this.el, 'xl-size');
-            Helpers.trigger(window, 'resized-xl');
-        } else if (width < 1440 && Helpers.hasClass(this.el, 'xl-size')) {
-            Helpers.removeClass(this.el, 'xl-size');
-        }
-
-        if(width < 720 && !Helpers.hasClass(this.el, 'sm-size')) {
-            Helpers.addClass(this.el, 'sm-size');
-            Helpers.trigger(window, 'resized-sm');
-        } else if (width > 720 && Helpers.hasClass(this.el, 'sm-size')) {
-            Helpers.removeClass(this.el, 'sm-size');
+        
+        if(attribute == "min-width") {
+          this.el.classList.toggle(css_class, width > value)
+        } else if (attribute == "max-width") {
+          this.el.classList.toggle(css_class, width < value)
+        } else {
+          throw "unsupported media feature"
         }
+      });
     }
 }

data/lib/assets/javascripts/uniform/select.js

@@ -1,252 +1,218 @@
 import Component from './component';
 import Popover from './popover';
 import Modal from './modal';
-import { check as checkIcon, arrow_down as arrowIcon } from './icons';
-import * as Helpers from './dom-helpers';
+import { check as checkIcon, arrow_down as arrowIcon, x as xIcon } from './icons';
+import { createElement, HTML_ATTRIBUTES, filter, css, isEmpty, trigger } from 'dolla';
 
 /*
-    options
-    class: String, appended to uniformSelect-edit button as class
-    limit: int | false - number of options to limit to, or false to not limit
-    showAll: function(button_options) to run if/when "Show All" is clicked
-    label: string, used for mobile menu
-    container: selector for where to render dropdown
+  options: array of html options, each item can be string | array | object
+    ex. ["Employee", "Manager", "General Manager"]
+    ex. [
+      ["Employee", "employee", false],
+      ["Manager", "manager", false],
+      ["General Manager", "general_manager", true],
+    ]
+    ex. [
+      {value: "employee", text: 'Employee', selected: false},
+      {value: "manager", text: 'Manager', selected: false},
+      {value: "general_manager", text: 'General Manager', selected: true}
+    ]
+  limit: int | false - number of options to limit to, or false to not limit
+  container: selector for where to render dropdown
+  multiple: false
 */
 export default class Select extends Component {
 
-    initialize (options = {}) {
-        this.options = {
-            label: false,
-            class: "",
-            showAll: function (button_options){
-                Helpers.removeClass(button_options.querySelectorAll('button.hide'), 'hide');
-                var button = button_options.querySelector('.uniformSelect-show-all');
-                button.parentNode.removeChild(button);
-                
-                return false;
-            },
-            limit: 8,
-            container: false
+  initialize (options = {}) {
+    this.htmlOptions = options.options.map(option => {
+      if(typeof option == "string") {
+        return {
+          value: option,
+          text: option
         }
+      } else if (Array.isArray(option)){
+        return {
+          value: option[1],
+          text: option[0],
+          selected: option[2]
+        }
+      } else if (typeof option == "object") {
+        return option
+      } else {
+        throw "option of unexpected type"
+      }
+    });
+    this.options = {
+      multiple: false,
+      limit: 8,
+      container: false
+    }
+    Object.assign(this.options, this.pick(options, Object.keys(this.options)));
         
-        Object.assign(this.options, this.pick(options, Object.keys(this.options)));
+    this.el_options = Object.assign({}, this.pick(options, HTML_ATTRIBUTES));
+    this.el = createElement('button', this.el_options);
+    this.el.classList.add('uniformSelect');
 
-        this.listenTo(this.el, 'change', this.renderSelected);
-        this.listenTo(this.el, 'close', this.hideOptions);
-        this.el.uniformSelect = this;
+    this.listenTo(this.el, 'click', this.toggleOptions);
+    this.listenTo(this.el, 'click', '.uniformSelect-remove', this.removeSelection);
+    this.listenTo(this.el, 'change', 'select', this.renderValue);
+    this.listenTo(this.el, 'close', 'select', this.removeOptions);
+  }
+    
+  render () {
+    this.valueEl = createElement('span');
+    this.valueEl.classList.add('uniformSelect-value')
+    this.el.append(this.valueEl);
         
-        this.activeIcon = document.createElement('span');
-        this.activeIcon.innerHTML = checkIcon;
-        Helpers.addClass(this.activeIcon, 'uniformSelect-option-icon');
-    }
+    this.indicatorEl = createElement('span', {children: arrowIcon})
+    this.indicatorEl.classList.add('uniformSelect-indicator')
+    this.el.append(this.indicatorEl);
 
-    remove () {
-        Component.prototype.remove.apply(this, arguments);
-        this.edit_button.parentNode.removeChild(this.edit_button);
-        delete this.this.edit_button;
+    this.select = createElement('select', this.el_options);
+    this.htmlOptions.forEach(option => {
+      this.select.append(createElement('option', Object.assign({}, {children: option.text}, option)))
+    });
+    this.el.append(this.select);
         
-        this.activeIcon.parentNode.removeChild(this.activeIcon);
-        delete this.activeIcon;
         
-        if(this.button_options_popover) this.button_options_popover.remove();
-        if(this.button_options_modal) this.button_options_modal.remove();
+    // Append placeholder of longest option, to set width
+    const longestText = this.htmlOptions.map(x => x.text).sort((a, b) => a.length < b.length)[0]
+    const placeholder = createElement('span', {class: 'uniformSelect-placeholder', children: longestText})
+    this.el.append(placeholder);
         
-        if(this.button_options) {
-            this.button_options.parentNode.removeChild(this.button_options);
-            delete this.button_options;
-        }
-    }
+    this.renderValue();
+    return this;
+  }
     
-    render () {
-        this.edit_button = Helpers.createElement(`
-          <button type='button' class='uniformSelect-edit uniformInput outline block ${this.options.class}'>
-            <span class="text-js"></span>
-            <span class="uniformSelect-edit-icon">${arrowIcon}</span>
-          </button>
-        `);
-        
-        if (this.el.name) {
-            Helpers.addClass(this.edit_button, this.el.name.toLowerCase().replace(/[^a-z0-9\-_]+/g, '-'));
-        }
-        this.el.style.display = "none";
-        this.el.insertAdjacentElement('beforebegin', this.edit_button);
-        
-        if(!this.options.container) {
-          this.options.container = this.edit_button.parentElement
-        }
-        
-        // Set Min-Width for when empty
+  renderValue () {
+    const selectedOptions = filter(this.select.querySelectorAll("option"), el => el.selected);
+    const html = selectedOptions.map(el => this.options.multiple ? `
+      <span class="uniformSelect-selection">
+        <span>${el.textContent}</span><span class="uniformSelect-remove">${xIcon}</span>
+      </span>
+    ` : el.textContent).join(" ");
         
-        const option = [...this.el.querySelectorAll("option")].sort((a, b) => {
-            return a.textContent.length > b.textContent.length
-        }).reverse()[0];
-        this.edit_button.querySelector('.text-js').style.opacity = 0;
-        this.edit_button.querySelector('.text-js').innerHTML = option.textContent;
-        const min_width = this.edit_button.querySelector('.text-js').offsetWidth;
-        this.edit_button.style.minWidth = min_width + "px";
-        this.edit_button.querySelector('.text-js').innerHTML = "";
-        this.edit_button.querySelector('.text-js').style.opacity = null;
-        
-        this.renderSelected();
-        
-        this.listenTo(this.edit_button, 'click', this.showOptions);
-        this.listenTo(this.edit_button, 'click', '.uniformSelect-remove', this.removeSelection);
-        
-        return this;
+    this.valueEl.innerHTML = html;
+  }
+    
+  selectOption (e) {
+    const makeActive = !e.target.option.selected;
+    if (!this.options.multiple && makeActive) {
+      e.target.offsetParent.querySelectorAll('.active').forEach(el => el.classList.remove('active'));
     }
-
-    renderOptions () {
-        this.button_options = Helpers.createElement("<div class='uniformSelect-options'>");
-        if (this.el.name) {
-            Helpers.addClass(this.button_options, this.el.name.toLowerCase().replace(/[^a-z0-9\-_]+/g, '-'));
-        }
-        this.button_options.style.fontSize = Helpers.css(this.el, 'font-size');
+    e.target.classList.toggle('active', makeActive);
+    e.target.option.selected = makeActive;
         
-        Helpers.each(this.el.querySelectorAll('option'), function(el, index){
-            var button = Helpers.createElement("<button type='button' class='uniformSelect-option block outline text-left'>");
-            button.option = el;
-            button.textContent = el.textContent;
-            button.value = el.value;
-            if (button.textContent == "") button.innerHTML = "<span class='text-italic text-muted'>None</span>";
-            if(el.selected){
-                Helpers.addClass(button, 'active');
-                button.append(this.activeIcon.cloneNode(true));
-            } else if (this.options.limit && index > this.options.limit) {
-                Helpers.addClass(button, 'hide');
-            }
-            this.button_options.append(button);
-        }.bind(this));
-
-        this.listenTo(this.button_options, 'click', '.uniformSelect-option', this.selectOption);
-
-        const actions_el = Helpers.createElement('<div class="uniformSelect-options-actions"></div>');
-        if (this.options.limit && this.el.querySelectorAll('option').length > this.options.limit) {
-            const show_all_button = Helpers.createElement("<button type='button' class='uniformSelect-show-all outline blue' style='display: block; border: none'>Show All</button>");
-            this.listenTo(show_all_button, 'click', function(e){
-                Helpers.trigger(this.el, 'show_all');
-                if (this.options.showAll) this.options.showAll(this.button_options);
-                e.preventDefault();
-                e.stopPropagation();
-            })
-            actions_el.appendChild(show_all_button);
-        }
-        if (this.el.multiple) {
-            var done_button = Helpers.createElement("<button type='button' class='uniformSelect-done block outline blue'>Done</button>");
-            this.listenTo(done_button, 'click', this.hideOptions);
-            actions_el.appendChild(done_button);
-        }
-        if (!Helpers.is_empty(actions_el)) {
-            this.button_options.appendChild(actions_el);
-        }
+    if (!this.options.multiple) {
+      this.removeOptions();
     }
-
-    renderSelected () {
-        const selected_options = Helpers.filter(this.el.querySelectorAll("option"), function(el){
-            return el.selected;
-        });
-        const html = Helpers.map(selected_options, function(el){
-            return this.el.multiple ? `<span class="uniformSelect-selection">${el.textContent}<span class="uniformSelect-remove"></span></span>` : el.textContent;
-        }.bind(this)).join(" ");
         
-        if (html == "") {
-            this.edit_button.querySelector('.text-js').innerHTML = "&nbsp;"
-        } else {
-            this.edit_button.querySelector('.text-js').innerHTML = html;
-        }
+    trigger(this.select, 'change');
+  }
+    
+  removeSelection (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var option = filter(this.select.querySelectorAll("option"), function(el){
+      return el.innerText.trim() == e.target.closest('.uniformSelect-selection').innerText.trim();
+    })[0];
+    if(!option) return;
+    option.selected = false;
+    option.button.classList.remove('active');
         
-        if(this.button_options) {
-            Helpers.each(this.button_options.querySelectorAll('.uniformSelect-option'), function(el) {
-                if(el.option.selected){
-                    Helpers.addClass(el, 'active');
-                    el.append(this.activeIcon.cloneNode(true));
-                } else {
-                    Helpers.removeClass(el, 'active');
-                    Helpers.each(el.querySelectorAll('.uniformSelect-option-icon'), Helpers.remove);
-                }
-            }.bind(this))
-        }
+    trigger(this.select, 'change');
+  }
+  
+  toggleOptions (e) {
+    if(e && (e.target.matches('.uniformSelect-remove') || e.target.closest('.uniformSelect-remove'))){
+      return;
     }
-
-    hideOptions () {
-        if(!this.button_options) return;
-        if(this.button_options_modal) this.button_options_modal.close();
-        if(this.button_options_popover) {
-            this.button_options_popover.remove();
-            delete this.button_options_popover;
-        }
-        Helpers.removeClass(this.edit_button, 'active');
+    this.el.classList.toggle('active')
+    if(this.el.contains('active')){
+      this.renderOptions()
+    } else {
+      this.removeOptions()
     }
+  }
 
-    showOptions(e) {
-        if(Helpers.hasClass(e.target, 'uniformSelect-remove')) return;
-        if(this.button_options_modal) return this.hideOptions();
-        if(this.button_options_popover) return this.hideOptions();
-        if(!this.button_options) this.renderOptions();
-        Helpers.addClass(this.edit_button, 'active');
-        // For Mobile: Render Full Screen
-        if(window.innerWidth < 720) {
-            const content = Helpers.createElement('<div class="uniformSelect-modal">');
-            content.append(this.button_options);
-            if (this.options.label) {
-                content.append(`<div class="uniformSelect-label margin-bottom text-bold">${this.options.label}</div>`);
-            }
-            this.button_options_modal = new Modal({
-                content: content,
-                klass: '-reset'
-            }).render();
-            this.button_options_modal.on('closed', () => {
-                Helpers.removeClass(this.edit_button, 'active');
-                delete this.button_options_modal;
-            });
-            this.listenTo(content, 'click', function(e){
-                if(e.target == content) {
-                    this.button_options_modal.close()
-                }
-            });
-        // For Larger: Render Popover
-        } else {
-            this.button_options.style.minWidth = this.edit_button.offsetWidth + "px";
-            this.button_options_popover = new Popover({
-                offset: {top: 1},
-                anchor: this.edit_button,
-                align: '0px bottom',
-                content: this.button_options,
-                container: this.options.container
-            }).render()
-            this.button_options_popover.on('hidden', () => {
-                Helpers.removeClass(this.edit_button, 'active');
-                this.button_options_popover.remove();
-                delete this.button_options_popover;
-            })
-        }
-    }
+  renderOptions () {
+    const options = createElement("div", {
+      class: 'uniformSelect-options'
+    });
+      
+    options.style.fontSize = css(this.el, 'font-size')
+      
+    this.select.querySelectorAll('option').forEach(function(option, index){
+      var button = createElement("button", {
+        type: 'button',
+        class: 'uniformSelect-option'
+      });
+      button.option = option;
+      option.button = button;
+      button.textContent = option.textContent;
+      button.value = option.value;
+      if (button.textContent == "") button.innerHTML = "<span class='text-italic text-muted'>None</span>";
+      button.classList.toggle('active', option.selected);
+      
+      console.log(this.options.limit, index);
+      if (this.options.limit && (index + 1) > this.options.limit) {
+        button.classList.add('hide')
+      }
+      options.append(button);
+    }, this);
+    
+    this.listenTo(options, 'click', '.uniformSelect-option', this.selectOption);
 
-    selectOption(e) {
-        const button = e.target;
-        if (!this.el.multiple) {
-            Helpers.each(this.button_options.querySelectorAll('.uniformSelect-option.active .uniformSelect-option-icon'), Helpers.remove);
-            Helpers.removeClass(this.button_options.querySelectorAll('.uniformSelect-option.active'), 'active');
-        }
-        Helpers.toggleClass(e.target, 'active');
-        e.target.option.selected = Helpers.hasClass(e.target, 'active');
-        if (Helpers.hasClass(e.target, 'active')) {
-            e.target.append(this.activeIcon.cloneNode(true));
-        } else {
-            Helpers.each(e.target.querySelectorAll('.uniformSelect-option-icon'), Helpers.remove);
-        }
-        if (!this.el.multiple) {
-            this.hideOptions();
-        }
-        Helpers.trigger(this.el, 'change');
-    }
+
+    const actions = createElement('div', {
+      class: 'uniformSelect-actions'
+    });
     
-    removeSelection(e) {
-        e.preventDefault();
-        var target = Helpers.filter(this.el.querySelectorAll("option"), function(el){
-            return el.innerText.trim() == e.target.parentNode.innerText.trim();
-        })[0];
-        if(!target) return;
-        target.selected = false;
-        Helpers.trigger(this.el, 'change');
+    if (this.options.limit && this.htmlOptions.length > this.options.limit) {
+      const button = createElement('button', {
+        type: 'button',
+        class: 'uniformSelect-show-all',
+        children: 'Show All'
+      });
+      this.listenTo(button, 'click', this.showAllOptions.bind(this))
+      actions.append(button);
+    }
+    if (this.options.multiple) {
+      const button = createElement('button', {
+        type: 'button',
+        class: 'uniformSelect-done',
+        children: ['Done']
+      });
+      this.listenTo(button, 'click', this.removeOptions.bind(this));
+      actions.append(button);
     }
+    if (!isEmpty(actions)) {
+      options.append(actions);
+    }
+    
+    this.popover = new Popover({
+      offset: {top: 1},
+      align: '0px bottom',
+      anchor: this.el,
+      content: options,
+      container: this.options.container
+    }).render()
+    
+    this.listenTo(this.popover, 'hidden', this.removeOptions);
+  }
+    
+  removeOptions () {
+    this.el.classList.remove('active')
+    if(!this.popover) return;
+    this.popover.remove()
+  }
+    
+  showAllOptions (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if(!this.popover) return;
+    this.popover.el.querySelectorAll('button.hide').forEach(el => el.classList.remove('hide'));
+    var button = this.popover.el.querySelector('.uniformSelect-show-all');
+    button.parentNode.removeChild(button);
+  }
 }