uniform-ui 3.0.0.beta5 → 3.0.0.beta8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d9c19f2b7e166d8cb8cd35a19c4877d5a4390a87628cad12f178b3a6942c4dbb
-  data.tar.gz: de18040c3185a8b9fce633138e333eaee457e03d78ddb27fba5d3dbee7f38c36
+  metadata.gz: 412523e9eff8e56b4f3874670f9b43dd0fe8deea00dc41fc59d9ca57e1f4b808
+  data.tar.gz: 91e4e049712982119860f56e3942f02d6bbc622bc9af779027100b7eeab6c66a
 SHA512:
-  metadata.gz: 67e01f1258d4dcfc24ac562d635405e8bad692acd9b0d438909d77e9a81b8bce83d885d0bf7eb1add4dc82cc420ccc5c970957504b367737ea5b4e03479050df
-  data.tar.gz: 422ce65464546fea0681323a46e007756f7d451174b6d558e4a5b2d6b7d82d6339278cffde5035562336a3a15a68a51f5265343b753a677d88c81884a49a254f
+  metadata.gz: dfe6402b702439be8cfe35a287d7dcffcb2eab8fa899a9bd2dceb0a10e4fc937e40580379242a7e94d62c57e2bf6bfb65aea1b4b9b2bf5a7a8d0b4c7e60d628f
+  data.tar.gz: e8394e0e62e9d03691ff63799387101f9b892e6715cead997885e530c73da034532422fc71fe07e6c0413fb924f88cec2f06cf90016dc5b7a68b4942025e542c

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

@@ -12,7 +12,14 @@ export default class Component {
         options = options || {};
         this.eventListens = new Array();
         this.eventListeners = new Array();
-        this.el = options.el || createElement('div', options); //TODO filter options to HTML_ATTRIBUTES
+        const htmlAttributes = {}
+        Object.keys(options).forEach(key => {
+          if (HTML_ATTRIBUTES.includes(key)) {
+            htmlAttributes[key] = options[key]
+          }
+        })
+        delete htmlAttributes.content;
+        this.el = options.el || createElement('div', htmlAttributes);
         this.cid = uniqueId('c');
     
         this.on = function (type, handler) {

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

@@ -25,7 +25,7 @@ export default class FloatingLabel extends Component {
     }
     
     render () {
-        if(!isVisible(this.input)) return;
+        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;
@@ -49,6 +49,8 @@ export default class FloatingLabel extends Component {
         if(this.input.value != ""){
           this.focus()
         }
+        
+        return this;
     }
     
     focus (e) {

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

@@ -1,5 +1,5 @@
 import Component from './component';
-import {css, trigger, append} from 'dolla';
+import {css, trigger, append, createElement} from 'dolla';
 
 /*  UniformModal.initialize
     Options
@@ -30,11 +30,8 @@ export default class Modal extends Component {
         var that = this;
 
         this.highest_z_index = 0;
-        this.overlay = document.createElement('div');
-        this.overlay.classList.add('uniformModal-overlay');
-        
-        this.blur = document.createElement('div');
-        this.blur.classList.add('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";
@@ -46,8 +43,6 @@ export default class Modal extends Component {
             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;
@@ -61,18 +56,24 @@ export default class Modal extends Component {
         document.body.appendChild(this.blur);
         document.body.appendChild(this.el);
         
-        var container = document.createElement('div');
-        container.classList.add('uniformModal-container');
-        
-        append(container, this.content);
-
-        var closeButton = document.createElement('div');
-        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);
+        
+        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) container.classList.add(this.options.klass);
         if (this.content.innerHTML) trigger(this.content, 'rendered');
@@ -82,8 +83,9 @@ export default class Modal extends Component {
     }
     
     checkCloseButton (e) {
-        if(e.target.classList.contains('uniformModal-close'))
-            this.close();
+        if(e.target.classList.contains('uniformModal-close')){
+          this.close();
+        }
     }
     
     close () {

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

@@ -117,7 +117,8 @@ export default class Popover extends Component {
         if(leftAlign == 'left'){
             position.right = outerWidth(container) - anchorOffset.left;
         } else if(leftAlign == 'center'){
-            position.left = anchorOffset.left + outerWidth(this.options.anchor) / 2 - outerWidth(this.el) / 2;
+            position.left = anchorOffset.left + outerWidth(this.options.anchor) / 2;
+            position.transform = "translateX(-50%)";
         } else if (leftAlign == 'right'){
             position.left = anchorOffset.left + outerWidth(this.options.anchor);
         } else if (leftAlign.includes("px")){

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

@@ -2,10 +2,6 @@
 @import 'uniform/variables';
 @import 'uniform/mixins';
 *{
-    --bg-opacity: 1.0;
-    --shadow-opacity: 0.1;
-    --border-opacity: 1.0;
-    --border-color: #{red(color('gray'))}, #{green(color('gray'))}, #{blue(color('gray'))};
     border-width: 0;
     border-style: solid;
     border-color: rgba(var(--border-color), var(--border-opacity));
@@ -19,4 +15,8 @@
 
 body{
     --breakpoints: #{mapToString($breakpoints)};
+    --bg-opacity: 1.0;
+    --shadow-opacity: 0.1;
+    --border-opacity: 1.0;
+    --border-color: #{red(color('gray'))}, #{green(color('gray'))}, #{blue(color('gray'))};
 }

data/lib/assets/stylesheets/uniform/components/input-group.scss

@@ -17,6 +17,11 @@
             padding-right: 0.5em;
         }
     }
+    
+    *:focus {
+        box-shadow: none;
+    }
+    
     input,
     .input{
         flex: 1 1 auto;
@@ -27,4 +32,8 @@
         padding: 0.5em;
         box-shadow: none;
     }
+    
+    .uniformInput {
+        border: none !important;
+    }
 }

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

@@ -12,46 +12,29 @@
     position: absolute;
     top: 0;
     width: 100%;
-    text-align:center;
     padding: 2em;
     z-index: 9999;
+    display: flex;
+    justify-content: center;
+    & > * {
+        z-index: 2;
+    }
 }
 
-.uniformModal-container{
-    display:inline-block;
-    text-align:left;
-    position:relative;
-    margin: auto;
-    background: white;
-    border-radius: 0.25em;
-    max-width: 90%;
-    z-index: 2;
-    &.-fill{
-        width: 90%;
-    }
-    &.-reset{
-        margin: -2em;
-        max-width: none;
-        border-radius: 0;
-        &.-fill{
-            width: 100%;
-        }
-    }
+.uniformModal-close-container {
+    position: relative;
+    width: 0;
 }
 
 .uniformModal-close{
     z-index: 2;
-    position: absolute;
-    padding: 0.3em;
-    top: 0;
-    right: 0;
-    font-size:1.5em;
     color: white;
-    opacity: 0.5;
-    line-height:1;
     cursor: pointer;
-    height: 2rem;
-    width: 2rem;
+    position: absolute;
+    bottom: 100%;
+    height: 2em;
+    width: 2em;
+    opacity: 0.5;
     &:hover{
         opacity: 1;
     }
@@ -59,19 +42,21 @@
     &:before{
         content: "";
         width: 1px;
-        height: 1.5rem;
-        transform-origin: 50% 50%;
-        transform: rotate(-45deg);
-        background: white;
+        height: 1.5em;
+        background: currentColor;
         position:absolute;
         left: 50%;
-        top: 15%;
+        top: 50%;
+        transform-origin: 50% 50%;
+        transform: translateY(-50%) rotate(-45deg);
     }
     &:before{
-        transform: rotate(45deg);
+        transform: translateY(-50%) rotate(45deg);
     }
 }
 
+// TODO replace with backdrop-filter: blur(4px);
+// when supported by Firefox https://caniuse.com/css-backdrop-filter
 .uniformModal-blur{
     top: 0;
     left: 0;

data/lib/assets/stylesheets/uniform/components/z-input.scss

@@ -15,6 +15,12 @@
         box-shadow: 0 0 0 2px rgba(var(--focus-color), 1);
     }
 }
+
+select.uniformInput {
+    padding-right: 1em;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat center right;
+}
+
 @include color-rule('.focus') using ($color) {
     --focus-color: #{red($color)}, #{green($color)}, #{blue($color)};
 }

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

@@ -124,6 +124,8 @@
     center
     stretch
     baseline
+    flex-start
+    flex-end
 ) {
     @include responsive-rule('justify-#{$selector}') {
         justify-items: $selector;
@@ -139,13 +141,15 @@
     end
     center
     stretch
+    flex-start
+    flex-end
 ) {
     .flex,
     .grid{
-        @include responsive-rule('justify-#{$selector}') {
+        @include responsive-rule('justify-self-#{$selector}') {
             justify-self: $selector;
         }
-        @include responsive-rule('align-#{$selector}') {
+        @include responsive-rule('align-self-#{$selector}') {
             align-self: $selector;
         }
     }

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

@@ -32,6 +32,12 @@
     @include responsive-rule(".min-width-#{$i * 5}-vw"){ min-width: $i * 5vw };
     @include responsive-rule(".max-width-#{$i * 5}-vw"){ max-width: $i * 5vw };
 }
+
+@for $i from 0 through 20 {
+    @include responsive-rule(".height-#{$i * 5}-vh"){ height: $i * 5vh };
+    @include responsive-rule(".min-height-#{$i * 5}-vh"){ min-height: $i * 5vh };
+    @include responsive-rule(".max-height-#{$i * 5}-vh"){ max-height: $i * 5vh };
+}
 @include responsive-rule(".height-100-vh"){ height: 100vh; };
 @include responsive-rule(".min-height-100-vh"){ min-height: 100vh; };
 @include responsive-rule(".max-height-100-vh"){ max-height: 100vh; };
@@ -41,14 +47,14 @@
 //----------------------------------------------------------------
 @include responsive-rule(".height-auto"){ height: auto; };
 @include responsive-rule(".height-full"){ height: 100%; };
-@include responsive-rule(".max-height-auto"){ height: auto; };
-@include responsive-rule(".max-height-full"){ height: 100%; };
-@include responsive-rule(".min-height-auto"){ height: auto; };
-@include responsive-rule(".min-height-full"){ height: 100%; };
+@include responsive-rule(".max-height-auto"){ max-height: auto; };
+@include responsive-rule(".max-height-full"){ max-height: 100%; };
+@include responsive-rule(".min-height-auto"){ min-height: auto; };
+@include responsive-rule(".min-height-full"){ min-height: 100%; };
 
 @include responsive-rule(".width-auto"){ width: auto; };
 @include responsive-rule(".width-full"){ width: 100%; };
-@include responsive-rule(".max-width-auto"){ width: auto; };
-@include responsive-rule(".max-width-full"){ width: 100%; };
-@include responsive-rule(".min-width-auto"){ width: auto; };
-@include responsive-rule(".min-width-full"){ width: 100%; };
+@include responsive-rule(".max-width-auto"){ max-width: auto; };
+@include responsive-rule(".max-width-full"){ max-width: 100%; };
+@include responsive-rule(".min-width-auto"){ min-width: auto; };
+@include responsive-rule(".min-width-full"){ min-width: 100%; };

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

@@ -13,6 +13,12 @@
         margin-top: $size
     }
 }
+@include size-rule('.space') using ($size) {
+    &  > * + * {
+        margin-top: $size;
+        margin-left: $size;
+    }
+}
 
 //----------------------------------------------------------------
 //             Margin

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

@@ -108,6 +108,8 @@ $sizes: map-merge((
     "sm":        0.9rem,
     "lg":        1.2rem,
     "xl":        1.4rem,
+    "2x":        2rem,
+    "4x":        4rem,
   ),
   pad: (
     ''       : 1rem,

data/lib/uniform/version.rb

@@ -1,3 +1,3 @@
 module Uniform
-  VERSION = "3.0.0.beta5"
+  VERSION = "3.0.0.beta8"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: uniform-ui
 version: !ruby/object:Gem::Version
-  version: 3.0.0.beta5
+  version: 3.0.0.beta8
 platform: ruby
 authors:
 - Ben Ehmke
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-09 00:00:00.000000000 Z
+date: 2021-08-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -110,7 +110,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubygems_version: 3.2.3
+rubygems_version: 3.2.15
 signing_key:
 specification_version: 4
 summary: Sass UI