uniform-ui 3.0.0.beta8 → 3.0.0.beta10

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

@@ -7,8 +7,8 @@ export default class Resizer extends Component {
         const breakpoints = getComputedStyle(window.document.body).getPropertyValue('--breakpoints')
         this.breakpoints = {}
         breakpoints.split(",").forEach(breakpoint => {
-          const [key, value] = breakpoint.split("/")
-          this.breakpoints[key.trim()] = value;
+            const [key, value] = breakpoint.split("/")
+            this.breakpoints[key.trim()] = value;
         })
         
         this.listenTo(window, 'resize', this.resize);
@@ -16,24 +16,24 @@ export default class Resizer extends Component {
     }
     
     resize () {
-      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"
-        }
+        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(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"
-        }
-      });
+            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

@@ -23,196 +23,220 @@ import { createElement, HTML_ATTRIBUTES, filter, css, isEmpty, trigger } from 'd
 */
 export default class Select extends Component {
 
-  initialize (options = {}) {
-    this.htmlOptions = options.options.map(option => {
-      if(typeof option == "string") {
-        return {
-          value: option,
-          text: option
+    initialize (options = {}) {
+        this.options = {
+            multiple: false,
+            limit: 8,
+            container: false
         }
-      } 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.el_options = Object.assign({}, this.pick(options, HTML_ATTRIBUTES));
+        this.el = createElement('button', this.el_options);
+        this.el.type = "button";
+        this.el.classList.add('uniformSelect');
 
-    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);
-  }
+        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);
+    
+        if (options.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"
+                }
+            });
+        }
+    
+        if (options.el) {
+            this.select = options.el;
+            this.el.setAttribute('class', this.select.getAttribute('class'))
+            this.el.classList.add('uniformSelect')
+            if (!this.htmlOptions) {
+                this.htmlOptions = Array.from(this.select.querySelectorAll('option')).map(option => {
+                    return {
+                        value: option.value,
+                        text: option.innerHTML,
+                        selected: option.selected
+                    }
+                })
+            }
+        }
+    }
     
-  render () {
-    this.valueEl = createElement('span');
-    this.valueEl.classList.add('uniformSelect-value')
-    this.el.append(this.valueEl);
+    render () {
+        this.valueEl = createElement('span');
+        this.valueEl.classList.add('uniformSelect-value')
+        this.el.append(this.valueEl);
         
-    this.indicatorEl = createElement('span', {children: arrowIcon})
-    this.indicatorEl.classList.add('uniformSelect-indicator')
-    this.el.append(this.indicatorEl);
+        this.indicatorEl = createElement('span', {children: arrowIcon})
+        this.indicatorEl.classList.add('uniformSelect-indicator')
+        this.el.append(this.indicatorEl);
 
-    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);
+        if (this.select) {
+            this.select.replaceWith(this.el);
+            this.select.innerHTML = '';
+        } else {
+            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);
         
         
-    // 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);
+        // 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);
         
-    this.renderValue();
-    return this;
-  }
+        this.renderValue();
+        return this;
+    }
     
-  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(" ");
+    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(" ");
         
-    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'));
+        this.valueEl.innerHTML = html;
     }
-    e.target.classList.toggle('active', makeActive);
-    e.target.option.selected = makeActive;
+    
+    selectOption (e) {
+        const makeActive = !e.target.option.selected;
+        if (!this.options.multiple && makeActive) {
+            e.target.offsetParent.querySelectorAll('.active').forEach(el => el.classList.remove('active'));
+        }
+        e.target.classList.toggle('active', makeActive);
+        e.target.option.selected = makeActive;
         
-    if (!this.options.multiple) {
-      this.removeOptions();
-    }
+        if (!this.options.multiple) {
+            this.removeOptions();
+        }
         
-    trigger(this.select, 'change');
-  }
+        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');
+    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');
         
-    trigger(this.select, 'change');
-  }
-  
-  toggleOptions (e) {
-    if(e && (e.target.matches('.uniformSelect-remove') || e.target.closest('.uniformSelect-remove'))){
-      return;
+        trigger(this.select, 'change');
     }
-    this.el.classList.toggle('active')
-    if(this.el.contains('active')){
-      this.renderOptions()
-    } else {
-      this.removeOptions()
+  
+    toggleOptions (e) {
+        if(e && (e.target.matches('.uniformSelect-remove') || e.target.closest('.uniformSelect-remove'))){
+            return;
+        }
+        this.el.classList.toggle('active')
+        if(this.el.classList.contains('active')){
+            this.renderOptions()
+        } else {
+            this.popover.toggle(false)
+        }
     }
-  }
 
-  renderOptions () {
-    const options = createElement("div", {
-      class: 'uniformSelect-options'
-    });
+    renderOptions () {
+        const options = createElement("div", {
+            class: 'uniformSelect-options'
+        });
       
-    options.style.fontSize = css(this.el, 'font-size')
+        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);
+        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);
+            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);
+        this.listenTo(options, 'click', '.uniformSelect-option', this.selectOption);
 
 
-    const actions = createElement('div', {
-      class: 'uniformSelect-actions'
-    });
+        const actions = createElement('div', {
+            class: 'uniformSelect-actions'
+        });
     
-    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);
-    }
+        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.popover = new Popover({
+            offset: {top: 1},
+            align: '0px bottom',
+            anchor: this.el,
+            content: options,
+            container: this.options.container,
+            transition: 'transition-fade-up' 
+        }).render()
     
-    this.listenTo(this.popover, 'hidden', this.removeOptions);
-  }
+        this.listenTo(this.popover, 'hidden', this.removeOptions);
+    }
     
-  removeOptions () {
-    this.el.classList.remove('active')
-    if(!this.popover) return;
-    this.popover.remove()
-  }
+    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);
-  }
+    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);
+    }
 }

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

@@ -0,0 +1,26 @@
+export default class Sticker {
+    constructor (el) {
+        if (!window.uniformObserver) {
+            window.uniformObserver = new IntersectionObserver(
+                entries => entries.forEach(entry => {
+                    if (entry.intersectionRatio == 0) {
+                        this.stick(el)
+                    } else {
+                        this.unstick(el)
+                    }
+                }),
+                {threshold: [0.994, 0.00001]},
+            )
+        }
+        
+        window.uniformObserver.observe(el)
+    }
+    
+    stick (el) {
+        
+    }
+    
+    unstick (el) {
+        
+    }
+}

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

@@ -13,6 +13,7 @@ import Popover from './popover';
     disable
     hide
     show
+    timeout
 */
 export default class Tooltip extends Component {
     initialize (options) {
@@ -27,6 +28,7 @@ export default class Tooltip extends Component {
         this.enabled = true;
         this.content = options.content;
         this.el.tooltip = this;
+        this.timeout = options.timeout
 
         this.listenTo(this.el, 'mouseenter', this.show);
         this.listenTo(this.el, 'mouseleave', this.hide);
@@ -41,27 +43,38 @@ export default class Tooltip extends Component {
         clearTimeout(this.hide_timeout);
         this.el.classList.add('-active');
         if (this.popup) {
-          this.popup.show()
+            this.popup.show()
         } else {
-          this.popup = new Popover({
-              content: this.content,
-              class: 'uniformPointer -bottom bg-gray-70 bg-opacity-85 text-white rounded pad-1/2x text-sm max-width-300-px',
-              anchor: this.el,
-              align: this.options.align == "top" ? `center top` : 'center 100%',
-              offset: {
-                top: -7
-              },
-              container: this.options.container
-          }).render();
+            const pointerDirection = {
+                top: 'bottom',
+                bottom: 'top',
+                left: 'right',
+                right: 'left'
+            }[this.options.align]
+            const align = {
+                left: 'left center',
+                right: 'right center',
+                top: 'center top',
+                bottom: 'center bottom'
+            }[this.options.align]
+            const offset = { [this.options.align]: -7}
+            this.popup = new Popover({
+                content: this.content,
+                class: `uniformPointer -${pointerDirection} bg-gray-70 bg-opacity-85 text-white rounded pad-1/2x text-sm max-width-300-px `,
+                anchor: this.el,
+                align:  align || this.options.align || 'center 100%',
+                offset: offset,
+                container: this.options.container
+            }).render();
         }
     }
     
     hide () {
-      this.hide_timeout = setTimeout(() => {
-        this.popup.remove();
-        this.el.classList.remove('-active');
-        delete this.popup;
-      }, 300)
+        this.hide_timeout = setTimeout(() => {
+            this.popup.remove();
+            this.el.classList.remove('-active');
+            delete this.popup;
+        }, this.timeout)
     }
     
     disable () {

data/lib/assets/javascripts/uniform.js

@@ -5,17 +5,19 @@ import FloatingLabelInput from './uniform/floating-label-input';
 import Resizer from './uniform/resizer';
 import Tooltip from './uniform/tooltip';
 import Popover from './uniform/popover';
+import Dropzone from './uniform/dropzone';
 import {Checkbox, Radio, Toggle} from './uniform/checkbox';
 
 export {
-  Dropdown,
-  Modal,
-  Select,
-  FloatingLabelInput,
-  Resizer,
-  Tooltip,
-  Popover,
-  Checkbox,
-  Radio,
-  Toggle
+    Dropdown,
+    Modal,
+    Select,
+    FloatingLabelInput,
+    Resizer,
+    Tooltip,
+    Popover,
+    Checkbox,
+    Radio,
+    Toggle,
+    Dropzone
 }

data/lib/assets/stylesheets/uniform/base.scss

@@ -1,5 +1,5 @@
+@import 'uniform/config';
 @import 'uniform/functions';
-@import 'uniform/variables';
 @import 'uniform/mixins';
 *{
     border-width: 0;
@@ -9,14 +9,29 @@
 
 .uniformInput,
 .uniformInputGroup,
-.uniformSelect{
+.uniformSelect {
     --focus-color: #{red(color('blue'))}, #{green(color('blue'))}, #{blue(color('blue'))};
 }
 
-body{
-    --breakpoints: #{mapToString($breakpoints)};
+body {
+    --breakpoints: #{mapToString(map-get($uniform_configs, 'breakpoints'))};
     --bg-opacity: 1.0;
     --shadow-opacity: 0.1;
     --border-opacity: 1.0;
     --border-color: #{red(color('gray'))}, #{green(color('gray'))}, #{blue(color('gray'))};
-}
+}
+
+@include responsive-rule('base') { 
+    --breakpoints: #{mapToString(map-get($uniform_configs, 'breakpoints'))};
+    --bg-opacity: 1.0;
+    --shadow-opacity: 0.1;
+    --border-opacity: 1.0;
+    --border-color: #{red(color('gray'))}, #{green(color('gray'))}, #{blue(color('gray'))};
+}
+
+/*
+The following is used to pass configs in scss
+UNIFORM CONFIGS
+#{mapToJSON($uniform_configs)}
+UNIFORM CONFIGS END
+*/

data/lib/assets/stylesheets/uniform/components/buttons.scss

@@ -44,7 +44,7 @@
 //----------------------------------------------------------------
 //             Color
 //----------------------------------------------------------------
-@each $name, $color in $color_spectrum {
+@each $name, $color in map-get($uniform_configs, 'colors') {
     .uniformButton.-#{$name},
     .uniformButtonGroup.-#{$name} > *{
         background-color: rgba($color, var(--bg-opacity));
@@ -108,10 +108,6 @@
             linear-gradient(hsla(0,0%,50%, .5), hsla(0,0%,50%, .5));
         background-blend-mode: saturation, luminosity;
     }
-    
-    &:visited{
-        color: currentColor;
-    }
 }
 
 .uniformButton{
@@ -155,6 +151,9 @@
         --pad-h: 3em;
         --border-radius: 0.5em;
     }
+    &.-input {
+        --pad-v: 0.75em;
+    }
 }
 
 

data/lib/assets/stylesheets/uniform/components/checkbox.scss

@@ -1,3 +1,5 @@
+@import 'uniform/functions/icons';
+
 .uniformRadio,
 .uniformCheckbox{
     display:inline-block;