uniform-ui 3.0.0.beta2 → 3.0.0.beta4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bbdcb9dbd05373a00cbd0d38122c4022daefafb4b11cbd25977e57f7367ab38c
-  data.tar.gz: 074e042a4176f0e1f7e61107b67dcfdbf54c24a3cc937925fa0e8f2b17f1735b
+  metadata.gz: 2430fe0dd6aee3aa8a1463025c1375a2fb999f9945aa4303a6d997911d022132
+  data.tar.gz: dcc784665e6b469959382171c77cd2bd2d781c18776ccac40827bfa7b7c6d69d
 SHA512:
-  metadata.gz: daa319ca0955e68bf4f3180066b12a8a0dc58208e26b3176b86a4c9449a645c74c396b967bd9b76c732758637623c9b2e9ede3979522e649687be7106ba396cd
-  data.tar.gz: 4d200fdbe66802694345f57d44c5b82cd0a94e149cf7c4c9cac7726f7423116cdb509bbd24adc946a2c8c834012f70153fddb89dc7f4f0e1d45fa1b37263bfa9
+  metadata.gz: f27411ee8b95de89de612e492ab083617f33e4ff170151772ef3bdfabbd126087f59419cc0a3baf868d584a581bff9c61dd2ca246a2c317dd1b2e3fdd748875d
+  data.tar.gz: d61f77703021262528d3b915b8ca563950fbd3fcf24fdc29a787856c4bce0dec61a3b7fda826e0b91812ec2245895bb4402255cb4b56b0be51dba7245e1f1aff

data/lib/assets/javascripts/uniform.js

@@ -1,8 +1,21 @@
-export Dropdown from './uniform/dropdown';
-export Modal from './uniform/modal';
-export Select from './uniform/select';
-export FloatingLabelInput from './uniform/floating-label-input';
-export Resizer from './uniform/resizer';
-export Tooltip from './uniform/tooltip';
-export Popover from './uniform/popover';
-export {Checkbox, Radio, Toggle} from './uniform/checkbox';
+import Dropdown from './uniform/dropdown';
+import Modal from './uniform/modal';
+import Select from './uniform/select';
+import FloatingLabelInput from './uniform/floating-label-input';
+import Resizer from './uniform/resizer';
+import Tooltip from './uniform/tooltip';
+import Popover from './uniform/popover';
+import {Checkbox, Radio, Toggle} from './uniform/checkbox';
+
+export {
+  Dropdown,
+  Modal,
+  Select,
+  FloatingLabelInput,
+  Resizer,
+  Tooltip,
+  Popover,
+  Checkbox,
+  Radio,
+  Toggle
+}

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

@@ -1,5 +1,5 @@
 import Component from './component';
-import {addClass, toggleClass, trigger, createElement} from 'dolla';
+import { trigger, createElement} from 'dolla';
 
 export class Checkbox extends Component {
     static CSSClass = "uniformCheckbox";
@@ -15,7 +15,7 @@ export class Checkbox extends Component {
         }
         
         if(!options.tabindex) this.el.tabIndex = 0;
-        addClass(this.el, this.constructor.CSSClass);
+        this.el.classList.add(this.constructor.CSSClass);
 
         this.listenTo(this.el, 'click', this.click);
         this.listenTo(this.input, 'change', this.change);
@@ -38,7 +38,7 @@ export class Checkbox extends Component {
     }
     
     change () {
-        toggleClass(this.el, 'checked', this.input.checked);
+        this.el.classList.toggle('checked', this.input.checked);
     }
     
     click (e) {

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

@@ -1,4 +1,4 @@
-import {hasClass, HTML_ATTRIBUTES, createElement, closest} from 'dolla';
+import {hasClass, HTML_ATTRIBUTES, createElement} from 'dolla';
 
 function uniqueId(prefix){
     window.idCounter || (window.idCounter = 0);
@@ -74,7 +74,7 @@ export default class Component {
             node,
             event,
             function(e){
-                if(!scope || (e.target.matches(scope) || closest(e.target, scope))) {
+                if(!scope || (e.target.matches(scope) || e.target.closest(scope))) {
                   return callback.bind(context)(...arguments);
                 }
             }.bind(context)

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

@@ -1,5 +1,5 @@
 import Component from './component';
-import { isVisible, isFocus, hasClass, addClass, removeClass, css, createElement } from 'dolla';
+import { isVisible, isFocus, css, createElement } from 'dolla';
 
 export default class FloatingLabel extends Component {
     
@@ -17,7 +17,7 @@ export default class FloatingLabel extends Component {
         });
         this.input.setAttribute('aria-label', options.label);
         
-        addClass(this.el, 'uniformFloatingLabelInput');
+        this.el.classList.add('uniformFloatingLabelInput');
         
         this.listenTo(this.input, 'focus', this.focus);
         this.listenTo(this.input, 'blur', this.blur);
@@ -52,12 +52,12 @@ export default class FloatingLabel extends Component {
     }
     
     focus (e) {
-        addClass(this.el, 'present');
+        this.el.classList.add('present');
     }
     
     blur (e) {
         if(this.input.value == ""){
-          removeClass(this.el, 'present');
+          this.el.classList.remove('present');
         }
     }
 }

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

@@ -1,5 +1,5 @@
 import Component from './component';
-import {addClass, hasClass, removeClass, css, trigger} from 'dolla';
+import {css, trigger, append} from 'dolla';
 
 /*  UniformModal.initialize
     Options
@@ -16,7 +16,7 @@ export default class Modal extends Component {
         this.content = options.content;
         this.el.removeAttribute('content');
 
-        addClass(this.el, 'uniformModal');
+        this.el.classList.add('uniformModal');
         this.listenTo(document, 'keyup', this.keyup);
         this.listenTo(this.el, 'click', this.checkCloseButton);
     }
@@ -28,14 +28,13 @@ 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');
-        addClass(this.overlay, 'uniformModal-overlay');
+        this.overlay.classList.add('uniformModal-overlay');
         
         this.blur = document.createElement('div');
-        addClass(this.blur, 'uniformModal-blur');
+        this.blur.classList.add('uniformModal-blur');
         
         this.original_scroll = window.scrollY;
         this.blur.style.top = 0 - this.original_scroll + "px";
@@ -58,40 +57,37 @@ export default class Modal extends Component {
           }
         }
 
-        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');
-        addClass(container, 'uniformModal-container');
-        if (content instanceof Node) {
-            container.appendChild(content);
-        } else {
-            container.innerHTML = content;
-        }
+        container.classList.add('uniformModal-container');
+        
+        append(container, this.content);
 
         var closeButton = document.createElement('div');
-        addClass(closeButton, 'uniformModal-close');
+        closeButton.classList.add('uniformModal-close');
         this.el.appendChild(closeButton);
         
         this.el.style.top = window.scrollY;
         this.listenTo(this.overlay, 'click', this.close);
         this.el.appendChild(container);
 
-        if (this.options.klass) addClass(container, this.options.klass);
-        if (content.innerHTML) 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(hasClass(e.target, 'uniformModal-close'))
+        if(e.target.classList.contains('uniformModal-close'))
             this.close();
     }
     
     close () {
-        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 { closest, offset, outerWidth, outerHeight, removeClass, addClass } from 'dolla';
+import { offset, outerWidth, outerHeight, append } from 'dolla';
 
 /*
     Requirements
@@ -38,7 +38,7 @@ export default class Popover extends Component {
         });
         
         if(typeof this.options.container == "string"){
-          this.options.container = closest(this.options.anchor, this.options.container)
+          this.options.container = this.options.anchor.closest(this.options.container)
         }
         this.options.container = this.options.container || document.body
         
@@ -49,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();
@@ -154,9 +151,9 @@ export default class Popover extends Component {
         this.el.style.top = null;
         this.el.style.bottom = null;
         this.el.style.transform = null;
-        removeClass(this.el, 'popover-left popover-right popover-center popover-top popover-bottom');
-        addClass(this.el, 'popover-' + topAlign);
-        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,5 +1,5 @@
 import Component from './component';
-import { trigger, toggleClass } from 'dolla';
+import { trigger } from 'dolla';
 
 export default class Resizer extends Component {
     
@@ -28,9 +28,9 @@ export default class Resizer extends Component {
         }
         
         if(attribute == "min-width") {
-          toggleClass(this.el, css_class, width > value)
+          this.el.classList.toggle(css_class, width > value)
         } else if (attribute == "max-width") {
-          toggleClass(this.el, css_class, width < value)
+          this.el.classList.toggle(css_class, width < value)
         } else {
           throw "unsupported media feature"
         }

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

@@ -2,7 +2,7 @@ import Component from './component';
 import Popover from './popover';
 import Modal from './modal';
 import { check as checkIcon, arrow_down as arrowIcon, x as xIcon } from './icons';
-import { createElement, HTML_ATTRIBUTES, filter, css, toggleClass, removeClass, isEmpty, trigger, hasClass, closest } from 'dolla';
+import { createElement, HTML_ATTRIBUTES, filter, css, isEmpty, trigger } from 'dolla';
 
 /*
   options: array of html options, each item can be string | array | object
@@ -98,9 +98,9 @@ export default class Select extends Component {
   selectOption (e) {
     const makeActive = !e.target.option.selected;
     if (!this.options.multiple && makeActive) {
-      removeClass(e.target.offsetParent.querySelectorAll('.active'), 'active');
+      e.target.offsetParent.querySelectorAll('.active').forEach(el => el.classList.remove('active'));
     }
-    toggleClass(e.target, 'active', makeActive);
+    e.target.classList.toggle('active', makeActive);
     e.target.option.selected = makeActive;
         
     if (!this.options.multiple) {
@@ -114,7 +114,7 @@ export default class Select extends Component {
     e.preventDefault();
     e.stopPropagation();
     var option = filter(this.select.querySelectorAll("option"), function(el){
-      return el.innerText.trim() == closest(e.target, '.uniformSelect-selection').innerText.trim();
+      return el.innerText.trim() == e.target.closest('.uniformSelect-selection').innerText.trim();
     })[0];
     if(!option) return;
     option.selected = false;
@@ -124,11 +124,11 @@ export default class Select extends Component {
   }
   
   toggleOptions (e) {
-    if(e && (e.target.matches('.uniformSelect-remove') || closest(e.target, '.uniformSelect-remove'))){
+    if(e && (e.target.matches('.uniformSelect-remove') || e.target.closest('.uniformSelect-remove'))){
       return;
     }
-    toggleClass(this.el, 'active')
-    if(hasClass(this.el, 'active')){
+    this.el.classList.toggle('active')
+    if(this.el.contains('active')){
       this.renderOptions()
     } else {
       this.removeOptions()
@@ -152,7 +152,7 @@ export default class Select extends Component {
       button.textContent = option.textContent;
       button.value = option.value;
       if (button.textContent == "") button.innerHTML = "<span class='text-italic text-muted'>None</span>";
-      toggleClass(button, 'active', option.selected);
+      button.classList.toggle('active', option.selected);
       
       console.log(this.options.limit, index);
       if (this.options.limit && (index + 1) > this.options.limit) {
@@ -211,7 +211,7 @@ export default class Select extends Component {
     e.preventDefault();
     e.stopPropagation();
     if(!this.popover) return;
-    removeClass(this.popover.el.querySelectorAll('button.hide'), 'hide');
+    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/stylesheets/uniform/defaults.scss

@@ -16,9 +16,6 @@ a{
     &:hover{
         color: color('blue-60');
     }
-    &:visited{
-        color: #6738e4;
-    }
 }
 h1,
 h2,

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

@@ -25,6 +25,8 @@
     padding: 0;
     margin: 0;
     list-style:none;
+    text-decoration: none;
+    color: inherit;
 }
 
 //----------------------------------------------------------------

data/lib/assets/stylesheets/uniform/utilities/borders.scss

@@ -31,22 +31,21 @@
 //             Border Radius
 //----------------------------------------------------------------
 @include size-rule('.rounded') using ($size){ border-radius: $size;}
-@include responsive-rule('.rounded') { border-radius: 0.25em;}
-@include responsive-rule('.rounded-top') {
-    border-top-right-radius: 0.25em;
-    border-top-left-radius: 0.25em;
+@include size-rule('.rounded-top') using ($size){
+    border-top-right-radius: $size;
+    border-top-left-radius: $size;
 }
-@include responsive-rule('.rounded-bottom') {
-    border-bottom-right-radius: 0.25em;
-    border-bottom-left-radius: 0.25em;
+@include size-rule('.rounded-bottom') using ($size){
+    border-bottom-right-radius: $size;
+    border-bottom-left-radius: $size;
 }
-@include responsive-rule('.rounded-left') {
-    border-top-left-radius: 0.25em;
-    border-bottom-left-radius: 0.25em;
+@include size-rule('.rounded-left') using ($size){
+    border-top-left-radius: $size;
+    border-bottom-left-radius: $size;
 }
-@include responsive-rule('.rounded-right') {
-    border-top-right-radius: 0.25em;
-    border-bottom-right-radius: 0.25em;
+@include size-rule('.rounded-right') using ($size){
+    border-top-right-radius: $size;
+    border-bottom-right-radius: $size;
 }
 
 @include responsive-rule('.square') { border-radius: 0;}

data/lib/assets/stylesheets/uniform/utilities/spacing.scss

@@ -1,5 +1,19 @@
 @import 'uniform/mixins';
 
+//----------------------------------------------------------------
+//             Spacing
+//----------------------------------------------------------------
+@include size-rule('.space-h') using ($size) {
+    &  > * + * {
+        margin-left: $size;
+    }
+}
+@include size-rule('.space-v') using ($size) {
+    &  > * + * {
+        margin-top: $size
+    }
+}
+
 //----------------------------------------------------------------
 //             Margin
 //----------------------------------------------------------------
@@ -36,20 +50,6 @@
 }
 
 
-//----------------------------------------------------------------
-//             Spacing
-//----------------------------------------------------------------
-@include size-rule('.space-h') using ($size) {
-    &  > * + * {
-        margin-left: $size;
-    }
-}
-@include size-rule('.space-v') using ($size) {
-    &  > * + * {
-        margin-top: $size
-    }
-}
-
 
 //----------------------------------------------------------------
 //             Pad

data/lib/assets/stylesheets/uniform/utilities/svg.scss

@@ -0,0 +1,5 @@
+@import 'uniform/mixins';
+ 
+@include size-rule('.stroke') using ($size) {stroke-width: $size;}
+@include color-rule('.stroke') using ($color) {stroke: $color;}
+@include color-rule('.fill') using ($color) {fill: $color;}

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

@@ -74,12 +74,12 @@ $sizes: map-merge((
     '4px': 4px
   ),
   rounded: (
-    '':  1rem,
+    '':  0.25rem,
     'none': 0,
-    "xs":        0.8rem,
-    "sm":        0.9rem,
-    "lg":        1.2rem,
-    "xl":        1.4rem,
+    "xs":        0.1rem,
+    "sm":        0.2rem,
+    "lg":        0.5rem,
+    "xl":        1rem,
   ),
   margin: (
     '':  1rem,
@@ -110,25 +110,34 @@ $sizes: map-merge((
     "xl":        1.4rem,
   ),
   pad: (
-    '':  1rem,
-    'none': 0,
-    "1\\/4x":      0.25rem,
-    "1\\/2x":      0.5rem,
-    "3\\/4x":      0.75rem,
-    "xs":        0.8rem,
-    "sm":        0.9rem,
-    "lg":        1.2rem,
-    "xl":        1.4rem,
-    "2x":        2rem,
+    ''       : 1rem,
+    'none'   : 0,
+    "1\\/4x" : 0.25rem,
+    "1\\/2x" : 0.5rem,
+    "3\\/4x" : 0.75rem,
+    "xs"     : 0.8rem,
+    "sm"     : 0.9rem,
+    "lg"     : 1.2rem,
+    "xl"     : 1.4rem,
+    "2x"     : 2rem,
+
   ),
   text: (
     '':  1rem,
-    "xs":        0.8rem,
-    "sm":        0.9rem,
-    "lg":        1.2rem,
-    "xl":        1.4rem,
-    "2x":        2rem,
-    "4x":        4rem,
-    "8x":        8rem
+    "xs" : 0.8rem,
+    "sm" : 0.9rem,
+    "lg" : 1.2rem,
+    "xl" : 1.4rem,
+    "2x" : 2rem,
+    "4x" : 4rem,
+    "8x" : 8rem
+
+  ),
+  stroke: (
+      "sm" : 0.5px,
+      "md" : 1px,
+      "lg" : 1.5px,
+      "2x" : 2px,
+      "3x" : 3px
   )
 ), if(variable-exists('sizes'), $sizes, ()));

data/lib/uniform/version.rb

@@ -1,3 +1,3 @@
 module Uniform
-  VERSION = "3.0.0.beta2"
+  VERSION = "3.0.0.beta4"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: uniform-ui
 version: !ruby/object:Gem::Version
-  version: 3.0.0.beta2
+  version: 3.0.0.beta4
 platform: ruby
 authors:
 - Ben Ehmke
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-03-19 00:00:00.000000000 Z
+date: 2021-04-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -86,6 +86,7 @@ files:
 - lib/assets/stylesheets/uniform/utilities/position.scss
 - lib/assets/stylesheets/uniform/utilities/sizing.scss
 - lib/assets/stylesheets/uniform/utilities/spacing.scss
+- lib/assets/stylesheets/uniform/utilities/svg.scss
 - lib/assets/stylesheets/uniform/utilities/text.scss
 - lib/assets/stylesheets/uniform/variables.scss
 - lib/uniform.rb